/** Shopify CDN: Minification failed

Line 3834:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:age-verification (INDEX:0) */
.offcanvas-age-verification {
    .offcanvas-backdrop {
      background: #000;
    }
  }
  .age-verification-body {
    padding: 1.5rem;
    @media (min-width: 768px) {
      padding: 3rem;
    }
    @media (min-width: 1025px) {
      padding: 4rem;
    }
    &.offcanvas-popup-body {
      max-height: 90vh;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
    }
  }

  .offcanvas-popup {
    .offcanvas-close-btn {
      z-index: 1;
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      padding: 10px;
      display: grid;
    }

    .offcanvas-popup-inner {
      position: absolute;
      height: auto;
      pointer-events: all;
      z-index: 1;
      /* transform: scale(0.8); */
      opacity: 0;
      transition: 0.6s cubic-bezier(0.7, 0, 0.2, 1);
      transition-property: transform, opacity;
      /* max-width: 100%; */
      @media (max-width: 767px) {
        width: 100%;
        height: auto;
        overflow: hidden;
        max-height: calc(100vh - 2rem);
        position: relative;
        transform: none;
        inset: 0;
      }
    }
    .modal-size-large {
      @media (min-width: 992px) {
        max-width: 850px;
      }
    }

    .modal-size-small {
      @media (min-width: 992px) {
        max-width: 599px;
      }
    }
    &.offcanvas-open .offcanvas-popup-inner {
      opacity: 1;
    }
  }

  .age-verification-popup {
    .layout-summary {
      margin-top: 10px;
      color: var(--text-color);
    }
    .age-verification-footer > * + * {
      margin-top: 15px;
    }
    .age-verifiction-button > * > * {
      margin-top: 10px;
    }
  }

  .modal-size-large {
    @media (min-width: 992px) {
      max-width: 850px;
    }
  }

  .offcanvas-popup {
    padding: 20px;
    @media (max-width: 767px) {
      padding: 10px;
      display: grid;
      align-items: center;
    }
  }
/* END_SECTION:age-verification */

/* START_SECTION:announcement-bar (INDEX:1) */
.header-section:has(.header-transparent) + .announcement-section,
  .header-section:has(.header-transparent) ~ .announcement-section {
    top: var(--header-height, 70px);
    position: absolute;
    z-index: 2;
    right: 0;
    left: 0;
  }
  .announcement-bar-wrapper {
    &.announcements-has-carosuel {
      @media (min-width: 768px) {
        gap: 8px;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 'social announcements announcement-links';
      }
    }
    .social-menu-list {
      @media (max-width: 767px) {
        &.list-stacked {
          display: none;
        }
      }
      @media (min-width: 768px) {
        grid-area: social;
      }
      .social-menu-list.list-stacked.has-icons {
        --svg-inside--size: 15px;
      }
    }
    .announcement-bar-links {
      @media (max-width: 767px) {
        display: none;
      }
      @media (min-width: 768px) {
        grid-area: announcement-links;
        margin-left: auto;
        align-items: center;
        display: inline-flex;
      }
    }
  }
  .announcement-bar-link {
    line-height: 1;
    & + .announcement-bar-link {
      margin-left: 10px;
      padding-left: 10px;
      border-left: var(--border-width) var(--border-style) var(--border-color);
      @media (min-width: 768px) {
        margin-left: 5px;
        padding-left: 5px;
      }
      @media (min-width: 1025px) {
        margin-left: 10px;
        padding-left: 10px;
      }
    }
  }
  .announcement-section {
    transition: height 0.3s ease-out, transform 0.3s ease-out;
    overflow: hidden;
    .swiper-navigation {
      .swiper-nav {
        --svg-inside--size: 8px;
        border-radius: 50px;
        &::before {
          max-width: 24px;
          max-height: 24px;
          border-radius: 50px;
        }
      }
    }
  }

  .announcement-section[style*='--announcement-height'] {
    height: var(--announcement-height, auto);
  }

  /* Smooth transition for announcement content */
  .announcements {
    .announcements-has-carosuel & {
      position: relative;
      padding-inline: 30px;
      @media (min-width: 768px) {
        grid-area: announcements;
      }
      .swiper-wrapper {
        align-items: center;
      }
      .marquee-track {
        position: static;
      }
    }
    transition: opacity 0.2s ease-out, transform 0.3s ease-out;
    &.announcements-style-carosuel {
      @media (min-width: 768px) {
        margin-inline: auto;
        max-width: 350px;
      }
      @media (min-width: 1025px) {
        max-width: 500px;
      }
    }
    .marquee-elements.swiper-slide {
      padding: 0;
      text-align: center;
      white-space: normal;
      justify-content: center;
    }
  }
  .marquee-text {
    .announcements-style-carosuel & {
      max-width: calc(100% - (var(--elements--gap) + var(--marquee-media--width, 0)));
    }
  }

  /* Optional: Add a subtle scale effect when announcement is partially visible */
  .announcement-section[style*='--announcement-visibility'] {
    transform: scaleY(var(--announcement-visibility, 1));
    transform-origin: top;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:best-selling-product (INDEX:5) */
.productmedia-gallery:not(.swiper-initialized) .productmedia-gallery-item {
    --column-gap:0;
  }
  .productmedia-thumbs:not(.swiper-initialized) .productmedia-thumb-item{
    --column-gap:3px;
  }
  .layout-scrolling-with-two-slides .productmedia-gallery:not(.swiper-initialized) .productmedia-gallery-item {
    --column-gap:2;
  }
  .bestselling {
    display: grid;
    align-items: start;
    gap: var(--grid-gap);
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 'bestselling-media' 'bestselling-thumbs' 'bestselling-info';
    @media (max-width: 1024px) {
      grid-template-areas:
        'bestselling-media'
        'bestselling-info'
        'bestselling-thumbs';
    }
    &:not(.has-thumbs-block) {
      gap: 0;
      .bestselling-info-block {
        .product-info {
          width: 100%;
          display: block;
          margin-inline: auto;
          @media (max-width: 767px) {
            padding-top: 20px;
          }
          @media (max-width: 1024px) {
            padding-top: 30px;
          }
          @media (min-width: 1025px) {
            padding-left: 40px;
          }
          @media (min-width: 1200px) {
            padding-left: 55px;
          }
        }
      }
    }
    @media (min-width: 1025px) {
      grid-template-columns: 1fr 0.7fr;
      grid-template-areas: 'bestselling-media bestselling-info';
    }
    .swiper-navigation {
      @media (max-width: 767px) {
        top: 0;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }
  .best-selling-product-media-wrapper {
    position: relative;
  }
  .bestselling-thumbs {
    position: absolute;
    z-index: 1;
    inset-inline-end: 0;
    inset-block-end: 10px;
    inset-inline-start: 10px;
    padding: 3px;
    background: var(--border-color);
    body.rounded-corners & {
      border-radius: 3px;
    }
    @media (max-width: 767px) {
      max-width: 250px;
      width: max-content;
    }

    @media (min-width: 768px) {
      max-width: 266px;
      inset-block-end: 20px;
      inset-inline-start: 20px;
      width: calc((58px * var(--thumbs-count)) + (3px * var(--thumbs-count)));
    }

    @media (min-width: 1200px) {
      padding: 5px;
      width: calc((58px * var(--thumbs-count)) + (5px * var(--thumbs-count)));
      /* inset-inline-start: 20px; */
      &:has(.thumbs-large) {
        max-width: 340px;
        width: calc((80px * var(--thumbs-count)) + (5px * var(--thumbs-count)));
      }
      /* LIKE BREAK  */
    }

    .productmedia-thumbs {
      .productmedia-thumb-item {
        width: 58px;
        min-width: 58px;
        --layout-columns: 58px;
        .thumbs-large & {
          width: 80px;
          min-width: 80px;
          --layout-columns: 80px;
        }
      }
    }
  }

  .bestselling > * {
    min-width: 0;
    min-height: 0;
  }
  .bestselling-block {
    &.bestselling-thumbs-block {
      grid-area: bestselling-thumbs;
      isolation: isolate;
    }
    &.bestselling-media-block {
      grid-area: bestselling-media;
      isolation: isolate;
      @media (min-width: 1025px) {
        position: sticky;
        transition: top 0.6s ease;
        top: calc(var(--header-height, 0px) + 10px);
        body.sticky-header-none &,
        body.header-ishidden & {
          top: 10px;
        }
      }
    }
    &.bestselling-info-block {
      grid-area: bestselling-info;
      /* align-items: center; */
      display: flex;
        @media (min-width: 1025px) {
          position: sticky;
          transition: top 0.6s ease;
          top: calc(var(--header-height, 0px) + 10px);
          body.sticky-header-none &,
          body.header-ishidden & {
            top: 10px;
          }
        }
      .buy-buttons-block {
        .product-buttons {
          .buy-button-text {
            .svg-inside {
              display: none;
            }
          }
          &.has-quantity-control {
            .quantity-input-btn {
              min-width: 40px;
              aspect-ratio: 1 / 1;
            }
          }
        }
      }
    }
  }
  .bestselling-media {
    height: var(--mediabox-height);
  }
  /* .productmedia-gallery-wrapper {
    @media (max-width: 767px) {
      &.productmedia-gallery:not(.swiper-initialized) {
        gap: 4px;
      }
    }
    .productmedia-thumbs.swiper:not(.swiper.swiper-initialized) & {
      @media (max-width: 767px) {
        gap: 5px;
      }
      @media (min-width: 768px) {
        gap: 8px;
        display: grid;
        overflow-x: auto;
        scrollbar-width: none;
        grid-auto-flow: column;
        scroll-snap-type: x mandatory;
        grid-auto-columns: minmax(33%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
      }
    }
  } */
  .bestselling-thumbs {
    /* .productmedia-thumbs.swiper {
      padding-bottom: 10px;
    } */
    @media (max-width: 767px) {
      display: none;
    }
    .productmedia-thumb {
      position: relative;
      padding: 2px;
      /* padding-bottom: 18px; */
      body.rounded-corners & {
        border-radius: 3px;
      }
      .swiper-slide:not(.swiper-slide-thumb-active) & {
        opacity: 0.5;
      }
      .thumbs-small & {
        aspect-ratio: 1 / 1;
      }

      .thumbs-regular & {
        aspect-ratio: 1 / 1.4;
      }

      .thumbs-large & {
        aspect-ratio: 1.4 / 1;
      }
      &::after {
        content: '';
        inset: 0;
        opacity: 0;
        display: block;
        position: absolute;
        margin-inline: auto;
        transform: scale(0);
        border-radius: inherit;
        border: 1px solid var(--text-color);
        transition: all 0.3s ease;
      }
      .swiper-slide-thumb-active & {
        &::after {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
/* END_SECTION:best-selling-product */

/* START_SECTION:breadcrumb (INDEX:6) */
.breadcrumb {
    gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    font-family: sans-serif;
    a {
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 400;
      font-size: 10px;
      &:not(:first-child):before {
        content: '/';
        margin-inline-end: 0.5rem;
      }
    }
    span {
      color: var(--text-color);
      font-size: 10px;
    }
    .active {
      color: #000;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }
/* END_SECTION:breadcrumb */

/* START_SECTION:categories (INDEX:9) */
.categories-section {
    overflow: hidden;
  }
  .collection-cards-wrapper {
    padding-block: 15px;
    margin-block: -15px;
  }
  .categories-section .arrows-position-middle .swiper-navigation.swiper-navigation-expand {
    inset-inline: -55px;
    .container-large & {
      @media (min-width: 1440px) and (max-width: 1540px) {
        inset-inline: 0;
      }
    }
    @media (min-width: 768px) and (max-width: 1279px) {
      inset-inline: 0;
    }
    @media (min-width: 1280px) {
      inset-inline: -55px;
    }
  }
  .collection-cards-outer {
    position: relative;
    &.arrows-position-middle:has(.swiper-navigation) {
      @media (min-width: 992px) and (max-width: 1279px) {
        padding-inline: 45px;
      }
    }
    .container-large & {
      &.arrows-position-middle:has(.swiper-navigation) {
        @media (min-width: 1440px) and (max-width: 1540px) {
          padding-inline: 45px;
        }
      }
    }

    .container-large & {
      @media (min-width: 768px) {
        &:has(.swiper.swiper-initialized) {
          margin: 0 auto;
        }
      }
    }
  }
  .collection-cards {
    --collection-media-width: 56px;
    position: relative;
    .collection-cards-grid & {
      display: grid;
      gap: var(--row-gap) var(--column-gap);
      @media (max-width: 767px) {
        &:not(.mobile-swipe) {
          grid-template-columns: repeat(var(--layout-columns, 2), 1fr);
        }
      }
      @media (min-width: 768px) {
        grid-template-columns: repeat(var(--layout-columns, 5), 1fr);
      }
    }

  }
  .collection-card-inner {
    --padding: 10px 20px 10px 10px;
    gap: 6px 6px;
    display: grid;
    padding: var(--padding);
    &.has-roundness {
      overflow: hidden;
    }
    .has-shadow & {
      box-shadow: 0px 0px 10px 0px color-mix(in srgb, var(--text-color) 10%, transparent);
    }
    @media (min-width: 1200px) {
      gap: 8px 8px;
      --padding: 15px;
      --padding: 10px 20px 10px 10px;
    }
    @media (min-width: 1441px) {
      gap: 10px 10px;
      --padding: 10px 20px 10px 10px;
    }
    &:has(.collection-card-media:only-child) {
      gap: 0;
    }
    .collection-cards-inline & {
      align-items: center;
      grid-template-areas: 'media info action';
      grid-template-columns: var(--collection-media-width) 1fr auto;
    }
    .collection-cards-stacked & {
      --padding: 20px;
      grid-template-columns: 1fr;
      grid-template-areas: 'info' 'media' 'action';
      .title-position-bottom & {
        gap: var(--padding) 10px;
        grid-template-columns: 1fr auto;
        grid-template-areas: 'media media' 'info action';
        &:has(.collection-card-media:only-child) {
          gap: var(--padding) 10px 0;
          padding-bottom: 0;
        }
      }
    }
  }
  .collection-card {
    min-width: 0;
    position: relative;
  }
  .collection-card-media {
    grid-area: media;
    .has-roundness & {
      .mediabox {
        border-radius: var(--card-roundness);
        .title-position-bottom & {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
    .collection-cards-stacked & {
      .title-position-bottom & {
        margin: calc(var(--padding) * -1) calc(var(--padding) * -1) 0;
      }
    }
  }
  .collection-card-content {
    grid-area: info;
    .collection-cards-stacked & {
      .title-position-bottom & {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
  .collection-card-action {
    grid-area: action;
    display: flex;
    justify-content: flex-end;
    .button {
      position: static;
      --button-roundness: 50px;
      .collection-card:not(:hover) & {
        .btn-icon {
          transform: rotate(-45deg);
        }
      }
      &::after {
        content: '';
        inset: 0;
        position: absolute;
      }
    }
  }
  @media (min-width: 1441px) {
    .collection-cards {
      --collection-media-width: 76px;
    }
  }
/* END_SECTION:categories */

/* START_SECTION:charities-we-support (INDEX:10) */
/* ============================================
     CHARITIES MARQUEE — BASE
     ============================================ */
  .charities-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  /* Subtle top highlight line */
  .charities-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04) 50%, transparent);
    pointer-events: none;
    z-index: 1;
  }

  .charities-marquee__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
  }

  /* ============================================
     HEADER
     ============================================ */
  .charities-marquee__header {
    text-align: center;
    padding: 0 40px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .charities-marquee--visible .charities-marquee__header {
    opacity: 1;
    transform: translateY(0);
  }

  .charities-marquee__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .charities-marquee__badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    animation: charities-heartbeat 2s ease-in-out infinite;
  }

  @keyframes charities-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.2); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    56% { transform: scale(1); }
  }

  .charities-marquee__title {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }

  .charities-marquee__subtitle {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto;
    opacity: 0.7;
  }

  /* ============================================
     MARQUEE TRACK
     ============================================ */
  .charities-marquee__track-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  /* Fade edges — left & right */
  .charities-marquee__track-wrap::before,
  .charities-marquee__track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
  }

  .charities-marquee__track-wrap::before {
    left: 0;
  }

  .charities-marquee__track-wrap::after {
    right: 0;
  }

  .charities-marquee__track {
    display: flex;
    gap: 28px;
    width: max-content;
    will-change: transform;
    padding: 20px 0;
  }

  /* Pause animation on hover */
  .charities-marquee__track-wrap:hover .charities-marquee__track {
    animation-play-state: paused !important;
  }

  /* ============================================
     CHARITY CARD — Glassmorphism
     ============================================ */
  .charities-marquee__card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 28px 28px;
    border-radius: 18px;
    min-width: 220px;
    max-width: 240px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /* Subtle shimmer on hover */
  .charities-marquee__card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(0,0,0,0.02) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .charities-marquee__card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(0,0,0,0.1);
  }

  .charities-marquee__card:hover::before {
    opacity: 1;
  }

  /* Logo circle */
  .charities-marquee__logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 18px;
    transition: transform 0.4s ease;
    flex-shrink: 0;
  }

  .charities-marquee__card:hover .charities-marquee__logo {
    transform: scale(1.06);
  }

  .charities-marquee__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
  }

  .charities-marquee__logo svg {
    width: 40px;
    height: 40px;
  }

  /* Card name */
  .charities-marquee__name {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
  }

  /* Card tagline */
  .charities-marquee__tagline {
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.6;
  }

  /* External link indicator */
  .charities-marquee__ext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 14px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .charities-marquee__card:hover .charities-marquee__ext {
    opacity: 0.7;
    transform: translateY(0);
  }

  .charities-marquee__ext svg {
    width: 12px;
    height: 12px;
  }

  /* ============================================
     FOOTER
     ============================================ */
  .charities-marquee__footer {
    text-align: center;
    padding: 40px 40px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }

  .charities-marquee--visible .charities-marquee__footer {
    opacity: 1;
    transform: translateY(0);
  }

  .charities-marquee__footer-text {
    font-size: 0.9375rem;
    opacity: 0.5;
    margin: 0 0 20px;
    line-height: 1.6;
  }

  .charities-marquee__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: transform 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease;
  }

  .charities-marquee__cta:hover {
    transform: translateY(-2px);
    gap: 12px;
  }

  .charities-marquee__cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  .charities-marquee__cta:hover svg {
    transform: translateX(2px);
  }

  /* ============================================
     RESPONSIVE
     ============================================ */
  @media (max-width: 1023px) {
    .charities-marquee__track-wrap::before,
    .charities-marquee__track-wrap::after {
      width: 60px;
    }

    .charities-marquee__card {
      min-width: 200px;
      max-width: 220px;
      padding: 28px 24px 24px;
    }

    .charities-marquee__logo {
      width: 76px;
      height: 76px;
    }
  }

  @media (max-width: 767px) {
    .charities-marquee__header {
      padding: 0 24px;
      margin-bottom: 36px;
    }

    .charities-marquee__track-wrap::before,
    .charities-marquee__track-wrap::after {
      width: 36px;
    }

    .charities-marquee__track {
      gap: 18px;
    }

    .charities-marquee__card {
      min-width: 180px;
      max-width: 200px;
      padding: 24px 20px 22px;
      border-radius: 14px;
    }

    .charities-marquee__logo {
      width: 68px;
      height: 68px;
      margin-bottom: 14px;
    }

    .charities-marquee__name {
      font-size: 0.875rem;
    }

    .charities-marquee__footer {
      padding: 32px 24px 0;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .charities-marquee__track {
      animation: none !important;
    }

    .charities-marquee__header,
    .charities-marquee__footer {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .charities-marquee__badge svg {
      animation: none;
    }
  }
/* END_SECTION:charities-we-support */

/* START_SECTION:click-to-view-gallery (INDEX:11) */
.clicktoview-gallery-section {
    overflow: hidden;
  }
  .clicktoview-gallery-wrapper {
    width: 100%;
    position: relative;
    /* overflow: hidden; */
  }
  .clicktoview-gallery-cards {
    gap: var(--column-gap);
    will-change: transform;
    transition: transform var(--slide-transition-duration, 550ms) cubic-bezier(0.22, 1, 0.36, 1);
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    @media (max-width: 1024px) {
      clicktoview-gallery-story & {
        display: grid;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;
        grid-auto-flow: column;
        scroll-snap-type: x mandatory;
        grid-auto-columns: minmax(65%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(65%, 1fr));
        -webkit-overflow-scrolling: touch;
        .shopify-design-mode & {
          scrollbar-width: thin;
        }
      }
      clicktoview-gallery-drawer & {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-area: 1 / 1 / 3 / 2;
      }
    }
    @media (min-width: 1025px) {
      align-items: stretch;
      display: flex;
    }
  }

  .clicktoview-gallery-card {
    flex: 1 0 80%;
    position: relative;
    transition: flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    @media (max-width: 1024px) {
      clicktoview-gallery-drawer & {
        --mediabox-height: 100%;
        grid-column: 1/2;
        grid-row: 1/2;
        display: grid;
        grid-template-rows: 0.3fr 1fr;
      }
    }
    @media (max-width: 1024px) {
      clicktoview-gallery-drawer & {
        opacity: 0;
        visibility: hidden;
        &.zoom-in,
        &.active {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    @media (min-width: 1025px) {
      flex: 1 0 calc(33.33% - var(--column-gap));
      &.zoom-in,
      &.active {
        z-index: 10;
        flex-basis: 66.66%;
      }
    }
    /* @media (min-width: 1200px) {
      flex: 1 0 calc(30% - var(--column-gap));
      &.zoom-in,
      &.active {
        flex-basis: 70%;
      }
    } */
    @media (min-width: 1441px) {
      flex: 1 0 calc(25% - var(--column-gap));
      &.zoom-in,
      &.active {
        flex-basis: 50%;
      }
    }
  }

  .clicktoview-gallery-component {
    --svg-inside--size: 14px;
    position: absolute;
    top: 20px;
    left: 20px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-inline: 20px;
    @media (max-width: 1024px) {
      padding-inline: 14px;
      height: 30px;
      gap: 5px;
    }
    .has-roundness & {
      border-radius: 50px;
    }
  }

  .clicktoview-gallery-toggler {
    /* --button-color: var(--icon-color);
    --button-background: var(--icon-background); */
    position: absolute;
    top: 20px;
    right: 20px;
    --button-height: 42px;
    &.button:not(.button-link) {
      --button-width: auto;
      aspect-ratio: 1;
      @media (max-width: 1024px) {
        --svg-inside--size: 12px;
        --button-height: 30px;
      }
      .has-roundness & {
        --button-roundness: 50px;
      }
      .btn-icon {
        width: 100%;
        height: 100%;
        .has-roundness & {
          border-radius: var(--button-roundness);
        }
      }
    }
    .svg-inside {
      transition: transform 0.3s ease;
      .zoom-in &,
      .active & {
        transform: rotate(45deg);
      }
    }
  }

  .clicktoview-gallery {
    height: var(--mediabox-height);
    @media (max-width: 1024px) {
      grid-row: 1 / 3;
      clicktoview-gallery-drawer & {
        --card-roundness: 0;
      }
    }
  }

  .clicktoview-content {
    padding: 25px 25px;
    &.content-overlay {
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      position: absolute;
      pointer-events: none;
      align-items: flex-end;
      /* overflow: hidden; */
      transition: opacity 0.3s ease, visibility 0.3s ease;
      @media (max-width: 1024px) {
        padding: 24px 24px;
        clicktoview-gallery-drawer & {
          gap: 20px;
          grid-row: 2 / 3;
          margin-bottom: 62px;
          pointer-events: auto;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-start;
          max-height: 100%;
          overflow: hidden;
        }
      }
      .zoom-in &,
      .active & {
        opacity: 1;
        visibility: visible;
      }
      & > * {
        pointer-events: auto;
      }
    }
  }

  clicktoview-gallery-story .clicktoview-content.content-overlay {
    max-height: 85%;
    height: 100%;
    overflow: hidden;
  }

  .clicktoview-content-icons-item {
    --svg-inside--size: 24px;
    padding-block: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    @media (max-width: 1024px) {
      --svg-inside--size: 20px;
      padding-block: 12px;
    }
    @media (max-width: 767px) {
      --svg-inside--size: 16px;
    }
    &:not(:last-child) {
      border-bottom: var(--border-width) var(--border-style) var(--card-border);
    }
    .clicktoview-icons-icon {
      aspect-ratio: 1;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--icon-color);
      background: var(--icon-background);
      width: calc(var(--svg-inside--size) * 2);
      height: calc(var(--svg-inside--size) * 2);
    }
  }

  .clicktoview-content-inner {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    pointer-events: auto;
    @media (min-width: 1025px) {
      max-width: 400px;
    }
    .layout-header-wrapper {
      margin: 0;
      transition: transform 0.6s ease;
      transform: translateY(var(--hidden-content--height));
      .zoom-in &,
      .active & {
        transform: none;
      }
    }
    .button:not(.button-primary).button-secondary {
      & * {
        color: var(--button-secondary--color);
      }
      &:hover * {
        color: var(--button-secondary-color--hover);
      }
    }
  }

  .clicktoview-content-icons-list {
    padding-inline: 24px;
    position: absolute;
    right: 25px;
    bottom: 25px;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    max-width: 245px;
    backdrop-filter: blur(10px);
    transition: opacity 0.1s ease 0s, visibility 0s linear 0.6s;
    @media (max-width: 1024px) {
      clicktoview-gallery-drawer & {
        padding-inline: 14px;
        position: unset;
        max-width: 350px;
      }
    }
    .zoom-in &,
    .active & {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.6s ease 0.61s, visibility 0s linear 0s;
    }
  }
  .clicktoview-hidden-content {
    opacity: 0;
    visibility: hidden;
    padding-top: 15px;
    transform: translateY(100%);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
    @media (max-width: 1024px) {
      padding-top: 15px;
    }
    .zoom-in &,
    .active & {
      opacity: 1;
      transform: none;
      visibility: visible;
      transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;
    }
    & > *:not(:first-child) {
      margin-top: 25px;
      @media (max-width: 1024px) {
        margin-top: 15px;
      }
    }
  }

  /* .clicktoview-gallery-navs {
    gap: 30px;
    display: flex;
    margin-top: 30px;
    align-items: center;
    @media (max-width: 1024px) {
      display: none;
      clicktoview-gallery-drawer & {
        display: flex;
      }
    }
  } */

  /* .clicktoview-gallery-progressbar {
    width: 100%;
    height: 2px;
    position: relative;
    background: color-mix(in srgb, var(--swiper-control--color) 12%, transparent);
    @media (max-width: 1024px) {
      display: none;
    }
    &::before {
      content: '';
      height: 100%;
      display: block;
      will-change: width;
      transition: width 0.6s ease;
      width: var(--progressbar-value);
      background: var(--swiper-control--color);
    }
  } */

  /* .clicktoview-gallery-navbuttons {
    inset-block: 0;
    inset-inline: -20px;
    gap: 10px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    .container-fullwidth & {
      inset-inline: -16px;
    }
    .container-fullwidth.no-padding & {
      inset-inline: 15px;
    }
    @media (max-width: 1024px) {
      display: none;
      clicktoview-gallery-drawer & {
        z-index: 1;
        display: flex;
        inset-inline: 0;
        max-width: 100%;
        padding: 0 24px 24px;
        align-items: flex-end;
        grid-area: 2 / 1 / 3 / 2;
        justify-content: flex-end;
      }
    }
    @media (min-width: 1025px) {
      opacity: 0;
      transition: opacity 0.6s ease;
      .shopify-section:hover & {
        opacity: 1;
      }
    }
    &.swiper-nav-circular .clicktoview-nav {
      border-radius: 50px;
    }
    .clicktoview-nav {
      pointer-events: auto;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--swiper-control--color);
      background: var(--swiper-control--background);
      @media (max-width: 1024px) {
        width: 38px;
        height: 38px;
      }
      .icon-arrow-left-classic {
        path {
          transform: translateX(2px);
          transition: transform 0.3s ease 0.2s;
          .clicktoview-nav:hover & {
            transform: none;
            transition: transform 0.3s ease 0s;
          }
        }
        rect {
          transform: translateX(-100%);
          transition: transform 0.3s ease 0s;
          .clicktoview-nav:hover & {
            transform: none;
            transition: transform 0.3s ease 0.15s;
          }
        }
      }
      .icon-arrow-right-classic {
        path {
          transform: translateX(-2px);
          transition: transform 0.3s ease 0.2s;
          .clicktoview-nav:hover & {
            transform: none;
            transition: transform 0.3s ease;
          }
        }
        rect {
          transform: translateX(100%);
          transition: transform 0.3s ease 0s;
          .clicktoview-nav:hover & {
            transform: none;
            transition: transform 0.3s ease 0.15s;
          }
        }
      }
    }
    .clicktoview-header & {
      position: relative;
      margin-left: auto;
      opacity: 1;
    }
  } */
  .clicktoview-header {
    &.has-arrows {
      gap: 20px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }
  .offcanvas-clicktoview-gallery {
    --offcanvas-content--width: 100%;
    .offcanvas-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
      width: 45px;
      height: 45px;
      border-radius: 50px;
      /* color: var(--button-color);
      background: var(--button-background); */
      color: var(--icon-color);
      background: var(--icon-background);
      @media (max-width: 1024px) {
        --svg-inside--size: 12px;
        width: 38px;
        height: 38px;
      }
    }
    .offcanvas-contentwrap {
      padding: 0;
    }
    .offcanvas-content {
      grid-template-rows: 1fr auto;
    }
  }

  @media (max-width: 1024px) {
    .offcanvas-clicktoview-gallery .clicktoview-gallery-navbuttons {
      bottom: 24px;
      right: 24px;
      justify-content: flex-end;
      height: auto;
    }
    .clicktoview-content-inner {
      max-width: 70%;
    }
  }
  @media (max-width: 767px) {
    .clicktoview-content-inner {
      max-width: 100%;
    }
  }
/* END_SECTION:click-to-view-gallery */

/* START_SECTION:collapsible-content (INDEX:12) */
.collapsible-content-block .collapsible-content .collapsible-content-body {
    padding-inline: 0;
  }
/* END_SECTION:collapsible-content */

/* START_SECTION:collection-list (INDEX:13) */
.collections-section {
    .collections {
      display: grid;      
      &.border-visibility-always {
        border: var(--border-style) var(--border-color);
        border-width: var(--border-width) 0;
      }
      @media (max-width: 767px) {
        &:not(.mobile-swipe) {
          grid-template-columns: repeat(var(--layout-columns), 1fr);
        }
        &.border-visibility-mobile-only {
          border: var(--border-style) var(--border-color);
          border-width: var(--border-width) 0;
        }
        &.mobile-swipe{
          border-bottom: 0;
        }
      }
      @media (min-width: 768px) {
        overflow: clip;
        grid-template-columns: repeat(var(--layout-columns), 1fr);
        &.border-visibility-desktop-only {
          border: var(--border-style) var(--border-color);
          border-width: var(--border-width) 0;
        }
      }
    }

    .collection {
      display: block;
      position: relative;
      z-index: 1;

      .border-visibility-always & {
        border: var(--border-width) var(--border-style) var(--border-color);
        .mobile-swipe & {
          @media (max-width: 767px) {
            /* border-bottom: 0; */
            &:last-child {
              /* border-right: 0; */
            }
          }
        }
      }
      .border-visibility-mobile-only & {
        @media (max-width: 767px) {
          border: var(--border-width) var(--border-style) var(--border-color);
        }
      }
      .border-visibility-desktop-only & {
        @media (min-width: 768px) {
          border: var(--border-width) var(--border-style) var(--border-color);
        }
      }

      &::before {
        content: '';
        inset: 0;
        z-index: -1;
        position: absolute;
        pointer-events: none;
        transition: background-color 0.3s ease, border-radius 0.3s eas0;
      }
      &:hover {
        @media (min-width: 1025px) {
          z-index: 0;
          :is(.media-hovered, .title-hovered) & {
            &::before {
              background-color: var(--layout-background--alternate);
            }
          }
        }
      }
      .border-collapse & {
        padding: var(--row-gap) var(--column-gap);
        border-width: 0 var(--border-width) var(--border-width) 0;
      }
      .collection-inner {
        position: relative;
      }
    }

    .collection-media {
      .mediabox {
        &::before {
          position: absolute;
          top: 0;
          left: -80%;
          z-index: 2;
          display: block;
          content: '';
          width: 50%;
          height: 100%;
          background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
          background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
          -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
        }
      }
      &:hover {
        .mediabox {
          &::before {
            -webkit-animation: shine 0.75s;
            animation: shine 0.75s;
          }
        }
      }
    }

    .collection-media {
      position: relative;
      .mediabox {
        @media (min-width: 1025px) {
          .media-hovered & {
            transition: transform 0.3s ease;
            .collection:hover & {
              transform: scale(0.6);
            }
          }
        }
      }
      .collection-hovered-text {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        overflow-y: auto;
        max-height: 100%;
        transform: translate(-50%);
        @media (min-width: 1025px) {
          /* opacity: 0; */
          clip-path: inset(0 0 100% 0);
          transform: translate(-50%, calc(-50% - 50px));
          /* transition: opacity 0.3s ease, transform 0.3s ease; */
          transition: clip-path 0.3s ease, transform 0.3s ease;
          .collection:hover & {
            /* opacity: 1; */
            clip-path: inset(0 0 0 0);
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .collection-text {
      padding: 8px 4px 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      &.above-image {
        bottom: 0;
        padding: 15px 10px;
        inset-inline: 0;
        position: absolute;
        overflow-y: auto;
        max-height: 100%;
        @media (min-width: 768px) {
          padding: 25px;
        }
        @media (min-width: 1025px) {
          .collection:hover & {
            .title-hovered & {
              transform: translateY(50px);
            }
          }
        }
      }
      @media (min-width: 1025px) {
        .collection:hover & {
          .title-hovered & {
            opacity: 0;
            pointer-events: none;
            .media-hovered & {
              transform: translateY(-50px);
            }
          }
        }
      }
    }
  }
/* END_SECTION:collection-list */

/* START_SECTION:collection-tabs (INDEX:14) */
.layout-header-wrapper {
    .collection-tabs-section & {
      &.layout-header-grid {
        .layout-header {
          @media (min-width: 768px) {
            gap: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr;
            & > * {
              margin: 0;
              &:not(.layout-heading) {
                grid-column: 2 / 3;
                /* max-width: 420px; */
              }
            }
            .layout-heading {
              grid-area: 1 / 1 / -1 / 2;
            }
          }
          @media (min-width: 1200px) {
            grid-template-columns: 2fr 1fr;
          }
        }
      }
    }
    .media-banner-button {
      margin-top: 15px;
      @media (min-width: 768px) {
        margin-top: 20px;
      }
    }
  }
  .collection-tabs-head {
    margin-bottom: 20px;
    &.has-tabs-stretched {
      padding-top: 20px;
      margin-bottom: 40px;
    }
  }
  /*  */
  .collection-tabs-products-grid{
    display: grid;
    gap:var(--row-gap) var(--column-gap);
  }

  @media (min-width: 768px) {
  .collection-tabs-products-grid{
    grid-template-columns: repeat(var(--layout-columns, 4), minmax(0, 1fr));
  }
    .collection-tabs-head.has-swiper-nav {
      gap: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  @media (max-width: 767px) {
    .collection-tabs-head-inner.mobile-swipe {
      gap: 20px;
      grid-auto-columns: minmax(max-content, 1fr);
      grid-template-columns: initial;
      max-width: max-content;
    }
    .collection-tabs-products-grid:not(.mobile-swipe){
      grid-template-columns: repeat(var(--layout-columns, 4), minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .collection-tabs-head-inner {
      display: flex;
      align-items: center;
      gap: 30px;
      overflow-x: auto;
      overflow-y: hidden;
    }
  }
  .collection-tabs-head-inner.collection-tabs-stretched {
    /* gap: 20px; */
    width: 100%;
    max-width: 100%;
    position: relative;
    align-items: stretch;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 15%, transparent);

    @media (max-width: 767px) {
      &.mobile-swipe {
        align-items: flex-end;
        grid-auto-columns: minmax(max-content, 1fr);
      grid-template-columns: initial;
      }
    }
  }
  @media (min-width: 1025px) {
    .collection-tabs-head-inner {
      gap: 50px;
    }
  }
  .collection-tab-button {
    gap: 15px;
    padding-left: 3px;
    position: relative;
    align-items: center;
    display: inline-flex;
    transition: all 0.3s ease;
    .collection-tabs-stretched & {
      gap: 0;
      width: 100%;
      padding-left:0;
      padding-bottom: 20px;

      &::after {
        content: '';
        bottom: 0;
        opacity: 0;
        height: 3px;
        width: 100%;
        position: absolute;
        transform: scaleX(0);
        transform-origin: left;
        transition: all 0.4s ease-out;
        background-color: var(--border-color);
      }
      &.active {
        &::after {
          opacity: 1;
          transform: scaleX(1);
        }
      }
    }
  }
  @media (max-width: 767px) {
    .collection-tab-button {
      gap: 10px;
      padding-left: 4px;
    }
  }
  .collection-tab-button {
    &::before {
      content: '';
      width: 12px;
      height: 12px;
      display: block;
      aspect-ratio: 1;
      background: currentColor;
      transform: rotate(45deg);
      transition: transform 0.3s ease 0.6s, width 0.3s ease 0.3s;
      @media (max-width: 767px) {
        width: 8px;
        height: 8px;
      }
    }
    .collection-tabs-stretched & {
      &::before {
        content: none;
      }
    }
  }
  .collection-tab-button:not(.active) {
    gap: 0;
    .collection-tabs-stretched & {
      opacity: 1;
    }
  }
  .collection-tab-button:not(.active) span {
    transition: font-size 0.3s ease;
  }
  @media (min-width: 768px) {
    .collection-tab-button:not(.active) span {
      font-size: 0.75em;
      .collection-tabs-stretched & {
        font-size: 1em;
      }
    }
    .collection-tabs-head:not(.has-tabs-stretched){
        flex: 1;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
  }
  .collection-tab-button:not(.active)::before {
    width: 0;
    transform: rotate(0deg);
    transition: transform 0.3s ease 0s, width 0.3s ease 0s;
  }

  .collection-tabs-body {
    display: grid;
  }
  .collection-tabs-footer {
    margin-top: 15px;
  }
  .collection-tabs-content {
    grid-area: var(--area-overlay);
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0px);
    transition: transform 0.3s ease-out 0s, opacity 0.3s ease-out 0s, visibility 0s linear 0.3s;
  }
  .collection-tabs-content.active {
    opacity: 1;
    visibility: visible;
    transform: unset;
    transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, visibility 0s linear 0s;
  }
  .collection-tabs-carousel-navs {
    display: grid;
    margin-left: auto;
    .has-tabs-stretched & {
      flex: 1 0 auto;
    }
  }
  @media (max-width: 767px) {
    .collection-tabs-carousel-navs {
      margin-top: 20px;
    }
  }
  .collection-tabs-carousel-navs .swiper-navigation {
    grid-area: var(--area-overlay);
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }
  .collection-tabs-carousel-navs .swiper-navigation .swiper-nav {
    opacity: 0;
    transition: transform 0.3s ease-out 0s, opacity 0.3s ease-out 0s;
  }
  .collection-tabs-carousel-navs .swiper-navigation .swiper-nav.swiper-nav-prev {
    transform: translateX(-10px);
  }
  .collection-tabs-carousel-navs .swiper-navigation .swiper-nav.swiper-nav-next {
    transform: translateX(10px);
  }
  @media (max-width: 767px) {
    .collection-tabs-carousel-navs .swiper-navigation {
      justify-content: space-between;
    }
    .collection-tabs-carousel-navs .swiper-navigation.has-viewmore .swiper-nav-prev {
      margin-left: auto;
    }
  }
  .collection-tabs-carousel-navs .swiper-navigation.active {
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .collection-tabs-carousel-navs .swiper-navigation.active .swiper-nav {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s;
  }
  .collection-tabs-carousel-navs .swiper-navigation.active .swiper-nav.swiper-button-disabled {
    opacity: 0.3;
  }
/* END_SECTION:collection-tabs */

/* START_SECTION:collection-with-product (INDEX:15) */
.collection-with-product {
    display: grid;
    max-width: 100%;
    grid-template-columns: 1fr;
    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      &:has(.collection-with-product-products.swiper) {
        align-items: center;
      }
    }
    @media (min-width: 1441px) {
      grid-template-columns: 1fr 1fr;
      &.has-grid-structure {
        grid-template-columns: 1fr 1fr;
      }
    }
    > * {
      min-width: 0;
      min-height: 0;
    }
  }

  .collection-with-product-products {
    &.swiper {
      padding: 0;
      margin-inline: 0;
      &:not(.swiper-initialized) {
        .swiper-wrapper {
          column-gap: var(--column-gap);
        }
      }
    }
    &:not(.swiper) {
      gap: var(--row-gap) var(--column-gap);
      @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
    }
    &:not(.mobile-swipe) {
      @media (max-width: 767px) {
        display: grid;
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
    }
    > * {
      min-width: 0;
      min-height: 0;
    }
  }

  .collection-with-product-mediabox {
    position: relative;
    height: var(--mediabox-height);
    .has-grid-structure & {
      @media (min-width: 768px) {
        .grid-adapt-height & {
          --mediabox-height: 100dvh;
        }
        position: sticky;
        height: calc(var(--mediabox-height) - var(--header-height, 0px));
        transition: top 0.6s ease, height 0.6s ease;
        top: var(--header-height, 0px);

        body.sticky-header-none &,
        body.header-ishidden & {
          top: 0;
          height: var(--mediabox-height);
        }
      }
    }
  }

  .collection-with-product-media {
    height: 100%;
  }

  .collection-with-product-media .mediabox-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .collection-with-product-media .mediabox-video video,
  .collection-with-product-media .mediabox-video iframe,
  .collection-with-product-media .mediabox-video img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-with-product-media .mediabox-video video {
    display: block;
  }

  .collection-with-product-media-content {
    position: absolute;
    inset: 0;
    display: grid;
    max-height: var(--mediabox-height);
    overflow-y: hidden;
    animation: enable-scroll 0s linear 3s forwards;
  }
  @keyframes enable-scroll {
    to {
      overflow-y: auto;
    }
  }
  .collection-with-product-media-content-inner {
    max-width: 80%;
    margin-top: auto;
    margin-inline: auto;
    padding-bottom: 30px;
    @media (min-width: 768px) {
      padding-bottom: 35px
    }
    @media (min-width: 1280px) {
      max-width: 60%;
    }
    &:has(.counter-block) {
      @media (min-width: 1200px) {
        padding-bottom: 56px;
      }
    }
    &.overlay-text {
      .button:not(:hover) {
        .btn-text,
        .btn-icon {
          color: var(--button-color);
          & * {  
            color: var(--button-color);
          }
        }
      }
    }
  }

  .collection-with-product-content {
    padding-block-start: 25px;
  }
  @media (min-width: 768px) {
    .collection-with-product-content {
      padding-block: 5px;
      padding-inline: 20px;
      .has-carousel-structure & {
        padding-inline: 20px 0;
        .layout-header-wrapper {
          margin-bottom: 20px;
          &:has(.swiper-navigation) {
            .container-fullwidth & {
              padding-inline: 0 20px;
            }
          }
        }
      }
    }
  }
  @media (min-width: 1200px) {
    .collection-with-product-content {
      padding-inline: 35px;
      .has-carousel-structure & {
        padding-inline: 35px 0;
        .layout-header-wrapper {
          margin-bottom: 25px;
          &:has(.swiper-navigation) {
            .container-fullwidth & {
              padding-inline: 0 35px;
            }
          }
        }
      }
    }
  }
  @media (min-width: 1441px) {
    .collection-with-product-content {
      padding-inline: 60px;
      .has-carousel-structure & {
        .container-fullwidth & {
          padding-inline: 60px 0;
          .layout-header-wrapper {
            padding-inline: 0 60px;
          }
        }
      }
    }
  }
  .collection-with-product-swiperwrapper {
    &.arrows-position-middle {
      .swiper-navigation {
        .container-fullwidth & {
          inset-inline: -16px 5px;
        }
      }
    }
  }
/* END_SECTION:collection-with-product */

/* START_SECTION:compact-slideshow (INDEX:16) */
.compact-slideshow-wrapper {
    position: relative;
  }
  .compact-slideshow {
    overflow: clip;
    .custom-pagination.swiper-pagination-bullets {
      --swiper-pagination-bottom: 15px;
      right: 15px;
      z-index: 1;
      left: auto;
      position: absolute;
      max-width: max-content;
      justify-content: flex-end;
      /* @media (max-width: 767px) {
        display: none;
      } */
      @media (min-width: 1025px) {
        --swiper-pagination-bottom: 20px;
        right: 20px;
      }
      @media (min-width: 1200px) {
        --swiper-pagination-bottom: 30px;
        right: 25px;
      }
      @media (min-width: 1441px) {
        --swiper-pagination-bottom: 40px;
        right: 30px;
      }
      &.pagination-left {
        right: auto;
        left: 15px;
      }
      &.pagination-right {
        right: 15px;
        left: auto;
      }
      .swiper-pagination-bullet {
        --svg-inside--size: 32px;
        --swiper-pagination-bullet-size: 32px;
        --swiper-pagination-bullet-inactive-opacity: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        background-color: transparent;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        &.swiper-pagination-bullet-active {
          .progress {
            .circle-origin {
              &.circle-track {
                opacity: 0.2;
              }
              &:not(.circle-track) {
                animation: progress 5s ease-out forwards;
              }
            }
          }
        }
        span {
          color: var(--swiper-control--color);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .progress {
          width: 32px;
          height: 32px;
          transform: rotate(-90deg);
          .circle-origin {
            /* cx: 16;
            cy: 16;
            r: 15.5; */
            
            stroke-width: 1;
            fill: transparent;
            stroke-linecap: round;
            stroke-dasharray: 125.664px;
            stroke-dashoffset: 125.664px;
            stroke: var(--swiper-control--color);
            transform-origin: center;
            transform-box: fill-box;
            /* transform: scale(.78); */
            &.circle-track {
              .swiper-pagination-bullet-active & {
                stroke-dashoffset: 0;
              }
            }
          }
        }
      }
    }
  }
  @keyframes progress {
     to {
    stroke-dashoffset: 0;
  }
  }
  .compact-slideshow-container {
    position: relative;
    min-height: var(--mediabox-height);
  }
  .compact-slideshow-content {
    gap: 20px;
    width: 100%;
    display: flex;
    max-height: 100%;
    position: absolute;
    padding-block: 10px;
    flex-direction: column;
    
    @media (min-width: 768px) {
      gap: 25px;
      max-width: 500px;
      padding-block: 20px;
    }
    @media (min-width: 1025px) {
      padding-block: 25px;
      .layout-section > div:not(.container-fullwidth) & {
        padding-inline: 10px;
      }
    }
    @media (min-width: 1200px) {
      padding-block: 30px;
      max-width: 600px;
      .layout-section > div:not(.container-fullwidth) & {
        padding-inline: 15px;
      }
    }
    @media (min-width: 1441px) {
      padding-block: 40px;
      max-width: 700px;
      .layout-section > div:not(.container-fullwidth) & {
        padding-inline: 20px;
      }
    }

    /* Justify Positions */

    &.top-center,
    &.center,
    &.bottom-center {
      .cs-slide-content {
        text-align: center;
      }
    }
    &.top-right,
    &.center-right,
    &.bottom-right{
      .cs-slide-content {
        text-align: right;
      }
    }
    
  }

  .compact-slideshow-media {
    position: absolute;
    inset: 0;
  }
  .compact-slideshow-slide {
    .has-roundness & {
      overflow: clip;
      border-radius: var(--card-roundness);
    }
  }
  .cs-slide-content {
    .card-first & {
      order: 2;
    }
    .card-last & {
      order: 1;
    }
    & > *:not(:last-child) {
      margin-bottom: 20px;
      @media (min-width: 768px) {
        margin-bottom: 25px;
      }
    }
  }

  .cs-slide-product-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 5px;
    max-width: 510px;
    pointer-events: none;
    @media (min-width: 768px) {
      padding-block:15px;
      padding-inline-start: calc(var(--container-padding) * var(--padding-scale));
    }
    @media (max-width: 767px) {
      inset-block-end: 60px;
    }
    &.card-bottom-left {
      @media (min-width: 768px) {
        margin-left: 0;
        margin-right: auto;
      }
    }
    &.card-bottom-right {
      @media (min-width: 768px) {
        margin-right: 0;
        margin-left: auto;
      }
    }
  }

  .cs-slide-product {
    pointer-events: auto;
    gap: 0 15px;
    padding: 10px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    width: 100%;
    position: sticky;
    bottom: 15px;
    @media (max-width: 767px) {
      display: grid;
      grid-template-columns: auto 1fr;
      padding-right: 15px;
    }

    &.has-section-hovereffect {
      transition: all 0.3s ease;
      @media (min-width: 1025px) {
        .shopify-section.compact-slideshow-section:hover & {
          --card-text: var(--section-card--text);
          --card-heading: var(--section-card--text);
          --card-background: var(--section-card--background);
          --border-color: color-mix(in srgb, var(--section-card--text) 20%, transparent);
          color: var(--section-card--text);
          .button {
            --button-color: var(--section-card--background);
            --button-color--hover: var(--section-card--background);
            --button-background: var(--section-card--text);
            --button-background--hover: var(--section-card--text);
            --button-border: var(--section-card--text);
            --button-border--hover: var(--section-card--text);
          }
          .cs-product-title-price.border-bottom {
            --border-color: color-mix(in srgb, var(--section-card--text) 20%, transparent);
          }
        }
      }
    }
    .center-block-justify & {
      margin-inline: auto;
    }
    .card-first & {
      order: 1;
    }
    .card-last & {
      order: 2;
    }
  }
  .cs-product-media {
    min-width: 75px;
    max-width:75px;
    .mediabox {
      .has-roundness & {
        border-radius: var(--card-roundness);
      }
    }
  }
  .cs-product-info {
    flex: 1 1 auto;
    @media (min-width: 768px) {
      padding-right: 10px;
    }
  }
  .cs-product-title-price {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:7px;
}
.cs-product-title-price a{
  color: inherit!important;
}
.cs-product-button {
    @media (max-width: 767px) {
      grid-area: 1 / 3;
    }
    @media (pointer: fine) {
      .button {
        .compact-slideshow:not(:hover) & {
          color: transparent;
          transform: scale(0.2);
        }
        &:active {
          transform: translateY(3px)
        }
      }
    }
}
/* END_SECTION:compact-slideshow */

/* START_SECTION:complementary-products (INDEX:17) */
/* ══════════════════════════════════════════════════════════════
   EZ SNAP — Complementary Products Section  (standalone)
   Scope: .ezcs-* (ez-complementary-standalone)
══════════════════════════════════════════════════════════════ */

:root {
  --ezcs-accent:     #c45c2b;
  --ezcs-accent2:    #e07a3a;
  --ezcs-ink:        #12192b;
  --ezcs-ink2:       rgba(18,25,43,0.55);
  --ezcs-ink3:       rgba(18,25,43,0.35);
  --ezcs-surface:    #f6f7fa;
  --ezcs-border:     rgba(18,25,43,0.09);
  --ezcs-white:      #ffffff;
  --ezcs-radius:     20px;
  --ezcs-ease:       cubic-bezier(0.22,1,0.36,1);
  --ezcs-dur:        200ms;
  --ezcs-green:      #16a34a;
}

/* ── Outer wrapper ── */
.ezcs-section {
  padding: var(--ezcs-pt, 56px) 0 var(--ezcs-pb, 72px);
}
.ezcs-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─────────────────────────────────────────────────
   HEADER
───────────────────────────────────────────────── */
.ezcs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.ezcs-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ezcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ezcs-accent);
}
.ezcs-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ezcs-accent);
  flex-shrink: 0;
  animation: ezcs-pulse 2.4s ease-in-out infinite;
}
@keyframes ezcs-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,92,43,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(196,92,43,0); }
}

.ezcs-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--ezcs-ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

.ezcs-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ezcs-accent);
  text-decoration: none;
  border: 1.5px solid rgba(196,92,43,0.28);
  border-radius: 999px;
  padding: 9px 20px;
  transition: background var(--ezcs-dur), border-color var(--ezcs-dur), color var(--ezcs-dur), transform 150ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.ezcs-view-all:hover {
  background: var(--ezcs-accent);
  border-color: var(--ezcs-accent);
  color: #fff;
  transform: translateY(-1px);
}
.ezcs-view-all svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  transition: transform var(--ezcs-dur);
}
.ezcs-view-all:hover svg { transform: translateX(3px); }

/* ─────────────────────────────────────────────────
   GRID LAYOUT
───────────────────────────────────────────────── */
.ezcs-track {
  display: grid;
  grid-template-columns: repeat(var(--ezcs-cols, 3), 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .ezcs-track { grid-template-columns: repeat(2,1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .ezcs-track { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Carousel override ── */
.ezcs-section[data-layout="carousel"] .ezcs-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.ezcs-section[data-layout="carousel"] .ezcs-track::-webkit-scrollbar { display: none; }
.ezcs-section[data-layout="carousel"] .ezcs-card {
  flex: 0 0 clamp(200px, 28vw, 280px);
  scroll-snap-align: start;
}

/* ─────────────────────────────────────────────────
   PRODUCT CARD
───────────────────────────────────────────────── */
.ezcs-card {
  position: relative;
  background: var(--ezcs-white);
  border: 1.5px solid var(--ezcs-border);
  border-radius: var(--ezcs-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ezcs-dur), box-shadow var(--ezcs-dur), transform 240ms var(--ezcs-ease);
}
.ezcs-card:hover {
  border-color: rgba(196,92,43,0.3);
  box-shadow: 0 14px 40px rgba(196,92,43,0.12), 0 2px 10px rgba(0,0,0,0.05);
  transform: translateY(-4px);
}

/* Badge */
.ezcs-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  pointer-events: none;
}
.ezcs-badge.hot  { background: linear-gradient(135deg,#c45c2b,#e07a3a); color: #fff; }
.ezcs-badge.new  { background: #12192b; color: #fff; }
.ezcs-badge.sale { background: #dc2626; color: #fff; }

/* Image area */
.ezcs-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ezcs-surface);
  overflow: hidden;
}
.ezcs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ezcs-ease);
}
.ezcs-card:hover .ezcs-card-img img { transform: scale(1.06); }

/* Quick-add overlay */
.ezcs-quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(18,25,43,0.75) 0%, transparent 100%);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ezcs-dur), transform var(--ezcs-dur) var(--ezcs-ease);
  pointer-events: none;
}
.ezcs-card:hover .ezcs-quick-add {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ezcs-quick-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--ezcs-ink);
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: background var(--ezcs-dur), color var(--ezcs-dur), transform 120ms;
}
.ezcs-quick-add-btn:hover {
  background: linear-gradient(135deg,#c45c2b,#e07a3a);
  color: #fff;
}
.ezcs-quick-add-btn:active { transform: scale(0.95); }
.ezcs-quick-add-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Card body */
.ezcs-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ezcs-card-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ezcs-ink3);
  line-height: 1;
}
.ezcs-card-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ezcs-ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Color dots */
.ezcs-colors {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ezcs-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(18,25,43,0.12);
  flex-shrink: 0;
  transition: transform 150ms, border-color 150ms;
  cursor: default;
}
.ezcs-dot:hover { transform: scale(1.3); border-color: rgba(18,25,43,0.3); }
.ezcs-dot-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--ezcs-ink3);
}

/* Price */
.ezcs-price-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
}
.ezcs-price {
  font-size: 16px;
  font-weight: 900;
  color: var(--ezcs-ink);
  letter-spacing: -0.02em;
}
.ezcs-price-was {
  font-size: 12px;
  text-decoration: line-through;
  color: var(--ezcs-ink3);
}
.ezcs-price-save {
  font-size: 11px;
  font-weight: 800;
  color: #dc2626;
  background: rgba(220,38,38,0.08);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Stock pill */
.ezcs-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}
.ezcs-stock.in {
  color: var(--ezcs-green);
  background: rgba(22,163,74,0.09);
}
.ezcs-stock.in::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ezcs-green);
  flex-shrink: 0;
  animation: ezcs-pulse 2s ease-in-out infinite;
}
.ezcs-stock.low {
  color: #d97706;
  background: rgba(217,119,6,0.09);
}
.ezcs-stock.low::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d97706;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────
   SKELETON LOADER
───────────────────────────────────────────────── */
.ezcs-skeleton {
  pointer-events: none;
}
.ezcs-skel-line, .ezcs-skel-img {
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: ezcs-shimmer 1.4s infinite linear;
  border-radius: 8px;
}
@keyframes ezcs-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.ezcs-skel-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ezcs-skel-line { height: 12px; }
.ezcs-skel-line.w80 { width: 80%; }
.ezcs-skel-line.w60 { width: 60%; }
.ezcs-skel-line.w40 { width: 40%; }

/* ─────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────── */
.ezcs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ezcs-ink3);
  font-size: 13px;
  font-weight: 600;
}
.ezcs-empty svg {
  width: 40px;
  height: 40px;
  stroke: rgba(18,25,43,0.2);
}

