/** Shopify CDN: Minification failed

Line 13884:3 Unexpected "/"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:activity-teaser (INDEX:1) */
.activity-teaser {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .activity-teaser .content-tiles__inner {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* In slider mode: extend the inner container to the right viewport edge.
     content-container--full-right defines --content-container-left-offset at each
     breakpoint (in @layer base). We repeat the layout properties here (unlayered)
     so they win over the generic .content-tiles__inner rules from content-tiles.liquid. */
  .activity-teaser.content-tiles--slider .content-tiles__inner {
    max-width: none;
    margin-left: var(--content-container-left-offset, 1.25rem);
    margin-right: 0;
    width: calc(100% - var(--content-container-left-offset, 1.25rem));
    overflow-x: visible;
  }

  /* Right-align standalone controls (when no header text) */
  .activity-teaser .content-tiles__nav-wrapper > .content-tiles__controls {
    justify-content: flex-end;
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__inner {
      overflow-x: visible;
    }
    .activity-teaser {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    /* Ensure direct children respect container width on mobile */
    .activity-teaser .content-tiles__inner > * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  /* Nav wrapper (header + controls) – spacing below before the cards */
  .activity-teaser .content-tiles__nav-wrapper {
    margin-bottom: 1.5rem;
  }

  /* Header */
  .activity-teaser .content-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  .activity-teaser .content-tiles__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .activity-teaser .content-tiles__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .activity-teaser .content-tiles__subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--section-text-color);
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__subtitle {
      font-size: 0.875rem;
    }
    .activity-teaser .content-tiles__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem;
    }
    .activity-teaser .content-tiles__controls--desktop {
      display: none !important;
    }
    .activity-teaser .content-tiles__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1rem;
      width: 100%;
    }
    /* Hide slider controls on mobile when grid is enabled */
    .activity-teaser.content-tiles--mobile-grid .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  /* Controls */
  .activity-teaser .content-tiles__controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
  }

  .activity-teaser .content-tiles__controls--mobile {
    display: none;
  }

  .activity-teaser .content-tiles__controls--desktop {
    display: flex;
  }

  @media (min-width: 768px) {
    .activity-teaser .content-tiles__controls--desktop {
      display: flex;
    }
    .activity-teaser .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  .activity-teaser .content-tiles__control {
    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 0.5625rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .activity-teaser .content-tiles__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .activity-teaser .content-tiles__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .activity-teaser .content-tiles__control svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__control {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0.625rem;
    }
    .activity-teaser .content-tiles__control svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .activity-teaser .content-tiles__controls {
      gap: 0.75rem;
    }
  }

  /* Container */
  .activity-teaser .content-tiles__container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  @media (min-width: 768px) {
    .activity-teaser .tiles__card--hidden-desktop {
      display: none !important;
    }
  }

  @media (max-width: 767px) {
    .activity-teaser .tiles__card--hidden-mobile {
      display: none !important;
    }
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__container {
      overflow-x: auto;
    }
  }

  /* Grid Layout */
  .activity-teaser.content-tiles--grid .content-tiles__container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .activity-teaser.content-tiles--grid .content-tiles__card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .activity-teaser.content-tiles--grid .content-tiles__card--no-image {
    height: 100%;
  }

  @media (max-width: 1023px) {
    .activity-teaser.content-tiles--grid .content-tiles__container {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
  }

  @media (max-width: 767px) {
    /* Default mobile: use grid_columns_mobile setting for grid mode */
    .activity-teaser.content-tiles--grid .content-tiles__container {
      grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
      gap: 1rem;
    }
    
    /* Mobile grid enabled: override all display modes to use grid */
    .activity-teaser.content-tiles--mobile-grid .content-tiles__container {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile, 2), 1fr) !important;
      gap: 1rem !important;
      overflow-x: visible !important;
      scroll-snap-type: none !important;
    }

    .activity-teaser.content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      flex: unset !important;
      min-width: unset !important;
      max-width: 100% !important;
    }

    /* In slider mode with mobile grid, restore symmetric margins */
    .activity-teaser.content-tiles--slider.content-tiles--mobile-grid .content-tiles__inner {
      margin-right: var(--content-container-left-offset, 1.25rem);
      width: calc(100% - 2 * var(--content-container-left-offset, 1.25rem));
    }
  }

  /* Slider Layout */
  .activity-teaser.content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 0.25rem;
  }
  
  /* When showing peek, constrain container width to show only small peek of 4th card */
  .activity-teaser.content-tiles--slider .content-tiles__container--show-peek {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    position: relative;
  }
  
  /* Ensure cards don't shrink when showing peek */
  .activity-teaser.content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
    flex-shrink: 0 !important;
  }

  .activity-teaser.content-tiles--slider .content-tiles__container::-webkit-scrollbar {
    display: none;
  }

  .activity-teaser.content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .activity-teaser.content-tiles--slider .content-tiles__card {
      width: calc((100% - 3rem) / 3.5);
      max-height: 100dvh;
    }

    /* Fill N items to available width (no peek) */
    .activity-teaser.content-tiles--slider .content-tiles__container--fill {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
    }

    .activity-teaser.content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }

    /* Peek: show tiny part of the next card while keeping real overflow for scrolling */
    .activity-teaser.content-tiles--slider .content-tiles__container--show-peek {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
      overflow-x: auto;
    }

    .activity-teaser.content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 767px) {
    .activity-teaser.content-tiles--slider .content-tiles__container {
      gap: 1rem;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    /* Fill on mobile: size cards by column setting (use mobile vars when set) */
    .activity-teaser.content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0
        min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      width:
        min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      min-width: 0 !important;
    }

    /* Mobile visible items + peek (controlled via settings.items_mobile + settings.peek_amount) */
    .activity-teaser.content-tiles--slider .content-tiles__container--show-peek {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
    }

    .activity-teaser.content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0
        min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      width:
        min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      min-width: 0 !important;
    }
  }

  /* Card Base Styles */
  .activity-teaser .content-tiles__card {
    position: relative;
    border-radius: var(--card-border-radius, 0.375rem);
    overflow: hidden;
    background: var(--section-bg-color, #ffffff);
    box-sizing: border-box;
  }

  /* Grid cards use 100% width, slider cards have their own width */
  .activity-teaser.content-tiles--grid .content-tiles__card {
    width: 100%;
    max-width: 100% !important;
  }

  .activity-teaser .content-tiles__card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
  }

  /* Card Image */
  .activity-teaser .content-tiles__card-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
    box-sizing: border-box;
  }

  .activity-teaser .content-tiles__card-image img,
  .activity-teaser .content-tiles__img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__card-image img,
    .activity-teaser .content-tiles__img {
      max-width: 100%;
      width: 100% !important;
    }
  }

  .activity-teaser .content-tiles__card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    pointer-events: none;
  }

  /* Activity Card */
  .activity-teaser .content-tiles__card--activity {
    position: relative;
    display: block;
    min-height: 0;
  }

  .activity-teaser .content-tiles__card--activity .content-tiles__card-image {
    width: 100%;
    height: 100%;
    border-radius: var(--card-border-radius, 0.375rem) !important;
    overflow: hidden;
  }

  .activity-teaser .content-tiles__card--activity.content-tiles__card--no-image .content-tiles__card-image {
    min-height: 18.75rem;
    max-height: 100dvh;
    background: var(--color-grey-medium, #d9d9d9);
  }
  
  .activity-teaser .content-tiles__card--activity .content-tiles__card-image img,
  .activity-teaser .content-tiles__card--activity .content-tiles__card-image .content-tiles__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Fallback for older browsers that don't support aspect-ratio */
  @supports not (aspect-ratio: 1/1) {
    .activity-teaser .content-tiles__card--activity .content-tiles__card-image {
      min-height: 25rem;
    }
  }

  .activity-teaser .content-tiles__card-tag {
    position: absolute;
    top: 0;
    left: 1.5rem;
    background: #000000;
    color: white;
    padding: 0 0.5rem 0.375rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 0 0 0.3125rem 0.3125rem;
    z-index: 3;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .activity-teaser .content-tiles__card-tag-spacer {
    display: block;
    height: 0.75rem;
    width: 100%;
    flex-shrink: 0;
  }

  .activity-teaser .content-tiles__card-tag-text {
    display: block;
    line-height: 1;
    color: white;
    font-weight: 500;
  }

  @media (max-width: 1023px) {
    .activity-teaser .content-tiles__card--activity.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 17.5rem;
    }
    .activity-teaser .content-tiles__card-tag {
      left: 1.25rem;
      font-size: 0.875rem;
      padding: 0 0.375rem 0.3125rem 0.375rem;
    }
    .activity-teaser .content-tiles__card-tag-spacer {
      height: 0.75rem;
    }
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__card--activity.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 12.5rem;
    }
    .activity-teaser .content-tiles__card-tag {
      left: 0.75rem;
      font-size: 0.625rem;
      padding: 0 0.375rem 0.25rem 0.375rem;
    }
    .activity-teaser .content-tiles__card-tag-spacer {
      height: 0.625rem;
    }
  }
/* END_SECTION:activity-teaser */

/* START_SECTION:anchor-target (INDEX:2) */
.anchor-target {
    display: block;
    height: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
  }
/* END_SECTION:anchor-target */

