/** Shopify CDN: Minification failed

Line 277:12 Unexpected "{"
Line 277:21 Expected ":"
Line 281:12 Unexpected "{"
Line 281:21 Expected ":"
Line 285:12 Unexpected "{"
Line 285:21 Expected ":"
Line 1168:2 Unexpected "/"
Line 1228:2 Unexpected "/"
Line 1600:2 Unexpected "/"
Line 1688:2 Unexpected "/"
... and 68 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:feature-collection (INDEX:18) */
/* ============================================
   Base layout — applies at every screen size.
   Card UI comes from snippets/new-card-product.liquid
   ============================================ */
.fr-featured {
  padding: 48px 32px;
}

.fr-featured__heading {
  font-size: var(--fr-featured-heading-size, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.fr-featured__grid {
  display: grid;
  grid-template-columns: repeat(var(--fr-featured-columns, 4), minmax(0, 1fr));
  gap: 8px;
}

.fr-featured__item {
  min-width: 0;
}

.fr-featured__empty {
  font-size: var(--fr-featured-text-size, 14px);
  color: #999999;
}

/* ============================================
   Mobile — up to 749px
   ============================================ */
@media screen and (max-width: 900px) {
   .fr-featured__grid {
    grid-template-columns: repeat(var(--fr-featured-columns-mobile, 2), minmax(0, 1fr));
    gap: 8px;
  } }
@media screen and (max-width: 749px) {
  .fr-featured { padding: 22px 6px; }
  /* .fr-featured__grid {
    grid-template-columns: repeat(var(--fr-featured-columns-mobile, 2), minmax(0, 1fr));
    gap: 8px;
  } */

  /* Swipe layout — one row, exactly two cards per view. No padding
     on the scroll container: it would scroll with the cards and show
     slices of the neighbouring cards at the edges. */
  .fr-featured__grid--swipe-mobile {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr-featured__grid--swipe-mobile::-webkit-scrollbar {
    display: none;
  }
  .fr-featured__grid--swipe-mobile .fr-featured__item {
    flex: 0 0 calc((100% - 8px) / 2);
    scroll-snap-align: start;
  }
}

/* ============================================
   Ultra-wide — 2000px and up (e.g. 2400px displays)
   Note: this section uses a 24px heading here — larger than
   the 22px convention used on the other sections — per client
   request for Featured Collection specifically.
   ============================================ */
@media screen and (min-width: 2000px) {
  .fr-featured {
    padding: clamp(48px, 4vw, 96px) clamp(32px, 5vw, 96px);
  }

  .fr-featured__heading {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .fr-featured__grid {
    gap: 32px;
  }
}
/* END_SECTION:feature-collection */

/* START_SECTION:new-craftsmanship-works (INDEX:52) */
.craft {
    position: relative;
    padding: 0;
  }
  .craft__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--craft-ratio-mobile);
    overflow: hidden;
    background: #111;
  }
  .craft__video,
  .craft__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .craft__video--mobile {
    display: none;
  }
  .craft__overlay {
    position: absolute;
    inset: 0;
    background: var(--craft-overlay, #000);
    opacity: var(--craft-overlay-opacity, 0);
    pointer-events: none;
  }
  .craft__content {
    position: static;
  }
  .craft__content-inner {
    display: block;
  }
  /* Card */
  .craft__card {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    background: var(--craft-card-bg, #fff);
    color: var(--craft-text, #1a1a1a);
    padding: 2.4rem;
    box-sizing: border-box;
  }
  .craft__card > .craft__label,
  .craft__card > .craft__body,
  .craft__card > .craft__stats,
  .craft__card > .craft__button {
    position: relative;
    float: none;
  }
@media(min-width: 750px){
    .craft__card {
        margin: 40px 0;
    }
  }
  .craft__label {
    margin: 0 0 1.2rem;
    font-size: var(--craft-title-size-desktop, 11px) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--craft-label, #8a8a8a);
  }
  .craft__body {
    margin: 0 0 2rem;
    font-size: var(--craft-body-size-desktop, 15px) !important;
    line-height: 1.6;
  }
  .craft__body p {
    margin: 0 0 1rem;
  }
  .craft__body p:last-child {
    margin-bottom: 0;
  }
  .craft__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-bottom: 2.4rem;
  }
  .craft__stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .craft__stat-value {
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
  }
  .craft__stat-label {
    font-size: 1.2rem;
    color: var(--craft-label, #8a8a8a);
  }
  .craft__button {
    display: block;
    width: 100%;
    padding: 1.4rem 2rem;
    background: var(--craft-btn-bg, #2b3245);
    color: var(--craft-btn-text, #fff);
    font-size: var(--craft-button-size-desktop, 12px) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
  }
  .craft__button:hover {
    opacity: 0.88;
  }
  /* Desktop: floating card over full-bleed video */
  @media screen and (min-width: 750px) {
    .craft {
      padding: var(--craft-pad-y) 0;
    }
    .craft__media {
      aspect-ratio: var(--craft-ratio-desktop);
    }
    .craft__video--desktop {
      display: block;
    }
    .craft__content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
    }
    .craft__content-inner {
      display: flex;
      width: 100%;
      height: 100%;
      padding-top: 4rem;
      padding-bottom: 4rem;
      justify-content: var(--craft-justify, flex-start);
      align-items: var(--craft-align, center);
    }
    .craft__content-inner.page-width {
        padding: 0 3rem !important;
    }
    .craft__card {
      width: var(--craft-card-width, 380px);
      max-width: 100%;
      padding: 3rem;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.18);
    }
  }
  /* Mobile: video on top, card below */
  @media screen and (max-width: 749px) {
    .craft__video--mobile {
      display: block;
    }
    .craft__video--desktop {
      display: none;
    }
    .craft__content-inner {
      padding-left: 0;
      padding-right: 0;
    }
    .craft__card {
      padding: 2.4rem 1.6rem;
    }

    #Craft-{{ section.id }} .craft__label {
      font-size: var(--craft-title-size-mobile, 11px) !important;
    }

    #Craft-{{ section.id }} .craft__body {
      font-size: var(--craft-body-size-mobile, 14px) !important;
    }

    #Craft-{{ section.id }} .craft__button {
      font-size: var(--craft-button-size-mobile, 12px) !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .craft__button {
      transition: none;
    }
  }

  @media screen and (min-width: 749px) and (max-width: 930px) {
  .craft__media {
        aspect-ratio: 3 / 2.2 !important;
    } }
/* END_SECTION:new-craftsmanship-works */

/* START_SECTION:new-editorial-grid (INDEX:54) */
@media screen and (max-width: 749px) {
  .editorial__feature-title {
    margin-bottom: 0.6rem;
    line-height: 1.25;
  }
}
  /* =========================================================

     EDITORIAL SECTION

     ========================================================= */



  .editorial {

    padding: var(--ed-pad-y-mobile) 0;

    width: 100%;

  }



  .editorial__inner {

    width: 100%;

  }



  .editorial__features,

  .editorial__cards {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--ed-gap);

  }



  .editorial__features {

    margin-bottom: var(--ed-gap);

  }





  /* =========================================================

     FEATURE TILES

     Text is positioned OVER the image

     ========================================================= */



  .editorial__feature {

    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    text-decoration: none;

    color: var(--ed-feat-text, #fff);



    /* Important for mobile positioning */

    isolation: isolate;

  }



  .editorial__feature-media {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: var(--ed-feat-ratio-m);

    overflow: hidden;

    background: #efece8;

  }



  .editorial__feature-media img,

  .editorial__feature-media svg {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

  }



  /* Dark gradient over image */

  .editorial__feature-media::after {

    content: '';

    position: absolute;

    z-index: 1;

    inset: 0;



    background: linear-gradient(

      to top,

      var(--ed-overlay, #000) 0%,

      rgba(0, 0, 0, 0.35) 25%,

      transparent 65%

    );



    opacity: var(--ed-overlay-opacity, 0.45);

    pointer-events: none;

  }





  /* =========================================================

     FEATURE CONTENT OVER IMAGE

     ========================================================= */



  .editorial__feature-content {

    position: absolute;

    z-index: 3;



    left: 0;

    right: 0;

    bottom: 0;



    width: 100%;

    box-sizing: border-box;



    padding: 2rem 1.8rem 1.8rem;



    color: var(--ed-feat-text, #fff);



    /* Makes sure long text doesn't push outside */

    max-height: 75%;

    overflow: hidden;

  }



  .editorial__feature-title {

    margin: 0 0 0.7rem;



    font-size: var(--ed-feature-title-size-m, 14px);

    font-weight: 500;

    line-height: 1.3;



    color: inherit;

  }



  .editorial__feature-body {

    margin: 0 0 1rem;



    font-size: var(--ed-feature-body-size-m, 12px);

    line-height: 1.4;



    max-width: 52ch;



    color: inherit;

    opacity: 0.95;

  }





  /* =========================================================

     FEATURE LINK

     ========================================================= */



  .editorial__link {

    display: inline-block;



    font-size: var(--ed-feature-link-size-m, 12px);

    line-height: 1.2;

    letter-spacing: 0.12em;

    text-transform: uppercase;



    text-decoration: none;



    color: var(--ed-card-link, #1a1a1a);



    border-bottom: 1px solid currentColor;



    padding-bottom: 0.3rem;

  }



  .editorial__link--light {

    color: var(--ed-feat-text, #fff);

  }





  /* =========================================================

     SMALL CARDS

     Text stays BELOW image

     ========================================================= */



  .editorial__card {

    min-width: 0;

  }



  .editorial__card-media {

    display: block;

    width: 100%;



    aspect-ratio: var(--ed-card-ratio-m);



    overflow: hidden;

    background: #efece8;

  }



  .editorial__card-media img,

  .editorial__card-media svg {

    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;

  }



  .editorial__card-content {

    padding: 1.4rem 10px 0;

  }



  .editorial__card-title {

    margin: 0 0 0.8rem;

    font-size: 1.6rem;

    font-weight: 500;



    color: var(--ed-card-title, #1a1a1a);

  }



  .editorial__card-body {

    margin: 0 0 1.2rem;



    font-size: 1.3rem;

    line-height: 1.55;



    color: var(--ed-card-text, #666);

  }





  /* =========================================================

     MOBILE

     ========================================================= */



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



    .editorial__card-content {

    padding: 15px;

}



    .editorial {

      padding-top: var(--ed-pad-y-mobile);

      padding-bottom: var(--ed-pad-y-mobile);

    }



    /*

      Each feature gets its own independent image.

      The text is absolutely anchored to that image.

    */

    .editorial__feature {

      position: relative;

      height: auto;

      min-height: 0;

      overflow: hidden;

    }



    .editorial__feature-media {

      position: relative;



      width: 100%;

      height: auto;



      aspect-ratio: var(--ed-feat-ratio-m);



      overflow: hidden;

    }



    /*

      Keep image completely inside its own feature.

    */

    .editorial__feature-media img {

      position: absolute;

      inset: 0;



      width: 100%;

      height: 100%;



      object-fit: cover;

    }



    /*

      Text is attached to the bottom of THIS image only.

      It will not overlap the next feature.

    */

    .editorial__feature-content {

      position: absolute;



      left: 0;

      right: 0;

      bottom: 0;



      width: 100%;



      padding: 4rem 1.6rem 1.6rem;



      box-sizing: border-box;



      max-height: 70%;

      overflow: hidden;

    }



    .editorial__feature-title {

      margin-bottom: 0.6rem;



      font-size: var(--ed-feature-title-size-m, 14px);

      line-height: 1.25;

    }



    .editorial__feature-body {

      margin-bottom: 0.9rem;



      font-size: var(--ed-feature-body-size-m, 12px);

      line-height: 1.35;



      max-width: 100%;

    }



    .editorial__feature-content .editorial__link {

      font-size: var(--ed-feature-link-size-m, 12px);

      letter-spacing: 0.1em;

    }



    /*

      Keep the two feature images separated.

    */

    .editorial__features {

      grid-template-columns: 1fr;

      gap: var(--ed-gap);

    }



    /*

      Cards remain normal cards below the feature section.

    */

    .editorial__cards {

      grid-template-columns: 1fr;

      gap: var(--ed-gap);

    }

  }





  /* =========================================================

     DESKTOP

     ========================================================= */



  @media screen and (min-width: 750px) {



    .editorial {

      padding: var(--ed-pad-y) 0;

    }



    .editorial__features {

      grid-template-columns:

        repeat(var(--ed-feat-cols, 2), minmax(0, 1fr));

    }



    .editorial__cards {

      grid-template-columns:

        repeat(var(--ed-card-cols, 3), minmax(0, 1fr));

    }



    .editorial__feature {

      position: relative;

      overflow: hidden;

    }



    .editorial__feature-media {

      aspect-ratio: var(--ed-feat-ratio-d);

    }



    .editorial__feature-content {

      padding: 3rem;

    }



    .editorial__feature-title {

      font-size: var(--ed-feature-title-size-d, 22px);

    }



    .editorial__feature-body {

      font-size: var(--ed-feature-body-size-d, 16px);

    }



    .editorial__link {

      font-size: var(--ed-feature-link-size-d, 14px);

    }



    .editorial__card-media {

      aspect-ratio: var(--ed-card-ratio-d);

    }

  }





  /* =========================================================

     VERY SMALL PHONES

     ========================================================= */



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



    .editorial__feature-content {

      padding: 3.5rem 1.3rem 1.3rem;

      max-height: 75%;

    }



    .editorial__feature-title {

      font-size: var(--ed-feature-title-size-m, 14px);

    }



    .editorial__feature-body {

      font-size: var(--ed-feature-body-size-m, 12px);

      line-height: 1.3;

      margin-bottom: 0.7rem;

    }



    .editorial__feature-content .editorial__link {

      font-size: var(--ed-feature-link-size-m, 12px);

    }

  }
/* END_SECTION:new-editorial-grid */

/* START_SECTION:new-hero-banner (INDEX:56) */
.hero-video-banner {

    position: relative;

    display: grid;

    min-height: var(--hero-min-height-mobile);

    overflow: hidden;

    contain: layout style paint;

  }



  @media screen and (min-width: 750px) {

    .hero-video-banner {

      min-height: var(--hero-min-height);

    }

  }



  .hero-video-banner__media {

    position: absolute;

    inset: 0;

    z-index: 0;

  }



  .hero-video-banner__video,

  .hero-video-banner__image,

  .hero-video-banner__poster,

  .hero-video-banner__placeholder {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

  }



  .hero-video-banner__video video,

  .hero-video-banner__image img,

  .hero-video-banner__poster img,

  .hero-video-banner__placeholder-svg {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

  }



  /\* ---------- Video: desktop / mobile switching ---------- \*/

  .hero-video-banner__video {

    z-index: 1;

  }



  .hero-video-banner__poster {

    display: none;

    z-index: 0;

  }



  .hero-video-banner__video--desktop {

    display: none;

  }



  .hero-video-banner__video--mobile,

  .hero-video-banner__video--all {

    display: block;

  }



  @media screen and (min-width: 750px) {

    .hero-video-banner__video--desktop,

    .hero-video-banner__video--all {

      display: block;

    }



    .hero-video-banner__video--mobile:not(.hero-video-banner__video--all) {

      display: none;

    }

  }



  /\* ---------- Image: desktop / mobile switching ---------- \*/

  .hero-video-banner__image {

    z-index: 1;

  }



  .hero-video-banner__image--desktop {

    display: none;

  }



  .hero-video-banner__image--mobile,

  .hero-video-banner__image--all {

    display: block;

  }



  @media screen and (min-width: 750px) {

    .hero-video-banner__image--desktop,

    .hero-video-banner__image--all {

      display: block;

    }



    .hero-video-banner__image--mobile:not(.hero-video-banner__image--all) {

      display: none;

    }

  }



  .hero-video-banner__overlay {

     position: absolute;

  inset: 0;

  background-color: rgba(0, 0, 0, var(--hero-overlay, 0.25));

  pointer-events: none;

  z-index: 2; 

  position: absolute;

  inset: 0;

  z-index: 1;

  background-color: #000;

  pointer-events: none;

  }



  .hero-video-banner__inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: inherit;

    padding-top: var(--hero-content-padding-y-mobile);

    padding-bottom: var(--hero-content-padding-y-mobile);

    box-sizing: border-box;

  }



  .hero-video-banner__container {

    display: flex;

    flex: 1;

    width: 100%;

    padding-left: var(--hero-content-padding-x-mobile);

    padding-right: var(--hero-content-padding-x-mobile);

    box-sizing: border-box;

  }



  @media screen and (min-width: 750px) {

    .hero-video-banner__inner {

      padding-top: var(--hero-content-padding-y);

      padding-bottom: var(--hero-content-padding-y);

    }



    .hero-video-banner__container {

      padding-left: var(--hero-content-padding-x);

      padding-right: var(--hero-content-padding-x);

    }

  }



  .hero-video-banner--top-left .hero-video-banner__container {

    align-items: flex-start;

    justify-content: flex-start;

  }



  .hero-video-banner--top-right .hero-video-banner__container {

    align-items: flex-start;

    justify-content: flex-end;

  }



  .hero-video-banner--bottom-left .hero-video-banner__container {

    align-items: flex-end;

    justify-content: flex-start;

    padding-left: 10px;

  }



  .hero-video-banner--bottom-right .hero-video-banner__container {

    align-items: flex-end;

    justify-content: flex-end;

  }



  .hero-video-banner--center .hero-video-banner__container {

    align-items: center;

    justify-content: center;

  }



  .hero-video-banner__content {

    max-width: var(--hero-content-max-width);

    color: #fff;

    text-align: left;

  }



  .hero-video-banner--center .hero-video-banner__content {

    text-align: center;

  }



  .hero-video-banner--top-right .hero-video-banner__content,

  .hero-video-banner--bottom-right .hero-video-banner__content {

    text-align: right;

  }



  .hero-video-banner__subheading {

    margin: 0 0 0.75rem;

    font-size: var(--hero-subheading-size-mobile);

    font-weight: 400;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    line-height: 1.4;

  }



  .hero-video-banner__heading {

    margin: 0 0 1rem;

    font-size: var(--hero-heading-size-mobile);

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: 0.01em;

    color: #ffffff;

  }



  .hero-video-banner__body {

    margin: 0 0 1.5rem;

    font-size: var(--hero-body-size-mobile);

    line-height: 1.6;

    opacity: 0.95;

  }



  .hero-video-banner__body p {

    margin: 0;

  }



  .hero-video-banner__button {

    display: inline-block;

    padding: 0.9rem 2rem;

    font-size: var(--hero-button-size-mobile);

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-decoration: none;

    color: #111;

    background: #fff;

    border: 1px solid #fff;

    transition: opacity 0.2s ease;

  }



  .hero-video-banner__button:hover {

    opacity: 0.88;

  }



  .hero-video-banner__button[aria-disabled='true'] {

    pointer-events: none;

    opacity: 0.6;

  }



  @media screen and (min-width: 750px) {

    .hero-video-banner__content {

      padding: 3rem;

    }



    .hero-video-banner__subheading {

      font-size: var(--hero-subheading-size);

    }



    .hero-video-banner__heading {

      font-size: var(--hero-heading-size);

    }



    .hero-video-banner__body {

      font-size: var(--hero-body-size);

    }



    .hero-video-banner__button {

      font-size: var(--hero-button-size);

    }

  }



  /\* Reduced motion: hide video, show poster (image mode unaffected) \*/

  @media (prefers-reduced-motion: reduce) {

    .hero-video-banner__video {

      display: none !important;

    }



    .hero-video-banner__poster--mobile,

    .hero-video-banner__poster--all {

      display: block !important;

    }

  }



  @media (prefers-reduced-motion: reduce) and (min-width: 750px) {

    .hero-video-banner__poster--mobile:not(.hero-video-banner__poster--all) {

      display: none !important;

    }



    .hero-video-banner__poster--desktop,

    .hero-video-banner__poster--all {

      display: block !important;

    }

  }





  @media (max-width: 768px) {

    .hero-video-banner__subheading {

  font-size: var(--hero-subheading-size-mobile);

}



.hero-video-banner__heading {

  font-size: var(--hero-heading-size-mobile);

}



.hero-video-banner__body {

  font-size: var(--hero-body-size-mobile);

}



.hero-video-banner__button {

  font-size: var(--hero-button-size-mobile);

}

  }







  /\* #HeroVideoBanner-{{ section.id }} .hero-video-banner__overlay {

    background: rgba(0, 0, 0, {{ section.settings.overlay_opacity | divided_by: 100.0 }}) !important;

  } \*/



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

    #HeroVideoBanner-{{ section.id }} .hero-video-banner__subheading {

      font-size: {{ section.settings.subheading_size_mobile }}px !important;

    }



    #HeroVideoBanner-{{ section.id }} .hero-video-banner__heading {

      font-size: {{ section.settings.heading_size_mobile }}px !important;

    }



    #HeroVideoBanner-{{ section.id }} .hero-video-banner__body,

    #HeroVideoBanner-{{ section.id }} .hero-video-banner__body p,

    #HeroVideoBanner-{{ section.id }} .hero-video-banner__body li {

      font-size: {{ section.settings.body_size_mobile }}px !important;

    }



    #HeroVideoBanner-{{ section.id }} .hero-video-banner__button {

      font-size: {{ section.settings.button_size_mobile }}px !important;

    }

  }



  @media screen and (min-width: 750px) {

    #HeroVideoBanner-{{ section.id }} .hero-video-banner__overlay {

      background: rgba(0, 0, 0, {{ section.settings.overlay_opacity | divided_by: 100.0 }}) !important;

    }

  }
