/** Shopify CDN: Minification failed

Line 15277: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;
  }

  /* Slider mode is a full-bleed edge-to-edge scroll track: layout (inner
     full-bleed, leading inset on the scroll container) comes from the shared
     .content-tiles--slider rules in content-tiles.liquid. */

  @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.slider-controls--mobile {
      margin-top: 1rem;
    }
  }

  /* 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;
    }
  }

  /* 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;
    }

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

    /* Slider mode with mobile grid: symmetric margins are restored by the
       shared mobile-grid rules in content-tiles.liquid. */
  }

  /* Slider Layout */
  .activity-teaser.content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 1rem;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .activity-teaser.content-tiles--slider .content-tiles__container {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    position: relative;
  }

  /* Slotted slides would otherwise shrink inside the shadow flex track */
  .activity-teaser.content-tiles--slider .content-tiles__container .content-tiles__card {
    flex-shrink: 0 !important;
  }

  .activity-teaser.content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
  }

  @media (min-width: 768px) {
    /* The peek/fill rules below set the width; this only caps the height. */
    .activity-teaser.content-tiles--slider .content-tiles__card {
      max-height: 100dvh;
    }

  }

  @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;
    }

  }

  /* 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 {
    position: relative;
    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%;
    aspect-ratio: var(--card-image-ratio, 3/4);
    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 {
    max-height: 100dvh;
  }

  /* 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: 2.17rem;
    background: #000000;
    color: white;
    padding: 0 0.677rem 0.406rem 0.677rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 0 0 var(--radius-xs, 0.25rem) var(--radius-xs, 0.25rem);
    z-index: 3;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

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

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

  @media (max-width: 1023px) {
    .activity-teaser .content-tiles__card--activity.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 17.5rem;
    }
  }

  @media (max-width: 767px) {
    .activity-teaser .content-tiles__card--activity.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 12.5rem;
    }
  }

  /* ── Swiper migration ──────────────────────────────────────────────────
     In slider mode the container is a <swiper-container>. Keep the host a plain
     block so native .content-tiles__container grid/slider rules don't collapse
     the shadow wrapper; force the wrapper into a grid at the grid breakpoint
     (Swiper is disabled there). */
  .activity-teaser swiper-container.content-tiles__container {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    /* The leading inset is Swiper's slides-offset-before, so a native
       padding-inline-start (possibly leaked from a sibling tiles section's
       stylesheet on the same page) must not stack on top of it. */
    padding-inline-start: 0 !important;
  }

  @media (max-width: 767px) {
    .activity-teaser.content-tiles--mobile-grid .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .activity-teaser.content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
/* 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 */
  .blog-archive-overview blog-archive-overview {
    display: block;
    width: 100%;
    max-width: 100%;
  }


  /* Full-bleed sticky bar: the background spans the viewport so articles pass
     under it edge to edge, and the pill track runs off the viewport instead of
     being clipped at the content column. The start padding is the negative of
     the bleed, so the label still begins on the content edge; the end is left
     open for the pills to bleed out. The section's overflow-x: hidden clips it. */
  .blog-archive-overview__sticky-nav {
    background-color: var(--ba-bg, #ffffff);
    position: sticky;
    top: 0;
    z-index: 38;
    margin-inline: calc(50% - 50vw);
    padding-block: 1rem;
    padding-inline-start: calc(50vw - 50%);
  }

  /* The row is the flex item that bleeds: claim the space up to the viewport edge,
     and override the snippet's max-width: 100%, which would clamp it back. The
     element selector out-specifies the snippet's own .filter-pills rule. */
  swiper-container.blog-archive-overview__filters {
    flex: 1 1 0;
    max-width: none;
  }

  /* Filter buttons use global .btn--outline - section-specific active state */
  .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 the wrapper is a full-bleed edge-to-edge scroll track:
     layout comes from content-container--full-width (@layer base); the leading
     inset is restored on the scroll container below. */

  .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;
    }
  }

  /* Only the section's own bit: the arrows follow the section's text color. */
  .blog-article-teaser__controls {
    color: var(--section-text-color);
  }

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

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

  /* Swiper positions the track (gap via space-between, leading inset via
     slides-offset-before). Stretch slides so cards share the tallest height. */
  .blog-article-teaser__container::part(wrapper) {
    align-items: stretch;
  }

  .blog-article-teaser__slide {
    width: 382px;
    height: auto;
  }

  @media (max-width: 767px) {
    .blog-article-teaser__slide {
      width: 295px;
    }
  }

  .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 {
    width: 100%;
    height: 100%;
  }

  .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;
  }

  /* Measurement anchor only — see the marker's comment in the markup. */
  .category-product-grid-section__edge {
    height: 0;
  }

  .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.slider-controls--desktop {
    margin-right: max(var(--content-gap-current), 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;
    }
  }

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

  /* The pill row itself is `.filter-pills` — styled in the filter-pills snippet. */

  /* Full-width filter scroll track (mirrors the sticky-menu behavior): the row
     spans the viewport edge to edge so pills scroll past both edges instead of
     being clipped at the content column. The pills still start at the content
     edge via the slides-offset-before category-product-grid.ts measures against
     .category-product-grid-section__edge — padding on a Swiper host is dead
     space inside the shadow track, never a track inset. The section's
     overflow-x: hidden clips the bleed.

     The bleed is derived from the wrapper's own width, so one rule covers every
     mode: it collapses to zero where the inner already spans the viewport. */
  .category-product-grid__filters-container {
    margin-inline: calc(50% - 50vw);
  }

  @media (max-width: 767px) {
    /* The slider inner clips its overflow via a later, equal-specificity
       global rule, so force it open to let the row escape and bleed out. */
    .category-product-grid--slider .category-product-grid__inner {
      overflow: visible !important;
    }

    /* Controls are justify-end; keep them a content gap clear of the edge. */
    .category-product-grid__filters-container .category-product-grid__controls {
      padding-inline-end: var(--content-gap-current);
    }
  }

  /* Desktop arrows share the row and sit at its end, so keep it in the content
     column — a bleeding row would park them at the viewport edge. */
  @media (min-width: 768px) {
    .category-product-grid__filters-container:has(.category-product-grid__controls.slider-controls--desktop) {
      margin-inline: 0;
    }
  }

  /* From lg the container turns into a row (lg:flex-row) and the pill track
     shares it with the arrows. Claim the space up to them: a flex base of the
     pills' own width would end the track's viewport there, and slides-offset-before
     shifts the pills right inside that box, so the last one lands outside it. */
  @media (min-width: 1024px) {
    .category-product-grid__filters-container > .category-product-grid__filters {
      flex: 1 1 0;
    }
  }

  /* 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 slider: the inner bleeds edge to edge so the track spans the
       viewport; the leading inset is restored on the scroll children below.
       Covers both the pure slider and the grid-desktop + mobile-slider override. */
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__inner {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      max-width: none;
    }

    /* 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;
    }

    .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 — edge-to-edge scroll track. The inner spans edge to edge
       (the mobile bleed rule above drops its margins); the leading inset moves
       onto the scroll container via the content gap so cards still start at the
       content edge but can be scrolled past the left edge. With border-box sizing
       the card width math is unchanged. */

    /* Only the products track bleeds edge to edge; the non-scrolling children
       keep the content-edge inset the (now edge-to-edge) inner no longer provides.
       (The filters-container has its own bleed handling and is intentionally left
       full-width.) */
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__header,
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__no-results,
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__view-all {
      padding-inline-start: var(--content-gap-current);
    }

    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__products {
      display: flex !important;
      gap: var(--slider-slide-gap);
      padding-inline-start: var(--content-gap-current);
      overflow-y: hidden;
    }

    /* Same width for the highlight card: mobile shows one card plus a peek, so
       there is no room for it to span two. */
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__card-wrapper,
    .category-product-grid[data-mobile-display-mode='slider'] .category-product-grid__card-wrapper--highlight {
      flex: 0 0 auto;
      width: var(--slider-card-width-mobile);
      min-width: var(--slider-card-width-mobile);
      max-width: var(--slider-card-width-mobile);
    }

    /* 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)
     ============================================ */
  /* Slider is a full-bleed scroll track at every size — the inner spans both
     viewport edges (layout from content-container--full-width in @layer base;
     the mobile display-mode overrides above are unlayered and win when they
     need to restore a centered container). The leading inset moves onto the
     products track and the non-scrolling children below, so content starts at
     the content edge but scrolls past both edges.
     (overflow is flipped to visible on mobile further up so the track can bleed out.) */
  .category-product-grid--slider .category-product-grid__inner {
    overflow: hidden;
  }

  .category-product-grid--slider .category-product-grid__products {
    display: flex;
    gap: var(--slider-slide-gap);
    overflow-y: hidden;
    width: 100%;
    align-items: stretch; /* Equal height cards */
  }

  /* Desktop: restore the content-edge inset on the scroll track and on the
     non-scrolling children of the full-bleed inner. (Mobile handles this in the
     max-width: 767px block above per mobile display mode.) */
  @media (min-width: 768px) {
    .category-product-grid--slider .category-product-grid__products {
      padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
    }

    .category-product-grid--slider .category-product-grid__header,
    .category-product-grid--slider .category-product-grid__no-results,
    .category-product-grid--slider .category-product-grid__view-all {
      padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
    }

    /* The filters row spans the full-bleed inner (cancel the grid-mode negative
       margin, which would overshoot the viewport). No leading padding: that
       would start the row at the content edge, leaving nothing to bleed into —
       and it zeroes what category-product-grid.ts measures, so the pills lose
       their slides-offset-before too. The offset is the inset. */
    .category-product-grid--slider .category-product-grid__filters-container {
      margin-inline: 0;
    }
  }

  /* The leading inset lives on slides-offset-before now, not on the track's
     padding (the Swiper neutralizer zeroes that) — so the card-width percentage,
     which resolves against the un-padded host, has to subtract it or every card
     comes out one-third-of-an-inset too wide.

     Estimate only: createSectionSlider's `offsetProperty` overwrites this on the
     <swiper-container> with the offset it actually measured and handed to Swiper,
     so the two can't disagree. These values are what the cards use until that
     lands, and the fallback for the popup slider, which measures nothing. */
  .category-product-grid {
    --slider-leading-inset: var(--content-gap-current);

    /* This family has no fill rules of its own, so it peeks unless a group's card
       count came in short — the per-group rule the markup emits carries an id
       selector, so it out-specifies this. */
    --slider-peek-active: 1;
    --slider-peek-active-mobile: 1;
  }
  @media (min-width: 768px) {
    .category-product-grid {
      --slider-leading-inset: var(--content-edge-offset, var(--content-gap-current));
    }
  }

  /* --slider-card-width (and the --slider-visible / --slider-total-gap it divides
     by) is defined in theme.scss: the category-product-slider snippet reads it too,
     and Shopify loads a section's bundled CSS only on pages that render that
     section, so a definition here would vanish under the story-cards popup. */

  .category-product-grid--slider .category-product-grid__card-wrapper {
    flex: 0 0 var(--slider-card-width);
    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(var(--slider-card-width) * 2 + var(--slider-slide-gap));
  }

  @media (max-width: 767px) {
    /* Mobile shows one card plus a peek, so the highlight loses its double width. */
    .category-product-grid--slider .category-product-grid__card-wrapper,
    .category-product-grid--slider .category-product-grid__card-wrapper--highlight {
      width: var(--slider-card-width-mobile);
      min-width: var(--slider-card-width-mobile);
      max-width: var(--slider-card-width-mobile);
    }
  }

  /* 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);
  }

  /* ── Swiper migration ──────────────────────────────────────────────────
     The products container is a <swiper-container> whenever slider is used at
     any breakpoint. Keep the host a plain block so native grid/slider rules
     don't turn the host into a grid/flex (collapsing the shadow wrapper). */
  swiper-container.category-product-grid__products {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    padding-inline-start: 0 !important;
  }

  /* Slider slide widths — Swiper reads width via slides-per-view="auto"
     (the native rules set flex-basis only). */
  .category-product-grid--slider .category-product-grid__card-wrapper {
    width: var(--slider-card-width);
  }
  .category-product-grid--slider .category-product-grid__card-wrapper--highlight {
    width: calc(var(--slider-card-width) * 2 + var(--slider-slide-gap));
  }

  /* Slotted slides carry a definite height from the shadow tree, which stops them
     stretching to the tallest slide the way the native flex track did — a shorter
     card (typically the highlight one) ends up floating above the row.
     align-self can't win against a definite height; releasing it can. */
  swiper-slide.category-product-grid__card-wrapper {
    height: auto;
  }

  /* Grid fallback at grid breakpoints (Swiper disabled there). ::part(wrapper)
     only matches when the host is actually a swiper-container, so these are
     inert in pure grid/grid (plain <div>). */
  @media (min-width: 768px) {
    /* grid desktop (+ slider mobile) */
    .category-product-grid--grid .category-product-grid__products::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
      gap: 1.5rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
      align-items: stretch;
    }
    .category-product-grid--grid .category-product-grid__card-wrapper {
      width: auto !important;
      margin: 0 !important;
    }
    .category-product-grid--grid .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::part(wrapper) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
  }
  @media (max-width: 767px) {
    /* grid mobile (+ slider desktop) */
    .category-product-grid[data-mobile-display-mode='grid'] .category-product-grid__products::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--mobile-grid-columns, 2), minmax(0, 1fr));
      gap: 0.875rem 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .category-product-grid[data-mobile-display-mode='grid'] .category-product-grid__card-wrapper {
      width: auto !important;
      margin: 0 !important;
    }
    .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);
    }
  }
/* END_SECTION:category-product-grid */

