/* stylelint-disable selector-pseudo-element-no-unknown,selector-pseudo-class-no-unknown,selector-type-no-unknown,declaration-empty-line-before */
@layer block {
  @layer core, modifyers;

  @layer core {
    .content-carousel {
      /* semantic ratios */
      --ar-square: 1 / 1;
      --ar-landscape: 5 / 3;
      --ar-portrait: 3 / 5;
      --ar-widescreen: 16 / 9;
      --ar-ultrawide: 18 / 5;
      --ar-golden: 1.618 / 1;

      /* numeric multipliers (height / width) */
      --mul-square: 1;
      --mul-landscape: 0.6; /* 3/5 */
      --mul-portrait: 1.6667; /* 5/3 */
      --mul-widescreen: 0.5625; /* 9/16 */
      --mul-ultrawide: 0.2778; /* 5/18 */
      --mul-golden: 0.618; /* 1/1.618... */

      /* active */
      --active-ar: var(--ar-portrait);
      --active-mul: var(--mul-portrait);

      --outter-gutter: var(--gutter-m);
      --col-gap: 0;
      --visible-gaps: 0;
      --visible-slides: 1;

      --slide-height-expr: 100cqi * var(--active-mul);
      --carousel-height-expr: var(--slide-height-expr) -
        ((var(--outter-gutter) * 2) * var(--active-mul));

      --nav-button-size: 44px;

      position: relative;
      container-type: inline-size;
      container-name: carousel;
      isolation: isolate;
    }

    /* ============================================================================================ */
    /* CAROUSEL HEADING */
    /* ============================================================================================ */
    .content-carousel .heading-wrapper {
      padding: 0 var(--outter-gutter);
      margin-bottom: var(--gutter-m);
    }

    .content-carousel .heading-wrapper :where(h1, h2, h3, h4, h5, h6) {
      margin: 0;
      line-height: 1;
    }

    /* ============================================================================================ */
    /* CAROUSEL WRAPPER */
    /* ============================================================================================ */
    .carousel-slides-wrapper {
      container-type: inline-size;
      container-name: slides;
      padding: 0;
      margin: 0;

      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;

      display: flex;
      list-style-type: none;
      counter-reset: item;

      /* stylelint-disable declaration-property-value-no-unknown */
      @supports (container-type: scroll-state) {
        container-type: inline-size scroll-state;
      }

      @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
      }

      &::-webkit-scrollbar {
        display: none;
      }

      &:focus-visible {
        scrollbar-color: var(--clr-neutral-70) transparent;
        outline: none;
      }
    }

    /* ============================================================================================ */
    /* PAGINATION CONTAINER */
    /* ============================================================================================ */
    @supports (scroll-marker-group: after) {
      @container carousel (width >= 600px) {
        .carousel-slides-wrapper {
          scroll-marker-group: after;
        }
      }

      @supports not (container-type: inline-size) {
        @media (min-width: 600px) {
          .carousel-slides-wrapper {
            scroll-marker-group: after;
          }
        }
      }

      .carousel-slides-wrapper::scroll-marker-group {
        container: marker-group / inline-size;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
        scrollbar-width: none;
        scroll-behavior: smooth;
        height: 40px;
        inline-size: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 10px;
        justify-self: center;
      }
    }

    /* ============================================================================================ */
    /* SLIDE */
    /* ============================================================================================ */
    .carousel-slide {
      flex: 1 0 100%;
      padding: 0;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: flex-start;
      overflow: clip;
      scroll-snap-align: start;
      scroll-snap-stop: always;

      &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
      }
    }

    /* ============================================================================================ */
    /* PAGINATION */
    /* ============================================================================================ */
    @supports selector(::scroll-marker) {
      .carousel-slide::scroll-marker {
        content: "" / "attr(data-slide-index)";
        display: block;
        width: 24px;
        height: 40px;
        background: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="%23E9E4E4"/></svg>')
          center / 12px 12px no-repeat;
        scroll-snap-align: center;
      }

      .carousel-slide::scroll-marker:target-current {
        width: 44px;
        background: url('data:image/svg+xml,<svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="36" height="12" rx="6" fill="black"/></svg>')
          center / 36px 12px no-repeat;
      }

      .carousel-slide::scroll-marker:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
      }
    }

    .carousel-slide > a {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      text-decoration: none;

      &:is(:hover, :focus-visible) {
        color: currentColor;
      }
    }

    /* ===== IMAGES ===== */
    .carousel-slide .slide-img,
    .carousel-slide .slide-img :where(picture, img) {
      width: 100%;
    }

    .carousel-slide .mobile-img:empty ~ .desktop-img {
      display: block;
    }

    .carousel-slide .mobile-img {
      @container carousel (width >= 600px) {
        display: none;
      }

      @supports not (container-type: inline-size) {
        @media (width >= 600px) {
          display: none;
        }
      }
    }

    .carousel-slide .desktop-img {
      display: none;

      @container carousel (width >= 600px) {
        display: block;
      }

      @supports not (container-type: inline-size) {
        @media (width >= 600px) {
          display: block;
        }
      }
    }

    /* ===== BASE COPY ===== */
    .carousel-slide .slide-copy {
      width: 100%;
      padding: 1em 0.5em 0 0.15em;
    }

    .carousel-slide .slide-copy,
    .carousel-slide .slide-copy > p {
      margin: 0;
      text-wrap: pretty;
      font-weight: var(--fw-medium);
      font-size: clamp(1.2rem, 1.2rem + 0.4vw, 2.4rem);
      line-height: 1.2;

      @media (min-width: 1200px) {
        font-size: clamp(1.2rem, 1rem + 0.7vw, 2.2rem);
      }
    }

    .carousel-slide .slide-copy[data-align="center"] {
      padding-inline: 0.5em;
    }

    .carousel-slide .slide-copy:has(> .button) {
      padding-block-start: 0;
    }

    .carousel-slide:has(.promo) .slide-copy {
      position: relative;
    }

    .carousel-slide .promo {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      translate: 0 -100%;
      background: var(--clr-black);
      color: var(--clr-white);
      text-align: center;
      padding: 0.25em;
      min-height: 40px;
      font-size: clamp(1rem, 1rem + 0.2vw, 2rem);
      font-weight: bold;
      line-height: 1;

      @media (min-width: 400px) {
        font-size: clamp(1rem, 1rem + 0.6vw, 2rem);
      }

      @media (min-width: 600px) {
        font-size: clamp(1rem, 0.8rem + 0.5vw, 2rem);
      }

      @media (min-width: 900px) {
        font-size: clamp(1rem, 1rem + 0.7vw, 2.4rem);
      }

      @media (min-width: 1800px) {
        font-size: clamp(1rem, 1rem + 1vw, 2.6rem);
        padding-block: 0.5em;
      }
    }

    .carousel-slide .promo:has(button) {
      @media (max-width: 899px) {
        padding: 0.25em 30px 0.25em 0.25em;
      }

      text-indent: 1ch;
    }

    .carousel-slide .promo button.details-icon {
      @media (max-width: 899px) {
        position: absolute !important;
        right: 0;
        top: 50%;
        translate: 0 -50%;
      }
    }

    .carousel-slide .promo button.details-icon::after {
      @media (min-width: 900px) {
        mask-position: 35% 50% !important;
      }
    }

    /* ============================================================================================ */
    /* BUTTONS */
    /* ============================================================================================ */
    @supports selector(.carousel-slides-wrapper::scroll-button(left)) {
      .content-carousel .carousel-slides-wrapper::scroll-button(left),
      .content-carousel .carousel-slides-wrapper::scroll-button(right) {
        content: "";
        background: var(--clr-neutral-40)
          url('data:image/svg+xml,<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.71484 1.94455L9.94342 10.5001L1.71484 19.0557" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>')
          58% 50% / 30% no-repeat;
        border: 1px solid var(--clr-neutral-80);
        border-radius: 50%;
        transition: all 0.3s ease-in-out;
        width: var(--nav-button-size);
        aspect-ratio: 1;
        display: flex;
        place-items: center;
        place-content: center;
        cursor: pointer;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 5;
        top: 50%;
        translate: 0 -50%;

        @container carousel (width >= 600px) {
          opacity: 0;
        }

        @supports not (container-type: inline-size) {
          @media (min-width: 1800px) {
            opacity: 0;
          }
        }
      }

      .content-carousel
        .carousel-slides-wrapper:is(:hover, :focus-visible)::scroll-button(
          *
        ):not(:disabled) {
        @container carousel (width >= 600px) {
          opacity: 1;
        }

        @supports not (container-type: inline-size) {
          @media (min-width: 600px) {
            opacity: 1;
          }
        }
      }

      .content-carousel .carousel-slides-wrapper::scroll-button(left) {
        left: 4px;
        rotate: 180deg;
        content: "" / "Scroll Left";
      }

      .content-carousel .carousel-slides-wrapper::scroll-button(right) {
        right: 4px;
        content: "" / "Scroll Right";
      }

      .content-carousel
        .carousel-slides-wrapper::scroll-button(*):not(:disabled):is(
          :hover,
          :focus-visible
        ) {
        transform: scale(1.1);
      }

      .content-carousel .carousel-slides-wrapper::scroll-button(*):disabled {
        opacity: 0;
        cursor: not-allowed;
      }
    }

    /* ============================================================================================ */
    /* fallbacks */
    /* ============================================================================================ */
    /* Fallback UI is hidden by default */
    .carousel-fallback-nav,
    .carousel-fallback-pagination {
      display: none;
    }

    /* Turn on fallback UI when JS decides native isn't available */
    @container carousel (width >= 600px) {
      .content-carousel.is-fallback-ui .carousel-fallback-nav,
      .content-carousel.is-fallback-ui .carousel-fallback-pagination {
        display: block;
      }
    }

    .is-fallback-ui.carousel-fallback-nav,
    .is-fallback-ui.carousel-fallback-pagination {
      display: block;
    }

    .carousel-fallback-nav button {
      background: var(--clr-neutral-40)
        url('data:image/svg+xml,<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.71484 1.94455L9.94342 10.5001L1.71484 19.0557" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>')
        58% 50% / 35% no-repeat;
      border: 1px solid var(--clr-neutral-80);
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      width: var(--nav-button-size);
      aspect-ratio: 1;
      display: flex;
      place-items: center;
      place-content: center;
      cursor: pointer;
      margin: 0;
      padding: 0;
      position: absolute;
      z-index: 5;
      top: 50%;
      translate: 0 -50%;
      opacity: 0;

      &:disabled {
        opacity: 0;
        cursor: not-allowed;
      }
    }

    .carousel-fallback-nav button.prev {
      left: 4px;
      rotate: 180deg;
    }

    .carousel-fallback-nav button.next {
      right: 4px;
    }

    @container carousel (width >= 600px) {
      .is-fallback-ui:is(:hover, :focus-within)
        .carousel-fallback-nav
        button:not(:disabled) {
        opacity: 1;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .is-fallback-ui:is(:hover, :focus-within)
          .carousel-fallback-nav
          button:not(:disabled) {
          opacity: 1;
        }
      }
    }

    /* Pagination dots */
    .carousel-fallback-pagination {
      height: 44px;
      display: grid;
      place-content: safe center;
    }

    .carousel-fallback-pagination ol {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25em;
      grid-auto-flow: column;
      grid-auto-columns: 1em;
      overflow-x: auto;
      padding: 0 10px;
      scroll-padding-inline: 10px;
      margin: 0;
      list-style: none;
      scroll-snap-type: x mandatory;
    }

    .carousel-fallback-pagination ol li {
      padding: 0;
      margin: 0;
      line-height: 1;
    }

    .carousel-fallback-pagination button {
      appearance: none;
      height: 40px;
      width: 24px;
      border: 0;
      background: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="%23E9E4E4"/></svg>')
        center / 12px 12px no-repeat;
      padding: 0;
      cursor: pointer;
      scroll-snap-align: center;
    }

    .carousel-fallback-pagination button[aria-current="true"] {
      width: 44px;
      background: url('data:image/svg+xml,<svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="36" height="12" rx="6" fill="black"/></svg>')
        center / 36px 12px no-repeat;
    }
  } /* END LAYER: core */

  /* ============================================================================================ */
  /* modifyers */
  /* ============================================================================================ */
  @layer modifyers {
    /* ===== heading ===== */
    .content-carousel.hide-heading .heading-wrapper {
      clip-path: inset(50%);
      height: 4px;
      width: 4px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }

    .section:has(.target-recos):not(:has(ul)) {
      display: none;
    }

    /* ===== NAVIGATION ===== */
    /* ===== buttons ===== */
    .content-carousel.static-nav
      .carousel-slides-wrapper::scroll-button(left):not(:disabled),
    .content-carousel.static-nav
      .carousel-slides-wrapper::scroll-button(right):not(:disabled) {
      opacity: 1;
    }

    .static-nav.is-fallback-ui .carousel-fallback-nav button:not(:disabled) {
      opacity: 1;
    }

    /* black navigation buttons */
    .content-carousel.black-nav .carousel-slides-wrapper::scroll-button(left),
    .content-carousel.black-nav .carousel-slides-wrapper::scroll-button(right) {
      filter: invert(1);
      border-color: #fff;
    }

    .content-carousel.black-nav
      .carousel-slides-wrapper:is(:hover, :focus-visible)::scroll-button(*):not(
        :disabled
      ) {
      filter: invert(1);
      border-color: #fff;
    }

    /* top navigation */
    .content-carousel:where(.top-nav, .clear-top-nav) .carousel-slides-wrapper::scroll-button(left),
    .content-carousel:where(.top-nav, .clear-top-nav) .carousel-slides-wrapper::scroll-button(right) {
      top: calc(var(--gutter-m) /2);
      right: var(--outter-gutter);
      translate: 0 0;
      border-radius: 6px;
      width: 44px;
    }

    .content-carousel.clear-top-nav .carousel-slides-wrapper::scroll-button(left),
    .content-carousel.clear-top-nav .carousel-slides-wrapper::scroll-button(right) {
      border-color: transparent;
      background-color: transparent;
    }

    .content-carousel.clear-top-nav .carousel-slides-wrapper::scroll-button(left):not(:disabled):is(:hover, :focus-visible),
    .content-carousel.clear-top-nav .carousel-slides-wrapper::scroll-button(right):not(:disabled):is(:hover, :focus-visible) {
      border-color: var(--clr-neutral-40);
      background-color: var(--clr-neutral-40);
    }

    .content-carousel:where(.top-nav, .clear-top-nav)
      .carousel-slides-wrapper::scroll-button(left):not(:disabled) {
      left: unset;
      right: calc(40px + 0.8em + var(--outter-gutter));
    }

    .content-carousel:where(.top-nav, .clear-top-nav)
      .carousel-slides-wrapper::scroll-button(left):not(:disabled),
    .content-carousel:where(.top-nav, .clear-top-nav)
      .carousel-slides-wrapper::scroll-button(right):not(:disabled) {
      opacity: 1;
    }

    .content-carousel:where(.top-nav, .clear-top-nav) .heading-wrapper > div {
      min-height: var(--nav-button-size);
      max-width: calc(100% - var(--nav-button-size));
      display: flex;
      align-items: flex-end;
    }

    .content-carousel:where(.top-nav, .clear-top-nav)
      .heading-wrapper
      > div
      > :where(h1, h2, h3, h4, h5, h6) {
      margin: 0;
    }

    /* ===== pagination ===== */
    @media (max-width: 599px) {
      .mobile-pagination.is-fallback-ui .carousel-fallback-pagination {
        display: block;
      }

      @supports not (container-type: inline-size) {
        .content-carousel.mobile-pagination .carousel-slides-wrapper {
          scroll-marker-group: after;
        }
      }
    }

    /* ===== SLIDES ===== */
    /* ===== slide counts ===== */
    .content-carousel[class*="slide-count"] .carousel-slides-wrapper {
      --gap: 0.5em;

      --full-slides: 1;
      --peek: 0;

      --total-visible: (var(--full-slides) + var(--peek));
      --visible-gaps: (var(--total-visible) - 1);

      padding-inline: var(--outter-gutter);
      scroll-padding-inline: var(--outter-gutter);
      gap: 0 var(--gap);

      @container carousel (width >= 600px) {
        --gap: 1em;
      }

      @supports not (container-type: inline-size) {
        @media (min-width: 600px) {
          --gap: 1em;
        }
      }
    }

    .content-carousel[class*="slide-count"] .carousel-slide {
      flex: 0 0
        calc((100% - (var(--gap) * var(--visible-gaps))) / var(--total-visible));
      scroll-snap-align: none;
      scroll-snap-stop: unset;
    }

    .content-carousel[class*="slide-count"] .slide-img :where(picture, img) {
      height: auto;
      object-fit: cover;
      aspect-ratio: var(--product-image-aspect-ratio);
    }

    .content-carousel[class*="slide-count"].aspect-ratio-unset
      .slide-img
      :where(picture, img) {
      height: auto;
      object-fit: cover;
      aspect-ratio: unset;
    }

    @container carousel (width >= 1000px) {
      .content-carousel:not([class*="slide-count"]) .carousel-slides-wrapper {
        --nav-button-size: 54px;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 1000px) {
        .content-carousel:not([class*="slide-count"]) .carousel-slides-wrapper {
          --nav-button-size: 54px;
        }
      }
    }

    /* ===== 3 slide count ===== */
    .content-carousel.slide-count-3 .carousel-slides-wrapper {
      --full-slides: 1;
      --peek: 0.1;

      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .content-carousel.slide-count-3 li:nth-child(n + 13) {
      display: none;
    }

    .content-carousel.slide-count-3 .name,
    .content-carousel.slide-count-3 .amasty-text-label.top-center {
      font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    }

    .content-carousel.slide-count-3:not(:has(li:nth-child(4)))
      .carousel-slides-wrapper::scroll-marker-group {
      display: none;
    }

    .is-fallback-ui.slide-count-3:not(:has(li:nth-child(4)))
      .carousel-fallback-pagination {
      display: none;
    }

    @container carousel (width >= 600px) {
      .content-carousel.slide-count-3 .carousel-slides-wrapper {
        --full-slides: 3;
        --peek: 0;
      }

      .content-carousel.slide-count-3 .carousel-slide:nth-child(3n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-3
        .carousel-slide:not(:nth-child(3n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-carousel.slide-count-3 .carousel-slides-wrapper {
          --full-slides: 3;
          --peek: 0;
        }

        .content-carousel.slide-count-3 .carousel-slide:nth-child(3n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-3
          .carousel-slide:not(:nth-child(3n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    @container carousel (width >= 1000px) {
      .slide-count-3.content-carousel .carousel-slides-wrapper {
        --nav-button-size: 54px;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 1000px) {
        .slide-count-3.content-carousel .carousel-slides-wrapper {
          --nav-button-size: 54px;
        }
      }
    }

    /* ===== 4 slide count ===== */
    .content-carousel.slide-count-4 li:nth-child(n + 13) {
      display: none;
    }

    .content-carousel.slide-count-4 .name,
    .content-carousel.slide-count-4.amasty-text-label.top-center {
      font-size: clamp(1.1rem, 1rem + 1vw, 1.8rem);
    }

    .content-carousel.slide-count-4:not(:has(li:nth-child(5)))
      .carousel-slides-wrapper::scroll-marker-group {
      display: none;
    }

    .is-fallback-ui.content-carousel.slide-count-4:not(:has(li:nth-child(5)))
      .carousel-fallback-pagination {
      display: none;
    }

    @container carousel (width <= 599px) {
      .content-carousel.slide-count-4 .carousel-slides-wrapper {
        --full-slides: 2;
        --peek: 0.1;
      }

      .content-carousel.slide-count-4 .carousel-slide:nth-child(2n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-4
        .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (max-width: 599px) {
        .content-carousel.slide-count-4 .carousel-slides-wrapper {
          --full-slides: 2;
          --peek: 0.1;
        }

        .content-carousel.slide-count-4 .carousel-slide:nth-child(2n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-4
          .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    @container carousel (width >= 600px) {
      .content-carousel.slide-count-4 .carousel-slides-wrapper {
        --full-slides: 4;
        --peek: 0;
      }

      .content-carousel.slide-count-4 .carousel-slide:nth-child(4n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-4
        .carousel-slide:not(:nth-child(4n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-carousel.slide-count-4 .carousel-slides-wrapper {
          --full-slides: 4;
          --peek: 0;
        }

        .content-carousel.slide-count-4 .carousel-slide:nth-child(4n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-4
          .carousel-slide:not(:nth-child(4n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    /* ===== 5 slide count ===== */
    .content-carousel.slide-count-5 li:nth-child(n + 21) {
      display: none;
    }

    .content-carousel.slide-count-5 .name,
    .content-carousel.slide-count-5 .amasty-text-label.top-center {
      font-size: clamp(1.1rem, 1rem + 0.8vw, 1.8rem);
    }

    .content-carousel.slide-count-5:not(:has(li:nth-child(6)))
      .carousel-slides-wrapper::scroll-marker-group {
      display: none;
    }

    .is-fallback-ui.content-carousel.slide-count-5:not(:has(li:nth-child(6)))
      .carousel-fallback-pagination {
      display: none;
    }

    @container carousel (width <= 599px) {
      .content-carousel.slide-count-5 .carousel-slides-wrapper {
        --full-slides: 2;
        --peek: 0.25;
      }

      .content-carousel.slide-count-5 .carousel-slide:nth-child(2n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-5
        .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (max-width: 599px) {
        .content-carousel.slide-count-5 .carousel-slides-wrapper {
          --full-slides: 2;
          --peek: 0.25;
        }

        .content-carousel.slide-count-5 .carousel-slide:nth-child(2n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-5
          .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    @container carousel (width >= 600px) {
      .content-carousel.slide-count-5 .carousel-slides-wrapper {
        --full-slides: 5;
        --peek: 0;
      }

      .content-carousel.slide-count-5 .carousel-slide:nth-child(5n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-5
        .carousel-slide:not(:nth-child(5n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-carousel.slide-count-5 .carousel-slides-wrapper {
          --full-slides: 5;
          --peek: 0;
        }

        .content-carousel.slide-count-5 .carousel-slide:nth-child(5n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-5
          .carousel-slide:not(:nth-child(5n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    /* ===== 7 slide count ===== */
    .content-carousel.slide-count-7 li:nth-child(n + 21) {
      display: none;
    }

    .content-carousel.slide-count-7 .slide-copy {
      padding-block-start: 0.5em;
    }

    .content-carousel.slide-count-7 .name,
    .content-carousel.slide-count-7 .amasty-text-label.top-center {
      font-size: clamp(1.1rem, 1rem + 0.4vw, 1.8rem);
      margin-block-end: 0.25em;
    }

    .content-carousel.slide-count-7 .promo {
      font-size: clamp(1rem, 1rem + 0.4vw, 2rem);
    }

    .is-fallback-ui.content-carousel.slide-count-7:not(:has(li:nth-child(8)))
      .carousel-fallback-pagination {
      display: none;
    }

    .content-carousel.slide-count-7:not(:has(li:nth-child(8)))
      .carousel-slides-wrapper::scroll-marker-group {
      display: none;
    }

    @container carousel (width <= 599px) {
      .content-carousel.slide-count-7 .carousel-slides-wrapper {
        --full-slides: 2;
        --peek: 0.5;
      }

      .content-carousel.slide-count-7 .carousel-slide:nth-child(2n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-7
        .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
        display: none;
      }
    }

    @supports not (container-type: inline-size) {
      @media (max-width: 599px) {
        .content-carousel.slide-count-7 .carousel-slides-wrapper {
          --full-slides: 2;
          --peek: 0.5;
        }

        .content-carousel.slide-count-7 .carousel-slide:nth-child(2n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-7
          .carousel-slide:not(:nth-child(2n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    @container carousel (width >= 600px) {
      .content-carousel.slide-count-7 .carousel-slides-wrapper {
        --full-slides: 4;
        --peek: 0.25;
      }

      .content-carousel.slide-count-7 .carousel-slide:nth-child(7n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .content-carousel.slide-count-7
        .carousel-slide:not(:nth-child(7n + 1))::scroll-marker {
        display: none;
      }

      .content-carousel.slide-count-7 .promo {
        font-size: clamp(1rem, 0.9rem + 0.4vw, 2rem);
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-carousel.slide-count-7 .carousel-slides-wrapper {
          --full-slides: 4;
          --peek: 0.25;
        }

        .content-carousel.slide-count-7 .carousel-slide:nth-child(7n + 1) {
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .content-carousel.slide-count-7
          .carousel-slide:not(:nth-child(7n + 1))::scroll-marker {
          display: none;
        }
      }
    }

    @container carousel (width >= 900px) {
      .content-carousel.slide-count-7 .promo {
        font-size: clamp(1rem, 1rem + 0.4vw, 2rem);
      }
    }

    @container carousel (width >= 1200px) {
      .content-carousel.slide-count-7 .carousel-slides-wrapper {
        --full-slides: 7;
        --peek: 0;
      }

      .content-carousel.slide-count-7 .promo {
        font-size: clamp(1rem, 0.5rem + 0.5vw, 2rem);
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 1200px) {
        .content-carousel.slide-count-7 .carousel-slides-wrapper {
          --full-slides: 7;
          --peek: 0;
        }
      }
    }

    @container carousel (width >= 1800px) {
      .content-carousel.slide-count-7 .promo {
        font-size: clamp(1rem, 1rem + 0.4vw, 2rem);
      }
    }

    /* ===== overlay ===== */
    .content-carousel.overlay :where(li:not(:has(> a)), li > a) {
      position: relative;
      display: block;
    }

    .content-carousel.overlay .slide-copy {
      position: absolute;
      inset: 0;
      padding: 0.5em;
    }

    @container carousel (width >= 600px) {
      .content-carousel.overlay-lg :where(li:not(:has(> a)), li > a) {
        position: relative;
        display: block;
      }

      .content-carousel.overlay .slide-copy {
        position: absolute;
        inset: 0;
        padding: 0.5em;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-carousel.overlay-lg :where(li:not(:has(> a)), li > a) {
          position: relative;
        }

        .content-carousel.overlay .slide-copy {
          position: absolute;
          inset: 0;
          padding: 0.5em;
        }
      }
    }

    /* ============================================================================================ */
    /* PRODUCT CARDS */
    /* ============================================================================================ */
    .product-cards .slide-copy {
      position: relative;
      font: var(--plp-product-title-font);
      line-height: 1.3;
      font-size: clamp(1.6rem, 1rem + 0.8vw, 1.8rem);
    }

    .product-cards .name {
      margin: 0 0 0.75em;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-color);
      max-height: fit-content;
    }

    .product-cards.amasty-text-label {
      line-height: 1.3;
      font-size: clamp(1.6rem, 1rem + 0.8vw, 1.8rem);
    }

    .product-cards.amasty-text-label.bottom-center {
      color: var(--clr-promo-green);
      font-size: 90%;
      font-weight: var(--fw-semibold);
      line-height: 1.8;
    }

    .product-cards .price {
      display: flex;
      align-items: baseline;
      gap: 0.7ch;
      font-weight: var(--fw-medium);
    }

    .product-cards .price-regular {
      color: var(--text-color-gray);
      font-size: 85%;
    }

    .product-cards a:is(:hover, :focus-visible) .name {
      color: var(--link-hover-color, var(--text-color));
    }
  } /* END LAYER: modifyers */
} /* END LAYER: block */