/* END_SECTION:new-hero-banner */

/* START_SECTION:new-media-product-split (INDEX:58) */
/* ================================================================
     MAIN SECTION
     ================================================================ */
  
  .media-products-split {
    background: #fff;
  }
  
  
  /* ================================================================
     WRAPPER
     ================================================================ */
  
  .media-products-split__wrapper {
    padding-top: var(--mps-gap);
    padding-bottom: var(--mps-gap);
  }
  
  
  /* ================================================================
     GRID
     ================================================================ */
  
  .media-products-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mps-gap);
    background: #fff;
  }
  
  
  /* ================================================================
     MEDIA PANEL
     ================================================================ */
  
  /*
   * width: 100% is required: with only aspect-ratio + min-height, a
   * min-height taller than the ratio allows (e.g. Square) is converted
   * into a min-width, widening the panel and the whole grid past the
   * screen. With a fixed width, min-height just makes it taller.
   */
  .media-products-split__media-panel {
    position: relative;
    overflow: visible;
    contain: none;

    width: 100%;
  
    aspect-ratio: var(--mps-media-aspect-mobile);
  
    min-height: var(--mps-media-min-height-mobile);
  
    background: #000;
  }
  
  
  /* ================================================================
     MEDIA LINK
     ================================================================ */
  
  .media-products-split__media-link {
    display: block;
  
    position: absolute;
    inset: 0;
  
    width: 100%;
    height: 100%;
  
    color: inherit;
    text-decoration: none;
  }
  
  
  /* ================================================================
     MEDIA ELEMENTS
     ================================================================ */
  
  .media-products-split__media,
  .media-products-split__video,
  .media-products-split__picture,
  .media-products-split__poster,
  .media-products-split__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  
  /* ================================================================
     VIDEO / IMAGE
     ================================================================ */
  
  .media-products-split__video video,
  .media-products-split__picture img,
  .media-products-split__poster img,
  .media-products-split__placeholder-svg {
    display: block;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
    object-position: center;
  }
  
  
  /* ================================================================
     VIDEO
     ================================================================ */
  
  .media-products-split__video {
    z-index: 1;
  }
  
  .media-products-split__video--desktop {
    display: none;
  }
  
  .media-products-split__video--mobile,
  .media-products-split__video--all {
    display: block;
  }
  
  
  /* ================================================================
     POSTER
     ================================================================ */
  
  .media-products-split__picture--poster,
  .media-products-split__poster {
    display: none;
    z-index: 0;
  }
  
  
  /* ================================================================
     CTA OVERLAY
     ================================================================ */
  
  .media-products-split__overlay {
    position: absolute;
  
    inset: 0;
  
    z-index: 20;
  
    pointer-events: none;
  }
  
  
  /* ================================================================
     CTA
     ================================================================ */
  
  .media-products-split__cta {
    position: absolute;
  
    left: var(--mps-link-padding-x-mobile);
    bottom: var(--mps-link-padding-y-mobile);
  
    z-index: 30;
  
    font-size: var(--mps-link-size-mobile);
    font-weight: 400;
  
    letter-spacing: 0.15em;
  
    text-transform: uppercase;
  
    color: #fff;
  
    text-decoration: underline;
    text-underline-offset: 0.35em;
  
    white-space: nowrap;
  
    /*
     * Helps make the transition between absolute/fixed
     * positioning feel smooth.
     */
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  
    will-change: transform;
  }
  
  
  /* ================================================================
     PRODUCTS PANEL
     ================================================================ */
  
  .media-products-split__products-panel {
    overflow: hidden;
  
    min-height: 0;
  }
  
  
  /* ================================================================
     PRODUCTS TRACK
     ================================================================ */
  
  .media-products-split__products-track {
    display: flex;
  
    gap: var(--mps-gap);
  
    overflow-x: auto;
  
    scroll-snap-type: x mandatory;
  
    -webkit-overflow-scrolling: touch;
  
    scrollbar-width: none;
  
    background: #fff;
  }
  
  
  .media-products-split__products-track::-webkit-scrollbar {
    display: none;
  }
  
  
  /* ================================================================
     PRODUCT
     ================================================================ */
  
  /*
   * Card UI comes from snippets/new-card-product.liquid; this is only
   * the slot it sits in. Mobile: two cards per view in the slider.
   */
  .media-products-split__product {
    position: relative;

    flex: 0 0 calc((100% - var(--mps-gap)) / 2);

    min-width: 0;

    scroll-snap-align: start;
  }


  /* Below 750px the card stacks content under the image; keep it off the screen edge */
  @media (max-width: 749px) {

    .media-products-split__product .new-card-product__dots,
    .media-products-split__product .new-card-product__overlay {
      padding-left: 8px;
      padding-right: 8px;
    }

  }
  
  
  /* ================================================================
     DESKTOP
     ================================================================ */
  
  @media screen and (min-width: 750px) {
  
    .media-products-split__grid {
      grid-template-columns:
        var(--mps-left-ratio)
        var(--mps-right-ratio);
  
      align-items: stretch;
  
      height: auto;
  
      max-height: var(--mps-media-max-height);
    }
  
  
    .media-products-split__media-panel {
      aspect-ratio: unset;
  
      height: 100%;
  
      min-height: 0;
  
      max-height: var(--mps-media-max-height);
    }
  
  
    /* --------------------------------------------------------------
       DESKTOP CTA
       -------------------------------------------------------------- */
  
    .media-products-split__cta {
      left: var(--mps-link-padding-x);
      bottom: var(--mps-link-padding-y);
  
      font-size: var(--mps-link-size);
    }
  
  
    /* --------------------------------------------------------------
       DESKTOP VIDEO
       -------------------------------------------------------------- */
  
    .media-products-split__video--desktop,
    .media-products-split__video--all {
      display: block;
    }
  
  
    .media-products-split__video--mobile:not(
      .media-products-split__video--all
    ) {
      display: none;
    }
  
  
    /* --------------------------------------------------------------
       PRODUCTS
       -------------------------------------------------------------- */
  
    .media-products-split__products-panel {
      height: auto;
  
      min-height: 0;
  
      max-height: var(--mps-media-max-height);
    }
  
  
    .media-products-split__products-track {
      display: grid;
  
      grid-template-columns: 1fr 1fr;
  
      grid-template-rows: auto auto;
  
      gap: var(--mps-gap);
  
      overflow: hidden;
  
      height: auto;
    }
  
  
    .media-products-split__product {
      flex: unset;
  
      scroll-snap-align: unset;
  
      width: 100%;
  
      height: auto;
  
      min-height: 0;
  
      aspect-ratio: var(--mps-aspect-product);
  
      max-height: var(--mps-product-tile-max-height);

      background: var(--mps-product-bg);
    }


    /*
     * The tile above sets the size (aspect ratio capped by the max
     * height setting), so the card fills it instead of using its own
     * aspect ratio.
     */
    .media-products-split__product .new-card-product,
    .media-products-split__product .new-card-product__frame {
      height: 100%;
    }

    .media-products-split__product .new-card-product__frame {
      aspect-ratio: auto;
    }
  
  }
  
  
  /* ================================================================
     REDUCED MOTION
     ================================================================ */
  
  @media (prefers-reduced-motion: reduce) {
  
    .media-products-split__video {
      display: none !important;
    }
  
    .media-products-split__picture--poster,
    .media-products-split__poster--mobile,
    .media-products-split__poster--all {
      display: block !important;
    }
  
  }
  
  
  /* ================================================================
     REDUCED MOTION — DESKTOP
     ================================================================ */
  
  @media (prefers-reduced-motion: reduce) and (min-width: 750px) {
  
    .media-products-split__poster--mobile:not(
      .media-products-split__poster--all
    ) {
      display: none !important;
    }
  
    .media-products-split__poster--desktop,
    .media-products-split__poster--all {
      display: block !important;
    }
  
  }
  
  
  /* ================================================================
     MOBILE
     ================================================================ */
  
  @media (max-width: 749px) {
  
    .media-products-split__wrapper.page-width {
      padding: 0;
    }
  
  }
  
  
  /* ================================================================
     MOBILE CTA SAFETY
     ================================================================ */
  
  @media (max-width: 749px) {
  
    .media-products-split__cta {
      left: var(--mps-link-padding-x-mobile);
      bottom: var(--mps-link-padding-y-mobile);
  
      font-size: var(--mps-link-size-mobile);
    }
  
  }
