figure {
  margin: 0;
}

.button-container {
  display: flex;
  flex-direction: column;
  width: fit-content;
  align-items: center;
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-container {
  display: grid;
}

.hero-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.hero-banner {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
  z-index: 1;
}

.hero-heading {
  order: 2;
}

.hero-subheading {
  order: 1;
  border-style: solid;
}

.hero-value {
  order: 3;
}

.hero-buttons {
  order: 4;
  display: flex;
}

.hero-logos {
  order: 5;
  display: flex;
  width: fit-content;
}

.hero-logos .image-field {
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
}

.hero-side-logos {
  display: flex;
}

.hero-side-logos .image-field {
  margin: 0;
  max-width: var(--side-logo-w);
  min-width: var(--side-logo-w);
  max-height: var(--side-logo-h);
  min-height: var(--side-logo-h);
}

.hero-image-container {
  display: flex;
  gap: 2rem;
}

.hero-image {
  margin-left: auto;
}

.hero-background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -2;
  top: 0;
  left: 0;
}

.hero-background-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 100% var(--hero-bg-ver);
}

.image-text-content {
  display: flex;
  flex-direction: column;
}

.image-text-items {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.image-text-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "image-area content-area";
}

.image-text-item.is-reversed {
  grid-template-areas: "content-area image-area";
}

.item-kicker,
.item-button {
  width: fit-content;
}

.text-right .item-kicker,
.text-right .item-heading,
.text-right .item-subheading,
.text-right .item-description,
.text-right .button-container {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.item-image {
  grid-area: image-area;
}

.item-content {
  grid-area: content-area;
  display: flex;
  flex-direction: column;
}

.item-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.8rem;
}

.splide__list,
.grid__list {
  align-items: stretch;
  margin-top: 0;
}

.product-section .product,
.category-section .splide__slide,
.category-section .woocommerce-category-list-item {
  position: relative;
  height: 100%;
}

.grid__list .button,
.splide__track .button {
  margin-top: auto;
}

.product-info,
.product-section .product {
  display: flex;
  flex-direction: column;
}

.product-info {
  width: 100%;
  height: 100%;
}

.splide {
  max-width: 100%;
}

.splide__slide {
  display: flex;
  justify-content: center;
  align-items: end;
}

.grid__list {
  display: grid;
  width: 100%;
  list-style: none;
  padding: 0;
}

.splide__arrows {
  display: flex;
  justify-content: space-between;
  justify-self: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 20rem;
}

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}

.splide__pagination {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  visibility: visible;
  opacity: 1;
  list-style: none;
  z-index: 2;
  width: auto;
}

.splide__pagination li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.splide__pagination__page {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s;
  visibility: visible;
  opacity: 1;
}

.splide__pagination__page.is-active {
  background: var(--prim-btn-bg, #0077ff);
  transform: scale(1.3);
}

@media only screen and (max-width: 767px) {

  .image-text-item,
  .image-text-item.is-reversed {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "image-area"
      "content-area";
  }

  .text-right .item-kicker,
  .text-right .item-heading,
  .text-right .item-subheading,
  .text-right .item-description,
  .text-right .button-container {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

.section-heading {
  max-width: var(--st-mw);
  font-size: var(--subh-sz);
  line-height: var(--subh-lh);
  margin-bottom: var(--subh-mb);
}

.section-heading:not(:has(+ .section-subheading)) {
  margin-bottom: var(--subh-mb-col);
}

.section-subheading {
  font-size: var(--ss-sz);
  font-weight: var(--ss-fw);
  font-style: var(--ss-fs);
  color: var(--ss-col);
  line-height: var(--ss-lh);
  margin-bottom: var(--ss-mb);
}

.section-subheading+ul,
.section-subheading+.image-text-content,
.section-subheading+.splide {
  margin-top: calc(var(--sd-mb) - var(--ss-mb));
}

.section-description:not(.cta-description, .faq-description) {
  max-width: var(--st-mw);
  margin-bottom: var(--sd-mb);
}

.item-heading {
  font-size: var(--row-head-sz);
  line-height: var(--row-head-lh);
  margin-bottom: var(--row-head-mb);
}

.item-heading:not(:has(+ .item-subheading)) {
  margin-bottom: var(--row-head-mb-col);
}

.item-subheading {
  font-size: var(--row-subh-sz);
  font-weight: var(--ss-fw);
  font-style: var(--ss-fs);
  color: var(--ss-col);
  line-height: var(--row-subh-lh);
  margin-bottom: var(--row-subh-mb);
}

.section-button {
  margin-top: var(--sect-btn-mt);
}

.section-kicker:not(.hero-kicker),
.item-kicker {
  font-family: var(--kick-txt);
  font-size: var(--kick-sz);
  color: var(--kick-col);
  line-height: 1.2;
  margin-bottom: var(--kick-m-bott);
  background-color: var(--kick-bg);
  padding: var(--kick-top) var(--kick-right) var(--kick-bottom) var(--kick-left);
  border: var(--kick-b-w) var(--kick-b-styl) var(--kick-b-col);
  border-radius: var(--kick-b-rad);
}

.item-kicker {
  font-size: calc(var(--kick-sz) * .9);
  line-height: calc(var(--kick-line-height) * .9);
  margin-bottom: calc(var(--kick-m-bott) * .9);
  padding: calc(var(--kick-top) * .9) calc(var(--kick-right) * .9) calc(var(--kick-bottom) * .9) calc(var(--kick-left) * .9);
}

.section-kicker img,
.section-kicker svg {
  width: var(--kick-img-sz);
  height: var(--kick-img-sz);
}

.item-kicker svg,
.item-kicker img {
  display: flex;
  width: calc(var(--kick-img-sz) * .9);
  height: calc(var(--kick-img-sz) * .9);
}

.item-description {
  font-size: var(--rep-desc-sz);
  color: var(--rep-desc-col);
  line-height: var(--rep-desc-lh);
}

.item-button {
  margin-top: var(--item-btn-mt);
}

/* Star Rating */
.trex-star-rating {
  display: flex;
  align-items: center;
  font-size: calc(var(--bod-sz) * 1.2);
  --percent: calc(var(--rating) / 5 * 100%);
  line-height: 1;
  transition: .3s;
}

.trex-star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  background: linear-gradient(90deg, #fbbf24 var(--percent), hsl(0, 0%, 90%) var(--percent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}