/* ─────────────────────────────────────────────────
   TOAST NOTIFICATION
───────────────────────────────────────────────── */
.ezcs-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  background: var(--ezcs-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(18,25,43,0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 320ms var(--ezcs-ease), opacity 320ms;
  pointer-events: none;
}
.ezcs-toast.show {
  transform: translateY(0);
  opacity: 1;
}
.ezcs-toast svg {
  width: 16px;
  height: 16px;
  stroke: #4ade80;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ezcs-header { align-items: flex-start; flex-direction: column; }
  .ezcs-view-all { align-self: flex-start; }
  .ezcs-section { padding: 40px 0 52px; }
}
/* END_SECTION:complementary-products */

/* START_SECTION:contact-form (INDEX:18) */
/* .contact-form-section {
    overflow: hidden;
  } */
  .contact-form-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    @media (max-width: 1024px) {
      --gap: 30px;
      gap: var(--gap);
    }
    @media (max-width: 767px) {
      --gap: 20px;
    }
    .contact-form-media {
      grid-area: contact-media;
      height: var(--mediabox-height);
      body.rounded-corners & {
        border-radius: var(--card-roundness);
      }
    }
    .media-left .contact-form-media {
      @media (max-width: 767px) {
        margin-bottom: 20px;
      }
    }
    .media-right .contact-form-fields {
      .has-submit-button {
        @media (max-width: 767px) {
          margin-bottom: 20px;
        }
      }
    }
    /* @media (max-width: 1024px) {
      &.has-contact-media {
        gap: 0;
      }
    } */
    @media (max-width: 767px) {
      &.has-contact-media {
        &.media-left {
          grid-template-areas: 'contact-media' 'contact-form';
        }
        &.media-right {
          grid-template-areas: 'contact-form' 'contact-media';
        }
      }
    }
    @media (min-width: 768px) {
      &.has-contact-media {
        gap: var(--gap);
        grid-template-columns: repeat(2, 1fr);
        &.media-left {
          grid-template-areas: 'contact-media contact-form';
          .media-offset {
            --media-offset: calc(
              (-50vw - var(--gap)) + (100% + var(--gap)) - (var(--container-padding) * var(--padding-scale))
            );
            width: 100%;
            margin-right: auto;
            margin-left: var(--media-offset);
          }
        }
        &.media-right {
          grid-template-areas: 'contact-form contact-media';
          .media-offset {
            --media-offset: calc(-50vw + (100% + var(--gap)) - (var(--container-padding) * var(--padding-scale)));
            width: 100%;
            margin-left: auto;
            margin-right: var(--media-offset);
          }
        }
        .contact-form-fields {
          margin-inline: unset;
        }
      }
    }
  }
  .contact-form-fields {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    .has-contact-media & {
      grid-area: contact-form;
      /* .media-right & {
        @media (min-width: 768px) and (max-width: 1024px) {
          --media-offset: calc(-50vw + (100% + var(--gap)) - (var(--container-padding) * var(--padding-scale)));
          width: 100%;
          margin-left: auto;
          margin-right: var(--media-offset);
        }
      } */
      /* .media-left & {
        @media (min-width: 768px) and (max-width: 1024px) {
          --media-offset: calc((-50vw + (100% + var(--gap)) - (var(--container-padding) * var(--padding-scale))));
          width: 100%;
          margin-right: auto;
          margin-left: var(--media-offset);
        }
      } */
    }
    @media (max-width: 767px) {
      .input-group.has-submit-button {
        margin-block-end: 0;
      }
    }
  }
  .contact-info-block {
    margin-block: 60px;
    .contact-info-heading {
      margin-bottom: 20px;
    }
    .contact-info-item {
      gap: 6px;
      display: flex;
      padding: 10px 0;
      justify-content: space-between;
      @media (min-width: 768px) {
        gap: 10px;
        padding: 20px 0;
      }
      @media (min-width: 1025px) {
        padding: 30px 0;
      }
      &:not(:last-child) {
        border-bottom: var(--border-width) var(--border-style) var(--border-color);
      }
      > * {
        flex: 1 1 100%;
      }
    }
  }
  .contact-info-label {
    &:has(.svg-inside) {
      --svg-inside-size: 22px;
      gap: 10px;
      display: flex;
      align-items: center;
    }
  }
  .form-collapse {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    .span-fullwidth {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:contact-form */

/* START_SECTION:customer-reviews (INDEX:19) */
.customer-reviews {
    padding-block: var(--section-padding-block, 60px);
  }
  .customer-reviews__container {
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline, 24px);
  }
  .customer-reviews__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 640px;
    margin-inline: auto;
  }
  .customer-reviews__heading {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .customer-reviews__subheading {
    margin: 0;
    opacity: 0.85;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .customer-reviews__grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .customer-reviews__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
  }
  @media (min-width: 990px) {
    .customer-reviews__grid {
      grid-template-columns: repeat(var(--reviews-columns, 3), 1fr);
      gap: 2rem;
    }
  }

  /* Card - premium look */
  .customer-reviews__card {
    background: rgb(var(--color-background));
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
  }
  .customer-reviews__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(var(--color-foreground), 0.06), rgba(var(--color-foreground), 0.02));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .customer-reviews--style-shadow .customer-reviews__card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .customer-reviews--style-shadow .customer-reviews__card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
  }
  .customer-reviews--style-bordered .customer-reviews__card {
    border: 1px solid rgba(var(--color-foreground), 0.08);
  }
  .customer-reviews--style-bordered .customer-reviews__card:hover {
    border-color: rgba(var(--color-foreground), 0.12);
    transform: translateY(-1px);
  }

  /* Image area */
  .customer-reviews__card-media {
    position: relative;
    aspect-ratio: var(--card-media-ratio, 4 / 3);
    background: rgba(var(--color-foreground), 0.04);
    overflow: hidden;
  }
  .customer-reviews__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .customer-reviews--layout-left .customer-reviews__card-media {
    aspect-ratio: 1;
    min-width: 100px;
  }
  .customer-reviews__card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .customer-reviews--layout-left .customer-reviews__card-body {
    padding: 1.25rem 1.5rem;
  }

  /* Quote icon */
  .customer-reviews__quote-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0.75rem;
    opacity: 0.35;
  }
  .customer-reviews__quote-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  /* Stars */
  .customer-reviews__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 0.875rem;
  }
  .customer-reviews__stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .customer-reviews__stars svg.filled {
    opacity: 1;
  }
  .customer-reviews__stars svg.empty {
    opacity: 0.22;
  }

  /* Quote text */
  .customer-reviews__quote {
    flex: 1;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    font-style: normal;
  }

  /* Author row - with optional avatar */
  .customer-reviews__author-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
  }
  .customer-reviews__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(var(--color-foreground), 0.08);
  }
  .customer-reviews__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .customer-reviews__author-info {
    min-width: 0;
  }
  .customer-reviews__author {
    font-weight: 600;
    font-size: 0.9375rem;
  }
  .customer-reviews__product {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    opacity: 0.75;
  }
  .customer-reviews__product a {
    text-decoration: none;
    color: inherit;
  }
  .customer-reviews__product a:hover {
    text-decoration: underline;
  }

  /* Layout: image left (horizontal card) */
  .customer-reviews--layout-left .customer-reviews__card {
    flex-direction: row;
  }
  @media (min-width: 768px) {
    .customer-reviews--layout-left .customer-reviews__card-media {
      width: 140px;
      min-width: 140px;
      aspect-ratio: 1;
    }
  }
  .customer-reviews--layout-left .customer-reviews__card-body {
    text-align: left;
  }
  .customer-reviews--layout-left .customer-reviews__quote {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }
/* END_SECTION:customer-reviews */

/* START_SECTION:featured-blogs (INDEX:26) */
.featured-blogs-section {
    overflow: hidden;
    featured-blogs {
      &.has-tilt-carousel {
        /* overflow: hidden; */
        position: relative;
      }
    }
    .featured-blogs-grid {
      display: grid;
      gap: var(--gap);
      align-items: start;
      @media (max-width: 767px) {
        &:not(.mobile-swipe) {
          grid-template-columns: repeat(var(--layout-columns), 1fr);
        }
      }
      @media (min-width: 768px) {
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
    }
    .featured-blogs {
      &.swiper {
        &.tilt-carousel {
          .featured-blogs-wrapper {
            @media (max-width: 767px) {
              display: grid;
              gap: var(--gap);
              overflow-x: auto;
              scrollbar-width: none;
              grid-auto-flow: column;
              scroll-snap-type: x mandatory;
              grid-auto-columns: minmax(85%, 1fr);
              grid-template-columns: repeat(auto-fill, minmax(85%, 1fr));
              .blog-card {
                transform: none !important;
                width: 100% !important;
              }
              .swiper-initialized & {
                scrollbar-width: thin;
              }
            }
            &.swiper-wrapper {
              @media (min-width: 768px) {
                overflow: visible;
                html.no-js & {
                  overflow: unset;
                }
              }
            }
          }
          &:not(.swiper-initialized) {
            .featured-blogs-wrapper {
              @media (min-width: 768px) {
                display: grid;
                gap: var(--gap);
                overflow-x: auto;
                align-items: start;
                scrollbar-width: none;
                scroll-snap-type: x mandatory;
                grid-template-columns: repeat(var(--layout-columns), 1fr);
              }
            }
          }
          .blog-card {
            @media (max-width: 1024px) {
              --blog-card-padding: 12px;
            }
            &.swiper-slide {
              @media (min-width: 768px) {
                top: var(--tilt-card-offset);
                transition: all 0.4s ease;
              }
              &.swiper-slide-active {
                top: 0;
                .blog-content {
                  @media (min-width: 768px) {
                    clip-path: inset(-5% -5% -5% -5%);
                    transition: clip-path 0.6s ease 0.2s;
                  }
                  html.no-js & {
                    clip-path: unset;
                  }
                  & > * {
                    @media (min-width: 768px) {
                      opacity: 1;
                    }
                  }
                  .blog-button {
                    @media (min-width: 768px) {
                      margin-top: 20px;
                    }
                  }
                }
              }
              &:not(.swiper-slide-active) {
                .blog-media {
                  border-color: var(--border-color);
                  border-width: var(--border-width);
                  transition-delay: 0.5s;
                }
              }
              .blog-content {
                @media (min-width: 768px) {
                  clip-path: inset(0 0 100% 0);
                  transition: clip-path 0.6s ease 0s;
                  border-color: var(--border-color);
                }
                & > * {
                  @media (min-width: 768px) {
                    opacity: 0;
                    transition: opacity 0.3s ease-in 0.6s;
                  }
                  html.no-js & {
                    opacity: 1;
                  }
                }
              }
            }
          }
          .swiper-navigation {
            margin-block: 30px 40px;
          }
        }
        &:not(.tilt-carousel) {
          overflow: visible;
        }
      }
    }
    .has-tilt-carousel .blog-content {
        margin-bottom: 1px;
    }
  }
/* END_SECTION:featured-blogs */

/* START_SECTION:featured-collection (INDEX:27) */
.featured-collection-products.featured-collection-products-grid {
    display: grid;
    gap: var(--row-gap) var(--column-gap);
    @media (min-width: 768px) {
      grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
    }
    @media (max-width: 767px) {
      &:not(.mobile-swipe){
        grid-template-columns: repeat(var(--layout-columns, 1), 1fr);
      }
    }
  }
  .featured-collection-products {
    &:has(.product-card.swiper) > * {
      min-width: 0;
      min-height: 0;
    }
  }
  .featured-collection-footer {
    margin-top: 15px;
  }

  @media (max-width: 767px) {
    .featured-collection-section {
      .layout-header-actions.has-swiper-nav {
        display: none;
      }
    }
  }
/* END_SECTION:featured-collection */

/* START_SECTION:featured-collections (INDEX:28) */
.shop-by-categories {
    /* @media (max-width: 767px) {
      padding-bottom: calc(var(--mediabox-height) / 2);
      &:has(.mobile-swipe) {
        margin-bottom: 50%;
        padding-bottom: 0;
      }
    } */
    @media (min-width: 768px) { 
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  .shop-by-categories-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 10px;
    @media (min-width: 768px) {
      padding: 40px 20px;
    }
    @media (min-width: 1200px) {
      padding: 100px 60px;
      /* LINE BREAK COMMENT */
    }
  }

  .shop-by-categories-list {
    /* display: flex;
    flex-wrap: wrap; */
    gap: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .shop-by-categories-item {
    /* flex: 1 1 calc(50% - 3px); */
    cursor: pointer;
    max-width: max-content;
    max-height: max-content;
    &.active {
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }

  .shop-by-categories-productswrap {
    position: relative;
    min-width: 0; 
    @media (min-width: 768px) {
      overflow: hidden;
    }
  }

  .shop-by-categories-products {
    position: absolute;
    overflow-y: auto;
    padding: 12px 15px;
    left: 10px;
    width: 100%;
    inset-block: 10px;
    max-width: calc(100% - 20px);
    background: var(--layout-background);
    @media (max-width: 767px) {
      position: relative;
      inset: 0;
      /* inset-block-end: auto; */
      margin: 0 auto;
      margin-top: calc(-.25 * var(--mediabox-height));
      /* max-height: var(--mediabox-height);
      top: calc(var(--mediabox-height) / 2);
      &.mobile-swipe {
        top: 100%;
        transform: translateY(-50%);
      } */
    }
    /* @media (min-width: 576px) {
      left: 20px;
    } */
    @media (min-width: 768px) {
      max-width: 260px;
      max-height: calc(var(--mediabox-height) - 20px);
      margin: 15px;
      inset: 0;
    }
    @media (min-width: 1200px) {
      /* left: 40px;
      padding: 22px 30px; */
      padding: 22px 30px;
      margin: 40px;
      /* LINE BREAK COMMENT */
    }
    &.mobile-swipe {
      @media (max-width: 767px) {
        gap: 10px;
        max-height: unset;
        /* min-height: var(--mediabox-height); */
        grid-auto-columns: minmax(45%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
      }
      @media (max-width: 575px) {
        grid-auto-columns: minmax(65%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(65%, 1fr));
      }
    }
  }

  .shop-by-categories-product {
    & + .shop-by-categories-product {
      @media (max-width: 767px) {
        margin-top: 10px;
        .mobile-swipe & {
          margin-top: 0;
        }
      }
      @media (min-width: 768px) {
        margin-top: 25px;
      }
    }
  }

  .shop-by-categories-media {
    height: var(--mediabox-height);
    /* LINE BREAK COMMENT */
  }
/* END_SECTION:featured-collections */

/* START_SECTION:featured-product (INDEX:29) */
.productmedia-gallery:not(.swiper-initialized) .productmedia-gallery-item {
    --column-gap:0;
  }
  .productmedia-thumbs:not(.swiper-initialized) .productmedia-thumb-item{
    --column-gap:3px;
  }
  .layout-scrolling-with-two-slides .productmedia-gallery:not(.swiper-initialized) .productmedia-gallery-item {
    --column-gap:2px;
  }
  .featured-product {
    display: grid;
    align-items: start;
    gap: var(--grid-gap);
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 'featured-media' 'featured-thumbs' 'featured-info';
    @media (max-width: 1024px) {
      grid-template-areas:
        'featured-media'
        'featured-info'
        'featured-thumbs';
    }
    &:not(.has-thumbs-block) {
      gap: 0;
      .featured-info-block {
        @media (min-width: 1025px) {
          height: 100%;
          margin-left: 10px;
        }
        
        .product-info {
          width: 100%;
          display: block;
          margin-inline: auto;
          @media (min-width: 1025px) {
            max-width: 85%;
          }
          @media (min-width: 1200px) {
            max-width: 70%;
          }
        }
      }
      .has-vertical-border{
        @media (min-width: 1025px) {
          border-left: var(--border-width) var(--border-style) var(--border-color);
        }
      }
    }
    @media (min-width: 1025px) {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: 'featured-media featured-info';
      &.has-thumbs-block {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 'featured-thumbs featured-media featured-info';
      }
    }
    .swiper-navigation {
      @media (max-width: 767px) {
        top: 0;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }

  .featured-product > * {
    min-width: 0;
    min-height: 0;
  }
  .featured-product-block {
    &.featured-thumbs-block {
      grid-area: featured-thumbs;
      isolation: isolate;
      @media (min-width:1025px) {
        position: sticky;
        top: 10px;
      }
    }
    &.featured-media-block {
      grid-area: featured-media;
      isolation: isolate;
      @media (min-width:1025px) {
        position: sticky;
        top: 10px;
      }
    }
    &.featured-info-block {
      grid-area: featured-info;
    }
  }
  .featured-product-media {
    height: var(--mediabox-height);
  }
  .featured-product-thumbs {
    .productmedia-thumbs.swiper {
      padding-bottom: 10px;
    }


    .productmedia-thumb {
      position: relative;
      padding-bottom: 18px;
      &::after {
        content: '';
        bottom: 2px;
        width: 8px;
        height: 8px;
        left: 50%;
        display: block;
        aspect-ratio: 1;
        position: absolute;
        margin-inline: auto;
        transform: translateX(-50%) rotate(45deg) scale(0);
        background-color: var(--text-color);
        transition: transform 0.3s ease;
      }
      .swiper-slide-thumb-active & {
        &::after {
          transform: translateX(-50%) rotate(45deg) scale(1);
        }
      }
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:hero-slider (INDEX:33) */
/* ============================================
     HERO CAROUSEL - BASE STYLES
     ============================================ */
  .hero-slider {
    position: relative;
    width: 100%;
    height: var(--hero-height, 100vh);
    min-height: 600px;
    overflow: hidden;
    background: #000;
  }

  /* Track container for smooth sliding */
  .hero-slider__track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Individual slide */
  .hero-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    min-width: 0;
  }

  /* ============================================
     LEFT IMAGE SECTION
     ============================================ */
  .hero-slider__left-image {
    flex: 0 0 50%;
    position: relative;
    min-width: 0;
    background: #1a1a1a;
  }

  .hero-slider__left-image img,
  .hero-slider__left-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
  }

  .hero-slider__left-image video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  /* Dark gradient overlay for text readability */
  .hero-slider__left-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 45%,
      transparent 65%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* ============================================
     RIGHT IMAGE SECTION
     ============================================ */
  .hero-slider__right-image {
    flex: 0 0 25%;
    position: relative;
    min-width: 0;
    background: #1a1a1a;
  }

  .hero-slider__right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ============================================
     BRAND & LEFT CONTENT
     ============================================ */
  .hero-slider__brand {
    position: absolute;
    top: 48px;
    left: 56px;
    z-index: 3;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: flex;
    align-items: center;
  }

  .hero-slider__brand img {
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
  }
  }

  .hero-slider__left-content {
    position: absolute;
    bottom: 64px;
    left: 56px;
    right: 40px;
    z-index: 3;
    max-width: 600px;
    pointer-events: none;
  }

  .hero-slider__heading {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0 0 24px;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  .hero-slider__description {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    max-width: 520px;
  }

  .hero-slider__cta {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none;
    background: #c41e3a;
    padding: 16px 36px;
    border: none;
    border-radius: 0;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    font-weight: 600;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    line-height: 1;
    white-space: nowrap;
  }

  .hero-slider__cta:hover,
  .hero-slider__cta:focus {
    background: #fff;
    color: #1a1a1a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    outline: none;
    text-decoration: none;
  }

  /* ============================================
     CENTER PANEL (middle column, no overlap)
     ============================================ */
  .hero-slider__center {
    flex: 0 0 25%;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  /* Dark Panel (Top) */
  .hero-slider__panel-dark {
    flex: 0 0 35%;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-slider__panel-dark-inner {
    padding: 52px 28px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-slider__panel-dark h2 {
    margin: 0;
    font-size: var(--panel-heading-size, clamp(1.125rem, 1.8vw, 1.625rem));
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
    overflow: hidden;
  }

  /* Animated text lines */
  .hero-slider__panel-dark .text-line {
    display: block;
    opacity: 0;
    line-height: 1.25;
    margin-bottom: 4px;
    transform: translateX(0);
  }

  .hero-slider__panel-dark .text-line:last-child {
    margin-bottom: 0;
  }

  /* Animation classes */
  .hero-slider__panel-dark .text-line.animate-from-left {
    animation: slideInFromLeft 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .hero-slider__panel-dark .text-line.animate-from-right {
    animation: slideInFromRight 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  /* Staggered animation delays */
  .hero-slider__panel-dark .text-line:nth-child(1) {
    animation-delay: 0.2s;
  }

  .hero-slider__panel-dark .text-line:nth-child(2) {
    animation-delay: 0.35s;
  }

  .hero-slider__panel-dark .text-line:nth-child(3) {
    animation-delay: 0.5s;
  }

  /* Accent text styling */
  .hero-slider__panel-dark .accent {
    color: var(--slide-accent, #c41e3a);
    display: block;
    font-size: 1.3em;
    margin-top: 8px;
    font-weight: 700;
  }

  /* Light Panel (Bottom) */
  .hero-slider__panel-light {
    flex: 1 1 65%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-slider__panel-light-inner {
    padding: 44px 28px 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }

  /* Feature items */
  .hero-slider__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: var(--panel-feature-size, clamp(0.75rem, 1vw, 0.875rem));
    font-family: var(--panel-feature-font, inherit);
    font-weight: var(--panel-feature-weight, 400);
    line-height: 1.45;
    color: inherit;
    opacity: 0;
  }

  .hero-slider__feature.animate-from-left {
    animation: featureSlideLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .hero-slider__feature.animate-from-right {
    animation: featureSlideRight 0.75s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  /* Staggered feature animations */
  .hero-slider__feature:nth-child(1) {
    animation-delay: 0.3s;
  }

  .hero-slider__feature:nth-child(2) {
    animation-delay: 0.45s;
  }

  .hero-slider__feature:nth-child(3) {
    animation-delay: 0.6s;
  }

  .hero-slider__feature:nth-child(4) {
    animation-delay: 0.75s;
  }

  .hero-slider__feature-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.98;
    margin-top: 1px;
  }

  .hero-slider__feature-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
  }

  /* ============================================
     ANIMATIONS
     ============================================ */
  @keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes featureSlideLeft {
    from {
      opacity: 0;
      transform: translateX(-45px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes featureSlideRight {
    from {
      opacity: 0;
      transform: translateX(45px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .hero-slider__track {
      transition: none;
    }

    .hero-slider__panel-dark .text-line,
    .hero-slider__feature {
      animation: none;
      opacity: 1;
    }
  }

  /* ============================================
     NAVIGATION CONTROLS
     ============================================ */
  .hero-slider__nav-wrap {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    pointer-events: none;
  }

  .hero-slider__arrows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-slider__arrow {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
  }

  .hero-slider__arrow:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  }

  .hero-slider__arrow:active {
    transform: scale(0.96);
  }

  .hero-slider__arrow:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .hero-slider__arrow svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke-width: 2.5;
  }

  .hero-slider__counter {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-weight: 500;
  }

  /* ============================================
     RESPONSIVE DESIGN
     ============================================ */
  @media (max-width: 1023px) {
    /* Stack layout on tablet: left, then center, then right */
    .hero-slider__slide {
      flex-direction: column;
    }

    .hero-slider__left-image {
      flex: 0 0 50%;
      min-height: 380px;
    }

    .hero-slider__center {
      flex: 0 0 auto;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }

    .hero-slider__right-image {
      flex: 0 0 35%;
      min-height: 280px;
    }

    .hero-slider__nav-wrap {
      right: 32px;
    }

    .hero-slider__brand {
      top: 32px;
      left: 32px;
      font-size: 0.9375rem;
    }

    .hero-slider__brand img {
      max-width: 100%;
    }

    .hero-slider__left-content {
      bottom: 40px;
      left: 32px;
      right: 32px;
      max-width: 100%;
    }

    .hero-slider__panel-dark-inner,
    .hero-slider__panel-light-inner {
      padding: 40px 36px;
    }
  }

  @media (max-width: 767px) {
    /* Mobile optimizations */
    .hero-slider {
      min-height: 500px;
    }

    .hero-slider__left-image {
      min-height: 320px;
    }

    .hero-slider__right-image {
      min-height: 260px;
    }

    .hero-slider__center {
      width: 92%;
      max-width: 100%;
      margin: 0 auto;
    }

    .hero-slider__panel-light-inner {
      gap: 18px;
      padding: 32px 28px 36px;
    }

    .hero-slider__feature {
      font-size: 0.875rem;
      gap: 16px;
    }

    .hero-slider__arrow {
      width: 50px;
      height: 50px;
    }

    .hero-slider__arrow svg {
      width: 22px;
      height: 22px;
    }
  }
/* END_SECTION:hero-slider */

/* START_SECTION:highlighted-products-tabs (INDEX:34) */
.highlighted-product-tabs-section {
    overflow: hidden;
  }

  .highlighted-product-tabs-wrapper {
    gap: 10px;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    @media (min-width: 1025px) {
      gap: 20px;
      grid-template-columns: repeat(3, 1fr);
    }
    & > * {
      min-width: 0;
    }
  }
  .highlighted-product-tabs-head {
    gap: 9px;
    display: flex;
    margin-bottom: 30px;
    justify-content: center;
    flex-direction: row;
    @media (min-width: 768px) {
      margin-bottom: 48px;
      justify-content: flex-start;
    }
  }
  .highlighted-product-tabs-body {
    .swiper-navigation {
      margin-top: 28px;
    }
  }
  /*  */
  .highlighted-product-mediacontent {
    gap: 10px;
    display: grid;
    @media (max-width: 1024px) {
      align-items: start;
      grid-template-columns: auto 1fr;
    }
    @media (min-width: 1025px) {
      gap: 20px;
      grid-column: span 2;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;
    }
    .highlighted-product-media {
      display: grid;
      @media (max-width: 1024px) {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        .without-thumbnail-product & {
          grid-column: 1 / 3;
        }
      }
      @media (min-width: 1025px) {
        grid-row: span 2;
      }
      .highlighted-product-media-box {
        grid-area: 1/1/-1/-1;
        visibility: hidden;
        opacity: 0;
        display: flex;
        align-items: center;
        transform: translateY(50%);
        transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, visibility 0s linear 0.51s;
        &.active {
          opacity: 1;
          visibility: visible;
          transform: translateY(0px);
          transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s, visibility 0s linear 0s;
        }
      }
    }
    .highlighted-product-images-list {
      @media (max-width: 1024px) {
        width: 100px;
        max-width: 100px;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        max-height: var(--highlighted-product-media-height, 300px);
        overflow-y: auto;
      }
      @media (max-width: 767px) {
        width: 80px;
        max-width: 80px;
      }
      @media (max-width: 575px) {
        width: 60px;
        max-width: 60px;
      }
      .highlighted-product-text {
        margin-bottom: 15px;
        @media (max-width: 1024px) {
          display: none;
        }
      }
    }
    .highlighted-product-cards-list {
      @media (max-width: 1024px) {
        grid-column: span 2;
      }
    }
  }

  .highlighted-product-tab-button {
    display: flex;
    font-size: 14px;
    padding: 5px 22px;
    cursor: pointer;
    max-width: 250px;
    min-width: 150px;
    min-height: 36px;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: var(--border-width) var(--border-style) currentColor;
    &:hover {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }
    &.active {
      color: var(--layout-background);
      background: var(--text-color);
      border-color: var(--text-color);
    }
    @media (max-width: 576px) {
      flex: 1;
    }
  }
  .highlighted-product-tabs-content.swiper {
    padding-block: 1px;
    &:not(.swiper-initialized) {
      .swiper-wrapper {
        display: grid;
        gap: var(--gap);
        overflow-x: auto;
        grid-auto-flow: column;
        scroll-snap-type: x mandatory;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
  .highlighted-product-tab-thumb {
    aspect-ratio: 1 / 1.229;
    position: relative;
    cursor: pointer;
    &::after {
      --border-width: 1px;
      content: '';
      inset: 0;
      z-index: 1;
      display: block;
      position: absolute;
      pointer-events: none;
      box-sizing: border-box;
      border: var(--border-width) var(--border-style) color-mix(in srgb, var(--text-color) 50%, transparent);
    }
    &.has-roundness {
      &::after {
        border-radius: var(--card-roundness);
      }
    }
    .swiper-slide-active & {
      &::after {
        --border-width: 2px;
        border-color: var(--border-color);
      }
    }
    .active-thumb-icon {
      opacity: 0;
      --svg-inside--size: 9px;
      top: 6px;
      left: 6px;
      width: 21px;
      height: 21px;
      display: flex;
      cursor: pointer;
      position: absolute;
      align-items: center;
      justify-content: center;
      background: var(--text-color);
      color: var(--layout-background);
      .swiper-slide-active & {
        opacity: 1;
      }
      .has-roundness & {
        top: clamp(6px, calc(var(--card-roundness) / 2), 25px);
        left: clamp(6px, calc(var(--card-roundness) / 2), 25px);
      }
    }
  }
  .additional-images {
    grid-area: 1/1/-1/-1;
    gap: 5px;
    display: grid;
    margin-bottom: 10px;
    grid-template-columns: repeat(1, 1fr);
    @media (min-width: 1025px) {
      margin-bottom: 30px;
      grid-template-columns: repeat(4, 1fr);
    }
    @media (min-width: 1200px) {
      margin-bottom: 60px;
      grid-template-columns: repeat(6, 1fr);
    }
  }
  .additional-image {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50%);
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, visibility 0s linear calc(0.51s * var(--image-index));
    .additional-images.active.animate & {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
      transition: opacity 0.5s ease calc(0.1s * var(--image-index)), transform 0.5s ease calc(0.1s * var(--image-index)),
        visibility 0s linear 0s;
    }
  }
  .highlighted-product-card {
    width: 100%;
  }
  .highlighted-product-card-head {
    gap: 30px;
    display: flex;
    padding: 15px;
    align-items: flex-start;
    .has-roundness & {
      border-radius: var(--card-roundness) var(--card-roundness) 0 0;
    }
    @media (min-width: 768px) {
      padding: 20px;
    }
    @media (min-width: 1025px) {
      padding: 25px;
    }
    @media (min-width: 1200px) {
      padding: 35px 30px;
    }
    span {
      padding: 5px 8px;
      line-height: 1;
      white-space: nowrap;
      align-items: center;
      display: inline-flex;
      color: var(--card-background);
      background: var(--text-color);
    }
  }
  .highlighted-product-card-body {
    padding: 15px;
    background: var(--layout-background--alternate);
    .has-roundness & {
      border-radius: 0 0 var(--card-roundness) var(--card-roundness);
    }
    @media (min-width: 768px) {
      padding: 20px;
    }
    @media (min-width: 1025px) {
      padding: 25px;
    }
    @media (min-width: 1200px) {
      padding: 35px 30px;
    }
    .highlighted-product-buybutton {
      gap: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .highlighted-product-card-buttons {
        gap: 5px;
        display: flex;
        max-width: 250px;
        text-align: center;
        justify-content: center;
        & > span {
          display: flex;
          cursor: pointer;
          min-height: 45px;
          text-align: center;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          border: var(--border-width) var(--border-style) currentColor;
          &:not(.card-button-icon) {
            padding: 8px 22px;
            min-width: 125px;
          }
        }
        .card-button-icon {
          aspect-ratio: 1;
          --button-width: auto;
          .btn-icon {
            width: 100%;
            height: 100%;
            border-radius: var(--button-roundness);
          }
        }
        & > .button-regular:not(.button-link, .card-button-icon) {
          --button-width: 130px;
        }
      }
    }
    .kit-builder-panel {
      margin-top: 28px;
      padding: 20px;
      background: var(--layout-background);
      border: var(--border-width) var(--border-style) var(--border-color);
      border-radius: var(--card-roundness, 12px);
      .has-roundness & {
        border-radius: var(--card-roundness);
      }
    }
    .kit-builder-panel__title {
      font-size: 1.1rem;
      font-weight: 700;
      margin: 0 0 8px;
    }
    .kit-builder-panel__step {
      font-size: 0.9rem;
      color: color-mix(in srgb, var(--text-color) 70%, transparent);
      margin: 0 0 16px;
    }
    .kit-builder-panel__inputs {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
      @media (min-width: 576px) {
        grid-template-columns: 1fr 1fr;
      }
    }
    .kit-builder-panel__label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.85rem;
      font-weight: 600;
    }
    .kit-builder-panel__input {
      padding: 10px 12px;
      border: var(--border-width) var(--border-style) var(--border-color);
      border-radius: 8px;
      font-size: 1rem;
    }
    .kit-builder-panel__summary {
      font-size: 0.95rem;
      margin-bottom: 14px;
      min-height: 2.5em;
    }
    .kit-builder-panel__btn {
      min-width: 160px;
    }
    .kit-builder-panel__btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .kit-builder-panel__empty {
      margin: 0;
      font-size: 0.9rem;
      color: color-mix(in srgb, var(--text-color) 65%, transparent);
    }
    .kit-builder-panel__empty code {
      background: color-mix(in srgb, var(--text-color) 12%, transparent);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.85em;
    }
    .highlighted-product-icons {
      gap: 10px;
      display: grid;
      margin-top: 30px;
      @media (min-width: 768px) and (max-width: 1024px) {
        overflow-x: auto;
        scrollbar-width: none;
        grid-auto-flow: column;
        scroll-snap-type: x mandatory;
        grid-auto-columns: minmax(40%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(41%, 1fr));
      }
      @media (min-width: 1025px) {
        grid-template-columns: repeat(2, 1fr);
      }
      .highlighted-product-icon {
        gap: 10px;
        display: flex;
        padding: 15px 10px;
        align-items: center;
        background: var(--layout-background);
        border: var(--border-width) var(--border-style) var(--border-color);
        .iconbox {
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .textbox {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
/* END_SECTION:highlighted-products-tabs */

/* START_SECTION:images-with-text (INDEX:37) */
.image-with-text {
    --gap: 30px;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--column-count), 1fr);
    @media (max-width: 767px) {
      &.media-left {
        grid-template-areas: 'media-block' 'content-block';
      }
      &.media-right {
        grid-template-areas: 'content-block' 'media-block';
      }
    }
    @media (min-width: 768px) {
      --gap: 20px;
    }
    @media (min-width: 1025px) {
      --gap: 40px;
    }
    &.media-left {
      @media (min-width: 768px) {
        grid-template-areas: 'media-block content-block';
      }
    }
    &.media-right {
      @media (min-width: 768px) {
        grid-template-areas: 'content-block media-block';
      }
    }
  }
  .image-with-text-content {
    grid-area: content-block;
    @media (min-width: 768px) {
      max-width: 450px;
      margin: auto;
    }
  }
  .image-with-text-media {
    grid-area: media-block;
  }

  @media (max-width: 767px){
    .image-with-text-section .container-fullwidth.no-padding {
      padding-inline: 10px !important;
  }
  }
/* END_SECTION:images-with-text */

/* START_SECTION:interactive-slideshow (INDEX:38) */
/* ============================================
     HERO CAROUSEL - BASE STYLES
     ============================================ */
  .hero-slider {
    position: relative;
    width: 100%;
    height: var(--hero-height, 100vh);
    min-height: 600px;
    overflow: hidden;
    background: #000;
  }

  /* Track container for smooth sliding */
  .hero-slider__track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Individual slide */
  .hero-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    min-width: 0;
  }

  /* ============================================
     LEFT IMAGE SECTION
     ============================================ */
  .hero-slider__left-image {
    flex: 0 0 50%;
    position: relative;
    min-width: 0;
    background: #1a1a1a;
  }

  .hero-slider__left-image img,
  .hero-slider__left-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
  }

  .hero-slider__left-image video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  /* Dark gradient overlay for text readability */
  .hero-slider__left-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 45%,
      transparent 65%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* ============================================
     RIGHT IMAGE SECTION
     ============================================ */
  .hero-slider__right-image {
    flex: 0 0 25%;
    position: relative;
    min-width: 0;
    background: #1a1a1a;
  }

  .hero-slider__right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ============================================
     BRAND & LEFT CONTENT
     ============================================ */
  .hero-slider__brand {
    position: absolute;
    top: 48px;
    left: 56px;
    z-index: 3;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }

  .hero-slider__left-content {
    position: absolute;
    bottom: 64px;
    left: 56px;
    right: 40px;
    z-index: 3;
    max-width: 600px;
    pointer-events: none;
  }

  .hero-slider__heading {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0 0 24px;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  .hero-slider__description {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    max-width: 520px;
  }

  .hero-slider__cta {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none;
    background: #c41e3a;
    padding: 16px 36px;
    border: none;
    border-radius: 0;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    font-weight: 600;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    line-height: 1;
    white-space: nowrap;
  }

  .hero-slider__cta:hover,
  .hero-slider__cta:focus {
    background: #fff;
    color: #1a1a1a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    outline: none;
    text-decoration: none;
  }

  /* ============================================
     CENTER PANEL (middle column, no overlap)
     ============================================ */
  .hero-slider__center {
    flex: 0 0 25%;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  /* Dark Panel (Top) */
  .hero-slider__panel-dark {
    flex: 0 0 35%;
    background: var(--hero-dark-bg, #1a1a1a);
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-slider__panel-dark-inner {
    padding: 52px 28px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-slider__panel-dark h2 {
    margin: 0;
    font-size: var(--panel-heading-size, clamp(1.125rem, 1.8vw, 1.625rem));
    font-weight: 600;
    line-height: 1.25;
    color: var(--hero-center-text-color, #fff);
    overflow: hidden;
  }

  /* Animated text lines */
  .hero-slider__panel-dark .text-line {
    display: block;
    opacity: 0;
    line-height: 1.25;
    margin-bottom: 4px;
    transform: translateX(0);
  }

  .hero-slider__panel-dark .text-line:last-child {
    margin-bottom: 0;
  }

  /* Animation classes */
  .hero-slider__panel-dark .text-line.animate-from-left {
    animation: slideInFromLeft 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .hero-slider__panel-dark .text-line.animate-from-right {
    animation: slideInFromRight 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  /* Staggered animation delays */
  .hero-slider__panel-dark .text-line:nth-child(1) {
    animation-delay: 0.2s;
  }

  .hero-slider__panel-dark .text-line:nth-child(2) {
    animation-delay: 0.35s;
  }

  .hero-slider__panel-dark .text-line:nth-child(3) {
    animation-delay: 0.5s;
  }

  /* Accent text styling */
  .hero-slider__panel-dark .accent {
    color: var(--hero-accent, #d5b892);
    display: block;
    font-size: 1.3em;
    margin-top: 8px;
    font-weight: 700;
  }

  /* Light Panel (Bottom) */
  .hero-slider__panel-light {
    flex: 1 1 65%;
    background: var(--hero-light-bg, #d5b892);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-slider__panel-light-inner {
    padding: 44px 28px 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }

  /* Feature items */
  .hero-slider__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: var(--panel-feature-size, clamp(0.75rem, 1vw, 0.875rem));
    line-height: 1.45;
    color: var(--hero-center-text-color, #fff);
    opacity: 0;
  }

  .hero-slider__feature.animate-from-left {
    animation: featureSlideLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .hero-slider__feature.animate-from-right {
    animation: featureSlideRight 0.75s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  /* Staggered feature animations */
  .hero-slider__feature:nth-child(1) {
    animation-delay: 0.3s;
  }

  .hero-slider__feature:nth-child(2) {
    animation-delay: 0.45s;
  }

  .hero-slider__feature:nth-child(3) {
    animation-delay: 0.6s;
  }

  .hero-slider__feature:nth-child(4) {
    animation-delay: 0.75s;
  }

  .hero-slider__feature-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hero-center-text-color, #fff);
    opacity: 0.98;
    margin-top: 1px;
  }

  .hero-slider__feature-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
  }

  /* ============================================
     ANIMATIONS
     ============================================ */
  @keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes featureSlideLeft {
    from {
      opacity: 0;
      transform: translateX(-45px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes featureSlideRight {
    from {
      opacity: 0;
      transform: translateX(45px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .hero-slider__track {
      transition: none;
    }

    .hero-slider__panel-dark .text-line,
    .hero-slider__feature {
      animation: none;
      opacity: 1;
    }
  }

  /* ============================================
     NAVIGATION CONTROLS
     ============================================ */
  .hero-slider__nav-wrap {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    pointer-events: none;
  }

  .hero-slider__arrows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-slider__arrow {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
  }

  .hero-slider__arrow:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  }

  .hero-slider__arrow:active {
    transform: scale(0.96);
  }

  .hero-slider__arrow:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .hero-slider__arrow svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke-width: 2.5;
  }

  .hero-slider__counter {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-weight: 500;
  }

  /* ============================================
     RESPONSIVE DESIGN
     ============================================ */
  @media (max-width: 1023px) {
    /* Stack layout on tablet: left, then center, then right */
    .hero-slider__slide {
      flex-direction: column;
    }

    .hero-slider__left-image {
      flex: 0 0 50%;
      min-height: 380px;
    }

    .hero-slider__center {
      flex: 0 0 auto;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }

    .hero-slider__right-image {
      flex: 0 0 35%;
      min-height: 280px;
    }

    .hero-slider__nav-wrap {
      right: 32px;
    }

    .hero-slider__brand {
      top: 32px;
      left: 32px;
      font-size: 0.9375rem;
    }

    .hero-slider__left-content {
      bottom: 40px;
      left: 32px;
      right: 32px;
      max-width: 100%;
    }

    .hero-slider__panel-dark-inner,
    .hero-slider__panel-light-inner {
      padding: 40px 36px;
    }
  }

  @media (max-width: 767px) {
    /* Mobile optimizations */
    .hero-slider {
      min-height: 500px;
    }

    .hero-slider__left-image {
      min-height: 320px;
    }

    .hero-slider__right-image {
      min-height: 260px;
    }

    .hero-slider__center {
      width: 92%;
      max-width: 100%;
      margin: 0 auto;
    }

    .hero-slider__panel-light-inner {
      gap: 18px;
      padding: 32px 28px 36px;
    }

    .hero-slider__feature {
      font-size: 0.875rem;
      gap: 16px;
    }

    .hero-slider__arrow {
      width: 50px;
      height: 50px;
    }

    .hero-slider__arrow svg {
      width: 22px;
      height: 22px;
    }
  }
/* END_SECTION:interactive-slideshow */

/* START_SECTION:main-404 (INDEX:39) */
.template-404 {
    .template-404-iconbox {
      --svg-inside--size: 100px;
    }
    .template-404-contentbox {
      max-width: 680px;
      margin-inline: auto;
      & > *:not(:first-child) {
        margin-top: 40px;
      }
    }
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-article (INDEX:40) */
.main-article-section {
    .article-details-banner-wrapper {
      position: relative;
    }
    .article-details-header {
      margin-block: 30px;
      .article-details-header-inner {
        width: 100%;
      }
      .article-postby {
        display: block;
        margin-top: 30px;
      }
      &.title-overlay-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        margin: 0;
        /* padding: 20px; */
        display: flex;
        align-items: center;
        .article-details-header-inner {
          width: 60%;
          position: absolute;
          @media (max-width: 767px) {
            width: calc(100% - 30px);
            max-width: 90%;
            &.m-top-left,
            &.m-center-left,
            &.m-bottom-left {
              text-align: left;
            }
            &.m-top-center,
            &.m-center,
            &.m-bottom-center {
              text-align: center;
            }
            &.m-top-right,
            &.m-center-right,
            &.m-bottom-right {
              text-align: right;
            }
          }
          @media (min-width: 768px) {
            &.d-top-left,
            &.d-center-left,
            &.d-bottom-left {
              text-align: left;
            }
            &.d-top-center,
            &.d-center,
            &.d-bottom-center {
              text-align: center;
            }
            &.d-top-right,
            &.d-center-right,
            &.d-bottom-right {
              text-align: right;
            }
          }
        }
      }
    }
    .article-content {
      --padding-block: 20px;
      position: relative;
      padding-block: var(--padding-block);
      @media (min-width: 768px) {
        --padding-block: 60px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: flex-start;
      }
      & > * {
        min-width: 0;
      }
    }
    .article-form {
      /* overflow: hidden; */
      .article-form-inner {
        --padding-block: 35px;
        padding-block: var(--padding-block);
        background: var(--layout-background--alternate);
        @media (min-width: 768px) {
          --padding-block: 70px;
        }
        &.container-offset {
          left: 50%;
          width: calc(100vw - var(--scrollbar-width, 10px));
          position: relative;
          transform: translateX(-50%);
        }
      }
    }
    .article-content-inner,
    .article-form-box {
      margin-inline: auto;
      padding-inline: 10px;
    }
    .article-form-fieldswrap {
      padding-top: 30px;
    }
    /* .article-content-heading {
      margin-block: 60px 30px;
    } */
    .article-content-subheading {
      margin-block: 30px;
    }
    .article-content-imgbox img {
      width: 100%;
    }
    .featured-blogs-section {
      overflow: hidden;
    }
    .article-comments-box {
      margin-top: 60px;
      .article-comments {
        margin-top: 15px;
      }
    }
    featured-blogs {
      &.has-tilt-carousel {
        overflow: hidden;
        position: relative;
      }
      /* .big-bg-shape {
      --svg-inside--size: 100%;
      position: absolute;
      pointer-events: none;
      width: auto;
      left: 50%;
      top: 50%;
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      color: var(--text-color-light-30);
    } */
    }
    .featured-blogs:not(.swiper-initialized) .featured-blogs-wrapper {
      display: grid;
      align-items: start;
      gap: var(--gap);
      &:not(.mobile-swipe) {
        @media (max-width: 767px) {
          grid-template-columns: repeat(var(--layout-columns), 1fr);
        }
      }
      @media (min-width: 768px) {
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
    }
    .featured-blogs {
      &.swiper {
        &.tilt-carousel {
          .featured-blogs-wrapper {
            &.swiper-wrapper {
              overflow: visible;
            }
          }
          .blog-card {
            @media (max-width: 1024px) {
              --blog-card-padding: 12px;
            }
            &.swiper-slide {
              @media (min-width: 768px) {
                top: var(--tilt-card-offset);
                transition: all 0.4s ease;
              }
              &.swiper-slide-active {
                top: 0;
                .blog-content {
                  @media (min-width: 768px) {
                    clip-path: inset(-5% -5% -5% -5%);
                    transition: clip-path 0.6s ease 0.2s;
                  }
                  html.no-js & {
                    clip-path: unset;
                  }
                  & > * {
                    @media (min-width: 768px) {
                      opacity: 1;
                    }
                  }
                  .blog-button {
                    @media (min-width: 768px) {
                      margin-top: 20px;
                    }
                  }
                }
              }
              &:not(.swiper-slide-active) {
                .blog-media {
                  border-color: var(--border-color);
                  border-width: var(--border-width);
                  transition-delay: 0.5s;
                }
              }
              .blog-content {
                @media (min-width: 768px) {
                  clip-path: inset(0 0 100% 0);
                  transition: clip-path 0.6s ease 0s;
                  border-color: var(--border-color);
                }
                & > * {
                  @media (min-width: 768px) {
                    opacity: 0;
                    transition: opacity 0.3s ease-in 0.6s;
                  }
                  html.no-js & {
                    opacity: 1;
                  }
                }
              }
            }
          }
          .swiper-navigation {
            margin-block: 30px 40px;
          }
        }
        &:not(.tilt-carousel) {
          overflow: visible;
        }
      }
    }
    .article-navigation {
      padding-block: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      @media (min-width: 768px) {
        padding-block: 60px;
      }
      .article-nav {
        gap: 15px;
        display: flex;
        flex-direction: column;
        flex: 1;
        &.article-nav-prev {
          align-items: flex-start;
        }
        &.article-nav-next {
          align-items: flex-end;
          margin-inline-start: auto;
        }
        .text-underline {
          text-underline-offset: 0.4em;
        }
      }
    }
    .related-posts {
      padding-block: 25px;
      @media (min-width: 768px) {
        padding-block: 70px;
      }
    }
    .article-meta-bar {
      @media (max-width: 1200px) {
        width: 300px;
      }
      @media (max-width: 1024px) {
        width: 250px;
      }
      @media (max-width: 767px) {
        margin-bottom: 20px;
        width: 100%;
        padding-inline: 10px;
      }
      @media (min-width: 768px) {
        position: sticky;
      }
      @media (min-width: 1201px) {
        max-width: 300px;
      }
      .article-meta-block {
        gap: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .article-share-block {
        margin-top: 15px;
        @media (min-width: 1025px) {
          margin-top: 30px;
        }
        > span {
          display: block;
          margin-bottom: 10px;
        }
        .social-menu-link {
          max-width: max-content;
          display: inline-flex;
        }
      }
    }
    .article-comment-item {
      padding: 15px;
      background: var(--card-background);
      --border-color: var(--card-border);
      --text-color: var(--card-text);

      @media (min-width: 768px) {
        padding: 25px;
      }
      + .article-comment-item {
        margin-top: 15px;
      }
      .author-details {
        margin-top: 15px;
        padding-top: 15px;
        color: var(--text-color);
      }
    }

    @media (min-width: 1025px) {
      .article-content-inner.content-width-small {
        max-width: 700px;
      }
    }

    @media (max-width: 767px) {
      .featured-blogs-section {
        .layout-header-actions.has-swiper-nav {
          display: none;
        }
      }
    }
  }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:41) */
.main-blog-articles {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--columns-count), 1fr);
    /* .blog-media {
      .has-border & {
        border-color: var(--border-color);
      }
    } */
    /* .blog-content {
      .has-border & {
        border-color: var(--border-color);
      }
    } */
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-collection (INDEX:43) */
.main-collection-products {
    &:not(.swiper.swiper-initialized) {
      display: grid;
      gap: var(--row-gap, 10px) var(--column-gap, 10px);
    }
    @media (min-width: 1025px) {
      grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
    }
    @media (max-width: 767px) {
        grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
    }
    
    &:has(.product-card.swiper) > * {
      min-width: 0;
      min-height: 0;
    }
    & > * {
      min-width: 0;
      min-height: 0;
    }
  } 
  .collection-catergories {
    gap: 10px;
    display: flex;
    overflow-x: auto;
    align-items: center;
    margin-bottom: 30px;
    padding-inline: 10px;
    padding-block: 4px 10px;
    margin-inline: auto;
    max-width: max-content;
    @media (min-width: 768px) {
      margin-bottom: 50px;
    }
    .categories-filter {
      display: flex;
      font-size: 14px;
      padding: 0 22px;
      cursor: pointer;
      max-width: 250px;
      min-width: 150px;
      min-height: 36px;
      text-align: center;
      align-items: center;
      justify-content: center;
      border: var(--border-width) var(--border-style) currentColor;
      &.active {
        color: var(--layout-background);
        background: var(--text-color);
        border-color: var(--text-color);
      }
    }
    /*  */
  }
  .collection-card-grid {
    gap: 14px;
    margin-inline: auto;
    padding-bottom: 10px;
    padding-inline: 10px;
    max-width: max-content;
    @media (max-width: 767px) {
      &.mobile-swipe {
        grid-auto-columns: auto;
        grid-template-columns: auto;
      }
    }
    @media (max-width: 575px) {
      gap: 10px;
    }
    @media (min-width: 768px) {
      display: flex;
      overflow-y: hidden;
      overflow-x: auto;
      margin-block: 40px;
      padding-bottom: 20px;
    }
    .collection-sub-card {
      --mediabox-height: 150px;
      min-width: 200px;
      @media (min-width: 768px) {
        --mediabox-height: 200px;
        min-width: 270px;
        padding: 3px;
      }
      .card-name {
        margin-top: 10px;
      }
    }
  }
  .collection-sub-card {
    text-align: center;
  }

  /* Part type quick filters (e.g. Parts & Accessories) */
  /* ══════════════════════════════════════════════════════
     SMART FILTER v3 — Shopify-native, fully upgraded
     ══════════════════════════════════════════════════════ */

  /* ── Design tokens ── */
  .ptf-smart-wrap {
    --ptf-accent:       #c45c2b;
    --ptf-accent-2:     #e07a3a;
    --ptf-accent-soft:  rgba(196,92,43,0.07);
    --ptf-accent-mid:   rgba(196,92,43,0.16);
    --ptf-accent-glow:  rgba(196,92,43,0.32);
    --ptf-ink:          #12192b;
    --ptf-ink-muted:    rgba(18,25,43,0.48);
    --ptf-ink-faint:    rgba(18,25,43,0.28);
    --ptf-surface:      #f6f7fa;
    --ptf-card:         #ffffff;
    --ptf-border:       rgba(18,25,43,0.09);
    --ptf-border-hover: rgba(196,92,43,0.38);
    --ptf-radius-wrap:  22px;
    --ptf-radius-card:  18px;
    --ptf-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --ptf-dur:          200ms;
  }

  /* ── Outer section wrapper ── */
  .ptf-smart-wrap {
    margin-bottom: 44px;
    padding: 28px 26px 24px;
    background: var(--ptf-surface);
    border-radius: var(--ptf-radius-wrap);
    border: 1px solid rgba(18,25,43,0.07);
    box-shadow: 0 2px 0 rgba(255,255,255,0.7) inset,
                0 3px 16px rgba(18,25,43,0.04);
  }

  /* ── Clear filter button ── */
  .ptf-clear-btn {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ptf-accent);
    background: var(--ptf-accent-soft);
    border: 1.5px solid rgba(196,92,43,0.22);
    border-radius: 999px;
    padding: 7px 15px 7px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ptf-dur) var(--ptf-ease),
                transform var(--ptf-dur) var(--ptf-ease);
    white-space: nowrap;
    line-height: 1;
  }
  .ptf-clear-btn.visible { display: inline-flex; }
  .ptf-clear-btn:hover {
    background: var(--ptf-accent-mid);
    transform: scale(1.03);
    color: var(--ptf-accent);
  }
  .ptf-clear-btn svg { width: 11px; height: 11px; flex-shrink: 0; }

  /* ── Help me choose CTA ── */
  .ptf-find-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ptf-ink);
    background: #fff;
    border: 1.5px solid rgba(18,25,43,0.13);
    border-radius: 999px;
    padding: 9px 20px 9px 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
    transition: border-color var(--ptf-dur) var(--ptf-ease),
                color var(--ptf-dur) var(--ptf-ease),
                box-shadow var(--ptf-dur) var(--ptf-ease),
                transform var(--ptf-dur) var(--ptf-ease);
    white-space: nowrap;
    line-height: 1;
  }
  .ptf-find-btn:hover {
    border-color: var(--ptf-border-hover);
    color: var(--ptf-accent);
    box-shadow: 0 4px 18px var(--ptf-accent-glow);
    transform: translateY(-2px);
  }
  .ptf-find-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
  }

  /* ════════════════════════════
     ALL PARTS TOGGLE PILL
  ════════════════════════════ */
  .ptf-all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .ptf-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--ptf-border);
    background: #fff;
    color: var(--ptf-ink-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color var(--ptf-dur) var(--ptf-ease),
                color var(--ptf-dur) var(--ptf-ease),
                background var(--ptf-dur) var(--ptf-ease),
                box-shadow var(--ptf-dur) var(--ptf-ease),
                transform var(--ptf-dur) var(--ptf-ease);
    line-height: 1;
  }
  .ptf-all-btn:hover {
    border-color: rgba(18,25,43,0.22);
    color: var(--ptf-ink);
    box-shadow: 0 3px 10px rgba(18,25,43,0.09);
    transform: translateY(-1px);
  }
  .ptf-all-btn.active {
    background: var(--ptf-ink);
    border-color: var(--ptf-ink);
    color: #fff;
    box-shadow: 0 4px 16px rgba(18,25,43,0.24);
  }
  .ptf-all-count {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(18,25,43,0.08);
    color: var(--ptf-ink-muted);
    transition: background var(--ptf-dur), color var(--ptf-dur);
    line-height: 1.3;
  }
  .ptf-all-btn.active .ptf-all-count {
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
  }
  /* active-filter summary line */
  .ptf-active-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ptf-ink-muted);
    opacity: 0;
    transition: opacity var(--ptf-dur);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
  }
  .ptf-active-label.visible { opacity: 1; }
  .ptf-active-label em {
    font-style: normal;
    color: var(--ptf-accent);
    font-weight: 700;
  }

  /* ════════════════════════════
     SECTION DIVIDER
  ════════════════════════════ */
  .ptf-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(18,25,43,0.08) 20%, rgba(18,25,43,0.08) 80%, transparent);
    margin: 0 0 18px;
  }

  /* ════════════════════════════
     FILTER CARD GRID
  ════════════════════════════ */
  .ptf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 10px;
  }

  /* ════════════════════════════
     INDIVIDUAL FILTER CARD
  ════════════════════════════ */
  .ptf-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px 15px;
    background: var(--ptf-card);
    border: 1.5px solid var(--ptf-border);
    border-radius: var(--ptf-radius-card);
    text-decoration: none;
    color: var(--ptf-ink-muted);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    transition:
      transform     var(--ptf-dur) var(--ptf-ease),
      box-shadow    var(--ptf-dur) var(--ptf-ease),
      border-color  var(--ptf-dur) var(--ptf-ease),
      background    var(--ptf-dur) var(--ptf-ease);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 120px;
  }

  /* Sheen bar slides in on hover/active */
  .ptf-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ptf-accent), var(--ptf-accent-2));
    border-radius: var(--ptf-radius-card) var(--ptf-radius-card) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ptf-ease);
  }
  .ptf-card:hover::before,
  .ptf-card.active::before { transform: scaleX(1); }

  /* ── Hover ── */
  .ptf-card:hover {
    border-color: var(--ptf-border-hover);
    box-shadow: 0 8px 24px var(--ptf-accent-glow), 0 2px 6px rgba(0,0,0,0.06);
    transform: translateY(-3px) scale(1.02);
  }

  /* ── Selected / active ── */
  .ptf-card.active {
    background: linear-gradient(145deg, #c45c2b 0%, #e07a3a 100%);
    border-color: transparent;
    box-shadow: 0 10px 32px var(--ptf-accent-glow), 0 2px 8px rgba(196,92,43,0.2);
    transform: translateY(-3px);
    color: #fff;
  }

  /* SVG checkmark badge */
  .ptf-card.active::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
      center/12px 12px no-repeat;
  }

  /* ── Diagram area ── */
  .ptf-card__diagram {
    width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .ptf-card__diagram svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    stroke: rgba(18,25,43,0.32);
    transition: stroke 0.18s var(--ptf-ease);
  }
  .ptf-card:hover .ptf-card__diagram svg { stroke: var(--ptf-accent); }
  .ptf-card.active .ptf-card__diagram svg { stroke: rgba(255,255,255,0.9); }

  /* ── Label ── */
  .ptf-card__label {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 4px;
    color: var(--ptf-ink);
    letter-spacing: -0.01em;
    transition: color var(--ptf-dur);
  }
  .ptf-card:hover .ptf-card__label { color: var(--ptf-accent); }
  .ptf-card.active .ptf-card__label { color: #fff; }

  /* ── Hint ── */
  .ptf-card__hint {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ptf-ink-faint);
    line-height: 1.35;
    transition: color var(--ptf-dur);
  }
  .ptf-card:hover .ptf-card__hint { color: rgba(196,92,43,0.6); }
  .ptf-card.active .ptf-card__hint { color: rgba(255,255,255,0.7); }

  /* ── Count badge — deliberately de-emphasised ── */
  .ptf-card__count {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(18,25,43,0.05);
    color: var(--ptf-ink-faint);
    margin-top: 6px;
    transition: background var(--ptf-dur), color var(--ptf-dur);
  }
  .ptf-card:hover .ptf-card__count {
    background: var(--ptf-accent-soft);
    color: var(--ptf-accent);
  }
  .ptf-card.active .ptf-card__count {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
  }

  /* ════════════════════════════
     SELECTED-STATE CALLOUT BANNER
  ════════════════════════════ */
  .ptf-selected-callout {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(196,92,43,0.06) 0%, rgba(224,122,58,0.04) 100%);
    border: 1px solid rgba(196,92,43,0.16);
    border-radius: 14px;
  }
  .ptf-selected-callout.visible {
    display: flex;
    animation: ptf-slidein 0.28s var(--ptf-ease) both;
  }
  @keyframes ptf-slidein {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ptf-callout-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ptf-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px var(--ptf-accent-glow);
  }
  .ptf-callout-icon svg { width: 13px; height: 13px; stroke: #fff; }
  .ptf-callout-body {
    flex: 1;
    min-width: 0;
  }
  .ptf-callout-body strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ptf-ink);
    line-height: 1.2;
  }
  .ptf-callout-body span {
    font-size: 11.5px;
    color: var(--ptf-ink-muted);
    line-height: 1.4;
  }
  .ptf-callout-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--ptf-accent);
    animation: ptf-bob 1.4s ease-in-out infinite;
  }
  @keyframes ptf-bob {
    0%, 100% { transform: translateY(0); }
    55%       { transform: translateY(5px); }
  }

  /* ════════════════════════════
     HELP-ME-CHOOSE WIZARD MODAL
  ════════════════════════════ */
  .ptf-wizard-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,14,28,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
  }
  .ptf-wizard-overlay.open {
    display: flex;
    animation: ptf-fadein 0.22s ease both;
  }
  @keyframes ptf-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (min-width: 600px) {
    .ptf-wizard-overlay { align-items: center; padding: 24px; }
  }
  .ptf-wizard-box {
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 28px 22px 36px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 -6px 48px rgba(0,0,0,0.18);
    position: relative;
    animation: ptf-sheetup 0.32s var(--ptf-ease) both;
  }
  @keyframes ptf-sheetup {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  @media (min-width: 600px) {
    .ptf-wizard-box {
      border-radius: 28px;
      padding: 36px 32px;
      animation: ptf-popin 0.28s var(--ptf-ease) both;
    }
  }
  @keyframes ptf-popin {
    from { transform: scale(0.94) translateY(12px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
  }

  /* Drag handle on mobile */
  .ptf-wizard-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(18,25,43,0.12);
    margin: 0 auto 22px;
    display: block;
  }
  @media (min-width: 600px) { .ptf-wizard-handle { display: none; } }

  .ptf-wizard-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(18,25,43,0.07);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ptf-ink-muted);
    transition: background var(--ptf-dur), color var(--ptf-dur);
  }
  .ptf-wizard-close:hover {
    background: rgba(18,25,43,0.14);
    color: var(--ptf-ink);
  }
  .ptf-wizard-close svg { width: 14px; height: 14px; stroke: currentColor; }

  .ptf-wizard-step { display: none; }
  .ptf-wizard-step.active {
    display: block;
    animation: ptf-fadein 0.18s var(--ptf-ease) both;
  }

  /* Progress bars */
  .ptf-wizard-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
  }
  .ptf-wizard-progress span {
    height: 3px;
    flex: 1;
    border-radius: 999px;
    background: rgba(18,25,43,0.09);
    position: relative;
    overflow: hidden;
  }
  .ptf-wizard-progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ptf-accent);
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 999px;
    transition: transform 0.4s var(--ptf-ease);
  }
  .ptf-wizard-progress span.done::after { transform: scaleX(1); }

  .ptf-wizard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ptf-accent);
    margin: 0 0 8px;
  }
  .ptf-wizard-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ptf-accent);
    flex-shrink: 0;
  }
  .ptf-wizard-q {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--ptf-ink);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .ptf-wizard-sub {
    font-size: 13.5px;
    color: var(--ptf-ink-muted);
    margin: 0 0 22px;
    line-height: 1.55;
  }
  .ptf-wizard-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ptf-wizard-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 20px 12px;
    background: var(--ptf-surface);
    border: 1.5px solid var(--ptf-border);
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    color: var(--ptf-ink-muted);
    text-align: center;
    transition: border-color var(--ptf-dur) var(--ptf-ease),
                background var(--ptf-dur) var(--ptf-ease),
                color var(--ptf-dur) var(--ptf-ease),
                transform var(--ptf-dur) var(--ptf-ease),
                box-shadow var(--ptf-dur) var(--ptf-ease);
  }
  .ptf-wizard-opt:hover {
    border-color: var(--ptf-accent);
    background: rgba(196,92,43,0.04);
    color: var(--ptf-accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--ptf-accent-glow);
  }
  .ptf-wizard-opt svg {
    width: 40px;
    height: 34px;
    stroke: rgba(18,25,43,0.32);
    transition: stroke var(--ptf-dur);
    overflow: visible;
  }
  .ptf-wizard-opt:hover svg { stroke: var(--ptf-accent); }
  .ptf-wizard-hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--ptf-ink-faint);
    margin-top: -3px;
    transition: color var(--ptf-dur);
    line-height: 1.3;
  }
  .ptf-wizard-opt:hover .ptf-wizard-hint { color: rgba(196,92,43,0.58); }

  .ptf-wizard-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ptf-ink-faint);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 22px;
    transition: color var(--ptf-dur);
  }
  .ptf-wizard-back:hover { color: var(--ptf-ink-muted); }
  .ptf-wizard-back svg {
    width: 13px; height: 13px;
    stroke: currentColor;
    flex-shrink: 0;
  }

  /* ════════════════════════════
     RESPONSIVE BREAKPOINTS
  ════════════════════════════ */
  @media (min-width: 1024px) {
    .ptf-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .ptf-card { padding: 22px 12px 18px; min-height: 128px; }
  }
  @media (max-width: 767px) {
    .ptf-smart-wrap { padding: 20px 16px 18px; border-radius: 18px; margin-bottom: 28px; }
    .ptf-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
    .ptf-card { padding: 16px 8px 13px; min-height: 108px; border-radius: 14px; }
    .ptf-card__diagram { width: 48px; height: 40px; margin-bottom: 10px; }
    .ptf-card__label { font-size: 12px; }
    .ptf-wizard-options { grid-template-columns: 1fr 1fr; }
    .ptf-wizard-q { font-size: 1.15rem; }
  }
  @media (max-width: 380px) {
    .ptf-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  }

  /* Inline filter options (visible list + working links) */
  .facets-inline-options { padding: 16px 0; }
  .facets-inline-filter { margin-bottom: 20px; }
  .facets-inline-filter:last-child { margin-bottom: 0; }
  .facets-inline-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-color, #000); text-transform: uppercase; letter-spacing: 0.03em; }
  .facets-inline-values { list-style: none; margin: 0; padding: 0; }
  .facets-inline-values li { margin-bottom: 6px; }
  .facets-inline-values a.facets-inline-value,
  .facets-inline-values span.facets-inline-value { font-size: 14px; color: inherit; text-decoration: none; display: inline-block; padding: 4px 0; }
  .facets-inline-values a.facets-inline-value:hover { text-decoration: underline; }
  .facets-inline-values .facets-inline-value.active { font-weight: 600; }
  .facets-inline-remove { margin-left: 6px; font-size: 12px; opacity: 0.7; }
  .facets-inline-price-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
  .facets-inline-price-form input { width: 80px; padding: 6px 8px; font-size: 14px; border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; }
  .facets-inline-price-form button { padding: 6px 12px; font-size: 13px; cursor: pointer; background: var(--button-background, #000); color: var(--button-color, #fff); border: none; border-radius: 4px; }

  /* Filters */
  .main-collection-wrapper {
    &.no-filters {
      padding-top: 20px;
    }
    &:has(.has-filters-drawer) {
      padding-top: 0;
    }
  }
  .main-collection {
    .filters-toggle-button {
      gap: 10px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      justify-content: center;
      @media (max-width: 767px) {
        &.filter-openbtn-mobile {
          margin: 18px auto;
        }
        &.filters-mobile-sticky {
        padding: 15px 20px;
        background: var(--button-background);
        color: var(--button-color);
        border-radius: 50px;
        min-width: 140px;
        position: fixed;
        bottom: 17px;
        z-index: 1;
        left: 0;
        right: 0;
        max-width: max-content;
        box-shadow: 0 0 14px #00000073;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: transform .4s ease;
        pointer-events: none;
        }
      }
      @media (min-width: 768px) {
        &.filters-toggle-mobile {
          display: none;
        }
      }
    }
    &.filters-open {
      .filters-block {
        @media (max-width: 767px) {
          visibility: visible;
          transform: translateX(0);
          transition: transform 0.3s ease 0.1s, visibility 0s linear 0s;
        }
      }
    }
    &.filters-closed {
      .filters-block {
        @media (max-width: 767px) {
          transition: transform 0.3s ease 0s, visibility 0s linear 0.31s;
        }
      }
    }
    .filters-block {
      @media (max-width: 767px) {
        inset: 0;
        z-index: 9;
        /* position: fixed; */
        visibility: hidden;
        transform: translateX(-100%);
        background: var(--layout-background);
      }
      .filters-block-head {
        --svg-inside--size: 24px;
        display: flex;
        padding: 20px;
        justify-content: space-between;
        .filters-toggle-button {
          .svg-inside {
            padding: 6px;
          }
        }
        @media (min-width: 768px) {
          display: none;
        }
      }
      details {
        @media (max-width: 767px) {
          padding-inline: 20px;
          &.has-border {
            border-bottom: 0;
          }
          &:not(:first-child) {
            border-bottom: 0;
            border-top: var(--border-width) var(--border-style) var(--border-color);
          }
        }
      }
    }
    &.has-filters-vertical {
      @media (min-width: 768px) {
        --filters-vertical-gap: 15px;
        --filters-vertical-width: 250px;
        display: grid;
        transition: grid-template-columns 0.3s ease 0s;
        grid-template-columns:
          calc(var(--filters-vertical-width) + var(--filters-vertical-gap))
          1fr;
      }
      @media (min-width: 1025px) {
        --filters-vertical-gap: 30px;
        --filters-vertical-width: 250px;
      }
      @media (min-width: 1200px) {
        --filters-vertical-width: 300px;
      }
      @media (min-width: 1440px) {
        --filters-vertical-gap: 60px;
      }
      .filter-list {
        &.filter-layout-swatch {
          @media (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
        }
      }
      &:not(.filters-open) {
        @media (min-width: 768px) {
          grid-template-columns: 0 1fr;
        }
        .sorting-block {
          .filters-toggle-button {
            @media (min-width: 768px) {
              opacity: 1;
              width: 126px;
              margin-right: 20px;
              visibility: visible;
              transition: opacity 0.6s ease 0.2s, width 0.3s ease 0.2s, visibility 0s linear 0s;
            }
          }
        }
        @media (min-width: 768px) {
          .filters-block {
            opacity: 0;
            visibility: hidden;
            border-color: transparent;
            transform: translateX(-50px);
            transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, border-color 0s ease 0s, visibility 0s linear 0.3s;
          }
        }
        .main-collection-products {
          @media (min-width: 768px) {
            padding-left: 0;
            grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
          }
        }
      }
      &.filters-open {
        .sorting-block {
          /* padding-left: 10px; */
          @media (min-width: 768px) {
            padding-left: 15px;
          }
          @media (min-width: 1025px) {
            padding-left: 30px;
          }
          @media (min-width: 768px) {
            .filters-toggle-button {
              /* margin-right: 20px; */
              width: 0;
              opacity: 0;
            }
          }
        }
        .active-filters {
          @media (min-width: 1025px) {
            padding-left: 30px;
          }
          .active-filters-list {
            @media (max-width: 1024px) {
              padding-inline: 15px;
            }
          }
        }
      }

      .sorting-block {
        @media (min-width: 768px) {
          transition: padding 0.3s ease;
          .filters-toggle-button {
            white-space: nowrap;
            visibility: hidden;
            transform-origin: left center;
            transition: opacity 0.3s ease 0s, width 0.6s ease 0s, visibility 0s linear 0.61s;
          }
        }
      }

      .active-filters {
        @media (max-width: 1024px) {
          transition: padding 0.3s ease;
          flex-direction: column;
        }
        @media (max-width: 767px) {
          padding-inline: 5px;
          border-bottom: var(--border-width) var(--border-style) var(--border-color);
        }
      }
      .collection-filter-form {
        @media (min-width: 768px) {
          padding-right: var(--filters-vertical-gap);
          transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
        }
      }
      .main-collection-products {
        @media (min-width: 768px) {
          padding-left: 15px;
          transition: padding 0.3s ease;
        }
        @media (min-width: 1025px) {
          padding-left: 30px;
        }
      }
      .filters-block {
        @media (min-width: 768px) {
          overflow: clip;
          width: calc(var(--filters-vertical-width) + var(--filters-vertical-gap));
          transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s, border-color 0.3s ease 0.4s;
          border-right: var(--border-width) var(--border-style) var(--border-color);
        }
        .filters-hide-block {
          @media (max-width: 767px) {
            display: none;
          }
          @media (min-width: 768px) {
            display: flex;
            padding-block: 15px;
            align-items: center;
            justify-content: space-between;
            border-bottom: var(--border-width) var(--border-style) var(--border-color);
          }
          @media (min-width: 1025px) {
            padding-block: 25px;
          }
        }
      }
      @media (max-width: 1024px) {
        summary {
          padding-block: 15px;
        }
      }
    }

    /* HAS-FILTERS-HORIZONTAL START */
    &.has-filters-horizontal {
      @media (min-width: 768px) {
        margin-top: 20px;
        .facet-filters-field {
          .input-group {
            border: 1px solid var(--border-color);
            .has-rounded-corners & {
              border-radius: var(--card-roundness);
            }
            .input-field {
              height: 34px;
            }
          }
        }
        .filters-block {
          &.sticky-block {
            background: var(--layout-background);
          }
        }
        .filtes-wrapper {
          gap: 10px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          details {
            position: relative;
            @media (min-width: 768px) {
              width: auto;
              display: flex;
              overflow: visible;
              align-items: center;
            }
          }
          summary {
            height: 36px;
            padding: 0 16px;
            border: 1px solid var(--border-color);
            &:focus-visible {
              outline-offset: 2px;
              /*  */
            }
          }
        }
        .collection-filters,
        .collection-sorting {
          gap: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }
        .collection-sorting {
          margin-left: auto;
        }
        .collapsible-content {
          left: 0;
          z-index: 5;
          width: 400px;
          position: absolute;
          top: calc(100% + 10px);
          .open-filter-left & {
            left: auto;
            right: 0;
          }
        }
        .filter-wrap {
          width: 100%;
          display: block;
          padding: 20px 10px;
          backdrop-filter: blur(10px);
          background: color-mix(in srgb, var(--layout-background) 85%, transparent);
          box-shadow: 5px -5px 30px color-mix(in srgb, var(--text-color) 10%, transparent);
          .filter-title {
            margin-bottom: 10px;
            padding-inline: 10px;
          }
        }
        .filter-list {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .active-filters {
          gap: 3px;
          margin-top: 15px;
        }
      }
      summary {
        @media (max-width: 767px) {
          width: 100%;
          padding-block: 15px;
        }
      }
      .filter-title {
        @media (max-width: 767px) {
          display: none;
        }
      }
      .filter-wrap {
        @media (max-width: 767px) {
          padding-bottom: 20px;
        }
      }
      @media (min-width: 1025px) {
        .collapsible-content {
          width: 450px;
        }
      }
    }

    /* HAS-FILTERS-HORIZONTAL end */

    .filter-list {
      @media (min-width: 768px) {
        overflow-y: auto;
        max-height: 300px;
      }
    }
    .collections-topbar {
      display: block;
      @media (max-width: 767px) {
        display: flex;
        flex-direction: column;
      }
      @media (min-width: 768px) {
        margin-bottom: 15px;
        .has-filters-drawer & {
          margin-bottom: 30px;
        }
      }
      @media (min-width: 1025px) {
        margin-bottom: 30px;
        .has-filters-drawer & {
          margin-bottom: 35px;
        }
      }
      &.sticky-block {
        @media (min-width: 768px) {
          background: var(--layout-background);
          .filter-bar-without-sorting {
            .filters-open & {
              display: none;
            }
          }
        }
      }
      .sorting-block {
        @media (min-width: 768px) {
          display: flex;
          display: none;
          align-items: center;
          /* padding-block: 25px; */
          padding-block: 15px;
          justify-content: space-between;
          border-bottom: var(--border-width) var(--border-style) var(--border-color);
        }
        @media (min-width: 1025px) {
          padding-block: 25px;
        }
        .collections-count {
          margin-right: auto;
        }
      }
      .active-filters {
        justify-content: space-between;
        /* border-bottom: var(--border-width) var(--border-style) var(--border-color); */
        .active-filters-list {
          width: 100%;
          @media (max-width: 1024px) {
            padding-block: 15px;
            /* border-bottom: var(--border-width) var(--border-style) var(--border-color); */
          }
          @media (min-width: 1025px) {
            padding-block: 25px;
            /*padding-right: 30px;
             border-right: var(--border-width) var(--border-style) var(--border-color); */
          }
        }
        .active-filters-clear {
          white-space: nowrap;
          @media (max-width: 1024px) {
            margin-left: auto;
            padding-block: 15px;
          }
          @media (min-width: 1025px) {
            margin-left: 60px;

            /* LINE BREAK COMMENT */
          }
        }
      }
    }
  }

  .collection-sorting.sorting-mobile {
    @media (max-width: 767px) {
      padding-inline: 20px;
      padding-block: 15px;
      /* border-top: var(--border-width) var(--border-style) var(--border-color); */
      .input-group {
        &.input-group-inline {
          max-width: 100%;
          .input-field {
            width: 100%;
            max-width: 100%;
            padding-block: 10px;
            padding-inline: 10px;
            border: var(--border-width) solid var(--input-border);
          }
        }
      }
    }
    @media (min-width: 768px) {
      display: none;
    }
  }
  .no-products {
    display: flex;
    min-height: 50dvh;
    padding-block: 30px;
    align-items: center;
    justify-content: center;
    .no-products .no-products-content {
      --svg-inside--size: 80px;
      gap: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* + icon size */
  .collection-filters {
    .collapsible-icon {
      width: 14px;
      height: 14px;
      &:before,
      &:after {
        width: 11px;
        height: 1px; 
      }
    }
   .collapsible-heading-label.heading-font+ .collapsible-icon {
      Color: var(--heading-color);
      &:before,
      &:after {
        width: 12px;
        height: 2px; 
      }
    }
  }

  @media (max-width: 767px) {
    .offcanvas-filter-drawer .offcanvas-contentwrap {
      max-width: 100%;
    }
    .offcanvas-filter-drawer .offcanvas-body {
      overflow: hidden;
    }
    .offcanvas-filter-drawer facet-filters-form,
    .offcanvas-filter-drawer facet-filters-form form {
      display: block;
      height: 100%;
    }
    .sticky-filter-show .filters-toggle-button.filters-mobile-sticky {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        pointer-events: all;
    }
  }
  .layout-header-wrapper:not(.no-margin,.small-margin).main-collection-header {
    margin-top:  30px;
    margin-bottom: 0px;
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-list-collections (INDEX:44) */
.collections-main-section {
    .collections {
      display: grid;
      &.border-visibility-always {
        border: var(--border-style) var(--border-color);
        border-width: var(--border-width) 0;
      }
      @media (max-width: 767px) {
        &:not(.mobile-swipe) {
          grid-template-columns: repeat(var(--layout-columns), 1fr);
        }
        &.border-visibility-mobile-only {
          border: var(--border-style) var(--border-color);
          border-width: var(--border-width) 0;
        }
      }
      @media (min-width: 768px) {
        grid-template-columns: repeat(var(--layout-columns), 1fr);
        &.border-visibility-desktop-only {
          border: var(--border-style) var(--border-color);
          border-width: var(--border-width) 0;
        }
      }
    }

    .collection {
      display: block;
      position: relative;
      transition: background-color 0.3s ease;
      .border-visibility-always & {
        border: var(--border-width) var(--border-style) var(--border-color);
        .mobile-swipe & {
          @media (max-width: 767px) {
            border-bottom: 0;
            &:last-child {
              border-right: 0;
            }
          }
        }
      }
      .border-visibility-mobile-only & {
        @media (max-width: 767px) {
          border: var(--border-width) var(--border-style) var(--border-color);
        }
      }
      .border-visibility-desktop-only & {
        @media (min-width: 768px) {
          border: var(--border-width) var(--border-style) var(--border-color);
        }
      }
      &:hover {
        @media (min-width: 1025px) {
          :is(.media-hovered, .title-hovered) & {
            background-color: var(--layout-background--alternate);
          }
        }
      }
      .border-collapse & {
        padding: var(--row-gap) var(--column-gap);
        border-width: 0 var(--border-width) var(--border-width) 0;
      }
      .collection-inner {
        position: relative;
      }
    }

    .collection-media {
      position: relative;
      .mediabox {
        @media (min-width: 1025px) {
          .media-hovered & {
            transition: transform 0.3s ease;
            .collection:hover & {
              transform: scale(0.6);
            }
          }
        }
      }
      .collection-hovered-text {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        overflow-y: auto;
        max-height: 100%;
        transform: translate(-50%);
        @media (min-width: 1025px) {
          /* opacity: 0; */
          clip-path: inset(0 0 100% 0);
          transform: translate(-50%, calc(-50% - 50px));
          /* transition: opacity 0.3s ease, transform 0.3s ease; */
          transition: clip-path 0.3s ease, transform 0.3s ease;
          .collection:hover & {
            /* opacity: 1; */
            clip-path: inset(0 0 0 0);
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .collection-text {
      padding: 8px 4px 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      &.above-image {
        bottom: 0;
        padding: 15px 10px;
        inset-inline: 0;
        position: absolute;
        overflow-y: auto;
        max-height: 100%;
        @media (min-width: 768px) {
          padding: 25px;
        }
        @media (min-width: 1025px) {
          .collection:hover & {
            .title-hovered & {
              transform: translateY(50px);
            }
          }
        }
      }
      @media (min-width: 1025px) {
        .collection:hover & {
          .title-hovered & {
            opacity: 0;
            pointer-events: none;
            .media-hovered & {
              transform: translateY(-50px);
            }
          }
        }
      }
    }
  }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-product (INDEX:47) */
.main-product {
    display: grid;
    overflow-x: clip;
    align-items: flex-start;
    grid-template-columns: 1fr;
    @media (min-width: 1025px) {
      grid-template-columns: 1fr 450px;
    }
    @media (min-width: 1200px) {
      grid-template-columns: 1fr 500px;
    }
    @media (min-width: 1441px) {
      /* grid-template-columns: 1fr 725px; */
      grid-template-columns: 1fr 625px;
      /*  */
    }
    .productmedia-gallery-wrapper {
      .productmedia-gallery.swiper:not(.swiper.swiper-initialized) & {
          --column-gap: 0;
          gap: 2px;
      }
      .layout-stacked &,
      .layout-stacked-vertical & {
        --gap: 1px;
        display: grid;
        gap: var(--gap);
      }
      &.has-single-item {
        .layout-stacked & {
          @media (min-width: 768px) {
            grid-template-columns: 1fr;
          }
        }
      }
      .layout-stacked & {
        @media (min-width: 768px) {
          grid-template-columns: 1fr 1fr;
        }
        &.mobile-swipe {
          @media (max-width: 767px) {
            --gap: 2px;
            grid-auto-columns: minmax(62.5%, 1fr);
            grid-template-columns: repeat(auto-fill, minmax(62.5%, 1fr));
          }
        }
      }
      .layout-stacked-vertical & {
        @media (min-width: 768px) {
          grid-template-columns: 1fr;
        }
        &.mobile-swipe {
          @media (max-width: 767px) {
            --gap: 2px;
            grid-auto-columns: minmax(62.5%, 1fr);
            grid-template-columns: repeat(auto-fill, minmax(62.5%, 1fr));
          }
        }
      }
      &.has-single-item {
        background: var(--media-background);
        .productmedia-gallery-item {
          max-width: 50%;
          margin: 0 auto;
        }
      }
    }
    .swiper-navigation {
      @media (max-width: 767px) {
        justify-content: flex-end;
      }
    }
  }

  .main-product {
    & > * {
      min-width: 0;
      min-height: 0;
    }
    .collapsible-content-body { 
      padding-inline: 0;
    }
  }

  .main-product-gallery-block {
    @media (min-width: 1025px) {
      position: sticky;
      transition: top 0.6s ease;
      top: var(--header-height, 0px);
      padding-right: var(--border-width);
      .main-product.has-vertical-border & {
        &::after {
          content: '';
          display: block;
          position: absolute;
          width: var(--border-width);
          background-color: var(--border-color);
          right: calc(var(--border-width) * -1);
          top: calc(var(--layout-spacing--top, 0) * -1);
          bottom: calc(var(--layout-spacing--bottom, 0) * -1);
        }
      }
    }
  }
  .header-ishidden {
    .main-product-gallery-block {
      @media (min-width: 1025px) {
        top: 0;
      }
    }
  }
  .offer-validity-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--offer-validity-background);
    @media (max-width: 767px) {
      justify-content: space-between;
    }
    &:not(.no-border) {
      --border-color: var(--offer-validity-border);
      border-left: 0;
      border: var(--border-width) var(--border-style) var(--border-color);
    }
    &.no-border {
      padding: 6px;
      .offer-counter {
        gap: 5px;
        span {
          background: color-mix(in srgb, var(--offer-validity-background) 10%, var(--offer-validity-color) 12%);
        }
      }
      &.width-infoblock {
        .offer-counter {
          gap: 5px;
          span {
            .has-roundness & {
              border-radius: calc(var(--card-roundness) - 6px);
            }
          }
        }
      }
    }
    .offer-expired-text {
      padding: 4px 6px;
      margin-inline: auto;
      color: var(--offer-validity-color);
    }

    &.width-mediablock {
      bottom: 0;
      z-index: 1;
      position: sticky;
      &:not(.no-border) {
        border: var(--border-width) var(--border-style) var(--border-color);
        border-left: 0;
        border-right: 0;
      }
      .counter-label {
        @media (min-width: 768px) {
          .offer-validity-box:not(.no-border) & {
            border-right: var(--border-width) var(--border-style) var(--border-color);
          }
        }
      }
      .offer-counter {
        span {
          @media (max-width: 767px) {
            .offer-validity-box:not(.no-border) & {
              border-left: var(--border-width) var(--border-style) var(--border-color);
            }
          }
          @media (min-width: 768px) {
            .offer-validity-box:not(.no-border) & {
              border-right: var(--border-width) var(--border-style) var(--border-color);
            }
          }
        }
      }
    }
    &.width-infoblock {
      justify-content: space-between;
      &:not(.no-border) {
        border: var(--border-width) var(--border-style) var(--border-color);
      }
      .offer-counter {
        span {
          .offer-validity-box:not(.no-border) & {
            border-left: var(--border-width) var(--border-style) var(--border-color);
          }
        }
      }
    }
    .counter-label,
    .offer-counter span {
      padding: 6px 10px;
      display: inline-flex;
      color: var(--offer-validity-color);
      @media (min-width: 768px) {
        padding: 10px 16px;
      }
      @media (min-width: 1441px) {
        padding: 14px 20px;
      }
    }
    .offer-counter {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .main-product-info-block {
    --infobox-spacing-inline: 10px;
    z-index: 1;
    height: 100%;
    position: relative;
    /* backdrop-filter: blur(5px); */
    @media (min-width: 768px) {
      --infobox-spacing-inline: 20px;
    }
    @media (min-width: 1200px) {
      --infobox-spacing-inline: 40px;
      /* LINE BREAK COMMENT */
    }
    @media (min-width: 1441px) {
      --infobox-spacing-inline: 50px;
      /* LINE BREAK COMMENT */
    }
    .main-product-info-block-inner {
      padding-block-end: 25px;
      .sticky-header-none &,
      .header-ishidden & {
        top: 0;
      }
      @media (min-width: 768px) {
        padding-block-end: 30px;
      }
      @media (min-width: 1025px) {
        position: sticky;
        transition: top 0.6s ease;
        top: var(--header-height, 0px);
        padding-inline: var(--infobox-spacing-inline);
      }
      @media (min-width: 1200px) {
        padding-block-end: 50px;
        /* LINE BREAK COMMENT */
      }
    }
  }

  .product-content {
    padding: 0 10px;
    @media (min-width: 768px) {
      padding: 0 20px;
      .product-custom-icons {
        margin-inline: -20px;
      }
    }
    @media (min-width: 1025px) {
      padding-bottom: var(--layout-spacing--bottom);
    }
    @media (min-width: 1200px) {
      padding: 0 40px var(--layout-spacing--bottom);
      .product-custom-icons {
        margin-inline: -40px;
      }
    }
    @media (min-width: 1441px) {
      padding: 0 60px var(--layout-spacing--bottom);
      .product-custom-icons {
        margin-inline: -60px;
      }
      /* LINE BREAK COMMENT */
    }
  }

  .product-suggestions-wrapper {
    .product-suggestion-header {
      margin-bottom: 16px;

      &.has-swiper-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .swiper-navigation {
          --svg-inside--size: 16px;
          gap: 5px;
        }
      }
    }

    .product-suggestions {
      .suggested-product {
        transition: background-color 0.3s ease;
        body.rounded-corners & {
          padding: 10px;
          border-radius: 8px;
        }
        &:hover {
          background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
        }

        .has-border & {
          border: var(--border-width) var(--border-style) var(--border-color);
        }

        &.has-roundness {
          overflow: hidden;
        }

        .has-spacing & {
          padding: 10px;
        }

        .suggestion-stacked & {
          min-height: 100px;

          @media (min-width: 768px) {
            min-height: 150px;
          }
        }

        .suggestion-inline & {
          display: flex;
          align-items: center;
        } 

        .suggested-product-media {
          width: 100%;
          body.rounded-corners & {
            border-radius: 6px;
          }

          .has-spacing & {
            .has-roundness & {
              overflow: hidden;
              border-radius: clamp(5px, calc(var(--card-roundness) - 10px), 20px);
              .mediabox {
                border-radius: clamp(5px, calc(var(--card-roundness) - 10px), 20px);
              }
            }
          }

          .suggestion-stacked & {
            height: 100px;
            @media (min-width: 1025px) {
              height: 150px;
            }
          }

          .suggestion-inline & {
            max-width: 90px;
            border-right: var(--border-width) var(--border-style) var(--border-color);
            body.rounded-corners & {
              border: 0;
            }
            @media (min-width: 1441px) {
              max-width: 116px;
            }
          }
        }

        .suggested-product-infoblock {
          .suggestion-stacked & {
            padding: 10px;
            text-align: center;
            @media (max-width: 1024px) {
              padding: 5px 10px;
            }

            @media (max-width: 767px) {
              line-height: normal;
            }
            .product-price,
            .inventory-infobox {
              justify-content: center;
            }
          }

          .suggestion-inline & {
            flex: 1;
            gap: 10px;
            display: flex;
            align-items: center;
            padding: 5px 10px;
          }
          .suggestion-stacked & {
            border-top: var(--border-width) var(--border-style) var(--border-color);
            body.rounded-corners & {
              border-top: 0;
            }
          }
          .suggestion-inline & {
            body.rounded-corners & {
              padding: 0;
              padding-left: 15px;
            }
          }

          .product-title {
            .suggestion-inline & {
                line-height: normal;
                padding: 0;
            }
          }

          .product-price {
            .suggestion-inline & {
              justify-content: flex-start;
            }
          }

          .product-quickview {
            margin: 0;
            position: relative;
            transform: none;
            inset: auto;

            .suggestion-stacked & {
              @media (max-width: 1024px) {
                margin-left: auto;
              }

              @media (min-width: 1025px) {
                margin-top: 10px;
              }
            }

            .suggestion-inline & {
              margin-left: auto;
            }
          }
        }
      }
    }
  }

  .product-column-space {
    width: 100%;
    display: block;
    user-select: none;
    height: var(--column-space-size);
    @media (max-width: 767px) {
      height: calc(var(--column-space-size) / 2);
    }
  }
  .main-product-thumbs {
    position: absolute;
    z-index: 1;
    inset-inline-end: 0;
    inset-block-end: 10px;
    inset-inline-start: 10px;
    padding: 3px;
    background: var(--border-color);
    @media (max-width: 767px) {
      max-width: 250px;
      width: max-content;
    }
    @media (min-width: 768px) {
      max-width: 320px;
      inset-inline-start: 20px;
      width: calc((58px * var(--thumbs-count)) + (3px * var(--thumbs-count)));
    }
    @media (min-width: 1200px) {
      padding: 5px;
      width: calc((58px * var(--thumbs-count)) + (5px * var(--thumbs-count)));
      inset-block-end: 30px;
      inset-inline-start: 40px;
    }
    @media (min-width: 1441px) {
      inset-inline-start: 60px;
      /* LIKE BREAK  */
    }
    .productmedia-thumbs {
      &:not(.swiper-initialized) {
        .productmedia-gallery-thumbwrapper {
          @media (min-width: 768px) {
            gap: 5px;
            display: grid;
            overflow-x: auto;
            scrollbar-width: none;
            grid-auto-flow: column;
            scroll-snap-type: x mandatory;
            grid-auto-columns: minmax(20%, 1fr);
            grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
          }
        }
      }
      .productmedia-thumb-item {
        width: 58px;
        min-width: 58px;
        .productmedia-thumb {
          aspect-ratio: 1 / 1.229;
          min-width: 58px;
          height: auto;
          /* padding: 2px;
          padding-right: 0;
          background: var(--border-color); */
          /* @media (min-width: 1200px) {
            padding: 6px;
            padding-right: 0;
          } */
        }
        /* &:not(:first-child):not(:last-child) {
          .productmedia-thumb {
            padding-inline: 3px;
          }
        } */
      }
    }
  }
  @media (max-width: 1024px) {
    .main-product-info-block-inner:not(:has(> .product-column-space:first-child)) {
      padding-top: 20px;
    }
    .container-fullwidth.no-padding .main-product-info-block-inner {
      padding-inline: var(--infobox-spacing-inline);
    }
  }

  /* ════════════════════════════════════════════════════════════
     EZ SNAP — PREMIUM COLOR SWATCH REDESIGN
     Targets native Shopify theme variant/option elements
     ════════════════════════════════════════════════════════════ */

  /* ── Design tokens (scoped to product info block) ── */
  .main-product-info-block {
    --sw-accent:       #c45c2b;
    --sw-accent-2:     #e07a3a;
    --sw-accent-glow:  rgba(196,92,43,0.28);
    --sw-accent-ring:  rgba(196,92,43,0.18);
    --sw-ink:          #12192b;
    --sw-ink-muted:    rgba(18,25,43,0.52);
    --sw-ink-faint:    rgba(18,25,43,0.30);
    --sw-surface:      #f6f7fa;
    --sw-card:         #ffffff;
    --sw-border:       rgba(18,25,43,0.10);
    --sw-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --sw-dur:          180ms;
  }

  /* ═══════════════════════════
     OPTION LABEL ROW
  ═══════════════════════════ */

  /* "Color" label + selected value display */
  .product-content .variant-picker__option-info,
  .product-content .product-form__input label,
  .product-content .product-option label,
  .product-content .option__label,
  .product-content [class*="variant"] label,
  .product-content [class*="swatch"] label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sw-ink-faint);
    margin-bottom: 14px;
  }

  /* Selected value name displayed inline */
  .product-content .variant-picker__option-info .selected,
  .product-content [class*="option"] label .selected,
  .product-content [class*="swatch"] label .selected,
  .product-content label .swatch__value,
  .product-content label .option-value {
    font-weight: 700;
    color: var(--sw-ink);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
  }

  /* ═══════════════════════════
     SWATCH GRID CONTAINER
  ═══════════════════════════ */
  .product-content .variant-picker__option-values,
  .product-content .product-form__input,
  .product-content .swatch-list,
  .product-content .color-swatch-list,
  .product-content [class*="variant-picker"] ul,
  .product-content [class*="swatch-wrapper"],
  .product-content [class*="option-values"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
  }

  /* ═══════════════════════════
     INDIVIDUAL SWATCH ITEM
  ═══════════════════════════ */

  /* Hide native radio/checkbox inputs */
  .product-content input[type="radio"][name*="color"],
  .product-content input[type="radio"][name*="Color"],
  .product-content input[type="radio"].swatch-input,
  .product-content input[type="radio"][class*="variant"],
  .product-content .variant-picker__option-values input[type="radio"],
  .product-content [class*="swatch"] input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* Swatch label / button — shared base */
  .product-content .variant-picker__option-values label,
  .product-content .color-swatch,
  .product-content .swatch-label,
  .product-content [class*="swatch-item"] label,
  .product-content [class*="color-option"] label,
  .product-content [class*="variant-picker"] label:has(img),
  .product-content [class*="variant-picker"] label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    position: relative;
  }

  /* ═══════════════════════════
     THE SWATCH CIRCLE / TILE
  ═══════════════════════════ */

  /* Any image-based swatch (product image per variant) */
  .product-content .variant-picker__option-values label img,
  .product-content [class*="swatch"] img,
  .product-content [class*="color"] label img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    border: 2.5px solid var(--sw-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition:
      transform     var(--sw-dur) var(--sw-ease),
      border-color  var(--sw-dur) var(--sw-ease),
      box-shadow    var(--sw-dur) var(--sw-ease);
  }

  /* Color dot swatches (no image, colored background) */
  .product-content .swatch-color,
  .product-content [class*="swatch-circle"],
  .product-content [class*="color-dot"] {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2.5px solid var(--sw-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition:
      transform     var(--sw-dur) var(--sw-ease),
      border-color  var(--sw-dur) var(--sw-ease),
      box-shadow    var(--sw-dur) var(--sw-ease);
    position: relative;
    overflow: hidden;
  }

  /* ═══════════════════════════
     EZ SNAP SPECIFIC:
     Image-card swatch tiles
     (White / Silver / Bronze / Black)
  ═══════════════════════════ */

  /* The outer wrapper for each color option */
  .product-content .ez-swatch,
  .product-content .variant-picker__option-values > li,
  .product-content .swatch-list > li,
  .product-content .color-swatch-list > li {
    position: relative;
  }

  /* ── Core swatch card ── */
  .product-content .ez-swatch-card,
  .product-content .variant-picker__option-values label,
  .product-content .swatch-list label,
  .product-content .color-swatch-list label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 9px;
    background: var(--sw-card);
    border: 2px solid var(--sw-border);
    border-radius: 18px;
    cursor: pointer;
    transition:
      transform     var(--sw-dur) var(--sw-ease),
      border-color  var(--sw-dur) var(--sw-ease),
      box-shadow    var(--sw-dur) var(--sw-ease),
      background    var(--sw-dur) var(--sw-ease);
    position: relative;
    overflow: hidden;
    min-width: 80px;
    text-align: center;
  }

  /* Sheen line on top */
  .product-content .variant-picker__option-values label::before,
  .product-content .swatch-list label::before,
  .product-content .color-swatch-list label::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--sw-accent), var(--sw-accent-2));
    border-radius: 18px 18px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s var(--sw-ease);
  }

  /* ── Hover state ── */
  .product-content .variant-picker__option-values label:hover,
  .product-content .swatch-list label:hover,
  .product-content .color-swatch-list label:hover {
    border-color: rgba(196,92,43,0.45);
    box-shadow: 0 6px 22px var(--sw-accent-glow), 0 2px 6px rgba(0,0,0,0.06);
    transform: translateY(-3px) scale(1.02);
  }
  .product-content .variant-picker__option-values label:hover::before,
  .product-content .swatch-list label:hover::before,
  .product-content .color-swatch-list label:hover::before {
    transform: scaleX(1);
  }
  .product-content .variant-picker__option-values label:hover img,
  .product-content .swatch-list label:hover img,
  .product-content .color-swatch-list label:hover img {
    border-color: rgba(196,92,43,0.4);
  }

  /* ── Selected / checked state ── */
  .product-content .variant-picker__option-values input:checked + label,
  .product-content .variant-picker__option-values label.active,
  .product-content .variant-picker__option-values label[aria-pressed="true"],
  .product-content .swatch-list input:checked + label,
  .product-content .color-swatch-list input:checked + label,
  .product-content .swatch-list label.active,
  .product-content .color-swatch-list label.active,
  .product-content [class*="swatch-item"] input:checked ~ label,
  .product-content [class*="color-option"] input:checked + label {
    border-color: var(--sw-accent) !important;
    box-shadow: 0 8px 28px var(--sw-accent-glow), 0 0 0 4px var(--sw-accent-ring) !important;
    transform: translateY(-3px) !important;
    background: rgba(196,92,43,0.03) !important;
  }
  .product-content .variant-picker__option-values input:checked + label::before,
  .product-content .swatch-list input:checked + label::before,
  .product-content .color-swatch-list input:checked + label::before {
    transform: scaleX(1);
  }
  .product-content .variant-picker__option-values input:checked + label img,
  .product-content .swatch-list input:checked + label img,
  .product-content .color-swatch-list input:checked + label img {
    border-color: var(--sw-accent);
  }

  /* ── Checkmark badge on selected ── */
  .product-content .variant-picker__option-values input:checked + label::after,
  .product-content .swatch-list input:checked + label::after,
  .product-content .color-swatch-list input:checked + label::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sw-accent)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
      center/12px 12px no-repeat;
    box-shadow: 0 2px 8px var(--sw-accent-glow);
    animation: sw-check-pop 0.22s var(--sw-ease) both;
  }
  @keyframes sw-check-pop {
    from { transform: scale(0) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
  }

  /* ── Swatch image tile ── */
  .product-content .variant-picker__option-values label img,
  .product-content .swatch-list label img,
  .product-content .color-swatch-list label img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid var(--sw-border);
    transition: border-color var(--sw-dur) var(--sw-ease),
                transform var(--sw-dur) var(--sw-ease);
    display: block;
  }

  /* ── Swatch name text ── */
  .product-content .variant-picker__option-values label span:not([class*="sold"]):not([class*="unavail"]),
  .product-content .swatch-list label span,
  .product-content .color-swatch-list label span,
  .product-content .swatch-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--sw-ink-muted);
    line-height: 1.2;
    transition: color var(--sw-dur);
    letter-spacing: 0.01em;
  }
  .product-content .variant-picker__option-values label:hover span,
  .product-content .swatch-list label:hover span {
    color: var(--sw-accent);
  }
  .product-content .variant-picker__option-values input:checked + label span,
  .product-content .swatch-list input:checked + label span {
    color: var(--sw-accent);
    font-weight: 800;
  }

  /* ── Sold-out / unavailable swatch ── */
  .product-content [class*="sold-out"] label,
  .product-content [class*="unavailable"] label,
  .product-content [class*="disabled"] label,
  .product-content label[class*="sold"],
  .product-content label[class*="unavail"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Strikethrough on sold-out image */
  .product-content [class*="sold-out"] label::after,
  .product-content [class*="unavailable"] label img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(0,0,0,0.12) 4px,
      rgba(0,0,0,0.12) 5px
    );
    border-radius: inherit;
    pointer-events: none;
  }

  /* ═══════════════════════════
     SELECTED COLOR NAME BADGE
     (appears above the swatches)
  ═══════════════════════════ */
  .product-content .ez-selected-color,
  .product-content .variant-picker__option-info .option__selected-value,
  .product-content [class*="selected-value"],
  .product-content [class*="selected-variant"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sw-ink);
    background: var(--sw-surface);
    border: 1.5px solid var(--sw-border);
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    margin-left: 8px;
    vertical-align: middle;
  }
  .product-content .ez-selected-color::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sw-accent);
    flex-shrink: 0;
  }

  /* ═══════════════════════════
     TOOLTIP ON HOVER
  ═══════════════════════════ */
  .product-content .variant-picker__option-values li,
  .product-content .swatch-list li,
  .product-content .color-swatch-list li {
    position: relative;
  }
  .product-content .variant-picker__option-values li::after,
  .product-content .swatch-list li::after,
  .product-content .color-swatch-list li::after {
    content: attr(data-swatch-value);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--sw-ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  .product-content .variant-picker__option-values li::before,
  .product-content .swatch-list li::before,
  .product-content .color-swatch-list li::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 4px solid transparent;
    border-top-color: var(--sw-ink);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
  }
  .product-content .variant-picker__option-values li:hover::after,
  .product-content .variant-picker__option-values li:hover::before,
  .product-content .swatch-list li:hover::after,
  .product-content .swatch-list li:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ═══════════════════════════
     COLOR CHIPS (fallback for
     text-only options)
  ═══════════════════════════ */

  /* Map known color names to actual colors */
  .product-content [data-swatch-value="White"] label,
  .product-content [data-value="White"] label,
  .product-content label[data-color="White"] {
    --sw-chip: #f0f0ed;
  }
  .product-content [data-swatch-value="Silver"] label,
  .product-content [data-value="Silver"] label,
  .product-content label[data-color="Silver"] {
    --sw-chip: #9ba4ae;
  }
  .product-content [data-swatch-value="Bronze"] label,
  .product-content [data-value="Bronze"] label,
  .product-content label[data-color="Bronze"] {
    --sw-chip: #7d5c3a;
  }
  .product-content [data-swatch-value="Black"] label,
  .product-content [data-value="Black"] label,
  .product-content label[data-color="Black"] {
    --sw-chip: #2a2a2a;
  }

  /* Color chip circle shown when no product image */
  .product-content [data-swatch-value] label .sw-chip,
  .product-content [data-value] label .sw-chip {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--sw-chip, #ccc);
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.14);
    position: relative;
    overflow: hidden;
  }

  /* Gloss sheen on chip */
  .product-content [data-swatch-value] label .sw-chip::after,
  .product-content [data-value] label .sw-chip::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
  }

  /* ═══════════════════════════
     QUANTITY INPUT PREMIUM
  ═══════════════════════════ */
  .product-content .quantity {
    display: flex;
    align-items: center;
    background: var(--sw-surface);
    border: 1.5px solid var(--sw-border);
    border-radius: 14px;
    overflow: hidden;
    height: 48px;
    width: fit-content;
    transition: border-color var(--sw-dur), box-shadow var(--sw-dur);
  }
  .product-content .quantity:focus-within {
    border-color: var(--sw-accent);
    box-shadow: 0 0 0 3px var(--sw-accent-ring);
  }
  .product-content .quantity__button {
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sw-ink-muted);
    font-size: 18px;
    font-weight: 300;
    transition: color var(--sw-dur), background var(--sw-dur);
  }
  .product-content .quantity__button:hover {
    color: var(--sw-accent);
    background: rgba(196,92,43,0.06);
  }
  .product-content .quantity__input {
    width: 48px;
    text-align: center;
    background: none;
    border: none;
    border-left: 1.5px solid var(--sw-border);
    border-right: 1.5px solid var(--sw-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--sw-ink);
    height: 100%;
    outline: none;
  }

  /* ═══════════════════════════
     ADD TO CART BUTTON UPGRADE
  ═══════════════════════════ */
  .product-content .product-form__submit,
  .product-content button[name="add"],
  .product-content .btn-add-to-cart {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sw-accent) 0%, var(--sw-accent-2) 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    padding: 15px 32px !important;
    box-shadow: 0 6px 20px var(--sw-accent-glow), 0 2px 6px rgba(0,0,0,0.08) !important;
    transition: transform var(--sw-dur) var(--sw-ease),
                box-shadow var(--sw-dur) var(--sw-ease) !important;
    cursor: pointer;
    width: 100%;
  }
  .product-content .product-form__submit:hover,
  .product-content button[name="add"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px var(--sw-accent-glow) !important;
  }
  .product-content .product-form__submit:active,
  .product-content button[name="add"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px var(--sw-accent-glow) !important;
  }
  /* Ripple effect */
  .product-content .product-form__submit::after,
  .product-content button[name="add"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
  }

  /* ═══════════════════════════
     PRICE DISPLAY UPGRADE
  ═══════════════════════════ */
  .product-content .product-price .price,
  .product-content .price-item--regular,
  .product-content [class*="product-price"] .amount {
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 900 !important;
    color: var(--sw-ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }
  .product-content .price-item--sale {
    color: var(--sw-accent) !important;
  }
  .product-content .price-item--regular.price--on-sale {
    font-size: clamp(14px, 1.5vw, 18px) !important;
    font-weight: 500 !important;
    color: var(--sw-ink-faint) !important;
    text-decoration: line-through !important;
  }

  /* ═══════════════════════════
     PRODUCT TITLE
  ═══════════════════════════ */
  .product-content .product-title,
  .product-content h1.h2,
  .product-content h1[class*="product"] {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--sw-ink);
  }

  /* ═══════════════════════════
     IN-STOCK BADGE
  ═══════════════════════════ */
  .product-content .inventory--in-stock,
  .product-content .inventory[data-status="in-stock"],
  .product-content [class*="in-stock"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1a7c45;
    background: rgba(26,124,69,0.08);
    border: 1px solid rgba(26,124,69,0.18);
    border-radius: 999px;
    padding: 4px 12px;
  }
  .product-content .inventory--in-stock::before,
  .product-content [class*="in-stock"]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a7c45;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(26,124,69,0.18);
    animation: sw-pulse 2s ease-in-out infinite;
  }
  @keyframes sw-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,124,69,0.4); }
    50%       { box-shadow: 0 0 0 5px rgba(26,124,69,0); }
  }

  /* ═══════════════════════════
     MOBILE RESPONSIVE
  ═══════════════════════════ */
  @media (max-width: 767px) {
    .product-content .variant-picker__option-values label,
    .product-content .swatch-list label,
    .product-content .color-swatch-list label {
      min-width: 68px;
      padding: 8px 8px 7px;
      border-radius: 14px;
    }
    .product-content .variant-picker__option-values label img,
    .product-content .swatch-list label img,
    .product-content .color-swatch-list label img {
      width: 52px;
      height: 52px;
      border-radius: 8px;
    }
    .product-content [data-swatch-value] label .sw-chip,
    .product-content [data-value] label .sw-chip {
      width: 44px;
      height: 44px;
      border-radius: 10px;
    }
    .product-content .product-form__submit,
    .product-content button[name="add"] {
      font-size: 14px !important;
      padding: 14px 24px !important;
    }
  }

  /* ══════════════════════════════════════════════════════
     EZ SNAP — COMPLEMENTARY PRODUCTS SECTION
  ══════════════════════════════════════════════════════ */

  :root {
    --ezc-accent:     #c45c2b;
    --ezc-accent2:    #e07a3a;
    --ezc-glow:       rgba(196,92,43,0.22);
    --ezc-ink:        #12192b;
    --ezc-ink2:       rgba(18,25,43,0.55);
    --ezc-ink3:       rgba(18,25,43,0.35);
    --ezc-surface:    #f6f7fa;
    --ezc-border:     rgba(18,25,43,0.09);
    --ezc-white:      #ffffff;
    --ezc-radius:     22px;
    --ezc-ease:       cubic-bezier(0.22,1,0.36,1);
    --ezc-dur:        200ms;
    --ezc-green:      #16a34a;
    --ezc-green-bg:   rgba(22,163,74,0.08);
  }

  .ezc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 72px;
  }

  /* ── Section header ── */
  .ezc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .ezc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ezc-accent);
    margin-bottom: 6px;
  }
  .ezc-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ezc-accent);
    flex-shrink: 0;
  }
  .ezc-title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 900;
    color: var(--ezc-ink);
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0;
  }
  .ezc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ezc-accent);
    text-decoration: none;
    border: 1.5px solid rgba(196,92,43,0.25);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background var(--ezc-dur), border-color var(--ezc-dur), color var(--ezc-dur);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ezc-view-all:hover {
    background: var(--ezc-accent);
    border-color: var(--ezc-accent);
    color: #fff;
  }
  .ezc-view-all svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    transition: transform var(--ezc-dur);
  }
  .ezc-view-all:hover svg { transform: translateX(3px); }

  /* ── Scrollable track ── */
  .ezc-track-outer {
    position: relative;
  }
  .ezc-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 1024px) { .ezc-track { grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 680px)  { .ezc-track { grid-template-columns: repeat(2,1fr); gap: 12px; } }
  @media (max-width: 420px)  { .ezc-track { grid-template-columns: 1fr; } }

  /* ── Product card ── */
  .ezc-card {
    position: relative;
    background: var(--ezc-white);
    border: 1.5px solid var(--ezc-border);
    border-radius: var(--ezc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--ezc-dur), box-shadow var(--ezc-dur), transform var(--ezc-dur) var(--ezc-ease);
    text-decoration: none;
    color: inherit;
  }
  .ezc-card:hover {
    border-color: rgba(196,92,43,0.3);
    box-shadow: 0 10px 36px rgba(196,92,43,0.10), 0 2px 8px rgba(0,0,0,0.05);
    transform: translateY(-3px);
  }

  /* Badge */
  .ezc-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    pointer-events: none;
  }
  .ezc-card-badge.hot  { background: linear-gradient(135deg,#c45c2b,#e07a3a); color: #fff; }
  .ezc-card-badge.new  { background: #12192b; color: #fff; }
  .ezc-card-badge.sale { background: #dc2626; color: #fff; }

  /* Image area */
  .ezc-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ezc-surface);
    overflow: hidden;
  }
  .ezc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 380ms var(--ezc-ease);
    display: block;
  }
  .ezc-card:hover .ezc-card-img img { transform: scale(1.045); }

  /* Quick-add overlay */
  .ezc-quick-add {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(18,25,43,0.72) 0%, transparent 100%);
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--ezc-dur), transform var(--ezc-dur) var(--ezc-ease);
    pointer-events: none;
  }
  .ezc-card:hover .ezc-quick-add {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .ezc-quick-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: var(--ezc-ink);
    font-size: 12.5px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: background var(--ezc-dur), color var(--ezc-dur), transform 120ms;
  }
  .ezc-quick-add-btn:hover {
    background: linear-gradient(135deg, var(--ezc-accent), var(--ezc-accent2));
    color: #fff;
  }
  .ezc-quick-add-btn:active { transform: scale(0.96); }
  .ezc-quick-add-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
  }

  /* Card body */
  .ezc-card-body {
    padding: 15px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
  }

  .ezc-card-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ezc-ink3);
    line-height: 1;
  }

  .ezc-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ezc-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
  }

  /* Color dots */
  .ezc-card-colors {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .ezc-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(18,25,43,0.12);
    flex-shrink: 0;
    transition: transform 150ms, border-color 150ms;
    cursor: default;
  }
  .ezc-dot:hover { transform: scale(1.25); border-color: rgba(18,25,43,0.28); }
  .ezc-dot-more {
    font-size: 10px;
    font-weight: 700;
    color: var(--ezc-ink3);
  }

  /* Price row */
  .ezc-card-price-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: auto;
  }
  .ezc-price {
    font-size: 16px;
    font-weight: 900;
    color: var(--ezc-ink);
    letter-spacing: -0.02em;
  }
  .ezc-price-compare {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ezc-ink3);
    text-decoration: line-through;
  }
  .ezc-price-save {
    font-size: 10.5px;
    font-weight: 800;
    color: #dc2626;
    background: rgba(220,38,38,0.08);
    padding: 2px 7px;
    border-radius: 999px;
  }

  /* Stock pill */
  .ezc-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 2px;
  }
  .ezc-stock::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ezc-stock.in  { color: var(--ezc-green); }
  .ezc-stock.in::before  { background: var(--ezc-green); box-shadow: 0 0 0 3px var(--ezc-green-bg); }
  .ezc-stock.low { color: #d97706; }
  .ezc-stock.low::before { background: #d97706; }

  /* Mobile: horizontal scroll track */
  @media (max-width: 500px) {
    .ezc-track-outer {
      margin: 0 -24px;
      padding: 0 24px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .ezc-track-outer::-webkit-scrollbar { display: none; }
    .ezc-track {
      grid-template-columns: repeat(4, 240px);
      overflow: visible;
      padding-right: 24px;
    }
  }

  /* ── Skeleton loader ── */
  .ezc-skeleton { animation: ezc-pulse 1.4s ease-in-out infinite; }
  @keyframes ezc-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  .ezc-skel-img  { background: #e5e7eb; aspect-ratio: 1; border-radius: 14px 14px 0 0; }
  .ezc-skel-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
  .ezc-skel-line { background: #e5e7eb; border-radius: 6px; height: 10px; }
  .ezc-skel-line.w60 { width: 60%; }
  .ezc-skel-line.w80 { width: 80%; }
  .ezc-skel-line.w40 { width: 40%; }

  /* ── Empty state ── */
  .ezc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ezc-ink3);
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px dashed var(--ezc-border);
    border-radius: var(--ezc-radius);
  }

  /* ════════════════════════════════════════════════════════
     EZ SNAP — INLINE "FREQUENTLY BOUGHT TOGETHER" PANEL
     Lives inside the product right-column, below color swatches
  ════════════════════════════════════════════════════════ */

  .ezc-inline-wrap {
    margin-top: 20px;
    border-top: 1.5px solid rgba(18,25,43,0.08);
    padding-top: 18px;
  }

  /* ── Header row ── */
  .ezc-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .ezc-inline-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ezc-ink, #12192b);
    letter-spacing: -0.01em;
  }
  .ezc-inline-eyebrow svg {
    width: 15px;
    height: 15px;
    stroke: var(--ezc-accent, #c45c2b);
    flex-shrink: 0;
  }
  .ezc-inline-see-all {
    font-size: 11px;
    font-weight: 700;
    color: var(--ezc-accent, #c45c2b);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 150ms;
  }
  .ezc-inline-see-all:hover { opacity: 1; text-decoration: underline; }
  .ezc-inline-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ezc-ink, #12192b);
    letter-spacing: -0.01em;
  }

  /* ── Cards: vertical list ── */
  .ezc-inline-track {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid rgba(18,25,43,0.09);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  /* ── Individual inline card — horizontal row ── */
  .ezc-inline-card {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-bottom: 1px solid rgba(18,25,43,0.07);
    transition: background 150ms ease;
  }
  .ezc-inline-card:last-child { border-bottom: none; }
  .ezc-inline-card:hover { background: #faf8f6; }

  /* Image thumbnail */
  .ezc-inline-card .ezc-card-img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    background: #f6f7fa;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }
  .ezc-inline-card .ezc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
  }
  .ezc-inline-card:hover .ezc-card-img img { transform: scale(1.06); }

  /* Middle: name + price */
  .ezc-inline-card .ezc-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 0;
    flex: 1;
  }
  .ezc-inline-card .ezc-card-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18,25,43,0.38);
    line-height: 1;
  }
  .ezc-inline-card .ezc-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #12192b;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-decoration: none;
  }
  .ezc-inline-card .ezc-card-name:hover { text-decoration: underline; }
  .ezc-inline-card .ezc-card-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 1px;
  }
  .ezc-inline-card .ezc-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--ezc-accent, #c45c2b);
    letter-spacing: -0.02em;
  }
  .ezc-inline-card .ezc-price-compare {
    font-size: 10.5px;
    text-decoration: line-through;
    color: rgba(18,25,43,0.35);
  }
  .ezc-inline-card .ezc-card-colors { gap: 4px; margin-top: 2px; }
  .ezc-inline-card .ezc-dot { width: 10px; height: 10px; }
  .ezc-inline-card .ezc-stock { font-size: 9px; }

  /* Badge */
  .ezc-inline-card .ezc-card-badge {
    top: 8px;
    left: 8px;
    font-size: 8px;
    padding: 2px 6px;
  }

  /* Right: qty stepper + ADD button */
  .ezc-inline-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
  }
  .ezc-inline-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid rgba(18,25,43,0.13);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  .ezc-inline-qty button {
    width: 28px;
    height: 26px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #12192b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
    padding: 0;
    line-height: 1;
  }
  .ezc-inline-qty button:hover { background: rgba(18,25,43,0.06); }
  .ezc-inline-qty input {
    width: 28px;
    height: 26px;
    border: none;
    border-left: 1.5px solid rgba(18,25,43,0.13);
    border-right: 1.5px solid rgba(18,25,43,0.13);
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #12192b;
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
    padding: 0;
  }
  .ezc-inline-qty input::-webkit-inner-spin-button,
  .ezc-inline-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }

  .ezc-inline-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #12192b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms, transform 100ms;
    min-width: 70px;
  }
  .ezc-inline-add-btn:hover { background: var(--ezc-accent, #c45c2b); }
  .ezc-inline-add-btn:active { transform: scale(0.95); }
  .ezc-inline-add-btn.added {
    background: linear-gradient(135deg,#16a34a,#22c55e);
  }
/* END_SECTION:main-product */

/* START_SECTION:main-search (INDEX:48) */
.main-collection-products {
    &:not(.swiper.swiper-initialized) {
      display: grid;
      gap: var(--row-gap, 10px) var(--column-gap, 10px);
    }
    @media (min-width: 768px) {
       grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
    }
    @media (max-width: 767px) {
      grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
    }
    &:has(.product-card.swiper) > * {
      min-width: 0;
      min-height: 0;
    }
    & > * {
      min-width: 0;
      min-height: 0;
    }
  }
  .collection-catergories {
    gap: 10px;
    display: flex;
    overflow-x: auto;
    align-items: center;
    margin-block: 15px;
    padding-inline: 10px;
    padding-block: 4px 10px;
    margin-inline: auto;
    overflow-y: hidden;
    max-width: max-content;
    @media (min-width: 768px) {
      margin-block: 25px;
    }
    .categories-filter {
      display: flex;
      font-size: 14px;
      padding: 0 22px;
      cursor: pointer;
      max-width: 250px;
      min-width: 150px;
      min-height: 36px;
      text-align: center;
      align-items: center;
      justify-content: center;
      border: var(--border-width) var(--border-style) currentColor;
      &.active {
        color: var(--layout-background);
        background: var(--text-color);
        border-color: var(--text-color);
      }
    }
  }
  .collection-card-grid {
    gap: 14px;
    margin-inline: auto;
    padding-bottom: 10px;
    padding-inline: 10px;
    max-width: max-content;
    @media (max-width: 767px) {
      &.mobile-swipe {
        grid-auto-columns: auto;
        grid-template-columns: auto;
      }
    }
    @media (max-width: 575px) {
      gap: 10px;
    }
    @media (min-width: 768px) {
      display: flex;
      overflow-x: auto;
      margin-bottom: 30px;
      padding-bottom: 20px;
    }
    .collection-sub-card {
      --mediabox-height: 150px;
      min-width: 200px;
      @media (min-width: 768px) {
        --mediabox-height: 200px;
        min-width: 270px;
      }
      .card-name {
        margin-top: 10px;
      }
    }
  }
  .collection-sub-card {
    text-align: center;
  }

  /* Filters */
  .main-collection {
    .filters-toggle-button {
      gap: 10px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      justify-content: center;
      @media (max-width: 767px) {
        &.filter-openbtn-mobile {
          margin: 18px auto;
        }
      }
      @media (min-width: 768px) {
        &.filters-toggle-mobile {
          display: none;
        }
      }
    }
    &.filters-open {
      .filters-block {
        @media (max-width: 767px) {
          visibility: visible;
          transform: translateX(0);
          transition: transform 0.3s ease 0.1s, visibility 0s linear 0s;
        }
      }
    }
    &.filters-closed {
      .filters-block {
        @media (max-width: 767px) {
          transition: transform 0.3s ease 0s, visibility 0s linear 0.31s;
        }
      }
    }
    .filters-block {
      @media (max-width: 767px) {
        inset: 0;
        z-index: 9;
        position: fixed;
        visibility: hidden;
        transform: translateX(-100%);
        background: var(--layout-background);
      }
      .filters-block-head {
        --svg-inside--size: 24px;
        display: flex;
        padding: 20px;
        justify-content: space-between;
        @media (min-width: 768px) {
          display: none;
        }
      }
      details {
        @media (max-width: 767px) {
          padding-inline: 20px;
        }
      }
    }
    &.has-filters-vertical {
      @media (min-width: 768px) {
        --filters-vertical-gap: 15px;
        --filters-vertical-width: 250px;
        display: grid;
        transition: grid-template-columns 0.3s ease 0s;
        grid-template-columns: calc(var(--filters-vertical-width) + var(--filters-vertical-gap)) 1fr;
      }
      @media (min-width: 1025px) {
        --filters-vertical-gap: 30px;
        --filters-vertical-width: 250px;
      }
      @media (min-width: 1200px) {
        --filters-vertical-width: 300px;
      }
      @media (min-width: 1440px) {
        --filters-vertical-gap: 60px;
      }
      .filter-list {
        &.filter-layout-swatch {
          @media (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
        }
      }
      &:not(.filters-open) {
        @media (min-width: 768px) {
          grid-template-columns: 0 1fr;
        }
        .sorting-block {
          .filters-toggle-button {
            @media (min-width: 768px) {
              opacity: 1;
              width: 126px;
              margin-right: 20px;
              visibility: visible;
              transition: opacity 0.6s ease 0.2s, width 0.3s ease 0.2s, visibility 0s linear 0s;
            }
          }
        }
        @media (min-width: 768px) {
          .filters-block {
            opacity: 0;
            visibility: hidden;
            border-color: transparent;
            transform: translateX(-50px);
            transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, border-color 0s ease 0s, visibility 0s linear 0.3s;
          }
        }
        .main-collection-products {
          @media (min-width: 768px) {
            padding-left: 0;
            grid-template-columns: repeat(var(--layout-columns, 4), 1fr);
          }
        }
      }
      &.filters-open {
        .sorting-block {
          /* padding-left: 10px; */
          @media (min-width: 768px) {
            padding-left: 15px;
          }
          @media (min-width: 1025px) {
            padding-left: 30px;
          }
          @media (min-width: 768px) {
            .filters-toggle-button {
              /* margin-right: 20px; */
              width: 0;
              opacity: 0;
            }
          }
        }
        .active-filters {
          @media (min-width: 1025px) {
            padding-left: 30px;
          }
          .active-filters-list {
            @media (max-width: 1024px) {
              padding-inline: 15px;
            }
          }
        }
      }
      .sorting-block {
        @media (min-width: 768px) {
          transition: padding 0.3s ease;
          .filters-toggle-button {
            white-space: nowrap;
            visibility: hidden;
            transform-origin: left center;
            transition: opacity 0.3s ease 0s, width 0.6s ease 0s, visibility 0s linear 0.61s;
          }
        }
      }
      .active-filters {
        @media (max-width: 1024px) {
          transition: padding 0.3s ease;
          flex-direction: column;
        }
      }
      .collection-filter-form {
        @media (min-width: 768px) {
          padding-right: var(--filters-vertical-gap);
          transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
        }
      }
      .main-collection-products {
        @media (min-width: 768px) {
          padding-left: 15px;
          transition: padding 0.3s ease;
        }
        @media (min-width: 1025px) {
          padding-left: 30px;
        }
      }
      .filters-block {
        @media (min-width: 768px) {
          overflow: clip;
          width: calc(var(--filters-vertical-width) + var(--filters-vertical-gap));
          transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s, border-color 0.3s ease 0.4s;
          border-right: var(--border-width) var(--border-style) var(--border-color);
        }
        .filters-hide-block {
          @media (max-width: 767px) {
            display: none;
          }
          @media (min-width: 768px) {
            display: flex;
            padding-block: 15px;
            align-items: center;
            justify-content: space-between;
            border-bottom: var(--border-width) var(--border-style) var(--border-color);
          }
          @media (min-width: 1025px) {
            padding-block: 25px;
          }
        }
      }
      @media (max-width: 1024px) {
        summary {
          padding-block: 15px;
        }
      }
    }
    /* HAS-FILTERS-HORIZONTAL START */
    &.has-filters-horizontal {
      @media (min-width: 768px) {
        margin-top: 20px;
        .facet-filters-field {
          .input-group {
            border: 1px solid var(--border-color);
            .input-field {
              height: 34px;
            }
          }
        }
        .filtes-wrapper {
          gap: 10px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          details {
            position: relative;
            @media (min-width: 768px) {
              width: auto;
              display: flex;
              overflow: visible;
              align-items: center;
            }
          }
          summary {
            height: 36px;
            padding: 0 16px;
            border: 1px solid var(--border-color);
            @media (max-width: 767px) {
              width: 100%;
            }
          }
        }
        .collection-filters,
        .collection-sorting {
          gap: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }
        .collapsible-content {
          left: 0;
          z-index: 5;
          width: 400px;
          position: absolute;
          top: calc(100% + 10px);
        }
        .filter-wrap {
          width: 100%;
          display: block;
          padding: 20px 10px;
          backdrop-filter: blur(10px);
          background: color-mix(in srgb, var(--layout-background) 85%, transparent);
          box-shadow: 5px -5px 30px color-mix(in srgb, var(--text-color) 10%, transparent);
          .filter-title {
            /* display: none; */
            margin-bottom: 10px;
            padding-inline: 10px;
          }
        }
        .filter-list {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .active-filters {
          gap: 3px;
          margin-top: 15px;
        }
      }
      @media (min-width: 1025px) {
        .collapsible-content {
          width: 450px;
        }
      }
    }

    /* HAS-FILTERS-HORIZONTAL end */

    .filter-list {
      @media (min-width: 768px) {
        overflow-y: auto;
        max-height: 300px;
      }
    }
    .collections-topbar {
      display: block;
      @media (min-width: 768px) {
        margin-bottom: 15px;
      }
      @media (min-width: 1025px) {
        margin-bottom: 30px;
      }
      &.sticky-block {
        @media (min-width: 768px) {
          background: var(--layout-background);
        }
      }
      .sorting-block {
        display: none;
        @media (min-width: 768px) {
          display: flex;
          align-items: center;
          /* padding-block: 25px; */
          padding-block: 15px;
          justify-content: space-between;
          border-bottom: var(--border-width) var(--border-style) var(--border-color);
        }
        @media (min-width: 1025px) {
          padding-block: 25px;
        }
        .collections-count {
          margin-right: auto;
        }
      }
      .active-filters {
        justify-content: space-between;
        /* border-bottom: var(--border-width) var(--border-style) var(--border-color); */
        .active-filters-list {
          width: 100%;
          @media (max-width: 1024px) {
            padding-block: 15px;
            /* border-bottom: var(--border-width) var(--border-style) var(--border-color); */
          }
          @media (min-width: 1025px) {
            padding-block: 25px;
            /* padding-right: 30px;
            border-right: var(--border-width) var(--border-style) var(--border-color); */
          }
        }
        .active-filters-clear {
          white-space: nowrap;
          @media (max-width: 1024px) {
            margin-left: auto;
            padding-block: 15px;
          }
          @media (min-width: 1025px) {
            margin-left: 60px;
            /* LINE BREAK COMMENT */
          }
        }
      }
    }
  }
/* END_SECTION:main-search */

/* START_SECTION:measure-and-order (INDEX:49) */
.measure-config {
    padding: 24px 16px;
    border-radius: var(--card-roundness, 12px);
    background: var(--layout-background, #ffffff);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, rgba(0,0,0,0.06));
  }

  .measure-config__layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  @media (min-width: 1024px) {
    .measure-config__layout {
      display: grid;
      grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr);
      align-items: flex-start;
      gap: 24px;
    }
  }

  .measure-config__wizard {
    display: grid;
    gap: 16px;
  }

  .measure-config__summary-panel {
    border-radius: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--layout-background) 96%, var(--text-color) 4%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  }

  @media (min-width: 1024px) {
    .measure-config__summary-panel {
      position: sticky;
      top: calc(var(--header-height, 0px) + 16px);
    }
  }

  @media (max-width: 767px) {
    .measure-config__summary-panel {
      position: sticky;
      bottom: 0;
      margin-inline: -16px;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    }
  }
  .measure-config__header {
    margin-bottom: 20px;
    text-align: left;
  }
  .measure-config__title {
    margin: 0 0 4px;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
  }
  .measure-config__subtitle {
    margin: 0;
    font-size: 13px;
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
  }
  .measure-config__progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .measure-config__step-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--text-color) 55%, transparent);
  }
  .measure-config__step-index {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
    background: transparent;
  }
  .measure-config__step-dot.is-active .measure-config__step-index {
    background: var(--text-color);
    color: var(--layout-background);
    border-color: var(--text-color);
  }
  .measure-config__step-dot.is-complete .measure-config__step-index {
    background: color-mix(in srgb, var(--text-color) 90%, transparent);
    color: var(--layout-background);
  }
  .measure-config__step-dot.is-active {
    color: var(--text-color);
  }
  .measure-config__content {
    display: grid;
    gap: 18px;
  }
  .measure-config__group {
    display: grid;
    gap: 10px;
  }
  .measure-config__group.is-step-disabled {
    opacity: 0.45;
    pointer-events: none;
  }
  .measure-config__group-label {
    font-size: 13px;
    font-weight: 600;
  }
  .measure-config__options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    .measure-config__options {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .measure-config__card {
    position: relative;
    padding: 10px 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 18%, transparent);
    background: color-mix(in srgb, var(--layout-background) 90%, transparent);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 64px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.08s ease;
  }
  .measure-config__card-media {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--media-background, #f3f4f6);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }
  .measure-config__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .measure-config__card-label {
    font-size: 14px;
    font-weight: 600;
  }
  .measure-config__card-meta {
    font-size: 11px;
    color: color-mix(in srgb, var(--text-color) 65%, transparent);
  }
  .measure-config__card.is-selected {
    border-color: var(--text-color);
    background: color-mix(in srgb, var(--text-color) 6%, var(--layout-background) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-color) 20%, transparent);
  }
  .measure-config__card.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .measure-config__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--text-color) 94%, transparent);
    color: var(--layout-background);
  }
  .measure-config__color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .measure-config__swatch {
    width: 26px;
    height: 26px;
    padding: 2px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--text-color) 25%, transparent);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.16s ease, transform 0.08s ease, box-shadow 0.16s ease;
  }
  .measure-config__swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
  }
  .measure-config__swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    border-color: color-mix(in srgb, var(--text-color) 60%, transparent);
  }
  .measure-config__swatch.is-selected {
    border-color: var(--text-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-color) 25%, transparent);
  }
  .measure-config__sizes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  @media (min-width: 640px) {
    .measure-config__sizes-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .measure-config__size-card {
    position: relative;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
    padding: 10px 10px;
    background: color-mix(in srgb, var(--layout-background) 92%, var(--text-color) 4%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
  }
  .measure-config__size-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  }
  .measure-config__size-card.is-active {
    border-color: var(--text-color);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
    background: color-mix(in srgb, var(--layout-background) 90%, var(--text-color) 8%);
  }
  .measure-config__size-label {
    font-weight: 600;
  }
  .measure-config__size-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .measure-config__size-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--layout-background);
    border: 1px solid color-mix(in srgb, var(--text-color) 35%, transparent);
  }
  .measure-config__qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-color) 22%, transparent);
    background: var(--layout-background);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease, border-color 0.15s ease;
  }
  .measure-config__qty-btn:active {
    transform: scale(0.97);
  }
  .measure-config__qty-value {
    min-width: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
  }
  .measure-config__footer {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  }
  .measure-config__summary {
    font-size: 13px;
    line-height: 1.5;
  }
  .measure-config__summary span {
    font-weight: 600;
  }
  .measure-config__summary-sizes {
    font-size: 12px;
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
  }
  .measure-config__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }
  .measure-config__error {
    font-size: 11px;
    color: #b3261e;
  }
  .measure-config__pill {
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 10%, transparent);
    font-size: 11px;
  }
  .measure-config__add-btn {
    min-width: 170px;
  }
  .measure-config__add-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