/* START_SECTION:article (INDEX:4) */
.article-content {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
  }

  .article-content__body {
    line-height: 1.7;
  }

  .article-content__body p {
    margin-top: 0;
    margin-bottom: 1em;
  }

  .article-content__body blockquote {
    border-left: 3px solid var(--color-primary, #000);
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
  }

  .article-content__body img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: 6px;
  }

  @media (max-width: 767px) {
    .article-content {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
  }
/* END_SECTION:article */

/* START_SECTION:blog-archive-overview (INDEX:5) */
.blog-archive-overview {
    background-color: var(--ba-bg, #ffffff);
    color: var(--ba-text, #000000);
    width: 100%;
    max-width: 100%;
    min-width: 0; /* critical for grid parents: allow shrinking so horizontal scroll works inside */
    overflow-x: hidden; /* prevent page-wide horizontal scroll */
  }

  .blog-archive-overview,
  .blog-archive-overview * {
    box-sizing: border-box;
  }

  /* Custom element must be block-level, otherwise it shrink-to-fits and breaks horizontal scrolling on mobile */
  .blog-archive-overview blog-archive-overview {
    display: block;
    width: 100%;
    max-width: 100%;
  }


  .blog-archive-overview__sticky-nav {
    background-color: var(--ba-bg, #ffffff);
    position: sticky;
    top: 0;
    z-index: 38;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    padding: 1rem;
    overflow-x: hidden;
    min-width: 0;
  }

  .blog-archive-overview__categories {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
    overscroll-behavior-x: contain;
  }

  .blog-archive-overview__categories::-webkit-scrollbar {
    display: none;
  }

  /* Filter buttons use global .btn--outline - section-specific active state */
  .blog-archive-overview__filter-btn {
    white-space: nowrap;
  }

  .blog-archive-overview__filter-btn:hover,
  .blog-archive-overview__filter-btn[aria-pressed="true"],
  .blog-archive-overview__filter-btn.active {
    background-color: var(--ba-text, #000000);
    color: var(--ba-bg, #ffffff);
  }

  .blog-archive-overview__grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .blog-archive-overview__row {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
  }

  @media (min-width: 1024px) {
    .blog-archive-overview__row {
      flex-direction: row;
      gap: 2.5rem;
    }

    .blog-archive-overview__row--first .blog-archive-overview__card {
      flex: 1;
    }

    .blog-archive-overview__row:not(.blog-archive-overview__row--first) .blog-archive-overview__card {
      flex: 1;
    }
  }

  .blog-archive-overview__card {
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    overflow: hidden;
    background-color: var(--card-bg, #f7f7f7);
    color: var(--card-text, #000000);
    width: 100%;
    max-width: 100%;
  }

  .blog-archive-overview__card-link {
    color: var(--card-text, #000000);
    text-decoration: none;
  }

  .blog-archive-overview__card-link:hover {
    opacity: 0.8;
  }

  .blog-archive-overview__card-text {
    color: var(--card-text, #000000);
  }

  .blog-archive-overview__tag {
    background-color: var(--tag-bg, #f7f7f7);
    border-color: var(--tag-border, #000000);
  }

  .blog-archive-overview__tag-text {
    color: var(--tag-text, #000000);
  }

  .blog-archive-overview__tag-list {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .blog-archive-overview__tag-list::-webkit-scrollbar {
    display: none;
  }

  .blog-archive-overview__button {
    background-color: var(--button-bg, #ffffff);
    border-color: var(--button-border, #000000);
    color: var(--button-text, #000000);
  }

  .blog-archive-overview__button:hover {
    opacity: 0.9;
  }

  @media (max-width: 1023px) {
    .blog-archive-overview__card--featured {
      display: flex;
      flex-direction: column;
    }

    .blog-archive-overview__card:not(.blog-archive-overview__card--featured) .blog-archive-overview__content {
      justify-content: flex-start;
    }
  }

  /* ── Tablet (768px – 1023px) ── */
  @media (min-width: 768px) and (max-width: 1023px) {
    .blog-archive-overview__row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .blog-archive-overview__card--featured {
      flex-direction: column;
    }

    .blog-archive-overview__image-wrapper--featured,
    .blog-archive-overview__image-wrapper--regular {
      height: 18.75rem;
      max-height: 100dvh;
    }
  }

  @media (min-width: 1024px) {
    .blog-archive-overview__card--featured {
      display: flex;
      flex-direction: row;
    }

    .blog-archive-overview__card--featured .blog-archive-overview__image-wrapper {
      flex-shrink: 0;
      width: 50%;
      max-width: 50%;
      order: 2;
    }

    .blog-archive-overview__card--featured .blog-archive-overview__content {
      flex: 1;
      width: 50%;
      order: 1;
    }
  }

  .blog-archive-overview__image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .blog-archive-overview__image-wrapper--featured {
    height: 33.25rem;
    max-height: 100dvh;
  }

  .blog-archive-overview__image-wrapper--regular {
    height: 34.125rem;
    max-height: 100dvh;
  }

  @media (max-width: 767px) {
    .blog-archive-overview__image-wrapper--featured,
    .blog-archive-overview__image-wrapper--regular {
      height: 26.5625rem;
      max-height: 100dvh;
    }
  }

  .blog-archive-overview__media-stack {
    position: absolute;
    inset: 0;
  }

  .blog-archive-overview__media-mask {
    position: absolute;
    overflow: hidden;
    background-color: transparent;
    -webkit-mask-image: var(--ba-mask-image);
    mask-image: var(--ba-mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    inset: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .blog-archive-overview__media-mask--featured-primary {
    border-radius: 0.3125rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .blog-archive-overview__media-mask--featured-secondary {
    border-radius: 0.375rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .blog-archive-overview__media-mask--regular {
    border-radius: 0.3125rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
  }


  .blog-archive-overview__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .blog-archive-overview__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .blog-archive-overview__load-more {
    transition: background-color 0.2s, color 0.2s;
  }

  .blog-archive-overview__load-more:hover {
    background-color: var(--ba-text, #000000);
    color: var(--ba-bg, #ffffff);
  }

  .blog-archive-overview__load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .blog-archive-overview__excerpt {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
/* END_SECTION:blog-archive-overview */

/* START_SECTION:blog-article-teaser (INDEX:6) */
div.blog-article-teaser {
    background-color: var(--section-bg-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
    width: 100%;
    box-sizing: border-box;
    color: var(--section-text-color);
    max-width: 100%;
    min-width: 0; /* allow shrinking inside grid parents */
    overflow-x: hidden; /* prevent page-wide horizontal scroll */
  }

  div.blog-article-teaser,
  div.blog-article-teaser * {
    box-sizing: border-box;
  }

  /* Custom element must be block-level, otherwise it can shrink-to-fit and cause horizontal overflow */
  div.blog-article-teaser blog-article-teaser {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  @media (max-width: 767px) {
    div.blog-article-teaser {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
  }

  .blog-article-teaser__inner {
    width: 100%;
    min-width: 0;
  }

  /* In slider mode: extend the slider wrapper to the right viewport edge.
     content-container--full-right defines --content-container-left-offset at each
     breakpoint (in @layer base). We repeat the layout properties here (unlayered)
     so they win over the generic rules. */
  .blog-article-teaser--slider .blog-article-teaser__slider-wrapper {
    max-width: none;
    margin-left: var(--content-container-left-offset, 1.25rem);
    margin-right: 0;
    width: calc(100% - var(--content-container-left-offset, 1.25rem));
    overflow-x: visible;
  }

  .blog-article-teaser__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }

  .blog-article-teaser__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .blog-article-teaser__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .blog-article-teaser__subtitle {
    margin: 0;
    color: var(--section-text-color);
  }

  @media (max-width: 767px) {
    .blog-article-teaser__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 24px;
    }

    .blog-article-teaser__title {
      font-size: 24px;
    }
  }

  .blog-article-teaser__controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
    color: var(--section-text-color);
  }

  .blog-article-teaser__controls--mobile {
    display: none;
  }

  .blog-article-teaser__controls--desktop {
    display: flex;
  }

  @media (max-width: 767px) {
    .blog-article-teaser__controls--desktop {
      display: none !important;
    }

    .blog-article-teaser__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-top: 0;
      width: 100%;
    }
  }

  .blog-article-teaser__control {
    width: 48px;
    height: 48px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .blog-article-teaser__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .blog-article-teaser__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .blog-article-teaser__control svg {
    width: 24px;
    height: 24px;
  }

  .blog-article-teaser__slider-wrapper {
    overflow-x: visible;
  }

  .blog-article-teaser__container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Slider Layout */
  .blog-article-teaser--slider .blog-article-teaser__container {
    display: flex;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 4px;
  }

  .blog-article-teaser--slider .blog-article-teaser__container::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 767px) {
    .blog-article-teaser--slider .blog-article-teaser__container {
      gap: 9px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  .blog-article-teaser__card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: transparent;
  }

  .blog-article-teaser--variant-dark .blog-article-teaser__card {
    background-color: #000000;
    color: #ffffff;
  }

  .blog-article-teaser--variant-light .blog-article-teaser__card {
    background-color: var(--color-grey-light, #f7f7f7);
    color: #000000;
  }

  .blog-article-teaser--slider .blog-article-teaser__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 382px;
    max-width: 382px;
    min-width: 382px;
    align-self: stretch;
  }

  @media (max-width: 767px) {
    .blog-article-teaser--slider .blog-article-teaser__card {
      width: 295px;
      max-width: 295px;
      min-width: 295px;
      flex-shrink: 0;
    }
  }

  .blog-article-teaser__card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
  }

  .blog-article-teaser__card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--card-image-position, center center);
  }

  .blog-article-teaser__card-content {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    min-height: 0;
  }

  .blog-article-teaser__tag-list {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Pin CTA to bottom so all cards align, keep left-aligned */
  .blog-article-teaser__card-cta {
    margin-top: auto;
    align-self: flex-start;
  }

  .blog-article-teaser--variant-dark .blog-article-teaser__card-content {
    background-color: #000000;
  }

  .blog-article-teaser--variant-dark .blog-article-teaser__card-tag {
    background-color: #000000;
    color: #ffffff;
    border: 1.213px solid #ffffff;
    padding: 8px 16px;
    border-radius: 5px;
    display: inline-block;
    width: fit-content;
  }

  .blog-article-teaser--variant-dark .blog-article-teaser__card-title {
    color: #ffffff;
  }

  .blog-article-teaser--variant-dark .blog-article-teaser__card-meta {
    color: #ffffff;
  }

  .blog-article-teaser--variant-light .blog-article-teaser__card-content {
    background-color: var(--color-grey-light, #f7f7f7);
  }

  .blog-article-teaser--variant-light .blog-article-teaser__card-tag {
    background-color: var(--color-grey-light, #f7f7f7);
    color: #000000;
    border: 1.213px solid #000000;
    padding: 8px 16px;
    border-radius: 5px;
    display: inline-block;
    width: fit-content;
  }

  .blog-article-teaser--variant-light .blog-article-teaser__card-title {
    color: #000000;
  }

  .blog-article-teaser--variant-light .blog-article-teaser__card-meta {
    color: #000000;
  }

  .blog-article-teaser__card-link {
    text-decoration: none;
    color: inherit;
  }

  .blog-article-teaser__card-cta-text {
    white-space: nowrap;
  }

  .blog-article-teaser__card-cta-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }
/* END_SECTION:blog-article-teaser */

/* START_SECTION:blog-header (INDEX:7) */
.blog-header {
    @apply w-full;
    @apply relative;
  }

  .blog-header__inner {
    @apply w-full;
    @apply flex flex-col;
  }

  .blog-header__image-wrapper {
    @apply w-full;
    @apply relative;
    @apply overflow-hidden;
  }

  .blog-header__image-wrapper .image {
    @apply w-full;
    @apply relative;
    aspect-ratio: 21 / 9;
    @apply overflow-hidden;
  }

  .blog-header__image-wrapper .image img {
    @apply w-full h-full;
    @apply object-cover;
  }

  .blog-header__content {
    @apply w-full;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 80px;
  }

  @media (max-width: 767px) {
    .blog-header__content {
      padding-top: 48px;
      gap: 32px;
    }
  }

  .blog-header__content-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
  }

  .blog-header__breadcrumbs {
    @apply w-full;
  }

  .blog-header__breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .blog-header__breadcrumb-link {
    @apply text-regular-normal;
    @apply text-primary;
  }

  .blog-header__breadcrumb-separator {
    @apply text-small-normal;
    @apply text-primary;
    display: flex;
    align-items: center;
  }

  .blog-header__title {
    @apply h1;
    @apply m-0;
    text-transform: uppercase;
  }

  .blog-header__excerpt {
    @apply text-regular-normal;
    @apply text-primary;
    max-width: 816px;
  }

  .blog-header__metadata {
    @apply text-small-normal;
    @apply text-primary;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .blog-header__date {
    @apply text-small-normal;
    @apply text-primary;
  }

  .blog-header__author {
    @apply text-small-normal;
    @apply text-primary;
  }
/* END_SECTION:blog-header */

/* START_SECTION:blog (INDEX:8) */
.blog-listing {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
  }

  @media (max-width: 767px) {
    .blog-listing {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
  }
/* END_SECTION:blog */

/* START_SECTION:bundle-builder (INDEX:10) */
bundle-builder {
    & .steps-navigation__buttons {
      &::-webkit-scrollbar {
        display: none;
      }

      -ms-overflow-style: none;
      scrollbar-width: none;

      & > button {
        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        border: 1px solid var(--color-primary);
        cursor: pointer;
        opacity: 1;
        background-color: var(--color-white);
        color: var(--color-primary);
        border-color: var(--color-primary);

        &:hover {
          opacity: 0.8;
        }

        &.steps-navigation__button--active {
          background-color: var(--color-primary);
          color: var(--color-white);
          border-color: var(--color-primary);
        }

        &.steps-navigation__button--done {
          background-color: var(--color-primary);
          color: var(--color-white);
          border-color: var(--color-primary);
        }

        &.steps-navigation__button--invalid {
          background-color: var(--btn-outline-bg);
          color: var(--btn-outline-text);
          opacity: 0.5;
        }

        &.steps-navigation__button--inactive {
          background-color: var(--btn-outline-bg);
          color: var(--btn-outline-text);
          cursor: not-allowed;
          opacity: 0.5;
        }

        &.steps-navigation__button--locked {
          background-color: var(--btn-outline-bg);
          color: var(--btn-outline-text);
          cursor: not-allowed;
          opacity: 0.5;
        }
      }
    }

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

      -ms-overflow-style: none;
      scrollbar-width: none;
      transition: height 0.3s ease 0.15s;
    }

    & .bundle-builder__footer-summary-wrapper.is-open {
      max-height: 290px;
    }

    & .bundle-builder__footer-summary {
      display: flex;
    }

    & .bundle-builder__footer-summary.hidden {
      display: none;
    }

    & .bundle-builder__footer-summary-list {
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 9999px;
      }
    }

    & .bundle-builder__footer-summary-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .bundle-builder__footer-bundle-toggle[disabled],
    & .bundle-builder__footer-bundle-toggle[aria-disabled='true'] {
      pointer-events: none;
    }

    & .bundle-builder__footer-bundle-toggle-icon.is-open {
      transform: rotate(180deg);
    }

    & .bundle-builder__next-btn-spinner {
      display: none;
      width: 1em;
      height: 1em;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 9999px;
      animation: bundle-builder-next-spin 0.7s linear infinite;
    }

    & .bundle-builder__next-btn-spinner.is-active {
      display: inline-block;
    }

    @keyframes bundle-builder-next-spin {
      to {
        transform: rotate(360deg);
      }
    }

    & .bundle-builder-rating {
      display: flex;
      align-items: center;
      justify-content: end;

      & .jdgm-prev-badge__text {
        visibility: visible;
      }
    }
  }
/* END_SECTION:bundle-builder */

/* START_SECTION:cart (INDEX:11) */
.cart-section {
    padding: 64px 112px 112px;
  }

  .cart-section__container {
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
  }

  .cart-section__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: fit-content;
    max-width: 216px;
    margin-bottom: 41px;
  }

  .cart-section__title {
    font-family: var(--font-primary--family);
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-primary, #000);
    margin: 0;
  }

  .cart-section__continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: var(--text-regular, 16px);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-primary, #000);
    text-decoration: none;
  }

  .cart-section__continue:hover {
    opacity: 0.7;
  }

  .cart-section__content {
    display: grid;
    grid-template-columns: 1fr 537px;
    gap: 40px;
    align-items: flex-start;
  }

  .cart-section__products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .cart-section__products--empty {
    grid-column: 1 / -1;
  }

  .cart-section__content:has(.cart-section__products--empty) .cart-section__sidebar {
    display: none;
  }

  .cart-section__container:has(.cart-section__products--empty) .cart-section__header {
    display: none;
  }

  /* Lock and show spinner during cart updates; fade out on queue-end */
  html.cart-products-updating .cart-section__products {
    pointer-events: none;
  }

  html.cart-products-updating .cart-section__products::before,
  html.cart-products-updating .cart-section__products::after {
    opacity: 1;
    transition: opacity 150ms ease-out;
  }

  html.cart-products-fadeout .cart-section__products::before,
  html.cart-products-fadeout .cart-section__products::after {
    opacity: 0;
  }

  html.cart-products-updating .cart-section__products::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  html.cart-products-updating .cart-section__products::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -16px 0 0 -16px;
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary, #000);
    border-radius: 50%;
    animation: cart-spinner 0.6s linear infinite;
    z-index: 3;
  }

  @keyframes cart-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .cart-section__sidebar {
    position: sticky;
    top: 120px;
  }

  .cart-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    min-height: 400px;
  }

  .cart-section__empty .cart-section__title {
    margin-bottom: 16px;
  }

  .cart-section__empty-message {
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-primary, #000);
    margin: 0 0 32px;
    max-width: 400px;
  }

  .cart-section__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 12px 32px;
    background-color: var(--color-primary, #000);
    border: 1px solid var(--color-primary, #000);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-primary--family);
    font-size: var(--text-regular, 16px);
    font-weight: 600;
    line-height: 1;
    color: var(--color-white, #fff);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-base, 300ms) ease,
                color var(--motion-base, 300ms) ease;
  }

  .cart-section__empty-cta:hover {
    background-color: var(--color-white, #fff);
    color: var(--color-primary, #000);
  }

  @media (max-width: 1200px) {
    .cart-section {
      padding: 40px 64px 80px;
    }

    .cart-section__content {
      grid-template-columns: 1fr 400px;
      gap: 32px;
    }
  }

  @media (max-width: 991px) {
    .cart-section__content {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .cart-section__sidebar {
      position: static;
    }
  }

  @media (max-width: 767px) {
    .cart-section {
      padding: 40px 20px;
    }

    .cart-section__header {
      max-width: none;
      width: auto;
      margin-bottom: 41px;
    }

    .cart-section__title {
      font-size: 40px;
      line-height: 1.2;
    }


    .cart-section__products {
      padding-bottom: 24px;
      border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
    }

    .cart-section__empty {
      padding: 40px 20px;
      min-height: 300px;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:category-product-grid (INDEX:12) */
.category-product-grid-section {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .category-product-grid-section__header {
    margin-bottom: 2rem;
  }

  .category-product-grid-section__title {
    margin: 0 0 0.5rem;
    color: var(--section-text-color);
  }

  .category-product-grid-section__subtitle {
    color: var(--section-text-color);
    opacity: 0.8;
  }

  @media (max-width: 767px) {
    .category-product-grid-section {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    .category-product-grid-section__header {
      margin-bottom: 2rem;
    }
  }

  /* Product Group */
  .category-product-grid {
    margin-bottom: var(--group-gap, 3rem);
  }

  .category-product-grid:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 767px) {
    .category-product-grid {
      margin-bottom: calc(var(--group-gap, 3rem) * 0.75);
    }
  }

  .category-product-grid,
  .category-product-grid * {
    box-sizing: border-box;
  }

  .category-product-grid category-product-grid {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .category-product-grid__inner {
    width: 100%;
  }

  .category-product-grid--slider .category-product-grid__controls--desktop {
    margin-right: max(1.25rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
  }

  @media (min-width: 1024px) {
    .category-product-grid--slider .category-product-grid__controls--desktop {
      margin-right: max(2rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1280px) {
    .category-product-grid--slider .category-product-grid__controls--desktop {
      margin-right: max(3rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1536px) {
    .category-product-grid--slider .category-product-grid__controls--desktop {
      margin-right: max(4rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  /* Header */
  .category-product-grid__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
  }

  .category-product-grid__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
  }

  .category-product-grid__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .category-product-grid__subtitle {
    margin: 0;
    color: var(--section-text-color);
    opacity: 0.8;
  }

  @media (max-width: 767px) {
    .category-product-grid__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
    .category-product-grid__header-text {
      gap: 1rem;
    }
    .category-product-grid .category-product-grid__subtitle {
      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 140% !important;
    }
  }

  /* Controls */
  .category-product-grid__controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
  }

  .category-product-grid__controls--mobile {
    display: none;
  }

  .category-product-grid__controls--desktop {
    display: flex;
  }

  .category-product-grid__control {
    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 0.5625rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .category-product-grid__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .category-product-grid__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .category-product-grid__control svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (max-width: 767px) {
    .category-product-grid__controls--desktop {
      display: none !important;
    }
    .category-product-grid__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
    }
    .category-product-grid__controls {
      gap: 1rem;
    }
  }

  @media (min-width: 768px) {
    .category-product-grid__controls--desktop {
      display: flex;
    }
    .category-product-grid__controls--mobile {
      display: none !important;
    }
  }

  /* Filters container — spacing between filters row and products below */
  .category-product-grid__filters-container {
    margin-bottom: 2rem;
  }

  /* Filters */
  .category-product-grid__filters {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    overscroll-behavior-x: contain;
  }

  .category-product-grid__filters::-webkit-scrollbar {
    display: none;
  }

  .category-product-grid__filter-btn {
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    /* Figma: px 32 / py 22 */
    padding: 1.375rem 2rem;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    line-height: 100%;
  }

  .category-product-grid__filter-btn:hover {
    opacity: 0.9;
  }

  .category-product-grid__filter-btn[aria-pressed='true'],
  .category-product-grid__filter-btn.active {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
  }

  @media (max-width: 767px) {
    .category-product-grid__filters {
      gap: 0.625rem;
    }
    .category-product-grid__filter-btn {
      padding: 1.375rem 2rem;
      font-size: 1rem;
    }
  }

  /* Products container - shared */
  .category-product-grid__products {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Card wrapper base */
  .category-product-grid__card-wrapper {
    width: 100%;
    min-width: 0;
  }

  /* ============================================
     GRID MODE
     ============================================ */
  .category-product-grid--grid .category-product-grid__products {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 1.5rem;
    align-items: stretch; /* Equal height cards in each row */
  }

  /* Ensure cards fill their wrapper height */
  .category-product-grid--grid .category-product-grid__card-wrapper {
    display: flex;
  }

  .category-product-grid--grid .category-product-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .category-product-grid--has-highlight .category-product-card__media {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Highlight card in grid - spans 2 columns for 2/3 width in 3-col grid */
  .category-product-grid--grid .category-product-grid__card-wrapper--highlight {
    grid-column: span 2;
  }

  /* For 4-column grid, highlight still spans 2 */
  .category-product-grid--grid[style*="--grid-columns: 4"] .category-product-grid__card-wrapper--highlight {
    grid-column: span 2;
  }

  /* For 2-column grid, highlight spans full width */
  .category-product-grid--grid[style*="--grid-columns: 2"] .category-product-grid__card-wrapper--highlight {
    grid-column: span 2;
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .category-product-grid--grid .category-product-grid__products {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .category-product-grid--grid .category-product-grid__card-wrapper--highlight {
      grid-column: span 2;
    }
  }

  @media (max-width: 767px) {
    /* Reset slider inner container to normal content-container on mobile grid mode */
    .category-product-grid--slider[data-mobile-display-mode="grid"] .category-product-grid__inner {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: min(calc(100% - 2.5rem), var(--max-width-container, 100rem));
    }

    /* Mobile Grid Mode — Figma: 0.875rem row gap, 1rem column gap */
    .category-product-grid[data-mobile-display-mode="grid"] .category-product-grid__products {
      display: grid !important;
      grid-template-columns: repeat(var(--mobile-grid-columns, 2), 1fr);
      gap: 0.875rem 1rem;
      overflow-x: visible;
      scroll-snap-type: none;
    }

    .category-product-grid[data-mobile-display-mode="grid"] .category-product-grid__card-wrapper {
      flex: none;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    /* Mobile masonry highlight - only when enabled */
    .category-product-grid[data-mobile-display-mode="grid"][data-mobile-masonry="true"] .category-product-grid__card-wrapper--highlight {
      grid-column: span var(--mobile-grid-columns, 2);
    }

    /* Disable masonry on mobile when setting is false */
    .category-product-grid[data-mobile-display-mode="grid"][data-mobile-masonry="false"] .category-product-grid__card-wrapper--highlight {
      grid-column: span 1;
    }

    .category-product-grid[data-mobile-display-mode="grid"][data-mobile-masonry="false"] .category-product-grid__card-wrapper--highlight .category-product-card__image {
      max-width: 100%;
    }

    .category-product-grid[data-mobile-display-mode="grid"][data-mobile-masonry="false"] .category-product-grid__card-wrapper--highlight .category-product-card__content {
      max-width: 100%;
    }

    /* Mobile 1-column grid: highlight always spans 1 */
    .category-product-grid[data-mobile-display-mode="grid"][style*="--mobile-grid-columns: 1"] .category-product-grid__card-wrapper--highlight {
      grid-column: span 1;
    }

    /* Mobile Slider Mode */
    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__inner {
      margin-left: 1.25rem;
      margin-right: 0;
      width: calc(100% - 1.25rem);
      max-width: none;
    }

    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__controls--mobile {
      padding-right: 1.25rem;
    }

    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__products {
      display: flex !important;
      gap: 1rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__products::-webkit-scrollbar {
      display: none;
    }

    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__card-wrapper {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: calc((100% - 1rem) / 1.15);
      min-width: calc((100% - 1rem) / 1.15);
      max-width: calc((100% - 1rem) / 1.15);
    }

    .category-product-grid[data-mobile-display-mode="slider"] .category-product-grid__card-wrapper--highlight {
      width: calc((100% - 1rem) / 1.15);
      min-width: calc((100% - 1rem) / 1.15);
      max-width: calc((100% - 1rem) / 1.15);
    }

    /* When mobile masonry is disabled, remove highlight card styles on mobile */
    .category-product-grid[data-mobile-masonry="false"] .category-product-card--highlight .category-product-card__image {
      max-width: 100%;
    }
    .category-product-grid[data-mobile-masonry="false"] .category-product-card--highlight .category-product-card__content {
      max-width: 100%;
    }
  }

  /* ============================================
     SLIDER MODE (Desktop)
     ============================================ */
  .category-product-grid--slider .category-product-grid__inner {
    overflow: hidden;
    --_slider-left: max(1.25rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    margin-left: var(--_slider-left);
    margin-right: 0;
    width: calc(100% - var(--_slider-left));
    max-width: none;
  }

  @media (min-width: 1024px) {
    .category-product-grid--slider .category-product-grid__inner {
      --_slider-left: max(2rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1280px) {
    .category-product-grid--slider .category-product-grid__inner {
      --_slider-left: max(3rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1536px) {
    .category-product-grid--slider .category-product-grid__inner {
      --_slider-left: max(4rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  .category-product-grid--slider .category-product-grid__products {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    align-items: stretch; /* Equal height cards */
  }

  .category-product-grid--slider .category-product-grid__products::-webkit-scrollbar {
    display: none;
  }

  .category-product-grid--slider .category-product-grid__card-wrapper {
    flex: 0 0 calc((100% - 4.5rem) / 3.4);
    scroll-snap-align: start;
    display: flex;
  }

  .category-product-grid--slider .category-product-card {
    flex: 1;
  }

  /* Highlight card in slider - double width + 1 gap */
  .category-product-grid--slider .category-product-grid__card-wrapper--highlight {
    flex-basis: calc((100% - 4.5rem) / 3.4 * 2 + 1.5rem);
  }

  @media (max-width: 767px) {
    .category-product-grid--slider .category-product-grid__products {
      gap: 1rem;
    }
    .category-product-grid--slider .category-product-grid__card-wrapper {
      /* Show ~50% peek of next card (1.5 cards visible) */
      width: calc((100% - 1rem) / 1.5);
      min-width: calc((100% - 1rem) / 1.5);
      max-width: calc((100% - 1rem) / 1.5);
    }
    .category-product-grid--slider .category-product-grid__card-wrapper--highlight {
      width: calc((100% - 1rem) / 1.5);
      min-width: calc((100% - 1rem) / 1.5);
      max-width: calc((100% - 1rem) / 1.5);
    }
  }

  /* No results */
  .category-product-grid__no-results {
    text-align: center;
    padding: 3rem 1.5rem;
    opacity: 0.6;
  }

  /* View All Link */
  .category-product-grid__view-all {
    margin-top: 2rem;
    text-align: center;
  }

  .category-product-grid__view-all-link {
    display: inline-block;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
  }

  .category-product-grid__view-all-link:hover {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
  }
/* END_SECTION:category-product-grid */

/* START_SECTION:collection (INDEX:13) */
.collection-section {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .collection-section,
  .collection-section * {
    box-sizing: border-box;
  }

  @media (max-width: 767px) {
    .collection-section {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
  }

  /* Section Header - Figma: generous top spacing, consistent vertical spacing */
  .collection-section__header {
    margin-bottom: 3rem;
    text-align: center;
  }

  .collection-section__title {
    margin: 0 0 0.5rem;
    color: var(--section-text-color);
  }

  .collection-section__subtitle {
    margin: 0;
    color: var(--section-text-color);
    opacity: 0.8;
  }

  @media (max-width: 767px) {
    .collection-section__header {
      margin-bottom: 2rem;
    }
    .collection-section__title {
      margin-bottom: 0.375rem;
    }
  }

  /* Empty state */
  .collection-section__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    opacity: 0.6;
  }

  /* Auto-group (single-pass CSS order grid) */
  .collection-autogroup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(max(var(--card-min-width, 15.625rem), calc((100% - (var(--grid-columns, 3) - 1) * 1.5rem) / var(--grid-columns, 3))), 100%), 1fr));
    gap: 1.5rem;
  }

  .collection-autogroup__heading {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--group-gap, 4rem);
    padding-bottom: 0.5rem;
    color: var(--section-text-color);
    scroll-margin-top: var(--scroll-offset, 10rem);
  }

  .collection-autogroup__heading:first-child {
    padding-top: 0;
  }

  .collection-autogroup .collection-group__card-wrapper--highlight {
    grid-column: span 2;
  }

  @media (max-width: 767px) {
    .collection-autogroup {
      grid-template-columns: repeat(var(--mobile-grid-columns, 2), 1fr);
      gap: 1rem;
    }

    .collection-autogroup__heading {
      padding-top: calc(var(--group-gap, 4rem) * 0.75);
      padding-bottom: 0.25rem;
      font-size: 1.125rem !important;
      font-weight: 600 !important;
      line-height: 120% !important;
    }
  }

  /* Product Group */
  .collection-group {
    margin-bottom: var(--group-gap, 4rem);
  }

  .collection-group:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 767px) {
    .collection-group {
      margin-bottom: calc(var(--group-gap, 4rem) * 0.75);
    }
  }

  .collection-group collection-product-group {
    display: block;
    width: 100%;
  }

  .collection-group__inner {
    width: 100%;
  }

  .collection-group--slider .collection-group__controls--desktop {
    margin-right: max(1.25rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
  }

  @media (min-width: 1024px) {
    .collection-group--slider .collection-group__controls--desktop {
      margin-right: max(2rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1280px) {
    .collection-group--slider .collection-group__controls--desktop {
      margin-right: max(3rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1536px) {
    .collection-group--slider .collection-group__controls--desktop {
      margin-right: max(4rem, calc((100vw - var(--max-width-container, 100rem)) / 2));
    }
  }

  /* Group Header - Figma: consistent vertical spacing title → subtitle → filters */
  .collection-group__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
  }

  .collection-group__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
  }

  .collection-group__title {
    margin: 0;
    color: var(--section-text-color);
    scroll-margin-top: var(--scroll-offset, 10rem);
  }

  .collection-group__subtitle {
    margin: 0;
    color: var(--section-text-color);
    opacity: 0.8;
  }

  @media (max-width: 767px) {
    .collection-group__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .collection-group__header-text {
      gap: 1rem;
    }
    .collection-group .collection-group__subtitle {
      font-size: 1rem !important;
      font-weight: 400 !important;
      line-height: 140% !important;
    }
  }

  /* Controls */
  .collection-group__controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
  }

  .collection-group__controls--mobile {
    display: none;
  }

  .collection-group__controls--desktop {
    display: flex;
  }

  .collection-group__control {
    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 0.5625rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .collection-group__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .collection-group__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .collection-group__control svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (max-width: 767px) {
    .collection-group__controls--desktop {
      display: none !important;
    }
    .collection-group__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 1rem;
      width: 100%;
    }
    .collection-group__controls {
      gap: 1rem;
    }
  }

  @media (min-width: 768px) {
    .collection-group__controls--desktop {
      display: flex;
    }
    .collection-group__controls--mobile {
      display: none !important;
    }
  }

  /* Filters - Figma: significant vertical margin between filters and product grid */
  .collection-group__filters {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    padding-bottom: 0.25rem;
    margin-bottom: 2rem;
  }

  .collection-group__filters::-webkit-scrollbar {
    display: none;
  }

  .collection-group__filter-btn {
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    /* Figma: px 32 / py 22 */
    padding: 1.375rem 2rem;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    line-height: 100%;
  }

  .collection-group__filter-btn:hover {
    opacity: 0.9;
  }

  .collection-group__filter-btn[aria-pressed='true'],
  .collection-group__filter-btn.active {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
  }

  @media (max-width: 767px) {
    .collection-group__filters {
      margin-bottom: 1.25rem;
      gap: 0.625rem;
    }
    .collection-group__filter-btn {
      padding: 1.375rem 2rem;
      font-size: 1rem;
    }
  }

  /* Products container - shared */
  .collection-group__products {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Card wrapper base */
  .collection-group__card-wrapper {
    width: 100%;
    min-width: 0;
  }

  /* ============================================
     GRID MODE
     ============================================ */
  .collection-group--grid .collection-group__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(max(var(--card-min-width, 15.625rem), calc((100% - (var(--grid-columns, 3) - 1) * 1.5rem) / var(--grid-columns, 3))), 100%), 1fr));
    gap: 1.5rem;
    max-height: 100dvh;
    align-items: stretch; /* Equal height cards in each row */
  }

  /* Ensure cards fill their wrapper height */
  .collection-group--grid .collection-group__card-wrapper {
    display: flex;
  }

  /* Highlight card specific styling */
  .collection-group--has-highlight .category-product-card__media {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Highlight card in grid - spans 2 columns for 2/3 width in 3-col grid */
  .collection-group--grid .collection-group__card-wrapper--highlight {
    grid-column: span 2;
  }

  /* For 4-column grid, highlight still spans 2 */
  .collection-group--grid[style*="--grid-columns: 4"] .collection-group__card-wrapper--highlight {
    grid-column: span 2;
  }

  /* For 2-column grid, highlight spans full width */
  .collection-group--grid[style*="--grid-columns: 2"] .collection-group__card-wrapper--highlight {
    grid-column: span 2;
  }

  @media (max-width: 767px) {
    /* Mobile Grid Mode */
    .collection-group[data-mobile-display-mode="grid"] .collection-group__products {
      display: grid !important;
      grid-template-columns: repeat(var(--mobile-grid-columns, 2), 1fr);
      gap: 1rem;
      overflow-x: visible;
      scroll-snap-type: none;
    }
    .collection-group[data-mobile-display-mode="grid"] .collection-group__card-wrapper {
      width: 100%;
      min-width: unset;
      max-width: unset;
      flex: unset;
    }
    /* Mobile grid with masonry enabled: highlight spans full width */
    .collection-group[data-mobile-display-mode="grid"][data-mobile-masonry="true"] .collection-group__card-wrapper--highlight {
      grid-column: span var(--mobile-grid-columns, 2);
    }
    /* Mobile grid with masonry disabled: highlight behaves like normal card */
    .collection-group[data-mobile-display-mode="grid"][data-mobile-masonry="false"] .collection-group__card-wrapper--highlight {
      grid-column: span 1;
    }
    /* Mobile 1-column grid: highlight always spans 1 */
    .collection-group[data-mobile-display-mode="grid"][style*="--mobile-grid-columns: 1"] .collection-group__card-wrapper--highlight {
      grid-column: span 1;
    }

    /* Mobile Slider Mode */
    .collection-group[data-mobile-display-mode="slider"] .collection-group__inner {
      margin-left: 1.25rem;
      margin-right: 0;
      width: calc(100% - 1.25rem);
      max-width: none;
    }

    .collection-group[data-mobile-display-mode="slider"] .collection-group__controls--mobile {
      padding-right: 1.25rem;
    }

    .collection-group[data-mobile-display-mode="slider"] .collection-group__products {
      display: flex !important;
      gap: 1rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .collection-group[data-mobile-display-mode="slider"] .collection-group__products::-webkit-scrollbar {
      display: none;
    }
    .collection-group[data-mobile-display-mode="slider"] .collection-group__card-wrapper {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: calc((100% - 1rem) / 1.15);
      min-width: calc((100% - 1rem) / 1.15);
      max-width: calc((100% - 1rem) / 1.15);
    }
    .collection-group[data-mobile-display-mode="slider"] .collection-group__card-wrapper--highlight {
      width: calc((100% - 1rem) / 1.15);
      min-width: calc((100% - 1rem) / 1.15);
      max-width: calc((100% - 1rem) / 1.15);
    }

    /* When mobile masonry is disabled, remove highlight card styles on mobile */
    .collection-group[data-mobile-masonry="false"] .category-product-card--highlight .category-product-card__image {
      max-width: 100%;
    }
    .collection-group[data-mobile-masonry="false"] .category-product-card--highlight .category-product-card__content {
      max-width: 100%;
    }
  }

  /* ============================================
     SLIDER MODE
     ============================================ */
  .collection-group--slider .collection-group__inner {
    overflow: hidden;
    --_slider-left: max(1.25rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    margin-left: var(--_slider-left);
    margin-right: 0;
    width: calc(100% - var(--_slider-left));
    max-width: none;
  }

  @media (min-width: 1024px) {
    .collection-group--slider .collection-group__inner {
      --_slider-left: max(2rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1280px) {
    .collection-group--slider .collection-group__inner {
      --_slider-left: max(3rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  @media (min-width: 1536px) {
    .collection-group--slider .collection-group__inner {
      --_slider-left: max(4rem, calc((100% - var(--max-width-container, 100rem)) / 2));
    }
  }

  .collection-group--slider .collection-group__products {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    align-items: stretch; /* Equal height cards */
  }

  .collection-group--slider .collection-group__products::-webkit-scrollbar {
    display: none;
  }

  .collection-group--slider .collection-group__card-wrapper {
    flex: 0 0 calc((100% - 4.5rem) / 3.4);
    scroll-snap-align: start;
    display: flex;
    max-height: 100dvh;
  }

  /* Highlight card in slider - double width + 1 gap */
  .collection-group--slider .collection-group__card-wrapper--highlight {
    flex-basis: calc((100% - 4.5rem) / 3.4 * 2 + 1.5rem);
  }

  /* Mobile slider styles moved to mobile display mode section below */

  /* Hidden filtered items */
  .collection-group__card-wrapper[data-filtered="true"] {
    display: none !important;
  }

  /* No results */
  .collection-group__no-results {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--section-text-color);
    opacity: 0.7;
  }

  .collection-group__no-results[hidden] {
    display: none;
  }

  /* View All Link */
  .collection-group__view-all {
    margin-top: 2rem;
    text-align: center;
  }

  .collection-group__view-all-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
  }

  .collection-group__view-all-link:hover {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:14) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:content-blocks--blog (INDEX:15) */
.content-blocks--blog {
    background-color: var(--cb-bg, #ffffff);
    color: var(--cb-text, #000000);
  }

  .content-blocks--blog__media-mask {
    -webkit-mask-image: var(--cb-mask-image);
    mask-image: var(--cb-mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .content-blocks--blog__media-mask--fixed {
    aspect-ratio: auto !important;
    height: auto;
  }

  .content-blocks--blog__media-mask--fixed .content-blocks--blog__image--fixed {
    position: relative !important;
    width: 100%;
    height: auto;
    inset: auto;
    max-height: none;
  }

  @media (min-width: 1024px) {
    .content-blocks--blog__media-mask--fixed {
      aspect-ratio: revert-layer !important;
      height: revert;
    }

    .content-blocks--blog__media-mask--fixed .content-blocks--blog__image--fixed {
      position: absolute !important;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }

  .content-blocks--blog__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
  }

  .content-blocks--blog__image--fill {
    object-fit: cover;
    object-position: var(--cb-object-position, 50% 50%);
  }

  .content-blocks--blog__image--fixed {
    object-fit: contain;
    object-position: var(--cb-object-position, 50% 50%);
  }
/* END_SECTION:content-blocks--blog */

/* START_SECTION:content-blocks (INDEX:16) */
.content-blocks {
    background-color: var(--cb-bg, #ffffff);
    color: var(--cb-text, #000000);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
  }

  .content-blocks__list {
    gap: var(--cb-block-gap);
  }

  @media (max-width: 767px) {
    .content-blocks {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    .content-blocks__list {
      gap: calc(var(--cb-block-gap) * 0.67);
    }
  }

  /* Override typography utility colors so --cb-text is respected */
  .content-blocks h1,
  .content-blocks h2,
  .content-blocks h3,
  .content-blocks h4,
  .content-blocks h5,
  .content-blocks h6,
  .content-blocks .text-regular-normal,
  .content-blocks .text-regular-semibold,
  .content-blocks .text-regular-bold {
    color: inherit;
  }

  .content-blocks__media-mask {
    -webkit-mask-image: var(--cb-mask-image);
    mask-image: var(--cb-mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Side-by-side image_text layout: cap image at viewport height.
     Tailwind's `lg:flex-1` sets `flex-basis: 0%`, which causes browsers to
     compute the aspect-ratio'd image's natural cross-size as 0 — collapsing
     it to match the (short) text column. Setting an explicit 50% basis lets
     aspect-ratio compute height against a real width.
     Scoped to `.lg:flex-row` so top/image-only layouts are unaffected. */
  @media (min-width: 1024px) {
    .lg\:flex-row > .content-blocks__media-mask {
      flex: 0 0 50%;
      max-height: 100dvh;
    }

    /* Fixed image_fit ('contain') sets `aspect-ratio: auto` on the container,
       so without this rule the container has no definite height in flex and
       collapses to the text column's height. Re-apply the same aspect so the
       container can grow; the inner img with object-fit: contain still shows
       the full image (letterboxed) — no cropping, just room to be visible. */
    .lg\:flex-row > .content-blocks__media-mask--fixed {
      aspect-ratio: 93 / 91 !important;
    }
  }

  .content-blocks__media-mask--fixed {
    aspect-ratio: auto !important;
    height: auto;
  }

  .content-blocks__media-mask--fixed .content-blocks__image--fixed {
    position: relative !important;
    width: 100%;
    height: auto;
    inset: auto;
    max-height: none;
  }

  @media (min-width: 1024px) {
    .content-blocks__media-mask--fixed {
      aspect-ratio: revert-layer !important;
      height: revert;
    }

    .content-blocks__media-mask--fixed .content-blocks__image--fixed {
      position: absolute !important;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }

  .content-blocks__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
  }

  .content-blocks__image--fill {
    object-fit: cover;
    object-position: var(--cb-object-position, 50% 50%);
  }

  .content-blocks__image--fixed {
    object-fit: contain;
    object-position: var(--cb-object-position, 50% 50%);
  }
/* END_SECTION:content-blocks */

/* START_SECTION:content-tiles (INDEX:17) */
.content-tiles--hidden {
    display: none;
  }
  .content-tiles {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .content-tiles__inner {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* In slider mode: extend the inner container to the right viewport edge.
     content-container--full-right defines --content-container-left-offset at each
     breakpoint (in @layer base). We repeat the layout properties here (unlayered)
     so they win over the generic .content-tiles__inner rules. */
  .content-tiles.content-tiles--slider .content-tiles__inner {
    max-width: none;
    margin-left: var(--content-container-left-offset, 1.25rem);
    margin-right: 0;
    width: calc(100% - var(--content-container-left-offset, 1.25rem));
    overflow-x: visible;
  }

  /* Right-align standalone controls (when no header text) */
  .content-tiles .content-tiles__nav-wrapper > .content-tiles__controls {
    justify-content: flex-end;
  }

  @media (max-width: 767px) {
    .content-tiles__inner {
      overflow-x: visible;
    }
    .content-tiles {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    /* Ensure direct children respect container width on mobile */
    .content-tiles__inner > * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  /* Nav wrapper (header + controls) – spacing below before the cards */
  .content-tiles .content-tiles__nav-wrapper {
    margin-bottom: 1.5rem;
  }

  /* Header */
  .content-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
  }

  .content-tiles__header-text {
    flex: 1;
  }

  .content-tiles__controls {
    flex-shrink: 0;
  }

  .content-tiles__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .content-tiles__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .content-tiles__subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--section-text-color);
  }

  @media (max-width: 767px) {
    .content-tiles__subtitle {
      font-size: 0.875rem;
    }
    .content-tiles__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem;
      margin-bottom: 0;
    }
    .content-tiles__controls--desktop {
      display: none !important;
    }
    .content-tiles__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      width: 100%;
    }
    /* Hide slider controls on mobile when grid is enabled */
    .content-tiles--mobile-grid .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  /* Controls */
  .content-tiles__controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
  }

  .content-tiles__controls--mobile {
    display: none;
  }

  .content-tiles__controls--desktop {
    display: flex;
  }

  @media (min-width: 768px) {
    .content-tiles__controls--desktop {
      display: flex;
    }
    .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  .content-tiles__control {
    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 0.5625rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .content-tiles__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .content-tiles__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .content-tiles__control svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (max-width: 767px) {
    .content-tiles__control {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0.625rem;
    }
    .content-tiles__control svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .content-tiles__controls {
      gap: 0.75rem;
    }
  }

  /* Container */
  .content-tiles__container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  @media (max-width: 767px) {
    .content-tiles__container {
      overflow-x: auto;
    }
  }

  /* Grid Layout – use auto-fill so columns wrap when a minimum width can't be held */
  .content-tiles--grid .content-tiles__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((100% - (var(--grid-columns) - 1) * 1rem) / var(--grid-columns))), 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .content-tiles--grid .content-tiles__card {
    display: flex;
    flex-direction: column;
  }

  .content-tiles--grid .content-tiles__card--no-image {
    height: 100%;
  }

  @media (max-width: 1023px) {
    .content-tiles--grid .content-tiles__container {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((100% - 0.75rem) / 2)), 1fr));
      gap: 0.75rem;
    }
  }

  @media (max-width: 767px) {
    /* Default mobile: single column for grid, slider behavior for slider */
    .content-tiles--grid .content-tiles__container {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    /* In slider mode with mobile grid, restore symmetric margins */
    .content-tiles--slider.content-tiles--mobile-grid .content-tiles__inner {
      margin-right: var(--content-container-left-offset, 1.25rem);
      width: calc(100% - 2 * var(--content-container-left-offset, 1.25rem));
    }

    /* Mobile grid enabled: override all display modes to use grid */
    .content-tiles--mobile-grid .content-tiles__container {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((100% - (var(--grid-columns-mobile) - 1) * 1rem) / var(--grid-columns-mobile))), 1fr)) !important;
      gap: 1rem !important;
      overflow-x: visible !important;
      scroll-snap-type: none !important;
      flex-direction: unset !important;
    }

    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      flex: unset !important;
      min-width: unset !important;
      max-width: 100% !important;
    }

    /* Mobile slider override: desktop is grid, mobile renders as horizontal slider */
    .content-tiles--mobile-slider .content-tiles__inner {
      max-width: none;
      margin-left: var(--content-container-left-offset, 1.25rem);
      margin-right: 0;
      width: calc(100% - var(--content-container-left-offset, 1.25rem));
      overflow-x: visible;
    }

    .content-tiles--mobile-slider .content-tiles__container {
      display: flex !important;
      grid-template-columns: none !important;
      gap: 1rem !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      scroll-behavior: smooth !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      padding-bottom: 0.25rem !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .content-tiles--mobile-slider .content-tiles__container::-webkit-scrollbar {
      display: none;
    }

    .content-tiles--mobile-slider .content-tiles__card {
      flex: 0 0 min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, 1.3)), 30.875rem) !important;
      width: min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, 1.3)), 30.875rem) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      scroll-snap-align: start;
    }
  }

  /* Slider Layout */
  .content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .content-tiles--slider .content-tiles__container::-webkit-scrollbar {
    display: none;
  }

  .content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Item visibility limits */
  @media (min-width: 768px) {
    .content-tiles .tiles__card--hidden-desktop {
      display: none !important;
    }
  }
  @media (max-width: 767px) {
    .content-tiles .tiles__card--hidden-mobile {
      display: none !important;
    }
  }

  @media (min-width: 768px) {
    /* Fill N items to available width (no peek) */
    .content-tiles--slider .content-tiles__container--fill {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
    }
    .content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }

    /* Peek: show tiny part of the next card while keeping real overflow for scrolling */
    .content-tiles--slider .content-tiles__container--show-peek {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
      overflow-x: auto;
    }
    .content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 767px) {
    .content-tiles--slider .content-tiles__container {
      gap: 1rem;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Fill on mobile */
    .content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0 min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      width: min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      min-width: 0 !important;
    }

    /* Peek on mobile */
    .content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0 min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      width: min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      min-width: 0 !important;
    }
  }

  /* Card Base Styles */
  .content-tiles__card {
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--color-grey-light, #f7f7f7);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-tiles__card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
  }

  /* Card Image */
  .content-tiles__card-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
    box-sizing: border-box;
  }

  .content-tiles__card-image img,
  .content-tiles__img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
  }

  @media (max-width: 767px) {
    .content-tiles__card-image img,
    .content-tiles__img {
      max-width: 100%;
      width: 100% !important;
    }
  }

  /* Shopify's image_tag automatically adds object-position style for focal points */
  /* We don't set a default object-position to allow Shopify's focal point to work */

  .content-tiles__card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    pointer-events: none;
  }

  /* Feature Breakdown Card */
  .content-tiles__card--feature,
  .content-tiles__card--gallery {
    aspect-ratio: 2 / 3;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .content-tiles__card--feature .content-tiles__card-image,
  .content-tiles__card--gallery .content-tiles__card-image {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
  }

  /* Gallery Card – image-only, no overlay */
  .content-tiles__card--gallery .content-tiles__card-image img,
  .content-tiles__card--gallery .content-tiles__img {
    border-radius: 0.375rem;
  }

  .content-tiles__card--feature .content-tiles__card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem;
    color: white;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* No image variant - content at top */
  .content-tiles__card--no-image {
    height: auto;
    min-height: 12.5rem;
  }

  .content-tiles__card--no-image .content-tiles__card-content {
    position: static;
    padding: 1.5rem 1rem;
    color: var(--card-text-color, var(--section-text-color));
    flex: 1;
  }

  .content-tiles__card--no-image .content-tiles__card-heading {
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles__card--no-image .content-tiles__card-body {
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles__card--feature .content-tiles__card-heading {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
    color: white;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .content-tiles__card--feature .content-tiles__card-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: white;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .content-tiles__card--feature .content-tiles__card-button {
    margin-top: 0;
  }

  @media (max-width: 1023px) {
    .content-tiles__card--feature,
    .content-tiles__card--gallery {
      min-height: 21.25rem;
      max-height: 100dvh;
    }
    .content-tiles__card--feature .content-tiles__card-heading {
      font-size: 1.5rem;
    }
    .content-tiles__card--feature .content-tiles__card-body {
      font-size: 0.9375rem;
    }
  }

  @media (max-width: 767px) {
    .content-tiles__card--feature,
    .content-tiles__card--gallery {
      min-height: 18.75rem;
      max-height: 100dvh;
    }
    .content-tiles__card--feature .content-tiles__card-content {
      padding: 1.25rem 1rem;
      gap: 0.75rem;
    }
    .content-tiles__card--feature .content-tiles__card-heading {
      font-size: 1.25rem;
      line-height: 1.3;
    }
    .content-tiles__card--feature .content-tiles__card-body {
      font-size: 0.875rem;
      line-height: 1.5;
    }
  }

  /* Card Border */
  .content-tiles--card-border .content-tiles__card {
    border: 1px solid var(--card-border-color, #ffffff);
  }

  /* Card Button - uses global .btn with card-specific color overrides */
  .content-tiles__card-button {
    background: var(--card-button-color, white);
    color: var(--card-button-text-color, #000000);
    border-color: var(--card-button-color, white);
    align-self: flex-start;
  }
/* END_SECTION:content-tiles */

/* START_SECTION:description-text (INDEX:18) */
.description-text {
  background-color: var(--section-bg-color);
  color: var(--section-text-color);
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  /* padding-left: var(--section-padding-x-mobile);
  padding-right: var(--section-padding-x-mobile); */
}

@media (min-width: 768px) {
  .description-text {
    /* padding-left: var(--section-padding-x-desktop);
    padding-right: var(--section-padding-x-desktop); */
  }
}

.description-text__container {
  box-sizing: border-box;
}

.description-text__component {
  display: block;
}

.description-text__heading {
  margin-bottom: 40px;
  text-align: var(--content-alignment);
  color: var(--section-text-color);
}

.description-text__blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.description-text__blocks--single-column {
  max-width: calc(100% * var(--single-column-width) / 12);
}

.description-text__blocks--single-column-center {
  margin-left: auto;
  margin-right: auto;
}

.description-text__block {
  width: 100%;
  text-align: var(--content-alignment);
}

.description-text__block-heading {
  margin-bottom: 40px;
  text-align: var(--content-alignment);
  color: var(--section-text-color);
}

.description-text__text {
  color: var(--section-text-color);
  line-height: 1.2;
  margin-bottom: 40px;
}

.description-text__text:last-child {
  margin-bottom: 0;
}

.description-text__text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
  margin-bottom: 40px;
}

.description-text__text-wrapper:last-child {
  margin-bottom: 0;
}

.description-text__text-wrapper .description-text__text {
  margin-bottom: 0;
}

.description-text__text-wrapper[data-truncated="true"] .description-text__text--full {
  display: none;
}

.description-text__text-wrapper[data-truncated="true"] .description-text__text--truncated {
  display: block;
}

.description-text__text-wrapper[data-truncated="false"] .description-text__text--full {
  display: block;
}

.description-text__text-wrapper[data-truncated="false"] .description-text__text--truncated {
  display: none;
}

.description-text__read-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--section-text-color);
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: var(--Text-Sizes-Text-Regular, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
}

.description-text__read-more-text {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}

.description-text__read-more-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}

.description-text__read-more:hover {
  opacity: 0.7;
}

.description-text__cta {
  margin-top: 40px;
}

.description-text__logos {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* align-items: var(--content-alignment-flex); */
  margin-top: 40px;
}

@media (min-width: 768px) {
  .description-text__logos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 120px;
    margin-top: 80px;
  }
}

.description-text__logo {
  height: var(--logo-max-height, 160px);
  display: flex;
  align-items: center;
}

.description-text__logo img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Responsive grid layout based on column count and min-width */
/* Breakpoint accounts for container padding (112px each side = 224px total) + gap (40px) */
/* Breakpoint is calculated in Liquid to ensure proper browser support */
/* END_SECTION:description-text */

/* START_SECTION:feature-banner (INDEX:20) */
.feature-banner {
  position: relative;
  width: 100%;
  background-color: var(--background-color, #ffffff);
  box-sizing: border-box;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  margin-top: var(--section-margin-top);
  margin-bottom: var(--section-margin-bottom);
}

@media (max-width: 767px) {
  .feature-banner {
    padding-top: calc(var(--section-padding-top) * 0.67);
    padding-bottom: calc(var(--section-padding-bottom) * 0.67);
  }
}

.feature-banner__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
  padding-top: 0;
  margin-top: 0;
}

@media (max-width: 1023px) {
  .feature-banner__inner {
    padding: 0 2rem;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .feature-banner__inner {
    padding: 0 1.25rem;
    max-width: 100%;
    gap: 1.0625rem;
  }
  
  .feature-banner__inner > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.feature-banner__section-title {
  margin: 0;
  padding: 0;
  width: 100%;
  color: var(--title-color, #000000);
}

.feature-banner__media-wrapper {
  position: relative;
  width: 100%;
}

.feature-banner__media {
  position: relative;
  width: 100%;
  border-radius: 0.3125rem;
  overflow: hidden;
  background-color: var(--tile-background-color, #f5f5f5);
  max-height: 100dvh;
}

.feature-banner__media--2\:1 {
  aspect-ratio: 2 / 1;
}

.feature-banner__media--16\:9 {
  aspect-ratio: 16 / 9;
}

.feature-banner__media--original {
  aspect-ratio: auto;
}

/* Mobile-specific aspect ratio (portrait: 335×389 ≈ 0.86:1) */
@media (max-width: 767px) {
  .feature-banner__media--2\:1,
  .feature-banner__media--16\:9 {
    aspect-ratio: 335 / 389;
  }
  
  .feature-banner__media {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

.feature-banner__image,
.feature-banner__poster,
.feature-banner__video {
  width: 100%;
  height: 100%;
  object-fit: var(--video-object-fit, cover);
  object-position: var(--video-object-position, center);
  display: block;
}

.feature-banner__image {
  object-fit: cover;
  object-position: center;
}

/* Image wrapper for desktop/mobile switching */
.feature-banner__image-wrapper,
.feature-banner__video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.feature-banner__image-wrapper--desktop,
.feature-banner__video-wrapper--desktop {
  display: block;
}

.feature-banner__image-wrapper--mobile,
.feature-banner__video-wrapper--mobile {
  display: none;
}

.feature-banner__image-wrapper--mobile-override {
  display: none;
}

@media (max-width: 767px) {
  .feature-banner__image-wrapper--desktop:not(.feature-banner__image-wrapper--fallback),
  .feature-banner__video-wrapper--desktop:not(.feature-banner__video-wrapper--fallback) {
    display: none;
  }

  .feature-banner__image-wrapper--mobile,
  .feature-banner__video-wrapper--mobile {
    display: block;
  }

  .feature-banner[data-mobile-media-type="image"] .feature-banner__video-wrapper {
    display: none;
  }

  .feature-banner[data-mobile-media-type="image"] .feature-banner__image-wrapper--mobile-override {
    display: block;
  }
}

.feature-banner__video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.feature-banner__video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.feature-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, var(--overlay-opacity, 0));
  pointer-events: none;
  z-index: 1;
}

.feature-banner__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: var(--text-color, #000000);
}

.feature-banner__cta {
  font-weight: 600;
}

@media (min-width: 768px) {
  .feature-banner__media-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  .feature-banner__content {
    position: absolute;
    width: 28rem;
    max-width: calc(100% - 5rem);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-top-left {
    top: 2.5rem;
    left: 2.5rem;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-top-center {
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-top-right {
    top: 2.5rem;
    right: 2.5rem;
    align-items: flex-end;
    text-align: right;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-middle-left {
    top: 50%;
    left: 2.5rem;
    transform: translateY(-50%);
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-middle-right {
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%);
    align-items: flex-end;
    text-align: right;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-bottom-left {
    bottom: 2.5rem;
    left: 2.5rem;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-bottom-center {
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .feature-banner__content--desktop-bottom-right {
    bottom: 2.5rem;
    right: 2.5rem;
    align-items: flex-end;
    text-align: right;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .feature-banner__media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .feature-banner__media {
    order: 1;
  }
  
  .feature-banner__content {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    box-sizing: border-box;
    order: 2;
  }

  .feature-banner__content--mobile-top-left,
  .feature-banner__content--mobile-top-center,
  .feature-banner__content--mobile-top-right {
    align-items: flex-start;
  }

  .feature-banner__content--mobile-middle-left,
  .feature-banner__content--mobile-middle-center,
  .feature-banner__content--mobile-middle-right {
    align-items: center;
  }

  .feature-banner__content--mobile-bottom-left,
  .feature-banner__content--mobile-bottom-center,
  .feature-banner__content--mobile-bottom-right {
    align-items: flex-end;
  }

  .feature-banner__content--mobile-top-left,
  .feature-banner__content--mobile-middle-left,
  .feature-banner__content--mobile-bottom-left {
    text-align: left;
    align-items: flex-start;
  }

  .feature-banner__content--mobile-top-center,
  .feature-banner__content--mobile-middle-center,
  .feature-banner__content--mobile-bottom-center {
    text-align: center;
    align-items: center;
  }

  .feature-banner__content--mobile-top-right,
  .feature-banner__content--mobile-middle-right,
  .feature-banner__content--mobile-bottom-right {
    text-align: right;
    align-items: flex-end;
  }
}

.feature-banner__subheading {
  margin: 0;
  padding: 0;
  color: var(--text-color, #000000);
  opacity: 0.8;
}

.feature-banner__headline {
  margin: 0;
  padding: 0;
  white-space: normal;
  display: block;
  color: var(--text-color, #000000);
}

.feature-banner__cta-text--mobile {
  display: none;
}

@media (max-width: 767px) {
  .feature-banner__cta-text--desktop {
    display: none;
  }
  
  .feature-banner__cta-text--mobile {
    display: inline-block;
  }
}
/* END_SECTION:feature-banner */

/* START_SECTION:footer (INDEX:22) */
footer-footer,
  .footer {
    width: 100%;
  }

  .footer__container {
    width: 100%;
  }

  .footer__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 3.75rem;
    width: 100%;
  }

  /* Sortable columns grid */
  .footer__columns {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
  }

  .footer__column {
    min-width: 0;
  }

  .footer__column--newsletter {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer__logo-wrapper {
    display: inline-block;
  }

  .footer__logo-link {
    display: block;
    line-height: 0;
  }

  .footer__logo {
    height: auto;
    width: auto;
    max-width: 100%;
  }

  .footer__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .footer__divider {
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.2;
  }

  .footer__bottom-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .footer__credits {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .footer__legal-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer__legal-link {
    transition: opacity 0.2s;
  }

  .footer__legal-link:hover,
  .footer__legal-link:focus {
    opacity: 0.8;
    outline: none;
  }

  .footer__payment-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .footer__payment-icon {
    height: 1.5rem;
    width: auto;
  }

  .footer__links-list {
    list-style: none;
  }

  .footer__links-item {
    margin: 0;
    padding: 0;
  }

  .footer__link {
    display: block;
    transition: opacity 0.2s;
  }

  .footer__link:hover,
  .footer__link:focus {
    opacity: 0.8;
    outline: none;
  }

  .footer__newsletter-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .footer__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    container-type: inline-size;
  }

  .footer__form {
    display: flex;
    gap: 1rem;
    width: 100%;
  }

  .footer__email-input {
    flex: 1 1 0;
    min-width: 0;
    height: 2.5rem;
    padding: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    background-color: transparent;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
  }

  .footer__email-input::placeholder {
    color: currentColor;
    opacity: 0.6;
  }

  .footer__email-input:focus {
    outline: 2px solid currentColor;
    outline-offset: 0.125rem;
  }

  .footer__email-input--error {
    border-color: #f87171;
  }

  .footer__email-input--error:focus {
    outline-color: #f87171;
  }

  .footer__submit-btn {
    flex: 0 0 auto;
  }

  .footer__empty-state {
    width: 100%;
    padding: 2rem;
    text-align: center;
  }

  .footer__empty-message {
    font-size: 0.875rem;
    color: inherit;
    opacity: 0.7;
  }

  .footer__newsletter-disclaimer a {
    text-decoration: underline;
  }

  .footer__form-message {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 0.5rem 0;
  }

  .footer__form-message--success {
    color: #4ade80;
  }

  .footer__form-message--error {
    color: #f87171;
  }

  .footer__social-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--icon-color, currentColor);
    transition: opacity 0.2s;
    text-decoration: none;
  }

  .footer__social-link:hover,
  .footer__social-link:focus {
    opacity: 0.8;
    outline: none;
  }

  .footer__social-link svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }

  .footer__newsletter-badge {
    margin-top: 1rem;
  }

  .footer__newsletter-badge-link {
    display: inline-block;
    text-decoration: none;
  }

  .footer__newsletter-badge-image {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
  }

  .footer__newsletter-badge-image--grayscale {
    filter: grayscale(1);
  }

  .footer__payment-icon {
    display: block;
  }

  .footer__payment-icons--grayscale .footer__payment-icon {
    filter: grayscale(1);
  }

  @container (max-width: 360px) {
    .footer__form {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .footer__email-input {
      flex: 1 1 100%;
    }

    .footer__submit-btn {
      width: 100%;
      white-space: normal;
    }
  }

  @media (min-width: 768px) {
    .footer__columns {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: start;
      gap: 2.5rem;
    }

    .footer__column {
      grid-column: span var(--footer-col-span, 12);
    }

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

    .footer__credits {
      flex-direction: row;
      align-items: baseline;
      gap: 1.5rem;
      flex: 1 1 0;
      min-width: 0;
    }

    .footer__legal-links {
      flex-direction: row;
      gap: 1.5rem;
    }

    .footer__payment-icons {
      flex-shrink: 0;
    }
  }

  @media (max-width: 767px) {
    .footer__content {
      gap: 2.5rem;
    }

    .footer__form {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .footer__email-input {
      flex: 1 1 100%;
    }

    .footer__submit-btn {
      width: 100%;
      white-space: normal;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-spotlight (INDEX:23) */
.header-spotlight {
    width: 100%;
    margin-top: var(--section-margin-top, 0);
    margin-bottom: var(--section-margin-bottom, 0);
    /* Section background colors the whole section (default: theme grey) */
    background-color: var(--section-background-color, #e5e5e5);
    overflow: hidden;
  }

  .header-spotlight__container {
    display: block;
    position: relative;
  }

  .header-spotlight--contained .header-spotlight__container {
    max-width: calc(100% - 2 * 2.5rem);
    margin-inline: auto;
  }

  .header-spotlight__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--slider-height-desktop, calc(100svh - var(--header-group-height, 105px) - var(--section-margin-top, 0px) - var(--spotlight-peek, 4.5rem)));
    max-height: calc(100svh - var(--header-group-height, 105px) - var(--section-margin-top, 0px) - var(--spotlight-peek, 4.5rem));
    /* Slide default background colors only the slide/viewport area */
    background-color: var(--slide-background-color, #000000);
  }

  .header-spotlight__track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    height: 100%;
  }

  .header-spotlight__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: var(--text-color, #ffffff);
    opacity: 0;
  }

  .header-spotlight__slide[data-active='true'],
  .header-spotlight__slide[data-transitioning] {
    opacity: 1;
  }

  /* The theme's typography utility classes set color:var(--color-primary).
     Override per-component so all text respects the slide's --text-color.
     Exclude CTA buttons so they keep their own colors (primary/secondary/outline).
     Exclude the top-tag so its per-block Tag Text Colour inline style wins. */
  .header-spotlight__content,
  .header-spotlight__content *:not(.header-spotlight__cta):not(.header-spotlight__cta *):not(.header-spotlight__top-tag):not(.header-spotlight__top-tag *),
  .header-spotlight__heading,
  .header-spotlight__description,
  .header-spotlight__description p,
  .header-spotlight__newsletter-subtitle,
  .header-spotlight__lower-link {
    color: inherit !important;
  }

  .header-spotlight__media {
    position: absolute;
    inset: 0;
  }

  .header-spotlight__video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .header-spotlight__video-wrapper--mobile {
    display: none;
  }

  .header-spotlight__video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .header-spotlight__video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* Make external embeds respect "Object-fit" + "Video position" settings */
    object-fit: var(--media-object-fit, cover);
    object-position: var(--media-object-position, center);
    display: block;
  }

  .header-spotlight__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--media-object-fit, cover);
    object-position: var(--media-object-position, center);
  }

  .header-spotlight__image-wrapper,
  .header-spotlight__image {
    width: 100%;
    height: 100%;
  }

  .header-spotlight__image-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: var(--media-object-fit, cover);
    object-position: center;
  }

  /* Manual image positioning should override Shopify focal point inline styles */
  .header-spotlight__slide:not(.header-spotlight__slide--use-focal-point) .header-spotlight__image-wrapper > img {
    object-position: var(--media-object-position, center) !important;
  }

  .header-spotlight__image-wrapper--mobile {
    display: none;
  }

  .header-spotlight__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, var(--overlay-opacity, 0.3)) 0%, rgba(0, 0, 0, var(--overlay-opacity, 0.3)) 100%),
      linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, calc(var(--overlay-opacity, 0.3) * 1.5)) 100%);
    pointer-events: none;
  }

  .header-spotlight__content {
    position: absolute;
    left: 2.5rem;
    bottom: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    max-width: 40.875rem;
  }

  .header-spotlight__slide-content--top .header-spotlight__content {
    top: 2.5rem;
    bottom: auto;
    transform: none;
  }

  .header-spotlight__slide-content--middle .header-spotlight__content {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .header-spotlight__slide-content--bottom .header-spotlight__content {
    top: auto;
    bottom: 7rem;
    transform: none;
  }

  .header-spotlight__slide-content--left .header-spotlight__content {
    left: 2.5rem;
    right: auto;
    align-items: flex-start;
    text-align: left;
  }

  .header-spotlight__slide-content--right .header-spotlight__content {
    left: auto;
    right: 2.5rem;
    align-items: flex-end;
    text-align: right;
  }

  .header-spotlight__slide-content--right .header-spotlight__buttons {
    justify-content: flex-end;
  }

  .header-spotlight__top-tag {
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    padding: 0.5rem 1.25rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 1;
  }

  .header-spotlight__heading {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
  }

  .header-spotlight__description {
    line-height: 1.4;
  }

  .header-spotlight__buttons {
    display: flex;
    gap: 1.0625rem;
    flex-wrap: wrap;
  }

  /* CTA buttons use global .btn__arrow styling from theme.scss */

  .header-spotlight__newsletter-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }

  .header-spotlight__newsletter-input {
    height: 3rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid currentColor;
    background: transparent;
    color: currentColor;
    width: min(35rem, 100%);
  }

  .header-spotlight__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.65);
  }

  .header-spotlight__lower-nav--desktop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    width: 100%;
    padding: 1.5rem clamp(1.25rem, 4vw, 4rem);
    display: none;
    align-items: center;
    gap: 5rem;
  }

  .header-spotlight__lower-links {
    display: flex;
    gap: 5rem;
    align-items: center;
    flex: 1 0 auto;
    flex-wrap: wrap;
  }

  .header-spotlight__lower-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 1;
    color: currentColor;
  }

  .header-spotlight__lower-link:not(.btn) {
    transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
  }

  .header-spotlight__lower-link:not(.btn):hover {
    opacity: 0.7;
  }

  /* Arrow icon styling for lower links - uses global .btn__arrow */
  .header-spotlight__lower-link .btn__arrow svg {
    width: 0.998rem;
    height: 0.727rem;
  }

  .header-spotlight__lower-links--buttons {
    gap: 1rem;
  }

  .header-spotlight__dots--overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    color: var(--nav-color, #FFFFFF);
  }

  .header-spotlight__dot {
    width: 2.262rem;
    height: 0.705rem;
    border: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease),
                background-color var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
  }

  .header-spotlight__dot[aria-selected='true'] {
    background: currentColor;
  }

  .header-spotlight__dot:hover:not([aria-selected='true']) {
    opacity: 0.7;
  }

  /* Nav uses global .btn--nav with spotlight-specific position and transparent style */
  .header-spotlight__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--nav-color, #FFFFFF);
  }

  .header-spotlight__nav:hover:not(:disabled) {
    opacity: 0.7;
    background: transparent;
  }

  .header-spotlight__nav--prev {
    left: 1rem;
  }

  .header-spotlight__nav--next {
    right: 1rem;
  }

  .header-spotlight__lower-nav-mobile {
    display: none;
    padding: 0 1.25rem;
    color: var(--nav-color, #FFFFFF);
  }

  /* Slide height variants */
  .header-spotlight__container[data-slide-height='medium'] .header-spotlight__viewport {
    --slider-height-desktop: 48.875rem;
  }
  .header-spotlight__container[data-slide-height='large'] .header-spotlight__viewport {
    --slider-height-desktop: 56.25rem;
  }
  .header-spotlight__container[data-slide-height='full_screen'] .header-spotlight__viewport {
    --slider-height-desktop: calc(100svh - var(--header-group-height, 105px) - var(--section-margin-top, 0px) - var(--spotlight-peek, 4.5rem));
  }
  .header-spotlight__container[data-slide-height='adapt'] .header-spotlight__viewport {
    --slider-height-desktop: 48.875rem;
  }

  @media (max-width: 1023px) {
    .header-spotlight__viewport {
      height: var(--slider-height-mobile, var(--slider-height-desktop, calc(100svh - var(--header-group-height, 105px) - var(--section-margin-top, 0px) - var(--spotlight-peek, 4.5rem))));
      max-height: calc(100svh - var(--header-group-height, 105px) - var(--section-margin-top, 0px) - var(--spotlight-peek, 4.5rem));
    }

    .header-spotlight__heading {
      font-size: 2.5rem;
    }

    .header-spotlight__content {
      padding: 1.25rem;
      max-width: calc(100% - 2.5rem) !important;
    }

    /* Content positioning (mobile offsets) */
    .header-spotlight__slide-content--mobile-top .header-spotlight__content {
      top: 1rem;
      bottom: auto;
      transform: none;
    }

    .header-spotlight__slide-content--mobile-middle .header-spotlight__content {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
    }

    .header-spotlight__slide-content--mobile-bottom .header-spotlight__content {
      top: auto;
      bottom: 2.4375rem;
      transform: none;
    }

    .header-spotlight__slide-content--mobile-left .header-spotlight__content {
      left: 0.5rem;
      right: auto;
      align-items: flex-start;
      text-align: left;
    }

    .header-spotlight__slide-content--mobile-right .header-spotlight__content {
      left: auto;
      right: 0.5rem;
      align-items: flex-end;
      text-align: right;
    }

    .header-spotlight__slide-content--mobile-right .header-spotlight__buttons {
      justify-content: flex-end;
    }

    .header-spotlight__slide-content--mobile-left .header-spotlight__buttons {
      justify-content: flex-start;
    }

    .header-spotlight__newsletter-form {
      flex-direction: column;
      align-items: stretch;
    }

    .header-spotlight__newsletter-input {
      width: 100%;
    }

    .header-spotlight__lower-nav-mobile {
      display: flex;
      flex-shrink: 0;
      padding: 1rem 1.25rem;
      color: var(--color-primary, #000000);
      min-height: 5.5rem;

      &:empty {
        min-height: 0;
        display: none;
      }
    }

    .header-spotlight__lower-links {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .header-spotlight__image-wrapper--desktop:not(.header-spotlight__image-wrapper--fallback) {
      display: none;
    }
    .header-spotlight__image-wrapper--mobile {
      display: block;
    }

    .header-spotlight__image-wrapper--mobile > img {
      object-position: var(--mobile-media-object-position, center) !important;
    }

    .header-spotlight__video-wrapper--desktop:not(.header-spotlight__video-wrapper--fallback) {
      display: none;
    }
    .header-spotlight__video-wrapper--mobile {
      display: block;
    }

    /* Dots + arrows already follow --nav-color/currentColor on mobile */
  }

  @media (min-width: 1024px) {
    .header-spotlight__lower-nav--desktop {
      display: flex;
    }

  }
/* END_SECTION:header-spotlight */

/* START_SECTION:header (INDEX:24) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .header-nav {
    display: block;
    background: var(--header-bg, #fff);
    color: var(--header-fg, #000);
    width: 100%;
  }

  .header-nav__bar {
    background: inherit;
    position: relative;
    z-index: 41;
  }

  .header-nav__bar--border {
    border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .header-nav__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
  }

  .header-nav__mobile-left {
    display: inline-flex;
    align-items: center;
    grid-column: 1;
    justify-self: start;
  }

  .header-nav__icon-btn--mobile-toggle {
    grid-column: 1;
    justify-self: start;
  }

  .header-nav__logo {
    grid-column: 2;
    justify-self: center;
  }

  .header-nav__nav {
    grid-column: 2;
  }

  .header-nav__actions {
    grid-column: 3;
    justify-self: end;
  }

  .header-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--header-logo-width, 114px);
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
  }

  .header-nav__logo-img {
    height: 2.0625rem;
    width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  .header-nav__nav {
    flex: 1;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
  }

  .header-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.9375rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Tablet nav scroll removed — tablet now uses mobile drawer */

  /* Desktop (1440px+): nav list scroll off – centered list, no scroll UI */
  @media (min-width: 90rem) {
    .header-nav--nav-scroll-tablet .header-nav__list-scroll {
      overflow: visible;
    }

    .header-nav--nav-scroll-tablet .header-nav__list {
      justify-content: center;
    }

    .header-nav--nav-scroll-tablet .header-nav__nav-controls {
      display: none !important;
    }
  }

  .header-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    min-width: fit-content;
  }

  .header-nav__message {
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
  }

  .header-nav__message--button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .header-nav__localization-select {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding-right: 1.25rem;
  }

  .header-nav__localization {
    position: relative;
    align-items: center;
  }

  .header-nav__localization::after {
    content: '';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.125rem solid currentColor;
    border-bottom: 0.125rem solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
  }

  .header-nav__icon-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .header-nav__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
  }

  .header-nav__cart-count {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1.125rem;
    background: var(--color-red, #ce4646);
    color: var(--color-white, #fff);
    text-align: center;
  }

  .js-ajax-cart-empty .header-nav__cart-count {
    display: none;
  }

  .header-nav__icon-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }

  .header-nav__icon--close {
    display: none;
  }

  .header-nav__icon-btn--mobile-toggle[aria-expanded='true'] .header-nav__icon--hamburger {
    display: none;
  }

  .header-nav__icon-btn--mobile-toggle[aria-expanded='true'] .header-nav__icon--close {
    display: inline-flex;
  }

  /* Tablet+: grid so nav never pushes logo/actions off – middle column can shrink to 0 */
  @media (min-width: 48rem) {
    .header-nav__inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 1rem;
    }

    .header-nav__logo {
      grid-column: 1;
      justify-self: start;
    }

    .header-nav__nav {
      grid-column: 2;
      /* Nav stays hidden on tablet — only shown at desktop (90rem) via desk:flex utility */
      min-width: 0;
      overflow: hidden;
    }

    .header-nav__actions {
      grid-column: 3;
      justify-self: end;
    }
  }

  /* Desktop (1440px+): hide hamburger, true-center nav */
  @media (min-width: 90rem) {
    .header-nav__mobile-left,
    .header-nav__icon-btn--mobile-toggle {
      display: none !important;
    }

    .header-nav__inner {
      grid-template-columns: 1fr auto 1fr;
    }
  }

  .header-nav__dialog {
    border: none;
    padding: 0;
    width: min(100vw, 960px);
    max-width: 100vw;
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
  }

  .header-nav__dialog[hidden] {
    display: none !important;
  }

  .header-nav__dialog--mobile {
    position: fixed;
    top: var(--header-bar-height, 48px);
    left: 0;
    width: 100vw;
    height: calc(100dvh - var(--header-bar-height, 48px));
    max-height: calc(100dvh - var(--header-bar-height, 48px));
    margin: 0;
    z-index: 38;
  }

  .header-nav__dialog--mobile .header-nav__mobile-top {
    display: none;
  }

  .header-nav__dialog-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Tablet drawer: 550px panel with backdrop (dialog stays full-viewport for click-outside) */
  @media (min-width: 48rem) and (max-width: 89.9375rem) {
    .header-nav__dialog--mobile .header-nav__dialog-inner {
      width: 550px;
      max-width: 100vw;
      background: var(--color-white, #fff);
      color: var(--color-black, #000);
    }
  }

  /* Mobile drawer: horizontal slide-in from left (when animations enabled) */
  .header-nav--animate .header-nav__dialog--mobile {
    background: transparent;
  }

  .header-nav--animate .header-nav__dialog--mobile .header-nav__dialog-inner {
    transform: translateX(-100%);
    transition: transform var(--motion-duration-spring, 400ms) var(--motion-ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
  }

  .header-nav--animate .header-nav__dialog--mobile[data-dialog-open] .header-nav__dialog-inner {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav--animate .header-nav__dialog--mobile .header-nav__dialog-inner,
    .header-nav--animate .header-nav__mobile-overlay {
      transition: none;
    }
  }

  /* Mobile blur overlay */
  .header-nav__mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(17, 17, 17, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }

  .header-nav__dialog--mobile .header-nav__mobile-overlay {
    top: var(--header-bar-height, 48px);
  }

  .header-nav__dialog--mobile[data-dialog-open] .header-nav__mobile-overlay {
    pointer-events: auto;
  }

  .header-nav--animate .header-nav__mobile-overlay {
    transition:
      background-color var(--motion-duration-overlay, 200ms) linear,
      backdrop-filter var(--motion-duration-overlay, 200ms) linear,
      -webkit-backdrop-filter var(--motion-duration-overlay, 200ms) linear;
  }

  .header-nav--animate .header-nav__dialog--mobile[data-dialog-open] .header-nav__mobile-overlay {
    background-color: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
  }

  /* Desktop blur overlay — element is appended to document.body by JS
     so it sits outside the header's stacking context (z-index 40).
     This lets backdrop-filter blur page content without affecting the flyout. */
  .header-nav-desktop-overlay {
    position: fixed;
    inset: 0;
    z-index: 39;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
      background-color var(--motion-duration-overlay, 200ms) linear,
      backdrop-filter var(--motion-duration-overlay, 200ms) linear,
      -webkit-backdrop-filter var(--motion-duration-overlay, 200ms) linear;
  }

  .header-nav-desktop-overlay[data-overlay-open] {
    background-color: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav-desktop-overlay {
      transition: none;
    }
  }

  @media (max-width: 89.9375rem) {
    .header-nav-desktop-overlay {
      display: none;
    }
  }

  /* Scroll hide/show — animates the sticky section wrapper's `top` property
     instead of using transform, because transform on an ancestor breaks
     position:fixed flyout positioning. The --header-height var is set by JS. */

  .header-nav__mobile-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
    gap: 0.5rem;
  }

  .header-nav__mobile-top .header-nav__icon-row--left {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .header-nav__mobile-top .header-nav__icon-row:not(.header-nav__icon-row--left) {
    justify-self: end;
  }

  .header-nav__mobile-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
  }

  /* Search flyout (desktop: mega menu style) */
  .header-nav__search-flyout {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-flyout-top, 0px);
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    z-index: 45;
  }

  .header-nav__search-flyout[hidden] {
    display: none;
  }

  .header-nav__search-flyout-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: calc(100vh - var(--header-flyout-top, 0px));
    overflow: hidden;
  }

  .header-nav__search-flyout-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
  }

  .header-nav__search-flyout-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .header-nav__search-flyout-form {
    flex: 1;
    min-width: 0;
  }

  .header-nav__search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
  }

  @media (min-width: 90rem) {
    .header-nav__search-flyout-form {
      flex-direction: row;
      align-items: stretch;
    }

    .header-nav__search-flyout-form .header-nav__search-input-wrapper {
      flex: 1;
    }

    .header-nav__search-flyout-form .header-nav__search-submit {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  .header-nav__search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .header-nav__search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--color-grey-dark, #6b6b6b);
    pointer-events: none;
    flex-shrink: 0;
  }

  .header-nav__search-input {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  /* Hide native browser search clear (prevents double “X” with our custom clear button) */
  .header-nav__search-input[type='search']::-webkit-search-cancel-button,
  .header-nav__search-input[type='search']::-webkit-search-decoration,
  .header-nav__search-input[type='search']::-webkit-search-results-button,
  .header-nav__search-input[type='search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .header-nav__search-input::-ms-clear {
    display: none;
  }

  .header-nav__search-clear {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-grey-dark, #6b6b6b);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .header-nav__search-clear:hover {
    background-color: var(--color-grey-light, #f5f5f5);
    color: var(--color-text, #000);
  }

  .header-nav__search-clear[hidden] {
    display: none;
  }

  .header-nav__search-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .header-nav__search-static {
    display: none;
  }

  .header-nav__search-mount {
    display: none;
  }

  .header-nav__search-results[data-search-state='idle'] .header-nav__search-static {
    display: block;
  }

  .header-nav__search-results[data-search-state='results'] .header-nav__search-mount,
  .header-nav__search-results[data-search-state='no-results'] .header-nav__search-mount,
  .header-nav__search-results[data-search-state='error'] .header-nav__search-mount {
    display: block;
  }

  .header-nav__search-static-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .header-nav__search-static-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .header-nav__search-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
  }

  .header-nav__search-results[data-search-state='results'] .header-nav__search-loading,
  .header-nav__search-results[data-search-state='no-results'] .header-nav__search-loading,
  .header-nav__search-results[data-search-state='error'] .header-nav__search-loading {
    display: none;
  }

  .header-nav__search-results[data-search-state='loading'] .header-nav__search-static,
  .header-nav__search-results[data-search-state='loading'] .header-nav__search-mount {
    display: none;
  }

  .header-nav__search-results[data-search-state='loading'] .header-nav__search-loading {
    display: flex;
  }

  .header-nav__search-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.125rem solid var(--color-grey-medium, #e9e9eb);
    border-top-color: var(--color-text, #000);
    border-radius: 50%;
    animation: header-nav-search-spin 0.8s linear infinite;
  }

  @keyframes header-nav-search-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Mobile/Tablet: hide desktop-only account icon (shown in mobile-left group instead) */
  @media (max-width: 89.9375rem) {
    .header-nav__icon-btn--account-desktop {
      display: none !important;
    }
  }

  /* Mobile/Tablet: full-screen search overlay (since mega menu isn't shown below 1440px) */
  @media (max-width: 89.9375rem) {
    .header-nav--scroll-comp .header-nav__inner.content-container {
      padding-right: calc(0.75rem + var(--header-scrollbar-comp, 0px));
    }

    .header-nav__bar {
      padding-inline: 0;
      border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
    }

    .header-nav__inner.content-container {
      max-width: 100%;
      padding-inline: 0.75rem;
    }

    .header-nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.625rem 0;
    }

    .header-nav__logo {
      flex: 1;
      min-width: 0;
      justify-content: center;
      width: clamp(90px, 36vw, 132px);
    }

    .header-nav__actions {
      gap: 0.5rem;
    }

    .header-nav__icon-btn {
      width: 2.5rem;
      height: 2.5rem;
    }

    .header-nav__icon-btn svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .header-nav__icon-btn--mobile-toggle,
    .header-nav__icon-btn--mobile-close {
      width: 2.5rem;
      height: 2.5rem;
      flex-shrink: 0;
    }

    .header-nav__mobile-top {
      padding-inline: 0.75rem;
      padding-block: 0.625rem;
    }

    .header-nav--scroll-comp .header-nav__mobile-top {
      padding-right: calc(0.75rem + var(--header-scrollbar-comp, 0px));
    }

    .header-nav__mobile-logo {
      justify-content: center;
      flex: 1;
      min-width: 0;
      width: clamp(90px, 36vw, 132px);
    }

    .header-nav__mobile-top .header-nav__icon-row {
      gap: 0.5rem;
    }

    .header-nav__mobile-top .header-nav__icon-btn {
      width: 2.5rem;
      height: 2.5rem;
    }

    .header-nav--scroll-comp .header-nav__mobile-content {
      padding-right: calc(1.25rem + var(--header-scrollbar-comp, 0px));
    }

    /* Mobile bottom links (SP STORIES, SUPPORT, MY ACCOUNT, Language) */
    .header-nav__mobile-bottom-links {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .header-nav__mobile-bottom-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.2;
      text-transform: uppercase;
      text-decoration: none;
      color: inherit;
    }

    .header-nav__mobile-bottom-link-icon {
      display: inline-flex;
      flex-shrink: 0;
    }

    .header-nav__mobile-bottom-link-icon svg {
      width: 24px;
      height: 24px;
    }

    .header-nav__mobile-content-footer {
      padding-top: 12px;
    }

    .header-nav__mobile-email-popup-btn {
      display: block;
      width: 100%;
      padding: 12px 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 3px;
      color: inherit;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }

    /* Language switcher: stacked label + wrapping pills */
    .header-nav__mobile-lang-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 0 12px;
      border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
    }

    .header-nav__mobile-lang-label {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.2;
      text-transform: uppercase;
      color: inherit;
    }

    .header-nav__mobile-lang-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .header-nav__mobile-lang-pill-form {
      display: contents;
    }

    .header-nav__mobile-lang-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--color-grey-medium, #e9e9eb);
      border-radius: 4px;
      background: transparent;
      color: inherit;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 150ms ease, border-color 150ms ease;
    }

    .header-nav__mobile-lang-pill:hover {
      border-color: var(--color-black, #000);
    }

    .header-nav__mobile-lang-pill--active {
      background: var(--color-black, #000);
      border-color: var(--color-black, #000);
      color: var(--color-white, #fff);
      cursor: default;
    }

    .header-nav__search-flyout {
      top: 0;
      bottom: 0;
      border-top: none;
      box-shadow: none;
      z-index: 60;
    }

    .header-nav__search-flyout-inner {
      height: 100%;
      height: 100dvh;
      max-height: 100dvh;
      padding: 1.5rem;
      padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .header-nav__search-flyout-header {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        'title close'
        'form form';
      row-gap: 0.75rem;
      column-gap: 0.75rem;
      align-items: center;
    }

    .header-nav__search-flyout-title {
      grid-area: title;
    }

    .header-nav__search-flyout-form {
      grid-area: form;
    }

    .header-nav__search-flyout-header [data-header-nav-search-close] {
      grid-area: close;
      justify-self: end;
    }

    /* Larger touch targets on mobile */
    .header-nav__search-input {
      min-height: 3rem;
      font-size: 1rem; /* Prevent iOS zoom */
    }

    .header-nav__search-submit {
      min-height: 3rem;
    }

    .header-nav__search-clear {
      min-width: 2.75rem;
      min-height: 2.75rem;
    }

    .header-nav__search-flyout-header .header-nav__icon-btn {
      min-width: 2.75rem;
      min-height: 2.75rem;
    }
  }

  /* Mobile drawer drill-down */
  .header-nav-mobile__root[hidden],
  .header-nav-mobile__panels [hidden] {
    display: none !important;
  }

  /* Mobile panel slide transitions.
     During an animated push/pop, JS moves both the outgoing and incoming
     elements into a temporary wrapper (.header-nav-mobile__stage) that is
     position:relative with overflow:hidden. Both children are absolute so
     they overlap, and translateX drives the slide. After the transition the
     settled element is moved back to its original parent and the stage is removed. */
  .header-nav-mobile__stage {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .header-nav-mobile__stage > [data-panel-role='incoming'],
  .header-nav-mobile__stage > [data-panel-role='outgoing'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-white, #fff);
    transition: transform var(--motion-duration-spring, 400ms) var(--motion-ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
  }

  /* The incoming panel sits in flow to define the stage height */
  .header-nav-mobile__stage > [data-panel-role='incoming'] {
    position: relative;
  }

  .header-nav-mobile__stage > [data-panel-role='outgoing'] {
    min-height: 100vh;
  }

  .header-nav-mobile__stage > [data-panel-role='incoming'] {
    min-height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav-mobile__stage > [data-panel-role='incoming'],
    .header-nav-mobile__stage > [data-panel-role='outgoing'] {
      transition: none !important;
    }
  }

  .header-nav-mobile__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .header-nav-mobile__row + .header-nav-mobile__row {
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .header-nav-mobile__row-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-nav-mobile__row-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding: 0.375rem 0.4375rem;
    border-radius: 0.125rem;
    background: var(--color-red, #ce4646);
    color: var(--color-white, #fff);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    text-transform: uppercase;
  }

  .header-nav-mobile__row-icon {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .header-nav-mobile__panel {
    width: 100%;
  }

  .header-nav-mobile__panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0 0 1.25rem 0;
    cursor: pointer;
    text-align: left;
  }

  .header-nav-mobile__panel-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-nav-mobile__panel-back-icon {
    display: inline-flex;
  }

  .header-nav-mobile__panel-body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Mobile accordion styles */
  .header-nav-mobile__accordion {
    border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .header-nav-mobile__accordion:first-child {
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  /* Per-block opt-out: hide the accordion wrapper's bottom divider when the
     contained block has requested no last divider. */
  .header-nav-mobile__accordion:has(.header-nav-menu-list--no-last-divider) {
    border-bottom: none;
  }

  .header-nav-mobile__accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .header-nav-mobile__accordion-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-nav-mobile__accordion-icon {
    display: inline-flex;
    transition: transform 0.2s ease;
  }

  .header-nav-mobile__accordion-toggle[aria-expanded='true'] .header-nav-mobile__accordion-icon {
    transform: rotate(90deg);
  }

  .header-nav-mobile__accordion-content {
    padding-bottom: 1.25rem;
  }

  .header-nav-mobile__accordion-content[hidden] {
    display: none;
  }

  /* Non-accordion blocks (those without titles) should have spacing */
  .header-nav-mobile__panel-body > .shopify-block {
    padding: 1rem 0;
  }

  .header-nav-mobile__panel-body > .shopify-block + .shopify-block {
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  /* When accordion is present, remove default block spacing */
  .header-nav-mobile__panel-body > .header-nav-mobile__accordion + .shopify-block,
  .header-nav-mobile__panel-body > .shopify-block + .header-nav-mobile__accordion {
    border-top: none;
  }
/* END_SECTION:header */

/* START_SECTION:highlights (INDEX:25) */
.content-tiles {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .content-tiles__nav {
    width: 100%;
    box-sizing: border-box;
  }

  .content-tiles__inner {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* In slider mode: extend the inner container to the right viewport edge.
     content-container--full-right defines --content-container-left-offset at each
     breakpoint (in @layer base). We repeat the layout properties here (unlayered)
     so they win over the generic rules. */
  .highlights.content-tiles--slider .content-tiles__inner {
    max-width: none;
    margin-left: var(--content-container-left-offset, 1.25rem);
    margin-right: 0;
    width: calc(100% - var(--content-container-left-offset, 1.25rem));
    overflow-x: visible;
  }

  @media (max-width: 767px) {
    .content-tiles {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    .content-tiles__inner {
      overflow-x: visible;
    }
    .highlights .content-tiles__inner > * {
      max-width: 100%;
      box-sizing: border-box;
    }
    .highlights.content-tiles--slider .content-tiles__inner {
      margin-left: 0;
      margin-right: -1.25rem;
      width: calc(100% + 1.25rem);
      max-width: none;
    }
  }

  /* Header */
  .content-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
  }

  .content-tiles__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .content-tiles__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .content-tiles__subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--section-text-color);
  }

  @media (max-width: 767px) {
    .content-tiles__subtitle {
      font-size: 0.875rem;
    }
    .content-tiles__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem;
      margin-bottom: 0;
    }
    .content-tiles__controls--desktop {
      display: none !important;
    }
    .content-tiles__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      width: 100%;
    }
    .content-tiles--mobile-grid .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  /* Controls */
  .content-tiles__controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
  }

  .content-tiles__controls--mobile {
    display: none;
  }

  .content-tiles__controls--desktop {
    display: flex;
  }

  @media (min-width: 768px) {
    .content-tiles__controls--desktop {
      display: flex;
    }
    .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  .content-tiles__control {
    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 0.5625rem;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .content-tiles__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .content-tiles__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .content-tiles__control svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (max-width: 767px) {
    .content-tiles__control {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0.625rem;
    }
    .content-tiles__control svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .content-tiles__controls {
      gap: 0.75rem;
    }
  }

  /* Container */
  .content-tiles__container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  @media (max-width: 767px) {
    .content-tiles__container {
      overflow-x: auto;
    }
  }

  /* Grid Layout */
  .highlights.content-tiles--grid .content-tiles__container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  /* Desktop: Use grid columns setting (1024px and above) */
  @media (min-width: 1024px) {
    .highlights.content-tiles--grid .content-tiles__container {
      grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr)) !important;
    }
  }

  .highlights.content-tiles--grid .content-tiles__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .highlights.content-tiles--grid .content-tiles__card .content-tiles__card-image--square {
    width: 100% !important;
    max-width: 100% !important;
  }

  .highlights.content-tiles--grid .content-tiles__card--no-image {
    height: 100%;
  }

  /* Tablet: Fixed 2 columns (768px to 1023px) */
  @media (min-width: 768px) and (max-width: 1023px) {
    .highlights.content-tiles--grid .content-tiles__container {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem;
    }
  }

  @media (max-width: 767px) {
    .highlights.content-tiles--grid .content-tiles__container {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    /* In slider mode with mobile grid, restore symmetric margins */
    .highlights.content-tiles--slider.content-tiles--mobile-grid .content-tiles__inner {
      margin-right: var(--content-container-left-offset, 1.25rem);
      width: calc(100% - 2 * var(--content-container-left-offset, 1.25rem));
    }

    .content-tiles--mobile-grid .content-tiles__container {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile), 1fr) !important;
      gap: 1rem !important;
      overflow-x: visible !important;
      scroll-snap-type: none !important;
      flex-direction: unset !important;
    }

    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      flex: unset !important;
      min-width: unset !important;
      max-width: 100% !important;
    }
  }

  /* Slider Layout */
  .highlights.content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .highlights.content-tiles--slider .content-tiles__container::-webkit-scrollbar {
    display: none;
  }

  .highlights.content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Item visibility limits */
  @media (min-width: 768px) {
    .highlights .tiles__card--hidden-desktop {
      display: none !important;
    }
  }
  @media (max-width: 767px) {
    .highlights .tiles__card--hidden-mobile {
      display: none !important;
    }
  }

  @media (min-width: 768px) {
    /* Fill N items to available width (no peek) */
    .highlights.content-tiles--slider .content-tiles__container--fill {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
    }
    .highlights.content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-columns)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }

    /* Peek: show tiny part of the next card while keeping real overflow for scrolling */
    .highlights.content-tiles--slider .content-tiles__container--show-peek {
      --ct-slider-gap: 1rem;
      gap: var(--ct-slider-gap);
      overflow-x: auto;
    }
    .highlights.content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0 calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      width: calc((100% - var(--ct-total-gap, 0rem)) / var(--ct-visible)) !important;
      max-height: 100dvh !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 767px) {
    .highlights.content-tiles--slider .content-tiles__container {
      gap: 1rem;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Fill on mobile */
    .highlights.content-tiles--slider .content-tiles__container--fill .content-tiles__card {
      flex: 0 0 min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      width: min(calc((100% - var(--ct-total-gap-mobile, var(--ct-total-gap, 0rem))) / var(--ct-columns-mobile, var(--ct-columns))), 30.875rem) !important;
      min-width: 0 !important;
    }

    /* Peek on mobile */
    .highlights.content-tiles--slider .content-tiles__container--show-peek .content-tiles__card {
      flex: 0 0 min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      width: min(calc((100% - var(--ct-total-gap-mobile, 0rem)) / var(--ct-visible-mobile, var(--ct-visible))), 30.875rem) !important;
      min-width: 0 !important;
    }
  }

  /* Card Base Styles */
  .content-tiles__card {
    position: relative;
    border-radius: 0.375rem !important;
    overflow: hidden;
    background: var(--card-bg-color, var(--color-grey-light, #f7f7f7));
    width: 100%;
    box-sizing: border-box;
  }

  /* Card Image */
  .content-tiles__card-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
    box-sizing: border-box;
  }

  /* General image styles - explicitly exclude cropped images */
  .content-tiles__card-image img:not(.content-tiles__img--crop),
  .content-tiles__img:not(.content-tiles__img--crop) {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: var(--card-image-object-fit, cover);
    object-position: center center;
    display: block;
    box-sizing: border-box;
  }

  /* Manual image positioning should override Shopify focal point inline styles */
  .content-tiles__card--manual-image-position .content-tiles__card-image img:not(.content-tiles__img--crop),
  .content-tiles__card--manual-image-position .content-tiles__img:not(.content-tiles__img--crop) {
    object-position: var(--card-image-object-position, center center) !important;
  }

  /* Cropped images - must be 300% wide with inline object-position */
  .content-tiles__img--crop {
    width: 300% !important;
    max-width: none !important;
    min-width: 300% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Profile card images with square size */
  .content-tiles__card--profile .content-tiles__card-image--square img:not(.content-tiles__img--crop),
  .content-tiles__card--profile .content-tiles__card-image--square .content-tiles__img:not(.content-tiles__img--crop) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--card-image-object-fit, cover);
    object-position: center center;
  }

  /* Image crop positions are handled via inline styles for maximum specificity */
  /* The cropped images are 300% wide and use object-position to show the correct third */

  @media (max-width: 767px) {
    .content-tiles__card-image img:not(.content-tiles__img--crop),
    .content-tiles__img:not(.content-tiles__img--crop) {
      max-width: 100%;
      width: 100% !important;
    }

    .content-tiles__card--profile .content-tiles__card-image--square img:not(.content-tiles__img--crop),
    .content-tiles__card--profile .content-tiles__card-image--square .content-tiles__img:not(.content-tiles__img--crop) {
      width: 100% !important;
      height: 100% !important;
      object-fit: var(--card-image-object-fit, cover);
      object-position: center center;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* Cropped images maintain 300% width on mobile */
    .content-tiles__img--crop {
      width: 300% !important;
      max-width: none !important;
    }
  }

  /* Profile Card */
  .content-tiles__card--profile {
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
  }

  .content-tiles__card--profile.content-tiles__card--no-image {
    height: auto;
    min-height: 12.5rem;
  }

  .content-tiles__card--profile.content-tiles__card--image-square.content-tiles__card--no-image .content-tiles__card-image--square {
    aspect-ratio: 1 / 1;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .content-tiles__card--profile.content-tiles__card--image-square {
    height: auto;
    min-height: 0;
  }

  .content-tiles__card--profile .content-tiles__card-image {
    flex: 1;
    min-height: 0;
    position: relative;
  }

  .content-tiles__card--profile.content-tiles__card--image-square .content-tiles__card-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
  }

  .content-tiles__card--profile .content-tiles__card-image {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .content-tiles__card--profile .content-tiles__card-image--square {
    aspect-ratio: 1 / 1;
    max-height: 100dvh;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100%;
    padding-bottom: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  .content-tiles__card--profile .content-tiles__card-content {
    position: static;
    padding: 1.5rem 1rem;
    color: var(--card-text-color, var(--section-text-color));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  .content-tiles__card--profile.content-tiles__card--no-image .content-tiles__card-content {
    flex: 1;
  }

  .content-tiles__card--profile .content-tiles__card-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0;
    color: var(--card-text-color, #000);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: calc(1.15em * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
  }

  .content-tiles__card--profile .content-tiles__card-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: var(--card-text-color, #000);
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  @media (max-width: 1023px) {
    .content-tiles__card--profile .content-tiles__card-heading {
      font-size: 1.25rem;
    }
  }

  @media (max-width: 767px) {
    .content-tiles__card--profile .content-tiles__card-image--square {
      aspect-ratio: 1 / 1 !important;
      height: auto !important;
      min-height: 0 !important;
    }

    .content-tiles__card--profile .content-tiles__card-content {
      padding: 1.25rem 1rem;
      gap: 0.75rem;
    }
    .content-tiles__card--profile .content-tiles__card-heading {
      font-size: 1.125rem;
      min-height: calc(1.15em * 3);
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }
    .content-tiles__card--profile .content-tiles__card-body {
      font-size: 0.875rem;
      line-height: 140%;
    }
  }

  /* Card Border */
  .highlights.content-tiles--card-border .content-tiles__card {
    border: 1px solid var(--card-border-color, #ffffff);
  }

  .highlights--hidden {
    display: none;
  }

  /* Video overlay – sits on top of the fallback image */
  .content-tiles__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* END_SECTION:highlights */

/* START_SECTION:how-it-works-three-images (INDEX:26) */
.how-it-works {
    background-color: var(--section-bg-color, #ffffff);
    overflow-x: hidden;
  }

  .how-it-works__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .how-it-works__top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 51px 0;
  }

  @media (max-width: 1023px) {
    .how-it-works__top-bar {
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* Hide the top-bar on desktop when it has no header and the desktop nav is not active */
  @media (min-width: 1024px) {
    .how-it-works__top-bar:not(:has(.how-it-works__header)):not(:has([data-show-desktop="true"])) {
      display: none;
    }
  }

  /* Hide the top-bar on mobile when it has no header and the mobile nav is not active */
  @media (max-width: 1023px) {
    .how-it-works__top-bar:not(:has(.how-it-works__header)):not(:has([data-show-mobile="true"])) {
      display: none;
    }
  }

  .how-it-works__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
  }

  .how-it-works__title {
    margin: 0;
  }

  .how-it-works__subtitle {
    margin: 0;
    max-width: 65%;
  }

  @media (max-width: 1023px) {
    .how-it-works__subtitle {
      max-width: 100%;
    }
  }

  /* Filter pills */
  .how-it-works__filters {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .how-it-works__filters::-webkit-scrollbar {
    display: none;
  }

  .how-it-works__filter-btn {
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--section-text-color, #000000);
    cursor: pointer;
    padding: 12px 24px;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
  }

  .how-it-works__filter-btn:hover {
    opacity: 0.9;
  }

  .how-it-works__filter-btn[aria-pressed='true'],
  .how-it-works__filter-btn.active {
    background-color: var(--section-text-color, #000000);
    color: var(--section-bg-color, #ffffff);
  }

  /* Hide filtered-out tiles */
  .how-it-works__tile[data-filtered="true"] {
    display: none;
  }

  .how-it-works__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow: hidden;
    min-width: 0;
  }

  .how-it-works__tiles {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(var(--desktop-cols, 3), minmax(0, 1fr));
  }

  /* Mobile & tablet: horizontal slider */
  @media (max-width: 1023px) {
    .how-it-works__tiles {
      display: flex;
      justify-content: flex-start;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 16px;
      width: 100%;
      max-width: 100%;
      overscroll-behavior-x: contain;
      padding-right: 20px;
    }

    .how-it-works__tiles::-webkit-scrollbar {
      display: none;
    }

    .how-it-works__tile {
      scroll-snap-align: start;
      flex: 0 0 70vw;
      min-width: 225px;
      max-width: 322px;
      width: 70vw;
      aspect-ratio: 524 / 788;
      min-height: auto;
      max-height: none;
    }
  }

  /* Desktop slider mode (only when desktop mode is slider AND we have more blocks than columns) */
  @media (min-width: 1024px) {
    how-it-works-slider[data-desktop-overflow="true"] .how-it-works__tiles {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 16px;
      width: 100%;
      overscroll-behavior-x: contain;
    }

    how-it-works-slider[data-desktop-overflow="true"] .how-it-works__tiles::-webkit-scrollbar {
      display: none;
    }

    how-it-works-slider[data-desktop-overflow="true"] .how-it-works__tile {
      scroll-snap-align: start;
      /* show 3 full tiles + a peek of the 4th */
      flex: 0 0 calc((100% - (16px * (var(--desktop-cols, 3) - 1)) - 64px) / var(--desktop-cols, 3));
      min-width: calc((100% - (16px * (var(--desktop-cols, 3) - 1)) - 64px) / var(--desktop-cols, 3));
      max-width: calc((100% - (16px * (var(--desktop-cols, 3) - 1)) - 64px) / var(--desktop-cols, 3));
    }
  }

  .how-it-works__tile {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 524 / 788;
  }

  .how-it-works__tile-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .how-it-works__tile-image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .how-it-works__tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .how-it-works__tile-image--fit {
    top: 40px;
    bottom: 40px;
  }

  .how-it-works__tile-image--fit img {
    object-fit: contain;
    object-position: center bottom;
  }

  .how-it-works__tile-image--logo-space {
    top: 178px;
  }

  .how-it-works__tile-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, var(--overlay-opacity, 0));
    pointer-events: none;
  }

  .how-it-works__tile-logo {
    position: absolute;
    top: var(--logo-top-mobile, 1rem);
    left: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    line-height: 0;
    pointer-events: none;
  }

  @media (min-width: 1024px) {
    .how-it-works__tile-logo {
      top: var(--logo-top-desktop, 1rem);
    }
  }

  .how-it-works__tile-logo--left {
    justify-content: flex-start;
  }

  .how-it-works__tile-logo--center {
    justify-content: center;
  }

  .how-it-works__tile-logo--right {
    justify-content: flex-end;
  }

  .how-it-works__tile-logo img {
    width: var(--logo-max-width, 140px);
    height: auto;
    max-width: 80vw;
    display: block;
    object-fit: contain;
  }

  /* Step item text overlay (top-left, per Figma) */
  .how-it-works__tile-overlay {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    color: var(--card-text-color, #FFFFFF);
    max-width: 400px;
    pointer-events: none;
  }

  @media (min-width: 1024px) {
    .how-it-works__tile-overlay {
      top: 32px;
      left: 32px;
      right: 32px;
      gap: 24px;
    }
  }

  .how-it-works__tile-tag {
    margin: 0;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm, 0.375rem);
    padding: 8px 14px;
    font-family: 'Gotham Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
  }

  .how-it-works__tile-title {
    margin: 0;
    color: inherit;
    font-weight: 700;
  }

  @media (max-width: 767px) {
    .how-it-works__tile-title {
      font-size: 28px;
    }
  }

  .how-it-works__tile-body {
    margin: 0;
    color: inherit;
  }

  .how-it-works__tile-button {
    align-self: flex-start;
    pointer-events: auto;
  }

  .how-it-works__tile-button-text--mobile {
    display: none;
  }

  @media (max-width: 1023px) {
    .how-it-works__tile-button[data-has-mobile-button-text="true"] .how-it-works__tile-button-text--desktop {
      display: none;
    }

    .how-it-works__tile-button[data-has-mobile-button-text="true"] .how-it-works__tile-button-text--mobile {
      display: inline;
    }
  }

  .how-it-works__navigation {
    display: none;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
  }

  @media (max-width: 1023px) {
    .how-it-works__navigation[data-show-mobile="true"] {
      justify-content: flex-end;
      display: flex;
    }
  }

  @media (min-width: 1024px) {
    .how-it-works__navigation[data-show-desktop="true"] {
      display: flex;
    }
  }

  /* Nav button uses global .btn--nav - section-specific color override */
  .how-it-works__nav-button {
    color: var(--section-text-color, #000000);
    flex-shrink: 0;
  }
/* END_SECTION:how-it-works-three-images */

/* START_SECTION:icons-key-features (INDEX:27) */
.icons-key-features {
    background-color: var(--background-color, #ffffff);
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .icons-key-features--hidden {
    display: none;
  }

  .icons-key-features__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    align-items: flex-start;
    text-align: left;
  }

  .icons-key-features__header--align-left {
    align-items: flex-start;
    text-align: left;
  }

  .icons-key-features__header--align-center {
    align-items: center;
    text-align: center;
  }

  .icons-key-features__header--align-right {
    align-items: flex-end;
    text-align: right;
  }

  .icons-key-features__title {
    color: var(--text-color, #000000);
    margin: 0;
    line-height: 1;
  }

  .icons-key-features__subtitle {
    color: var(--text-color, #000000);
    margin: 0;
    line-height: 1.1;
  }

  .icons-key-features__content {
    border-top: var(--border-width-desktop, 1px) solid var(--text-color, #000000);
    padding-top: 40px;
  }

  .icons-key-features--no-top-border .icons-key-features__content {
    border-top: none;
  }

  .icons-key-features__grid {
    display: grid;
    grid-template-columns: repeat(var(--items-per-row-desktop, 6), minmax(104px, 1fr));
    column-gap: 24px;
    row-gap: 40px;
    align-items: start;
    width: 100%;
  }

  .icons-key-features__grid--left_aligned_list {
    justify-items: start;
  }

  .icons-key-features__grid--centered_grid {
    justify-items: center;
  }

  .icons-key-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
  }

  .icons-key-features__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color, #000000);
  }

  .icons-key-features__icon-svg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icons-key-features__icon-svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .icons-key-features__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .icons-key-features__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* NOTE:
    We intentionally do NOT apply a generic CSS `filter` to SVG `<img>` tags.
    Many Shopify Files SVGs include a white background rect; `brightness(0)` turns that into a black square.
    If you need full color control, we inline the SVG via JS (see `frontend/entrypoints/sections/icons-key-features.ts`).
  */

  .icons-key-features__label {
    color: var(--text-color, #000000);
    margin: 0;
    line-height: 1.02;
    /* width: 100%; */
    white-space: nowrap;
  }

  .icons-key-features__description {
    color: var(--text-color, #000000);
    margin: 0;
    margin-top: 8px;
  }

  .icons-key-features__empty {
    padding-top: 40px;
    text-align: center;
  }

  .icons-key-features__empty-text {
    color: var(--text-color, #000000);
    margin: 0;
  }

  @media (max-width: 767px) {
    .icons-key-features {
      padding-left: 0;
      padding-right: 0;
    }

    .icons-key-features__header {
      gap: 8px;
    }

    .icons-key-features__content {
      border-top-width: var(--border-width-mobile, 1px);
    }

    .icons-key-features__grid {
      grid-template-columns: repeat(var(--items-per-row-mobile, 4), minmax(0, 1fr));
      column-gap: 40px;
      row-gap: 40px;
      justify-items: center;
    }

    .icons-key-features__item {
      min-width: 0;
    }
  }

  /* Tablet styles */
  @media (min-width: 768px) and (max-width: 1023px) {
    .icons-key-features__grid {
      grid-template-columns: repeat(4, minmax(104px, 1fr));
      column-gap: 24px;
      row-gap: 40px;
    }
  }

  .icons-key-features__content {
    border-bottom: var(--border-width-desktop, 1px) solid var(--text-color, #000000);
    padding-bottom: 40px;
  }

  .icons-key-features--no-bottom-border .icons-key-features__content {
    border-bottom: none;
    padding-bottom: 0;
  }

  @media (max-width: 767px) {
    .icons-key-features__content {
      border-bottom-width: var(--border-width-mobile, 1px);
    }
  }
/* END_SECTION:icons-key-features */

/* START_SECTION:image-hotspots (INDEX:28) */
.image-hotspots {
  position: relative;
  width: 100%;
  background-color: var(--background-color, #ffffff);
  box-sizing: border-box;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  margin-top: var(--section-margin-top);
  margin-bottom: var(--section-margin-bottom);
}

@media (max-width: 767px) {
  .image-hotspots {
    padding-top: calc(var(--section-padding-top) * 0.67);
    padding-bottom: calc(var(--section-padding-bottom) * 0.67);
  }
}

.image-hotspots__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
}

@media (max-width: 1023px) {
  .image-hotspots__inner {
    padding: 0 2rem;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .image-hotspots__inner {
    padding: 0 1.25rem;
    max-width: 100%;
  }
}

.image-hotspots__section-title {
  margin: 0;
  padding: 0;
  color: var(--title-color, #000000);
}

/* Media container */
.image-hotspots__media-wrapper {
  position: relative;
  width: 100%;
}

.image-hotspots__media {
  position: relative;
  width: 100%;
  border-radius: 0.3125rem;
  overflow: hidden;
  background-color:transparent;
  max-height: 100dvh;
}

.image-hotspots__media--2\:1 {
  aspect-ratio: 2 / 1;
}

.image-hotspots__media--16\:9 {
  aspect-ratio: 16 / 9;
}

.image-hotspots__media--original {
  aspect-ratio: auto;
}

@media (max-width: 767px) {
  .image-hotspots__media--2\:1,
  .image-hotspots__media--16\:9 {
    aspect-ratio: 335 / 389;
  }
}

.image-hotspots__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.image-hotspots__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-hotspots__image-wrapper--desktop {
  display: block;
}

.image-hotspots__image-wrapper--mobile {
  display: none;
}

@media (max-width: 767px) {
  .image-hotspots__image-wrapper--desktop:not(.image-hotspots__image-wrapper--fallback) {
    display: none;
  }

  .image-hotspots__image-wrapper--mobile {
    display: block;
  }
}

.image-hotspots__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, var(--overlay-opacity, 0));
  pointer-events: none;
  z-index: 1;
}

/* Hotspot points container */
.image-hotspots__points {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.image-hotspots__point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 3;
}

@media (max-width: 767px) {
  .image-hotspots[data-show-mobile="true"] .image-hotspots__point {
    left: var(--mobile-x);
    top: var(--mobile-y);
  }

  .image-hotspots[data-show-mobile="false"] .image-hotspots__points {
    display: none;
  }
}

/* Marker button */
.image-hotspots__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background-color: var(--hotspot-color, #B5CC18);
  color: var(--hotspot-icon-color, #000000);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.image-hotspots__marker:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.image-hotspots__marker:focus-visible {
  outline: 2px solid var(--hotspot-icon-color, #000000);
  outline-offset: 3px;
}

/* Icon toggling */
.image-hotspots__icon-minus {
  display: none;
}

.image-hotspots__marker[aria-expanded="true"] .image-hotspots__icon-plus {
  display: none;
}

.image-hotspots__marker[aria-expanded="true"] .image-hotspots__icon-minus {
  display: block;
}

/* Pulse animation for markers */
.image-hotspots__marker::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--hotspot-color, #B5CC18);
  opacity: 0.4;
  animation: hotspot-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

.image-hotspots__marker[aria-expanded="true"]::before {
  animation: none;
  opacity: 0;
}

@keyframes hotspot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Tooltip card */
.image-hotspots__tooltip {
  position: absolute;
  width: var(--tooltip-max-width, 20rem);
  background: #ffffff;
  border-radius: 0.375rem;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.image-hotspots__tooltip.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tooltip positioning */
.image-hotspots__tooltip--top-right {
  bottom: calc(100% + 0.75rem);
  left: 50%;
}

.image-hotspots__tooltip--top-left {
  bottom: calc(100% + 0.75rem);
  right: 50%;
}

.image-hotspots__tooltip--bottom-right {
  top: calc(100% + 0.75rem);
  left: 50%;
}

.image-hotspots__tooltip--bottom-left {
  top: calc(100% + 0.75rem);
  right: 50%;
}

/* Tooltip inner layout */
.image-hotspots__tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.image-hotspots__tooltip-titles {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.image-hotspots__tooltip-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #707070;
  line-height: 1.5;
}

.image-hotspots__tooltip-subtitle {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #707070;
  line-height: 1.5;
}

.image-hotspots__tooltip-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.image-hotspots__tooltip-icon {
  width: 3.25rem;
  height: auto;
  flex-shrink: 0;
}

.image-hotspots__tooltip-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.image-hotspots__tooltip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #707070;
  padding: 0;
  flex-shrink: 0;
}

.image-hotspots__tooltip-close:hover {
  color: #333333;
}

.image-hotspots__tooltip-close:focus-visible {
  outline: 2px solid #333333;
  outline-offset: 2px;
  border-radius: 2px;
}

.image-hotspots__tooltip-description {
  font-size: 0.6rem;
  line-height: 1.5;
  color: #707070;
  margin: 0;
}

/* Mobile tooltip adjustments */
@media (max-width: 767px) {
  .image-hotspots__marker {
    width: 2.25rem;
    height: 2.25rem;
  }

  .image-hotspots__tooltip {
    width: min(var(--tooltip-max-width, 20rem), calc(100vw - 2.5rem));
  }
}
/* END_SECTION:image-hotspots */

/* START_SECTION:image-text--slider (INDEX:29) */
.image-text-slider {
    position: relative;
    overflow: hidden;
    --slider-height: 49.0625rem;
    background-color: var(--background-color, #E9E9EB);
    padding-top: var(--section-padding-top, 0);
    padding-bottom: var(--section-padding-bottom, 0);
  }

  .image-text-slider--full_width {
    width: 100%;
  }

  .image-text-slider--contained {
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .image-text-slider__container {
    position: relative;
    width: 100%;
  }

  .image-text-slider__viewport {
    position: relative;
    width: 100%;
  }

  .image-text-slider__track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    height: 100%;
  }

  .image-text-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    opacity: 0;
    height: 100%;
    display: flex;
    background-color: var(--slide-bg-color, var(--background-color, #E9E9EB));
  }

  .image-text-slider__slide[data-active="true"] {
    opacity: 1;
  }

  .image-text-slider__slide-content {
    display: flex;
    width: 100%;
    color: var(--text-color, #000000);
    position: relative;
    align-items: stretch;
    box-sizing: border-box;
  }

  @media (min-width: 1024px) {
    .image-text-slider__viewport {
      height: min(var(--slider-height), 100svh);
    }

    .image-text-slider__slide-content {
      height: 100%;
    }

    .image-text-slider__text-column,
    .image-text-slider__image-column {
      height: 100%;
      min-height: 0;
    }
  }

  .image-text-slider__text-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 2rem;
  }

  .image-text-slider__text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 0 auto;
    justify-content: center;
    align-items: flex-start;
    max-width: 40.875rem;
    padding: 2.5rem 0;
  }

  .image-text-slider__image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
  }

  .image-text-slider__image-column--top {
    justify-content: flex-start;
  }

  .image-text-slider__image-column--middle {
    justify-content: center;
  }

  .image-text-slider__image-column--bottom {
    justify-content: flex-end;
  }

  .image-text-slider__slide--default .image-text-slider__text-column,
  .image-text-slider__slide--default .image-text-slider__image-column {
    flex: 1 0 0;
  }

  .image-text-slider__slide--compact .image-text-slider__text-column {
    flex: 1 0 0;
  }

  .image-text-slider__slide--compact .image-text-slider__image-column {
    flex: 2 0 0;
  }

  .image-text-slider__category-tag {
    border: 1px solid #000000;
    border-radius: var(--small, 0.375rem);
    padding: 0.5rem 1.25rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 1;
  }

  .image-text-slider__pre-header {
    line-height: 1;
  }

  .image-text-slider__heading {
    margin: 0;
  }

  .image-text-slider__description {
    line-height: 1.4;
  }

  .image-text-slider__price-subtext {
    margin-top: -0.5rem;
  }

  .image-text-slider__buttons {
    display: flex;
    gap: 1.0625rem;
    flex-wrap: wrap;
  }

  .image-text-slider__button {
    font-weight: 600;
  }

  .image-text-slider__button-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .image-text-slider__bottom-links {
    display: flex;
    column-gap: 5rem;
    row-gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .image-text-slider__bottom-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 1;
    color: var(--text-color, #000000);
    transition: opacity 0.2s ease;
  }

  .image-text-slider__bottom-link:hover {
    opacity: 0.7;
  }

  .image-text-slider__bottom-link-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .image-text-slider__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-text-slider__image-wrapper--desktop {
    display: flex;
  }

  .image-text-slider__image-wrapper--desktop.image-text-slider__image-wrapper--fallback {
    display: flex;
  }

  .image-text-slider__image-wrapper--mobile {
    display: none;
  }

  /* Override the generic snippet `.image` rules with higher specificity */
  .image-text-slider .image-text-slider__image.image {
    width: 100%;
    height: 100%;
  }

  .image-text-slider .image-text-slider__image.image > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .image-text-slider .image-text-slider__image-column--top .image-text-slider__image.image > img {
    object-position: center top;
  }

  .image-text-slider .image-text-slider__image-column--middle .image-text-slider__image.image > img {
    object-position: center;
  }

  .image-text-slider .image-text-slider__image-column--bottom .image-text-slider__image.image > img {
    object-position: center bottom;
  }

  /* Nav uses global .btn--nav with slider-specific position and transparent style */
  .image-text-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    color: var(--arrow-color, #000000);
  }

  .image-text-slider__nav:hover:not(:disabled) {
    opacity: 0.7;
    background: transparent;
  }

  .image-text-slider__nav--prev {
    left: 0;
  }

  .image-text-slider__nav--next {
    right: 0;
  }

  .image-text-slider__dots {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    z-index: 10;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    color: var(--arrow-color, #000000);
  }

  .image-text-slider__mobile-controls {
    display: none;
  }

  .image-text-slider__dot {
    width: 2.262rem;
    height: 0.7053rem;
    border: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease),
                background-color var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
    padding: 0;
  }

  .image-text-slider__dot[aria-selected="true"] {
    background-color: currentColor;
  }

  .image-text-slider__dot:hover:not([aria-selected="true"]) {
    opacity: 0.7;
  }

  .image-text-slider__slide-content--top .image-text-slider__text-content {
    justify-content: flex-start;
  }

  .image-text-slider__slide-content--middle .image-text-slider__text-content {
    justify-content: center;
  }

  .image-text-slider__slide-content--bottom .image-text-slider__text-content {
    justify-content: flex-end;
  }

  .image-text-slider__slide-content--left {
    flex-direction: row;
  }

  .image-text-slider__slide-content--right {
    flex-direction: row-reverse;
  }

  /* Mobile styles */
  @media (max-width: 1023px) {
    .image-text-slider {
      padding-top: calc(var(--section-padding-top, 0rem) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom, 0rem) * 0.67);
    }

    .image-text-slider__slide-content {
      flex-direction: column;
      min-height: auto;
    }

    .image-text-slider__slide--default .image-text-slider__text-column,
    .image-text-slider__slide--default .image-text-slider__image-column,
    .image-text-slider__slide--compact .image-text-slider__text-column,
    .image-text-slider__slide--compact .image-text-slider__image-column {
      flex: 0 0 auto;
    }

    .image-text-slider__text-column {
      max-width: 100%;
      padding-right: 0;
      padding: 1rem 0 0;
      justify-content: flex-start;
      align-self: stretch;
      order: 3;
    }

    .image-text-slider__text-content {
      gap: 1rem;
      padding: 0;
    }

    .image-text-slider__image-column {
      height: 20.5rem;
      width: 100%;
      align-items: flex-end;
      min-height: 0;
      overflow: hidden;
      order: 1;
    }

    .image-text-slider__mobile-controls {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0 0.5rem;
      order: 2;
    }

    .image-text-slider__nav--desktop,
    .image-text-slider__dots--desktop {
      display: none;
    }

    .image-text-slider__nav--mobile {
      position: static;
      top: auto;
      transform: none;
      padding: 0.75rem;
    }

    .image-text-slider__dots--mobile {
      position: static;
      left: auto;
      bottom: auto;
      transform: none;
      flex: 1 1 auto;
      justify-content: center;
    }

    .image-text-slider[data-has-bottom-links='false'] .image-text-slider__text-column {
      padding-bottom: 1.5rem;
    }

    .image-text-slider__slide--compact .image-text-slider__image-column {
      height: 20.5rem;
    }

    .image-text-slider__image-wrapper--desktop:not(.image-text-slider__image-wrapper--fallback) {
      display: none;
    }

    .image-text-slider__image-wrapper--desktop.image-text-slider__image-wrapper--fallback {
      display: block;
    }

    .image-text-slider__image-wrapper--mobile {
      display: block;
    }

    .image-text-slider__buttons {
      flex-direction: column;
      width: 100%;
    }

    .image-text-slider__button {
      width: 100%;
    }

    .image-text-slider__bottom-links {
      flex-direction: row;
      gap: 1.5rem;
      padding-top: 1.5rem;
      padding-bottom: 2.5rem;
      flex-wrap: wrap;
    }

    .image-text-slider__nav--prev {
      left: 0;
    }

    .image-text-slider__nav--next {
      right: 0;
    }
  }

  .image-text-slider[data-slide-height="small"] {
    --slider-height: 31.25rem;
  }

  .image-text-slider[data-slide-height="medium"] {
    --slider-height: 43.75rem;
  }

  .image-text-slider[data-slide-height="large"] {
    --slider-height: 56.25rem;
  }

  .image-text-slider[data-slide-height="full_screen"] {
    --slider-height: 100svh;
  }
/* END_SECTION:image-text--slider */

/* START_SECTION:influencer (INDEX:30) */
.content-tiles {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .content-tiles__inner {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  @media (max-width: 1023px) {
    /*
      Ensure the influencer section keeps the same side gutters as other components.
      Other "content-tiles" sections may set `.content-tiles__inner { max-width: 100%; }`
      on mobile, which can override `.content-container` and remove horizontal gutters.
    */
    .content-tiles--influencer .content-tiles__inner {
      max-width: min(calc(100% - 2.5rem), var(--max-width-container, 1600px));
    }
  }

  @media (max-width: 767px) {
    .content-tiles__inner {
      overflow-x: visible;
    }
    .content-tiles {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
    /* Ensure all child elements respect container width on mobile */
    .content-tiles__inner > * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  .content-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }

  .content-tiles__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .influencer__title {
    margin: 0;
    color: var(--section-text-color);
  }

  .influencer__subtitle {
    color: var(--section-text-color);
  }

  @media (max-width: 767px) {
    .content-tiles__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 16px;
    }
    .content-tiles__controls--desktop {
      display: none !important;
    }
    .content-tiles__controls--mobile {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      margin-top: 0;
      margin-bottom: 16px;
      width: 100%;
    }
    .content-tiles--mobile-grid .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  .content-tiles__controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
  }

  .content-tiles__controls--mobile {
    display: none;
  }

  .content-tiles__controls--desktop {
    display: flex;
  }

  @media (min-width: 768px) {
    .content-tiles__controls--desktop {
      display: flex;
    }
    .content-tiles__controls--mobile {
      display: none !important;
    }
  }

  .content-tiles__control {
    width: 48px;
    height: 48px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }

  .content-tiles__control:hover:not(:disabled) {
    opacity: 0.8;
  }

  .content-tiles__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .content-tiles__control svg {
    width: 24px;
    height: 24px;
  }

  @media (max-width: 767px) {
    .content-tiles__control {
      width: 40px;
      height: 40px;
      padding: 10px;
    }
    .content-tiles__control svg {
      width: 20px;
      height: 20px;
    }
    .content-tiles__controls {
      gap: 12px;
    }
  }

  .content-tiles__container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  @media (max-width: 767px) {
    .content-tiles__container {
      overflow-x: auto;
    }
  }

  .content-tiles--grid .content-tiles__container {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        max(250px, calc((100% - (var(--grid-columns) - 1) * 16px) / var(--grid-columns))),
        1fr
      )
    );
    gap: 16px;
    align-items: stretch;
  }

  .content-tiles--influencer.content-tiles--grid .content-tiles__card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .content-tiles--influencer.content-tiles--grid .content-tiles__card--no-image {
    height: 100%;
  }

  @media (max-width: 767px) {
    .content-tiles--grid .content-tiles__container {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    
    .content-tiles--mobile-grid .content-tiles__container {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile), 1fr) !important;
      gap: 16px !important;
      overflow-x: visible !important;
      scroll-snap-type: none !important;
      flex-direction: unset !important;
    }
    
    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      flex: unset !important;
      min-width: unset !important;
      max-width: 100% !important;
    }
  }

  .content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 4px;
  }

  .content-tiles--slider .content-tiles__container::-webkit-scrollbar {
    display: none;
  }

  .content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .content-tiles--slider .content-tiles__card {
      width: 430px;
    }
  }

  @media (max-width: 767px) {
    .content-tiles--slider .content-tiles__container {
      gap: 8px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .content-tiles--slider .content-tiles__card {
      width: 295px;
      max-width: 295px;
      min-width: 295px;
      flex-shrink: 0;
    }
  }

  .content-tiles__card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-grey-light, #f7f7f7);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-tiles__card-link {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .content-tiles__card-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
    box-sizing: border-box;
  }

  .content-tiles__card-image img,
  .content-tiles__img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
  }

  @media (max-width: 767px) {
    .content-tiles--influencer .content-tiles__card-image img,
    .content-tiles--influencer .content-tiles__img {
      max-width: 100%;
      width: 100% !important;
    }

    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image img,
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image .content-tiles__img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      position: relative;
      border-radius: 0 !important;
      aspect-ratio: unset !important;
    }
  }

  .content-tiles__card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    pointer-events: none;
  }

  .content-tiles--influencer .content-tiles__card--feature {
    min-height: 400px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
  }

  .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image {
    min-height: 400px;
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image {
    height: 100%;
    flex: 1;
    min-height: 400px;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
  }

  .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image .content-tiles__card-image {
    min-height: 400px;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image img,
  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image .content-tiles__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    aspect-ratio: unset !important;
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px;
    color: white;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .content-tiles--influencer .content-tiles__card--no-image {
    height: auto;
    min-height: 200px;
  }

  .content-tiles--influencer .content-tiles__card--no-image .content-tiles__card-content {
    position: static;
    padding: 24px 16px;
    color: var(--card-text-color, var(--section-text-color));
    flex: 1;
  }

  .content-tiles--influencer .content-tiles__card--no-image .content-tiles__card-heading {
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles--influencer .content-tiles__card--no-image .content-tiles__card-body {
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-heading {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
    color: white;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: white;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* CTA button - uses global .btn--outline with section-specific overrides */
  .content-tiles--influencer .influencer__cta-button {
    align-self: flex-start;
  }

  .content-tiles--influencer .content-tiles__card--feature .influencer__cta-button {
    margin-top: 0;
  }

  @media (max-width: 1023px) {
    .content-tiles--influencer .content-tiles__card--feature {
      min-height: 340px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image {
      min-height: 340px;
    }
    .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 340px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-heading {
      font-size: 24px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-body {
      font-size: 15px;
    }
  }

  @media (max-width: 767px) {
    .content-tiles--influencer .content-tiles__card--feature {
      min-height: 300px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image {
      min-height: 300px;
    }
    .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 300px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-content {
      padding: 20px 16px;
      gap: 12px;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-heading {
      font-size: 20px;
      line-height: 1.3;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-body {
      font-size: 14px;
      line-height: 1.5;
    }
  }

  /* ── Profile Card Style ── */

  .content-tiles--card-profile .content-tiles__header-text {
    gap: 24px;
  }

  .content-tiles--card-profile .influencer__subtitle {
    max-width: 970px;
    line-height: 1.4;
  }

  .influencer__header-cta {
    align-self: flex-start;
  }

  .content-tiles--card-profile.content-tiles--grid .content-tiles__container {
    gap: 32px;
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        max(220px, calc((100% - (var(--grid-columns) - 1) * 32px) / var(--grid-columns))),
        1fr
      )
    );
  }

  .content-tiles--card-profile.content-tiles--slider .content-tiles__container {
    gap: 32px;
  }

  .content-tiles__card--profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    min-height: 0;
    max-height: none;
  }

  .content-tiles__card-image--profile {
    position: relative;
    width: 100%;
    aspect-ratio: 346 / 371;
    overflow: hidden;
    background: var(--profile-image-bg, transparent);
  }

  .content-tiles__card-image--profile img,
  .content-tiles__card-image--profile .content-tiles__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .content-tiles__card-content--profile {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles__card-heading--profile {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles__card-body--profile {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: var(--card-text-color, var(--section-text-color));
  }

  @media (max-width: 767px) {
    .content-tiles--card-profile.content-tiles--grid .content-tiles__container {
      gap: 24px;
    }
    .content-tiles__card-heading--profile {
      font-size: 18px;
    }
    .content-tiles__card-body--profile {
      font-size: 14px;
    }
  }
/* END_SECTION:influencer */

/* START_SECTION:large-content (INDEX:31) */
.large-content {
    background-color: var(--lc-bg, #ffffff);
    color: var(--lc-text, #000000);
  }

  .large-content__container {
    width: 100%;
  }

  .large-content__media--full {
    height: auto;
    aspect-ratio: var(--lc-media-aspect, auto);
  }
/* END_SECTION:large-content */

/* START_SECTION:predictive-search (INDEX:36) */
.predictive-search-flyout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .predictive-search-flyout__meta-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-flyout__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .predictive-search-flyout__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--color-grey-light, #f5f5f5);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    min-height: 36px;
  }

  .predictive-search-flyout__chip:hover,
  .predictive-search-flyout__chip:focus,
  .predictive-search-flyout__chip[aria-selected="true"] {
    background: var(--color-grey-medium, #e9e9eb);
    outline: none;
  }

  .predictive-search-flyout__columns {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }

  .predictive-search-flyout__column {
    min-width: 0;
  }

  .predictive-search-flyout__column-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-flyout__column--products {
    flex: 2;
    min-width: 320px;
    padding-right: 40px;
    border-right: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-flyout__column--collections {
    flex: 1;
    min-width: 220px;
    padding-right: 40px;
    border-right: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-flyout__column--articles {
    flex: 1;
    min-width: 240px;
  }

  .predictive-search-flyout__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .predictive-search-flyout__item {
    margin: 0;
  }

  .predictive-search-flyout__empty-mini {
    margin: 0;
    font-size: 14px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-flyout__subgroup {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-flyout__subgroup-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-flyout__page-link {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
    transition: background-color 0.15s ease;
  }

  .predictive-search-flyout__page-link:hover,
  .predictive-search-flyout__page-link:focus,
  .predictive-search-flyout__page-link[aria-selected="true"] {
    background-color: var(--color-grey-light, #f5f5f5);
    outline: none;
  }

  .predictive-search-flyout__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-flyout__view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-grey-light, #f5f5f5);
    min-height: 44px;
  }

  .predictive-search-flyout__view-all:hover,
  .predictive-search-flyout__view-all:focus,
  .predictive-search-flyout__view-all[aria-selected="true"] {
    background: var(--color-grey-medium, #e9e9eb);
    outline: none;
  }

  .predictive-search-flyout__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
  }

  .predictive-search-flyout__empty-text {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text, #000);
  }

  .predictive-search-flyout__empty-hint {
    font-size: 14px;
    margin: 0;
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* Mobile/tablet: stack columns */
  @media (max-width: 1279px) {
    .predictive-search-flyout__columns {
      flex-direction: column;
      gap: 24px;
      overflow-x: hidden;
    }

    .predictive-search-flyout__column--products,
    .predictive-search-flyout__column--collections {
      border-right: none;
      padding-right: 0;
    }

    /* Remove desktop min-width constraints that cause horizontal overflow */
    .predictive-search-flyout__column--products,
    .predictive-search-flyout__column--collections,
    .predictive-search-flyout__column--articles {
      min-width: 0;
      width: 100%;
    }
  }

  /* Visually hidden but accessible */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-description-text (INDEX:37) */
.product-description-text {
  background-color: var(--section-bg-color);
  color: var(--section-text-color);
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

.product-description-text__component {
  display: block;
}

.product-description-text__heading {
  margin-bottom: 40px;
  text-align: var(--content-alignment);
  color: var(--section-text-color);
}

.product-description-text__content {
  width: 100%;
  text-align: var(--content-alignment);
}

@media (min-width: 48rem) {
  .product-description-text__content--constrained {
    max-width: calc(100% * var(--content-width) / 12);
  }
}

.product-description-text__content--center {
  margin-left: auto;
  margin-right: auto;
}

.product-description-text__text {
  color: var(--section-text-color);
  line-height: 1.2;
}

.product-description-text__text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.product-description-text__text-wrapper .product-description-text__text {
  margin-bottom: 0;
}

.product-description-text__text-wrapper[data-truncated="true"] .product-description-text__text--full {
  display: none;
}

.product-description-text__text-wrapper[data-truncated="true"] .product-description-text__text--truncated {
  display: block;
}

.product-description-text__text-wrapper[data-truncated="false"] .product-description-text__text--full {
  display: block;
}

.product-description-text__text-wrapper[data-truncated="false"] .product-description-text__text--truncated {
  display: none;
}

.product-description-text__read-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-top: 40px;
  cursor: pointer;
  color: var(--section-text-color);
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: var(--Text-Sizes-Text-Regular, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
}

.product-description-text__read-more-text {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}

.product-description-text__read-more-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}

.product-description-text__read-more:hover {
  opacity: 0.7;
}

.product-description-text__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--section-text-color);
  text-decoration: none;
  margin-top: 40px;
  transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
}

.product-description-text__cta-text {
  color: var(--section-text-color);
}

.product-description-text__cta:hover {
  opacity: 0.7;
  color: var(--section-text-color);
}

.product-description-text__cta:visited {
  color: var(--section-text-color);
}

.product-description-text__cta:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  color: var(--section-text-color);
}

.product-description-text__cta-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: currentColor;
}

.product-description-text__cta-icon path {
  stroke: currentColor;
}

.product-description-text__notes {
  margin-top: 40px;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-description-text__notes.hidden {
  display: none;
}

.product-description-text__note {
  color: var(--section-text-color);
  font-size: 14px;
  line-height: 1.6;
}

.product-description-text__note a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.product-description-text__note a:hover {
  opacity: 0.7;
}
/* END_SECTION:product-description-text */

/* START_SECTION:product-floating-add-to-cart (INDEX:38) */
section.floating-add-to-cart {
    position: fixed !important;
  }
/* END_SECTION:product-floating-add-to-cart */

/* START_SECTION:product-header-detailed (INDEX:40) */
.product-header-detailed__step[data-step-active="true"] .product-header-detailed__step-header {
    opacity: 1;
  }

  .product-header-detailed__step[data-step-active="true"] [data-step-number] {
    background-color: var(--color-primary, #000);
    color: var(--color-white, #fff);
  }

  .product-header-detailed__step[data-step-active="false"] [data-step-content] {
    display: none;
  }

  .product-header-detailed__step[data-step-active="true"] [data-step-icon] {
    transform: rotate(0deg);
  }

  .product-header-detailed__step[data-step-active="false"] [data-step-icon] {
    transform: rotate(180deg);
  }

  /* Option card styling */
  .bundle-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--color-grey-medium, #E9E9EB);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .bundle-option-card:hover {
    border-color: var(--color-primary, #000);
  }

  .bundle-option-card[data-selected="true"] {
    border-color: var(--color-primary, #000);
    background-color: var(--color-grey-light, #F7F7F7);
  }

  .bundle-option-card__image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 0.5rem;
  }

  .bundle-option-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
  }

  .bundle-option-card__price {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 0.25rem;
  }
/* END_SECTION:product-header-detailed */

/* START_SECTION:product-showcase (INDEX:41) */
.product-showcase {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .product-showcase__wrapper {
    display: block;
    width: 100%;
  }

  /* Contained layout */
  .product-showcase--contained .product-showcase__wrapper {
    overflow: hidden;
  }

  /* On mobile, remove content-container max-width constraint so image bleeds full-width */
  @media (max-width: 1023px) {
    .product-showcase--contained .product-showcase__wrapper {
      max-width: 100%;
      overflow: visible;
    }
  }

  .product-showcase__container {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 1024px) {
    .product-showcase__container {
      flex-direction: row;
      --height-current: var(--section-height-desktop, 50rem);
      min-height: var(--height-current);
      height: var(--height-current);
    }

    .product-showcase--image-right .product-showcase__container {
      flex-direction: row-reverse;
    }
  }

  /* Height presets via data attribute */
  .product-showcase__wrapper[data-section-height='small'] .product-showcase__container {
    --section-height-desktop: 38rem;
    --section-height-mobile: 38rem;
  }
  .product-showcase__wrapper[data-section-height='medium'] .product-showcase__container {
    --section-height-desktop: 50rem;
    --section-height-mobile: 50rem;
  }
  .product-showcase__wrapper[data-section-height='large'] .product-showcase__container {
    --section-height-desktop: 62rem;
    --section-height-mobile: 62rem;
  }
  .product-showcase__wrapper[data-section-height='full_screen'] .product-showcase__container {
    --section-height-desktop: 100svh;
    --section-height-mobile: 100svh;
  }

  /* Image Column — positioning context for stacked backgrounds */
  .product-showcase__image-column {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
    flex-shrink: 0;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .product-showcase__image-column {
      aspect-ratio: 16 / 9;
    }
  }

  @media (min-width: 1024px) {
    .product-showcase__image-column {
      width: 50%;
      height: 100%;
      aspect-ratio: unset;
    }
  }

  /* Background images — stacked, instant switch */
  .product-showcase__background {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
  }

  .product-showcase__background--active {
    display: block;
  }

  /* Link wrapper — covers the image column; only the active one is interactive */
  .product-showcase__background-link {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
  }

  .product-showcase__background-link--active {
    display: block;
    pointer-events: auto;
  }

  .product-showcase__background-link .product-showcase__background {
    /* When wrapped in a link, the picture fills the link and stays visible */
    display: block;
  }

  .product-showcase__background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .product-showcase__background--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .product-showcase__background--placeholder .placeholder-svg {
    width: 50%;
    height: 50%;
    opacity: 0.5;
  }

  /* Content Column — no horizontal padding; children handle their own via --content-pad-x */
  .product-showcase__content-column {
    --content-pad-x: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    background: var(--section-bg-color);
  }

  @media (min-width: 768px) {
    .product-showcase__content-column {
      --content-pad-x: 40px;
    }
  }

  @media (min-width: 1024px) {
    .product-showcase__content-column {
      --content-pad-x: 64px;
      width: 50%;
      height: 100%;
      padding: 40px 0;
    }
  }

  .product-showcase__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding-left: var(--content-pad-x);
    padding-right: var(--content-pad-x);
  }

  @media (min-width: 1024px) {
    .product-showcase__content {
      gap: 40px;
    }
  }

  /* Header */
  .product-showcase__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @media (min-width: 1024px) {
    .product-showcase__header {
      gap: 40px;
      flex-shrink: 0;
    }
  }

  .product-showcase__title {
    margin: 0;
    font-family: var(--font-heading-family, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--section-text-color);
  }

  @media (min-width: 1024px) {
    .product-showcase__title {
      font-size: 28px;
    }
  }

  /* Filter Buttons (Pills) — break out of content padding for edge-to-edge scroll */
  .product-showcase__filters {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    margin-left: calc(-1 * var(--content-pad-x));
    margin-right: calc(-1 * var(--content-pad-x));
    padding-left: var(--content-pad-x);
    padding-right: var(--content-pad-x);
  }

  .product-showcase__filters::-webkit-scrollbar {
    display: none;
  }


  .product-showcase__filter-btn {
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    padding: 22px 32px;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-body-family, 'Gotham Pro', sans-serif);
    -webkit-tap-highlight-color: transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
  }

  .product-showcase__filter-btn:hover {
    opacity: 0.9;
  }

  /* Active pill — uses custom pill colours when set, falls back to text/bg inversion */
  .product-showcase__filter-btn[aria-pressed='true'],
  .product-showcase__filter-btn.active {
    background-color: var(--pill-bg-color, var(--section-text-color));
    color: var(--pill-text-color, var(--section-bg-color));
    border-color: var(--pill-bg-color, var(--section-text-color));
  }

  /* Products Container */
  .product-showcase__products {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* Product Display - show only active product */
  .product-showcase__product {
    display: none;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
  }

  .product-showcase__product--active {
    display: flex;
  }

  .product-showcase__product-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    flex: 1;
    min-height: 0;
  }

  .product-showcase__product-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Image / title / description link wrappers — inherit colour, no underline */
  .product-showcase__product-img-link,
  .product-showcase__product-title-link,
  .product-showcase__product-description-link {
    color: inherit;
    text-decoration: none;
  }

  .product-showcase__product-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
  }

  .product-showcase__product-media--fit-height .product-showcase__product-img-link {
    height: 100%;
  }

  .product-showcase__product-title-link:hover,
  .product-showcase__product-description-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Fit to height — image stretches to fill the media area height, no crop */
  .product-showcase__product-media--fit-height .product-showcase__product-img {
    height: 100%;
    width: auto;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
  }

  .product-showcase__product-img--placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-showcase__product-img--placeholder .placeholder-svg {
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }

  /* Product Details — Lower Content block */
  .product-showcase__product-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  @media (min-width: 1024px) {
    .product-showcase__product-details {
      flex-shrink: 0;
      flex: 0 0 auto;
    }
  }

  /* Rating */
  .product-showcase__rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  @media (min-width: 1024px) {
    .product-showcase__rating {
      max-width: 235px;
    }
  }

  .product-showcase__rating-divider {
    width: 32px;
    height: 1px;
    background-color: var(--section-text-color);
    opacity: 0.3;
    flex-shrink: 0;
  }

  .product-showcase__rating-stars {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  @media (min-width: 1024px) {
    .product-showcase__rating-stars {
      gap: 8px;
    }
  }

  .product-showcase__stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
  }

  .product-showcase__stars-bg {
    color: var(--section-text-color);
    opacity: 0.25;
  }

  .product-showcase__stars-fill {
    position: absolute;
    inset: 0;
    color: var(--section-text-color);
    width: calc((var(--rating, 0) / 5) * 100%);
    overflow: hidden;
    white-space: nowrap;
  }

  .product-showcase__rating-count {
    font-size: 12px;
    color: var(--section-text-color);
    opacity: 0.7;
  }

  /* Product Info */
  .product-showcase__product-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  @media (min-width: 1024px) {
    .product-showcase__product-info {
      flex: 0 0 auto;
    }
  }

  .product-showcase__product-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Price + CTA row */
  .product-showcase__product-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }

  @media (min-width: 1024px) {
    .product-showcase__product-bottom {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
  }

  .product-showcase__product-title {
    margin: 0;
    font-family: var(--font-heading-family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--section-text-color);
  }

  .product-showcase__product-description {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--section-text-color);
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
    max-width: 66%;
  }

  .product-showcase__product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-heading-family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
  }

  .product-showcase__price-current--sale {
    color: var(--color-red, #ce4646);
  }

  .product-showcase__price-compare {
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.6;
  }

  /* CTA Button */
  .product-showcase__product-cta {
    flex-shrink: 0;
  }

  .product-showcase__cta-btn {
    display: inline-flex;
    width: auto;
  }

  /* Outline / link styles — text-coloured border, transparent bg */
  .product-showcase__cta-btn.btn--outline,
  .product-showcase__cta-btn.btn--link {
    color: var(--section-text-color);
    border-color: var(--section-text-color);
  }

  .product-showcase__cta-btn.btn--outline:hover,
  .product-showcase__cta-btn.btn--outline:focus {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
    border-color: var(--section-text-color);
  }

  /* Primary / secondary styles — filled bg, inverted text */
  .product-showcase__cta-btn.btn:not(.btn--outline):not(.btn--link) {
    background-color: var(--section-text-color);
    color: var(--section-bg-color);
    border-color: var(--section-text-color);
  }

  .product-showcase__cta-btn.btn:not(.btn--outline):not(.btn--link):hover,
  .product-showcase__cta-btn.btn:not(.btn--outline):not(.btn--link):focus {
    background-color: transparent;
    color: var(--section-text-color);
    border-color: var(--section-text-color);
  }

  /* Empty State */
  .product-showcase__empty {
    padding: 40px;
    text-align: center;
    opacity: 0.6;
  }
/* END_SECTION:product-showcase */

/* START_SECTION:product-specs-faq (INDEX:42) */
.psef {
    background-color: var(--tce-bg, #ffffff);
    color: var(--tce-text, #000000);
  }

  .psef__grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .psef__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .psef__empty {
    text-align: center;
    padding: 40px 0;
  }

  /* Columns stretch so both accordions match height */
  .psef__col {
    display: flex;
    flex-direction: column;
  }

  .psef__col--empty {
    display: none;
  }

  @media (min-width: 1024px) {
    .psef__grid--single-col {
      grid-template-columns: 1fr;
    }
  }

  /* Specs accordion (single wrapper, no inner accordions) */
  .psef-specs-accordion,
  .psef-faq-accordion {
    width: 100%;

    & .table-element__accordion-content ul {
      list-style: circle;
      margin-bottom: 1rem !important;
    }
  }

  .psef-specs-accordion .table-element__content,
  .psef-faq-accordion .table-element__content {
    overflow: hidden;
  }

  .psef-specs-accordion__summary,
  .psef-faq-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 24px 24px 20px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--tce-bg, #ffffff);
  }

  .psef-specs-accordion__summary::-webkit-details-marker,
  .psef-faq-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .psef-specs-accordion .table-element__accordion-icon,
  .psef-faq-accordion .table-element__accordion-icon {
    transition: transform 0.3s ease;
  }

  /* Main title icons: plus when closed, minus when open */
  .psef-plus-minus {
    display: inline-flex;
  }

  .psef-plus-minus__line--v {
    transform-origin: center;
    transition: transform 0.3s ease;
  }

  .psef-specs-accordion:not([open]) .psef-plus-minus__line--v,
  .psef-faq-accordion:not([open]) .psef-plus-minus__line--v {
    transform: rotate(90deg);
  }

  .psef-specs-accordion[open] .psef-plus-minus__line--v,
  .psef-faq-accordion[open] .psef-plus-minus__line--v {
    transform: rotate(0deg);
  }

  /* Inner FAQ items: chevron still rotates */
  .psef-faq-accordion .table-element__accordion-item .table-element__accordion-icon {
    transform: none;
  }

  .psef-faq-accordion .table-element__accordion-item[open] .table-element__accordion-icon {
    transform: rotate(180deg);
  }

  .psef-specs-accordion__items {
    padding: 0 24px 24px;
  }

  .psef-specs__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #000000;
  }

  .psef-specs__row:first-child {
    border-top: 1px solid #000000;
  }

  .psef-specs__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .psef-specs__label {
    color: var(--Color-Base-Black, #000);

    /* Text/Regular/Medium */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 19.2px */
  }

  .psef-specs__value {
    color: var(--Color-Base-Black, #000);

    /* Text/Regular/Normal */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
  }

  .psef-specs__value ul,
  .psef-specs__value ol {
    margin: 0;
    padding-left: 18px;
  }

  .psef-specs__value li {
    margin-bottom: 8px;
  }

  .psef-specs__value li:last-child {
    margin-bottom: 0;
  }

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

  .psef-specs__value a:hover {
    opacity: 0.7;
  }

  /* Download icon for links in the downloads row */
  .psef-specs__value--downloads a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .psef-specs__value--downloads a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  @media (min-width: 768px) {
    .psef-specs__row {
      flex-direction: row;
      gap: 16px;
    }

    .psef-specs__label {
      flex-shrink: 0;
      width: 200px;
    }

    .psef-specs__value {
      flex: 1;
      min-width: 0;
    }
  }

  /* FAQ accordion - match psef-specs__row visuals (accordion + expandable content) */
  .psef-faq-accordion__items {
    padding: 0 24px 24px;
  }

  .psef-faq-accordion .table-element__accordion-item {
    border-top: none;
    border-bottom: 1px solid #000000;
  }

  .psef-faq-accordion .table-element__accordion-item:first-child {
    border-top: 1px solid #000000;
  }

  .psef-faq-accordion .table-element__accordion-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Base styles (table-element block not loaded on product page) */
  .psef-faq-accordion .table-element__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 16px 0;
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 120%;
  }

  .psef-faq-accordion .table-element__accordion-summary::-webkit-details-marker {
    display: none;
  }

  .psef-faq-accordion .table-element__accordion-summary::marker {
    display: none;
    content: '';
  }

  .psef-faq-accordion .table-element__accordion-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--Color-Base-Black, #000);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 19.2px */
  }

  .psef-faq-accordion .table-element__accordion-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  .psef-faq-accordion .table-element__accordion-item[open] .table-element__accordion-icon {
    transform: rotate(180deg);
  }

  .psef-faq-accordion .table-element__accordion-content {
    padding: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: Montserrat;
    line-height: 140%;
    color: var(--Color-Base-Black, #000);
  }

  .psef-faq-accordion .table-element__accordion-content p {
    margin: 0 0 8px;
  }

  .psef-faq-accordion .table-element__accordion-content p:last-child {
    margin-bottom: 0;
  }

  .psef-faq-accordion .table-element__accordion-content ul,
  .psef-faq-accordion .table-element__accordion-content ol {
    margin: 0;
    padding-left: 18px;
  }

  .psef-faq-accordion .table-element__accordion-content li {
    margin-bottom: 8px;
  }

  .psef-faq-accordion .table-element__accordion-content li:last-child {
    margin-bottom: 0;
  }

  .psef-faq-accordion .table-element__accordion-content a {
    color: inherit;
    text-decoration: underline;
  }

  .psef-faq-accordion .table-element__accordion-content a:hover {
    opacity: 0.7;
  }

  @media (max-width: 767px) {
    .psef-specs-accordion__summary,
    .psef-faq-accordion__summary {
      font-size: 20px;
      padding: 20px 16px 16px;
    }

    .psef-specs-accordion__items,
    .psef-faq-accordion__items {
      padding: 0 16px 16px;
    }

    .psef-faq-accordion .table-element__accordion-summary {
      padding: 16px 0;
    }

    .psef-faq-accordion .table-element__accordion-content {
      padding: 0 0 16px;
    }
  }
/* END_SECTION:product-specs-faq */

/* START_SECTION:scroll-video-sequence (INDEX:44) */
.scroll-video-sequence {
    background: var(--section-bg-color, #f7f7f7);
    color: var(--section-text-color, #000);
    font-family: var(--font-primary--family, sans-serif);
    padding-top: var(--section-padding-top, 40px);
    padding-bottom: var(--section-padding-bottom, 40px);
    overflow-x: clip;
    overflow-y: clip;
  }

  .scroll-video-sequence__scroll-stage {
    position: relative;
    height: calc(var(--scroll-section-height, 300vh) + 100vh);
  }

  .scroll-video-sequence__sticky-frame {
    display: block;
    position: sticky;
    top: var(--scroll-offset, 0px);
    height: calc(100vh - var(--scroll-offset, 0px));
  }

  /* Collapse the sticky stage when there are no playable steps */
  .scroll-video-sequence[data-has-playable='false'] .scroll-video-sequence__scroll-stage {
    height: auto;
  }

  .scroll-video-sequence[data-has-playable='false'] .scroll-video-sequence__sticky-frame {
    position: relative;
    top: auto;
    height: auto;
  }

  .scroll-video-sequence__inner {
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: clamp(24px, 4vw, 64px);
  }

  .scroll-video-sequence__layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 72px);
  }

  .scroll-video-sequence__nav-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .scroll-video-sequence__title {
    margin: 0;
    color: var(--section-text-color, #000);
  }

  .scroll-video-sequence__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .scroll-video-sequence__nav-btn {
    height: 48px;
    padding: 12px 24px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--section-text-color, #000);
    background: var(--color-white, #fff);
    color: var(--section-text-color, #000);
    font-family: var(--font-primary--family, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    transition:
      background-color var(--motion-duration-base, 300ms) var(--motion-ease-standard, ease),
      color var(--motion-duration-base, 300ms) var(--motion-ease-standard, ease),
      border-color var(--motion-duration-base, 300ms) var(--motion-ease-standard, ease);
    white-space: nowrap;
  }

  .scroll-video-sequence__nav-btn:hover {
    background: color-mix(in srgb, var(--step-active-color, var(--color-primary, #000)) 8%, var(--color-white, #fff));
  }

  .scroll-video-sequence__nav-btn:focus-visible {
    outline: 2px solid var(--step-active-color, var(--color-primary, #000));
    outline-offset: 2px;
  }

  .scroll-video-sequence__nav-btn.is-active {
    background: var(--step-active-color, var(--color-primary, #000));
    border-color: var(--step-active-color, var(--color-primary, #000));
    color: var(--color-white, #fff);
  }

  .scroll-video-sequence__media-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .scroll-video-sequence__viewport {
    position: relative;
    height: clamp(320px, 62vh, 690px);
    overflow: hidden;
  }

  .scroll-video-sequence__media-stack {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .scroll-video-sequence__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-duration-base, 300ms) var(--motion-ease-standard, ease);
  }

  .scroll-video-sequence__media-item.is-active {
    opacity: 1;
    visibility: visible;
  }

  .scroll-video-sequence__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
  }

  /* When a mobile video exists, show only the desktop version on ≥1024 px
     and only the mobile version on <1024 px.
     If no mobile video is set the desktop video has no modifier and shows everywhere. */
  .scroll-video-sequence__media-item[data-has-mobile-video="true"] .scroll-video-sequence__video--mobile {
    display: none;
  }

  @media (max-width: 1023px) {
    .scroll-video-sequence__media-item[data-has-mobile-video="true"] .scroll-video-sequence__video--desktop {
      display: none;
    }
    .scroll-video-sequence__media-item[data-has-mobile-video="true"] .scroll-video-sequence__video--mobile {
      display: block;
    }
  }

  .scroll-video-sequence__description-list {
    min-height: 42px;
  }

  .scroll-video-sequence__description {
    display: none;
    margin: 0;
    color: var(--section-text-color, #000);
    max-width: 72ch;
  }

  .scroll-video-sequence__description.is-active {
    display: block;
  }

  .scroll-video-sequence__description p {
    margin: 0;
  }

  .scroll-video-sequence__empty {
    min-height: min(100vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .scroll-video-sequence__empty p {
    margin: 0;
  }

  @media (max-width: 1023px) {
    /* Keep sticky pin + scroll-stage height — same scrub as desktop. */

    .scroll-video-sequence__inner {
      align-items: stretch;
      padding-top: 16px;
      padding-bottom: 16px;
    }

    .scroll-video-sequence__layout {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;   /* nav-column auto, media-column fills rest */
      gap: 12px;
      align-items: stretch;
      height: 100%;
    }

    .scroll-video-sequence__nav-column {
      gap: 12px;
      width: 100%;
      overflow: hidden;          /* prevent children from pushing the column wider */
    }

    .scroll-video-sequence__title {
      max-width: 12ch;
      margin-bottom: 0;
    }

    .scroll-video-sequence__nav {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow-x: auto;
      overflow-y: clip;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }

    .scroll-video-sequence__nav::-webkit-scrollbar {
      display: none;
    }

    .scroll-video-sequence__nav-btn {
      flex: 0 0 auto;
      height: 36px;
      padding: 8px 16px;
      font-size: 13px;
    }

    .scroll-video-sequence__media-column {
      gap: 12px;
      min-height: 0;
    }

    .scroll-video-sequence__viewport {
      height: 100%;
      min-height: 200px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-video-sequence__nav-btn,
    .scroll-video-sequence__media-item {
      transition: none;
    }
  }
/* END_SECTION:scroll-video-sequence */

/* START_SECTION:search (INDEX:45) */
.search-page {
    background-color: var(--section-bg-color);
    color: var(--section-text-color);
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
  }

  @media (max-width: 767px) {
    .search-page {
      padding-top: calc(var(--section-padding-top) * 0.67);
      padding-bottom: calc(var(--section-padding-bottom) * 0.67);
    }
  }

  .search-page__header {
    margin-bottom: 24px;
  }

  .search-page__title {
    margin: 0;
    color: var(--section-text-color);
  }

  /* Search Form */
  .search-page__form {
    margin-bottom: 32px;
  }

  .search-page__input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }

  @media (min-width: 640px) {
    .search-page__input-wrapper {
      flex-direction: row;
      max-width: 600px;
    }
  }

  .search-page__input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-grey-dark, #6b6b6b);
    pointer-events: none;
  }

  @media (min-width: 640px) {
    .search-page__input-icon {
      top: 24px; /* Half of 48px input height */
    }
  }

  .search-page__input {
    flex: 1;
    height: 48px;
    padding: 0 16px 0 48px;
    font-size: 16px;
    border: 1px solid var(--color-grey-medium, #e9e9eb);
    border-radius: var(--radius-md, 9px);
    background: var(--color-white, #fff);
    transition: border-color var(--motion-duration-fast, 200ms) ease, box-shadow var(--motion-duration-fast, 200ms) ease;
  }

  .search-page__input:focus {
    outline: none;
    border-color: var(--section-text-color);
    box-shadow: 0 0 0 1px var(--section-text-color);
  }

  .search-page__submit {
    flex-shrink: 0;
    height: 48px;
    padding: 0 24px;
  }

  /* Summary */
  .search-page__summary {
    margin-bottom: 24px;
  }

  .search-page__results-count {
    margin: 0;
    font-size: 14px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* No Results State */
  .search-page__no-results {
    text-align: center;
    padding: 40px 20px;
  }

  .search-page__no-results-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
  }

  .search-page__no-results-hint {
    margin: 0 0 32px;
    font-size: 14px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .search-page__suggestions {
    margin-top: 32px;
  }

  .search-page__suggestions-title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .search-page__suggestions-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .search-page__suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-grey-light, #f5f5f5);
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    transition: background-color var(--motion-duration-fast, 200ms) ease;
  }

  .search-page__suggestion-chip:hover {
    background: var(--color-grey-medium, #e9e9eb);
  }

  /* Toolbar: Filters + Sort */
  .search-page__toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  @media (min-width: 768px) {
    .search-page__toolbar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  /* Filter Tabs */
  .search-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .search-page__filters::-webkit-scrollbar {
    display: none;
  }

  .search-page__filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--section-text-color);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm, 6px);
    transition: background-color var(--motion-duration-fast, 200ms) ease, color var(--motion-duration-fast, 200ms) ease;
    flex-shrink: 0;
  }

  .search-page__filter:hover {
    opacity: 0.9;
  }

  .search-page__filter--active {
    background: var(--section-text-color);
    color: var(--section-bg-color);
  }

  .search-page__filter--active:hover {
    opacity: 1;
  }

  .search-page__filter-count {
    font-weight: 400;
    opacity: 0.7;
  }

  /* Sort Dropdown */
  .search-page__sort {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .search-page__sort-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .search-page__sort-select {
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    border: 1px solid var(--color-grey-medium, #e9e9eb);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-white, #fff) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 12px;
    appearance: none;
    cursor: pointer;
    min-width: 160px;
  }

  .search-page__sort-select:focus {
    outline: none;
    border-color: var(--section-text-color);
  }

  /* Results Grid */
  .search-page__results-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (min-width: 480px) {
    .search-page__results-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }

  @media (min-width: 768px) {
    .search-page__results-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  @media (min-width: 1024px) {
    .search-page__results-grid {
      grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
    }
  }

  .search-page__result {
    margin: 0;
  }

  /* Pagination */
  .search-page__pagination {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .search-page__pagination-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .search-page__pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--section-text-color);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm, 6px);
    transition: background-color var(--motion-duration-fast, 200ms) ease, color var(--motion-duration-fast, 200ms) ease;
  }

  .search-page__pagination-btn:hover {
    background: var(--section-text-color);
    color: var(--section-bg-color);
  }

  .search-page__pagination-info {
    font-size: 14px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* Fallback Result Link */
  .search-page__result-link {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    background: var(--color-grey-light, #f5f5f5);
    border-radius: 12px;
    transition: background-color var(--motion-duration-fast, 200ms) ease;
  }

  .search-page__result-link:hover {
    background: var(--color-grey-medium, #e9e9eb);
  }

  .search-page__result-title {
    font-weight: 500;
  }
/* END_SECTION:search */

/* START_SECTION:spc-universal-splitter (INDEX:47) */
.spc-splitter {
    background-color: var(--section-bg-color, #ffffff);
    color: var(--section-text-color, #000000);
    overflow-x: hidden;
  }

  .spc-splitter__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ── Section header ─────────────────────────────────── */

  .spc-splitter__section-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 48px 0 32px;
  }

  .spc-splitter__section-title,
  .spc-splitter__section-subtitle {
    margin: 0;
    color: var(--section-text-color, #000000);
  }

  /* ── Variant block ──────────────────────────────────── */

  .spc-splitter__block {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding: 48px 0;
  }



  /* ── Row 1: info (left) + hero (right) ──────────────── */

  .spc-splitter__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 0;
  }

  @media (max-width: 1023px) {
    .spc-splitter__top {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    /* On mobile show hero above text */
    .spc-splitter__hero {
      order: -1;
    }
     .spc-splitter__block {
        gap: 4rem;
    }
  }

  .spc-splitter__hero {
    overflow: hidden;
    border-radius: 6px;
    max-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spc-splitter__hero img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
  }

  /* ── Info column ────────────────────────────────────── */

  .spc-splitter__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 8px;
  }

  .spc-splitter__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
    color: var(--section-text-color, #000000);
  }

  .spc-splitter__product-title {
    margin: 0;
    color: var(--section-text-color, #000000);
  }

  .spc-splitter__highlights {
    color: var(--section-text-color, #000000);
    opacity: 0.75;
  }

  .spc-splitter__highlights {
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: disc;
  }

  .spc-splitter__highlights li {
    margin: 0;
    padding: 0;
  }

  .spc-splitter__btn {
    align-self: flex-start;
    margin-top: 8px;
  }

  /* ── Row 2: gallery full width ──────────────────────── */

  .spc-splitter__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .spc-splitter__gallery img{
    border-radius: 6px;
  }
  /* Auto-expand to 4 columns when 4 images are present */
  .spc-splitter__gallery:has(.spc-splitter__gallery-item:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 1023px) {
    .spc-splitter__gallery {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 8px;
      overscroll-behavior-x: contain;
      padding-right: 10%;
    }

    .spc-splitter__gallery::-webkit-scrollbar {
      display: none;
    }

    .spc-splitter__gallery-item {
      scroll-snap-align: start;
      flex: 0 0 90%;
    }
  }

  .spc-splitter__gallery-item {
    overflow: hidden;
    aspect-ratio: 3 / 4;
  }

  .spc-splitter__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Editor placeholder ─────────────────────────────── */

  .spc-splitter__placeholder {
    padding: 48px 24px;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
    margin: 32px 0;
  }
/* END_SECTION:spc-universal-splitter */

/* START_SECTION:sticky-menu (INDEX:48) */
.sticky-menu {
    width: 100%;
  }

  /* Placeholder to prevent content jump when menu becomes fixed */
  .sticky-menu-placeholder {
    display: none;
  }

  .sticky-menu.is-fixed .sticky-menu-placeholder {
    display: block;
  }

  .sticky-menu__content {
    background-color: var(--sticky-menu-bg, #fff);
    color: var(--sticky-menu-fg, #000);
  }

  .sticky-menu.is-fixed .sticky-menu__content {
    position: fixed;
    top: var(--sticky-menu-offset, 80px);
    left: 0;
    right: 0;
    z-index: 30;
  }

  .sticky-menu--border .sticky-menu__content {
    border-bottom: 1px solid var(--sticky-menu-link-border, var(--color-grey-medium, #e9e9eb));
  }

  .sticky-menu__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .sticky-menu__label {
    flex-shrink: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.02;
    text-transform: uppercase;
  }

  .sticky-menu__scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .sticky-menu__scroll::-webkit-scrollbar {
    display: none;
  }

  .sticky-menu__nav-wrap {
    flex-shrink: 0;
  }

  .sticky-menu__nav-wrap[hidden] {
    display: none;
  }

  .sticky-menu__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .sticky-menu__nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sticky-menu__nav-btn:hover:not(:disabled) {
    opacity: 0.7;
  }

  .sticky-menu__nav-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .sticky-menu__nav-btn svg {
    width: 24px;
    height: 24px;
  }

  .sticky-menu__empty {
    margin: 0;
    font-size: 14px;
    opacity: 0.6;
  }

  .sticky-menu__scroll .sticky-menu-link:last-child {
    margin-right: 16px;
  }

  /* Mobile: hide prev/next, rely on touch scroll */
  @media (max-width: 767px) {
    .sticky-menu__nav-wrap {
      display: none !important;
    }

    /* .sticky-menu__inner {
      padding-left: 16px;
      padding-right: 16px;
    } */
  }

  /* Tablet and up: show nav controls when needed */
  @media (min-width: 768px) {
    .sticky-menu__nav-wrap {
      display: flex;
    }
  }
/* END_SECTION:sticky-menu */

/* START_SECTION:team-athletes-brand-grid (INDEX:49) */
team-athletes-brand-grid-section {
    display: block;
    width: 100%;
  }

  .team-athletes-brand-grid {
    --grid-gap-x: 32px;
    --grid-row-gap: 32px;
    --grid-row-gap-mobile: 24px;
    --tile-base-width: 201px;
    --grid-max-columns: var(--grid-columns-desktop, 7);
    /* Calculated in JS based on available width + min gap */
    --grid-effective-columns: var(--grid-max-columns);
    /* Calculated in JS from max content width */
    --grid-min-tile-width: 0px;
    /* Calculated in JS for slider mode (fallback to base width) */
    --slider-gap: 32px;
    --slider-card-width: var(--tile-base-width);

    background-color: var(--section-bg-color);
    color: var(--section-text-color, #000000);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Only vertical padding here. Horizontal padding is applied on the inner
       `.content-container` to avoid double gutters (content-container already
       constrains width with responsive outer gutters). */
    padding: var(--section-padding-y-desktop, 112px) 0;
    box-sizing: border-box;
    overflow-x: clip;
  }

  .team-athletes-brand-grid__inner {
    /* `content-container` already applies responsive outer gutters by shrinking max-width.
       These paddings are *additional* section padding beyond that gutter. */
    --content-container-side-gutter: 20px;
    padding-left: max(0px, calc(var(--section-padding-x-desktop, 64px) - var(--content-container-side-gutter)));
    padding-right: max(0px, calc(var(--section-padding-x-desktop, 64px) - var(--content-container-side-gutter)));
    box-sizing: border-box;
  }

  @media (min-width: 1024px) {
    .team-athletes-brand-grid__inner {
      --content-container-side-gutter: 32px;
    }
  }

  @media (min-width: 1280px) {
    .team-athletes-brand-grid__inner {
      --content-container-side-gutter: 48px;
    }
  }

  @media (min-width: 1536px) {
    .team-athletes-brand-grid__inner {
      --content-container-side-gutter: 64px;
    }
  }

  @media (max-width: 1023px) {
    .team-athletes-brand-grid {
      padding: var(--section-padding-y-tablet, 80px) 0;
      /* Treat tablet like mobile for column settings to avoid tiny "unscrollable" cards */
      --grid-max-columns: var(--grid-columns-mobile, 2);
      --slider-gap: 24px;
    }

    .team-athletes-brand-grid__inner {
      /* Match other sections (e.g. How it works): on mobile/tablet rely solely on the
         `.content-container` gutter and don't add extra side padding. */
      padding-left: 0;
      padding-right: 0;
    }
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid {
      padding: var(--section-padding-y-mobile, 40px) 0;
      --grid-row-gap: var(--grid-row-gap-mobile);
    }

    .team-athletes-brand-grid__inner {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .team-athletes-brand-grid__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 58px;
    width: 100%;
    align-items: flex-start;
  }

  .team-athletes-brand-grid__header-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
  }

  @media (max-width: 1023px) {
    .team-athletes-brand-grid__header {
      flex-direction: column;
      align-items: stretch;
    }
  }

  .team-athletes-brand-grid__title {
    margin: 0;
    color: var(--section-text-color, #000000);
  }

  .team-athletes-brand-grid__subtitle {
    color: var(--section-text-color, #000000);
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid__title {
      font-size: var(--mobile-section-title-font-size, 36px);
      line-height: 1.2;
    }

    .team-athletes-brand-grid__subtitle {
      font-size: var(--mobile-text-font-size, 16px);
      line-height: 1.4;
    }
  }

  /* CTA button uses global .btn system */
  .team-athletes-brand-grid__cta-button {
    align-self: flex-start;
  }

  /* Slider navigation (mirrors how-it-works) */
  .team-athletes-brand-grid__controls {
    display: none;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
  }

  @media (max-width: 1023px) {
    .team-athletes-brand-grid__controls[data-show-mobile='true'] {
      display: flex;
      justify-content: flex-end;
    }
  }

  @media (min-width: 1024px) {
    .team-athletes-brand-grid__controls[data-show-desktop='true'] {
      display: flex;
    }
  }

  /* Nav button uses global .btn--nav - section-specific color override */
  .team-athletes-brand-grid__nav-button {
    color: var(--section-text-color, #000000);
    flex-shrink: 0;
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid__header {
      margin-bottom: 40px;
    }

    .team-athletes-brand-grid__title {
      font-size: clamp(28px, 6vw, 36px);
      line-height: 1.2;
    }
  }

  /* Container */
  .team-athletes-brand-grid__container {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .team-athletes-brand-grid--grid .team-athletes-brand-grid__container {
    display: grid;
    /* Tiles can shrink to reach the configured max columns at max content width */
    grid-template-columns: repeat(
      var(--grid-effective-columns),
      minmax(var(--grid-min-tile-width, 0px), 1fr)
    );
    justify-content: stretch;
    column-gap: var(--grid-gap-x);
    row-gap: var(--grid-row-gap);
    align-items: start;
    width: 100%;
  }

  @media (max-width: 1023px) {
    .team-athletes-brand-grid--grid .team-athletes-brand-grid__container {
      /* Mobile: always 2 columns, fixed design gap */
      grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
      justify-content: stretch;
      column-gap: var(--grid-gap-x);
      width: 100%;
    }
  }

  .team-athletes-brand-grid--slider .team-athletes-brand-grid__container {
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 4px;
  }

  .team-athletes-brand-grid--slider .team-athletes-brand-grid__container::-webkit-scrollbar {
    display: none;
  }

  .team-athletes-brand-grid--slider .team-athletes-brand-grid__card {
    flex: 0 0 var(--slider-card-width);
    scroll-snap-align: start;
    width: var(--slider-card-width);
    min-width: var(--slider-card-width);
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid--slider .team-athletes-brand-grid__container {
      gap: var(--slider-gap);
    }
  }

  .team-athletes-brand-grid__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .team-athletes-brand-grid__card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .team-athletes-brand-grid__card-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #f7f7f7;
  }

  .team-athletes-brand-grid__card-image--square {
    aspect-ratio: 201 / 215;
  }

  .team-athletes-brand-grid__card-image--circular {
    aspect-ratio: 201 / 215;
    border-radius: 50%;
    overflow: hidden;
  }

  .team-athletes-brand-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .team-athletes-brand-grid__card-image--circular .team-athletes-brand-grid__img {
    border-radius: 50%;
  }

  .team-athletes-brand-grid__card-image > svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid__card-image {
      width: 100%;
    }
  }

  .team-athletes-brand-grid__card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    width: 100%;
    /* min-height: calc(60px + 14px + (var(--item-subtext-font-size, 1rem) * 1.4)); */
  }

  .team-athletes-brand-grid__card-headline {
    margin: 0;
    color: var(--section-text-color, #000000);
    /* min-height: 60px; */
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
    font-size: var(--item-headline-font-size, 1.375rem);
    line-height: 1.15;
  }

  .team-athletes-brand-grid__card-subtext {
    color: var(--section-text-color, #000000);
    margin: 0;
    font-size: var(--item-subtext-font-size, 1rem);
    line-height: 1.4;
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid__card-headline {
      font-size: var(--item-headline-font-size-mobile, var(--item-headline-font-size, 1.375rem));
    }

    .team-athletes-brand-grid__card-subtext {
      font-size: var(--item-subtext-font-size-mobile, var(--item-subtext-font-size, 1rem));
    }
  }

  .team-athletes-brand-grid--card-style-logo_only .team-athletes-brand-grid__card-content {
    display: none;
  }

  @media (max-width: 767px) {
    .team-athletes-brand-grid__card-content {
      margin-top: 16px;
      gap: 14px;
    }
  }
/* END_SECTION:team-athletes-brand-grid */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:51) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:header-nav-activities (INDEX:52) */
.header-nav-activities {
    display: grid;
    gap: var(--header-nav-activities-gap, 16px);
    width: 100%;
  }

  .header-nav-activities__title {
    margin: 0 0 24px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  @media (min-width: 1440px) {
    /* Variant A: one-row tall tiles (Figma: 280×410, justify-between) */
    .header-nav-activities--desktop-variant_a {
      grid-auto-flow: column;
      grid-auto-columns: 280px;
      justify-content: space-between;
      align-items: stretch;
    }

    .header-nav-activities--desktop-variant_a .header-nav-activity-item__media {
      height: 410px;
      aspect-ratio: auto;
    }

    /* Variant B (Figma open-activites-2): 3 tiles on top row, 2 tiles on bottom row */
    .header-nav-activities--desktop-variant_b {
      grid-template-columns: repeat(3, 280px);
      justify-content: start;
    }

    /* Desktop tag sizing (Figma: h-33px, left-21px, radius 3.78px) */
    .header-nav-activity-item__tag {
      left: 21px;
      height: 33px;
      padding: 0 7.17px 4.3px 7.17px;
      border-radius: 0 0 3.78px 3.78px;
    }

    .header-nav-activity-item__tag-text {
      font-size: 11.48px;
      font-weight: 500;
    }
  }

  @media (max-width: 1439px) {
    /* Variant A (mobile/tablet drawer): one-row scroll of tall tiles */
    .header-nav-activities--mobile-variant_a {
      grid-auto-flow: column;
      grid-auto-columns: minmax(160px, 70vw);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

    .header-nav-activities--mobile-variant_a::-webkit-scrollbar {
      display: none;
    }

    .header-nav-activities--mobile-variant_a > .header-nav-activity-item {
      scroll-snap-align: start;
    }

    /* Variant B (mobile): mosaic 2-col */
    .header-nav-activities--mobile-variant_b {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* Figma: column gap 10px, row gap 8px */
      column-gap: 10px;
      row-gap: 8px;
      /* Ensure left column back-fills next to tall tile */
      grid-auto-flow: dense;
    }

    /* Mobile masonry pattern (Figma 2933:25358) */
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--wide,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 1),
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 5) {
      grid-column: 1 / -1;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--stack-left,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 3),
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 4) {
      grid-column: 1;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--tall-right,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 2) {
      grid-column: 2;
      grid-row: span 2;
    }

    /* Force the exact masonry aspect ratios (ignore global aspect setting on mobile variant_b) */
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--wide .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 1) .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 5) .header-nav-activity-item__media {
      aspect-ratio: 343 / 144;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--stack-left .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 3) .header-nav-activity-item__media {
      aspect-ratio: 111 / 96;
    }
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 4) .header-nav-activity-item__media {
      aspect-ratio: 111 / 96;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--tall-right .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 2) .header-nav-activity-item__media {
      /* 2-up stack height: 144 + 8 + 144 = 296 */
      aspect-ratio: 333 / 592;
    }
  }

  /* Tablet drawer: taller hero images (186px vs 144px on mobile) */
  @media (min-width: 48rem) and (max-width: 89.9375rem) {
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--wide .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 1) .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 5) .header-nav-activity-item__media {
      aspect-ratio: 500 / 186;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--stack-left .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 3) .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 4) .header-nav-activity-item__media {
      aspect-ratio: 250 / 189;
    }

    .header-nav-activities--mobile-variant_b > .header-nav-activity-item--tall-right .header-nav-activity-item__media,
    .header-nav-activities--mobile-variant_b > .header-nav-activity-item:nth-child(5n + 2) .header-nav-activity-item__media {
      /* 2-up stack height: 189 + 8 + 189 = 386 */
      aspect-ratio: 250 / 386;
    }
  }

  /* Activity item styles (merged from header-nav-activity-item) */
  .header-nav-activity-item {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--header-nav-activities-radius, 5px);
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .header-nav-activity-item--placeholder {
    pointer-events: none;
    opacity: 0.6;
  }

  .header-nav-activity-item__media {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: var(--header-nav-activities-aspect, 280/410);
  }

  .header-nav-activity-item__img {
    width: 100%;
    height: 100%;
    object-fit: var(--header-nav-activity-item-fit, cover);
    object-position: center;
    display: block;
  }

  .header-nav-activity-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-light, #f7f7f7);
  }

  .header-nav-activity-item__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  .header-nav-activity-item__tag {
    position: absolute;
    top: 0;
    left: 16px;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    padding: 0 10px 8px 10px;
    border-radius: 0 0 5px 5px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .header-nav-activity-item__tag-spacer {
    display: block;
    height: 18px;
    width: 100%;
    flex-shrink: 0;
  }

  .header-nav-activity-item__tag-text {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  @media (max-width: 1439px) {
    .header-nav-activity-item__tag {
      left: 12px;
      padding: 0 6px 5px 6px;
    }

    .header-nav-activity-item__tag-spacer {
      height: 10px;
    }

    .header-nav-activity-item__tag-text {
      font-size: 11.5px;
      font-weight: 500;
    }
  }

  @media (max-width: 480px) {
    .header-nav-activity-item__tag {
      left: 8px;
      padding: 0 6px 4px 6px;
    }

    .header-nav-activity-item__tag-spacer {
      height: 8px;
    }

    .header-nav-activity-item__tag-text {
      font-size: 11.5px;
    }
  }
/* END_BLOCK:header-nav-activities */

/* START_BLOCK:header-nav-bottom-link (INDEX:54) */
.header-nav-bottom-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    background: transparent;
    border: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .header-nav-bottom-link[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }

  .header-nav-bottom-link--divider {
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .header-nav-bottom-link__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-nav-bottom-link__icon {
    display: inline-flex;
    flex: 0 0 auto;
  }

  @media (min-width: 1280px) {
    /* Generally used inside mobile drawer; keep it available but hide by default on desktop. */
    .header-nav-bottom-link {
      display: none;
    }
  }
/* END_BLOCK:header-nav-bottom-link */

/* START_BLOCK:header-nav-collection-dropdown (INDEX:55) */
/* Reuse header-nav-section and header-nav-activities styles; they are loaded from those blocks. */
  .header-nav-collection-dropdown .header-nav-activities {
    display: grid;
    gap: var(--header-nav-activities-gap, 16px);
    width: 100%;
  }

  .header-nav-collection-dropdown .header-nav-section__layout--multi_column {
    height: auto;
  }

  @media (min-width: 1440px) {
    .header-nav-collection-dropdown .header-nav-activities--desktop-variant_a {
      grid-auto-flow: column;
      grid-auto-columns: 280px;
      align-items: stretch;
    }

    .header-nav-collection-dropdown .header-nav-activities--desktop-variant_b {
      grid-template-columns: repeat(3, 280px);
      justify-content: start;
    }
  }

  @media (max-width: 1439px) {
    .header-nav-collection-dropdown .header-nav-activities--mobile-variant_a {
      grid-auto-flow: column;
      grid-auto-columns: minmax(160px, 70vw);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

    .header-nav-collection-dropdown .header-nav-activities--mobile-variant_a > .header-nav-activity-item {
      scroll-snap-align: start;
    }

    .header-nav-collection-dropdown .header-nav-activities--mobile-variant_b {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .header-nav-collection-dropdown .header-nav-activity-item {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--header-nav-activities-radius, 8px);
    overflow: hidden;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .header-nav-collection-dropdown .header-nav-activity-item--placeholder {
    pointer-events: none;
    opacity: 0.6;
  }

  .header-nav-collection-dropdown .header-nav-activity-item__media {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: var(--header-nav-activities-aspect, 3/4);
  }

  .header-nav-collection-dropdown .header-nav-activity-item__img {
    width: 100%;
    height: 100%;
    object-fit: var(--header-nav-activity-item-fit, cover);
    object-position: center;
    display: block;
  }

  .header-nav-collection-dropdown .header-nav-activity-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-light, #f7f7f7);
  }

  .header-nav-collection-dropdown .header-nav-activity-item__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  .header-nav-collection-dropdown .header-nav-activity-item__tag {
    position: absolute;
    top: 0;
    left: 16px;
    display: flex;
    align-items: flex-end;
    padding: 16px 8px 6px 8px;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    background: var(--color-black, #000);
    color: #fff;
    z-index: 1;
  }

  .header-nav-collection-dropdown .header-nav-activity-item__tag-spacer {
    display: none;
  }

  .header-nav-collection-dropdown .header-nav-activity-item__tag-text {
    display: block;
    color: inherit;
    font-family: var(--font-heading-family, 'Montserrat', sans-serif);
    font-size: 11.478px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
  }
/* END_BLOCK:header-nav-collection-dropdown */

/* START_BLOCK:header-nav-discover-dropdown (INDEX:56) */
/* ═══════════════════════════════════════════════
     DESKTOP FLYOUT LAYOUT
     ═══════════════════════════════════════════════ */

  /* Hide flyout below desktop */
  @media (max-width: 1439px) {
    .header-nav-discover-dropdown .header-nav-section__flyout {
      display: none;
    }
  }

  .header-nav-discover__layout {
    display: flex;
    gap: 24px;
    height: 469px;
    align-items: flex-start;
  }

  .header-nav-discover__menus {
    flex: 0 0 auto;
    width: 214px;
    padding-right: 78px;
    border-right: 1px solid var(--color-grey-medium, #e9e9eb);
    display: flex;
    flex-direction: column;
    gap: 26px;
    height: 100%;
    white-space: nowrap;
  }

  .header-nav-discover__menu-group {
    display: flex;
    flex-direction: column;
  }

  .header-nav-discover__menu-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  .header-nav-discover__menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .header-nav-discover__link {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
  }

  .header-nav-discover__link:hover {
    text-decoration: underline;
  }

  .header-nav-discover__image {
    flex: 1 1 0;
    min-width: 0;
    height: 469px;
    overflow: hidden;
    position: relative;
  }

  .header-nav-discover__img-layer {
    position: absolute;
    inset: 0;
  }

  .header-nav-discover__img-layer[hidden] {
    display: block;
    visibility: hidden;
  }

  .header-nav-discover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ═══════════════════════════════════════════════
     MOBILE PANEL STYLES
     ═══════════════════════════════════════════════ */

  /* Container: panel body with Figma padding + gap.
     Uses :has() to beat header.liquid's .header-nav-mobile__panel-body { gap: 0 }.
     The panel is cloned outside the block wrapper so we can't use ancestor selectors. */
  .header-nav-mobile__panel-body:has(.header-nav-discover-mobile__group) {
    display: flex;
    padding: 0;
    flex-direction: column;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
  }

  .header-nav-discover-mobile__group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .header-nav-discover-mobile__group-title {
    margin: 0;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
  }

  /* Regular link item (no sub-content) */
  .header-nav-discover-mobile__item {
    display: flex;
    padding: 16px 0;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    border-bottom: 1px solid #dadada;
  }

  /* Blog item wrapper (contains row + cards) — no padding, border on wrapper */
  .header-nav-discover-mobile__item--blog {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 1px solid #dadada;
  }

  /* Blog item header row */
  .header-nav-discover-mobile__item-row {
    display: flex;
    padding: 16px 0;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
  }

  .header-nav-discover-mobile__item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-nav-discover-mobile__blog-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
  }

  .header-nav-discover-mobile__show-all {
    white-space: nowrap;
  }

  /* "show all" always visible — it links to the full blog */

  /* Article cards row */
  .header-nav-discover-mobile__blog-cards {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header-nav-discover-mobile__blog-cards::-webkit-scrollbar {
    display: none;
  }

  .header-nav-discover-mobile__article-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }

  .header-nav-discover-mobile__article-img {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    overflow: hidden;
    background: #d9d9d9;
  }

  .header-nav-discover-mobile__article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .header-nav-discover-mobile__article-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }

  .header-nav-discover-mobile__article-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }
/* END_BLOCK:header-nav-discover-dropdown */

/* START_BLOCK:header-nav-image-menu-item (INDEX:57) */
/* All units in REM (base 16px). */

  .header-nav-image-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 0.75rem 1.5rem;
    flex: 1 0 0;
    min-width: 0;
    border-radius: 0.25rem;
    /* Background color includes padding area */
    background: var(--header-nav-image-menu-bg-mobile, var(--Color-Base-Grey-Light, var(--color-grey-light, #f7f7f7)));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-sizing: border-box;
  }

  .header-nav-image-menu-item[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }

  /* Mobile: single product = column, image above text */
  .header-nav-image-menu-item__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Mobile design: square tiles */
    aspect-ratio: 1 / 1;
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.25rem;
    /* Background is on container, not media */
    background: transparent;
  }

  .header-nav-image-menu-item__img {
    width: 100%;
    height: 100%;
    /* Per-item override wins; otherwise use grid-level setting */
    object-fit: var(--header-nav-image-menu-item-fit, var(--header-nav-image-menu-img-fit, cover));
    object-position: center;
    display: block;
  }

  .header-nav-image-menu-item__placeholder {
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--color-grey-light, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-nav-image-menu-item__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  .header-nav-image-menu-item__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }

  .header-nav-image-menu-item__badge {
    position: absolute;
    left: 4.5px;
    top: 4px;
    display: flex;
    padding: 6px 6px 4px 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 2px;
    background: var(--Color-Base-Red, #ce4646);
    color: var(--color-white, #fff);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
  }

  .header-nav-image-menu-item__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Desktop (90rem+): element = row, image left, text right. Width 178px (11.125rem), padding 16px 24px, gap 16px */
  @media (min-width: 90rem) {
    .header-nav-image-menu-item {
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem 1.5rem;
      width: 11.125rem;
      flex: none;
      align-self: stretch;
      border-radius: 0.25rem;
      /* Background color includes padding area */
      background: var(--header-nav-image-menu-bg-desktop, var(--header-nav-image-menu-bg-mobile, var(--Color-Base-Grey-Light, var(--color-grey-light, #f7f7f7))));
    }

    .header-nav-image-menu-item__media {
      width: 2.625rem;
      min-width: 2.625rem;
      height: 5.3125rem;
      max-height: none;
      aspect-ratio: auto;
      flex: 0 0 auto;
      /* Background is on container, not media */
      background: transparent;
    }

    .header-nav-image-menu-item__content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-block: 0.5rem;
      flex: 1 1 auto;
      min-width: 0;
    }

    .header-nav-image-menu-item__title {
      min-width: 0;
      text-align: left;
      /* Allow wrapping for long names */
    }
  }
/* END_BLOCK:header-nav-image-menu-item */

/* START_BLOCK:header-nav-image-menu (INDEX:58) */
/* All units in REM (base 16px). */

  .header-nav-image-menu__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Mobile: container full width, centered; product group rows with 2 cols */
  .header-nav-image-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Default: match Figma token (Color/Base/Grey Light) */
    --header-nav-image-menu-default-bg: var(--Color-Base-Grey-Light, var(--color-grey-light, #f7f7f7));
    --header-nav-image-menu-item-bg: var(--header-nav-image-menu-default-bg);
  }

  /* Hide title on mobile by default — panel header already shows it.
     Merchants can opt back in via the "Show title on mobile" setting. */
  @media (max-width: 89.9375rem) {
    .header-nav-image-menu:not(.header-nav-image-menu--show-title-mobile) .header-nav-image-menu__title {
      display: none;
    }
  }

  @media (max-width: 89.9375rem) {
    .header-nav-image-menu {
      /* Paint behind card content (not gaps/padding) on mobile */
      --header-nav-image-menu-item-bg: var(--header-nav-image-menu-bg-mobile, var(--header-nav-image-menu-default-bg));
    }
  }

  @media (min-width: 90rem) {
    .header-nav-image-menu {
      --header-nav-image-menu-item-bg: var(--header-nav-image-menu-bg-desktop, var(--header-nav-image-menu-default-bg));
    }
  }

  .header-nav-image-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--header-nav-image-menu-cols-mobile, 2), 1fr);
    column-gap: 12px;
    row-gap: 12px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
  }

  /* Desktop (768px+): container = flex column, gap 24px (1.5rem). Grid = 2 columns so items don’t stack in one column. */
  @media (min-width: 90rem) {
    .header-nav-image-menu {
      align-items: flex-start;
      gap: 1.5rem;
      width: auto;
    }

    .header-nav-image-menu__grid {
      display: grid;
      grid-template-columns: repeat(var(--header-nav-image-menu-cols-desktop, 2), var(--header-nav-image-menu-card-width, 178px));
      column-gap: 8px;
      row-gap: 8px;
    }
  }

  /* Card styles (scoped overrides when rendered inside grid) */
  .header-nav-image-menu__grid .header-nav-image-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 0.75rem 1.5rem;
    flex: 1 0 0;
    min-width: 0;
    border-radius: 0.25rem;
    /* Background includes padding area */
    background: var(--header-nav-image-menu-item-bg, transparent);
    background-clip: border-box;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-sizing: border-box;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.25rem;
    background: transparent;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  @media (min-width: 90rem) {
    .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__img {
      /* Per-item override (manual blocks) wins; otherwise use grid-level setting */
      object-fit: var(--header-nav-image-menu-item-fit, var(--header-nav-image-menu-img-fit, cover));
    }
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__placeholder {
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--color-grey-light, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__badge {
    position: absolute;
    left: 4.5px;
    top: 4px;
    display: flex;
    padding: 6px 6px 4px 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 2px;
    background: var(--Color-Base-Red, #CE4646);
    color: var(--color-white, #fff);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
  }

  .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Desktop card base (shared by compact + wide) ── */
  @media (min-width: 90rem) {
    .header-nav-image-menu__grid .header-nav-image-menu-item {
      flex-direction: row;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      align-self: stretch;
      border-radius: 4px;
      background: var(--header-nav-image-menu-item-bg, transparent);
    }

    .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__media {
      height: 85px;
      max-height: none;
      aspect-ratio: auto;
      flex: 0 0 auto;
      background: transparent;
    }

    .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-block: 8px;
    }

    .header-nav-image-menu__grid .header-nav-image-menu-item .header-nav-image-menu-item__title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
      min-width: 0;
    }

    /* ── Compact variant (default: SHOP-style, 178px cards) ── */
    .header-nav-image-menu__grid--compact .header-nav-image-menu-item {
      gap: 16px;
      padding: 16px 16px 16px 24px;
      overflow: visible;
    }

    .header-nav-image-menu__grid--compact .header-nav-image-menu-item .header-nav-image-menu-item__media {
      width: 42px;
      min-width: 42px;
    }

    .header-nav-image-menu__grid--compact .header-nav-image-menu-item .header-nav-image-menu-item__content {
      flex: 1 1 auto;
      min-width: 0;
    }

    .header-nav-image-menu__grid--compact .header-nav-image-menu-item .header-nav-image-menu-item__title {
      text-align: left;
    }

    /* ── Wide variant (HALTERUNGEN-style, 200px cards) ── */
    .header-nav-image-menu__grid--wide .header-nav-image-menu-item {
      gap: 2px;
      padding: 16px 24px 16px 5px;
      overflow: visible;
    }

    .header-nav-image-menu__grid--wide .header-nav-image-menu-item .header-nav-image-menu-item__media {
      width: 72px;
      min-width: 72px;
    }

    .header-nav-image-menu__grid--wide .header-nav-image-menu-item .header-nav-image-menu-item__content {
      flex: 1 1 auto;
      min-width: 0;
    }

    .header-nav-image-menu__grid--wide .header-nav-image-menu-item .header-nav-image-menu-item__title {
      text-align: left;
      word-break: normal;
      overflow-wrap: normal;
    }
  }
/* END_BLOCK:header-nav-image-menu */

/* START_BLOCK:header-nav-info-box (INDEX:59) */
.header-nav-info-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 0;
    border-radius: var(--header-nav-info-box-radius, 8px);
    background: var(--header-nav-info-box-bg, transparent);
    color: var(--header-nav-info-box-color, inherit);
    text-decoration: none;
  }

  .header-nav-info-box:hover {
    opacity: 0.9;
  }

  .header-nav-info-box--align-center {
    align-items: center;
    text-align: center;
  }

  .header-nav-info-box__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 5px 6px;
    border-radius: 2px;
    background: var(--header-nav-info-box-badge-bg, var(--color-red, #ce4646));
    color: var(--header-nav-info-box-badge-color, var(--color-white, #fff));
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
  }

  .header-nav-info-box__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  .header-nav-info-box__body {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
  }

  .header-nav-info-box__body > *:first-child {
    margin-top: 0;
  }

  .header-nav-info-box__body > *:last-child {
    margin-bottom: 0;
  }

  .header-nav-info-box__cta {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
  }

  .header-nav-info-box__cta-icon {
    display: inline-flex;
  }
/* END_BLOCK:header-nav-info-box */

/* START_BLOCK:header-nav-menu-list (INDEX:60) */
.header-nav-menu-list {
    width: 100%;
  }

  .header-nav-menu-list--desktop-hidden {
    display: block;
  }

  .header-nav-menu-list__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }

  .header-nav-menu-list__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
  }

  .header-nav-menu-list__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .header-nav-menu-list__link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
  }

  .header-nav-menu-list__link:hover {
    opacity: 0.85;
  }

  .header-nav-menu-list__show-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
  }

  .header-nav-menu-list__show-all:hover {
    opacity: 0.85;
  }

  /* Mobile drawer: match discover dropdown link style */
  @media (max-width: 1439px) {
    .header-nav-menu-list__links {
      gap: 0;
    }

    .header-nav-menu-list__link-item {
      border-bottom: 1px solid #dadada;
    }

    .header-nav-menu-list--no-last-divider .header-nav-menu-list__link-item:last-child {
      border-bottom: none;
    }

    .header-nav-menu-list__link {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 16px 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
    }

    .header-nav-menu-list__header {
      margin-bottom: 0;
    }

    .header-nav-menu-list__title {
      padding: 16px 0;
      text-transform: uppercase;
    }
  }

  @media (min-width: 1280px) {
    .header-nav-menu-list--desktop-hidden {
      display: none;
    }
  }
/* END_BLOCK:header-nav-menu-list */

/* START_BLOCK:header-nav-section (INDEX:61) */
.header-nav-section {
    position: relative;
    width: 100%;
  }

  .header-nav-section__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-nav-section__trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.15s ease;
  }

  .header-nav-section__trigger:hover::after,
  .header-nav-section__trigger[aria-expanded='true']::after {
    transform: scaleX(1);
  }

  .header-nav-section__trigger--highlight::after {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav-section__trigger::after {
      transition: none;
    }
  }

  .header-nav-section__trigger--highlight .header-nav-section__label {
    background: var(--header-nav-section-highlight-bg, var(--color-red, #ce4646));
    color: var(--color-white, #fff);
    padding: 4px 8px;
    border-radius: 2px;
  }

  .header-nav-mobile__row--highlight .header-nav-mobile__row-label {
    background: var(--header-nav-section-highlight-bg, var(--color-red, #ce4646));
    color: var(--color-white, #fff);
    padding: 4px 8px;
    border-radius: 2px;
  }

  .header-nav-section__flyout {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-flyout-top, 0px);
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    z-index: 45;
  }

  /* Animation: outer max-height, inner fade-down (open and close) */
  .header-nav--animate .header-nav-section__flyout {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease, visibility 0s linear 0.45s;
    visibility: hidden;
  }

  .header-nav--animate .header-nav-section__flyout-inner {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.35s ease 0.08s, transform 0.4s ease 0.08s;
  }

  .header-nav--animate .header-nav-section__flyout[data-open] {
    max-height: calc(100vh - var(--header-flyout-top, 0px));
    opacity: 1;
    visibility: visible;
    transition: max-height 0.45s ease, opacity 0.35s ease, visibility 0s linear 0s;
  }

  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__flyout-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease 0.15s, transform 0.4s ease 0.15s;
  }

  /* When switching between flyouts, skip the outer max-height animation.
     The container stays fully open; only the inner content crossfades. */
  .header-nav--animate .header-nav-section__flyout[data-switch] {
    transition: none;
  }

  .header-nav--animate .header-nav-section__flyout[data-switch] .header-nav-section__flyout-inner {
    transform: translateY(0);
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav--animate .header-nav-section__flyout,
    .header-nav--animate .header-nav-section__flyout-inner {
      transition: none;
      transform: none;
    }
  }

  /* Staggered fade-in for flyout content columns */
  @keyframes headerNavFadeInFromTop {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block {
    opacity: 0;
    animation: headerNavFadeInFromTop 500ms ease forwards;
  }

  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(1) { animation-delay: 0.15s; }
  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(2) { animation-delay: 0.21s; }
  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(3) { animation-delay: 0.27s; }
  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(4) { animation-delay: 0.33s; }
  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(5) { animation-delay: 0.39s; }
  .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block:nth-child(6) { animation-delay: 0.45s; }

  .header-nav--animate .header-nav-section__flyout:not([data-open]) .header-nav-section__layout > .shopify-block {
    opacity: 1;
    animation: none;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block {
      animation: none;
      opacity: 1;
    }
  }

  @media (max-width: 1439px) {
    .header-nav--animate .header-nav-section__flyout[data-open] .header-nav-section__layout > .shopify-block {
      animation: none;
      opacity: 1;
    }
  }

  .header-nav-section__flyout-inner {
    width: 100%;
    max-width: min(100%, 1400px);
    margin-inline: auto;
    box-sizing: border-box;
    padding: 40px 0;
  }

  /* Full-width tile: use default content width (no extra constraint) */

  .header-nav-section__flyout-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    width: fit-content;
    min-width: 404px;
  }

  /* Tablet flyout scroll controls removed — tablet now uses mobile drawer */
  .header-nav-section__flyout-controls {
    display: none;
  }

  .header-nav-section__flyout-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    flex: 1 0 0;
    min-width: 0;
  }

  .header-nav-section__flyout-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
  }

  .header-nav-section__flyout-cta:hover {
    opacity: 0.85;
  }

  /* Layout wrapper for the detailed components */
  .header-nav-section__layout {
    width: 100%;
  }

  .header-nav-section__layout--multi_column {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* Ensure divider lines span the height of the tallest column (Figma). */
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    /* Figma: 24px gap between columns */
    gap: var(--header-nav-section-gap, 24px);
    padding-inline: 0;
  }

  /* Flyout content: do not force column so layout children stay side-by-side */
  .header-nav-section__flyout-content {
    display: block;
    width: 100%;
    min-width: 0;
    /* Ensure content aligns to the left within the constrained width */
    text-align: left;
  }

  /* Mobile/Tablet: stack vertically (up to 1439px – flyout hidden, drawer used instead) */
  @media (max-width: 1439px) {
    .header-nav-section__flyout {
      display: none;
    }

    .header-nav-section__layout--multi_column {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding-inline: 0;
    }

    /* Non-tile blocks span full width (via .shopify-block wrapper OR direct child) */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-image-menu),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-menu-list),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-info-box),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-activities),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-discover-dropdown),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-collection-dropdown),
    /* Direct children without .shopify-block wrapper (e.g. collection-dropdown inline content) */
    .header-nav-section__layout--multi_column > .header-nav-activities,
    .header-nav-section__layout--multi_column > .header-nav-image-menu,
    .header-nav-section__layout--multi_column > .header-nav-menu-list,
    .header-nav-section__layout--multi_column > .header-nav-info-box,
    /* Accordion wrappers (created by JS transform) also span full width */
    .header-nav-section__layout--multi_column > .header-nav-mobile__accordion {
      grid-column: span 2;
    }

    /* Tile blocks: 1 column each (side by side), subgrid aligns titles across columns */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile) {
      grid-column: span 1;
      grid-row: span 2;
      display: grid;
      grid-template-rows: subgrid;
    }

    /* Solo tile (no adjacent tile sibling) → stretch to full width.
       Note: nth-child counts ALL siblings, not just tiles. The :has() rule below
       overrides this when tiles are paired with non-tile blocks before them. */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile):last-child:nth-child(odd) {
      grid-column: span 2;
    }

    /* Paired tiles (immediately adjacent in DOM) → both span 1, side by side.
       Wins over :last-child:nth-child(odd) when a non-tile block precedes the pair
       and offsets the count (e.g. Image Grid + 2 tiles).
       Note: :has() cannot be nested inside :has(), so the "first of pair" check
       uses a descendant combinator (`+ .shopify-block .header-nav-tile`) instead
       of `+ .shopify-block:has(.header-nav-tile)`. */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile):has(+ .shopify-block .header-nav-tile),
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile) + .shopify-block:has(.header-nav-tile) {
      grid-column: span 1;
    }

    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block {
      padding-right: 0;
      border-right: none;
    }
  }

  /* Desktop (1440px+): keep flyout columns side-by-side (Image Grid + tiles + menu list, etc.) */
  @media (min-width: 1440px) {
    .header-nav-section__layout--multi_column {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    /* Explicit: layout inside flyout stays row so Image Grid block is not forced single column */
    .header-nav-section__flyout .header-nav-section__flyout-content .header-nav-section__layout--multi_column,
    .header-nav-section__flyout .header-nav-section__flyout-scroll .header-nav-section__layout--multi_column {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      display: flex;
    }
  }

  /* Tablet column sizing removed — tablet now uses mobile drawer */

  /* Desktop: 1440px+ – column widths aligned with Figma (1728px reference) */
  @media (min-width: 1440px) {
    .header-nav-section__layout--multi_column {
      gap: 24px;
      align-items: stretch;
    }

    /* Image menu: auto-sized to content, clamped between min/max */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-image-menu) {
      flex: 0 0 auto;
      min-width: 380px;
      max-width: 480px;
    }

    /* Text columns: auto-size to content width (no shrink to prevent heading wrapping) */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-menu-list) {
      flex: 0 0 auto;
      width: auto;
      min-width: 10%;
    }

    /* Info box */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-info-box) {
      flex: 0 0 auto;
      width: 296px;
    }

    /* Feature tile: starts at Figma 320px but shrinks if there's not enough room.
       Aspect ratio keeps tiles from getting too tall on narrow screens. */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile) {
      flex: 0 1 320px;
      min-width: 0;
      aspect-ratio: 320 / 410;
      height: auto;
      overflow: hidden;
    }

    /* Dividers + column padding */
    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block {
      padding-right: 40px;
      border-right: 1px solid var(--color-grey-medium, #e9e9eb);
    }

    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block:last-child {
      padding-right: 0;
      border-right: none;
    }

    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block:has(.header-nav-info-box) {
      padding-right: 0;
      border-right: none;
    }
  }
/* END_BLOCK:header-nav-section */

/* START_BLOCK:header-nav-story-dropdown (INDEX:62) */
.header-nav-story-scroll {
    width: 100%;
  }

  /* Ensure the story scroll column can shrink inside the mega-menu flex layout. */
  .header-nav-story-dropdown .header-nav-story-scroll {
    min-width: 0;
    flex: 1 1 0;
  }

  .header-nav-story-scroll__viewport {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  .header-nav-story-scroll__nav-wrap {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  .header-nav-story-scroll__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: currentColor;
    pointer-events: auto;
  }

  .header-nav-story-scroll__nav:hover:not(:disabled) {
    opacity: 0.7;
    background: transparent;
  }

  .header-nav-story-scroll__nav--prev {
    left: 0;
  }

  .header-nav-story-scroll__nav--next {
    right: 0;
  }

  .header-nav-story-scroll__scroller {
    display: flex;
    gap: var(--header-nav-story-scroll-gap, 12px);
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .header-nav-story-scroll__scroller::-webkit-scrollbar {
    display: none;
  }

  .header-nav-story-scroll__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(220px, 70vw);
  }

  .header-nav-story-scroll__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }

  .header-nav-story-scroll__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #d9d9d9;
  }

  .header-nav-story-scroll__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .header-nav-story-scroll__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #d9d9d9;
  }

  .header-nav-story-scroll__caption {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .header-nav-story-scroll__empty {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
  }

  @media (min-width: 1280px) {
    .header-nav-story-scroll--desktop-hidden {
      display: none;
    }

    .header-nav-story-scroll__scroller {
      padding-bottom: 0;
    }

    .header-nav-story-scroll__item {
      width: 240px;
    }
  }

  @media (max-width: 1439px) {
    .header-nav-story-scroll__nav--prev {
      left: 0;
    }

    .header-nav-story-scroll__nav--next {
      right: 0;
    }
  }
/* END_BLOCK:header-nav-story-dropdown */

/* START_BLOCK:header-nav-tile (INDEX:63) */
.header-nav-tile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  .header-nav-tile[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }

  .header-nav-tile__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .header-nav-tile__title--above {
    margin-bottom: 0;
  }

  .header-nav-tile__title--below {
    margin-top: 0;
  }

  .header-nav-tile__media {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: var(--header-nav-tile-radius, 5px);
    overflow: hidden;
    background: #d9d9d9;
  }

  .header-nav-tile--aspect-square .header-nav-tile__media {
    aspect-ratio: 1 / 1;
  }
  .header-nav-tile--aspect-landscape .header-nav-tile__media {
    aspect-ratio: 16 / 9;
  }
  .header-nav-tile--aspect-portrait .header-nav-tile__media {
    aspect-ratio: 33 / 40;
  }
  .header-nav-tile--aspect-auto .header-nav-tile__media {
    aspect-ratio: auto;
  }

  .header-nav-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    image-rendering: -webkit-optimize-contrast;
  }

  .header-nav-tile__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-grey-light, #f7f7f7);
  }

  .header-nav-tile__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  .header-nav-tile__tag {
    position: absolute;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    height: 33px;
    padding: 4px 7px;
    border-radius: 0 0 4px 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }

  .header-nav-tile--tag-dark_overlay .header-nav-tile__tag {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
  }

  .header-nav-tile--tag-light_overlay .header-nav-tile__tag {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-black, #000);
  }

  .header-nav-tile--tagpos-top_left .header-nav-tile__tag {
    top: 0;
    left: 16px;
  }

  .header-nav-tile--tagpos-top_right .header-nav-tile__tag {
    top: 0;
    right: 16px;
  }

  .header-nav-tile--tagpos-bottom_left .header-nav-tile__tag {
    bottom: 0;
    left: 16px;
    border-radius: 4px 4px 0 0;
    align-items: center;
  }

  .header-nav-tile__tag--below {
    position: static;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-transform: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
  }

  /* Drawer (below desktop): use subgrid so titles align across grid columns */
  @media (max-width: 89.9375rem) {
    .header-nav-tile {
      gap: 0.5rem;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
  }

  /* Desktop: tile fills its fixed 320×410 block container; image fills remaining height */
  @media (min-width: 90rem) {
    .header-nav-tile {
      min-width: 0;
      height: 100%;
    }

    .header-nav-tile__media {
      flex: 1 0 0;
      min-height: 0;
      /* Override aspect-ratio variants — the fixed container dimensions define the size */
      aspect-ratio: auto !important;
    }
  }

  /*
   * Desktop tiles are constrained by their fixed 320px block width.
   * The image fills the available width within that container.
   * No separate max-height/max-width needed.
   */
/* END_BLOCK:header-nav-tile */

/* START_BLOCK:sticky-menu-link (INDEX:64) */
.sticky-menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 34px;
    padding:var(--sticky-menu-link-padding-y, 20px) var(--sticky-menu-link-padding-x, 20px);
    border-radius: 5px;
    border: var(--sticky-menu-link-border-width, 1px) solid var(--sticky-menu-link-border, var(--sticky-menu-link-fg, #000));
    background: var(--sticky-menu-link-bg, transparent);
    color: var(--sticky-menu-link-fg, #000);
    font-size: 14px;
    font-weight: 400;
    line-height: 149%;
    text-transform: var(--sticky-menu-link-text-transform, none);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .sticky-menu-link:hover,
  .sticky-menu-link--active {
    background: var(--sticky-menu-link-fg, #000);
    color: var(--sticky-menu-bg, #fff);
    border-color: var(--sticky-menu-link-fg, #000);
  }

  .sticky-menu-link:focus-visible {
    outline: 2px solid var(--sticky-menu-link-fg, #000);
    outline-offset: 2px;
  }

  .sticky-menu-link--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
/* END_BLOCK:sticky-menu-link */

/* START_BLOCK:text (INDEX:68) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:bundle-builder-app-media (INDEX:72) */
.bundle-builder-app__medias-container {
    @media (min-width: 1024px) {
      top: calc(var(--header-flyout-height, 0px) + 4rem);
    }
    @media (min-width: 1440px) {
      top: calc(var(--header-flyout-height, 0px) + 5rem);
    }
  }
/* END_SNIPPET:bundle-builder-app-media */

/* START_SNIPPET:cart-item (INDEX:85) */
.cart-item {
    display: flex;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--color-grey-medium, #e9e9eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-white, #fff);
  }

  .cart-item__image-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    flex-shrink: 0;
  }

  .cart-item__image-link {
    display: block;
    flex: 1;
    min-height: 0;
  }

  .cart-item__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cart-item__image--placeholder {
    width: 100%;
    height: auto;
    opacity: 0.5;
  }

  .cart-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
  }

  .cart-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .cart-item__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cart-item__title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
    text-decoration: none;
  }

  .cart-item__title:hover {
    text-decoration: underline;
  }

  .cart-item__variant,
  .cart-item__bundle {
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-primary, #000);
    margin: 0;
  }

  .cart-item__delivery {
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary, #000);
    margin: 0;
  }

  .cart-item__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-primary, #000);
    flex-shrink: 0;
  }

  .cart-item__remove:hover {
    opacity: 0.7;
  }

  .cart-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
  }

  .cart-item__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cart-item__price-row {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .cart-item__price {
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
  }

  .cart-item__price--original {
    text-decoration: line-through;
    color: var(--color-red, #ce4646);
  }

  .cart-item__price--sale {
    color: var(--color-primary, #000);
  }

  .cart-item__discount-info {
    font-family: var(--font-primary--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary, #000);
    margin: 0;
  }

  .cart-item__quantity-row {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .cart-item__quantity-form {
    display: flex;
    align-items: center;
  }

  .cart-item__line-price {
    min-width: 80px;
    text-align: right;
  }

  @media (max-width: 767px) {
    .cart-item {
      flex-direction: row;
      gap: 12px;
      padding: 16px;
    }

    .cart-item__image-wrapper {
      width: 80px;
      min-width: 80px;
      flex-shrink: 0;
    }

    .cart-item__header {
      flex-direction: row;
    }

    .cart-item__title {
      font-size: 14px;
    }

    .cart-item__variant,
    .cart-item__bundle {
      font-size: 12px;
    }

    .cart-item__delivery {
      font-size: 11px;
    }

    .cart-item__content {
      gap: 8px;
    }

    .cart-item__actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .cart-item__quantity-row {
      width: 100%;
      justify-content: space-between;
      gap: 16px;
    }

    .cart-item__pricing {
      width: 100%;
    }

    .cart-item__price {
      font-size: 14px;
    }

    .cart-item__price-row {
      gap: 8px;
    }

    .cart-item__line-price {
      min-width: 60px;
    }

    .cart-item__remove {
      width: 20px;
      height: 20px;
    }

    .cart-item__remove svg {
      width: 16px;
      height: 16px;
    }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:cart-item */

/* START_SNIPPET:cart-summary (INDEX:86) */
.cart-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
  }

  .cart-summary__count {
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
    text-align: right;
    margin: 0;
    width: 100%;
  }

  .cart-summary__box {
    width: 100%;
    padding: var(--spacing-sm, 16px);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
  }

  .cart-summary__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .cart-summary__lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .cart-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    color: var(--color-primary, #000);
  }

  .cart-summary__line .cart-summary__label {
    font-weight: 600;
    line-height: 1.2;
  }

  .cart-summary__line .cart-summary__value {
    font-weight: 400;
    line-height: 1.4;
  }

  .cart-summary__line--savings {
    color: var(--color-red, #ce4646);
  }

  .cart-summary__line--discount {
    color: var(--color-red, #ce4646);
  }

  .cart-summary__discount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
  }

  .cart-summary__discount img {
    flex-shrink: 0;
  }

  .cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
  }

  .cart-summary__buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
  }

  .cart-summary__form {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .cart-summary__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 218px;
    height: 48px;
    padding: 12px 24px;
    background-color: var(--color-primary, #000);
    border: 1px solid var(--color-primary, #000);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-primary--family);
    font-size: var(--text-regular, 16px);
    font-weight: 600;
    line-height: 1;
    color: var(--color-white, #fff);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--motion-base, 300ms) ease,
                color var(--motion-base, 300ms) ease;
  }

  .cart-summary__checkout:hover {
    background-color: var(--color-white, #fff);
    color: var(--color-primary, #000);
  }

  .cart-summary__express {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: 218px;
  }

  .cart-summary__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  .cart-summary__divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-grey-medium, #e9e9eb);
  }

  .cart-summary__divider-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary, #000);
    opacity: 0.5;
    text-transform: lowercase;
  }

  .cart-summary__dynamic-checkout {
    width: 100%;
  }

  /* Style Shopify dynamic checkout buttons to match checkout button width */
  .cart-summary__dynamic-checkout .shopify-payment-button {
    margin: 0;
    width: 100%;
  }

  .cart-summary__dynamic-checkout .shopify-payment-button__button {
    border-radius: var(--radius-sm, 6px) !important;
    height: 48px !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  .cart-summary__dynamic-checkout .shopify-payment-button__more-options {
    margin-top: 8px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    text-align: center;
  }

  @media (max-width: 767px) {
    .cart-summary {
      align-items: stretch;
    }

    .cart-summary__count {
      text-align: right;
    }

    .cart-summary__buttons {
      align-items: stretch;
    }

    .cart-summary__form {
      justify-content: stretch;
    }

    .cart-summary__checkout {
      width: 100%;
    }

    .cart-summary__express {
      width: 100%;
      align-items: stretch;
    }

    .cart-summary__dynamic-checkout .shopify-payment-button__button {
      width: 100% !important;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:category-product-card (INDEX:87) */
.category-product-card {
    position: relative;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 0.375rem;
    overflow: hidden;
    width: 100%;
    height: 100%; /* Fill grid cell height for equal row heights */
    display: flex;
    flex-direction: column;
    /* Enables container queries for 1-col mobile vs 2-col mobile spacing */
    container-type: inline-size;
  }

  @media (min-width: 768px) {
    .category-product-card {
      border-radius: 0.75rem;
    }
  }

  /* Figma mobile: px 8px, pb 16px, no top padding (labels hang from edge) */
  .category-product-card__inner {
    padding: 0 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    flex: 1;
  }

  @media (min-width: 768px) {
    .category-product-card__inner {
      padding: 1.5rem; /* 24px */
      gap: 1.5rem;
    }
  }

  /* Figma: top row for save icon (not over the product image) */
  .category-product-card__top {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    height: 1rem;
  }

  @media (min-width: 768px) {
    .category-product-card__top {
      height: 0.25rem;
    }
  }

  .category-product-card__media {
    position: relative;
    width: calc(100% + 1rem);
    margin-inline: -0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Keep image centered */
    justify-content: flex-start;
    align-self: center; /* Center media block within the card */
  }

  @media (min-width: 768px) {
    .category-product-card__media {
      width: calc(100% + 3rem);
      margin-inline: -1.5rem;
    }
  }

  .category-product-card__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    flex: 1;
    min-height: 0;
  }

  .category-product-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: transparent;
  }

  /* Desktop: square product image, scales with card width */
  @media (min-width: 768px) {
    .category-product-card__image {
      aspect-ratio: 1 / 1;
    }
  }

  .category-product-card__image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Figma: soft shadow under product image */
  /* .category-product-card__image-shadow { */
  /* width: 60%; */
  /* max-width: 180px; */
  /* height: 8px; */
  /* margin: 0 auto 0.25rem; /* 4px */
  */
    /* background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, transparent 70%); */
    /* flex-shrink: 0; */
  /* } */

  /* @media (min-width: 768px) { */
    /* .category-product-card__image-shadow { */
      /* height: 12px; */
      /* max-width: 230px; */
      /* margin-bottom: 0.5rem; /* 8px */ */
    /* } */
  /* } */

  /* Wishlist/bookmark button - Figma mobile: 21px, desktop: 40px */
  .category-product-card__wishlist {
    position: relative;
    width: 1.3125rem;
    height: 1.3125rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    transition: opacity 0.2s;
  }
  .category-product-card__wishlist:hover {
    opacity: 0.9;
  }
  .category-product-card__wishlist.is-active {
    opacity: 1;
  }
  .category-product-card__wishlist.is-active .category-product-card__wishlist-icon {
    filter: brightness(0) saturate(100%);
  }

  .category-product-card__wishlist-icon {
    width: 1.3125rem;
    height: 1.3125rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .category-product-card__wishlist-icon svg {
    width: 1.3125rem;
    height: 1.3125rem;
    display: block;
  }

  @media (min-width: 768px) {
    .category-product-card__wishlist {
      width: 2.5rem;
      height: 2.5rem;
    }
    .category-product-card__wishlist-icon {
      width: 2.5rem;
      height: 2.5rem;
    }
    .category-product-card__wishlist-icon svg {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

  .category-product-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .category-product-card__image--placeholder .placeholder-svg {
    width: 60%;
    height: 60%;
    opacity: 0.5;
  }

  /* Labels - top-left, hanging from top edge */
  .category-product-card__labels {
    position: absolute;
    top: 0;
    left: 0.5rem;
    display: flex;
    gap: 0.1875rem;
    z-index: 2;
    pointer-events: none;
  }

  /* Mobile-first: small labels for compact cards */
  .category-product-card__label {
    display: flex;
    align-items: flex-end;
    background: #000000;
    color: #ffffff;
    min-height: 1.5rem;
    padding: 0.5625rem 0.4375rem 0.25rem;
    font-weight: 500;
    font-size: 0.554rem;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 0 0 0.25rem 0.25rem;
    white-space: nowrap;
  }

  /* Desktop: larger labels matching Figma e/tag */
  @media (min-width: 768px) {
    .category-product-card__labels {
      left: 2rem;
      gap: 0.375rem;
    }

    .category-product-card__label {
      min-height: 2.875rem;
      padding: 0.375rem 0.625rem;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1;
      border-radius: 0 0 0.3125rem 0.3125rem;
    }
  }

  /* Bottom section - top row (divider + rating), then content below */
  .category-product-card__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    margin-top: auto; /* Push bottom section to bottom of card */
  }

  /* Top row: divider left, rating right */
  .category-product-card__top-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* 16px */
  }

  /* Horizontal divider line */
  .category-product-card__divider {
    width: 2rem;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }

  /* Content - Figma: no extra padding (padding is on __inner) */
  .category-product-card__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    align-items: flex-start; /* Left-align content items */
    text-align: left;
  }
  .category-product-card__meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    flex: 1; /* Allow meta to grow */
    align-items: flex-start; /* Left-align meta items */
  }

  /* When no description, don't stretch meta to fill card height */
  .category-product-card__content--no-description .category-product-card__meta {
    flex: 0 0 auto;
  }
  .category-product-card__content--no-description .category-product-card__price {
    margin-top: 0;
  }

  .category-product-card__title {
    margin: 0;
    /* Figma mobile: 12px Bold, uppercase, lh 1.42 */
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.42;
    text-transform: uppercase;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .category-product-card__title {
      font-size: 1.125rem;
      font-weight: 600;
      line-height: 120%;
    }
  }

  .category-product-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .category-product-card__title-link:hover {
    opacity: 0.85;
  }

  .category-product-card__description {
    margin: 0;
    opacity: 0.9;
    /* Figma mobile: 10px Regular */
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
  }

  @media (min-width: 768px) {
    .category-product-card__description {
      font-size: 1rem; /* 16px */
    }
  }

  /* Rating - positioned at right side of top row */
  .category-product-card__rating {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.5em;
  }

  .category-product-card__rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  @media (min-width: 768px) {
    .category-product-card__rating-stars {
      gap: 0.5rem;
    }
  }

  .category-product-card__stars {
    position: relative;
    display: inline-block;
    line-height: 1;
  }

  .category-product-card__stars-bg {
    color: rgba(0, 0, 0, 0.25);
  }

  .category-product-card__stars-fill {
    position: absolute;
    inset: 0;
    color: #000000;
    width: calc((var(--rating, 0) / 5) * 100%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* Figma mobile: 10px, desktop: 14px */
  .category-product-card__rating-count {
    opacity: 0.7;
    white-space: nowrap;
    font-size: 0.625rem;
  }

  @media (min-width: 768px) {
    .category-product-card__rating-count {
      font-size: 0.875rem;
    }
  }

  /* Prevent rating from overflowing card edge */
  .category-product-card__rating-stars {
    overflow: hidden;
    min-width: 0;
  }

  /* Figma mobile: 12px Medium (500), Desktop: 18px Medium, line 1.2 */
  .category-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.6875rem; /* 11px */
    flex-wrap: wrap;
    align-self: flex-start;
    font-weight: 500;
    line-height: 1.2;
    margin-top: auto;
  }

  /* Override .text-medium-bold utility on mobile */
  @media (max-width: 767px) {
    .category-product-card__price,
    .category-product-card__price .category-product-card__price-current,
    .category-product-card__price .category-product-card__price-compare,
    .category-product-card__price .category-product-card__price-from {
      font-size: 0.75rem !important;
      font-weight: 500 !important;
    }
  }

  .category-product-card__price-current--sale {
    color: var(--color-green, #517d24);
  }

  .category-product-card__price-from,
  .category-product-card__price-current {
    line-height: inherit;
  }

  .category-product-card__price-compare {
    opacity: 0.7;
    line-height: inherit;
  }

  /* Constrain the image to not grow with the wider card */
  .category-product-card--highlight .category-product-card__image {
    /* Limit width so image doesn't grow with card width */
    max-width: 50%;
    width: auto;
    margin: 0 auto;
  }

  .category-product-card--highlight .category-product-card__content {
    /* Limit text to first half of card */
    max-width: 50%;
  }

  @media (max-width: 767px) {
    .category-product-card--highlight .category-product-card__content {
      max-width: 100%;
    }
    .category-product-card--highlight .category-product-card__image {
      max-width: 100%;
    }
  }
/* END_SNIPPET:category-product-card */

/* START_SNIPPET:image (INDEX:100) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:predictive-search-article (INDEX:108) */
.predictive-search-article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    /* Minimum touch target */
    min-height: 44px;
  }

  .predictive-search-article:hover,
  .predictive-search-article:focus,
  .predictive-search-article[aria-selected="true"] {
    background-color: var(--color-grey-light, #f5f5f5);
    outline: none;
  }

  @media (max-width: 767px) {
    .predictive-search-article {
      padding: 12px 8px;
    }
  }

  .predictive-search-article__image-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-grey-light, #f5f5f5);
  }

  .predictive-search-article__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .predictive-search-article__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-article__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .predictive-search-article__title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .predictive-search-article__meta {
    margin: 0;
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .predictive-search-article__author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .predictive-search-article__separator {
    flex-shrink: 0;
  }

  .predictive-search-article__date {
    flex-shrink: 0;
  }

  .predictive-search-article__arrow {
    flex-shrink: 0;
    color: var(--color-grey-dark, #6b6b6b);
  }
/* END_SNIPPET:predictive-search-article */

/* START_SNIPPET:predictive-search-collection (INDEX:109) */
.predictive-search-collection {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    /* Minimum touch target */
    min-height: 44px;
  }

  .predictive-search-collection:hover,
  .predictive-search-collection:focus,
  .predictive-search-collection[aria-selected="true"] {
    background-color: var(--color-grey-light, #f5f5f5);
    outline: none;
  }

  @media (max-width: 767px) {
    .predictive-search-collection {
      padding: 12px 8px;
    }
  }

  .predictive-search-collection__image-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-grey-light, #f5f5f5);
  }

  .predictive-search-collection__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .predictive-search-collection__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-collection__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .predictive-search-collection__title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .predictive-search-collection__count {
    margin: 0;
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-collection__arrow {
    flex-shrink: 0;
    color: var(--color-grey-dark, #6b6b6b);
  }
/* END_SNIPPET:predictive-search-collection */

/* START_SNIPPET:predictive-search-product (INDEX:110) */
.predictive-search-product {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .predictive-search-product__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    /* Minimum touch target */
    min-height: 44px;
  }

  .predictive-search-product__link:hover,
  .predictive-search-product__link:focus,
  .predictive-search-product__link[aria-selected="true"] {
    background-color: var(--color-grey-light, #f5f5f5);
    outline: none;
  }

  @media (max-width: 767px) {
    .predictive-search-product__link {
      padding: 12px 8px;
      min-height: 64px;
    }
  }

  .predictive-search-product__image-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-grey-light, #f5f5f5);
  }

  .predictive-search-product__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .predictive-search-product__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-medium, #e9e9eb);
  }

  .predictive-search-product__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .predictive-search-product__title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .predictive-search-product__vendor {
    margin: 0;
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .predictive-search-product__price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .predictive-search-product__price-current {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #000);
  }

  .predictive-search-product__price-current--sale {
    color: var(--color-red, #ce4646);
  }

  .predictive-search-product__price-compare {
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
  }

  .predictive-search-product__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
  }

  .predictive-search-product__variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 8px 20px;
    height: 40px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
  }

  .predictive-search-product__variant:hover,
  .predictive-search-product__variant:focus {
    background: var(--color-grey-light, #f5f5f5);
    outline: none;
  }

  .predictive-search-product__variant-more {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
    border: 1px solid var(--color-grey-medium, #e9e9eb);
    border-radius: 6px;
    padding: 8px 12px;
    height: 40px;
  }
/* END_SNIPPET:predictive-search-product */

/* START_SNIPPET:product-header-buttons (INDEX:113) */
.product-header-buttons__payment .shopify-payment-button {
    margin-top: 0 !important;
  }

  .product-header-buttons__payment .shopify-payment-button__button {
    border-radius: 10px !important;
    padding: 12px 24px !important;
  }

  .product-header-buttons__add-to-cart[data-loading] .product-header-buttons__text {
    display: none;
  }

  .product-header-buttons__add-to-cart[data-loading] .product-header-buttons__loading {
    display: block;
  }

  /* Adding state with animated dots */
  .product-header-buttons__add-to-cart[data-adding] .product-header-buttons__text::after {
    content: '...';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: ellipsis 1.2s infinite;
  }

  @keyframes ellipsis {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
  }

  /* Added state with smooth transition */
  .product-header-buttons__add-to-cart {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
    height: 48px;
  }

  /* While [data-added] is set the button is kept disabled by JS,
     so the native .btn:disabled grey styling applies — no override needed. */

  /* Success message animation */
  .product-header-buttons__success {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:product-header-buttons */

/* START_SNIPPET:product-header-images (INDEX:115) */
/* Pre-Swiper: show first slide only, prevent horizontal overflow */
  .product-header-images__carousel {
    overflow: hidden;
  }

  /* Before Swiper initializes (init="false"), show only first slide to prevent overflow */
  swiper-container[init="false"] swiper-slide {
    display: none;
  }

  swiper-container[init="false"] swiper-slide:first-child {
    display: block;
  }

  /* Swiper mobile carousel pagination */
  .product-header-images__swiper::part(pagination) {
    position: relative;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

  .product-header-images__swiper::part(bullet) {
    width: 8px;
    height: 8px;
    background: var(--color-grey-medium, #ccc);
    opacity: 1;
    border-radius: 50%;
    cursor: pointer;
  }

  .product-header-images__swiper::part(bullet-active) {
    background: var(--color-primary, #000);
  }

  .product-header-images__thumbnails::-webkit-scrollbar {
    display: none;
  }

  .product-header-images__modal[data-active] {
    display: flex;
  }

  /* Desktop scrollable gallery container */
  .product-header-images__desktop {
    container-type: inline-size;
  }

  .product-header-images__grid-wrapper {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-header-images__grid-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Max-height = 2 rows of images (matches 2x2 grid visible area) */
  .product-header-images__grid-wrapper[data-aspect="square"] {
    max-height: 100cqi;
  }

  .product-header-images__grid-wrapper[data-aspect="portrait"] {
    max-height: calc(100cqi * 4 / 3);
  }

  .product-header-images__grid-wrapper[data-aspect="landscape"] {
    max-height: calc(100cqi * 3 / 4);
  }

  /* Single row mode - center content when only 1-2 images */
  .product-header-images__desktop[data-single-row="true"] .product-header-images__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: center;
  }

  /* Single image - display centered */
  .product-header-images__desktop[data-image-count="1"] .product-header-images__grid {
    grid-template-columns: 1fr;
    max-width: 70%;
    margin: 0 auto;
  }

  /* Zoom modal centering fix */
  .product-header-images__modal-content {
    box-sizing: border-box;
  }

  /* Video and external video in slides */
  .product-header-images__video-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-header-images__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--product-media-object-position, center);
  }

  /* Firefox captures pointer events on video, blocking Swiper drag. Safe because mobile has no controls. */
  .product-header-images__carousel .product-header-images__video {
    pointer-events: none;
  }

  .product-header-images__external-video-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-header-images__external-video-wrapper iframe,
  .product-header-images__external-video-wrapper .product-header-images__external-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--product-media-object-position, center);
  }

  /* Zoom modal video */
  .product-header-images__zoom-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .product-header-images__zoom-video.hidden {
    display: none;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .product-header-images__item img,
    .product-header-images__item .product-header-images__video,
    .product-header-images__slide img,
    .product-header-images__slide .product-header-images__video,
    .product-header-images__thumbnail,
    .product-header-images__grid {
      transition: none;
    }
  }
/* END_SNIPPET:product-header-images */

/* START_SNIPPET:product-header-price (INDEX:117) */
.product-header-price__value {
    font-size: 22px;
    font-weight: 600;
    line-height: 115%;
  }
/* END_SNIPPET:product-header-price */

/* START_SNIPPET:product-header-variants (INDEX:122) */
.product-header-variants__dropdown {
    position: relative;
  }

  .product-header-variants__dropdown-trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--color-primary, #111);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    color: var(--color-primary, #111);
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  .product-header-variants__dropdown-trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary, #111);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
  }

  .product-header-variants__dropdown-chevron {
    transition: transform 200ms ease;
  }

  .product-header-variants__dropdown-trigger[aria-expanded="true"] .product-header-variants__dropdown-chevron {
    transform: rotate(180deg);
  }

  .product-header-variants__dropdown-menu {
    position: absolute;
    margin: 4px 0 0;
    padding: 8px 24px;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    list-style: none;
    display: none;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
  }

  .product-header-variants__dropdown-menu.is-open {
    display: block;
  }

  .product-header-variants__dropdown-option {
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px solid #e9e9eb;
  }

  .product-header-variants__dropdown-option:last-child {
    border-bottom: none;
  }

  .product-header-variants__dropdown-option:hover,
  .product-header-variants__dropdown-option.is-active {
    font-weight: 600;
  }

  .product-header-variants__dropdown-option.is-unavailable {
    color: #999;
  }

  .product-header-variants__select-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
/* END_SNIPPET:product-header-variants */

/* START_SNIPPET:quantity-input (INDEX:126) */
.quantity-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-grey-medium, #e9e9eb);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    width: fit-content;
  }

  .quantity-input__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
    transition: background-color var(--motion-base, 300ms) ease;
  }

  .quantity-input__button:hover:not(:disabled) {
    background-color: var(--color-grey-light, #f7f7f7);
  }

  .quantity-input__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .quantity-input__field {
    width: 40px;
    height: 40px;
    padding: 10px;
    border: none;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary, #000);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .quantity-input__field::-webkit-outer-spin-button,
  .quantity-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .quantity-input__field:focus {
    outline: none;
  }
/* END_SNIPPET:quantity-input */

/* START_SNIPPET:search-result-article (INDEX:128) */
/* Card container - matches search-result-product structure */
  .search-result-article {
    position: relative;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Media container */
  .search-result-article__media {
    position: relative;
    width: 100%;
  }

  .search-result-article__image-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .search-result-article__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-grey-medium, #d9d9d9);
    transition: transform var(--motion-duration-base, 300ms) ease;
  }

  .search-result-article:hover .search-result-article__image {
    transform: scale(1.05);
  }

  .search-result-article__image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-medium, #d9d9d9);
    color: var(--color-grey-light, #f7f7f7);
  }

  /* Badge - hanging banner style */
  .search-result-article__badge {
    position: absolute;
    top: 0;
    left: 24px;
    background: #000000;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 0 0 5px 5px;
    z-index: 2;
    pointer-events: none;
  }

  @media (max-width: 1023px) {
    .search-result-article__badge {
      left: 16px;
      font-size: 13px;
      padding: 5px 8px;
    }
  }

  @media (max-width: 767px) {
    .search-result-article__badge {
      left: 12px;
      font-size: 12px;
      padding: 5px 8px;
    }
  }

  /* Content */
  .search-result-article__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  /* Meta (author + date) */
  .search-result-article__meta {
    margin: 0;
    font-size: 12px;
    color: var(--color-grey-dark, #6b6b6b);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .search-result-article__author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
  }

  .search-result-article__separator {
    flex-shrink: 0;
  }

  .search-result-article__date {
    flex-shrink: 0;
  }

  /* Title */
  .search-result-article__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
  }

  .search-result-article__title-link {
    color: var(--color-text, #000);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .search-result-article__title-link:hover {
    opacity: 0.85;
  }

  /* Excerpt */
  .search-result-article__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-grey-dark, #6b6b6b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* END_SNIPPET:search-result-article */

/* START_SNIPPET:search-result-page (INDEX:129) */
/* Card container - horizontal layout */
  .search-result-page {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 12px;
    transition: background-color var(--motion-duration-fast, 200ms) ease;
    height: 100%;
    min-height: 100px;
  }

  .search-result-page:hover {
    background: var(--color-grey-medium, #e9e9eb);
  }

  /* Icon wrapper */
  .search-result-page__icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white, #fff);
    border-radius: var(--radius-md, 9px);
  }

  .search-result-page__icon {
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* Content */
  .search-result-page__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Type label */
  .search-result-page__type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* Title */
  .search-result-page__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text, #000);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Excerpt */
  .search-result-page__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-grey-dark, #6b6b6b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Arrow */
  .search-result-page__arrow {
    flex-shrink: 0;
    color: var(--color-grey-dark, #6b6b6b);
    margin-top: 4px;
    transition: transform var(--motion-duration-fast, 200ms) ease;
  }

  .search-result-page:hover .search-result-page__arrow {
    transform: translateX(4px);
  }

  /* Mobile adjustments */
  @media (max-width: 767px) {
    .search-result-page {
      padding: 16px;
      gap: 12px;
    }

    .search-result-page__icon-wrapper {
      width: 40px;
      height: 40px;
    }

    .search-result-page__icon {
      width: 20px;
      height: 20px;
    }

    .search-result-page__title {
      font-size: 15px;
    }

    .search-result-page__excerpt {
      font-size: 13px;
    }
  }
/* END_SNIPPET:search-result-page */

/* START_SNIPPET:search-result-product (INDEX:130) */
/* Card container */
  .search-result-product {
    position: relative;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Media container */
  .search-result-product__media {
    position: relative;
    width: 100%;
  }

  .search-result-product__image-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .search-result-product__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-grey-medium, #d9d9d9);
    transition: transform var(--motion-duration-base, 300ms) ease;
  }

  .search-result-product:hover .search-result-product__image {
    transform: scale(1.05);
  }

  .search-result-product__image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-medium, #d9d9d9);
    color: var(--color-grey-light, #f7f7f7);
  }

  /* Badge - hanging banner style */
  .search-result-product__badge {
    position: absolute;
    top: 0;
    left: 24px;
    background: var(--color-red, #ce4646);
    color: #ffffff;
    padding: 6px 10px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 0 0 5px 5px;
    z-index: 2;
    pointer-events: none;
  }

  .search-result-product__badge--sale {
    background: var(--color-red, #ce4646);
  }

  .search-result-product__badge--new {
    background: #000000;
  }

  @media (max-width: 1023px) {
    .search-result-product__badge {
      left: 16px;
      padding: 5px 8px;
    }
  }

  @media (max-width: 767px) {
    .search-result-product__badge {
      left: 12px;
      padding: 5px 8px;
    }
  }

  /* Wishlist button */
  .search-result-product__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--motion-duration-fast, 200ms) ease, background-color var(--motion-duration-fast, 200ms) ease;
  }

  .search-result-product__wishlist:hover {
    opacity: 0.9;
  }

  .search-result-product__wishlist.is-active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
  }

  /* Content */
  .search-result-product__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  /* Rating */
  .search-result-product__rating {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .search-result-product__stars {
    position: relative;
    display: inline-block;
    line-height: 1;
  }

  .search-result-product__stars-bg {
    color: rgba(0, 0, 0, 0.25);
  }

  .search-result-product__stars-fill {
    position: absolute;
    inset: 0;
    color: #000000;
    width: calc((var(--rating, 0) / 5) * 100%);
    overflow: hidden;
    white-space: nowrap;
  }

  .search-result-product__rating-count {
    opacity: 0.7;
  }

  /* Vendor */
  .search-result-product__vendor {
    margin: 0;
    color: var(--color-grey-dark, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Title */
  .search-result-product__title {
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
  }

  .search-result-product__title-link {
    color: var(--color-text, #000);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .search-result-product__title-link:hover {
    opacity: 0.85;
  }

  /* Price */
  .search-result-product__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
  }

  .search-result-product__price-from {
    color: var(--color-grey-dark, #6b6b6b);
  }

  .search-result-product__price-current {
    font-weight: 600;
    color: var(--color-text, #000);
  }

  .search-result-product__price-current--sale {
    color: var(--color-red, #ce4646);
  }

  .search-result-product__price-compare {
    color: var(--color-grey-dark, #6b6b6b);
  }
/* END_SNIPPET:search-result-product */