/* START_SECTION:collection-tiles (INDEX:13) */
/* This slider always peeks (it has no fill mode), and mobile shows a single tile,
     so the shared --slider-card-width* from theme.scss resolves against these. The peek
     fraction used to be Liquid's `columns + 0.4`. */
  .ct-section {
    --slider-peek-active: 1;
    --slider-columns-mobile: 1;
    --slider-peek-active-mobile: 1;

    /* Leading inset, subtracted by the card widths: the track bleeds to both
       viewport edges and holds the first tile at the content edge with
       slides-offset-before, so without this the row overflows by exactly that much
       and the peek lands off-screen — past the container's max width the offset
       grows with the viewport while the peek does not.

       Estimate only: collection-tiles.ts overwrites it on the track with the offset
       it actually measured and handed to Swiper. */
    --slider-leading-inset: max(
      var(--content-gap-current),
      calc((100% - var(--max-width-container, 100rem)) / 2)
    );
    background-color: var(--ct-bg);
    color: var(--ct-text);
    padding-top: var(--ct-pt);
    padding-bottom: var(--ct-pb);
    width: 100%;
    box-sizing: border-box;
  }

  .ct-section *,
  .ct-section *::before,
  .ct-section *::after {
    box-sizing: border-box;
  }

  /* ── Section header ── */
  .ct-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .ct-section__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
  }

  .ct-section__title {
    margin: 0;
    color: var(--ct-text);
  }

  .ct-section__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  /* ── Slider controls row (arrows are the shared .slider-controls) ── */
  .ct-controls-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  /* ── Grid wrap (clips slider overflow) ── */
  .ct-grid-wrap {
    width: 100%;
  }

  /* ── Grid (default: CSS grid) ── */
  .ct-grid {
    display: grid;
    grid-template-columns: repeat(var(--slider-columns, 3), 1fr);
    gap: 1.5rem;
    align-items: stretch;
  }

  /* Featured first tile: span 2 columns */
  .ct-grid--featured .ct-tile--featured {
    grid-column: span 2;
  }

  /* Featured tile image: tile is 2× wider so use 2:1 to keep the same visual
     height as adjacent single-column tiles. */
  .ct-tile--featured .ct-card__image-wrap {
    aspect-ratio: 2 / 1;
  }

  /* Measurement anchor only — see the marker's comment in the markup. */
  .ct-section__edge {
    height: 0;
  }

  /* ── Tile ── */
  .ct-tile {
    display: flex;
    min-width: 0;
  }

  /* ── Card — matches category-product-card design ── */
  .ct-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 0.375rem;
    overflow: hidden;
    height: 100%;
    container-type: inline-size;
  }

  @media (min-width: 768px) {
    .ct-card {
      border-radius: 0.75rem;
    }
  }

  /* ── Inner wrapper — mirrors category-product-card__inner padding ── */
  .ct-card__inner {
    padding: 0 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    flex: 1;
  }

  @media (min-width: 768px) {
    .ct-card__inner {
      padding: 1.5rem;
      gap: 1.5rem;
    }
  }

  /* ── Media — full-bleed negative margins, square 1:1 ── */
  .ct-card__media {
    position: relative;
    width: calc(100% + 1rem);
    margin-inline: -0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
  }

  @media (min-width: 768px) {
    .ct-card__media {
      width: calc(100% + 3rem);
      margin-inline: -1.5rem;
    }
  }

  /* Image block — aspect ratio and overflow live here, matching __image in PCC */
  .ct-card__image-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: transparent;
  }

  .ct-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Featured image scales up from its bottom edge — transform-origin keeps the
     bottom pinned inside the overflow:hidden box, so only the top is clipped. */
  .ct-tile--featured .ct-card__image {
    transform: scale(1.2);
    transform-origin: bottom center;
  }

  .ct-card__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ct-card__placeholder .placeholder-svg {
    width: 60%;
    height: 60%;
    opacity: 0.4;
  }

  /* ── Bottom section — divider row + body, same as product card ── */
  .ct-card__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
  }

  .ct-card__top-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .ct-card__divider {
    width: 2rem;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }

  /* ── Body ── */
  .ct-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ct-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ct-card__title {
      font-size: 1.125rem;
      line-height: 120%;
    }
  }

  .ct-card__subheading {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.75;
  }

  @media (min-width: 768px) {
    .ct-card__subheading {
      font-size: 0.9375rem;
    }
  }

  .ct-card__description {
    margin: 0;
    margin-top: auto;
    opacity: 0.9;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ct-card__description {
      font-size: 1rem;
      line-height: 1.4;
    }
  }

  .ct-card__price {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
  }

  .ct-card__price-from {
    font-weight: 400;
  }

  /* ── Rating stars — same pattern as category-product-card ── */
  .ct-card__rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 0;
  }

  .ct-card__stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
  }

  .ct-card__stars-bg {
    color: rgba(0, 0, 0, 0.25);
  }

  .ct-card__stars-fill {
    position: absolute;
    inset: 0;
    color: #000000;
    width: calc((var(--rating, 0) / 5) * 100%);
    overflow: hidden;
    white-space: nowrap;
  }

  .ct-card__rating-count {
    opacity: 0.7;
    white-space: nowrap;
    font-size: 0.875rem;
  }

  /* ── Labels — same positioning as category-product-card__labels ── */
  .ct-card .category-product-card__labels {
    position: absolute;
    top: 0;
    left: 2rem;
    display: flex;
    gap: 0.375rem;
    z-index: 3;
    pointer-events: none;
  }

  .ct-card .category-product-card__label {
    display: flex;
    flex-direction: column;
    background: #000000;
    color: #ffffff;
    padding: 1.45rem 0.62rem 0.38rem 0.62rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Step label size down for narrow cards — matches PCC container query */
  @container (max-width: 235px) {
    .ct-card .category-product-card__labels {
      left: 0.625rem;
      gap: 0.19rem;
    }

    .ct-card .category-product-card__label {
      padding: 0.68rem 0.46194rem 0.27719rem 0.46194rem;
      font-size: 0.5rem;
      font-weight: 500;
    }
  }

  /* ═══════════════════════════════════════════════
     DESKTOP SLIDER MODE
  ═══════════════════════════════════════════════ */
  .ct-section[data-display-mode="slider"] .ct-grid-wrap {
    overflow: visible;
    width: 100%;
  }

  .ct-section[data-display-mode="slider"] .ct-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--slider-slide-gap);
    overflow-y: hidden;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    align-items: stretch;
  }

  @media (hover: hover) {
    .ct-section[data-display-mode="slider"] .ct-grid {
      cursor: grab;
    }
  }

  /* Each tile: sized so the next tile peeks into view. */
  .ct-section[data-display-mode="slider"] .ct-tile {
    flex: 0 0 var(--slider-card-width);
    min-width: 0;
    display: flex;
  }

  /* Featured tile: double width + one gap */
  .ct-section[data-display-mode="slider"] .ct-tile--featured {
    flex: 0 0 calc(var(--slider-card-width) * 2 + var(--slider-slide-gap));
  }

  /* In slider mode, featured column span has no meaning */
  .ct-section[data-display-mode="slider"] .ct-tile--featured {
    grid-column: auto;
  }

  /* ═══════════════════════════════════════════════
     TABLET (768–1023px)
  ═══════════════════════════════════════════════ */
  @media (min-width: 768px) and (max-width: 1023px) {
    .ct-section:not([data-display-mode="slider"]) .ct-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
    }

    /* Tablet: featured tile behaves like a regular card — no double-span, no scale */
    .ct-section:not([data-display-mode="slider"]) .ct-grid--featured .ct-tile--featured {
      grid-column: span 1;
    }

    /* Slider keeps the double-width featured tile, so it keeps the 2:1 ratio that
       matches a single-column tile's height. */
    .ct-section:not([data-display-mode="slider"]) .ct-tile--featured .ct-card__image-wrap {
      aspect-ratio: 1 / 1;
    }

    .ct-section:not([data-display-mode="slider"]) .ct-tile--featured .ct-card__image {
      transform: none;
    }
  }

  /* ═══════════════════════════════════════════════
     MOBILE (<768px) — mirrors category-product-grid mobile CSS
  ═══════════════════════════════════════════════ */
  @media (max-width: 767px) {
    /* Hide controls-row entirely when mobile is not slider — avoids phantom 2rem gap */
    .ct-section:not([data-mobile-display-mode="slider"]) .ct-controls-row {
      display: none;
    }

    /* Desktop slider + mobile grid: reset the left-offset back to a centered container */
    .ct-section[data-display-mode="slider"][data-mobile-display-mode="grid"] .ct-grid-wrap {
      overflow: visible;
    }

    .ct-section[data-display-mode="slider"][data-mobile-display-mode="grid"] .ct-grid {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: min(calc(100% - 2.5rem), var(--max-width-container, 100rem));
    }

    /* Desktop slider + mobile slider: the ct-grid-wrap already carries the left offset —
       reset ct-grid's own margin so there is no double-shift */
    .ct-section[data-display-mode="slider"][data-mobile-display-mode="slider"] .ct-grid {
      margin-left: 0;
      width: 100%;
      max-width: none;
    }

    /* Mobile Grid Mode — gap: 0.875rem row, 1rem col (matches PCC) */
    .ct-section[data-mobile-display-mode="grid"] .ct-grid {
      display: grid !important;
      grid-template-columns: repeat(var(--ct-mob-columns, 1), 1fr);
      gap: 0.875rem 1rem;
      overflow-x: visible;
    }

    .ct-section[data-mobile-display-mode="grid"] .ct-tile {
      flex: none;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    /* Mobile Slider Mode */
    .ct-section[data-mobile-display-mode="slider"] .ct-grid-wrap {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      max-width: none;
      overflow: visible;
    }

    .ct-section[data-mobile-display-mode="slider"] .ct-grid {
      display: flex !important;
      gap: var(--slider-slide-gap);
      overflow-y: hidden;
    }

    /* The featured tile drops to the same width (matches PCC highlight). */
    .ct-section[data-mobile-display-mode="slider"] .ct-tile,
    .ct-section[data-mobile-display-mode="slider"] .ct-tile--featured {
      flex: 0 0 auto;
      width: var(--slider-card-width-mobile);
      min-width: var(--slider-card-width-mobile);
      max-width: var(--slider-card-width-mobile);
    }

    /* Featured tile is single column on mobile — restore 1:1 image ratio */
    .ct-tile--featured .ct-card__image-wrap {
      aspect-ratio: 1 / 1;
    }

    .ct-tile--featured .ct-card__image {
      transform: none;
    }
  }

  /* ── Swiper migration ──────────────────────────────────────────────────
     The track is a <swiper-container> whenever slider is used at any breakpoint.
     Keep the host a plain block so the native .ct-grid grid/slider rules don't
     turn the host into a grid/flex (collapsing the shadow wrapper); force the
     wrapper into a grid at any breakpoint whose mode is grid (Swiper disabled). */
  swiper-container.ct-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* Slotted slides carry a definite height from the shadow tree, which stops them
     stretching to the tallest tile the way the native flex track did.
     align-self can't win against a definite height; releasing it can. */
  swiper-slide.ct-tile {
    height: auto;
  }

  @media (min-width: 768px) {
    /* grid desktop (+ slider mobile) */
    .ct-section[data-display-mode="grid"] .ct-grid::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--slider-columns, 3), minmax(0, 1fr));
      gap: 1.5rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
      align-items: stretch;
    }
    .ct-section[data-display-mode="grid"] .ct-tile {
      width: auto !important;
      margin: 0 !important;
    }
  }
  @media (max-width: 767px) {
    /* grid mobile (+ slider desktop) */
    .ct-section[data-mobile-display-mode="grid"] .ct-grid::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--ct-mob-columns, 1), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .ct-section[data-mobile-display-mode="grid"] .ct-tile {
      width: auto !important;
      margin: 0 !important;
    }
  }
/* END_SECTION:collection-tiles */