/* END_SECTION:new-media-product-split */

/* START_SECTION:new-newsletter (INDEX:59) */
.nl {
    background: var(--nl-bg, #ece6e1);
    padding: var(--nl-pad-y-mobile) 0;
  }

  .nl__inner {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .nl__heading {
    margin: 0 0 1rem;
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--nl-heading, #1a1a1a);
  }

  .nl__subtext {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--nl-text, #333);
  }

  .nl__disclaimer {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--nl-muted, #9a9a9a);
  }

  .nl__disclaimer a {
    color: inherit;
    text-decoration: underline;
  }

  /* Form */
  .nl__form {
    margin: 0;
  }

  .nl__field {
    display: flex;
    width: 100%;
  }

  .nl__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 4.6rem;
    padding: 0 1.4rem;
    border: 1px solid var(--nl-input-border, #d8d2cc);
    border-right: none;
    background: var(--nl-input-bg, #ffffff);
    color: var(--nl-input-text, #1a1a1a);
    font-size: 1.4rem;
    box-sizing: border-box;
  }

  .nl__input::placeholder {
    color: #9a9a9a;
  }

  .nl__input:focus {
    outline: none;
    border-color: var(--nl-btn-bg, #2b3038);
  }

  .nl__button {
    flex: 0 0 auto;
    height: 4.6rem;
    padding: 0 2rem;
    border: none;
    background: var(--nl-btn-bg, #2b3038);
    color: var(--nl-btn-text, #ffffff);
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .nl__button:hover {
    opacity: 0.9;
  }

  .nl__message {
    margin: 0;
    font-size: 1.4rem;
  }

  .nl__message--success {
    color: #1a7f4b;
  }

  .nl__message--error {
    color: #c0392b;
  }

  .nl__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Desktop: copy left, form right */
  @media screen and (min-width: 750px) {
    .nl {
      padding: var(--nl-pad-y) 0;
    }
    .nl__inner.page-width {
        padding: 0 3rem !important;
    }

    .nl__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 4rem;
    }

    .nl__content {
      flex: 1 1 auto;
      max-width: 60%;
    }

    .nl__form-wrap {
      flex: 0 0 auto;
    }

    .nl__input {
      width: 22rem;
    }
  }
/* END_SECTION:new-newsletter */

/* START_SECTION:new-press-logo-slider (INDEX:60) */
.press-logo-slider {
    background: #fff;
    padding: var(--pls-section-padding-y-mobile) 0;
  }

  .press-logo-slider__wrapper {
    text-align: center;
  }

  .press-logo-slider__intro {
    margin: 0 0 3rem;
    font-size: var(--pls-intro-size-mobile);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #111;
  }

  .press-logo-slider__track {
    position: relative;
    width: 100%;
  }

  .press-logo-slider__track--fade::before,
  .press-logo-slider__track--fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--pls-fade-width);
    z-index: 2;
    pointer-events: none;
  }

  .press-logo-slider__track--fade::before {
    left: 0;
    background: linear-gradient(to right, var(--pls-fade-color) 0%, transparent 100%);
  }

  .press-logo-slider__track--fade::after {
    right: 0;
    background: linear-gradient(to left, var(--pls-fade-color) 0%, transparent 100%);
  }

  .press-logo-slider__marquee {
    overflow: hidden;
    width: 100%;
  }

  .press-logo-slider__lane {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    will-change: transform;
    animation: pls-marquee var(--pls-marquee-duration, 30s) linear infinite;
    animation-direction: var(--pls-marquee-direction, normal);
  }

  .press-logo-slider__marquee--pause:hover .press-logo-slider__lane {
    animation-play-state: paused;
  }

  .press-logo-slider__item {
    flex: 0 0 auto;
    margin-right: var(--pls-gap);
  }

  @keyframes pls-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .press-logo-slider__lane {
      animation: none;
    }
  }

  .press-logo-slider__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: var(--pls-logo-height);
    padding: 0 0.5rem;
    text-decoration: none;
  }

  .press-logo-slider__logo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--pls-logo-height);
    min-height: var(--pls-logo-height);
    object-fit: contain;
    object-position: center;
    display: block;
  }

  .press-logo-slider__logo--grayscale {
    filter: grayscale(100%);
  }

  .press-logo-slider__quote {
    margin: 3rem 0 0;
    font-size: var(--pls-quote-size-mobile);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #111;
  }

  .press-logo-slider__quote em {
    font-style: italic;
  }

  .press-logo-slider__quote-source {
    font-style: normal;
  }

  @media screen and (min-width: 750px) {
    .press-logo-slider__wrapper.page-width{
      padding: 0 25rem !important;
    }
    .press-logo-slider {
      padding: var(--pls-section-padding-y) 0;
    }

    .press-logo-slider__intro {
      font-size: var(--pls-intro-size);
    }

    .press-logo-slider__quote {
      font-size: var(--pls-quote-size);
    }
  }
/* END_SECTION:new-press-logo-slider */

/* START_SECTION:new-proud-to-share (INDEX:61) */
.footer-details {
  max-width: 600px;
  margin: 40px auto 0;
  color: black;
}

.pts__accordion {
  /* border-top: 1px solid rgba(0, 0, 0, 0.15); */
}

.pts__accordion-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.6rem 0;
  cursor: pointer;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  color: black;
}