/* END_SECTION:measure-and-order */

/* START_SECTION:media-blocks (INDEX:50) */
.images-banner {
    display: grid;
    gap: var(--gap);
    @media (max-width: 767px) {
      grid-template-columns: repeat(3, minmax(0px, 1fr));
      grid-auto-rows: minmax(var(--mediabox-height), auto);
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(12, minmax(0px, 1fr));
      grid-auto-rows: minmax(var(--mediabox-height), auto);
    }
  }

  .images-banner-col {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    position: relative;
    grid-row: span var(--row-span);
    /* border-radius: var(--card-roundness); */
    grid-column: span var(--column-span);
    clip-path: inset(0 round var(--card-roundness));
    max-height: calc((var(--mediabox-height) + var(--column-gap, 0px) * var(--row-span)) * var(--row-span));
    &:hover {
      .images-banner-content {
           @media (min-width: 1025px){
            a {
              color: var(--link-color);   
            }
          }
      }
      .images-banner-bgshape {
        opacity: 1;
      }
    }
  }
  .images-banner-media {
    height: 100%;
  }

  .images-banner-content {
    position: absolute;
    z-index: 1;
  }

  .images-banner-content {
    &.top-center,
    &.center,
    &.bottom-center {
      text-align: center;
    }
    &.top-right,
    &.center-right,
    &.bottom-right {
      text-align: right;
    }
    & > * {
      /* gap: 10px;
      display: flex;
      align-items: center; */
      .svg-inside {
        margin-left: 0.4em;
        margin-top: 0.2em;
      }
    }
    a {
      color: var(--media-overlay--text);
      span.svg-inside{
        vertical-align: text-top;
      }
    }
  }

  .images-banner-bgshape {
    position: absolute;
    z-index: 1;
    inset: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
    opacity: 0;
    overflow: hidden;
    transform: scale(1.002);
    /* border-radius: var(--card-roundness); */
  }

  .mask rect {
    fill: var(--layout-background);
  }
  .images-banner-bgshape {
    img,
    svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  svg.mask ellipse {
    will-change: transform;
    transform-box: fill-box;
    transform-origin: center center;
  }
/* END_SECTION:media-blocks */

/* START_SECTION:media-grid (INDEX:51) */
.media-grid {
    display: grid;
    gap: var(--gap);
    @media (max-width: 767px) {
      grid-auto-rows: minmax(var(--mobile-height), auto);
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(12, minmax(0px, 1fr));
      grid-auto-rows: minmax(var(--desktop-height), auto);
    }
  }

  .media-grid-item {
    width: 100%;
    height: 100%;
    position: relative;
    grid-row: span var(--row-span);
    border-radius: var(--card-roundness);
    /* border: 1px solid var(--border-color); */
    max-height: calc((var(--desktop-height) + var(--gap, 0px) * var(--row-span)) * var(--row-span));
    @media (max-width: 767px) {
      .media-grid:not(.mobile-swipe) & {
        grid-column: span var(--column-span);
      }
    }
    @media (min-width: 768px) {
      grid-column: span var(--column-span);
    }
    &:hover {
      .media-grid-content {
        &.content-onhover {
          @media (min-width: 1025px) {
            opacity: 1;
          }
        }
      }
    }
  }

  .media-grid-media {
    display: block;
    height: 100%;
  }

  .media-grid-content {
    inset: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--media-overlay--background) 50%, transparent);
    overflow: hidden;
    @media (min-width: 1025px) {
      &.content-onhover {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
    }
    a:not(.button) {
      transition: color 0.3s ease, text-decoration 0.3s ease;
      &:hover {
        text-decoration: underline;
        text-underline-offset: 0.15em;
        text-decoration-thickness: 0.03em;
      }
    }
  }
  .media-grid-content-inner {
    /* gap: 15px; */
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
    max-width: calc(100% - 40px);
    @media (min-width: 768px) {
      /* gap: 20px; */
      /* padding: 20px; */
    }
    @media (min-width: 1200px) {
      padding: 20px;
    }
    &.top-center,
    &.center,
    &.bottom-center {
      text-align: center;
      justify-content: center;
      align-items: center;
    }
    &.top-right,
    &.center-right,
    &.bottom-right {
      text-align: right;
      align-items: flex-end;
    }
    .counter-block {
      margin: 0;
      padding-top: 15px;
    }
  }
  .media-grid-heading,
  .media-grid-description{
    padding-top: 10px;
  }
  .media-grid-button{
    padding-top: 20px;
}
  .media-grid-couponcode {
    --svg-inside--size: 12px;
    gap: 5px;
    display: inline-flex;
    /* margin-block: 20px; */
    padding: 6px 14px;
    align-items: center;
    position: relative;
    justify-content: center;
    border-radius: calc(var(--card-roundness) / 2);
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    .form-status {
      left: 50%;
      padding: 0;
      min-width: 180px;
      position: absolute;
      bottom: calc(100% + 12px);
      transform: translateX(-50%);
      .form-status-inner {
        border-radius: calc(var(--product-card-roundness));
      }
      &::after {
        content: '';
        top: 100%;
        z-index: -1;
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        background: var(--form-success-background);
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }
/* END_SECTION:media-grid */

/* START_SECTION:multicolumns (INDEX:52) */
.multicolumn-wrapper{
    display: grid;
    gap: var(--row-gap) var(--column-gap);
    align-items: flex-start;
    @media (min-width: 768px) {
      grid-template-columns: repeat(var(--layout-columns, 3), 1fr);
    }
    @media (max-width: 767px) {
      &:not(.mobile-swipe){
        grid-template-columns: repeat(var(--layout-columns, 1), 1fr);
      }
    }
  }
  .multicolumn-item {
    display: flex;
    flex-direction: column;
    &.stacked-reverse-view {
      flex-direction: column-reverse;
      & .multicolumn-content {
        padding-top: 0;
        padding-bottom: 15px;
      }
    }
    &.background-enabled {
      background-color: var(--card-background);
      border-radius: var(--card-roundness);
      overflow: hidden;
      & .multicolumn-content {
        padding: 20px;
      }
    }
    & .multicolumn-content {
      padding-top: 15px;
      width: 100%;
      flex-grow: 1;
    }
  }


  .multicolumn-img {
    width: 100%;
    background: var(--image-bg);
    position: relative;
    overflow: hidden;
    display: block;
  }

.multicolumn-content-heading{
  color: var(--card-heading);
}
.multicolumn-content-description{
  color: var(--card-text);
}

  .multicolumn-content-heading,
  .multicolumn-content-description {
    padding-bottom: 10px;
  }
/* END_SECTION:multicolumns */

/* START_SECTION:newsletter-popup (INDEX:53) */
.newsletter-popup-text {
    padding: 1.5rem;
    @media (min-width: 768px) {
      padding: 2.5rem;
      max-height: 90dvh;
      overflow: auto;
    }
    @media (min-width: 1025px) {
      padding: 3.5rem;
      .layout-header-wrapper:not(.no-margin, .small-margin) { 
        margin-bottom: 30px;
      }
    }
  }

  .newsletter-body {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    @media (min-width: 768px) {
      &.image-position-right {
        grid-template-columns: 1fr auto;
      }

      &.image-position-left {
        grid-template-columns: auto 1fr;
      }
    }
    .layout-summary {
      margin-top: 10px;
      color: var(--text-color);
    }
  }

  .offcanvas-popup {
    .offcanvas-close-btn {
      z-index: 1;
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      padding: 15px;
      display: grid;
    }

    .offcanvas-popup-body {
      @media (max-width: 767px) {
        max-height: 90dvh;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .offcanvas-popup-inner {
      position: absolute;
      height: auto;
      pointer-events: all;
      z-index: 1;
      /* transform: scale(0.8); */
      opacity: 0;
      transition: 0.6s cubic-bezier(0.7, 0, 0.2, 1);
      transition-property: transform, opacity;
      @media (max-width: 767px) {
        width: 100%;
        height: auto;
        overflow: hidden;
        max-height: calc(100vh - 2rem);
        position: relative;
        transform: none;
        inset: 0;
        margin: auto;
      }
    }
    .modal-size-large {
      @media (min-width: 992px) {
        max-width: 850px;
      }
    }

    .modal-size-small {
      @media (min-width: 992px) {
        max-width: 599px;
      }
    }
    &.offcanvas-open .offcanvas-popup-inner {
      opacity: 1;
    }
  }

  .offcanvas-newsletter {
    --image-width: 300px;
  }

  @media (min-width: 768px) {
    .offcanvas-popup:not(.offcanvas-open) .newsletter-popup-image {
      width: 0;
    }
    .newsletter-popup-image {
      width: 0px;
      transition: width 0.7s cubic-bezier(0.7, 0, 0.3, 1);
    }
    .show-image {
      .newsletter-popup-image {
        width: var(--image-width);
      }
    }
  }

  @media (max-width: 767px) {
    .newsletter-popup-image {
      width: 100%;
      height: var(--image-width);
    }
  }

  .newsletter-form-content > * + * {
    margin-top: 10px;
  }

  .offcanvas.newsletter-popup {
    padding: 10px;
  }

  .offcanvas-popup {
    padding: 20px;
    @media (max-width: 767px) {
      padding: 10px;
      display: grid;
      align-items: center;
    }
  }
/* END_SECTION:newsletter-popup */

/* START_SECTION:password (INDEX:54) */
.password-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 70px);
    padding-block: 25px;
    @media (max-width: 768px) {
      min-height: calc(100dvh - 50px);
    }
  }
  /* .password-inner {
    width: 100%;
    .password-subtitle {
      display: block;
      margin-bottom: 20px;
    }
  } */
  span.password-subtitle {
    display: block;
    margin-bottom: 15px;
  }
  .password-content {
    margin-bottom: 15px;
  }
  .password-block-input {
    display: grid;
    grid-template-columns: auto;
    /* grid-template-columns: 1fr 50px; */
    align-items: center;
    max-width: 770px;
    margin-block: 50px;
    .text-center & {
      margin-inline: auto;
    }
    .text-right & {
      margin-inline-start: auto;
    }
    .input-field {
      grid-row: 1;
      grid-column: 1 / 3;
      padding-right: 50px;
    }
    button {
      --svg-inside--size: 20px;
      grid-row: 1;
      grid-column: 2 / 3;
      width: 100%;
      height: 100%;
      z-index: 1;
      justify-self: center;
    }
    @media (max-width: 767px) {
      max-width: calc(100% - 30px);
      margin-block: 30px 0;
    }
  }
  .offcanvas-password {
    .password-inner {
      padding: 15px;
      width: 100%;
      @media (min-width: 768px) {
        padding: 30px 20px;
      }
      @media (min-width: 1025px) {
        padding: 50px 30px;
        /* LINE BREAK COMMENT */
      }
      .password-subtitle {
        display: block;
        margin-bottom: 15px;
      }
    }
    .password-form {
      margin-top: 10px;
    }
    .password-info {
      display: flex;
      padding: 10px 15px;
      justify-content: center;
      @media (min-width: 768px) {
        padding: 24px 30px;
      }
      a {
        text-decoration: underline;
        text-underline-offset: 0.3em;
      }
    }
    .password-title {
      line-height: 1;
    }
    .password-title,
    .password-description {
      display: block;
      margin-bottom: 20px;
    }
  }
  @media (max-width: 767px) {
    header.header-section .header-layout .header-buttons-list.has-iconsonly {
      padding-left: 15px;
    }
    .header-layout-block {
      min-height: 50px;
    }
  }
/* END_SECTION:password */

/* START_SECTION:pickup-availability (INDEX:55) */
.offcanvas-pickup-availability {
    .offcanvas-content {
      height: max-content;
      max-height: 100%;
    }
  }
  .pickup-item {
    display: grid;
    grid-template-columns: auto 1fr;
    border-bottom: 5px var(--border-style) var(--border-color);
  }

  .pickup-item-media {
    width: 120px;
    min-height: 165px;
    @media (min-width: 768px) {
      .pickup-item-media {
        width: 90px;
      }
    }
    @media (min-width: 1025px) {
      .pickup-item-media {
        width: 120px;
      }
    }
  }
  .pickup-item-details {
    display: flex;
    position: relative;
    flex-direction: column;
    /* align-items: center; */
    padding: 10px 20px;
    @media (min-width: 1025px) {
      padding: 15px 30px;
    }
  }
  .address-block {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    .availability-status-icon {
      --svg-inside--size: 8px;
      aspect-ratio: 1;
      min-width: 18px;
      width: 18px;
      height: 18px;
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      .success & {
        color: var(--form-success-color);
        background: var(--form-success-background);
      }
      .error & {
        color: var(--form-error-color);
        background: var(--form-error-background);
      }
    }
  }
  .pickup-availability-list {
    .pickup-location {
      margin-bottom: 15px;
    }
  }
  .pickup-availability-list-item {
    padding: 24px 30px;
    &:not(:last-child) {
      border-bottom: var(--border-width) var(--border-style) var(--border-color);
    }
    .pickup-availability-preview {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .pickup-availability-address > * {
      font-size: 12px;
    }
  }
/* END_SECTION:pickup-availability */

/* START_SECTION:product-bundle (INDEX:57) */
.bundle-product-section {
    products-bundle-slider {
      .product-bundle-header {
        .swiper-navigation {
          opacity: 1;
          margin: 0; /*Added by gurpreet*/
          .swiper-nav {
            background: none;
            width: auto;
            height: auto;
            box-shadow: none;
            &::before {
              content: none !important;
            }
            svg {
              rect,
              path {
                transform: none;
              }
            }
          }
        }
      }
    }
  }


  .product-bundles-outer {
    position: relative;
  }

  .product-bundle {
    padding: 20px;
    background: var(--layout-background--alternate);
    .product-bundles-wrapper.swiper:not(.swiper-initialized) & {
      padding: 20px;
      margin-inline-end: 10px;
    }
  }

  .product-bundle-cards-inner {
    --layout-columns:1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .product-bundle-buttons {
    margin-top: 16px;
  }
  .product-bundle-card {
    gap: 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    .card-first & {
      order: 1;
    }
    .card-last & {
      order: 2;
    }
  }
  .product-bundle-card-media {
    width: 75px;
    .mediabox {
      .has-roundness & {
        border-radius: var(--card-roundness);
      }
    }
  }
  .product-bundle-card-info {
    flex: 1 1 auto;
    gap: 4px;
    display: flex;
    flex-direction: column;
  }
  a.product-bundle-title {
    display: inline-block;
  }
  .product-bundle-header {
    margin-bottom: 15px;
    @media (min-width: 768px) {
      min-height: 24px;
    }
    &.has-swiper-nav {
      gap: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .offcanvas-bundle {
    .offcanvas-close-btn {
      .offcanvas-close-btn {
        color: var(--icon-color);
      }
    }
    .offcanvas-inner {
      @media (min-width: 768px) {
        height: auto;
        position: absolute;
      }
    }
    .offcanvas-head-inner {
      @media (min-width: 768px) {
        padding: 20px;
      }
    }
    .offcanvas-content {
      @media (min-width: 768px) {
        max-height: 65dvh;
      }
      &.has-roundness {
        overflow: hidden;
      }
      .bundle-popup-body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
  .bundle-popup-card {
    padding-inline: 20px;
    & + .bundle-popup-card {
      margin-top: 10px;
    }
    .has-roundness & {
      overflow: hidden;
      border-radius: var(--card-roundness);
    }
  }

  .bundle-popup-card-header {
    display: flex;
    padding-block: 20px;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
  }
  .product-popup-card-media {
    min-width: 56px;
    max-width: 56px;
    .mediabox {
      .has-roundness & {
        border-radius: 3px;
      }
    }
  }
  .bundle-popup-card-body {
    padding-block: 20px;
  }
  .bundle-popup-footer {
    position: relative;
    .swiper-navigation {
      width: 100%;
      height: auto;
      position: relative;
      justify-content: space-between;
    }
  }
  .swiper-nav {
    position: relative;
    .swiper-nav-text {
      width: max-content;
      position: absolute;
      .swiper-nav-prev & {
        left: calc(100% + 15px);
      }
      .swiper-nav-next & {
        right: calc(100% + 15px);
      }
    }
  }
  .bundle-popup-cards {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    /* @media (max-width: 767px) {
    } */
  }
  .bundle-popup-card-inner {
    padding: 15px;
    overflow-y: auto;
    max-height: 100%;
    /* @media (min-width: 768px) {
      max-height: 60vh;
    } */
  }
  .bundle-popup-footer {
    gap: 15px;
    padding: 15px;
    display: grid;
    position: relative;
  }
  .product-bundle-card-actions {
    margin-right: 10px;
    .button.button-asicon {
      .btn-icon {
        border-color: color-mix(in srgb, var(--button-border) 20%, transparent);
      }
    }
  }
  .product-bundle-variant-info {
    .separator {
      width: 5px;
      height: 5px;
      background: var(--text-color);
      display: inline-block;
      border-radius: 50px;
      margin: 0 3px;
    }
  }
  product-card-list {
    &.arrows-position-middle {
      @media (max-width: 767px) {
        inset: 0;
        margin-top: 15px;
        position: relative;
      }
    }
  }

  .bundle-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb,var(--layout-background) 20%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: flex;
    color: var(--text-color);
}
/* END_SECTION:product-bundle */

/* START_SECTION:product-specification (INDEX:58) */
.product-specs {
    gap: 20px;
    display: grid;
    padding: 25px 20px;
    grid-template-columns: 1fr;
    background-color: var(--layout-background--alternate);
    &.has-background-gradient {
      background-color: #fff;
      background-image: var(--card-background--gradient);
    }
    &.media-first,
    &.media-second {
      @media (min-width: 1025px) {
        gap: 40px;
        padding: 35px 25px;
        grid-template-columns: repeat(2, 1fr);
      }
      @media (min-width: 1200px) {
        gap: 60px;
        padding: 40px 30px;
      }
      @media (min-width: 1441px) {
        gap: 90px;
        padding: 50px 35px;
      }
    }
    &.media-first {
      @media (max-width: 1024px) {
        grid-template-areas: 'media' 'content';
      }
      @media (min-width: 1025px) {
        grid-template-areas: 'media content';
      }
    }
    &.media-second {
      @media (max-width: 1024px) {
        grid-template-areas: 'content' 'media';
      }
      @media (min-width: 1025px) {
        grid-template-areas: 'content media';
      }
    }
  }
  .specs-tabs-block {
    overflow: hidden;
    .media-first &,
    .media-second & {
      grid-area: content;
    }
  }
  .specs-content-head {
    display: flex;
    overflow: hidden;
    margin-bottom: 15px;
    align-items: center;
    position: relative;
    @media (min-width: 768px) {
      max-width: 100%;
    }
    @media (min-width: 1200px) {
      margin-bottom: 30px;
    }
    @media (min-width: 1441px) {
      margin-bottom: 40px;
      /* LINE BREAK */
    }
    &::before {
      content: '';
      bottom: 0;
      width: 100%;
      height: 1px;
      opacity: 0.3;
      position: absolute;
      background-color: var(--link-color);
    }
    .specs-arrow-button {
      --svg-inside--size: 12px;
      width: 30px;
      height: 30px;
      aspect-ratio: 1;
      border-radius: 50px;
      display: flex;
      z-index: 1;
      align-items: center;
      position: absolute;
      justify-content: center;
      color: var(--icon-color);
      background-color: var(--icon-background);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0s linear 0.3s;
      @media (max-width: 767px) {
        display: none;
      }
      &:hover {
        background-color: var(--icon-color);
        color: var(--icon-background);
      }
      &.arrow-previous {
        left: 0;
        transform: translateX(10px);
      }
      &.arrow-next {
        right: 0;
        transform: translateX(-10px);
      }
      &.visible {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s, visibility 0s linear 0s;
      }
    }
  }
  .specs-buttons {
    display: flex;
    white-space: nowrap;
    transition: transform 0.3s ease;
    width: 100%;
    position: relative;
    @media (max-width: 767px) {
      &.mobile-swipe {
        grid-auto-columns: minmax(auto, 1fr);
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 767px) {
      overflow: auto;
    }
  }
  .specs-button {
    position: relative;
    margin-right: 30px;
    padding: 10px 0;
    @media (min-width: 768px) {
      margin-right: 35px;
      padding: 20px 0;
    }
    @media (min-width: 1025px) {
      margin-right: 50px;
    }
    @media (min-width: 1200px) {
      padding: 25px 0;
    }
    @media (min-width: 1441px) {
      padding: 30px 0;
    }
    &::after {
      content: "";
      bottom: 0;
      height: 2px;
      inset-inline: 0;
      position: absolute;
      background-color: currentColor;
    }
    &:not(.active) {
      &::after {
        background-color: transparent;
      }
    }
  }
  .specs-content-body {
    grid-column: span 2;
    /* display: grid; */
    & > * {
      grid-area: 1 / 1 / -1 / -1;
    }
  }
  .specs-content {
    /* opacity: 0;
      visibility: hidden; */
    display: none;
    grid-template-columns: 1fr;
    &.active {
      /* opacity: 1;
        visibility: visible; */
      display: block;
    }
  }
  .specs-list {
    padding: 0;
    margin-top: 15px;
    border: var(--border-width) var(--border-style) var(--border-color);
    @media (min-width: 1200px) {
      margin-top: 30px;
    }
    @media (min-width: 1441px) {
      margin-top: 40px;
      /* LINE BREAK */
    }
  }
  .specs-item {
    --svg-inside--size: 20px;
    gap: 10px;
    display: grid;
    padding: 10px;
    grid-template-columns: 0.8fr 1fr;
    /* @media (min-width: 1200px) {
      padding: 10px;
    }
    @media (min-width: 1441px) {
      padding: 15px;
    } */
    &:not(:last-child) {
      border-bottom: var(--border-width) var(--border-style) var(--border-color);
    }
    .specs-label {
      gap: 15px;
      display: flex;
      .svg-inside {
        img {
          margin: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .specs-media-block {
    grid-area: media;
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding-block: var(--top-offset) var(--bottom-offset);
    &:has(> *:not(:only-child)) {
      --top-offset: 15px;
      --bottom-offset: 35px;
      @media (min-width: 1025px) {
        max-height: 450px;
      }
      @media (min-width: 1200px) {
        max-height: 550px;
      }
      @media (min-width: 1441px) {
        max-height: 700px;
        /* LINE BREAK */
      }
    }
    &.has-two-items {
      --top-offset: 35px;
    }
    & > * {
      &:only-child {
        grid-area: 1 / 1 / -1 / -1;
      }
      &:first-child:not(:only-child) {
        margin-block: calc(var(--top-offset) * -1) calc(var(--bottom-offset) * -1);
        grid-column: span 4;
        grid-row: span 2;
      }
      &:nth-child(2) {
        grid-column: span 2;
        .has-two-items & {
          grid-row: span 2;
        }
      }
      &:last-child:not(:only-child) {
        grid-column: span 3;
      }
    }
  }

  .specs-info {
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
  }

  @media (max-width: 767px) {
    .specs-item {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .specs-info {
      padding-inline-start: 35px;
    }
  }
/* END_SECTION:product-specification */

/* START_SECTION:promotional-bar (INDEX:60) */
.promotional-bar-inner {
    gap: 18px;
    display: flex;
    align-items: center;
    @media (max-width: 767px) {
      gap: 5px;
      --svg-inside--size: 14px;
      flex-direction: column;
    }
    .counter-block {
      margin-top: 0;
    }
    &.position-left {
      justify-content: flex-start;
    }
    &.position-center {
      justify-content: center;
    }
    &.position-right {
      justify-content: flex-end;
    }
  }
  .promo-bar-block {
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .promo-bar-couponcode {
    gap: 6px;
    display: flex;
    align-items: center;
    .button-small:not(.button-link) {
      --button-height: 24px;
      .btn-icon {
        --svg-inside--size: 14px;
        border: none;
      }
    }
  }
/* END_SECTION:promotional-bar */

/* START_SECTION:reveal-images (INDEX:64) */
.reveal-images-section {
    /* --layout-spacing--top: 40px;
    --layout-spacing--bottom: 40px;
    --mediabox-height: 735px;
    --stack-cards-gap: 20px; */
  }

  .reveal-images-track {
    overflow: hidden;
    height: var(--mediabox-height);
    padding: 60px 0;
  }
  .reveal-images {
    height: var(--mediabox-height);
  }
  .reveal-images-media {
    height: var(--mediabox-height);
    @media (min-width: 768px) {
      height: clamp(450px, calc(var(--mediabox-height) * 0.7) ,700px)
    }
    @media (min-width: 1025px) {
      height: clamp(450px, calc(var(--mediabox-height) * 0.8) ,700px)
    }
    @media (min-width: 1200px) {
      height: var(--mediabox-height);
    }
  }
  .reveal-images-content {
    position: absolute;
    inset-inline: 0;
    padding: 40px;
    bottom: 0;
    @media (max-width: 767px) {
      padding: 20px;
    }
    .reveal-images-heading {
      margin-bottom: 20px;
      @media (max-width: 767px) {
        margin-bottom: 8px;
      }
    }
    .reveal-images-link {
      &::after {
        content: none;
      }
    }
  }
  /*  */

  .stack-cards-item {
    --space-sm: 0.75em;
    position: sticky;
    top: var(--space-sm);
    transform-origin: center top;
    transition: opacity 0.5s cubic-bezier(0, 0.7, 0.3, 0.9), transform 1s cubic-bezier(0, 0.7, 0.3, 0.9);
  }
/* END_SECTION:reveal-images */

/* START_SECTION:reveal-shop (INDEX:65) */
.reveal-and-shop-section {
      overflow: hidden;
    }
    .reveal-shop-clipblock {
      display: grid;
      position: relative;
      grid-template-columns: 1fr;
    }
  
    .reveal-shop-content {
      --content-padding-block: 20px;
      display: flex;
      padding-block: var(--content-padding-block);
      .pin-spacer & {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - (var(--content-padding-block) * 2))
      }
    }
  
    .reveal-shop-logo {
      height: auto;
      display: inline-block;
      margin-bottom: 25px;
      width: var(--shop-logo--size);
      img {
        width: 100%;
        height: auto;
      }
    }
  
    .reveal-shop-medias {
      display: grid;
    }
  
    .reveal-shop-media {
      height: 100%;
      .mediabox,
      img {
        @media (max-width: 767px) {
          width: 100%;
        }
      }
    }
  
    .reveal-shop-collections {
      --space-between: 24px;
      grid-area: 1 / 1 / -1 / -1;
      display: grid;
      align-items: start;
      transition: opacity 1s ease 0s, visibility 0s linear 1s;
    }
  
    .reveal-shop-collections.revealed {
      opacity: 1;
      visibility: visible;
      transition: opacity 1s ease 0.3s, visibility 0s linear 0s;
    }
  
    .reveal-shop-collections.border-block {
      position: relative;
    }
  
    .reveal-shop-collection {
      padding: var(--space-between);
      display: block;
      width: 100%;
      height: 100%;
    }
  
    .reveal-shop-collection-media {
      width: 100%;
      display: block;
    }
    .reveal-shop-collection-media img {
      transition: transform 0.6s ease;
    }
  
    .reveal-shop-collection-content {
      margin-top: 10px;
    }
  
    /* Media Querry */
    @media (max-width: 767px) {
      .reveal-shop-wrapper {
        display: flex;
        flex-direction: column-reverse;
      }
  
      .reveal-shop-collections {
        padding-bottom: var(--border-width);
      }
  
      .reveal-shop-collections.mobile-swipe .reveal-shop-collection:not(:last-child) {
        border-right: var(--border-width) var(--border-style) var(--border-color);
      }
  
      .reveal-shop-collections:not(.mobile-swipe) {
        padding: var(--space-between);
        gap: var(--space-between);
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
  
      .reveal-shop-collections:not(.mobile-swipe) .reveal-shop-collection {
        padding: 0;
      }
  
      .reveal-shop-collections.border-block {
        border-top: 0;
        margin-inline: calc(var(--container-padding, 0px) * -1);
      }
      .reveal-shop-medias {
        gap: 10px;
        margin-inline: calc(var(--container-padding, 0px) * -1);
      }
      .reveal-shop-medias:not(.mobile-swipe) {
        grid-template-columns: repeat(2, 1fr);
      }
      .reveal-shop-content {
        padding-inline: 20px;
      }
    }
    @media (max-width: 575px) {
      .reveal-shop-medias:not(.mobile-swipe) {
        gap: 10px;
        grid-template-columns: 1fr;
        margin-inline: calc(var(--container-padding, 0px) * -1);
      }
    }
    @media (min-width: 768px) {
      .reveal-shop-wrapper {
        display: grid;
        align-items: center;
      }
      .reveal-shop-clipblock {
        --corner-clip-x: 100;
        --clip-path: polygon(
          0 0,
          100% 0,
          100% 0,
          100% calc(var(--corner-clip-x) * 1% - var(--corner-clip)),
          calc(var(--corner-clip-x) * 1% - var(--corner-clip)) 100%,
          0 100%,
          0 100%,
          0 0
        );
        overflow: hidden;
        padding-inline: 0;
        grid-area: 1 / 1 / -1 / -1;
        grid-template-columns: repeat(2, 1fr);
        -webkit-clip-path: var(--clip-path);
        clip-path: var(--clip-path);
      }
      .reveal-shop-clipblock::after {
        content: '';
        left: 100%;
        top: 100%;
        z-index: 10;
        width: 100vw;
        height: 100vw;
        overflow: hidden;
        user-select: none;
        position: absolute;
        pointer-events: none;
        will-change: transform;
        background-color: var(--text-color);
        transform: translate(calc(var(--corner-clip) * -1), calc(var(--corner-clip) * -1));
        box-shadow: 0 0 50px color-mix(in srgb, var(--text-color) 40%, transparent 0%);
      }
      .reveal-shop-collections {
        --space-between: 30px;
        opacity: 0;
        visibility: hidden;
        grid-template-columns: repeat(var(--layout-columns), 1fr);
      }
  
      .reveal-shop-collections.border-block {
        border-top: 0;
        margin-inline: calc(var(--container-padding, 0px) * -1);
      }
  
      .reveal-shop-collections.border-block {
        border-color: transparent;
      }
  
      .reveal-shop-collections.border-block::before,
      .reveal-shop-collections.border-block::after {
        content: '';
        width: 200vw;
        user-select: none;
        pointer-events: none;
        inset-inline: 0;
        position: absolute;
        left: -50vw;
        background: var(--border-color);
        height: var(--border-width);
      }
  
      .reveal-shop-collections.border-block::before {
        bottom: 100%;
      }
  
      .reveal-shop-collections.border-block::after {
        top: 100%;
      }
      .reveal-shop-content {
        --content-padding-block: 30px;
        padding-inline: 20px;
        grid-area: 1 / 1 / 2 / 2;
        /* .pin-spacer & {
          overflow-y: auto;
          max-height: calc(100vh - (var(--content-padding-block) * 2))
        } */
      }
      .reveal-shop-collection:not(:last-child) {
        border-right: var(--border-width) var(--border-style) var(--border-color);
      }
      .reveal-shop-collection-content {
        margin-top: 20px;
      }
      .reveal-shop-medias {
        grid-area: 1 / 1 / -1 / -1;
        transform: translate(50%, 0);
        height: calc(var(--mediabox-height) - (var(--layout-spacing--top, 0px) + var(--layout-spacing--bottom, 0px)));
      }
      .reveal-shop-media {
        grid-area: 1 / 1 / -1 / -1;
      }
      .reveal-shop-media:first-child {
        width: 50%;
      }
    }
    @media (min-width: 1025px) {
      .reveal-shop-collection-media img {
        transition: transform 0.6s ease;
      }
      .reveal-shop-collection-media:hover img {
        transform: scale(1.1);
      }
    }
    @media (min-width: 1200px) {
      .reveal-shop-collections {
        --space-between: 60px;
      }
      .reveal-shop-content {
        --content-padding-block: 80px;
        padding-inline: 60px;
      }
      .reveal-shop-collection-content {
        margin-top: 40px;
      }
    }
    .reveal-shop-content-inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* .pin-spacer & {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - (var(--content-padding-block) * 2))
      } */
    }
    .reveal-and-shop-section .pin-spacer .layout-section {
      @media (min-width: 768px) {
        max-height: 100dvh;
      }
  }
/* END_SECTION:reveal-shop */

/* START_SECTION:rich-text (INDEX:67) */
.rich-text {
  .word {
    opacity: 0;
    perspective: 500px;
    display: inline-block;
    transform-origin: bottom;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: scale(.0001) rotateX(-90deg) translateZ(0);
    transition: transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1);
    transition-delay: calc(35ms * var(--word-index));
    .in-view & {
      opacity: 1;
      transform: scale(1) rotateX(0deg) translateZ(0);

    }
  }
}
.rich-text-block>*+*{
  margin-top: 15px;
}
/* END_SECTION:rich-text */

/* START_SECTION:scattered-images (INDEX:69) */
.scattered-images-wrapper {
    gap: var(--row-gap) var(--column-gap);
    @media (min-width: 768px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
      @media (max-width: 767px) {   
              grid-auto-columns: minmax(65%, 1fr);
              grid-template-columns: repeat(auto-fill, minmax(65%, 1fr));  
      }
  } 





  
  .scattered-images-item {
    display: flex;
    gap: 15px;
    flex-direction: column;
    @media (min-width: 768px) {
      max-width: calc(var(--item-width) - var(--column-gap)); 
      gap: 20px;
      width: 100%;
      padding-block: var(--padding-top, 0px) var(--padding-bottom, 0px);
    }
    &:nth-child(2n + 1) {
      @media (min-width: 768px) {
        flex-direction: column-reverse;
        .shutter-in {
          --shutter-translate: -100px;
        }
      }
    }
  }    



  .scattered-collections-link {
        img {
          transition: transform 0.3s ease;
      }
      &:hover img {
        transform: scale(1.15);
      } 
  }
/* END_SECTION:scattered-images */

/* START_SECTION:shop-the-look (INDEX:71) */
.shop-the-look {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr;
    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
    &.media-first {
      @media (max-width: 767px) {
        grid-template-areas: 'media' 'content';
      }
      @media (min-width: 768px) {
        grid-template-areas: 'media content';
      }
      @media (min-width: 1025px) {
        grid-template-columns: 1fr 0.7fr;
      }
    }
    &.media-second {
      @media (max-width: 767px) {
        grid-template-areas: 'content' 'media';
      }
      @media (min-width: 768px) {
        grid-template-areas: 'content media';
      }
      @media (min-width: 1025px) {
        grid-template-columns: 0.7fr 1fr;
      }
    }
  }

  .shop-the-look:has(.swiper) > * {
    min-width: 0;
    min-height: 0;
  }
  .shop-the-look-slidesbox {
    max-width: 500px;
    margin-inline: auto;

    .shop-the-look-slides {
      width: 100%;
      display: block;
      max-width: 80%;
      margin-inline: auto;
      /* &.swiper:has(.product-card) {
        margin-inline: auto;
      } */
    }
  }
  /* .shop-the-look-slides.swiper {
    padding: 1px;
  } */
  .shop-the-look-media {
    grid-area: media;
    &.has-adapted-media {
      height: 100%;
    }
  }
  .shop-the-look-content {
    grid-area: content;
    padding-block: 15px;
    display: block;
    position: relative;
    grid-area: content;
    @media (max-width: 767px) {
      padding-inline: 4px;
    }
    @media (min-width: 576px) {
      padding-block: 0 25px;
      padding-inline: 15px;
    }
    @media (min-width: 768px) {
      padding-block: 25px;
      padding-inline: 15px;
    }
    @media (min-width: 1025px) {
      padding-block: 40px;
      padding-inline: 40px;
      /* LINE BREAK COMMENT */
    }
    @media (min-width: 1200px) {
      padding-block: 60px;
      padding-inline: 60px;
      /* LINE BREAK COMMENT */
    }
  }
  .shop-the-look-slidesbox,
  .shop-the-look-media {
    position: relative;
  }
  .shop-the-look-productinfo {
    margin-top: 20px;
  }
  .collection-with-product:has(.collection-with-product-products.swiper) {
    align-items: center;
  }
  .shop-the-look-hotspot {
    --hotspot-size: 33px;
    display: flex;
    position: absolute;
    top: clamp(0px, var(--hotspot-offset--top), calc(100% - var(--hotspot-size)));
    left: clamp(0px, var(--hotspot-offset--left), calc(100% - var(--hotspot-size)));
    &:not(.active) {
      .hotspot-button {
        animation: pulse-shadow 1s infinite;
      }
    }
    &.active {
      .hotspot-button {
        border: 2px solid var(--hotspot-color);
      }
    }
  }

  .hotspot-button {
    aspect-ratio: 1;
    font-size: 24px;
    border-radius: 50%;
    position: relative;
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: color-mix(in srgb, var(--hotspot-background) 25%, transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hotspot-background) 25%, transparent);
    display: grid;
    place-content: center;
    &::before {
      content: '';
      border-radius: 50%;
      background-color: var(--hotspot-color);
      transition: 0.3s ease all;
      width: 10px;
      height: 10px;
    }
  }
  

/* .shop-the-look-slidesbox .product-card.has-border.carddetails-always .size-variants-box {
    margin: -1px;
} */
/* .shop-the-look-slidesbox .product-card.has-border:hover .size-variants-box {
    margin: 0;
} */

  /* Pulse animation */
  @keyframes pulse-shadow {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--hotspot-background) 25%, transparent);
    }
    70% {
      box-shadow: 0 0 0 10px transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
/* END_SECTION:shop-the-look */

/* START_SECTION:slideshow (INDEX:72) */
.slideshow {
    --slideshow-nav--height: 80px;
    .slideshow-wrapper {
      height: 100%;
      .slideshow-slide {
        height: 100%;
        min-height: var(--height);
        /*  */
        .slideshow-media {
          height: 100%;
          grid-column-start: 1;
          grid-row-start: 1;
          /*  */
        }
      }
    }
    .swiper-navigation {
      --svg-inside--size: 36px;
      max-height: var(--slideshow-nav--height, 0px);
      &.has-border-top {
        &::before {
          content: '';
          top: 0;
          inset-inline: 0;
          position: absolute;
          margin-inline: auto;
          height: var(--border-width);
          background: var(--border-color);
          width: calc(100% - (var(--container-padding) * var(--padding-scale)) * 2);
          /*  */
        }
      }
    }
  }

  .slideshow-slide {
    display: grid;
    &:only-child {
      position: relative;
      /*  */
    }
  }

  .slideshow-content-wrap {
    grid-column-start: 1;
    grid-row-start: 1;
    padding-block: 20px;
    position: relative;
    padding-bottom: calc(20px + var(--slideshow-nav--height));
    /*  */
  }
/* END_SECTION:slideshow */

/* START_SECTION:text-with-icon (INDEX:75) */
.trust-icons {
    display: grid;
    gap: var(--gap);
    @media (min-width: 992px) {
      grid-template-columns: repeat(var(--columns-count), 1fr);
    }
  }
  /* @media (max-width: 767px) {} */
  .trust-icons {
    @media (max-width: 991px) {
      &:not(.tablet-swipe) {
        grid-template-columns: repeat(var(--columns-count), 1fr);
      }
      /* &.mobile-swipe {
        grid-auto-columns: minmax(65%, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(65%, 1fr));
      } */
    }
  }

  .trust-icon {
    display: flex;
    gap: 10px;

    &.card-background {
      padding: 20px;
      @media (min-width: 768px) {
        padding: 25px;
      }
    }
  }
  .trust-icon.icon-position-left {
    align-items: center;
    &:has(.trust-icon-info) {
      align-items: flex-start;
    }
    .trust-icons:not(.tablet-swipe) & {
      @media (max-width: 991px) {
        flex-direction: column;
      }
    }
    &.text-center {
      @media (max-width: 767px) {
        flex-direction: column;
      }
    }
  }
  .trust-icon.icon-position-top {
    flex-direction: column;
    @media (max-width: 991px) {
      .trust-icons:not(.tablet-swipe) & {
        flex-direction: column;
      }
    }
    &.text-center {
      .iconbox {
        @media (min-width: 768px) {
          margin: 0 auto;
        }
      }
    }
  }
  .trust-icon.text-left {
    @media (max-width: 767px) {
      text-align: center;
      align-items: center;
      &:not(.icon-position-top) {
        justify-content: center;
      }
    }
    @media (min-width: 768px) {
      justify-content: center;
    }
  }
  .trust-icon.text-center {
    @media (max-width: 767px) {
      text-align: center;
      align-items: center;
      &:not(.icon-position-top) {
        justify-content: center;
      }
    }
    @media (min-width: 768px) {
      justify-content: center;
    }
  }
  .trust-icon.text-right {
    @media (max-width: 767px) {
      text-align: center;
      align-items: center;
      &:not(.icon-position-top) {
        justify-content: center;
      }
    }
    @media (min-width: 768px) {
      justify-content: flex-end;
    }
    .iconbox {
      @media (min-width: 768px) {
        margin-left: auto;
      }
    }
  }
  .trust-icons .iconbox {
    color: var(--icon-color);
    &.has-custom-icon {
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .contentbox {
    gap: 8px;
    display: grid;
  }
/* END_SECTION:text-with-icon */

/* START_SECTION:timeline (INDEX:76) */
.timeline-section {
    overflow: clip;
    /* .container-fullwidth {
      &:has(.media-position-edge.media-left) {
        padding-left: 0;
      }
      &:has(.media-position-edge.media-right) {
        padding-right: 0;
      }
    } */
  }
  .timeline-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    @media (max-width: 767px) {
      gap: var(--gap) 0;
      grid-template-areas:
        'timeline-header'
        'timeline-content'
        'timeline-media';
    }
    @media (min-width: 768px) {
      gap: 0 var(--gap);
      grid-template-columns: repeat(4, 1fr);
      &.media-left {
        grid-template-areas:
          'timeline-media timeline-media timeline-header timeline-header'
          'timeline-media timeline-media timeline-content timeline-content';
      }
      &.media-right {
        grid-template-areas:
          'timeline-header timeline-header timeline-media timeline-media'
          'timeline-content timeline-content timeline-media timeline-media';
      }
    }
    .layout-header-wrapper {
      grid-area: timeline-header;
      @media (max-width: 1025px) and (min-width: 768px) {
        margin-bottom: 50px;
      }
    }
  }
  .timeline-tabs {
    gap: 20px 0;
    display: grid;
    grid-template-columns: 1fr;
    @media (min-width: 576px) {
      gap: 0 30px;
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
    .media-left & {
      @media (min-width: 576px) {
        grid-template-areas: 'tabs-body tabs-head';
      }
      @media (min-width: 768px) {
        grid-template-areas: 'tabs-body tabs-body tabs-head';
      }
    }
    .media-right & {
      @media (min-width: 576px) {
        grid-template-areas: 'tabs-head tabs-body';
      }
      @media (min-width: 768px) {
        grid-template-areas: 'tabs-head tabs-body tabs-body';
      }
    }
    .timeline-tabs-head {
      @media (min-width: 576px) {
        grid-area: tabs-head;
      }
    }
    .timeline-tabs-body {
      grid-column: span 2;
      @media (min-width: 576px) {
        grid-area: tabs-body;
      }
      .timeline-content {
        @media (min-width: 576px) {
          max-width: 490px;
          margin-inline: auto;
        }
      }
    }
  }
  .timeline-tab-button {
    --border-width: 1px;
    width: 100%;
    display: flex;
    position: relative;
    padding-block: 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    /* & > span {
      width: 100%;
    } */
    @media (min-width: 768px) {
      max-width: 395px;
    }
    @media (max-width: 767px) {
      &:first-child {
        padding-top: 0;
      }
    }
    &:not(.active) {
      opacity: 0.7;
    }
    &.active {
      /* color: var(--text-color-light-30); */
      &::after {
        background-color: var(--text-color);
      }
    }
    &::after {
      content: '';
      aspect-ratio: 1;
      min-width: 9px;
      width: 9px;
      height: 9px;
      border: 1px solid currentColor;
    }
  }
  .timeline-contentwrap {
    grid-area: timeline-content;
    .media-left & {
      @media (min-width: 768px) {
        grid-column: 2 / 5;
      }
    }
    .media-right & {
      @media (min-width: 768px) {
        grid-column: 1 / 4;
      }
    }
  }
  .timeline-mediawrap {
    width: 100%;
    display: grid;
    pointer-events: none;
    grid-area: timeline-media;
    grid-template-columns: 1fr;
    @media (max-width: 767px) {
      height: var(--mediabox-height);
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: 'image-left image-right';
    }

    & > * {
      pointer-events: auto;
    }
    .media-left & {
      & > * {
        @media (min-width: 768px) {
          grid-area: image-left;
        }
      }
    }
    .media-right & {
      & > * {
        @media (min-width: 768px) {
          grid-area: image-right;
        }
      }
    }
    .media-position-edge & {
      @media (min-width: 768px) {
        --media-offset: calc(-50vw + (100% + var(--gap)) - (var(--container-padding) * var(--padding-scale)));
        .media-left & {
          margin-right: auto;
          margin-left: var(--media-offset);
        }
        .media-right & {
          margin-left: auto;
          margin-right: var(--media-offset);
        }
      }
    }
  }
  .timeline-mediabox-wrapper {
    @media (min-width: 1200px) {
      min-width: 345px;
    }
     @media (min-width: 1441px) {
      min-width: 435px;
    }
  }
/* END_SECTION:timeline */

/* START_SECTION:video-with-overlay-text (INDEX:77) */
.video-banner {
    position: relative;
    display: block;
  }
  .floating-play-button {
    display: none;
  }
  @media (min-width: 1025px) {
    .floating-play-button {
      display: block;
      /* position: fixed; */
      position: absolute;
      cursor: none;
      transform-origin: center;
      z-index: 1;
      left: -75px;
      top: -75px;
      /* left: 0;
      right: 0; */
      width: 150px;
      height: 150px;
      &:not(.floating-play) {
        .play-video-button {
          transform: scale(0);
        }
      }
      .play-video-button {
        transition: transform 0.3s ease;
      }
    }
  }
  .video-banner-content {
    --svg-inside--size: 70px;
    position: absolute;
    inset: 0;
    @media (min-width: 768px) {
      --svg-inside--size: 100px;
      margin-block: 30px;
    }
    @media (min-width: 1200px) {
      --svg-inside--size: 140px;
      margin-block: 60px;
    }
  }

  .video-banner-content-inner {
    width: max-content;
    max-width: 100%;
    position: absolute;
    gap: 20px 50px;
    @media (min-width: 768px) {
      display: grid;
      max-width: 750px;
    }
    &:not(.play-button-pointer):not(.no-play-button) {
      .layout-header-wrapper,
      .layout-header {
        display: contents;
      }
      .layout-heading {
        grid-area: 1 / 1 / -1 / -1;
      }
      .layout-summary {
        margin: 0;
        display: flex;
        align-items: center;
      }
    }
    .layout-summary {
      max-width: 300px;
      .text-center & {
        justify-self: center;
      }
    }
    &.text-left {
      &:not(.play-button-pointer):not(.no-play-button) {
        @media (min-width: 768px) {
          grid-template-columns: var(--svg-inside--size) 1fr;
        }
        .layout-summary {
          grid-area: 2 / 2 / 2 / 2;
        }
      }
      .video-action-buttons {
        grid-area: 2 / 1 / 2 / 2;
        @media (max-width: 767px) {
          justify-content: flex-start;
        }
      }
    }
    &.text-center {
      grid-template-columns: 1fr;
      .layout-heading {
        grid-area: 1 / 1 / 2 / -1;
      }
      .layout-summary {
        margin-inline: auto;
        grid-area: 3 / 1 / 4 / -1;
      }
      .video-action-buttons {
        grid-area: 2 / 1 / 3 / -1;
        @media (max-width: 767px) {
          margin-inline: auto;
        }
      }
    }
    &.text-right {
      &:not(.play-button-pointer):not(.no-play-button) {
        @media (min-width: 768px) {
          grid-template-columns: 1fr var(--svg-inside--size);
        }
        .layout-summary {
          grid-area: 2 / 1 / 2 / 2;
        }
      }
      .layout-summary {
        margin-left: auto;
      }
      .video-action-buttons {
        grid-area: 2 / 2 / 2 / 2;
        @media (max-width: 767px) {
          justify-content: flex-end;
        }
      }
    }

    @media (max-width: 767px) {
      &.bottom-left,
      &.bottom-center,
      &.bottom-right {
        bottom: 0;
        padding: 15px;
        inset-inline: 0;
      }
    }
  }

  .video-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      color: var(--overlay-text);
    }
    @media (max-width: 767px) {
      margin-top: 16px;
    }
    .stroke-offset-path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: all 0.6s ease;
    }
    &:hover {
      .stroke-offset-path {
        stroke-dashoffset: 0;
      }
    }
  }
  @media (max-width:991px) and  (pointer:coarse) {
    .floating-play-button{
      display: none;
      justify-content: flex-start;
    }
  }
  @media (min-width:992px) and (pointer:fine){
    .floating-mobile-button{
      display: none;
      justify-content: flex-start;
    }
  }
/* END_SECTION:video-with-overlay-text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cursor (INDEX:115) */
.wrapper-cursor {
    cursor: none;
    inset: 0;
    z-index: 99;
    position: fixed;
    pointer-events: none;
    mix-blend-mode: difference;
    /* .no-js & {
      display: none;
      } */
    @media (max-width: 1024px) {
      display: none;
    }
  }
  .cursor {
    cursor: none;
    aspect-ratio: 1;
    background-color: #fff;
    border: 1px solid #fff;
    width: 24px;
    height: 24px;
    display: flex;
    position: relative;
    /* pointer-events: none; */
    transform: rotate(45deg);
    transition: width 0.3s ease, height 0.3s ease;
    &.cursor-on-link {
      width: 30px;
      height: 30px;
      background: none;
    }
  }
/* END_SNIPPET:cursor */

/* START_SNIPPET:social-icons (INDEX:173) */
.social-menu-list {
    &.list-stacked {
      flex-wrap: wrap;
      display: inline-flex;
      align-items: center;
      gap: var(--social-icons-gap, 20px);
    }
    .social-menu-item {
      .list-block & {
        + .social-menu-item {
          margin-top: 12px;
        }
      }
    }
    .social-menu-link {
      min-width: 24px;
      min-height: 24px;
      gap: 10px;
      display: flex;
      align-items: center;
      .list-stacked & {
        .has-icons & {
          justify-content: center;
        }
      }
    }
  }
/* END_SNIPPET:social-icons */