/* START_SECTION:collection (INDEX:14) */
.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;
  }

  /* Flat mode hides sold-out cards via CSS so paginated page counts stay intact.
     Grouped modes (auto/manual) skip sold-out products server-side instead — see the
     hide_out_of_stock handling in Liquid — so empty groups collapse without CSS. */
  [data-hide-out-of-stock="true"] .collection-flat__card:has(.category-product-card[data-available="false"]) {
    display: none !important;
  }

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

  /* Measurement anchor only — see the marker's comment in the markup. */
  .collection-section__edge {
    height: 0;
  }

  /* 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: one wrapper per group, each with its own grid */
  .collection-autogroup {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Restores the old grid row-gap between heading and cards */
  .collection-autogroup__group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-margin-top: var(--scroll-offset, 10rem);
  }

  .collection-autogroup__grid {
    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 {
    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__group:first-child .collection-autogroup__heading {
    padding-top: 0;
  }

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

  @media (max-width: 767px) {
    .collection-autogroup,
    .collection-autogroup__group {
      gap: 1rem;
    }

    .collection-autogroup__grid {
      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;
    }
  }

  /* Flat (paginated) mode */
  .collection-flat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(max(var(--card-min-width, 15.625rem), calc((100% - (var(--grid-columns, 4) - 1) * 1.5rem) / var(--grid-columns, 4))), 100%), 1fr));
    gap: 1.5rem;
  }

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

  .collection-pagination {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-grey-medium, #e9e9eb);
  }

  .collection-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .collection-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    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, 0.375rem);
    transition: background-color var(--motion-duration-fast, 200ms) ease, color var(--motion-duration-fast, 200ms) ease;
  }

  .collection-pagination__btn:hover {
    background: var(--section-text-color);
    color: var(--section-bg-color);
  }

  .collection-pagination__info {
    font-size: 0.875rem;
    color: var(--color-grey-dark, #6b6b6b);
  }

  /* 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);
    }
  }

  /* Anchor wrapper: spans the group so scroll-spy can measure it */
  .collection-group__anchor {
    width: 100%;
    scroll-margin-top: var(--scroll-offset, 10rem);
  }

  /* Out of flow so it adds no flex gap; static position = top of the group */
  .collection-group__anchor-alias {
    position: absolute;
    width: 0;
    height: 0;
    scroll-margin-top: var(--scroll-offset, 10rem);
  }

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

  .collection-group__inner {
    width: 100%;
  }

  .collection-group--slider .collection-group__controls.slider-controls--desktop {
    margin-right: max(var(--content-gap-current), 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;
    }
  }

  /* Arrows are the shared .slider-controls component; only the gap the mobile
     set keeps to the track below it is the section's own. */
  @media (max-width: 767px) {
    .collection-group__controls.slider-controls--mobile {
      margin-bottom: 1rem;
    }
  }

  /* Filters — the pill row itself is `.filter-pills` (styled in the
     filter-pills snippet); this only
     sets the Figma spacing between it and the product grid below. */
  .collection-group__filters {
    margin-bottom: 2rem;
  }

  @media (max-width: 767px) {
    .collection-group__filters {
      margin-bottom: 1.25rem;
    }
  }

  /* The pill track bleeds to both viewport edges so pills can be dragged past
     them instead of being clipped at the content column. Derived from the
     wrapper's own width, so it collapses to zero in the modes where the inner
     is already full-bleed. The pills keep their content-edge alignment via the
     slides-offset-before collection.ts measures against .collection-section__edge
     — padding on a Swiper host is dead space inside the shadow track, never a
     track inset. The section's overflow-x: hidden clips the bleed.
     Element selector to out-specify the snippet's own .filter-pills max-width. */
  swiper-container.collection-group__filters {
    margin-inline: calc(50% - 50vw);
    max-width: none;
  }

  /* 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
     ============================================ */
  /* No max-height here. Clamping a grid container does not cap its cards — the
     rows lay out regardless and simply overflow the clamped box, so every group
     with more than one viewport of rows drew on top of the next one. The
     viewport cap belongs on the card, which is where slider mode has it. */
  .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;
    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;
    }
    .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;
    }

    /* Slider desktop + grid mobile: restore the normal centered container
       (override the mobile edge-to-edge bleed rule below, which zeroes the left
       margin on mobile). Repeats .content-container's own formula so the group
       stays flush with the section header — a hardcoded gap drifts from it. */
    .collection-group--slider[data-mobile-display-mode="grid"] .collection-group__inner {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: min(calc(100% - 2 * var(--content-gap-current)), var(--max-width-container, 100rem));
      /* ...but drop the slider mode's clipping, or the re-centered inner would cut
         the filter row's bleed off at the content column. Nothing else here
         overflows: the products are a plain grid at this breakpoint. */
      overflow: visible;
    }

    /* Mobile Slider Mode — edge-to-edge scroll track. The inner drops its margins
       so it spans the viewport; the leading inset moves onto the products scroll
       container (and the non-scrolling children) so cards still start at the
       content edge but can be scrolled past the left edge. Covers both the pure
       slider and the grid-desktop + mobile-slider override. */
    .collection-group[data-mobile-display-mode="slider"] .collection-group__inner {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      max-width: none;
    }

    .collection-group[data-mobile-display-mode="slider"] .collection-group__controls.slider-controls--mobile {
      padding-right: var(--content-gap-current);
    }

    /* Only the scrolling tracks bleed edge to edge; the non-scrolling children
       keep the content-edge inset that the (now full-width) inner no longer
       provides. The filter row is a track too, so it's absent here — its inset
       is slides-offset-before. */
    .collection-group[data-mobile-display-mode="slider"] .collection-group__header,
    .collection-group[data-mobile-display-mode="slider"] .collection-group__no-results,
    .collection-group[data-mobile-display-mode="slider"] .collection-group__view-all {
      padding-inline-start: var(--content-gap-current);
    }

    /* No host-level track rules here: when mobile is a slider the container is
       always a <swiper-container> (ct_any_slider), so display/gap/padding on the
       host only fought the neutralizer — this selector out-specifies it, which
       turned the host into a native flex box and killed the leading inset. The
       shadow track handles layout; the 1rem gap is space-between="16" and the
       leading inset is slides-offset-before, synced to the content edge. */
    /* Same width for the highlight card: mobile shows one card plus the peek, so
       there is no room for it to span two. */
    .collection-group[data-mobile-display-mode="slider"] .collection-group__card-wrapper,
    .collection-group[data-mobile-display-mode="slider"] .collection-group__card-wrapper--highlight {
      flex: 0 0 auto;
      width: var(--slider-card-width-mobile);
      min-width: var(--slider-card-width-mobile);
      max-width: var(--slider-card-width-mobile);
    }

    /* 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
     ============================================ */
  /* Slider is a full-bleed scroll track at every size — the inner spans both
     viewport edges (layout from content-container--full-width in @layer base;
     the mobile display-mode overrides above are unlayered and win when they
     need to restore a centered container). The inner stays the scroll viewport
     (overflow: hidden); products scroll inside it. The leading inset moves onto
     the products track and the non-scrolling children below, so content starts
     at the content edge but scrolls past both edges. */
  .collection-group--slider .collection-group__inner {
    overflow: hidden;
  }

  .collection-group--slider .collection-group__products {
    display: flex;
    gap: 1.5rem;
    overflow-y: hidden;
    width: 100%;
    align-items: stretch;
  }

  /* Desktop: restore the content-edge inset on the scroll track and on the
     non-scrolling children of the full-bleed inner. (Mobile handles this in the
     max-width: 767px block per mobile display mode.) */
  @media (min-width: 768px) {
    .collection-group--slider .collection-group__products {
      padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
    }

    .collection-group--slider .collection-group__header,
    .collection-group--slider .collection-group__no-results,
    .collection-group--slider .collection-group__view-all {
      padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
    }
  }

  /* The leading inset lives on slides-offset-before now, not on the track's
     padding (the Swiper neutralizer zeroes that) — so the card-width percentage,
     which resolves against the un-padded host, has to subtract it or every card
     comes out one-third-of-an-inset too wide.

     Estimate only: createSectionSlider's `offsetProperty` overwrites this on the
     <swiper-container> with the offset it actually measured and handed to Swiper,
     so the two can't disagree. These values are what the cards use until that
     lands (and if it never does). */
  .collection-group {
    --slider-leading-inset: var(--content-gap-current);

    /* This family has no fill rules of its own, so it peeks unless a group's card
       count came in short — the per-group rule the markup emits carries an id
       selector, so it out-specifies this. */
    --slider-peek-active: 1;
    --slider-peek-active-mobile: 1;

    /* This section spaces its slides wider than the theme default (space-between
       16/24 on the hosts above), so the gap the card widths subtract — and the one
       the highlight card adds back — moves with it. */
    --slider-slide-gap: 1rem; /* 16px */
  }
  @media (min-width: 768px) {
    .collection-group {
      --slider-slide-gap: 1.5rem; /* 24px */
    }
  }
  @media (min-width: 768px) {
    .collection-group {
      --slider-leading-inset: var(--content-edge-offset, var(--content-gap-current));
    }
  }

  .collection-group--slider .collection-group__card-wrapper {
    flex: 0 0 var(--slider-card-width);
    display: flex;
    max-height: 100dvh;
  }

  /* Highlight card in slider - double width + 1 gap */
  .collection-group--slider .collection-group__card-wrapper--highlight {
    flex-basis: calc(var(--slider-card-width) * 2 + var(--slider-slide-gap));
  }

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

  /* ── Swiper migration ──────────────────────────────────────────────────
     The products container is a <swiper-container> whenever slider is used at
     any breakpoint. Keep the host a plain block so the native grid/slider rules
     don't turn the host into a grid/flex (which would collapse the shadow
     wrapper). Only loaded when this section is on the page, so the copy lives
     here alongside the section markup. */
  swiper-container.collection-group__products {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    padding-inline-start: 0 !important;
  }

  /* Slider slide widths — Swiper reads each slide's width via
     slides-per-view="auto" (the native rules set flex-basis only). */
  .collection-group--slider .collection-group__card-wrapper {
    width: var(--slider-card-width);
  }
  .collection-group--slider .collection-group__card-wrapper--highlight {
    width: calc(var(--slider-card-width) * 2 + var(--slider-slide-gap));
  }

  /* Slotted slides carry a definite height from the shadow tree, which stops
     them stretching to the tallest slide the way the native flex track did — a
     shorter card (typically the highlight one) ends up floating above the row.
     align-self can't win against a definite height; releasing it can. */
  swiper-slide.collection-group__card-wrapper {
    height: auto;
  }

  /* Grid fallback at grid breakpoints (Swiper disabled there). ::part(wrapper)
     only matches when the host is actually a swiper-container, so these are
     inert for a pure grid/grid group (plain <div>). */
  @media (min-width: 768px) {
    /* grid desktop (+ slider mobile) */
    .collection-group--grid .collection-group__products::part(wrapper) {
      display: grid !important;
      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;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
      align-items: stretch;
    }
    .collection-group--grid .collection-group__card-wrapper {
      width: auto !important;
      margin: 0 !important;
    }
    .collection-group--grid .collection-group__card-wrapper--highlight {
      grid-column: span 2;
    }
  }
  @media (max-width: 767px) {
    /* grid mobile (+ slider desktop) */
    .collection-group[data-mobile-display-mode="grid"] .collection-group__products::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--mobile-grid-columns, 2), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .collection-group[data-mobile-display-mode="grid"] .collection-group__card-wrapper {
      width: auto !important;
      margin: 0 !important;
    }
    .collection-group[data-mobile-display-mode="grid"][data-mobile-masonry="true"] .collection-group__card-wrapper--highlight {
      grid-column: span var(--mobile-grid-columns, 2);
    }
    .collection-group[data-mobile-display-mode="grid"][data-mobile-masonry="false"] .collection-group__card-wrapper--highlight {
      grid-column: span 1;
    }
  }

  /* 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);
  }

  /* ===== [MSC] Multi-Select Checkout: sticky bar ===== */

  .msc-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .msc-bar--visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .msc-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    flex-wrap: wrap;
  }

  .msc-bar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
  }

  .msc-bar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 100px;
    background: var(--msc-accent, #EBC82A);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }

  .msc-bar__label-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }

  .msc-bar__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .msc-bar__view-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--msc-accent, #EBC82A);
    font-weight: 500;
    text-align: left;
    line-height: 1.2;
  }

  .msc-bar__view-toggle:hover {
    text-decoration: underline;
  }

  .msc-bar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
  }

  .msc-bar__total {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
  }

  .msc-bar__checkout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: var(--msc-accent, #EBC82A);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
  }

  .msc-bar__checkout-btn:hover {
    opacity: 0.88;
  }

  .msc-bar__checkout-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* Bundle progress bar */
  .msc-bar__bundle-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .msc-bar__bundle-progress--unlocked {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
  }

  .msc-bar__bundle-progress--unlocked .msc-bar__bundle-text::before {
    content: '✓ ';
  }

  .msc-bar__bundle-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--btn-primary-bg);
  }

  /* Items panel (expanded list of selected products) */
  .msc-bar__items-wrap {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.75rem;
  }

  .msc-bar__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
  }

  .msc-bar__items[hidden] {
    display: none;
  }

  .msc-bar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
  }

  .msc-bar__item-img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #f7f7f7;
    flex-shrink: 0;
  }

  .msc-bar__item-title {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .msc-bar__item-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .msc-bar__item-remove {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.25rem;
    transition: color 0.15s;
    flex-shrink: 0;
  }

  .msc-bar__item-remove:hover {
    color: var(--msc-accent, #EBC82A);
  }

  @media (max-width: 639px) {
    .msc-bar__inner {
      flex-wrap: nowrap;
    }

    .msc-bar__label {
      font-size: 0.75rem;
    }

    .msc-bar__checkout-btn {
      padding: 0.5rem 0.875rem;
      font-size: 0.75rem;
    }

    .msc-bar__total {
      font-size: 0.875rem;
    }
  }
  /* ===== [PQV] Product Quick View modal ===== */

  .pqv-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .pqv-modal--open {
    display: flex;
  }

  .pqv-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
  }

  .pqv-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 960px;
    /* svh = small viewport height — stable on iOS as address bar shows/hides */
    max-height: min(90svh, 90vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }

  .pqv-modal__close {
    position: sticky;
    top: 0.75rem;
    float: right;
    margin: 0.75rem 0.75rem 0 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
  }

  .pqv-modal__close:hover {
    background: rgba(0, 0, 0, 0.15);
  }

  .pqv-modal__body {
    padding: 1rem 1.5rem 1.5rem;
    clear: both;
  }

  /* ── Mobile: bottom sheet ───────────────────────────────── */
  @media (max-width: 639px) {
    .pqv-modal {
      padding: 0;
      align-items: flex-end;
    }

    .pqv-modal__panel {
      max-width: none;
      width: 100%;
      /* Anchor to bottom — leave room for the safe-area (iPhone home bar) */
      max-height: min(92svh, 92vh);
      border-radius: 0.875rem 0.875rem 0 0;
      /* Push content above the iPhone home indicator */
      padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .pqv-modal__body {
      padding: 0.75rem 1rem 1.25rem;
    }

    /* Drag-handle hint */
    .pqv-modal__panel::before {
      content: '';
      display: block;
      width: 2.5rem;
      height: 0.25rem;
      background: rgba(0, 0, 0, 0.18);
      border-radius: 9999px;
      margin: 0.625rem auto 0;
    }
  }

  /* Quick view content layout */
  .pqv {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 640px) {
    .pqv {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

  /* Image gallery — Swiper slider */
  .pqv__gallery {
    position: relative;
    align-self: start;
  }

  @media (min-width: 640px) {
    .pqv__gallery {
      position: sticky;
      top: 0;
    }
  }

  .pqv__swiper {
    aspect-ratio: 1 / 1;
    max-height: 45svh;
    border-radius: 0.5rem;
    background: var(--color-grey-light, #f7f7f7);
    overflow: hidden;
    /* Swiper pagination dot colours */
    --swiper-pagination-color: #000000;
    --swiper-pagination-bullet-inactive-color: rgba(0, 0, 0, 0.25);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bottom: 8px;
  }

  .pqv__slide {
    height: 100%;
  }

  .pqv__main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* Mobile bottom-sheet: bleed gallery to panel edges so images fill full width */
  @media (max-width: 639px) {
    .pqv__gallery {
      /* Cancel the body's 1rem side padding and 0.75rem top padding */
      margin: -0.75rem -1rem 1rem;
      border-radius: 0.875rem 0.875rem 0 0;
      overflow: hidden;
    }

    .pqv__swiper {
      border-radius: 0;
      aspect-ratio: 1 / 1;
      max-height: 50svh;
    }
  }

  /* Product info */
  .pqv__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .pqv__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
  }

  @media (min-width: 640px) {
    .pqv__title {
      font-size: 1.5rem;
    }
  }

  .pqv__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .pqv__price-from {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.7;
  }

  .pqv__highlights {
    padding: 0.75rem 1rem;
    background: var(--color-grey-light, #f7f7f7);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .pqv__highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .pqv__highlights-list li {
    padding-left: 1.125rem;
    position: relative;
  }

  .pqv__highlights-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    background: #444;
    border-radius: 1px;
  }

  .pqv__description {
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.85;
  }

  .pqv__description p { margin: 0 0 0.75rem; }
  .pqv__description p:last-child { margin-bottom: 0; }

  .pqv__full-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.03em;
    margin-top: auto;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .pqv__full-link:hover {
    opacity: 0.88;
  }

  .pqv__loading {
    padding: 3rem;
    text-align: center;
    opacity: 0.5;
  }

  .pqv__error {
    padding: 2rem;
    text-align: center;
    opacity: 0.7;
  }

  /* ===== [PHM] Phone model help modal ===== */

  .phone-help-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .phone-help-modal--open {
    pointer-events: auto;
    opacity: 1;
  }

  .phone-help-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  /* Mobile: sheet slides up from bottom */
  .phone-help-modal__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.25rem 2.5rem;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  }

  .phone-help-modal--open .phone-help-modal__panel {
    transform: translateY(0);
  }

  /* Desktop: centred overlay */
  @media (min-width: 640px) {
    .phone-help-modal {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }

    .phone-help-modal__panel {
      position: relative;
      border-radius: 0.75rem;
      max-width: 600px;
      width: 100%;
      max-height: 80vh;
      bottom: auto;
      left: auto;
      right: auto;
      transform: scale(0.95) translateY(8px);
      transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
      opacity: 0;
    }

    .phone-help-modal--open .phone-help-modal__panel {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  .phone-help-modal__close {
    position: sticky;
    top: 0.5rem;
    float: right;
    margin: 0 0 0.5rem 0.5rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .phone-help-modal__close:hover {
    background: rgba(0, 0, 0, 0.15);
  }

  .phone-help-modal__body {
    clear: both;
  }

  .phone-help-modal__loading {
    text-align: center;
    padding: 2rem;
    opacity: 0.5;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:15) */
.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:16) */
.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:17) */
.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:18) */
.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;
  }

  /* Slider mode is a full-bleed scroll track at every size (both edges at the
     viewport). Repeats the content-container--full-width layout here — this
     unlayered rule wins over the generic .content-tiles__inner width, which
     would otherwise out-prioritise the @layer base modifier. The leading inset
     is restored on the scroll container so cards start at the content edge. */
  .content-tiles.content-tiles--slider .content-tiles__inner {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    overflow-x: visible;
  }

  @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__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.slider-controls--mobile {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
  }

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

  /* 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 (override the
       full-bleed slider rule above, which zeroes the margins). */
    .content-tiles--slider.content-tiles--mobile-grid .content-tiles__inner {
      margin-left: var(--content-gap-current);
      margin-right: var(--content-gap-current);
      width: calc(100% - 2 * var(--content-gap-current));
    }

    /* Mobile-slider override (desktop grid, mobile slider): drop the inner's
       margins on mobile so the track spans the viewport. The leading inset is
       restored by Swiper's slides-offset-before, not by CSS. (Pure sliders are
       already full-bleed at every size via the rule above.) */
    .content-tiles--mobile-slider .content-tiles__inner {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      max-width: none;
    }

    /* 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;
      flex-direction: unset !important;
      padding-inline-start: 0 !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 a horizontal
       slider. The inner bleeds edge to edge (rule above); the leading inset comes
       from slides-offset-before, which createSectionSlider re-syncs on resize at
       every breakpoint — so no padding-inline-start here either. */
    .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;
    }

    /* Width comes from the shared tiles rule in tiles-container-open. */
    .content-tiles--mobile-slider .content-tiles__card {
      max-width: 100% !important;
      scroll-snap-align: start;
    }

    /* A flick can never skip past more than one card (inert in grid modes) */
    .content-tiles--slider .content-tiles__card,
    .content-tiles--mobile-slider .content-tiles__card {
      scroll-snap-stop: always;
    }
  }

  /* Slider Layout */
  .content-tiles--slider .content-tiles__container {
    display: flex;
    gap: 1rem;
    width: 100%;
    padding-bottom: 0.25rem;
    /* No leading inset here: in slider mode the container is a <swiper-container>
       and the inset comes from slides-offset-before (static fallback in
       tiles-container-open, then JS-synced to the content edge by
       createSectionSlider's offsetReference). A padding-inline-start would stack
       on top of it and push the first card in twice — and because this rule also
       matches sibling tiles sections on the same page, it broke their full bleed
       too. */
  }

  .content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
  }

  /* ── Swiper grid fallback ──────────────────────────────────────────────
     When slider is used at any breakpoint the container is a <swiper-container>.
     At a breakpoint whose mode is grid, Swiper is disabled (enabled:false, set in
     tiles-container-open) and its shadow wrapper is forced into the same grid the
     native <div> uses. Targets ::part() because the wrapper/slides live in
     Swiper's shadow DOM; the !important resets undo Swiper's inline
     transform/width/margin left over from the slider breakpoint. */
  /* The native .content-tiles__container grid/slider rules were written for the
     plain <div>; on the Swiper host they turn the host itself into a grid/flex,
     which collapses the shadow wrapper's width (tiny tracks). Keep the host a
     plain block — real layout lives in ::part(wrapper). */
  swiper-container.content-tiles__container {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    /* The leading inset is Swiper's slides-offset-before, so a native
       padding-inline-start (possibly leaked from a sibling tiles section's
       stylesheet on the same page) must not stack on top of it. */
    padding-inline-start: 0 !important;
  }

  /* Reset Swiper's inline wrapper/slide sizing left over from the slider
     breakpoint, so the grid measures against the real container width (not
     Swiper's track width) and slides fill their cells. The literal fallbacks in
     var() guarantee a sane column count even if the custom prop doesn't cross
     the shadow boundary. */
  @media (max-width: 767px) {
    /* slider on desktop, static grid on mobile */
    .content-tiles--mobile-grid .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
  @media (min-width: 768px) {
    /* static grid on desktop, slider on mobile */
    .content-tiles--mobile-slider .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .content-tiles--mobile-slider .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .content-tiles--mobile-slider .content-tiles__container::part(wrapper) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
  }

  /* 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) {
  }

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

  }

  /* 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:19) */
.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:21) */
.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:24) */
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: 0.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;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
  }

  .footer__email-input {
    /* 999 vs the button's 1: input takes the slack, button wraps below the 12rem basis */
    flex: 999 1 12rem;
    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,
  .footer__submit-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.125rem;
  }

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

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

  /* Matches the input rather than .btn's 1rem, --radius-xs and uppercase */
  .footer__submit-btn {
    /* Grow so that once wrapped it fills its line, matching the input's width */
    flex: 1 1 auto;
    font-size: 0.875rem;
    border-radius: var(--radius-sm, 0.375rem);
    text-transform: none;
  }

  .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;
    /* Sits in the form's flex row, so give it its own line */
    flex-basis: 100%;
  }

  .footer__form-message[data-form-status='success'] {
    color: #4ade80;
  }

  .footer__form-message[data-form-status='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 {
      gap: 0.75rem;
    }
  }

  @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: column;
      align-items: baseline;
      gap: 0;
      flex: 1 1 0;
      min-width: 0;
    }

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

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

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

    .footer__form {
      gap: 0.75rem;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-spotlight (INDEX:26) */
.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 * var(--contained-margin-desktop, 2.5rem));
    margin-inline: auto;
  }

  @media (max-width: 1023px) {
    .header-spotlight--contained .header-spotlight__container {
      max-width: calc(100% - 2 * var(--contained-margin-mobile, 1.25rem));
    }
  }
  @media (max-width: 1023px) {
    .header-spotlight {
      margin-top: var(--section-margin-top-mobile, var(--section-margin-top, 0));
      margin-bottom: var(--section-margin-bottom-mobile, var(--section-margin-bottom, 0));
    }
  }
  .header-spotlight__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 34rem;
    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 *
    ):not(.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__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .header-spotlight__picture > img,
  .header-spotlight__image {
    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__picture > img {
    object-position: var(--media-object-position, center) !important;
  }

  .header-spotlight__picture--mobile-only {
    display: none;
  }

  @media (max-width: 1023px) {
    .header-spotlight__picture--mobile-only {
      display: block;
    }

    .header-spotlight__slide--mobile-image .header-spotlight__video-wrapper {
      display: none !important;
    }
  }

  .header-spotlight__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Uniform tint with a stronger edge behind the content (default). */
  .header-spotlight__overlay--tint {
    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%);
  }

  /* Gradient that fades from dark at the bottom to transparent at the top,
     keeping the area underneath the text readable. */
  .header-spotlight__overlay--gradient {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, calc(var(--overlay-opacity, 0.3) * 1.6)) 0%,
      rgba(0, 0, 0, var(--overlay-opacity, 0.3)) 30%,
      rgba(0, 0, 0, 0) var(--gradient-end-percentage, 70%)
    );
  }

  .header-spotlight__overlay--gradient-horizontal {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, calc(var(--overlay-opacity, 0.3) * 1.6)) 0%,
      rgba(0, 0, 0, var(--overlay-opacity, 0.3)) 30%,
      rgba(0, 0, 0, 0) var(--gradient-end-percentage, 70%)
    );
  }

  @media (min-width: 1024px) {
    .header-spotlight__overlay--gradient-horizontal {
      background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, calc(var(--overlay-opacity, 0.3) * 1.6)) 0%,
        rgba(0, 0, 0, var(--overlay-opacity, 0.3)) 30%,
        rgba(0, 0, 0, 0) var(--gradient-end-percentage, 70%)
      );
    }
  }

  .header-spotlight__content {
    position: absolute;
    left: calc(2.5rem + var(--content-left-offset, 0vw));
    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: calc(2.5rem + var(--content-left-offset, 0vw));
    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.25rem;
    padding: 0.5rem 1.25rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-size: 0.875rem;
    line-height: 1.1;
  }

  .header-spotlight__heading {
    margin: 0;
    font-family: var(--heading-font, Montserrat), sans-serif;
    font-size: clamp(
      calc(var(--heading-size-mobile, 28) * 1px),
      calc(
        var(--heading-size-mobile, 28) * 1px + (var(--heading-size-desktop, 64) - var(--heading-size-mobile, 28)) *
          ((100vw - 375px) / 1065)
      ),
      calc(var(--heading-size-desktop, 64) * 1px)
    );
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: var(--heading-color, inherit);
  }

  .header-spotlight__description {
    line-height: 1.4;
    margin-bottom: -0.5625rem;
  }

  /* Overwrite text-regular-normal on mobile for the description */
  @media (max-width: 1023px) {
    .header-spotlight__description {
      font-size: 1rem;
      line-height: 1.2;
    }
  }

  .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 var(--content-gap-current);
    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;
  }
  .header-spotlight__container[data-slide-height='natural'] .header-spotlight__viewport {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--hs-aspect-ratio, 16/9);
  }

  @media (max-width: 1023px) {
    .header-spotlight__viewport {
      height: var(
        --slider-height-mobile,
        calc(100svh - var(--header-group-height, 105px) - var(--spotlight-peek, 4.5rem))
      );
      max-height: none;
      /*
      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 {
      line-height: 1.1;
    }

    .header-spotlight__content {
      line-height: 1.2;
      padding: 1.25rem 0;
      max-width: calc(100% - 2 * var(--content-gap-current)) !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: var(--content-gap-current);
      right: auto;
      align-items: flex-start;
      text-align: left;
    }

    .header-spotlight__slide-content--mobile-right .header-spotlight__content {
      left: auto;
      right: var(--content-gap-current);
      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;
    }

    /* Mobile object-position needs higher specificity than the no-focal-point
       desktop rule above (which uses !important), otherwise the desktop
       setting wins on mobile. Applies to both the separate-mobile-image case
       (via <source media>) and the fallback case (same image both viewports),
       so merchants can position the same image differently per viewport. */
    .header-spotlight__slide:not(.header-spotlight__slide--use-focal-point) .header-spotlight__picture > 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;
    }

    .header-spotlight__cta {
      font-size: 0.875rem;
      line-height: 1.1;
    }

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

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

    .header-spotlight__nav--mobile-only,
    .header-spotlight__dots--mobile-only {
      display: none;
    }
  }

  @media (max-width: 1023px) {
    .header-spotlight__nav--desktop-only,
    .header-spotlight__dots--desktop-only {
      display: none;
    }
  }