.pts__accordion-summary::-webkit-details-marker {
  display: none;
}

.pts__accordion-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pts__accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.pts__accordion[open] .pts__accordion-icon {
  transform: rotate(180deg);
}

.pts__accordion-content {
  padding: 0 0 2rem;
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: center;
  color: var(--pts-text, #444);
}

.pts__accordion-content p {
  margin: 0 0 1rem;
}

.pts__accordion-content p:last-child {
  margin-bottom: 0;
}

.pts__details-title {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--pts-heading, #1a1a1a);
}

.pts__details-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pts-clamp, 4);
  line-clamp: var(--pts-clamp, 4);
  overflow: hidden;
}

.pts__details.is-expanded .pts__details-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.pts__read-more {
  display: inline-block;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pts__read-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

  .pts {
    padding: var(--pts-pad-y-mobile) 0;
  }

  .pts__heading {
    margin: 0 0 3rem;
    text-align: center;
    font-size: var(--pts-heading-size-m, 18px);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pts-heading, #1a1a1a);
  }

  .pts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pts-gap);
    align-items: start;
  }

  .pts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    gap: 1.6rem;
  }

  .pts__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--pts-logo-height, 70px);
  }

  .pts__logo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--pts-logo-height, 70px);
    object-fit: contain;
    display: block;
  }

  .pts__caption {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--pts-text, #444);
  }

  @media screen and (min-width: 750px) {
    .pts__inner.page-width {
        max-width: 900px;
    }
    .pts {
      padding: var(--pts-pad-y) 0;
    }

    .pts__heading {
      margin-bottom: 4rem;
      font-size: var(--pts-heading-size, 18px);
    }

    .pts__grid {
      grid-template-columns: repeat(var(--pts-cols, 3), 1fr);
    }
  }
/* END_SECTION:new-proud-to-share */

/* START_SECTION:new-split-media-grid (INDEX:62) */
/* ================================================================

   SECTION

   ================================================================ */

.split-media-grid {

  background: #fff;

}

/* ================================================================

   WRAPPER

   ================================================================ */

.split-media-grid__wrapper {

  padding-top: var(--smg-gap);

  padding-bottom: var(--smg-gap);

}

/* ================================================================

   GRID

   ================================================================ */

.split-media-grid__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--smg-gap);

  background: #fff;

}

/* ================================================================

   TILE

   ================================================================ */

.split-media-grid__tile {

  position: relative;

  /*

   * IMPORTANT:

   * Must be visible so the CTA can temporarily use

   * position: fixed without being clipped.

   */

  overflow: visible;

  contain: none;

  min-height: var(--smg-side-min-height-mobile);

}

/* ================================================================

   TILE LINK

   ================================================================ */

.split-media-grid__tile-link {

  display: block;

  position: relative;

  width: 100%;

  height: 100%;

  min-height: inherit;

  color: inherit;

  text-decoration: none;

}

/* ================================================================

   MAIN TILE

   ================================================================ */

.split-media-grid__tile--main {

  min-height: var(--smg-main-min-height-mobile);

}

.split-media-grid__tile--main

.split-media-grid__tile-link {

  min-height: var(--smg-main-min-height-mobile);

}

/* ================================================================

   MEDIA

   ================================================================ */

.split-media-grid__media,

.split-media-grid__video,

.split-media-grid__picture,

.split-media-grid__poster,

.split-media-grid__placeholder {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}

/*

 * Only the actual media is clipped.

 * This allows the CTA to escape while fixed.

 */

.split-media-grid__media {

  overflow: hidden;

}

/* ================================================================

   IMAGES / VIDEO

   ================================================================ */

.split-media-grid__video video,

.split-media-grid__img,

.split-media-grid__picture img,

.split-media-grid__poster img,

.split-media-grid__placeholder-svg {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}

/* ================================================================

   VIDEO

   ================================================================ */

.split-media-grid__video {

  z-index: 1;

}

.split-media-grid__video--desktop {

  display: none;

}

.split-media-grid__video--mobile,

.split-media-grid__video--all {

  display: block;

}

/* ================================================================

   POSTER

   ================================================================ */

.split-media-grid__picture--poster {

  display: none;

  z-index: 0;

}

.split-media-grid__poster {

  display: none;

  z-index: 0;

}

/* ================================================================

   OVERLAY

   ================================================================ */

.split-media-grid__overlay {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

}

/* ================================================================

   CENTER CONTENT

   ================================================================ */

.split-media-grid__center {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: calc(100% - 3rem);

  text-align: center;

  color: #fff;

}

/* ================================================================

   HEADING

   ================================================================ */

.split-media-grid__heading {

  margin: 0;

  font-size: var(--smg-heading-size-mobile);

  font-weight: 400;

  letter-spacing: 0.08em;

  line-height: 1.1;

  text-transform: uppercase;

}

/* ================================================================

   SUBHEADING

   ================================================================ */

.split-media-grid__subheading {

  margin: 0.5rem 0 0;

  font-size: var(--smg-subheading-size-mobile);

  font-weight: 400;

  letter-spacing: 0.35em;

  line-height: 1.4;

  text-transform: uppercase;

}

/* ================================================================

   CTA

   ================================================================ */

.split-media-grid__cta {

  position: absolute;

  bottom: var(--smg-link-padding-y-mobile);

  left: var(--smg-link-padding-x-mobile);

  z-index: 30;

  font-size: var(--smg-link-size-mobile);

  font-weight: 400;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: #fff;

  text-decoration: underline;

  text-underline-offset: 0.35em;

  white-space: nowrap;

}

.split-media-grid__cta--fixed {

  z-index: 9999;

  pointer-events: none;

  will-change: transform;

}

/* ================================================================

   DESKTOP

   ================================================================ */

@media screen and (min-width: 750px) {

  .split-media-grid__grid {

    grid-template-columns:

      var(--smg-left-ratio)

      var(--smg-right-ratio);

    grid-template-rows:

      1fr

      1fr;

  }

  /* --------------------------------------------------------------

     MAIN LEFT PANEL

     -------------------------------------------------------------- */

  .split-media-grid__tile--main {

    grid-row: 1 / 3;

    grid-column: 1;

    min-height: var(--smg-main-min-height);

  }

  .split-media-grid__tile--main

  .split-media-grid__tile-link {

    min-height: var(--smg-main-min-height);

  }

  /* --------------------------------------------------------------

     SIDE PANELS

     -------------------------------------------------------------- */

  .split-media-grid__tile--side {

    min-height: var(--smg-side-min-height);

  }

  .split-media-grid__tile--side

  .split-media-grid__tile-link {

    min-height: var(--smg-side-min-height);

  }

  /* --------------------------------------------------------------

     DESKTOP VIDEO

     -------------------------------------------------------------- */

  .split-media-grid__video--desktop,

  .split-media-grid__video--all {

    display: block;

  }

  .split-media-grid__video--mobile:not(

    .split-media-grid__video--all

  ) {

    display: none;

  }

  /* --------------------------------------------------------------

     DESKTOP CTA

     -------------------------------------------------------------- */

  .split-media-grid__heading {

    font-size: var(--smg-heading-size);

  }

  .split-media-grid__subheading {

    font-size: var(--smg-subheading-size);

  }

  .split-media-grid__cta {

    bottom: var(--smg-link-padding-y);

    left: var(--smg-link-padding-x);

    font-size: var(--smg-link-size);

  }

}

/* ================================================================

   REDUCED MOTION

   ================================================================ */

@media (prefers-reduced-motion: reduce) {

  .split-media-grid__video {

    display: none !important;

  }

  .split-media-grid__picture--poster,

  .split-media-grid__poster--mobile,

  .split-media-grid__poster--all {

    display: block !important;

  }

}

/* ================================================================

   REDUCED MOTION — DESKTOP

   ================================================================ */

@media (prefers-reduced-motion: reduce) and (min-width: 750px) {

  .split-media-grid__poster--mobile:not(

    .split-media-grid__poster--all

  ) {

    display: none !important;

  }

  .split-media-grid__poster--desktop,

  .split-media-grid__poster--all {

    display: block !important;

  }

}

/* ================================================================

   MOBILE

   ================================================================ */

@media (max-width: 749px) {

  .split-media-grid__wrapper.page-width {

    padding: 0;

  }

}

/* Section-scoped typography: keep the theme editor values authoritative. */

#SplitMediaGrid-{{ section.id }} .split-media-grid__heading {

  font-size: var(--smg-heading-size-mobile);

}

#SplitMediaGrid-{{ section.id }} .split-media-grid__subheading {

  font-size: var(--smg-subheading-size-mobile);

}