/* END_SECTION:header-spotlight */

/* START_SECTION:header (INDEX:27) */
.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;
  }

  .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 {
    align-items: center;
    gap: 0.5rem;
  }

  .header-nav__localization--select {
    position: relative;
    gap: 0;
  }

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

  .header-nav__localization--select::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;
    display: none;
  }

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

  .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-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.
     z-index: 0 (not -1) — older iOS Safari (14/15) has a stacking-context bug
     where a `z-index: -1` child of a positive-z stacking ancestor escapes that
     ancestor's stacking context and renders behind the page. The dialog itself
     has `background: transparent` in animation mode, so when that bug fires the
     page content (breadcrumbs etc.) is visible through the menu. With z-index 0,
     tree order keeps the overlay below the inner panel — no escape, no bug. */
  .header-nav__mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    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. */

  /* 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;
    }

    /* `flex: 1` (flex-basis: 0) overrides any width on the container, so it fills the
       row and centers its image. Cap the image itself to control the mobile logo size. */
    .header-nav__logo-img {
      max-width: var(--header-logo-width-mobile, 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 {
      width: 2.5rem;
      height: 2.5rem;
      flex-shrink: 0;
    }

    .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;
      text-decoration: none;
      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;
    }
  }

  /* 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-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;
    border-bottom: 1px solid #DADADA;
  }

  .header-nav-mobile__accordion-label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    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:28) */
.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;
  }

  /* Slider mode is a full-bleed edge-to-edge scroll track: layout (inner
     full-bleed, leading inset on the scroll container) comes from the shared
     .content-tiles--slider rules in content-tiles.liquid. */

  @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;
    }
  }

  /* 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.slider-controls--mobile {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
  }

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

  /* 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;
    }

    /* Slider mode with mobile grid: symmetric margins are restored by the
       shared mobile-grid rules in content-tiles.liquid. */

    .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;
      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;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .highlights.content-tiles--slider .content-tiles__card {
    flex: 0 0 auto;
  }

  /* 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) {
  }

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

  }

  /* 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) {
    /* Round all four image corners — the card only clips the top two. */
    .highlights .content-tiles__card-image {
      border-radius: 0.375rem;
    }

    .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%;
    }
  }

  .content-tiles__card--profile:has(.content-tiles__card-image) .content-tiles__card-content {
    padding-left: 0rem;
  }

  /* 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;
  }

  /* When a card is expanded, stop siblings from stretching to match its height */
  .content-tiles__container--has-expanded {
    align-items: start;
  }
  /* …but they keep the height they had while everything was collapsed, set by JS
     from the stretched row — otherwise every card without a read-more shrinks to
     its own shorter content the moment a sibling expands. */
  .content-tiles__container--has-expanded .content-tiles__card {
    height: auto;
    min-height: var(--ct-collapsed-card-height, auto);
  }

  /* Body read-more truncation */
  .content-tiles__card-body--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .content-tiles__card-body-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--card-text-color, var(--section-text-color));
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    transition: opacity var(--motion-duration-fast, 200ms) var(--motion-ease-standard, ease);
  }

  .content-tiles__card-body-read-more:hover {
    opacity: 0.7;
  }

  .content-tiles__card-body-read-more-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  /* ── Swiper migration ──────────────────────────────────────────────────
     When display_mode is slider the container is a <swiper-container>. Keep the
     host a plain block so the native .content-tiles__container grid/slider rules
     don't turn the host into a grid/flex (which collapses the shadow wrapper).
     Real layout lives in ::part(wrapper). */
  swiper-container.content-tiles__container {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    /* The leading inset is Swiper's slides-offset-before, so a native
       padding-inline-start (possibly leaked from a sibling tiles section's
       stylesheet on the same page) must not stack on top of it. */
    padding-inline-start: 0 !important;
  }

  /* Same reason the `--has-expanded` align-items above can't do its job on a
     Swiper host: that host is a block, and the flex/grid row the cards actually
     sit in is the shadow wrapper. Without this, expanding one card stretches
     every other card in the track to match. */
  swiper-container.content-tiles__container--has-expanded::part(wrapper) {
    align-items: start;
  }

  /* mobile-grid (slider desktop, grid mobile): Swiper is disabled at <768 and
     its shadow wrapper is forced into a grid. Literal fallback keeps a sane
     column count even if the custom prop doesn't cross the shadow boundary. */
  @media (max-width: 767px) {
    .content-tiles--mobile-grid .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
/* END_SECTION:highlights */

/* START_SECTION:how-it-works-three-images (INDEX:29) */
/* Slider mode: full-bleed at every size — the inner spans both viewport
     edges. The non-scrolling children keep the content-edge inset via padding;
     the tiles track restores it as padding so tiles start at the content edge
     but scroll past both edges. */
  .how-it-works__inner:has(.how-it-works__content[data-desktop-mode="slider"]) {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    overflow-x: visible;

    .how-it-works__filters,
    .how-it-works__top-bar {
      padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
    }

    .how-it-works__navigation {
        margin-right: var(--content-edge-offset, var(--content-gap-current));
    }

    /* The track's leading inset is `slides-offset-before`, synced in JS against
       .how-it-works__edge — padding on a Swiper host would be dead space. */
  }



  .how-it-works {
    background-color: var(--section-bg-color, #ffffff);
    overflow-x: hidden;
  }

  .how-it-works__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  @media (max-width: 767px) {
    .how-it-works__inner {
      margin-left: var(--content-gap-current);
      margin-right: 0;
      width: calc(100% - var(--content-gap-current));
      max-width: none;
    }
    .how-it-works__navigation {
      margin-right: var(--content-gap-current);
    }
  }




  .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([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([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. Swiper re-measures on update(); a display:none
     slide drops out of its snap grid. */
  .how-it-works__tile[data-filtered="true"] {
    display: none;
  }

  /* Host neutralizer: the track's own grid/flex CSS lands on the swiper-container
     host and would shrink-wrap the shadow wrapper to tiny tracks. */
  swiper-container.how-it-works__tiles {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    padding-inline-start: 0 !important;
  }

  /* Slotted slides carry a definite height from the shadow tree, which fights
     the tile aspect ratio (height:auto is the only thing that releases it —
     align-self: stretch does not). */
  swiper-slide.how-it-works__tile {
    height: auto;
  }

  .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: always a slider. Viewport-sized cards, so they need no
     leading-inset compensation. Scoped to the slide so it out-specifies the base
     `width: 100%` below — the native track relied on flex-basis for that. */
  @media (max-width: 1023px) {
    swiper-slide.how-it-works__tile {
      width: 70vw;
      min-width: 225px;
      max-width: 322px;
    }
  }

  /* Desktop slider mode (only when desktop mode is slider AND we have more blocks than columns) */
  @media (min-width: 1024px) {
    /* Pre-hydration estimate of the leading inset; the JS overwrites it with the
       measured value. Subtracted below because `100%` now resolves against the
       un-inset host — the inset lives on slides-offset-before. */
    how-it-works-slider[data-desktop-overflow="true"] .how-it-works__tiles {
      --hiw-leading-inset: var(--content-edge-offset, var(--content-gap-current));
    }

    how-it-works-slider[data-desktop-overflow="true"] .how-it-works__tile {
      /* show `--desktop-cols` full tiles + a peek of the next */
      width: calc(
        (100% - var(--hiw-leading-inset, 0px) - (16px * (var(--desktop-cols, 3) - 1)) - 64px) /
          var(--desktop-cols, 3)
      );
    }

    /* Grid fallback where Swiper is disabled (fixed mode, or slider mode with
       nothing to scroll). ::part(wrapper) only matches a real swiper-container. */
    how-it-works-slider:not([data-desktop-overflow="true"]) .how-it-works__tiles::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--desktop-cols, 3), minmax(0, 1fr));
      gap: 16px;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
      align-items: stretch;
    }

    how-it-works-slider:not([data-desktop-overflow="true"]) .how-it-works__tile {
      width: auto !important;
      margin: 0 !important;
    }
  }

  .how-it-works__edge {
    height: 0;
  }

  .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;
    }
  }

  /* Arrows are the shared .slider-controls component; they inherit this color
     through currentColor. Its own band is 768px, this section's is 1024px —
     where the tiles stop overflowing — so the top bar says which side shows a
     set, and the component just draws it. */
  .how-it-works__navigation {
    display: none;
    color: var(--section-text-color, #000000);
  }

  @media (max-width: 1023px) {
    .how-it-works__top-bar[data-show-mobile="true"] .how-it-works__navigation {
      display: flex;
    }
  }

  @media (min-width: 1024px) {
    .how-it-works__top-bar[data-show-desktop="true"] .how-it-works__navigation {
      display: flex;
    }
  }
/* END_SECTION:how-it-works-three-images */

/* START_SECTION:icons-key-features (INDEX:30) */
.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;
    width: 100%;
  }

  .icons-key-features__description--align-left {
    text-align: left;
  }

  .icons-key-features__description--align-center {
    text-align: center;
  }

  .icons-key-features__description--align-right {
    text-align: right;
  }

  .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-display (INDEX:31) */
.image-display {
    width: 100%;
    box-sizing: border-box;
    line-height: 0; /* collapse whitespace below the picture element */
  }

  .image-display__link {
    display: block;
  }

  .image-display__picture {
    display: block;
    width: 100%;
  }

  /* Let the image set its own height — no cropping, no fixed aspect-ratio.
     The browser reads width/height attributes and reserves space before load. */
  .image-display__img {
    display: block;
    width: 100%;
    height: auto;
  }
/* END_SECTION:image-display */

/* START_SECTION:image-hotspots (INDEX:32) */
.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:33) */
.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: var(--image-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:34) */
/*
    Influencer-specific styles. Scoped to .content-tiles--influencer so the
    rules don't leak to other sections that share the .content-tiles class.
    Base layout (header, container, card sizing) lives in
    sections/content-tiles.liquid and applies on pages where that section
    is also rendered; this stylesheet defines the minimum needed for
    influencer to render correctly when used on its own. The arrows are the
    theme-wide .slider-control component, so they need nothing here.
  */

  /* Section spacing: padding-top/bottom/margin-top/bottom + mobile reduction */
  .content-tiles--influencer {
    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;
  }

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

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

  @media (max-width: 767px) {
    .content-tiles--influencer .content-tiles__inner {
      overflow-x: visible;
    }
    .content-tiles--influencer .content-tiles__inner > * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  /* Slider mode is a full-bleed edge-to-edge scroll track: layout (inner
     full-bleed, leading inset on the scroll container, mobile-grid margin
     restore) comes from the shared .content-tiles--slider rules in
     content-tiles.liquid. */

  /* Grid layout — keep a 250px minimum cell so cards never become cramped on narrow viewports */
  .content-tiles--influencer.content-tiles--grid .content-tiles__container {
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(15.625rem, calc((100% - (var(--grid-columns) - 1) * 1rem) / var(--grid-columns))), 1fr)
    );
  }

  .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%;
  }

  /* Mobile-grid: explicit N columns instead of the auto-fill default */
  @media (max-width: 767px) {
    .content-tiles--influencer.content-tiles--mobile-grid .content-tiles__container {
      grid-template-columns: repeat(var(--grid-columns-mobile), 1fr) !important;
    }
  }

  @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;
    }
  }

  /* Influencer's overlay gradient is shorter (40%) than content-tiles' (65%) */
  .content-tiles--influencer .content-tiles__card-overlay {
    height: 40%;
  }

  .content-tiles--influencer .content-tiles__card--feature {
    min-height: 25rem;
    max-height: 37.5rem;
    display: flex;
    flex-direction: column;
  }

  .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image {
    min-height: 25rem;
  }

  .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image {
    height: 100%;
    flex: 1;
    min-height: 25rem;
    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: 25rem;
    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: 1.5rem 1rem;
    color: white;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  .content-tiles--influencer .content-tiles__card--no-image {
    height: auto;
    min-height: 12.5rem;
  }

  .content-tiles--influencer .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--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: 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--influencer .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--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,
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-image,
    .content-tiles--influencer .content-tiles__card--feature.content-tiles__card--no-image .content-tiles__card-image {
      min-height: 21.25rem;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-heading {
      font-size: 1.5rem;
    }
    .content-tiles--influencer .content-tiles__card--feature .content-tiles__card-body {
      font-size: 0.9375rem;
    }
  }

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

  /* ── Profile Card Style ── */

  .content-tiles--card-profile .content-tiles__header-text {
    gap: 1.5rem;
  }

  .content-tiles--card-profile .content-tiles__subtitle {
    max-width: 60.625rem;
    line-height: 1.4;
  }

  .influencer__header-cta {
    align-self: flex-start;
  }

  .content-tiles--card-profile.content-tiles--grid .content-tiles__container {
    gap: 2rem;
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(13.75rem, calc((100% - (var(--grid-columns) - 1) * 2rem) / var(--grid-columns))), 1fr)
    );
  }

  .content-tiles--card-profile.content-tiles--slider .content-tiles__container {
    gap: 2rem;
  }

  .content-tiles__card--profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    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: 0.875rem;
    padding: 0;
    color: var(--card-text-color, var(--section-text-color));
  }

  .content-tiles__card-heading--profile {
    font-size: 1.375rem;
    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: 1rem;
    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: 1.5rem;
    }
    .content-tiles__card-heading--profile {
      font-size: 1.125rem;
    }
    .content-tiles__card-body--profile {
      font-size: 0.875rem;
    }
  }

  /* ── Swiper migration ──────────────────────────────────────────────────
     Container is a <swiper-container> whenever slider is used at any breakpoint.
     Keep the host a plain block so native .content-tiles__container grid/slider
     rules don't collapse the shadow wrapper; force the wrapper into a grid at
     any breakpoint whose mode is grid (Swiper is disabled there). */
  swiper-container.content-tiles__container {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    /* The leading inset is Swiper's slides-offset-before, so a native
       padding-inline-start (possibly leaked from a sibling tiles section's
       stylesheet on the same page) must not stack on top of it. */
    padding-inline-start: 0 !important;
  }

  @media (max-width: 767px) {
    /* slider desktop, grid mobile */
    .content-tiles--mobile-grid .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .content-tiles--mobile-grid .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
  @media (min-width: 768px) {
    /* grid desktop, slider mobile */
    .content-tiles--mobile-slider .content-tiles__container::part(wrapper) {
      display: grid !important;
      grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
      gap: 1rem;
      width: 100% !important;
      height: auto !important;
      transform: none !important;
    }
    .content-tiles--mobile-slider .content-tiles__card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      margin: 0 !important;
    }
  }
/* END_SECTION:influencer */

/* START_SECTION:large-content (INDEX:35) */
.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:media-gallery (INDEX:36) */
/* ─── Section container ───────────────────────────────── */

  .media-gallery {
    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);
    overflow-x: hidden;
  }

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

  /* Custom elements are inline by default; this one wraps block-level rows */
  media-gallery-section {
    display: block;
  }

  /* ─── Header ──────────────────────────────────────────── */

  .media-gallery__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .media-gallery__header-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .media-gallery__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .media-gallery__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 31.25rem;
  }

  @media (max-width: 767px) {
    .media-gallery__title {
      font-size: 1.5rem;
    }
  }

  /* ─── Track ───────────────────────────────────────────── */

  /* Slide widths come from the swiper-container's slides-per-view/breakpoints
     attributes (inline style per slide) — a CSS width here would fight them and
     reintroduce sub-pixel seams in the seamless layout. */
  .media-gallery__item {
    /* Height follows Swiper's computed width, capped so a wide/short viewport
       can't push the card past the screen (object-fit: cover crops the rest). */
    aspect-ratio: var(--gallery-aspect);
    max-height: var(--gallery-max-height);
    overflow: hidden;
    background: #111111;
  }

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

  .media-gallery__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Images and videos are natively draggable — the ghost image fights the swipe
       in browsers that start a drag before pointerdown's preventDefault lands. */
    -webkit-user-drag: none;
    user-select: none;
  }

  .media-gallery__media--placeholder {
    background: var(--color-grey-medium);
  }
/* END_SECTION:media-gallery */

/* START_SECTION:product-description-text (INDEX:41) */
.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;
}

@media (max-width: 767px) {
  .product-description-text__text {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
  }
}

.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:42) */
section.floating-add-to-cart {
    position: fixed !important;
    z-index: 35 !important;
    bottom: 0;
  }

  @media (min-width: 1024px) {
    section.floating-add-to-cart {
      bottom: 1rem;
    }
  }

  /* Hide while any header menu is open — covers desktop dropdowns,
     mobile drawer, and search flyout regardless of breakpoint. */
  body:has([data-header-nav-mobile-dialog][data-dialog-open]) section.floating-add-to-cart,
  body:has(.header-nav [data-header-nav-trigger][aria-expanded='true']) section.floating-add-to-cart,
  body:has(.header-nav [data-header-nav-mobile-toggle][aria-expanded='true']) section.floating-add-to-cart,
  body:has(.header-nav [data-header-nav-search-open][aria-expanded='true']) section.floating-add-to-cart,
  body:has(.header-nav-desktop-overlay[data-overlay-open]) section.floating-add-to-cart {
    display: none !important;
  }

  /* Lift the Sales Pop notification above the floating bar while it's on-screen.
     The bar carries `translate-y-0` while visible. We use `margin-bottom` (additive)
     instead of overriding `bottom` so the app keeps managing each popup's own position
     — overriding `bottom` collapsed every popup onto one spot, stacking them on top of
     each other. `!important` only outweighs the app's scoped margin, if any.
     `--floating-add-to-cart-height` is published live by the section's controller
     (its rendered height varies with the title/variant block/breakpoint); we add the
     bar's bottom gap (1rem on desktop, 0 on mobile) plus 16px breathing room. The
     fallbacks match the prior hardcoded heights in case the script hasn't run yet. */
  body:has(section.floating-add-to-cart.translate-y-0) .ak-master-sales-pop[data-popup-state='open'] {
    margin-bottom: calc(var(--floating-add-to-cart-height, 96px) + 4px) !important;
  }

  @media (max-width: 460px) {
    body:has(section.floating-add-to-cart.translate-y-0) .ak-master-sales-pop[data-popup-state='open'] {
      margin-bottom: calc(var(--floating-add-to-cart-height, 104px) + 1rem + 4px + 48px) !important;
    }
  }
  @media (max-width: 460px) {
    body:has(.back-to-top) .ak-master-sales-pop[data-popup-state='open'] {
      margin-bottom: 60px !important;
    }
  }

  @media (min-width: 1024px) {
    body:has(section.floating-add-to-cart.translate-y-0) .ak-master-sales-pop[data-popup-state='open'] {
      margin-bottom: calc(var(--floating-add-to-cart-height, 104px) + 1rem + 4px) !important;
    }
  }