#SplitMediaGrid-{{ section.id }} .split-media-grid__cta {

  font-size: var(--smg-link-size-mobile);

}

@media screen and (min-width: 750px) {

  #SplitMediaGrid-{{ section.id }} .split-media-grid__heading {

    font-size: var(--smg-heading-size);

  }

  #SplitMediaGrid-{{ section.id }} .split-media-grid__subheading {

    font-size: var(--smg-subheading-size);

  }

  #SplitMediaGrid-{{ section.id }} .split-media-grid__cta {

    font-size: var(--smg-link-size);

  }

}
/* END_SECTION:new-split-media-grid */

/* START_SECTION:new-tabbed-product-slider (INDEX:63) */
.tabbed-product-slider {
    background: #fff;
    padding: 10px 0;
  }

  .tabbed-product-slider__wrapper.page-width {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .tabbed-product-slider__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .tabbed-product-slider__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tabbed-product-slider__tabs::-webkit-scrollbar {
    display: none;
  }

  .tabbed-product-slider__tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: var(--tps-tab-size-mobile);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
  }

  .tabbed-product-slider__tab.is-active {
    color: #000;
    border-bottom-color: #000;
  }

  .tabbed-product-slider__view-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.85rem;
    font-size: var(--tps-view-all-size-mobile);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    white-space: nowrap;
  }

  .tabbed-product-slider__view-all-arrow {
    font-size: 1.1em;
    line-height: 1;
  }

  .tabbed-product-slider__panel[hidden] {
    display: none !important;
  }

  .tabbed-product-slider .swiper-slide {
    height: auto;
  }

  /*
    Before Swiper runs, its stylesheet sets .swiper-slide { width: 100% },
    so the first card fills the row and then jumps down to size. These
    widths match initSwiper() and only apply until Swiper writes its
    own inline widths (inline styles win, so this does not fight it).
  */
  .tabbed-product-slider__swiper:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    column-gap: var(--tps-gap, 0px);
  }

  .tabbed-product-slider__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 auto;
    width: calc((100% - var(--tps-gap, 0px)) / 2);
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .tabbed-product-slider__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
      width: calc(
        (100% - (var(--tps-gap, 0px) * (min(3, var(--tps-slides-desktop, 4)) - 1))) /
          min(3, var(--tps-slides-desktop, 4))
      );
    }
  }

  @media screen and (min-width: 990px) {
    .tabbed-product-slider__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
      width: calc(
        (100% - (var(--tps-gap, 0px) * (var(--tps-slides-desktop, 4) - 1))) /
          var(--tps-slides-desktop, 4)
      );
    }
  }

  /* ================================================================
     CARD — .tabbed-product-slider__card-frame is the image tile. From
     750px up the overlay is layered on top of it; below 750px the dots
     and the overlay content stack underneath it instead.
     ================================================================ */

  .tabbed-product-slider__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .tabbed-product-slider__card-frame {
    position: relative;
    aspect-ratio: var(--tps-aspect);
    background: var(--tps-tile-bg);
    overflow: hidden;
  }

  /* Image position indicator — mobile only, where the arrows are hidden */
  .tabbed-product-slider__card-dots {
    display: none;
  }

  .tabbed-product-slider__card-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
  }

  .tabbed-product-slider__card-img,
  .tabbed-product-slider__card-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ================================================================
     CARD GALLERY — product images side by side in a track, moved by
     the arrows. Swiping a card still moves the outer slider; the
     arrows carry .swiper-no-swiping so pressing them never drags it.
     ================================================================ */

  .tabbed-product-slider__card-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(calc(var(--card-index, 0) * -100%));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .tabbed-product-slider__card-track > .tabbed-product-slider__card-img {
    flex: 0 0 100%;
    min-width: 0;
  }

  .tabbed-product-slider__card-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #232323;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
  }

  .tabbed-product-slider__card-arrow svg {
    width: 8px;
    height: 13px;
  }

  .tabbed-product-slider__card-arrow:hover {
    opacity: 0.6;
  }

  @media (hover: hover) and (pointer: fine) {
    .tabbed-product-slider__card-arrow {
      opacity: 0;
    }

    .tabbed-product-slider__card:hover .tabbed-product-slider__card-arrow,
    .tabbed-product-slider__card:focus-within .tabbed-product-slider__card-arrow {
      opacity: 1;
    }

    .tabbed-product-slider__card:hover .tabbed-product-slider__card-arrow:hover {
      opacity: 0.6;
    }
  }

  .tabbed-product-slider__card-arrow:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
  }

  .tabbed-product-slider__card-arrow--prev {
    left: 8px;
  }

  .tabbed-product-slider__card-arrow--next {
    right: 8px;
  }

  /*
   * Mobile: swipe instead of arrows — native horizontal scroll with
   * snapping. The script adds .swiper-no-swiping to the track below
   * 750px so a swipe on the image moves the images, not the slider;
   * the slider is dragged from the content below the image.
   */
  @media screen and (max-width: 749px) {
    .tabbed-product-slider__card-arrow {
      display: none;
    }

    .tabbed-product-slider__card-track {
      transform: none;
      transition: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      touch-action: pan-x pan-y;
    }

    .tabbed-product-slider__card-track::-webkit-scrollbar {
      display: none;
    }

    .tabbed-product-slider__card-track > .tabbed-product-slider__card-img {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .tabbed-product-slider__card-dots {
      display: flex;
      gap: 0px;
      padding-top: 0px;
    }

    .tabbed-product-slider__card-dot {
      flex: 0 1 100%;
      height: 1px;
      background: rgba(35, 35, 35, 0.2);
      transition: background-color 0.25s ease;
    }

    .tabbed-product-slider__card-dot.is-active {
      background: #232323;
    }
  }

  /* ================================================================
     OVERLAY — title, price and quick add along the bottom edge.
     ================================================================ */

  .tabbed-product-slider__card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 32px 12px 12px;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.35) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    color: #232323;
  }

  .tabbed-product-slider__card-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
  }

  .tabbed-product-slider__card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
  }

  .tabbed-product-slider__card-price {
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.85;
  }

  .tabbed-product-slider__card-compare {
    margin-right: 0.4em;
    opacity: 0.55;
  }

  .tabbed-product-slider__card-atc {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
  }

  /*
   * home-quick-add.css positions .home-quick-add absolutely for other
   * card types; inside the overlay it has to sit in the flex row instead.
   */
  .tabbed-product-slider__card-atc > * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Hover reveal — only where a real hover exists */
  @media (hover: hover) and (pointer: fine) {
    .tabbed-product-slider__card-overlay {
      opacity: 0;
      transform: translateY(100%);
      transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.3s ease;
    }

    .tabbed-product-slider__card:hover .tabbed-product-slider__card-overlay,
    .tabbed-product-slider__card:focus-within .tabbed-product-slider__card-overlay {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tabbed-product-slider__card-overlay,
    .tabbed-product-slider__card-track {
      transition: none !important;
    }
  }

  @media screen and (min-width: 990px) {
    .tabbed-product-slider__card-title,
    .tabbed-product-slider__card-price {
      font-size: 14px;
    }
  }

  /* ================================================================
     WISHLIST BUTTON — top right of the image tile

     Swym's stylesheet loads after this one and sets position and
     colour on .swym-button, so these are forced. In particular
     `left: auto` is required: an absolutely positioned element with
     both left and right set honours left, which is what pinned the
     heart to the left edge of the card.
     ================================================================ */

  .tabbed-product-slider__wishlist {
    position: absolute !important;
    top: var(--tps-wishlist-offset, 12px) !important;
    right: var(--tps-wishlist-offset, 12px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 0;
    height: auto;

    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;

    line-height: 1;
    cursor: pointer;

    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Icon colour — overrides Swym's brand colour */
  .tabbed-product-slider__wishlist,
  .tabbed-product-slider__wishlist:before,
  .tabbed-product-slider__wishlist:after {
    color: var(--tps-wishlist-color, #232323) !important;
  }

  /*
   * Swym renders the heart through a pseudo element on the button,
   * so the icon size is controlled here rather than by width/height.
   */
  .tabbed-product-slider__wishlist:before,
  .tabbed-product-slider__wishlist:after {
    font-size: var(--tps-wishlist-size, 18px) !important;
    line-height: 1 !important;
  }

  .tabbed-product-slider__wishlist:hover {
    opacity: 0.7;
  }

  .tabbed-product-slider__wishlist:active {
    transform: scale(0.92);
  }

  /* Swym appends a count bubble and a tooltip — neither suits a card */
  .tabbed-product-slider__wishlist .swym-fave-count,
  .tabbed-product-slider__wishlist .swym-tooltip {
    display: none !important;
  }

  /* Optional white disc behind the heart, for light product images */
  .tabbed-product-slider__wishlist--disc {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    padding: 8px !important;
  }

  .tabbed-product-slider__empty {
    padding: 2rem 0;
    text-align: center;
    opacity: 0.7;
  }

  @media screen and (min-width: 750px) {
    .tabbed-product-slider__wrapper.page-width {
      padding-left: 3rem !important;
      padding-right: 3rem !important;
    }

    .tabbed-product-slider__tab {
      font-size: var(--tps-tab-size);
    }

    .tabbed-product-slider__view-all {
      font-size: var(--tps-view-all-size);
    }
  }

  @media screen and (max-width: 749px) {
    .tabbed-product-slider__view-all {
      display: none;
    }

    .tabbed-product-slider__card-frame {
      aspect-ratio: var(--tps-aspect-mobile);
    }

    .tabbed-product-slider__card-overlay {
      position: static;
      gap: 6px;
      padding: 8px 0 0;
      background: none;
      opacity: 1;
      transform: none;
    }

    .tabbed-product-slider__card-title,
    .tabbed-product-slider__card-price {
      font-size: 12px;
    }
  }

  /* ================================================================
     CARD SCROLL LOCK

     Nothing in the card tree is allowed to become a scroll container.
     Theme/app stylesheets (Swym, global Swiper overrides, card
     resets) load after this section and can add overflow: auto or a
     fixed height to .swiper-slide / the card, which makes the card
     scroll internally under the mouse wheel. These rules are forced
     so that cannot happen; only the card tile clips (it has to, to
     hide the overlay below its bottom edge), and it clips with
     hidden, never scroll. The one intended exception is the image
     track below 750px, which scrolls horizontally for swiping.

     ================================================================ */

  .tabbed-product-slider .swiper-wrapper,
  .tabbed-product-slider .swiper-slide {
    overflow: visible !important;
    max-height: none !important;
  }

  .tabbed-product-slider .swiper-slide {
    height: auto !important;
  }

  .tabbed-product-slider__card {
    overflow: hidden !important;
    max-height: none !important;
  }

  .tabbed-product-slider__swiper {
    overflow: hidden !important;
  }

  @media screen(min-width: 750px) {
  .tabbed-product-slider__wrapper.page-width {
    padding: 2% 2% !important;
  }
}


/* ṣlider */


/* Main product slider navigation arrows */
#TabbedProductSlider-{{ section.id }} .tabbed-product-slider__panels {
  position: relative;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: #fff;
  color: #222;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background 0.2s ease;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow svg {
  width: 18px;
  height: 18px;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow--prev {
  left: 8px;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow--next {
  right: 8px;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow:hover {
  background: #f3f3f3;
}

#TabbedProductSlider-{{ section.id }} .tps-slider-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

@media screen and (max-width: 749px) {
  #TabbedProductSlider-{{ section.id }} .tps-slider-arrow {
    width: 30px;
    height: 30px;
  }

  #TabbedProductSlider-{{ section.id }} .tps-slider-arrow--prev {
    left: 0px;
  }

  #TabbedProductSlider-{{ section.id }} .tps-slider-arrow--next {
    right: 0px;
  }
}
/* END_SECTION:new-tabbed-product-slider */

/* START_SECTION:new-testimonial-slider (INDEX:64) */
.ts {
    background: var(--ts-bg, #f3ede7);
    padding: var(--ts-pad-y-mobile) 10px;
    margin: 30px 0;
  }

  .ts__swiper {
    position: relative;
    overflow: hidden;
  }

  .ts__slide {
    display: block;
    box-sizing: border-box;
  }

  .ts__media {
    overflow: hidden;
    aspect-ratio: var(--ts-ratio-m);
    background: #e7ded5;
  }

  .ts__media img,
  .ts__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ts__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ts-text, #3a3a3a);
    padding: 3rem 2rem 3.5rem;
  }

  .ts__stars {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
  }

  .ts__star {
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.18);
    line-height: 1;
  }

  .ts__star.is-on {
    color: var(--ts-star, #1a1a1a);
  }

  .ts__heading {
    margin: 0 0 2rem;
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--ts-heading, #2a2a2a);
  }

  .ts__quote {
    margin: 0 0 2.4rem;
    max-width: 56ch;
    font-size: var(--ts-quote-size-m, 15px);
    font-style: italic;
    line-height: 1.7;
    border-left: unset;
  }

  .ts__author {
    font-style: normal;
    font-size: 1.4rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .ts__signature {
    max-height: 6rem;
    width: auto;
  }

  /* Pagination */
  .ts__pagination {
    position: absolute;
    bottom: 1.6rem;
    left: 0;
    right: 0;
    z-index: 3;
  }

  .ts .swiper-pagination-bullet {
    background: var(--ts-heading, #2a2a2a);
    opacity: 0.35;
  }

  .ts .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* Arrows */
  .ts__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: none;
    background: transparent;
    color: var(--ts-heading, #2a2a2a);
    cursor: pointer;
  }

  .ts__arrow--prev {
    left: 0.6rem;
  }

  .ts__arrow--next {
    right: 0.6rem;
  }

  .ts__arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* Fade effect: keep stacked slides aligned */
  .ts .swiper-slide {
    height: auto;
  }

  /* Desktop: image beside centered content */
  @media screen and (min-width: 750px) {
    .ts {
      padding: var(--ts-pad-y) 12px;
    }

    .ts__swiper .ts__slide {
      display: grid;
      grid-template-columns: var(--ts-img-width, 45%) 1fr;
      align-items: stretch;
    }

    .ts__swiper--media-right .ts__slide {
      grid-template-columns: 1fr var(--ts-img-width, 45%);
    }

    .ts__swiper--media-right .ts__media {
      order: 2;
    }

    .ts__media {
      aspect-ratio: auto;
      height: 100%;
      min-height: 36rem;
    }

    .ts__content {
      padding: 4rem clamp(2rem, 6vw, 8rem);
    }

    .ts__quote {
      font-size: var(--ts-quote-size, 15px);
    }

    .ts__heading {
      font-size: 2.8rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ts__arrow {
      transition: none;
    }
  }
/* END_SECTION:new-testimonial-slider */

/* START_SECTION:new-worn-by-cards (INDEX:65) */
.wb-cards {
    padding: var(--wb-pad-y-mobile) 0;
  }

  .wb-cards__inner {
    position: relative;
  }

  .wb-cards__header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .wb-cards__heading {
    margin: 0 0 0.5rem;
    font-size: 2.4rem;
    font-weight: 500;
  }

  .wb-cards__subheading {
    margin: 0;
    font-size: 1.4rem;
    color: #555;
  }

  .wb-cards__viewport {
    overflow: hidden;
    width: 100%;
  }

  .wb-cards__track {
    display: flex;
  }

  /* Card */
  .wb-card {
    position: relative;
    height: auto;
    background: #f4f4f4;
    overflow: hidden;
  }

  .wb-card__media {
    position: relative;
    aspect-ratio: var(--wb-ratio-mobile);
    width: 100%;
    overflow: hidden;
    background: #f4f4f4;
  }

  .wb-card__media img,
  .wb-card__media video,
  .wb-card__media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Worn-by label */
  .wb-card__worn {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.2rem 1.6rem;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    z-index: 2;
    pointer-events: none;
  }

  .wb-card__worn-label {
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  .wb-card__worn-name {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .wb-card__worn-title {
    font-size: 1.2rem;
    opacity: 0.9;
  }

  /* Product cards */
  .wb-card__products {
    position: absolute;
    bottom: 1.4rem;
    display: flex;
    gap: 1rem;
    z-index: 3;
    opacity: 0;
    transform: translateY(0.8rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }

  .wb-card__products--right {
    right: 1.4rem;
  }

  .wb-card__products--left {
    left: 1.4rem;
  }

  .wb-card:hover .wb-card__products,
  .wb-card:focus-within .wb-card__products {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* NOTE: no padding here — padding was what created the white gutter
     around the product image. Spacing is now optional and controlled by
     --wb-product-pad on .wb-product__media (defaults to 0). */
  .wb-product {
    position: relative;
    display: block;
    width: var(--wb-product-size-mobile, 84px);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--wb-product-radius, 0px);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .wb-product[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
  }

  .wb-product__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--wb-product-pad, 0px);
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
  }

  .wb-product__img {
    width: 100%;
    height: 100%;
    object-fit: var(--wb-product-fit, cover);
    object-position: center center;
    display: block;
  }

  .wb-product__atc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.4rem 0.8rem;
    background: #fff;
    color: #111;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (min-width: 990px) {
    .wb-product__atc {
      opacity: 0;
      transform: translateY(100%);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .wb-product:hover .wb-product__atc,
    .wb-product:focus-visible .wb-product__atc {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Navigation arrows (mobile only) */
  .wb-cards__nav {
    position: absolute;
    top: 1.6rem;
    right: 2.6rem;
    display: flex;
    gap: 0.8rem;
    z-index: 5;
  }

  .wb-cards__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .wb-cards__arrow:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  .wb-cards__arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* Desktop: 3-up grid, no slider, no arrows */
  @media screen and (min-width: 750px) {
    .wb-cards {
      padding: var(--wb-pad-y) 0;
    }

    .wb-cards__viewport {
      overflow: visible;
    }

    .wb-cards__track {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--wb-gap);
      transform: none !important;
    }

    .wb-card {
      width: auto !important;
      margin: 0 !important;
    }

    .wb-card__media {
      aspect-ratio: var(--wb-ratio-desktop);
    }

    .wb-product {
      width: var(--wb-product-size, 110px);
    }

    .wb-cards__nav {
      display: none;
    }
  }

  /* Mobile: products always visible, bottom-left */
  @media screen and (max-width: 749px) {
    .wb-card__products {
      opacity: 1;
      transform: none;
      pointer-events: auto;
      left: 1.4rem;
      right: auto;
    }
  }
 @media screen and (max-width: 749px) {
.wb-product__atc {
    position: relative !important;
    left: 0;
    right: 0;
    bottom: 3% !important;
    padding: 0.2rem 1rem 0.4rem 0.8rem !important;
    background: #fff;
    color: #111;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
} }


  @media (prefers-reduced-motion: reduce) {
    .wb-card__products,
    .wb-product__atc {
      transition: none;
    }
  }
/* END_SECTION:new-worn-by-cards */

/* START_SECTION:section-content-text (INDEX:74) */
.fr-content {
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  padding:
    var(--fr-content-pt, 80px)
    80px
    var(--fr-content-pb, 80px);
}

.fr-content .fr-content__inner {
  width: 100%;
  max-width: var(--fr-content-max-width, 900px);
  margin: 0 auto;
  text-align: var(--fr-content-align, left);
}

.fr-content .fr-content__heading {
  font-size: var(--fr-content-heading-size, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 16px;
}

.fr-content .fr-content__paragraph {
  font-size: var(--fr-content-text-size, 14px);
  line-height: 1.4;
  margin: 0 0 10px;
  color: #000000;
}

.fr-content .fr-content__paragraph:last-child {
  margin-bottom: 0;
}

/* Keep rich text aligned with the paragraph font-size setting */
.fr-content .fr-content__paragraph p {
  font-size: inherit;
  line-height: inherit;
  margin-top: 0;
  margin-bottom: 0.8em;
}

.fr-content .fr-content__paragraph p:last-child {
  margin-bottom: 0;
}

/* Mobile spacing and typography */
@media screen and (max-width: 749px) {
  .fr-content {
    padding:
      var(--fr-content-pt-mobile, 32px)
      2px
      var(--fr-content-pb-mobile, 32px);
  }

  .fr-content .fr-content__heading,
  .fr-section-content-text .fr-content .fr-content__heading {
    font-size: var(--fr-content-heading-size-mobile, 18px) !important;
  }

  .fr-content .fr-content__paragraph {
    font-size: var(--fr-content-text-size-mobile, 14px);
  }
}

/* Large screens: use the desktop customizer values */
@media screen and (min-width: 2000px) {
  .fr-content .fr-content__heading {
    font-size: var(--fr-content-heading-size, 18px);
  }

  .fr-content .fr-content__paragraph {
    font-size: var(--fr-content-text-size, 14px);
  }
}
/* END_SECTION:section-content-text */

/* START_SECTION:section-footer-image (INDEX:75) */
.fr-footer-image {
  width: 100%;
  height: var(--fr-fi-height, 640px);
  overflow: hidden;
}

.fr-footer-image__link,
.fr-footer-image__image,
.fr-footer-image__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.fr-footer-image__image {
  object-fit: cover;
  object-position: center {{ section.settings.focal_point | default: 'top' }};
}

@media screen and (max-width: 749px) {
  .fr-footer-image {
    height: var(--fr-fi-height-mobile, 480px);
  }
}
/* END_SECTION:section-footer-image */

/* START_SECTION:section-hero-banner (INDEX:76) */
/* ============================================

     Base layout — applies at every screen size

     ============================================ */

  .fr-hero-banner {

    position: relative;

    width: 100%;

    overflow: hidden;

    height: 80vh;

  }



  .fr-hero-banner__picture {

    display: block;

    width: 100%;

    height: 100%;

  }



  .fr-hero-banner__image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    display: block;

  }



  .fr-hero-banner__placeholder {

    width: 100%;

    height: 100%;

    background: #e8e8e8;

  }

  .fr-hero-banner__placeholder-svg {

    width: 100%;

    height: 100%;

  }



  /* ============================================

     Image overlay (scrim) — keeps text legible.

     Each style paints its own gradient; there is no

     solid fallback background, so an unknown or blank

     style can never render as a flat full-image fill.

     ============================================ */

  .fr-hero-banner__scrim {

    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    pointer-events: none;

    opacity: var(--fr-hb-overlay-opacity, 0.4);

  }



  .fr-hero-banner__scrim--full {

    background: var(--fr-hb-overlay-solid, #000000);

  }



  .fr-hero-banner__scrim--bottom {

    background: linear-gradient(

      to top,

      var(--fr-hb-overlay-solid, #000000) 0%,

      var(--fr-hb-overlay-clear, rgba(0, 0, 0, 0)) var(--fr-hb-fade, 70%)

    );

  }



  .fr-hero-banner__scrim--top {

    background: linear-gradient(

      to bottom,

      var(--fr-hb-overlay-solid, #000000) 0%,

      var(--fr-hb-overlay-clear, rgba(0, 0, 0, 0)) var(--fr-hb-fade, 70%)

    );

  }



  .fr-hero-banner__scrim--both {

    background: linear-gradient(

      to bottom,

      var(--fr-hb-overlay-solid, #000000) 0%,

      var(--fr-hb-overlay-clear, rgba(0, 0, 0, 0)) var(--fr-hb-fade-half, 35%),

      var(--fr-hb-overlay-clear, rgba(0, 0, 0, 0)) var(--fr-hb-fade-both-end, 65%),

      var(--fr-hb-overlay-solid, #000000) 100%

    );

  }



  .fr-hero-banner__overlay {

    position: absolute;

    left: 0;

    right: 0;

    z-index: 2;

    color: var(--fr-hb-text-color, #ffffff);

  }



  .fr-hero-banner__overlay--shadow {

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);

  }



  /* --- Horizontal alignment (left / center / right), any vertical position --- */

  .fr-hero-banner__overlay--top-left,

  .fr-hero-banner__overlay--middle-left,

  .fr-hero-banner__overlay--bottom-left {

    text-align: left;

  }



  .fr-hero-banner__overlay--top-center,

  .fr-hero-banner__overlay--middle-center,

  .fr-hero-banner__overlay--bottom-center {

    text-align: center;

  }



  .fr-hero-banner__overlay--top-right,

  .fr-hero-banner__overlay--middle-right,

  .fr-hero-banner__overlay--bottom-right {

    text-align: right;

  }



  /* --- Vertical position: top --- */

  .fr-hero-banner__overlay--top-left,

  .fr-hero-banner__overlay--top-center,

  .fr-hero-banner__overlay--top-right {

    top: 0;

    padding: 24px 50px 32px;

  }



  /* --- Vertical position: middle --- */

  .fr-hero-banner__overlay--middle-left,

  .fr-hero-banner__overlay--middle-center,

  .fr-hero-banner__overlay--middle-right {

    top: 50%;

    transform: translateY(-50%);

    padding: 24px 50px;

  }



  /* --- Vertical position: bottom --- */

  .fr-hero-banner__overlay--bottom-left,

  .fr-hero-banner__overlay--bottom-center,

  .fr-hero-banner__overlay--bottom-right {

    bottom: 0;

    padding: 24px 50px 32px;

  }



  .fr-hero-banner__subheading {

    font-size: var(--fr-hb-subheading-size, 22px);

    font-weight: 100;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    margin: 0 0 8px;

    line-height: 1.3;

    opacity: 0.85;

    color: inherit;

  }



  .fr-hero-banner__heading {

    font-size: var(--fr-hb-heading-size, 18px);

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin: 0 0 6px;

    line-height: 1.3;

    color: inherit;

  }



  .fr-hero-banner__text {

    font-size: var(--fr-hb-text-size, 14px);

    line-height: 1.4;

    max-width: 60%;

    margin: 0;

  }

  .fr-hero-banner__overlay--top-center .fr-hero-banner__text,

  .fr-hero-banner__overlay--middle-center .fr-hero-banner__text,

  .fr-hero-banner__overlay--bottom-center .fr-hero-banner__text {

    margin-left: auto;

    margin-right: auto;

  }

  .fr-hero-banner__overlay--top-right .fr-hero-banner__text,

  .fr-hero-banner__overlay--middle-right .fr-hero-banner__text,

  .fr-hero-banner__overlay--bottom-right .fr-hero-banner__text {

    margin-left: auto;

  }



  .fr-hero-banner__button {

    display: inline-block;

    margin-top: 14px;

    padding: 10px 22px;

    border: 1px solid currentColor;

    color: inherit;

    text-decoration: none;

    font-size: var(--fr-hb-text-size, 14px);

    letter-spacing: 0.05em;

    text-transform: uppercase;

  }



  /* ============================================

     Mobile — up to 749px

     ============================================ */

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

    .fr-hero-banner {

      height: var(--fr-hb-height-mobile, 420px);

    }

    .fr-hero-banner__scrim {

      opacity: var(--fr-hb-overlay-opacity-mobile, var(--fr-hb-overlay-opacity, 0.4));

    }

    .fr-hero-banner__overlay--top-left,

    .fr-hero-banner__overlay--top-center,

    .fr-hero-banner__overlay--top-right {

      padding: 18px 20px 24px;

    }

    .fr-hero-banner__overlay--middle-left,

    .fr-hero-banner__overlay--middle-center,

    .fr-hero-banner__overlay--middle-right {

      padding: 18px 20px;

    }

    .fr-hero-banner__overlay--bottom-left,

    .fr-hero-banner__overlay--bottom-center,

    .fr-hero-banner__overlay--bottom-right {

      padding: 18px 20px 24px;

    }

    .fr-hero-banner__heading {

      font-size: var(--fr-hb-heading-size-mobile, var(--fr-hb-heading-size, 18px));

    }

    .fr-hero-banner__text {

      max-width: 100%;

      font-size: var(--fr-hb-text-size-mobile, var(--fr-hb-text-size, 14px));

    }

    .fr-hero-banner__button {

      font-size: var(--fr-hb-text-size-mobile, var(--fr-hb-text-size, 14px));

    }

    .fr-hero-banner__subheading {

      font-size: var(--fr-hb-subheading-size-mobile, var(--fr-hb-subheading-size, 22px));

    }

  }



  /* ============================================

     Ultra-wide — 2000px and up (e.g. 2400px displays)

     Only these rules change beyond this point; every

     selector below is scoped to this media query only.

     ============================================ */

  @media screen and (min-width: 2000px) {



    .fr-hero-banner__overlay--top-left,

    .fr-hero-banner__overlay--top-center,

    .fr-hero-banner__overlay--top-right,

    .fr-hero-banner__overlay--bottom-left,

    .fr-hero-banner__overlay--bottom-center,

    .fr-hero-banner__overlay--bottom-right {

      max-width: 60%;

      padding: 56px 64px 64px;

    }

    .fr-hero-banner__overlay--middle-left,

    .fr-hero-banner__overlay--middle-center,

    .fr-hero-banner__overlay--middle-right {

      max-width: 60%;

      padding: 56px 64px;

    }

    .fr-hero-banner__overlay--top-center,

    .fr-hero-banner__overlay--middle-center,

    .fr-hero-banner__overlay--bottom-center {

      margin-left: auto;

      margin-right: auto;

    }

    .fr-hero-banner__overlay--top-right,

    .fr-hero-banner__overlay--middle-right,

    .fr-hero-banner__overlay--bottom-right {

      margin-left: auto;

    }



    .fr-hero-banner__text {
      max-width: 100%;
    }

  }
/* END_SECTION:section-hero-banner */

/* START_SECTION:section-image-text-product (INDEX:77) */
/* ============================================

   Base layout — applies at every screen size

   ============================================ */

.fr-itp {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2px;

  width: 100%;

  align-items: center;

}



.fr-itp--image-right { direction: rtl; }

.fr-itp--image-right > * { direction: ltr; }



.fr-itp__media { width: 100%; height: 100%; overflow: hidden; }

.fr-itp__image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  min-height: var(--fr-itp-image-height, 480px);

}

.fr-itp__placeholder { width: 100%; height: 100%; }



.fr-itp__content {

  padding: 48px 56px;

  display: flex;

  flex-direction: column;

  gap: 32px;

}



/* Capped at every screen from 750px up, not just ultra-wide — this is what keeps the

   paragraph and product card readable at 1200px, 1600px, 1920px etc. as well as 2400px+ */

.fr-itp__text-block {

  max-width: 560px;

}



.fr-itp__heading {

  font-size: var(--fr-itp-heading-size, 18px);

  font-weight: 500;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin: 0 0 14px;

}



.fr-itp__text {

  font-size: var(--fr-itp-text-size, 14px);

  line-height: 1.4;

  color: #333333;

}



.fr-itp__product { width: 100%; max-width: 50vh; }

.fr-itp__carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5 ;
  background: #f5f5f5;
  margin-bottom: 0;
  overflow: hidden;
}

.fr-itp__carousel--placeholder { display: flex; align-items: center; justify-content: center; }
.fr-itp__carousel-placeholder { width: 60%; height: 60%; }

.fr-itp__carousel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fr-itp__carousel-image.is-active { opacity: 1; }

.fr-itp__product-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 38px 16px 16px;
  background: linear-gradient(to top, rgba(245,245,245,.96) 0%, rgba(245,245,245,.68) 48%, rgba(245,245,245,0) 100%);
  pointer-events: none;
}

.fr-itp__product-title {
  display: block;
  font-size: var(--fr-itp-text-size, 14px);
  line-height: 1.4;
  color: #111111;
  text-decoration: none;
  margin: 0 0 5px;
  pointer-events: auto;
}

.fr-itp__product-subtitle,
.fr-itp__product-price {
  font-size: var(--fr-itp-text-size, 14px);
  line-height: 1.4;
  color: #666666;
  margin: 0;
}

.fr-itp__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  color: #acacac;
}
.fr-itp__arrow--prev { left: 0; }
.fr-itp__arrow--next { right: 0; }

.fr-itp__empty-note {

  font-size: var(--fr-itp-text-size, 14px);

  color: #999999;

  margin-top: 10px;

}

p.fr-itp__product-price{

  display: none;

}

/* ============================================

   Mobile — up to 749px

   ============================================ */

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

  .fr-itp,

  .fr-itp--image-right {

    grid-template-columns: 1fr;

    gap: 2px;

    direction: ltr;

  }

  .fr-itp__image { min-height: var(--fr-itp-image-height-mobile, 360px); }

  .fr-itp__content { padding: 50px; gap: 24px; }

  .fr-itp__text-block { max-width: 100%; }

}



/* ============================================

   Ultra-wide — 2000px and up (e.g. 2400px displays)

   Only these rules change beyond this point; every

   selector below is scoped to this media query only.

   ============================================ */

@media screen and (min-width: 2000px) {

  .fr-itp {

    align-items: stretch;

  }



  .fr-itp__image {

    /* scales proportionally with the desktop height setting */

    min-height: calc(var(--fr-itp-image-height, 480px) + 340px);

  }



  .fr-itp__content {

    padding: clamp(48px, 4vw, 120px) clamp(56px, 6vw, 160px);

    background-color: #ffffffff;

    justify-content: center;

  }



  .fr-itp__text-block {

    max-width: 620px;

  }



  .fr-itp__heading {

    font-size: 22px;

    margin-bottom: 20px;

  }



  .fr-itp__text {

    font-size: 18px;

    max-width: 560px;

  }



  .fr-itp__product {

    max-width: 50vh;

  }



  .fr-itp__product-title,

  .fr-itp__product-subtitle,

  .fr-itp__product-price {

    font-size: 18px;

  }

}
/* END_SECTION:section-image-text-product */

/* START_SECTION:story-banner (INDEX:82) */
.story {
    position: relative;
    padding: 0;
  }

  .story__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--story-ratio-mobile);
    overflow: hidden;
    background: #111;
  }

  .story__video,
  .story__image,
  .story__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .story__video--mobile,
  .story__image--mobile {
    display: block;
  }

  .story__video--desktop,
  .story__image--desktop {
    display: none;
  }

  .story__overlay {
    position: absolute;
    inset: 0;
    background: var(--story-overlay, #000);
    opacity: var(--story-overlay-opacity, 0);
    pointer-events: none;
  }

  .story__content {
    position: static;
  }

  .story__content-inner {
    display: block;
  }

  /* Card */
  .story__card {
    width: 100%;
    background: var(--story-card-bg, #fff);
    color: var(--story-text, #1a1a1a);
    padding: 2.4rem;
    box-sizing: border-box;
}
@media(min-width: 750px){
    .story__card {
        margin: 40px 0;
    }
  }

  .story__label {
    margin: 0 0 1.2rem;
    font-size: var(--story-label-size, 1.1rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--story-label, #8a8a8a);
  }

  .story__heading {
    margin: 0 0 1.6rem;
    font-family: var(--font-heading-family, inherit);
    font-size: var(--story-heading-size, 2rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--story-heading-color, var(--story-text, #1a1a1a));
  }

  .story__body {
    margin: 0 0 2rem;
    font-size: var(--story-body-size, 1.5rem);
    line-height: 1.4;
  }

  .story__body p {
    margin: 0 0 1rem;
    font-size: inherit;
  }

  .story__body p:last-child {
    margin-bottom: 0;
  }

  .story__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .story__stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .story__stat-value {
    font-size: var(--story-stat-value-size, 1.9rem);
    font-weight: 500;
    line-height: 1.1;
  }

  .story__stat-label {
    font-size: var(--story-stat-label-size, 1.2rem);
    color: var(--story-label, #8a8a8a);
  }

  .story__button {
    display: block;
    width: 100%;
    padding: 1.4rem 2rem;
    background: var(--story-btn-bg, #2b3245);
    color: var(--story-btn-text, #fff);
    font-size: var(--story-btn-size, 1.2rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
  }

  .story__button:hover {
    opacity: 0.88;
  }

  /* Desktop: floating card over full-bleed media */
  @media screen and (min-width: 750px) {
    .story {
      padding: var(--story-pad-y) 0;
    }

    .story__media {
      aspect-ratio: var(--story-ratio-desktop);
    }

    .story__video--desktop,
    .story__image--desktop {
      display: block;
    }

    .story__video--mobile,
    .story__image--mobile {
      display: none;
    }

    .story__content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
    }

    .story__content-inner {
      display: flex;
      width: 100%;
      height: 100%;
      padding-top: 4rem;
      padding-bottom: 4rem;
      justify-content: var(--story-justify, flex-start);
      align-items: var(--story-align, center);
    }

    .story__content-inner.page-width {
        padding: 0 3rem !important;
    }
    .story__card {
      width: var(--story-card-width, 380px);
      max-width: 100%;
      padding: 3rem;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.18);
    }

    .story__label {
      font-size: var(--story-label-size-desktop, var(--story-label-size, 1.1rem));
    }

    .story__heading {
      font-size: var(--story-heading-size-desktop, var(--story-heading-size, 2.4rem));
    }

    .story__body {
      font-size: var(--story-body-size-desktop, var(--story-body-size, 1.5rem));
    }

    .story__stat-value {
      font-size: var(--story-stat-value-size-desktop, var(--story-stat-value-size, 1.9rem));
    }

    .story__stat-label {
      font-size: var(--story-stat-label-size-desktop, var(--story-stat-label-size, 1.2rem));
    }

    .story__button {
      font-size: var(--story-btn-size-desktop, var(--story-btn-size, 1.2rem));
    }
  }

  /* Mobile: media on top, card below */
  @media screen and (max-width: 749px) {
    .story__content-inner {
      padding-left: 0;
      padding-right: 0;
    }

    .story__card {
      padding: 2.4rem 1.6rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .story__button {
      transition: none;
    }
  }
/* END_SECTION:story-banner */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:new-card-product (INDEX:110) */
/* ================================================================
     CARD — .new-card-product__frame is the image tile. From 750px up
     the overlay is layered on top of it; below 750px the dots and the
     overlay content stack underneath it instead.
     ================================================================ */

  .new-card-product {
    position: relative;
    width: 100%;
    overflow: hidden !important;
    isolation: isolate;
  }

  .new-card-product__frame {
    position: relative;
    aspect-ratio: var(--ncp-aspect, 3 / 4);
    background: var(--ncp-tile-bg, #f4f4f4);
    overflow: hidden;
  }

  /* Image position indicator — mobile only, where the arrows are hidden */
  .new-card-product__dots {
    display: none;
  }

  .new-card-product__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
  }

  .new-card-product__img,
  .new-card-product__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ================================================================
     GALLERY — product images side by side in a track, moved by the
     arrows. The arrows carry .swiper-no-swiping so pressing them
     never drags a surrounding Swiper.
     ================================================================ */

  .new-card-product__track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(calc(var(--ncp-index, 0) * -100%));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .new-card-product__track > .new-card-product__img {
    flex: 0 0 100%;
    min-width: 0;
  }

  .new-card-product__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #232323;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
  }

  .new-card-product__arrow svg {
    width: 8px;
    height: 13px;
  }

  .new-card-product__arrow:hover {
    opacity: 0.6;
  }

  .new-card-product__arrow:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
  }

  .new-card-product__arrow--prev {
    left: 8px;
  }

  .new-card-product__arrow--next {
    right: 8px;
  }

  /* ================================================================
     OVERLAY — title, price and quick add along the bottom edge.
     ================================================================ */

  .new-card-product__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 32px 12px 12px;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.35) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    color: #232323;
  }

  .new-card-product__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
  }

  .new-card-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
  }

  .new-card-product__price {
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.85;
  }

  .new-card-product__compare {
    margin-right: 0.4em;
    opacity: 0.55;
  }

  .new-card-product__atc {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
  }

  /*
   * home-quick-add.css positions .home-quick-add absolutely for other
   * card types; inside the overlay it has to sit in the flex row instead.
   */
  .new-card-product__atc > * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Hover reveal — only where a real hover exists */
  @media (hover: hover) and (pointer: fine) {
    .new-card-product__overlay {
      opacity: 0;
      transform: translateY(100%);
      transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.3s ease;
    }

    .new-card-product__arrow {
      opacity: 0;
    }

    .new-card-product:hover .new-card-product__overlay,
    .new-card-product:focus-within .new-card-product__overlay {
      opacity: 1;
      transform: translateY(0);
    }

    .new-card-product:hover .new-card-product__arrow,
    .new-card-product:focus-within .new-card-product__arrow {
      opacity: 1;
    }

    .new-card-product:hover .new-card-product__arrow:hover {
      opacity: 0.6;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .new-card-product__overlay,
    .new-card-product__track {
      transition: none !important;
    }
  }

  @media screen and (min-width: 990px) {
    .new-card-product__title,
    .new-card-product__price {
      font-size: 14px;
    }
  }

  @media screen and (max-width: 749px) {
    .new-card-product__frame {
      aspect-ratio: var(--ncp-aspect-mobile, 3 / 4);
    }

    .new-card-product__dots {
      display: flex;
      /* gap: 4px; */
      /* padding-top: 8px; */
      gap: 0px;
      padding-top: 0px;
    }

    .new-card-product__dot {
      /* flex: 0 1 18px;
      height: 2px; */
      flex: 0 1 100%;
      height: 1px;
      background: rgba(35, 35, 35, 0.2);
      transition: background-color 0.25s ease;
    }

    .new-card-product__dot.is-active {
      background: #232323;
    }

    /* Swipe instead of arrows: native horizontal scroll with snapping */
    .new-card-product__arrow {
      display: none;
    }

    .new-card-product__track {
      transform: none;
      transition: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .new-card-product__track::-webkit-scrollbar {
      display: none;
    }

    .new-card-product__track > .new-card-product__img {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .new-card-product__overlay {
      position: static;
      gap: 6px;
      padding: 8px 0 0;
      background: none;
      opacity: 1;
      transform: none;
    }

    .new-card-product__title,
    .new-card-product__price {
      font-size: 12px;
    }
  }

  /* ================================================================
     WISHLIST BUTTON — top right of the image tile

     Swym's stylesheet loads after this one and sets position and
     colour on .swym-button, so these are forced. `left: auto` is
     required: with both left and right set, left wins and pins the
     heart to the left edge of the card.
     ================================================================ */

  .new-card-product__wishlist {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Icon colour — overrides Swym's brand colour */
  .new-card-product__wishlist,
  .new-card-product__wishlist:before,
  .new-card-product__wishlist:after {
    color: var(--ncp-wishlist-color, #232323) !important;
  }

  /*
   * Swym renders the heart through a pseudo element on the button,
   * so the icon size is controlled here rather than by width/height.
   */
  .new-card-product__wishlist:before,
  .new-card-product__wishlist:after {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .new-card-product__wishlist:hover {
    opacity: 0.7;
  }

  .new-card-product__wishlist:active {
    transform: scale(0.92);
  }

  /* Swym appends a count bubble and a tooltip — neither suits a card */
  .new-card-product__wishlist .swym-fave-count,
  .new-card-product__wishlist .swym-tooltip {
    display: none !important;
  }

  .new-card-product__wishlist--disc {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    padding: 8px !important;
  }
  @media(max-width: 749px){
    .new-card-product__wishlist:before,
    .new-card-product__wishlist:after {
      font-size: 14px !important;
    }
  }

  .swym-add-to-wishlist-view-product:after {
    color: #00000085 !important;
}
/* Best Seller and New Arrival stickers */
.new-card-product__frame .product-sticker {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
  display: inline-block !important;
  width: auto;
  height: auto;
  padding: 2px 2px;
  background: #ffffff;
  color: #232323;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.new-card-product__frame .product-sticker--new-arrival {
  background: #ffffff94;
    color: #000000;
}
/* END_SNIPPET:new-card-product */