/* END_SECTION:product-floating-add-to-cart */

/* START_SECTION:product-header-default (INDEX:43) */
/* Card labels overlaying the media — same chip style as category-product-card / activity-teaser tag */
  .product-header__labels {
    position: absolute;
    top: 0;
    left: 1rem;
    display: flex;
    gap: 0.375rem;
    z-index: 4;
    pointer-events: none;
  }

  .product-header__label {
    display: flex;
    flex-direction: column;
    background: #000000;
    color: #ffffff;
    padding: 1.71rem 0.677rem 0.406rem 0.677rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 0 0 var(--radius-xs, 0.25rem) var(--radius-xs, 0.25rem);
    white-space: nowrap;
    box-sizing: border-box;
  }
/* END_SECTION:product-header-default */

/* START_SECTION:product-header-detailed (INDEX:44) */
.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:46) */
.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 (max-width: 1023px) {
    .product-showcase__image-column--hidden-mobile {
      display: none;
    }
  }

  @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: var(--content-gap-current);
    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) — the row itself is `.filter-pills` (a <swiper-container>,
     styled in the filter-pills snippet); this only breaks it out of the content
     padding for an edge-to-edge track. No padding to put the pills back on the
     content edge: on a Swiper host that is dead space inside the shadow track, so
     the inset is slides-offset-before, measured in product-showcase.ts against
     .product-showcase__header. max-width overrides the snippet's own 100%, which
     would otherwise clamp this stretched flex item back to the content width. */
  swiper-container.product-showcase__filters {
    margin-left: calc(-1 * var(--content-pad-x));
    margin-right: calc(-1 * var(--content-pad-x));
    max-width: 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:47) */
.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:49) */
.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:50) */
.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;
    text-transform: var(--btn-chip-text-transform, uppercase);
    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:52) */
.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;
      scroll-snap-stop: always; /* a flick can never skip past more than one item */
      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:53) */
.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;
  }

  /* The gap between pills comes from the host's space-between attribute — this
     host has a single layout child (Swiper's shadow track).

     flex-grow fills the row instead of shrink-wrapping the pills: the leading
     offset extends Swiper's scroll range without widening the host, so a
     shrink-wrapped host counts it as overflow and unhides the arrows — which then
     hold the leading edge, so the offset drops to 0, the track fits again, and the
     arrows hide. That loop settled with no leading inset at all. */
  .sticky-menu__scroll {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
  }

  /* Swiper slotted slides default to width:100%; sticky-menu pills must size to
     their content so multiple fit per view. */
  .sticky-menu__slide {
    width: fit-content !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  /* Fixed gap after the last pill, so it doesn't end flush against the next arrow
     or the viewport edge. A margin and not slides-offset-after: Swiper's
     virtualSize is max(content, host) + offsetAfter, so a trailing offset always
     leaves a second snap on a track that fits — which reads as overflow and
     unhides the arrows. The margin widens the last slide instead, so a fitting
     track stays locked. */
  .sticky-menu__slide:last-child .sticky-menu-link {
    margin-inline-end: 16px;
  }

  .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;
  }

  /* Full-bleed scroll track at every size: the inner spans both viewport edges
     (layout from content-container--full-width in @layer base). A label or nav
     controls hold the leading edge, so the inner keeps the content-edge inset
     via its own padding — items stop at the label instead of sliding under it.
     With neither, the inner sits flush and the slider measures its own leading
     offset against .sticky-menu-section__edge instead, so items start at the
     content edge but can be scrolled all the way past the viewport edge. */
  .sticky-menu__inner {
    padding-inline-start: var(--content-edge-offset, var(--content-gap-current));
  }

  /* Mobile: no prev/next, touch scroll only. With the controls gone, a label is
     the only thing that can hold the leading edge. */
  @media (max-width: 767px) {
    .sticky-menu__nav-wrap {
      display: none !important;
    }

    .sticky-menu__inner:not(:has(.sticky-menu__label)) {
      padding-inline-start: 0;
    }
  }

  /* Tablet and up: the controls only unhide when the track overflows, so
     [hidden] is what says whether they actually hold the leading edge. When
     they don't, the inner goes flush and the slider's measured offset takes
     over — the pills stay on the content edge but can be dragged past the
     viewport edge. Swiper re-measures on the resize this padding change causes,
     so the handover happens on its own. */
  @media (min-width: 768px) {
    .sticky-menu__nav-wrap {
      display: flex;
    }

    .sticky-menu__inner:not(:has(.sticky-menu__label)):not(:has(.sticky-menu__nav-wrap:not([hidden]))) {
      padding-inline-start: 0;
    }
  }
/* END_SECTION:sticky-menu */

/* START_SECTION:story-cards (INDEX:54) */
/* ─── Section container ───────────────────────────────── */

  .story-cards {
    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);
    overflow-x: hidden;
    box-sizing: border-box;
  }

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

  /* ─── Header ──────────────────────────────────────────── */

  .story-cards__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
  }

  .story-cards__header-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .story-cards__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .story-cards__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 31.25rem;
  }

  @media (max-width: 767px) {
    .story-cards__title {
      font-size: 1.5rem;
    }
  }

  /* ─── Header actions (CTA + nav controls) ────────────── */

  .story-cards__header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .story-cards__header-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    border-radius: 0.25rem;
    white-space: nowrap;
    transition: opacity 0.2s;
  }

  .story-cards__header-cta--primary {
    color: #ffffff;
    background: var(--section-text-color, #000000);
    border: 1.5px solid var(--section-text-color, #000000);
  }

  .story-cards__header-cta--secondary,
  .story-cards__header-cta--outline {
    color: var(--section-text-color, #000000);
    background: transparent;
    border: 1.5px solid currentColor;
  }

  .story-cards__header-cta:hover {
    opacity: 0.7;
  }

  /* Arrows are the shared .slider-controls component; the per-breakpoint
     opt-out rides on its hide_desktop / hide_mobile params. */

  @media (max-width: 767px) {
    .story-cards__header-actions {
      gap: 0.5rem;
    }
  }

  /* ─── Slider inner ────────────────────────────────────── */

  /* Full-bleed scroll track at every size (both edges at the viewport).
     Repeats the content-container--full-width layout here — this unlayered
     rule wins over the generic section rules, which would otherwise
     out-prioritise the @layer base modifier. The leading inset is restored
     on the scroll container so cards start at the content edge. */
  .story-cards__inner {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    overflow-x: visible;
  }

  /* ─── Container (generated by tiles-container-open) ──── */

  /* Swiper owns the track (gap via space-between, leading inset via
     slides-offset-before synced in JS). Slides top-align. */
  .story-cards__inner .content-tiles__container {
    width: 100%;
    max-width: none;
  }

  .story-cards__inner .content-tiles__container::part(wrapper) {
    align-items: flex-start;
  }

  /* ─── Card sizing — mirrors content-tiles base formulas ─ */

  .story-cards__card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
  }

  /* Slides are spaced 24px from 768px up (swiper_space_between_desktop), so the gap
     the shared card width subtracts moves with them. */
  @media (min-width: 768px) {
    .story-cards__inner .content-tiles__container {
      --slider-slide-gap: 1.5rem;
    }
  }

  /* !important to out-rank the shared tiles rule, which also matches these cards
     (they carry .content-tiles__card) — story-cards sizes its own, uncapped. */
  .story-cards__inner .content-tiles__container .story-cards__card {
    width: var(--slider-card-width) !important;
    flex: 0 0 var(--slider-card-width) !important;
    max-width: none !important;
  }

  @media (max-width: 767px) {
    /* Mobile shows one card plus the peek. This used to hardcode a 1.15 divisor and
       a 1rem gap, which is why it peeked more than its siblings. */
    .story-cards__inner .content-tiles__container .story-cards__card {
      width: var(--slider-card-width-mobile) !important;
      flex: 0 0 var(--slider-card-width-mobile) !important;
      max-width: none !important;
    }
  }

  /* ─── Video trigger button ────────────────────────────── */

  .story-cards__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
  }

  /* ─── Card media (portrait video/image area) ──────────── */

  .story-cards__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
  }

  .story-cards__card-video,
  .story-cards__card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .story-cards__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-grey-medium, #d9d9d9);
  }

  .story-cards__card-name {
    position: absolute;
    top: 3.125rem;
    left: 0.875rem;
    right: 0.875rem;
    font-family: var(--story-card-name-font, var(--font-primary--family, inherit));
    font-size: 4rem;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
    color: var(--story-card-name-color, #ffffff);
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: break-word;
    pointer-events: none;
  }

  @media (max-width: 1199px) {
    .story-cards__card-name {
      font-size: 3rem;
    }
  }

  @media (max-width: 767px) {
    .story-cards__card-name {
      font-size: 2.25rem;
    }
  }

  @media (max-width: 479px) {
    .story-cards__card-name {
      font-size: 1.875rem;
    }
  }

  /* ─── Below-card info panel ───────────────────────────── */

  .story-cards__info {
    padding: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .story-cards__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .story-cards__meta-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-style: italic;
    font-weight: 600;
    text-transform: uppercase;
    margin: 10px 0;
    color: var(--card-text-color, #000);
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
  }

  .story-cards__meta-sep {
    font-size: 0.75rem;
    opacity: 0.4;
  }

  /* Shared "trip" label typography — card meta row and popup header */
  .story-cards__meta-trip,
  .story-cards__popup-trip {
    font-family: var(--story-card-trip-font, inherit);
    font-size: 1.5rem;
    font-style: italic;
    text-transform: uppercase;
    color: #000000;
    margin-left: auto;
    text-align: right;
    padding-right: 10px;
  }

  .story-cards__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Richtext prose spacing inside the desc (short_intro outputs <p> tags) */
  .story-cards__desc p {
    margin: 0 0 0.5em;
  }

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

  .story-cards__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--section-text-color);
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    transition: opacity 200ms ease;
    align-self: flex-start;
    margin-top: 0.25rem;
  }

  .story-cards__read-more:hover {
    opacity: 0.7;
  }

  /* ─── Popup ───────────────────────────────────────────── */

  .story-cards__popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
  }

  .story-cards__popup-trip {
    line-height: 1;
  }

  .story-cards__popup[hidden] {
    display: none;
  }

  .story-cards__popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    cursor: pointer;
  }

  .story-cards__popup-dialog {
    /* --gallery-per-view is set inline per popup from gallery_slides_desktop
       (single source of truth for both the swiper's peek amount and the
       desc width below, which "spans 2 items") */
    position: relative;
    background: #ffffff;
    width: min(90vw, 90rem);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 0.375rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
  }

  /* Scrollable body — close button sits above this in the dialog stacking context */
  .story-cards__popup-dialog-body {
    overflow-y: auto;
    overflow-x: clip;
    flex: 1;
  }

  .story-cards__popup-close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s;
    padding: 0;
  }

  .story-cards__popup-close:hover {
    background: rgba(0, 0, 0, 0.65);
  }

  /* ─── Popup gallery ───────────────────────────────────── */

  .story-cards__popup-gallery {
    /* Clips the scroll track to the dialog's rounded top corners */
    overflow: hidden;
    border-radius: 0.375rem 0.375rem 0 0;
  }

  /* no gap — items butt up against each other; peek amount (gallery_slides_mobile/
     desktop in the Liquid above, or 1 for a single item) and swipe/drag behavior
     come from the swiper-container's slides-per-view/breakpoints attributes, which
     size each swiper-slide via inline style — width is intentionally not set here,
     since a CSS override would fight that inline style and reintroduce sub-pixel
     seams. Hairline seams between slides are handled on the swiper-container:
     round-lengths snaps widths to whole CSS px, and space-between="-1" overlaps
     adjacent slides by 1px so the shared boundary can't antialias into a gap on
     fractional-devicePixelRatio displays (object-fit: cover hides the extra crop).
     A CSS media-width bleed can't do this — .popup-gallery-item's overflow:hidden
     clips it at the item edge before it reaches the seam. */
  .story-cards__popup-gallery-item {
    /* width:height 1:2 — height follows Swiper's computed width, not a fixed
       value, capped so wide/short viewports can't stretch it past the dialog
       (object-fit: cover on the media crops the rest). */
    aspect-ratio: 1 / 2;
    max-height: 80vh;
    overflow: hidden;
    background: #111111;
  }

  .story-cards__popup-gallery-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ─── Popup content ───────────────────────────────────── */

  .story-cards__popup-content {
    --popup-content-padding: 1.5rem;
    padding: var(--popup-content-padding);
  }

  .story-cards__popup-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .story-cards__popup-name {
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .story-cards__popup-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  @media (min-width: 768px) {
    .story-cards__popup-desc {
      /* spans 2 gallery items */
      max-width: calc(
        (100% + 2 * var(--popup-content-padding)) * 2 / var(--gallery-per-view, 3.2) - var(--popup-content-padding)
      );
    }
  }

  /* Richtext prose spacing inside popup (story_content outputs <p>, <ul>, etc.) */
  .story-cards__popup-desc p {
    margin: 0 0 0.875em;
  }

  .story-cards__popup-desc p:last-child {
    margin-bottom: 0;
  }

  .story-cards__popup-desc ul,
  .story-cards__popup-desc ol {
    margin: 0 0 0.875em;
    padding-left: 1.375rem;
  }

  .story-cards__popup-desc li {
    margin-bottom: 0.25em;
  }

  .story-cards__popup-desc strong {
    font-weight: 700;
  }

  .story-cards__popup-desc em {
    font-style: italic;
  }

  /* ─── Popup video ─────────────────────────────────────── */

  .story-cards__popup-video-wrap {
    margin-top: 1.5rem;
    /* full-bleed to the dialog edges */
    margin-inline: calc(-1 * var(--popup-content-padding));
    overflow: hidden;
    background: #111;
  }

  .story-cards__popup-video {
    display: block;
    width: 100%;
    max-height: 35rem;
    object-fit: cover;
  }

  /* ─── Popup product slider ────────────────────────────── */

  .story-cards__popup-products {
    margin-top: 1.5rem;
    /* Bleed past the content padding so cards scroll to the dialog edge; the
       first/last card's inset comes from the slider's slides-offset-* attributes,
       since padding on a Swiper host would clip the shadow track. */
    margin-left: calc(-1 * var(--popup-content-padding));
    margin-right: calc(-1 * var(--popup-content-padding));
    overflow: hidden;
  }

  /* Divider above products when the story has no video */
  .story-cards__popup-products--divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .story-cards__popup-products-headline {
    margin: 0 var(--popup-content-padding) 1rem;
    color: #000;
    font-family: 'Gotham Pro', sans-serif;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
  }

  /* Grid group spacing assumes page context — neutralize inside the popup */
  .story-cards__popup-products .category-product-grid {
    margin-bottom: 0;

    /* The track bleeds past BOTH popup insets (see the negative margin-inline
       above), so the card-width percentage resolves against the full dialog
       width. `--slider-leading-inset` defaults to the page's single leading
       inset, which under-compensates here and left the cards ~15px too wide at
       mobile. Derived from the same token as the padding — and as the
       `slides_offset` values passed to category-product-slider — so the three
       can't drift. Out-specifies the (0,1,0) defaults in
       category-product-grid.liquid at every breakpoint, and survives that
       section's `offsetProperty` write because this slider has no
       .category-product-grid-section to measure against, so nothing is measured
       here — its offsets are the static slides_offset params above. */
    --slider-leading-inset: calc(2 * var(--popup-content-padding));
  }

  .story-cards__popup-products-controls {
    margin-bottom: 1rem;
    /* __inner has no right inset, so keep the buttons off the dialog edge */
    padding-right: var(--popup-content-padding);
  }

  .story-cards__popup-product-card.category-product-card {
    border-radius: 0.3125rem;
  }

  /* ─── Mobile popup overrides ──────────────────────────── */

  @media (max-width: 767px) {
    .story-cards__popup {
      padding: 0;
      align-items: flex-end;
    }
    .story-cards__popup-dialog {
      width: 100%;
      max-height: 90vh;
      max-height: 90dvh;
      border-radius: 0.75rem 0.75rem 0 0;
    }
    .story-cards__popup-content {
      --popup-content-padding: 1rem;
    }
    .story-cards__popup-name {
      font-size: 1.375rem;
    }
    .story-cards__popup-products-headline {
      font-size: 1.5rem;
    }
  }
/* END_SECTION:story-cards */

/* START_SECTION:team-athletes-brand-grid (INDEX:55) */
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: var(--content-gap-current);
    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 (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;
  }

  /* Arrows are the shared .slider-controls component. Its own band is 768px;
     this section's is 1024px — where its card count switches from
     grid-columns-mobile to grid-columns-desktop — so the "do the items overflow
     the columns at this width" answer stays here, one rule per side. The slider
     still hides the set through [hidden] when nothing actually overflows. */
  .team-athletes-brand-grid__controls {
    display: none;
  }

  @media (max-width: 1023px) {
    team-athletes-brand-grid-section[data-nav-show-mobile='true']
      .team-athletes-brand-grid__controls:not([hidden]) {
      display: flex;
    }
  }

  @media (min-width: 1024px) {
    team-athletes-brand-grid-section[data-nav-show-desktop='true']
      .team-athletes-brand-grid__controls:not([hidden]) {
      display: flex;
    }
  }

  @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);
    width: 100%;
    padding-bottom: 4px;
  }

  .team-athletes-brand-grid--slider .team-athletes-brand-grid__card {
    flex: 0 0 var(--slider-card-width);
    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 */

/* START_SECTION:video-guide (INDEX:57) */
.video-guide {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

.video-guide__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
}

.video-guide__title {
  margin: 0;
}

.video-guide__media {
  position: relative;
  --aspect-ratio: var(--desktop-aspect-ratio, 1.7778);
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  /* Capping width rather than height keeps the ratio, so nothing is cropped */
  max-width: calc(70vh * var(--aspect-ratio));
  margin-inline: auto;
  border-radius: 0.3125rem;
  overflow: hidden;
  background-color: #000000;
}

.video-guide__video-wrapper {
  position: absolute;
  inset: 0;
}

.video-guide__video-wrapper--mobile {
  display: none;
}

.video-guide__video,
.video-guide__embed,
.video-guide__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-guide__video {
  object-fit: cover;
}

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

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

  .video-guide__inner {
    padding: 0 1.25rem;
  }

  .video-guide__media {
    --aspect-ratio: var(--mobile-aspect-ratio, 1.7778);
  }

  .video-guide__video-wrapper--desktop:not(.video-guide__video-wrapper--fallback) {
    display: none;
  }

  .video-guide__video-wrapper--mobile {
    display: block;
  }
}

/* Fake fullscreen while a phone is held in landscape (toggled by JS) */
.video-guide__media--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}

.video-guide__media--fullscreen .video-guide__video {
  object-fit: contain;
}

/* Same look as the story-cards popup close */
.video-guide__close {
  display: none;
  position: absolute;
  top: max(0.625rem, env(safe-area-inset-top));
  right: max(0.625rem, env(safe-area-inset-right));
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s;
}

.video-guide__close:hover {
  background: rgba(0, 0, 0, 0.65);
}

.video-guide__media--fullscreen .video-guide__close {
  display: flex;
}

/* Landscape screen, so the landscape cut even below 768px */
.video-guide__media--fullscreen .video-guide__video-wrapper--desktop {
  display: block;
}

.video-guide__media--fullscreen .video-guide__video-wrapper--mobile {
  display: none;
}
/* END_SECTION:video-guide */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:58) */
.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:59) */
.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: 13px;
      padding: 0 7px 4.3px 7px;
      border-radius: 0 0 var(--radius-xs, 0.25rem) var(--radius-xs, 0.25rem);
    }

    .header-nav-activity-item__tag-spacer {
      height: 19px;
    }

    .header-nav-activity-item__tag-text {
      font-size: 11.5px;
      font-weight: 600;
    }
  }
/* END_BLOCK:header-nav-activities */

/* START_BLOCK:header-nav-bottom-link (INDEX:61) */
.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:62) */
/* 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:63) */
/* ═══════════════════════════════════════════════
     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:64) */
/* 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:65) */
/* 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;
    /* Stretch cards and force equal row heights so that when any title wraps to a
       second line, every card grows to match the tallest one. */
    align-items: stretch;
    grid-auto-rows: 1fr;
    align-self: stretch;
    width: 100%;
  }

  /* Manual blocks are wrapped by Shopify in a `.shopify-block` div, which becomes the
     actual grid child. Make that wrapper stretch and let the card fill it, so equal
     row heights reach the card (list mode renders <a> directly and needs no wrapper). */
  .header-nav-image-menu__grid > .shopify-block {
    display: flex;
    min-width: 0;
  }

  .header-nav-image-menu__grid > .shopify-block > .header-nav-image-menu-item {
    flex: 1 1 auto;
    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:66) */
.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;
  }

  /* Hidden states collapse the whole Shopify block wrapper, so the box leaves no
     column, divider, or gap: scheduled off (all sizes), or hidden on mobile/tablet
     (below the desktop nav breakpoint). */
  .shopify-block:has(> .header-nav-info-box--scheduled-off) {
    display: none;
  }

  @media (max-width: 89.9375rem) {
    .shopify-block:has(> .header-nav-info-box--hide-mobile) {
      display: none;
    }
  }

  .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:67) */
.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:68) */
.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;
  }

  /* Invisible hover bridge between the trigger text and the position:fixed
     flyout below. Without this, the small vertical gap inside the bar lets
     the pointer "fall through" and fire pointerleave on the host, causing
     the flyout to flicker open/closed. */
  .header-nav-section__trigger::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
  }

  .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;
  }

  .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%;
  }

  /* Feature tile title position is controlled at the Menu Dropdown level (data-tile-variant)
     and applied to every tile. Default (title_above) follows DOM order; caption_below flips
     the title after the media via `order` (honored by both flex and grid auto-placement). */
  .header-nav-section__layout[data-tile-variant='caption_below'] .header-nav-tile__media {
    order: 0;
  }
  .header-nav-section__layout[data-tile-variant='caption_below'] .header-nav-tile__title {
    order: 1;
  }

  .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);
      row-gap: 24px;
      column-gap: 8px;
      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;
    }

    /* Collapse the row-gap only between consecutive accordions, so their
       borders sit flush; gap with other blocks is preserved. */
    .header-nav-section__layout--multi_column > .header-nav-mobile__accordion + .header-nav-mobile__accordion {
      margin-top: -24px;
    }

    /* 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;
    }

    /* Paired tiles (immediately adjacent in DOM) → both span 1, side by side.
       A JS-marked solo tile is excluded so the rule below can stretch it.
       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):not(:has(.header-nav-tile--solo-row)) {
      grid-column: span 1;
    }

    /* A tile left alone in its row (marked by JS — see markSoloTiles in header.ts)
       spans the full width so its media covers the whole row. CSS alone can't tell a
       genuine odd-one-out from the second of a pair, hence the JS marker. */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile--solo-row) {
      grid-column: span 2;
    }

    /* Keep the stretched tile's image at a normal tile's height while its width fills
       the row: the doubled-width ratio cancels the doubled column span. (object-fit:
       cover on the img crops to the wider box.) */
    .header-nav-section__layout--multi_column > .shopify-block:has(.header-nav-tile--solo-row) .header-nav-tile__media {
      aspect-ratio: var(--header-nav-tile-aspect-stretched, 66 / 40);
    }

    .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 {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }
  }

  /* 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-left: 40px;
      border-left: 1px solid var(--color-grey-medium, #e9e9eb);
    }

    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block:first-child {
      padding-left: 0;
      border-left: none;
    }

    /* No divider indent in the first column, so shrink it by that 41px instead —
       otherwise its content renders wider than the same block further right. */
    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block:first-child:has(.header-nav-tile) {
      flex-basis: 279px;
      aspect-ratio: 279 / 410;
    }

    .header-nav-section__layout--multi_column.header-nav-section__layout--dividers > .shopify-block:first-child:has(.header-nav-info-box) {
      width: 255px;
    }
  }
/* END_BLOCK:header-nav-section */

/* START_BLOCK:header-nav-story-dropdown (INDEX:69) */
.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);
    width: 100%;
    max-width: 100%;
    padding-bottom: 4px;
  }

  .header-nav-story-scroll__item {
    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:70) */
.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__media {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Ratio + radius inherited from the parent Menu Dropdown block. */
    aspect-ratio: var(--header-nav-tile-aspect, 33 / 40);
    border-radius: var(--header-nav-tile-radius, 5px);
    overflow: hidden;
    background: #d9d9d9;
  }

  .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:71) */
.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:75) */
.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:80) */
.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:95) */
.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:96) */
.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:97) */
.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 (matches activity-teaser tag) */
  .category-product-card__labels {
    position: absolute;
    top: 0;
    left: 2rem;
    display: flex;
    gap: 0.375rem;
    z-index: 3;
    pointer-events: none;
  }

  .category-product-card__label {
    display: flex;
    flex-direction: column;
    background: #000000;
    color: #ffffff;
    padding: 1.45rem 0.62rem 0.38rem 0.62rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 0 0 var(--radius-xs, 0.25rem) var(--radius-xs, 0.25rem);
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Step the label size up as the card gets wider */
  @container (max-width: 235px) {
    .category-product-card__labels {
      left: 0.625rem;
      gap: 0.19rem;
    }

    .category-product-card__label {
      padding: 0.68rem 0.46194rem 0.27719rem 0.46194rem;
      font-size: 0.5rem;
      font-weight: 500;
    }
  }

  /* Bottom section - top row (divider + rating), then content below */
  .category-product-card__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
  }

  /* 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: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.1em * 2);
  }

  @media (min-width: 768px) {
    .category-product-card__title {
      font-size: 1.125rem;
      line-height: 120%;
      min-height: calc(1.2 * 1.125rem * 2);
    }
  }

  .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.75rem;
    font-weight: 400;
    line-height: 1.2;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.2em * 3);
  }

  @media (min-width: 768px) {
    .category-product-card__description {
      font-size: 1rem; /* 16px */
      line-height: 1.4;
      min-height: calc(1.4 * 1rem * 3);
    }
  }

  /* Opt-out per collection section (see hide_description_mobile setting) */
  @media (max-width: 767px) {
    .collection-section[data-hide-mobile-description] .category-product-card__description {
      display: none;
    }
  }

  /* 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.875rem;
  }

  @media (max-width: 768px) {
    .category-product-card__rating-count {
      letter-spacing: 0em;
    }
  }

  /* 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 {
      font-size: 1rem !important;
      font-weight: 600 !important;
      line-height: 1 !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;
  }

  /* Highlight card: constrain image to not grow with the wider card */
  .category-product-card--highlight .category-product-card__image {
    max-width: 50%;
    width: auto;
    margin: 0 auto;
  }

  .category-product-card--highlight .category-product-card__content {
    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%;
    }
  }

  /* ===== [PQV] Quick View button ===== */

  .category-product-card__quick-view {
    position: absolute;
    bottom: 0.625rem;
    left: 1.25rem;
    right: 1.25rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #A7A7A7;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 1;
    transition: opacity 0.2s, background 0.2s;
  }

  @media (max-width: 444px) {
    .category-product-card__quick-view {
      font-size: 0.675rem;
    }
  }

  /* Mobile: no button — tapping the image still opens the modal */
  @media (max-width: 767px) {
    .category-product-card__quick-view {
      display: none;
    }
  }

  /* On hover-capable devices, hide until the card is hovered */
  @media (hover: hover) {
    .category-product-card__quick-view {
      opacity: 0;
    }
    .category-product-card:hover .category-product-card__quick-view {
      opacity: 1;
    }
  }

  .category-product-card__quick-view:hover {
    background: #8e8e8e;
  }

  .category-product-card__quick-view:focus-visible {
    opacity: 1;
    outline: 2px solid var(--msc-accent, #EBC82A);
    outline-offset: -2px;
  }

  /* ===== [MSC] Multi-Select Checkout: card styles ===== */

  /* Red border highlight when card is selected */
  .category-product-card--selected {
    outline: 2px solid var(--msc-accent, #EBC82A);
    outline-offset: -2px;
  }

  /* Checkbox wrapper — absolute, top-left corner, above labels (z-index 4) */
  .category-product-card__select {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    cursor: pointer;
    outline: none;
  }

  .category-product-card__select-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .category-product-card__select-box {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.92);
    white-space: normal;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
  }

  .category-product-card__select-label {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .category-product-card__select-label--added {
    display: none;
  }

  /* Hover — suggest interactivity */
  .category-product-card__select:hover .category-product-card__select-box {
    border-color: var(--msc-accent, #EBC82A);
    background: rgba(235, 200, 42, 0.5);
    color: rgba(0, 0, 0, 0.8);
  }

  /* Checked — yellow fill */
  .category-product-card__select-input:checked + .category-product-card__select-box {
    border-color: var(--msc-accent, #EBC82A);
    background-color: var(--msc-accent, #EBC82A);
    color: #000;
  }

  .category-product-card__select-input:checked + .category-product-card__select-box .category-product-card__select-label--add {
    display: none;
  }

  .category-product-card__select-input:checked + .category-product-card__select-box .category-product-card__select-label--added {
    display: flex;
  }

  /* Hover on checked */
  .category-product-card__select:hover .category-product-card__select-input:checked + .category-product-card__select-box,
  .category-product-card__select-input:checked + .category-product-card__select-box:hover {
    background-color: color-mix(in srgb, var(--msc-accent, #EBC82A) 85%, black);
    border-color: color-mix(in srgb, var(--msc-accent, #EBC82A) 85%, black);
  }

  /* Focus ring */
  .category-product-card__select-input:focus-visible + .category-product-card__select-box {
    outline: 2px solid var(--msc-accent, #EBC82A);
    outline-offset: 2px;
  }

  /* Disabled */
  .category-product-card__select-input:disabled + .category-product-card__select-box {
    opacity: 0.38;
    border-color: rgba(0, 0, 0, 0.15);
  }

  .category-product-card__select:has(:disabled) {
    cursor: not-allowed;
  }

  /* ===== [VP] Variant Picker ===== */

  .category-product-card__variant-picker {
    width: 100%;
    margin-top: 0.5rem;
  }

  .category-product-card__variant-select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
    appearance: auto;
    -webkit-appearance: auto;
  }

  @media (min-width: 768px) {
    .category-product-card__variant-select {
      font-size: 0.875rem;
    }
  }

  .category-product-card__variant-select:focus {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 1px;
    border-color: rgba(0, 0, 0, 0.4);
  }

  .category-product-card__variant-select {
    width: 100%;
  }

  .category-product-card__variant-select--hidden {
    display: none;
  }

  /* Option 1 dropdown (model/device) — styled to match product page dropdown */
  .category-product-card__model-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.375rem;
  }

  .category-product-card__option1-select {
    flex: 1;
    min-width: 0;
    padding: 10px 36px 10px 14px;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary, #111);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  .category-product-card__option1-select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #111);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
  }

  .category-product-card__model-help-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
    background: #A7A7A7;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.45;
    transition: opacity 0.15s;
    padding: 0;
  }

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

  @media (max-width: 767px) {
    .category-product-card__model-help-btn {
      width: 28px;
      height: 28px;
      font-size: 13px;
    }
  }

  /* Hidden when no help page is configured on the section */
  .collection-section:not([data-phone-help]) .category-product-card__model-help-btn,
  .collection-section[data-phone-help=""] .category-product-card__model-help-btn {
    display: none;
  }

  /* Option 2 pills (system choice / solo option) */
  .category-product-card__option2-pills {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .category-product-card__option2-pill {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    min-height: 40px;
  }

  @media (min-width: 768px) {
    .category-product-card__option2-pill {
      font-size: 0.8125rem;
    }
  }

  .category-product-card__option2-pill--active {
    border-color: #000;
    background: #000;
    color: #fff;
  }

  .category-product-card__option2-pill--unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .category-product-card__option2-pill:focus-visible {
    outline: none;
    border-color: var(--color-primary, #111);
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
  }
/* END_SNIPPET:category-product-card */

/* START_SNIPPET:category-product-slider (INDEX:98) */
/* This slider spaces its slides 16/24px (space-between above), wider than the
     theme default, so the gap the shared --slider-card-width subtracts moves with
     it. Carried here rather than in category-product-grid's stylesheet, which
     Shopify only loads on pages that render that section — the story-cards popup
     otherwise had no card width at all. */
  .category-product-slider {
    --slider-slide-gap: 1rem;

    /* Peeks unless the markup's inline style turns it off for a short list. */
    --slider-peek-active: 1;
    --slider-peek-active-mobile: 1;
  }

  .category-product-slider .category-product-grid__card-wrapper {
    width: var(--slider-card-width-mobile);
    min-width: var(--slider-card-width-mobile);
    max-width: var(--slider-card-width-mobile);
    flex: 0 0 auto;
    display: flex;
  }

  @media (min-width: 768px) {
    .category-product-slider {
      --slider-slide-gap: 1.5rem;
    }

    /* Desktop shows several cards per row instead of one plus the peek. */
    .category-product-slider .category-product-grid__card-wrapper {
      width: var(--slider-card-width);
      min-width: 0;
      max-width: none;
    }
  }
/* END_SNIPPET:category-product-slider */

/* START_SNIPPET:filter-pills (INDEX:111) */
/* A <swiper-container>, so the pill gap is its space-between attribute and it
     needs no width of its own: min-width:0 lets it shrink inside a flex row,
     which is what gives Swiper a viewport narrower than its content. */
  .filter-pills {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
  }

  /* Slotted slides default to width:100%, so pills must size to their content
     for more than one to fit per view. The vertical padding keeps the focus
     outline off the shadow track's overflow:hidden edge. */
  .filter-pills__slide {
    display: flex;
    align-items: center;
    width: fit-content !important;
    flex-shrink: 0;
    padding-block: 0.125rem;
  }

  .filter-pills__pill {
    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%;
  }

  .filter-pills__pill:hover {
    opacity: 0.9;
  }

  .filter-pills__pill[aria-pressed='true'],
  .filter-pills__pill.active {
    background-color: var(--section-text-color, #000000);
    color: var(--section-bg-color, #ffffff);
  }
/* END_SNIPPET:filter-pills */

/* START_SNIPPET:general-product-card (INDEX:113) */
/* Reserve a constant height whether or not the product has reviews,
     so titles/prices stay aligned across cards. */
  .general-product-card__rating-row {
    height: 1.5rem;
    min-height: 1.5rem;
  }

  .general-product-card__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .general-product-card__stars {
    position: relative;
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1;
  }

  .general-product-card__stars-bg {
    color: rgba(0, 0, 0, 0.25);
  }

  .general-product-card__stars-fill {
    position: absolute;
    inset: 0;
    color: #000000;
    width: calc((var(--rating, 0) / 5) * 100%);
    overflow: hidden;
    white-space: nowrap;
  }

  .general-product-card__rating-count {
    opacity: 0.7;
    white-space: nowrap;
    font-size: 0.75rem;
  }
/* END_SNIPPET:general-product-card */

/* START_SNIPPET:image (INDEX:121) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:product-header-buttons (INDEX:136) */
.product-header-buttons__payment .shopify-payment-button {
    margin-top: 0 !important;
  }

  .product-header-buttons__payment .shopify-payment-button__button {
    border-radius: var(--radius-sm, 0.375rem) !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:138) */
/* Pre-Swiper: show first slide only, prevent horizontal overflow */
  .product-header-images__carousel {
    overflow: hidden;
  }

  /* Mobile: break the carousel out of the centered .content-container side
     padding so the gallery fills the screen edge-to-edge. calc(50% - 50vw)
     derives the inset from the wrapper's own width vs the viewport, so it
     adapts to whatever --content-gap-current is active. The carousel's own
     overflow:hidden clips the bleed, and it is lg:hidden so this only takes
     effect on mobile. */
  .product-header-images__carousel {
    margin-inline: calc(50% - 50vw);
  }

  /* Before Swiper initializes (init="false"), show only first slide to prevent overflow.
     Scoped to this gallery: an unscoped `swiper-container[init='false']` also matches any
     other deferred track on the page, and this snippet's stylesheet is loaded on every
     product page — it silently hid all but the first card of the deferred sliders. */
  .product-header-images__swiper[init='false'] swiper-slide {
    display: none;
  }

  .product-header-images__swiper[init='false'] swiper-slide:first-child {
    display: block;
  }

  /* Swiper mobile carousel pagination — lower left of the image */
  .product-header-images__swiper::part(pagination) {
    position: absolute;
    bottom: 0.56rem;
    left: 0.9rem;
    width: auto;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    gap: 0.28rem;
    z-index: 1;
  }

  .product-header-images__swiper::part(bullet) {
    background: var(--color-grey-medium, #ccc);
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
    border-radius: 0.04169rem;
    cursor: pointer;
  }

  .product-header-images__swiper::part(bullet-active) {
    background: var(--color-primary, #000);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.04169rem;
  }

  .product-header-images__thumbnails::-webkit-scrollbar {
    display: none;
  }

  .product-header-images__modal[data-active] {
    display: flex;
  }

  /* "Pinch to zoom" hint only makes sense on touch devices */
  .product-header-images__zoom-hint {
    visibility: hidden;
  }

  @media (pointer: coarse) {
    .product-header-images__zoom-hint {
      visibility: visible;
    }
  }

  /* Gallery navigation arrows + image inset, by viewport and input device:

     | Viewport           | Touch    | Arrows | Image inset  |
     | ------------------ | -------- | ------ | ------------ |
     | >= 1024px (lg+)    | any      | shown  | 4rem (px-16) |
     | 640-1023px (sm-lg) | no touch | shown  | 4rem         |
     | 640-1023px (sm-lg) | touch    | hidden | full-width   |
     | < 640px (below sm) | any      | hidden | full-width   |

     Touch users below lg swipe instead of using arrows; the inset keeps the
     image clear of the arrows whenever they're shown. */

  /* Always show arrows on desktop (>=lg); below lg, only on non-touch devices */
  @media (pointer: coarse) and (max-width: 1023.98px) {
    .product-header-images__zoom-arrow {
      display: none;
    }
  }

  /* Below sm there's no room for arrows; always hide them (no inset either) */
  @media (max-width: 639.98px) {
    .product-header-images__zoom-arrow {
      display: none;
    }
  }

  /* sm to lg on non-touch devices the nav arrows show, so inset the image
     (matching the desktop side padding) instead of letting it run full-width. */
  @media (pointer: fine) and (min-width: 640px) and (max-width: 1023.98px) {
    .product-header-images__modal-content {
      padding-left: 4rem;
      padding-right: 4rem;
    }
  }

  @media (min-width: 640px) {
    .product-header-images__zoom-thumbs {
      justify-content: safe center;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
  }

  .product-header-images__zoom-thumbs::-webkit-scrollbar {
    display: none;
  }

  /* Zoom modal: the carousel Swiper is relocated into the modal so the zoomed
     image stays swipeable/scrollable, presented fullscreen with contained
     (not cropped) images. */
  .product-header-images__swiper[data-zoom-active] {
    width: 100%;
    height: 100%;
  }

  .product-header-images__swiper[data-zoom-active] swiper-slide {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .product-header-images__swiper[data-zoom-active] .product-header-images__slide-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Swiper's own zoom-container CSS lives in the element's shadow DOM and does
     not reach our light-DOM wrapper, so center/size it here for the modal. */
  .product-header-images__swiper[data-zoom-active] .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-header-images__swiper[data-zoom-active] .product-header-images__media {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    aspect-ratio: auto;
  }

  /* Video wrappers can't shrink to content height like an <img>; keep them
     filling the slide so the contained video stays visible. */
  .product-header-images__swiper[data-zoom-active] .product-header-images__video-wrapper,
  .product-header-images__swiper[data-zoom-active] .product-header-images__external-video-wrapper {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* In zoom mode, hide the carousel dots */
  .product-header-images__swiper[data-zoom-active]::part(pagination) {
    display: none;
  }

  /* 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);
  }

  /* 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:140) */
.product-header-price__value {
    font-size: 22px;
    font-weight: 600;
    line-height: 115%;
  }
/* END_SNIPPET:product-header-price */

/* START_SNIPPET:product-header-variants (INDEX:145) */
.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:150) */
.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:156) */
/* 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:157) */
/* 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:158) */
/* 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 */

/* START_SNIPPET:tiles-container-open (INDEX:164) */
/* Card sizing for every tiles slider. Keyed on the container's own display mode,
     so a grid breakpoint is never touched and no section prefix is needed — the
     four tiles sections used to carry a copy of this each, which meant a section
     rendered on a page without content-tiles had no width at all. The width itself
     is --slider-card-width* from theme.scss, off --slider-peek and --slider-slide-gap. */
  @media (min-width: 768px) {
    .content-tiles__container[data-display-mode='slider'] .content-tiles__card {
      flex: 0 0 var(--slider-card-width) !important;
      width: var(--slider-card-width) !important;
      min-width: 0 !important;
      max-height: 100dvh !important;
    }
  }

  @media (max-width: 767px) {
    .content-tiles__container[data-mobile-display-mode='slider'] .content-tiles__card {
      flex: 0 0 min(var(--slider-card-width-mobile), 30.875rem) !important;
      width: min(var(--slider-card-width-mobile), 30.875rem) !important;
      min-width: 0 !important;
    }
  }

  /* On a Swiper host the leading inset is `slides-offset-before`, not track padding —
     every tiles section's neutralizer zeroes that padding. The card-width calcs
     therefore resolve `100%` against the un-padded host and must subtract the inset,
     or each card comes out inset/visible-columns too wide.

     Estimate only: `createSectionSlider`'s `offsetProperty` overwrites this with the
     inset it actually measured and handed to Swiper, so the calcs and the track can't
     disagree. These values are what the cards use until that lands (and if it never
     does), so they mirror where the content edge normally falls.

     Defined here because all five tiles sections render this snippet, so it loads
     whenever one of them is on the page — the width calcs that read it are
     duplicated across those sections' own stylesheets. */
  swiper-container.content-tiles__container {
    --slider-leading-inset: var(--content-gap-current);
  }

  @media (min-width: 768px) {
    swiper-container.content-tiles__container {
      --slider-leading-inset: var(--content-edge-offset, var(--content-gap-current));
    }
  }

  /* Slider desktop + grid mobile: the sections' own `.content-tiles--mobile-grid
     .content-tiles__container { display: grid }` rules out-specify the neutralizer,
     so the HOST becomes a real multi-column grid. The shadow `.swiper` box then
     occupies a single track and ::part(wrapper) grids the slides a second time
     inside it — 172px tracks holding 78px tracks holding 63px cards, against
     main's 172px. Collapsing the host to one column leaves the shadow box
     full-width and lets ::part(wrapper) be the only grid, which is exactly the
     shape category-product-grid already had (and why it was never affected).

     Specificity must clear (0,3,0): influencer and activity-teaser scope their
     copies as `.content-tiles--influencer.content-tiles--mobile-grid …` and
     `.activity-teaser.content-tiles--mobile-grid …`. Every tiles root carries
     `content-tiles`, so this lands at (0,3,1). Deliberately narrow — it only
     touches the grid-mobile host, leaving the mobile-slider host as the native
     flex scroller it is on purpose. */
  @media (max-width: 767px) {
    .content-tiles.content-tiles--mobile-grid swiper-container.content-tiles__container {
      grid-template-columns: none !important;

      /* And no leading-inset compensation in grid mode: that subtraction exists
         only because a slider moves its inset onto `slides-offset-before`. A grid
         breakpoint has no such offset, so subtracting one just shaved the inset
         off every card (157px inside a correct 172px track, with the leftover
         showing up as a 31px gap). The measurement agrees — a grid host sits in
         the content column, so it measures 0 — this is the estimate for before
         it runs. */
      --slider-leading-inset: 0px;
    }
  }
/* END_SNIPPET:tiles-container-open */