/** Shopify CDN: Minification failed

Line 10704:28 Expected identifier but found whitespace
Line 10704:29 Unexpected "repeat("
Line 28301:0 Unexpected "{"
Line 28301:1 Expected identifier but found "%"
Line 28302:46 Unexpected "\"What's my size? / Size Chart\""
Line 28303:76 Unterminated string token
Line 28308:77 Unterminated string token
Line 28309:3 Expected identifier but found "%"
Line 28383:2 Unexpected "{"
Line 28383:3 Expected identifier but found "%"
... and 116 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:alternating-content (INDEX:1) */
/* ============================================================
   ALTERNATING CONTENT ("Frame 14")
   Block-based rows of a large image + a text column. On desktop
   the image side alternates each row (left / right); on mobile the
   rows stack (image above text). Mobile-first.
   ============================================================ */
.alternating-content {
  display: block;
  background-color: var(--ac-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.alternating-content__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-exact-40);
}

.ac-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.ac-row__image {
  aspect-ratio: 3 / 2;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.ac-row__image img,
.ac-row__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ac-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  justify-content: center;
  /* Pastel #51: no inset at all — the row gap above already separates the text
     from the image, and the sides sit on the page margin. */
  padding: 0;
}

.ac-row__title {
  margin: 0;
  color: var(--default-text-color);
}

.ac-row__body {
  margin: 0;
  max-width: 28rem;
  color: var(--color-blue-70);
}

/* ---------- Optional text link ---------- */
/* Mobile: 16px from the body copy to the link (8px column gap + 8px margin) */
.ac-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  margin-top: var(--margin-xs);
  align-self: flex-start;
  color: var(--default-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: gap var(--animation-values);
}

.ac-row__link:hover {
  gap: var(--padding-xs);
}

/* HARDCODED: 14px — Figma text-link arrow (the shared --smaller wrapper is ~10px) */
.ac-row__link .svg-wrapper,
.ac-row__link .svg-wrapper svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   DESKTOP (1024px) — side-by-side, alternating image side
   ============================================================ */
@media screen and (min-width: 1024px) {
  .alternating-content {
    /* HARDCODED: 30px — Figma desktop page margin; no matching token */
    padding-inline: 30px;
  }

  .alternating-content__rows {
    gap: var(--spacing-exact-50); /* 50px between rows on desktop */
  }

  .ac-row {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-exact-50); /* 50px text <-> image */
  }

  .ac-row__image {
    /* 7.5 of the 12 Figma columns (20px gutters): 7.5 columns + the 7 gutters
       they span. The text column takes the rest after the 48px row gap. */
    flex: 0 0 calc((100% - 11 * var(--gap-xl)) / 12 * 7.5 + 7 * var(--gap-xl));
  }

  .ac-row__text {
    flex: 1 1 0;
    padding: 0;
  }

  /* Default order is image first, so the text sits on the right of odd rows
     and on the left of the reversed even ones. */
  .ac-row:nth-child(odd) .ac-row__text {
    padding-inline-end: var(--padding-xl); /* 20px */
  }

  .ac-row:nth-child(even) .ac-row__text {
    padding-inline-start: var(--padding-xl); /* 20px */
  }

  /* Desktop: 32px from the body copy to the text link
     (8px column gap + 24px link margin) */
  .ac-row__link {
    margin-top: var(--padding-2xl);
  }

  .ac-row:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* 30px from the 1024px breakpoint above holds at 1440px and 1920px too —
   no container-padding-xl/2xl override here, unlike other sections */
/* END_SECTION:alternating-content */

/* START_SECTION:blog-article-list (INDEX:2) */
/* ============================================================
   BLOG ARTICLE LIST
   Paginated article cards with blog filters. Filters are pill
   links on desktop and a custom dropdown on mobile (each option
   links to the chosen tag). Cards stack in one column on mobile and form
   a three-column grid from 1024px. Mobile-first.
   ============================================================ */
.blog-article-list {
  display: block;
  background-color: var(--blog-article-list-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

/* This section's own top/bottom border (Section Border settings) should only
   show on desktop — hardcoded off below 1024px for this page specifically,
   via sibling selectors so the shared section-border/divider snippets used
   elsewhere are untouched. A page-width divider is wrapped in `.container`,
   so both the bare divider and the wrapper are matched. */
:is(.divider, .container:has(> .divider)):has(+ .blog-article-list),
.blog-article-list + :is(.divider, .container:has(> .divider)) {
  display: none;
}

.blog-article-list__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ---------- Layout (desktop: sticky tag sidebar + content column) ---------- */
.blog-article-list__layout {
  display: block;
}

.blog-article-list__content {
  min-width: 0;
  container-type: inline-size;
}

/* ---------- Filters ---------- */
.blog-article-list__pills {
  display: none;
}

/* Sticky below the header card on mobile — same pattern as
   .fabric-selector__dropdown. header.js keeps --header-card-bottom current;
   the section setting is the pre-JS fallback. The 16px block padding is the
   gap to the header, and replaces the old 16px margin-bottom so the distance
   to the grid stays 32px (padding + .blog-article-list__inner gap). */
.blog-article-list__select-wrap {
  position: sticky;
  top: max(0px, var(--header-card-bottom, var(--blog-article-list-sticky-top-mobile, 56px)));
  z-index: var(--layer-raised);
  padding-block: var(--padding-lg);
  background: var(--blog-article-list-bg, var(--body-bg-color));
}

/* While the select is stuck, paint the section colour behind the header card
   (viewport top down to the select) so cards scrolling under the header are
   hidden. Full-bleed across the section's inline padding. The section's
   inline script below toggles .is-stuck. */
.blog-article-list__select-wrap::before {
  content: '';
  position: absolute;
  inset-inline: calc(-1 * var(--container-padding-mobile));
  bottom: 100%;
  height: max(0px, var(--header-card-bottom, var(--blog-article-list-sticky-top-mobile, 56px)));
  background: var(--blog-article-list-bg, var(--body-bg-color));
  opacity: 0;
  pointer-events: none;
}

.blog-article-list.is-stuck .blog-article-list__select-wrap::before {
  opacity: 1;
}

/* Toggle + list follow .fabric-selector__dropdown-toggle / -list. */
.blog-article-list__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  width: 100%;
  padding: var(--spacing-exact-12) var(--padding-lg);
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
  background: var(--color-white);
  color: var(--default-text-color);
  font-weight: 500;
  cursor: pointer;
}

.blog-article-list__dropdown-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--animation-values);
}

.blog-article-list__select-wrap.is-open .blog-article-list__dropdown-toggle svg {
  transform: rotate(180deg);
}

.blog-article-list__dropdown-list {
  /* Overlays the grid rather than sitting in flow, so opening it never
     grows the sticky wrap. 8px below the toggle, full-width rows with no
     inner inset, the active row tinted (Figma dropdown / PDP font select). */
  position: absolute;
  inset-inline: 0;
  top: calc(100% - var(--padding-lg));
  display: none;
  flex-direction: column;
  margin-top: var(--gap-xs);
  padding: 0;
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
  background: var(--color-white);
  overflow: hidden; /* the tinted row follows the list's rounded corners */
}

.blog-article-list__select-wrap.is-open .blog-article-list__dropdown-list {
  display: flex;
}

.blog-article-list__dropdown-item {
  display: block;
  padding: var(--padding-lg);
  color: var(--default-text-color); /* every option reads Navy; the tint marks the active one */
  text-decoration: none;
}

.blog-article-list__dropdown-item.is-active {
  background: var(--light-border-color);
}

/* ---------- Grid ---------- */
.blog-article-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

/* Two cards per row once the content column is as wide as it is at a 600px
   viewport (Figma 600 column shows two cards), up to the desktop switch where
   the three-column rule below takes over.
   HARDCODED: 554px = 600px viewport - 2 x 23px tablet container padding. */
@container (min-width: 568px) {
  .blog-article-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Card ---------- */
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--body-bg-color);
  color: inherit;
  text-decoration: none;
}

.blog-card__image {
  /* HARDCODED: 442/553 — Figma Content Block image ratio */
  aspect-ratio: 442 / 553;
  background: var(--light-border-color);
  overflow: hidden;
  /* HARDCODED: 8px bottom radius — Figma image-corner; the card's own radius
     + overflow: hidden already rounds the top corners */
  border-radius: 0 0 0.5rem 0.5rem;
}

.blog-card__image img,
.blog-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--animation-values-slow);
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.03);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--spacing-exact-12);
  flex: 1 0 auto;
  padding: var(--padding-xl) var(--padding-lg); /* Figma: 20px block / 16px inline */
}

.blog-card__label {
  display: inline-flex;
  align-items: center;
  padding: var(--padding-3xs) var(--padding-xs);
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 4px radius — Figma button-corner; no 4px token */
  border-radius: 0.25rem;
  color: var(--color-blue-70);
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-card__title {
  margin: 0;
  color: var(--default-text-color);
}

.blog-card__excerpt {
  margin: 0;
  color: var(--color-blue-70);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- Empty state ---------- */
.blog-article-list__empty {
  margin: 0;
  padding-block: var(--padding-5xl);
  text-align: center;
  color: var(--grey-color);
}

/* ---------- Pagination ---------- */
.blog-article-list__pagination {
  display: flex;
  justify-content: center;
  /* HARDCODED: 40px — no matching margin token (closest: --margin-4xl
     32px / --margin-5xl 48px) */
  margin-top: 56px;
}

.blog-article-list__pages {
  display: flex;
  align-items: center;
  gap: var(--gap-xs); /* 8px */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* theme.css's global list reset (`ol li, ul li { margin-bottom: 6px }`,
   zeroed only on :last-child) leaks onto every <li> site-wide. In this
   flex row it centered each pill's margin box instead of its content box,
   so every pill except the last (next) sat a few px higher. Reset it
   locally rather than relying on the compiled reset. */
.blog-article-list__pages li {
  margin: 0;
}

/* Prev/next sit 20px from the adjacent page pill — the flex gap above
   already contributes 8px, so this adds the remaining 12px on top
   (8 + 12 = 20). Applied to both inline sides; harmless on the outer
   edges since the row is centered. */
.blog-article-list__page-nav {
  margin-inline: 12px !important;
}

.blog-article-list__page-nav .blog-article-list__page {
  width: auto;
  height: auto;
  padding: var(--padding-xs); /* 8px */
  aspect-ratio: 1 / 1;
  border: 1px solid var(--default-text-color);
  color: var(--default-text-color);
}

.blog-article-list__page-nav .blog-article-list__page--disabled {
  border-color: var(--light-border-color);
  color: var(--color-blue-35);
}

.blog-article-list__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--dark-border-color);
  border-radius: var(--style-border-radius-button); /* 4px */
  /* background: var(--color-white); */
  color: var(--color-blue-35);
  text-decoration: none;
  transition: background var(--animation-values), border-color var(--animation-values);
}

a.blog-article-list__page:hover {
  background: var(--light-border-color);
}

.blog-article-list__page--current {
  background: var(--default-text-color);
  border-color: var(--default-text-color);
  color: var(--color-white);
}

.blog-article-list__page--gap {
  border: none;
  background: none;
  width: auto;
  color: var(--grey-color);
}

/* Prev/next control when there's no previous/next page — always rendered,
   never omitted, matching the disabled look already used for carousel nav
   buttons elsewhere (see .content-carousel__btn.swiper-button-disabled). */
.blog-article-list__page--disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

.blog-article-list__page svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================================
   DESKTOP (1024px) — pill filters, three columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .blog-article-list__pagination {
    margin-top: 80px;
  }
  .blog-article-list__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-xl);
  }

  .blog-article-list {
    padding-inline: var(--container-padding-desktop);
  }

  .blog-article-list__inner {
    gap: var(--gap-2xl);
  }

  :is(.divider, .container:has(> .divider)):has(+ .blog-article-list),
  .blog-article-list + :is(.divider, .container:has(> .divider)) {
    display: block;
  }

  .blog-article-list__select-wrap {
    display: none;
  }

  /* Sticky vertical tag sidebar — modeled on .fabric-selector__layout /
     .fabric-selector__nav, minus its scroll-linking JS: this list is
     click-only, its active state never changes on scroll. */
  .blog-article-list__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gap-3xl);
    align-items: start;
  }

  .blog-article-list__pills {
    position: sticky;
    top: var(--blog-article-list-sticky-top, 100px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs); /* 8px */
  }

  .blog-article-list__pages {
    gap: var(--spacing-exact-12);
  }

  .blog-article-list__page-nav {
    /* Prev/next stay 20px from the adjacent page pill: 12px gap above +
       8px margin here (12 + 8 = 20), vs. 8px gap + 12px margin on mobile. */
    margin-inline: var(--margin-xs) !important; /* 8px */
  }

  .blog-article-list__pill {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-blue-35); /* Blue-35 Placeholder — inactive */
    text-decoration: none;
    transition: color var(--animation-values);
  }

  .blog-article-list__pill:hover {
    color: var(--default-text-color);
  }

  .blog-article-list__pill--active {
    color: var(--default-text-color);
  }

  .blog-article-list__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-card__body {
    padding: var(--padding-2xl) var(--padding-lg); /* Figma: 24px block / 16px inline */
  }
}

@media screen and (min-width: 1440px) {
  .blog-article-list {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .blog-article-list {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:blog-article-list */

/* START_SECTION:blog-banner (INDEX:3) */
/* ============================================================
   BLOG BANNER ("Stories Beyond The Shift")
   A simple text banner for blog listing pages: large title with
   an optional short description underneath. Mobile-first.
   ============================================================ */
.blog-banner {
  display: block;
  background-color: var(--blog-banner-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.blog-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.blog-banner__title {
  margin: 0;
  color: var(--default-text-color);
}

.blog-banner__description {
  margin: 0;
  max-width: 36rem;
  color: var(--color-blue-70);
}

/* Mobile/tablet bottom padding is 20px per Figma (description -> filter),
   a value the padding_block_end sizes (32/40/56/80) cannot produce. Override
   the longhand at higher specificity than the single-class .el-spacing rule,
   below the desktop breakpoint only, so the JSON-driven desktop value stays. */
@media screen and (max-width: 1023px) {
  .blog-banner.el-spacing {
    padding-block-end: var(--padding-xl); /* 20px */
  }
}

@media screen and (min-width: 600px) {
  .blog-banner {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .blog-banner {
    padding-inline: var(--container-padding-desktop);
  }
}

@media screen and (min-width: 1440px) {
  .blog-banner {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .blog-banner {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:blog-banner */

/* START_SECTION:blog-featured-stories (INDEX:4) */
/* ============================================================
   FEATURED STORIES
   Other blog articles as a Swiper carousel at every breakpoint, following
   sections/category-carousel.liquid: header (title + nav arrows) above a
   track of bordered cards, data-driven from blog.articles with an
   eyebrow/category badge unique to this section. Mobile-first.
   ============================================================ */
.featured-stories {
  display: block;
  background-color: var(--featured-stories-bg, var(--body-bg-color));
  /* --carousel-gap must match spaceBetween in featured-stories.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: var(--gap-xs); /* 8px */
  padding-inline: var(--carousel-pad);
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

.featured-stories__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-exact-12); /* Figma: 12px between the title and the slider on mobile */
}

/* ---------- Header: title + nav ---------- */
.featured-stories__header {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  justify-content: space-between;
}

.featured-stories__title {
  margin: 0;
  color: var(--default-text-color);
}

.featured-stories__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.featured-stories__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent;
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--animation-values), border-color var(--animation-values), color var(--animation-values);
}

.featured-stories__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.featured-stories__btn.swiper-button-disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

/* ---------- Card ---------- */
.featured-story {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--body-bg-color);
  text-decoration: none;
}

.featured-story__image {
  aspect-ratio: 4 / 5;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token. The card clips
     the top two corners; this rounds the bottom two against the card body. */
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  background: var(--light-border-color);
  overflow: hidden;
}

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

.featured-story__body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: var(--padding-xl); /* Figma: Padding-XL, 20px */
}

/* ---------- Eyebrow / category badge ---------- */
.featured-story__eyebrow {
  display: flex;
  /* top right bottom left: 0, 8px, 2px, 8px */
  padding: 0 var(--padding-xs) var(--padding-3xs) var(--padding-xs);
  justify-content: center;
  align-items: center;
  gap: var(--padding-xs);
  border-radius: var(--style-border-radius-button); /* 4px */
  border: 1px solid var(--dark-border-color);
  color: var(--default-text-color);
  text-align: center;
  align-self: flex-start; /* badge hugs its text, doesn't stretch full width */
  /* HARDCODED: 12px gap to the title below — no exact matching token
     (closest are --margin-sm 11.2px / --margin-md 12.8px) */
  margin-block-end: 12px;
}

.featured-story__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--padding-2xs); /* 4px */
}

.featured-story__title {
  margin: 0;
  color: var(--default-text-color);
}

.featured-story__excerpt {
  margin: 0;
  color: var(--grey-color);
}

/* ---------- Track (Swiper, every breakpoint) ---------- */
.featured-stories__swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; the section's overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.featured-stories .swiper-slide {
  height: auto; /* let cards stretch to equal height */
  display: flex;
  /* Slide width comes from the per-instance style block below: either whole
     cards filling the content column with the next card peeking from the
     viewport edge, or (peek 0) cards fitted exactly to the content column.
     Swiper runs slidesPerView: 'auto'. */
  width: var(--carousel-slide-width);
}

.featured-stories .swiper-slide .featured-story {
  width: 100%;
}

/* ============================================================
   DESKTOP (1024px) — nav arrows, wider gap
   ============================================================ */
@media screen and (min-width: 1024px) {
  .featured-stories {
    --carousel-pad: var(--padding-page-margin-desktop);
    --carousel-gap: 20px; /* must match the 1024 spaceBetween in featured-stories.js */
  }

  .featured-stories__inner {
    gap: var(--padding-2xl); /* 24px */
  }

  .featured-stories__nav {
    display: flex;
  }

  .featured-stories__nav[data-locked] {
    display: none;
  }

  /* Hover on an enabled arrow: navy fill, no outline, white icon (Figma).
     Disabled arrows keep their tint state. */
  .featured-stories__btn:not(.swiper-button-disabled):hover {
    background: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);
  }
}

@media screen and (min-width: 1440px) {
  .featured-stories {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .featured-stories {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SECTION:blog-featured-stories */

/* START_SECTION:blog-post-banner (INDEX:5) */
/* Self-contained hero, modeled on hero-banner.liquid's proven
     "image behind transparent header" structure: position:relative
     wrapper, absolute image + scrim, no reliance on the generic
     .section/.section-background grid indirection. */
  .article-banner {
    position: relative;
    display: flex;
    min-height: var(--section-height-large);
    color: var(--color-white);
    isolation: isolate;
  }

  .article-banner__media {
    position: absolute;
    inset: 0;
    z-index: var(--layer-section-background);
    background-color: var(--light-border-color);
  }

  .article-banner__image,
  .article-banner__media svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-banner__scrim {
    position: absolute;
    inset: 0;
    z-index: var(--layer-lowest);
    background: linear-gradient(
      to top,
      rgb(6 21 43 / var(--opacity-70)) 0%,
      rgb(6 21 43 / var(--opacity-10)) 45%,
      rgb(6 21 43 / var(--opacity-30)) 100%
    );
  }

  /* Mobile (default) */
  .article-banner__content {
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    /* Figma: Padding-Page-gutter 12px (no exact token — closest are --padding-sm 11.2px / --padding-md 12.8px) Padding-Page-margin 16px = --padding-lg;
       32px below the meta row = --padding-4xl */
    padding: 0.75rem var(--padding-lg) var(--padding-4xl);
  }

  /* When the header floats transparent over this banner (no space reserved
     for it in the flow), the breadcrumb sits at a fixed 84px from the top on
     mobile/tablet (Figma: the 72px floating header card + 12px). */
  body:has(.header[transparent]) .article-banner__content {
    padding-top: 84px; /* HARDCODED: Figma mobile banner PT; no matching token */
  }

  .article-banner__crumb {
    display: flex;
    align-items: center;
    /* Figma: Padding-Padding-XS = 4px; no exact gap token (--gap-2xs is 4.8px) */
    gap: 4px;
    overflow: hidden;
    color: var(--color-white);
  }

  .article-banner__crumb-link {
    color: var(--color-white);
    white-space: nowrap;
  }

  .article-banner__crumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .article-banner__divider {
    /* HARDCODED: 30px — Figma divider line; no matching width token */
    flex-shrink: 0;
    width: 1.875rem;
    height: 1px;
    background-color: var(--color-white);
  }

  .article-banner__main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--gap-xl);
    align-self: stretch;
  }

  .article-banner__eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-3xs) var(--padding-xs);
    gap: var(--gap-xs);
    /* HARDCODED: 4px radius — Figma button-corner; no 4px token */
    border-radius: 4px;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    text-align: center;
  }

  .article-banner__title {
    margin: 0;
    color: var(--color-white);
  }

  .article-banner__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    align-self: stretch;
    color: var(--color-white);
  }

  /* ============================================================
     DESKTOP (1024px)
     ============================================================ */
  @media screen and (min-width: 1024px) {
    .article-banner__content {
      /* HARDCODED: 100px / 50px — Figma desktop banner padding; no
         matching padding tokens (closest: --padding-5xl 48px / --padding-6xl 64px) */
      padding: 100px 50px 50px 50px;
    }

    .article-banner__title {
      /* HARDCODED: 777px — Figma desktop title max-width; no matching token */
      max-width: 777px;
    }

    .article-banner__main {
      /* HARDCODED: 12px — Figma desktop gap; no matching gap token
         (closest: --gap-sm 11.2px / --gap-md 14.4px) */
      gap: 12px;
    }

    /* Desktop: the breadcrumb sits at a fixed 100px from the top under the
       floating header (Figma banner PT-100), same value as the non-transparent
       padding above. */
    body:has(.header[transparent]) .article-banner__content {
      padding-top: 100px;
    }
  }
/* END_SECTION:blog-post-banner */

/* START_SECTION:campaign-quote (INDEX:9) */
/* ============================================================
   CAMPAIGN QUOTE
   A single large statement, left-aligned, on a tinted band.
   Mobile-first. Desktop overrides via @media (min-width: 1024px).
   ============================================================ */
.campaign-quote {
  background-color: var(--campaign-quote-bg, #f8f7f7);
  padding-inline: var(--container-padding-mobile);
}

.campaign-quote__text {
  margin: 0;
  /* Statement is constrained so long lines wrap into a tidy block */
  max-width: var(--campaign-quote-max-width, 50rem);
  color: var(--default-text-color);
}

@media screen and (min-width: 600px) {
  .campaign-quote {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .campaign-quote {
    padding-inline: var(--padding-page-margin-desktop);
  }

  /* HARDCODED: 38px — desktop statement matches the H2 preset while mobile
     keeps the H3 preset (28px). The richtext <p> inside is sized directly by
     the global .rte .h3 p rule, so it is targeted too. */
  .campaign-quote .campaign-quote__text,
  .campaign-quote .rte .campaign-quote__text p {
    font-size: 38px;
  }
}

@media screen and (min-width: 1440px) {
  .campaign-quote {
    padding-inline: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .campaign-quote {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:campaign-quote */

/* START_SECTION:care-guide (INDEX:10) */
/* ============================================================
   CARE GUIDE
   A title above equal-width bordered cards. Each card: heading +
   subheading + a list of icon-bullet items. All static. No JS.
   Mobile-first: cards stack; row (equal columns) from 1024px.
   ============================================================ */
.care-guide {
  display: block;
  background-color: var(--care-guide-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.care-guide__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.care-guide__title {
  margin: 0;
  color: var(--default-text-color);
}

.care-guide__cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

.care-guide__card {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
}

.care-guide__card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  flex: 1 1 auto;
  padding: var(--padding-4xl) var(--padding-xl);
}

.care-guide__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-highlight-stack);
}

.care-guide__card-title {
  margin: 0;
  color: var(--default-text-color);
}

.care-guide__card-subtitle {
  margin: 0;
  color: var(--color-blue-70);
}

.care-guide__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.care-guide__item {
  display: flex;
  align-items: center;
  gap: var(--gap-highlight-stack);
  margin: 0;
  color: var(--default-text-color);
}

.care-guide__item-icon {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.care-guide__item-icon img,
.care-guide__item-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   DESKTOP (1024px) — equal columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .care-guide {
    padding-inline: var(--container-padding-desktop);
  }

  .care-guide__cards {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .care-guide__inner {
    gap: var(--padding-2xl); /* 24px — gap scale has no exact match (--gap-2xl is 32px) */
  }

  /* HARDCODED: 38px — desktop section title matches the H2 preset while the
     mobile size stays at the H3 preset (28px). No matching token. */
  .care-guide .care-guide__title {
    font-size: 38px;
  }
}

@media screen and (min-width: 1440px) {
  .care-guide {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .care-guide {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:care-guide */

/* START_SECTION:category-carousel (INDEX:12) */
/* ============================================================
   CATEGORY CAROUSEL ("Shop by Category")
   Header (title + nav) above a Swiper track of image cards, each
   captioned with a text link. Mobile-first.
   ============================================================ */
.category-carousel {
  display: block;
  background-color: var(--category-carousel-bg, var(--body-bg-color));
  /* --carousel-gap must match spaceBetween in category-carousel.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: 12px;
  padding-inline: var(--carousel-pad);
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

.category-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ---------- Header: title + nav ---------- */
.category-carousel__header {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  justify-content: space-between;
}

.category-carousel__title {
  margin: 0;
  color: var(--default-text-color);
}

.category-carousel__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.category-carousel__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent;
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--animation-values), border-color var(--animation-values), color var(--animation-values);
}

.category-carousel__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.category-carousel__btn.swiper-button-disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

/* ---------- Track ---------- */
.category-carousel .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; the section's overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.category-carousel .swiper-slide {
  height: auto; /* let cards stretch to equal height */
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --carousel-cards / --carousel-peek come from the
     per-instance style block below. Swiper runs slidesPerView: 'auto'. */
  /* width: calc(
    (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
    - var(--carousel-gap)
  ); */
  width: 198px;
}
@media screen and (min-width: 1024px){
  .category-carousel .swiper-slide {
    width: calc(
      (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
      - var(--carousel-gap)
    );
  }
}

/* "Mobile layout: 2-column grid": below 1024px there is no slider (category-carousel.js
   skips Swiper there); cards wrap in two columns with square images. */
@media screen and (max-width: 1023px) {
  .category-carousel[data-mobile-layout='grid'] .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .category-carousel[data-mobile-layout='grid'] .swiper-slide {
    width: auto;
  }

  .category-carousel[data-mobile-layout='grid'] .category-card__image {
    aspect-ratio: 1 / 1;
  }
}

/* ---------- Card ---------- */
.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  /* Card surface follows the section / page background (Figma) — no white tint */
  background: #F8F7F7;
  text-decoration: none;
}

.category-card__image {
  aspect-ratio: 245 / 327;
  background: var(--light-border-color);
  overflow: hidden;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.category-card__image img,
.category-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Text link caption ---------- */
.category-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs); /* 4px */
  padding: var(--padding-lg); /* 16px */
  color: var(--default-text-color);
  font-weight: 500;
  transition: gap var(--animation-values);
}

.category-card:hover .category-card__link {
  gap: var(--padding-xs);
}

.category-card__link .svg-wrapper {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .category-carousel__nav {
    display: flex;
  }

  .category-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
    --carousel-gap: 20px; /* must match spaceBetween breakpoint in category-carousel.js */
  }

  .category-carousel__body {
    gap: var(--padding-2xl); /* 24px — the gap scale has no 24px step (--gap-2xl is 32px) */
  }
  /* Hover on an enabled arrow: navy fill, no outline, white icon (Figma).
     Disabled arrows keep their tint state. */
  .category-carousel__btn:not(.swiper-button-disabled):hover {
    background: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);
  }
}

@media screen and (min-width: 1440px) {
  .category-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .category-carousel {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SECTION:category-carousel */

/* START_SECTION:client-logo-marquee (INDEX:14) */
/* ============================================================
   CLIENT LOGO MARQUEE
   A continuously scrolling strip of client logos. Logos keep
   their natural aspect ratio at a fixed height, so widths vary.
   CSS-only animation; items are duplicated in Liquid so a
   translateX(-50%) loop is seamless. Mobile-first.
   ============================================================ */
.client-logo-marquee {
  display: block;
  background-color: var(--client-logo-marquee-bg, var(--body-bg-color));
  overflow: hidden;
}

.client-logo-marquee__track {
  display: flex;
  align-items: center;
  /* HARDCODED: 40px gap — Figma spacing between client logos; no 40px token */
  gap: 40px;
  width: max-content;
  animation: client-logo-marquee-scroll var(--client-logo-marquee-duration, 30s) linear infinite;
}

/* Pause in the Shopify editor (clones are not rendered there, so the
   animation would clip items) and on hover. */
.client-logo-marquee__track--paused,
.client-logo-marquee__track:hover {
  animation-play-state: paused;
}

.client-logo-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.client-logo-marquee__item img,
.client-logo-marquee__item svg {
  height: var(--client-logo-height-mobile, 56px);
  width: auto;
  display: block;
  object-fit: contain;
}

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

@media screen and (min-width: 1024px) {
  .client-logo-marquee__track {
    /* HARDCODED: 64px gap — desktop spacing; no 64px token */
    gap: 64px;
  }

  .client-logo-marquee__item img,
  .client-logo-marquee__item svg {
    height: var(--client-logo-height, 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-logo-marquee__track {
    animation: none;
  }
}
/* END_SECTION:client-logo-marquee */

/* START_SECTION:collection-colour-marquee (INDEX:15) */
/* ─── Section wrapper ─── */
  .collection-colour-marquee {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* ─── Header: heading + desktop CTA row ─── */
  .ccm-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-lg);
  }

  @media screen and (min-width: 1024px) {
    .ccm-header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 0;
    }
  }

  /* ─── Section heading ─── */
  .ccm-heading {
    color: var(--default-text-color);
  }
  @media screen and (min-width: 1024px){
    .ccm-heading {
      font-size: 38px;
    }
  }

  /* ─── Desktop CTA row (hidden on mobile) ─── */
  .ccm-cta-row {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .ccm-cta-row {
      display: flex;
      align-items: center;
      gap: var(--gap-lg);
      flex-shrink: 0;
    }
  }

  /* ─── CTA link (shared between desktop row and mobile row) ─── */
  .ccm-cta-link {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs); /* 0.25rem = 4px */
    text-decoration: none;
  }

  .ccm-cta-link:hover .ccm-cta__label {
    text-decoration: underline;
  }

  .ccm-cta-link .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  /* ─── Colour swatches container ─── */
  /* Breaks out of .container to full viewport width via negative margins,
     matching each breakpoint's container padding. */
  .ccm-swatches {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-xs); /* 0.5rem = 8px between rows */
    overflow: hidden;
    margin-top: var(--gap-lg); /* 1rem = 16px; matches spec .ccm-content gap on mobile */
    margin-inline: calc(-1 * var(--container-padding-mobile));
  }

  @media screen and (min-width: 600px) {
    .ccm-swatches {
      margin-inline: calc(-1 * var(--container-padding-tablet));
    }
  }

  @media screen and (min-width: 1024px) {
    .collection-colour-marquee .container {
      padding-inline: var(--padding-page-margin-desktop); /* 30px */
    }

    .ccm-swatches {
      margin-top: var(--margin-2xl); /* 1.5rem = 24px; spec .ccm-content desktop gap */
      margin-inline: calc(-1 * var(--padding-page-margin-desktop));
    }
  }

  @media screen and (min-width: 1440px) {
    .collection-colour-marquee .container {
      padding-inline: var(--padding-page-margin-desktop); /* 30px */
    }

    .ccm-swatches {
      margin-inline: calc(-1 * var(--padding-page-margin-desktop));
    }
  }

  @media screen and (min-width: 1920px) {
    .ccm-swatches {
      margin-inline: calc(-1 * var(--container-padding-2xl));
    }
  }

  /* ─── Marquee row wrapper ─── */
  .ccm-row {
    width: 100%;
    overflow: hidden;
  }

  /* ─── Marquee track ─── */
  .ccm-row__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ccm-row__track[data-direction="left"] {
    animation-name: ccm-scroll-left;
  }

  .ccm-row__track[data-direction="right"] {
    animation-name: ccm-scroll-right;
  }

  .ccm-row__track[data-speed="slow"] {
    animation-duration: 40s;
  }

  .ccm-row__track[data-speed="medium"] {
    animation-duration: 25s;
  }

  .ccm-row:hover .ccm-row__track {
    animation-play-state: paused;
  }

  @keyframes ccm-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes ccm-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ccm-row__track {
      animation: none;
    }
  }

  /* ─── Swatch card ─── */
  .ccm-swatch {
    display: flex;
    /* HARDCODED: spec specifies 90px height on mobile; no matching token */
    height: 90px;
    /* HARDCODED: spec specifies 12px padding; --padding-md is 0.8rem ≈ 12.8px (not exact) */
    padding: 12px;
    align-items: center;
    /* HARDCODED: 12px gap between image and label; same as padding above */
    gap: 12px;
    /* HARDCODED: spec specifies 8px border-radius; no border-radius token in theme */
    border-radius: 8px;
    /* margin-right instead of flex gap on the parent — ensures each half of the
       duplicated track has identical total width so -50% loops with zero jump */
    margin-right: var(--gap-xs);
    flex-shrink: 0;
    text-decoration: none;
  }

  @media screen and (min-width: 1024px) {
    .ccm-swatch {
      height: auto;
      /* HARDCODED: Figma spec — all cards are ~356px wide on desktop */
      min-width: 356px;
    }
  }

  /* ─── Swatch thumbnail image ─── */
  .ccm-swatch__image {
    display: flex;
    /* HARDCODED: spec specifies 87px width on mobile; no matching token */
    width: 87px;
    padding: var(--padding-4xl); /* 2rem = 32px — matches spec's 32px image inner padding */
    align-items: flex-end;
    /* HARDCODED: spec specifies 4px border-radius on image; no matching token */
    border-radius: 4px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  @media screen and (min-width: 1024px) {
    .ccm-swatch__image {
      /* HARDCODED: spec specifies 109px × 80px; no matching tokens */
      width: 109px;
      height: 80px;
      aspect-ratio: 109 / 80;
    }
  }

  /* ─── Swatch label ─── */
  .ccm-swatch__label {
    white-space: nowrap;
  }

  /* Applied by JS luminance check; --light is the SSR/no-JS fallback */
  .ccm-swatch__label--dark {
    color: var(--default-text-color);
  }

  .ccm-swatch__label--light {
    color: var(--color-white);
  }

  /* ─── Mobile CTA row (hidden on desktop) ─── */
  .ccm-cta-row--mobile {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    margin-top: var(--gap-lg); /* 1rem = 16px; matches spec .ccm-content gap */
    padding-top: var(--padding-lg); /* 1rem = 16px */
    border-top: 1px solid var(--dark-border-color);
    align-self: stretch;
  }

  @media screen and (min-width: 1024px) {
    .ccm-cta-row--mobile {
      display: none;
    }
  }
/* END_SECTION:collection-colour-marquee */

/* START_SECTION:collection-highlights (INDEX:16) */
/* ============================================================
   COLLECTION HIGHLIGHTS
   Mobile-first. Desktop overrides via @media screen and (min-width: ...).
   ============================================================ */

/* ---------- Section content wrapper ---------- */
.collection-highlights {
  display: grid;
  /* "Cards per row" section settings (--highlights-columns-mobile / --highlights-columns) */
  grid-template-columns: repeat(var(--highlights-columns-mobile, 1), minmax(0, 1fr));
  padding-inline: 16px;
  /* HARDCODED: spec calls for 12px; no exact gap token */
  gap: 12px;
}

/* ---------- Card ---------- */
.collection-highlights__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* HARDCODED: no border-radius token in theme */
  border-radius: 8px;
  border: 1px solid var(--dark-border-color);
  overflow: hidden;
  background-color: #f8f8f8;
}

/* ---------- Card image wrapper ---------- */
.collection-highlights__card-image-wrapper {
  display: block;
  width: 100%;
  /* Ratio, not a fixed height: at 375px the card image is 341x233 (Figma), and a
     fixed 233px meant every wider viewport up to 1023px cropped the image harder
     (Yu Qi feedback). The 1024px+ block below sets its own ratio. */
  aspect-ratio: 341 / 233;
  overflow: hidden;
  /* HARDCODED: 8px radius on all corners so the image's bottom edge is rounded
     inside the card as well as the top (Figma); no 8px token */
  border-radius: 8px;
}

/* ---------- Card image ---------- */
.collection-highlights__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Card image placeholder ---------- */
.collection-highlights__card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Description container ---------- */
.collection-highlights__card-desc {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: var(--padding-lg);
  gap: var(--gap-xl);
  justify-content: space-between;
}

/* ---------- Copy block (heading + text) ---------- */
.collection-highlights__card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xs);
}

/* ---------- Heading ---------- */
/* font-family comes from .h1 class on the element */
.collection-highlights__card-heading {
  margin: 0;
  color: var(--default-text-color);
  font-size: var(--highlights-heading-size-mobile, 24px); /* "Text sizes" section settings */
  font-weight: 700;
  line-height: 110%;
}

/* ---------- Body text (same type scale as heading per Figma spec) ---------- */
/* font-family comes from .h1 class on the element */
.collection-highlights__card-text {
  margin: 0;
  color: var(--grey-color);
  font-size: var(--highlights-text-size-mobile, 24px);
  font-weight: 700;
  line-height: 110%;
}

/* ---------- Link ---------- */
.collection-highlights__card-link {
  display: inline-flex;
  align-items: center;
  /* HARDCODED: spec calls for 4px; no exact gap token (--gap-2xs = 0.3rem ≈ 4.8px, --gap-xs = 8px) */
  gap: 0.25rem;
  text-decoration: none;
  color: var(--default-text-color);
}

.collection-highlights__card-link:hover .collection-highlights__card-link-label {
  text-decoration: underline;
}

.collection-highlights__card-link .svg-wrapper {
  width: 14px;
  height: 14px;
}

/* font-family comes from .p2 class on the element */
.collection-highlights__card-link-label {
  color: var(--default-text-color);
  font-size: var(--highlights-link-size-mobile, 13px);
  font-weight: 500;
  line-height: 140%;
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .collection-highlights {
    padding-inline: 23px;
  }
}
@media screen and (min-width: 1024px) {
  .collection-highlights {
    grid-template-columns: repeat(var(--highlights-columns, 3), minmax(0, 1fr));
    padding-inline: 23px;
    gap: var(--gap-xl); /* 1.25rem = 20px ✓ */
  }

  .collection-highlights__card-image-wrapper {
    height: auto;
    /* HARDCODED: aspect ratio from Figma spec (164w × 203h) */
    aspect-ratio: 164 / 203;
  }

  .collection-highlights__card-desc {
    /* HARDCODED: spec calls for 30px; --padding-4xl = 2rem/32px, --padding-3xl = 1.75rem/28px, no 30px token */
    padding: 1.875rem;
    /* HARDCODED: spec calls for 24px; no exact gap token (--gap-xl = 20px, --gap-2xl = 32px) */
    gap: 1.5rem;
  }

  .collection-highlights__card-heading {
    font-size: var(--highlights-heading-size, 30px);
  }

  .collection-highlights__card-text {
    font-size: var(--highlights-text-size, 30px);
  }

  .collection-highlights__card-link-label {
    font-size: var(--highlights-link-size, 14px);
  }
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .collection-highlights {
    padding-inline: 30px;
  }
}
/* END_SECTION:collection-highlights */

/* START_SECTION:contact-us (INDEX:17) */
/* ============================================================
   CONTACT US
   Left: heading + description + a small image collage.
   Right: the default Shopify contact form (Name, Email, Phone,
   Enquiry, Message) with a success state on submit.
   Mobile-first.
   ============================================================ */
.contact-us {
  display: block;
  /* The section always carries id="get-in-touch", so any link to
     '#get-in-touch' scrolls here. Clears the sticky header
     (--header-height is 0px when no header is present) plus a gap, so the
     title is never sat under the navbar. */
  scroll-margin-top: calc(var(--header-height, 0px) + var(--margin-4xl));
  background-color: var(--contact-us-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}


.contact-us__inner {
  display: grid;
  grid-template-columns: 1fr;
  /* HARDCODED: 40px gap — Figma spec; falls between --gap-2xl (32px) and --gap-3xl (48px) */
  gap: 2.5rem;
  align-items: start;
}

/* ---------- Left column ---------- */
.contact-us__intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.contact-us__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.contact-us__title {
  margin: 0;
  color: var(--default-text-color);
}

.contact-us__description {
  margin: 0;
  max-width: 26rem;
  color: var(--color-blue-70);
}

/* Image collage (two overlapping images). The wrap is what the desktop layout
   sizes; the collage box itself keeps the Figma ratio. */
.contact-us__collage-wrap {
  margin-top: var(--margin-2xl); /* Figma: 24px above the collage on mobile/tablet */
}

/* HARDCODED: 442/326 — Figma collage box; image 1 (top right) starts at the
   box's top edge, image 2 (bottom left) sits on its bottom edge.
   HARDCODED: 442px max — the box fills the content width on mobile but stops
   growing at the Figma box width, so on 600–1023px (single column, no form
   beside it to bound the height) the images keep their mobile size and
   relative positions instead of scaling with the viewport. Desktop sizes the
   box from the column height and lifts the cap. */
.contact-us__collage {
  position: relative;
  max-width: 600px;
  aspect-ratio: 442 / 326;
}

.contact-us__collage-img {
  position: absolute;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.contact-us__collage-img img,
.contact-us__collage-img svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-us__collage-img--a {
  left: 0;
  bottom: 0;
  width: 77%;
  aspect-ratio: 342 / 228;
  z-index: 1;
}

.contact-us__collage-img--b {
  right: 0;
  top: 0;
  /* HARDCODED: 106x142 at 375px — Figma mobile image 1 (30.9% of the 343px content width) */
  width: 30.9%;
  aspect-ratio: 160 / 213;
  z-index: 2;
}

/* ---------- Form ---------- */
.contact-us__form-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-xl) var(--padding-lg);
  gap: var(--padding-xl);
  flex: 1 0 0;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  background: var(--color-white);
}

.contact-us__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  width: 100%;
}

.contact-us__field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.contact-us__label {
  color: var(--default-text-color);
  font-weight: 500;
}

.contact-us__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-xs);
}

.contact-us__count {
  color: var(--grey-color);
  font-size: var(--font-size--xs);
}

/* Inputs */
.contact-us__input,
.contact-us__select,
.contact-us__textarea {
  width: 100%;
  padding: var(--spacing-exact-12) var(--padding-lg);
  color: var(--default-text-color);
  background: var(--body-bg-color);
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
  font-family: var(--font-p2--family);
  /* P2, matching the field labels: 13px, stepping to 14px at 1440px */
  font-size: var(--font-size--xs);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.contact-us__input::placeholder,
.contact-us__textarea::placeholder {
  /* Blue-35 (Placeholder) — no CSS var exists for #BEC5CD */
  color: #bec5cd;
}

.contact-us__input:focus-visible,
.contact-us__select:focus-visible,
.contact-us__textarea:focus-visible {
  outline: none;
  border-color: var(--default-text-color);
}

.contact-us__textarea {
  resize: vertical;
  min-height: 108px;
}

/* Phone row: country code + number */
.contact-us__phone {
  display: flex;
  gap: var(--gap-xs); /* Figma: 8px column gap */
}

/* HARDCODED: 110px — Figma country code control: 16px padding + text box +
   16px gap + 16px chevron + 16px padding. No matching token. */
.contact-us__phone .contact-us__select,
.contact-us__phone .contact-us__dropdown {
  width: 110px;
  flex: 0 0 110px;
}

.contact-us__phone .contact-us__select {
  padding-inline: var(--padding-lg) 48px; /* 16px icon + 16px gap + 16px padding */
}

.contact-us__phone .contact-us__input {
  flex: 1 1 auto;
}

/* Select chevron */
.contact-us__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2306152B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--padding-lg) center;
  padding-right: var(--padding-4xl);
}

/* ---------- Dropdowns (Figma select) ----------
   The native <select> stays in the form for its value and validation; once the
   section script runs it is hidden under a button + listbox that carry the
   design: 8px below the field, full-width rows, active/hovered row in Blue-15. */
.contact-us__dropdown {
  position: relative;
  width: 100%;
}

.contact-us__select--native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.contact-us__dropdown-toggle {
  text-align: left;
  cursor: pointer;
}

.contact-us__dropdown-toggle.is-placeholder {
  color: #bec5cd; /* Blue-35 (Placeholder) — no CSS var exists */
}

.contact-us__dropdown.is-open .contact-us__dropdown-toggle {
  border-color: var(--default-text-color);
  /* Chevron flips to point up while the list is open */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 10l4-4 4 4' stroke='%2306152B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-us__dropdown-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--gap-xs));
  z-index: var(--layer-raised);
  margin: 0;
  padding: 0;
  list-style: none;
  /* HARDCODED: 280px — keeps long code lists scrollable instead of running off-screen */
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
}

.contact-us__dropdown-option {
  padding: var(--spacing-exact-12) var(--padding-lg);
  color: var(--default-text-color);
  cursor: pointer;
}

.contact-us__dropdown-option:hover,
.contact-us__dropdown-option:focus-visible,
.contact-us__dropdown-option[aria-selected='true'] {
  background: var(--light-border-color);
  outline: none;
}

.contact-us__error {
  margin: 0;
  color: var(--color-error);
}
.contact-us__error:focus-visible,
.contact-us__success:focus-visible {
  outline: none;
}

.contact-us__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  width: 100%;
  padding: var(--padding-md);
  border: 1px solid transparent;
  /* HARDCODED: 4px radius — Figma button-corner; no 4px token */
  border-radius: 0.25rem;
  background: var(--default-text-color);
  color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-p2--family);
  font-size: var(--font-size--sm);
  font-weight: 500;
  /* Dissolve into the hover colours rather than snapping */
  transition: background-color var(--animation-values-slow), color var(--animation-values-slow),
    border-color var(--animation-values-slow);
}

.contact-us__submit:hover {
  background-color: #FEFEFE;
  border-color: #D0D7E0;
  color: #06152B;
}
.contact-us__submit:hover .contact-us__submit-icon {
  color: #FEFEFE;
  background-color: #06152B;
}

.contact-us__submit-label {
  padding-inline-start: var(--padding-xs);
}

.contact-us__submit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--color-white);
  color: var(--default-text-color);
  transition: background-color var(--animation-values-slow), color var(--animation-values-slow);
}

.contact-us__submit-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Success state */
.contact-us__success {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs); /* Figma: 8px row gap */
  width: 100%;
}

.contact-us__success-title {
  margin: 0;
  color: var(--default-text-color);
}

.contact-us__success-body {
  margin: 0;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 600px) {
  .contact-us {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  /* The collage fills whatever height is left under the copy, capped by the
     form: the wrap is a size container (so it adds nothing to the row height —
     the form panel sets it) and the collage is sized from that height, so its
     bottom lines up with the last field. Never wider than the column. */
  .contact-us__intro {
    min-height: 0;
  }

  .contact-us__collage-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--margin-lg);
    container-type: size;
  }

  .contact-us__collage {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: none;
    width: min(100%, calc(100cqh * 442 / 326));
  }

  /* Desktop image 1 is 160px of the 442px box (Figma) */
  .contact-us__collage-img--b {
    width: 36%;
  }

  /* Success state: the panel is short, so it hugs its content and the collage
     returns to flow at its natural size. */
  .contact-us__inner:has(.contact-us__success) .contact-us__form-panel {
    align-self: start;
  }

  .contact-us__inner:has(.contact-us__success) .contact-us__collage-wrap {
    flex: 0 0 auto;
    container-type: normal;
  }

  .contact-us__inner:has(.contact-us__success) .contact-us__collage {
    position: relative;
    width: 100%;
  }
}

/* ============================================================
   DESKTOP (1024px) — two columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .contact-us {
    padding-inline: var(--container-padding-desktop);
  }

  .contact-us__inner {
    /* Left copy spans 4 of the 12 Figma columns (20px gutters); the form takes
       the rest. HARDCODED: 80px — Figma gap between the copy and the form. */
    grid-template-columns: calc((100% - 11 * var(--gap-xl)) / 3 + 3 * var(--gap-xl)) minmax(0, 1fr);
    align-items: stretch;
    column-gap: 5rem;
  }

  .contact-us__intro-text {
    gap: var(--spacing-exact-12);
  }

  .contact-us__form-panel {
    padding: var(--padding-2xl) var(--padding-lg);
  }
}
@media screen and (min-width: 1024px) {
  .contact-us__title {
    font-size: 55px;
  }
}

@media screen and (min-width: 1440px) {
  .contact-us {
    /* HARDCODED: 147px inline padding — Figma spec exactly; deliberately different
       from --container-padding-xl, which is a separate, merchant-configurable setting */
    padding-inline: 9.1875rem;
  }

  /* P2 steps up here, so the field text stays in step with its label */
  .contact-us__input,
  .contact-us__select,
  .contact-us__textarea {
    font-size: var(--font-size--sm);
  }
}

@media screen and (min-width: 1920px) {
  .contact-us {
    /* HARDCODED: 147px inline padding — Figma spec exactly; deliberately different
       from --container-padding-2xl, which is a separate, merchant-configurable setting */
    padding-inline: 9.1875rem;
  }
}
/* END_SECTION:contact-us */

/* START_SECTION:content-boxes (INDEX:18) */
/* ============================================================
   CONTENT BOXES
   Bordered cards, side-by-side on desktop, stacked on mobile.
   Each: image on top, heading + subheading, text link pinned to
   the bottom. Mobile-first.
   ============================================================ */
.content-boxes {
  display: block;
  background-color: var(--content-boxes-bg, var(--body-bg-color));
  /* --carousel-gap must match spaceBetween in content-boxes.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: 12px;
  padding-inline: var(--carousel-pad);
}

.content-boxes--slider {
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

.content-boxes__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* "Title to cards gap: Compact" — Figma (Contact): 12px mobile / 16px desktop */
.content-boxes--gap-compact .content-boxes__inner {
  gap: var(--spacing-exact-12);
}

.content-boxes__title {
  margin: 0;
  color: var(--default-text-color);
}

.content-boxes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-exact-12); /* Pastel #9: 12px between stacked boxes */
}

/* ---------- Card ---------- */
.content-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dark-border-color);
  border-radius: var(--style-border-radius-image);
  overflow: hidden;
  /* Card follows the section / page background — no white surface */
  background: var(--content-boxes-bg, var(--body-bg-color));
}

.content-box__image {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  background: var(--light-border-color);
  overflow: hidden;
  border-radius: var(--style-border-radius-image);
}

.content-box__image img,
.content-box__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
}

.content-box__body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: var(--padding-lg); /* Figma: 16px all round below 1024px */
  gap: var(--gap-xl);
}

.content-box__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xs);
}

.content-box__title {
  margin: 0;
  color: var(--default-text-color);
}

.content-box__subtitle {
  margin: 0;
  /* Subdued by default; the "Descriptor colour" setting switches to body */
  color: var(--content-box-subtitle-color, var(--grey-color));
}

/* Both the box header and the descriptor carry a preset class, so their sizes
   come from the global type scale rather than from pinned pixel values.

   Legacy: sections saved before the descriptor became a preset still hold the
   old "large" value, which was the P2 body font at the H5 size tiers. Those
   keep rendering exactly as before until the setting is re-picked. */
.content-boxes--subtitle-legacy .content-box__subtitle {
  font-size: 20px; /* HARDCODED: legacy "Large" — H5 mobile size */
}

@media screen and (min-width: 1024px) {
  .content-boxes--subtitle-legacy .content-box__subtitle {
    font-size: 22px; /* HARDCODED: legacy "Large" — mirrors H5 at 1024 */
  }
}

@media screen and (min-width: 1440px) {
  .content-boxes--subtitle-legacy .content-box__subtitle {
    font-size: 24px; /* HARDCODED: legacy "Large" — mirrors H5 at 1440 */
  }
}

/* ---------- Text link ---------- */
.content-box__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs); /* 4px */
  margin-top: auto; /* pin to the bottom of the card */
  align-self: flex-start;
  color: var(--default-text-color);
  text-decoration: none;
  transition: gap var(--animation-values);
}

.content-box__link:hover {
  gap: var(--padding-xs);
}

.content-box__link .svg-wrapper {
  width: 14px;
  height: 14px;
}

/* ---------- Optional mobile slider (Swiper) ----------
   Active below 1024px when the "mobile_slider" setting is on.
   Desktop always renders the grid; JS destroys the Swiper there. */
.content-boxes--slider .content-boxes__swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; .content-boxes--slider's overflow-x: clip cuts them at
     the viewport */
  overflow: visible;
}

.content-boxes--slider .swiper-slide {
  height: auto;
  display: flex;
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --carousel-cards / --carousel-peek come from the
     per-instance style block below. Swiper runs slidesPerView: 'auto'. */
  width: calc(
    (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
    - var(--carousel-gap)
  );
}

.content-boxes--slider .swiper-slide .content-box {
  width: 100%;
}

@media screen and (min-width: 600px) {
  .content-boxes--slider .swiper-slide {
    width: calc(
      (375px - var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
      - var(--carousel-gap)
    );
  }
}

.content-boxes-border {
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 1024px) {
  .content-boxes-border {
    padding-left: 23px;
    padding-right: 23px;
  }
}
@media screen and (min-width: 1024px) {
  .content-boxes-border {
    /* HARDCODED: 32px — Figma inset for the section's top divider on desktop */
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* ============================================================
   DESKTOP (1024px) — two columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .content-boxes {
    --carousel-pad: var(--padding-page-margin-desktop);
  }

  .content-boxes__inner {
    gap: var(--padding-2xl);
  }

  .content-boxes--gap-compact .content-boxes__inner {
    gap: var(--gap-lg); /* 16px */
  }

  .content-box__body {
    padding: var(--spacing-exact-30);
    gap: var(--padding-2xl);
  }

  /* HARDCODED desktop title size keyed on the chosen preset: an H3 title
     renders at 38px (the H2 size, mobile keeps 28px). An H4 title follows the
     H4 preset (24 / 26 / 30px). No matching token. */
  .content-boxes .content-boxes__title.h3 {
    font-size: 38px;
  }

  .content-boxes__grid {
    /* half-half (2 cols) by default; "auto" mode splits by block count
       (capped at 4, wrapping to new rows beyond that) via --cb-cols. */
    grid-template-columns: repeat(var(--cb-cols, 2), 1fr);
    gap: var(--gap-xl); /* 20px */
  }

  /* Slider mode falls back to the same grid on desktop */
  .content-boxes--slider .content-boxes__track {
    display: grid;
    grid-template-columns: repeat(var(--cb-cols, 2), 1fr);
    gap: var(--gap-xl);
  }

  .content-boxes--slider .swiper-slide {
    width: auto;
    display: flex;
  }
}

@media screen and (min-width: 1440px) {
  .content-boxes {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .content-boxes {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SECTION:content-boxes */

/* START_SECTION:content-carousel (INDEX:19) */
/* ============================================================
   CONTENT CAROUSEL ("Fits for Every Shift")
   Header (title + nav) above a Swiper track of bordered cards.
   Mobile-first. Desktop overrides via @media (min-width: 1024px).
   ============================================================ */
.content-carousel {
  display: block;
  background-color: var(--content-carousel-bg, #f8f7f7);
  /* --carousel-gap must match spaceBetween in content-carousel.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: 8px;
  padding-inline: var(--carousel-pad);
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

.content-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ---------- Header: title + nav ---------- */
.content-carousel__header {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  justify-content: space-between;
}

.content-carousel__title {
  margin: 0;
  color: var(--default-text-color);
}

.content-carousel__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* Pastel #11: Swiper (watchOverflow) tags the arrows `swiper-button-lock` once
   every card is on screen, but swiper-bundle.css loads before this stylesheet
   and its `display: none` lost to .content-carousel__btn at equal specificity.
   Hiding the whole nav keeps the header from reserving an empty slot. */
.content-carousel__nav:has(.swiper-button-lock) {
  display: none;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.content-carousel__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent;
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--animation-values), border-color var(--animation-values);
}

.content-carousel__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.content-carousel__btn.swiper-button-disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

/* ---------- Track ---------- */
.content-carousel .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; the section's overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.content-carousel .swiper-slide {
  height: auto; /* let cards stretch to equal height */
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --carousel-cards / --carousel-peek come from the
     per-instance style block below. Swiper runs slidesPerView: 'auto'. */
  width: calc(
    (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
    - var(--carousel-gap)
  );
}

/* ---------- Card ---------- */
.content-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-white);
}

.content-card__image {
  aspect-ratio: 230 / 307;
  background: var(--light-border-color);
  overflow: hidden;
}

.content-card__image img,
.content-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-card__body {
  padding: var(--padding-xl); /* 20px */
}

.content-card__title {
  /* margin: 0 0 var(--margin-2xs); */
  color: var(--default-text-color);
}

.content-card__text {
  margin: 0;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .content-card__image {
    width: 230px;
  }
  .content-carousel__body {
    gap: var(--padding-2xl); /* Pastel #1: 24px header -> cards */
  }

  .content-carousel__nav {
    display: flex;
  }

  .content-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
  }

  /* Pastel #5: a card is 230px wide across desktop — the same 230 the card
     image's 230/307 ratio is built on. A fixed width rather than the
     cards-per-view formula, which only lands on 230px at exactly 1440. */
  .content-carousel .swiper-slide {
    width: 230px;
  }

  .content-card__body {
    padding: var(--padding-2xl); /* Pastel #6: 24px all round */
  }
}

@media screen and (min-width: 1440px) {
  .content-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .content-carousel {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SECTION:content-carousel */

/* START_SECTION:content-coupon (INDEX:20) */
/* ============================================================
   CONTENT COUPON ("Unlock Instant Discounts")
   Title + description, then a grid of coupon tiles (discount
   value, condition, points cost separated by a dashed rule).
   Two columns on mobile. From 1024px: title/description sit in a
   left column beside the (still 2-column) tile grid on the right,
   with the footnote below the grid. Optional footnote. CSS-only.
   Mobile-first.
   ============================================================ */
.content-coupon {
  display: block;
  background-color: var(--content-coupon-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.content-coupon__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs); /* Mobile: 8px from the tiles to the footnote */
}

.content-coupon__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  /* Mobile: 16px from the description to the tiles (8px inner gap + 8px) */
  margin-block-end: var(--gap-xs);
}

/* The manual line break in the description is a desktop-only typographic
   choice; on mobile the copy wraps naturally. */
.content-coupon__description br {
  display: none;
}

.content-coupon__title {
  margin: 0;
  color: var(--default-text-color);
}

.content-coupon__description {
  margin: 0;
  max-width: 36rem;
  color: var(--color-blue-70);
}

.content-coupon__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* HARDCODED: 12px gutter — Figma coupon grid gap */
  gap: 12px;
}

/* ---------- Coupon tile ---------- */
.coupon-tile {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  /* HARDCODED: 114px — Figma coupon tile height (as a minimum) */
  min-height: 114px;
  padding: var(--padding-2xl) var(--padding-xl);
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  /* Tile follows the section / page background — no white surface */
  background: var(--content-coupon-bg, var(--body-bg-color));
}

.coupon-tile__value {
  margin: 0;
  color: var(--default-text-color);
}

.coupon-tile__condition {
  margin: 0;
  color: var(--grey-color);
}

.coupon-tile__points {
  /* margin: auto 0 0;
  padding-top: var(--padding-xs); */
  /* border-top: 1px dashed var(--dark-border-color); */
  color: var(--color-blue-70);
  font-weight: 500;
}

.content-coupon__footnote {
  margin: 0;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px) — two columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .content-coupon {
    /* HARDCODED: 30px — Figma desktop page margin; no matching token */
    padding-inline: 30px;
  }

  .content-coupon__inner {
    /* left column: title + description. Right column: the tile grid, with
       the footnote placed below it via explicit grid placement below. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    /* 20px = one grid gutter, so the tile grid spans exactly 6 of the 12
       Figma columns and each tile lands at 336px on a 1440 screen */
    column-gap: var(--gap-xl);
    row-gap: var(--spacing-exact-12);
  }

  .content-coupon__head {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0;
  }

  .content-coupon__description br {
    display: inline;
  }

  .content-coupon__description {
    /* 4 of the 12 Figma columns (20px gutters). The head column is 6 columns
       wide (H = (W - 11g) / 2 + 5g), so 4 columns = (2H - g) / 3. */
    max-width: calc((200% - var(--gap-xl)) / 3);
  }

  /* HARDCODED: 38px — desktop title matches the H2 preset while mobile keeps
     the H3 preset (28px). No matching token. */
  .content-coupon .content-coupon__title {
    font-size: 38px;
  }

  .content-coupon__grid {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-xs);
  }

  .content-coupon__footnote {
    grid-column: 2;
    grid-row: 2;
  }

  .coupon-tile {
    padding: var(--padding-2xl);
  }
}

/* 30px from the 1024px breakpoint above holds at 1440px and 1920px too —
   no container-padding-xl/2xl override here, unlike other sections */
/* END_SECTION:content-coupon */

/* START_SECTION:fabric-selector (INDEX:23) */
/* ============================================================
   FABRIC SELECTOR
   Sticky selector (vertical list desktop / dropdown mobile) that
   scroll-links to fabric blocks. Each block = a banner + a tabbed product
   carousel (one collection per tab, one Swiper per tab, shared arrows).
   Mobile-first.
   ============================================================ */
.fabric-selector {
  display: block;
  background-color: var(--fabric-selector-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.fabric-selector__layout {
  display: block;
}

/* ---------- Desktop sticky nav (hidden on mobile) ---------- */
.fabric-selector__nav {
  display: none;
}

.fabric-selector__nav-item {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: #bec5cd; /* Blue-35 (Placeholder) — inactive; no CSS var */
  transition: color var(--animation-values);
}

.fabric-selector__nav-item img{
  opacity: 0.5; 
  object-position: left;
}
.fabric-selector__name-image{
  object-position: left;
}


.fabric-selector__nav-item.is-active {
  color: var(--default-text-color);
}
.fabric-selector__nav-item.is-active img{
  opacity: 1;
}
.fabric-selector__name-image{
  max-width: 210px;
  width: auto;
  height: 30px;
  object-fit: contain;
}

/* ---------- Mobile dropdown ---------- */
.fabric-selector__dropdown {
  position: sticky;
  /* Stick to the bottom edge of the header card (header.js keeps
     --header-card-bottom current); the section setting is the pre-JS
     fallback. The 16px block padding is the gap to the header. */
  top: max(0px, var(--header-card-bottom, var(--fabric-sticky-top-mobile, 56px)));
  z-index: var(--layer-raised);
  margin-bottom: var(--margin-lg);
  background: var(--fabric-selector-bg, var(--body-bg-color));
  padding-block: var(--padding-lg)
}

/* While the dropdown is stuck, paint the section colour behind the header
   card (from the viewport top down to the dropdown) so content scrolling
   under the header is hidden. Full-bleed across the section's inline padding.
   fabric-selector.js toggles .is-stuck. */
.fabric-selector__dropdown::before {
  content: '';
  position: absolute;
  inset-inline: calc(-1 * var(--container-padding-mobile));
  bottom: 100%;
  height: max(0px, var(--header-card-bottom, var(--fabric-sticky-top-mobile, 56px)));
  background: var(--fabric-selector-bg, var(--body-bg-color));
  opacity: 0;
  pointer-events: none;
}

.fabric-selector.is-stuck .fabric-selector__dropdown::before {
  opacity: 1;
}

.fabric-selector__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  width: 100%;
  padding: var(--spacing-exact-12) var(--padding-lg);
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
  background: var(--color-white);
  color: var(--default-text-color);
  font-weight: 500;
  cursor: pointer;
}

.fabric-selector__dropdown-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--animation-values);
}

.fabric-selector.is-open .fabric-selector__dropdown-toggle svg {
  transform: rotate(180deg);
}

.fabric-selector__dropdown-list {
  /* Overlays the content below rather than sitting in flow. In flow, opening
     the list grew the sticky dropdown and pushed every block down, so a scroll
     target measured while it was open landed too high once it closed again.
     Styling follows the Figma dropdown (PDP font select): 8px below the
     toggle, full-width rows with no inner inset, the active row tinted. */
  position: absolute;
  inset-inline: 0;
  top: calc(100% - var(--padding-lg));
  display: none;
  flex-direction: column;
  margin-top: var(--gap-xs);
  padding: 0;
  border: 1px solid var(--dark-border-color);
  border-radius: 0.25rem;
  background: var(--color-white);
  overflow: hidden; /* the tinted row follows the list's rounded corners */
}

.fabric-selector.is-open .fabric-selector__dropdown-list {
  display: flex;
}

.fabric-selector__dropdown-list .fabric-selector__nav-item {
  padding: var(--padding-lg);
  border-radius: 0;
  color: var(--default-text-color); /* every option reads Navy; the tint marks the active one */
}

.fabric-selector__dropdown-list .fabric-selector__nav-item.is-active {
  background: var(--light-border-color);
}

/* ---------- Blocks ---------- */
.fabric-selector__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-exact-56); /* 56px between fabrics */
  /* As a grid item on desktop, allow shrinking below content's intrinsic
     width so the Swiper track and banner stay within the column. */
  min-width: 0;
}

.fabric-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  min-width: 0;
  /* Mobile: the sticky header card AND the sticky dropdown both sit over the
     blocks, so scrolling a block to the viewport top hides its banner.
     fabric-selector.js measures the pair into --fabric-scroll-offset; the
     calc() is the pre-JS fallback (56px header + ~72px dropdown). */
  scroll-margin-top: var(
    --fabric-scroll-offset,
    calc(var(--fabric-sticky-top-mobile, 56px) + 4.5rem)
  );
}

.fabric-block__carousel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl); /* space between the header (tab / arrows) and the cards */
  min-width: 0;
}

/* Banner */
.fabric-block__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  /* Square (1:1) below the desktop switch, so the (mobile) image keeps its
     proportions on phones and tablets; desktop resets this to auto. */
  aspect-ratio: 1 / 1;
  padding: var(--padding-2xl) var(--padding-lg);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  isolation: isolate;
}

.fabric-block__banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--light-border-color);
}

.fabric-block__banner-bg img,
.fabric-block__banner-bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: top;
}

.fabric-block__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 55%);
}

.fabric-block__banner-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
  align-items: flex-start;
}

.fabric-block__banner-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  flex: 1 1 auto;
  min-width: 0;
}

.fabric-block__banner-title {
  margin: 0;
  color: var(--color-white);
}

.fabric-block__usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-highlight-stack);
}

/* Mobile / tablet: items fill down --usp-rows rows, then wrap into the next column.
   --usp-rows is the item count capped at the block's "USPs per column" (set inline), so a short list
   gets no empty rows / extra gaps. Desktop keeps the single list above. */
@media screen and (max-width: 1023px) {
  .fabric-block__usps {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--usp-rows, 4), auto);
    grid-auto-columns: minmax(0, 1fr);
    row-gap: var(--gap-highlight-stack);
    column-gap: var(--gap-xl);
  }
}

.fabric-block__usp {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  margin: 0;
}

.fabric-block__usp::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
  flex-shrink: 0;
}

/* Shop Women / Shop Men — homepage hero solid buttons (hero-banner__btn--solid). Side by
   side with a 12px gap; they share the row on mobile and size to their content (min
   180px) from 1024px, like the hero. */
.fabric-block__ctas {
  display: flex;
  gap: var(--spacing-exact-12);
  width: 100%;
}

.fabric-block__ctas .fabric-block__cta {
  flex: 1 1 0;
  min-width: 0;
}

@media screen and (min-width: 1024px) {
  .fabric-block__ctas {
    width: auto;
  }

  .fabric-block__ctas .fabric-block__cta {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
  }
}

/* Glass "Shop Collection" button */
.fabric-block__shop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  width: 188px;
  max-width: 100%;
  padding: var(--padding-md);
  border-radius: 4px;
  background: rgba(255, 255, 255, var(--opacity-20));
  backdrop-filter: blur(2px);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--animation-values);
}

.fabric-block__shop:hover {
  background: rgba(255, 255, 255, var(--opacity-30));
}

.fabric-block__shop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--color-white);
  color: var(--default-text-color);
}

.fabric-block__shop-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Carousel header */
.fabric-block__carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
}

/* Collection tabs — same treatment as the Product Sliders tabs: the active
   tab grows an 80px line and reads Navy, inactive labels sit in Blue-35. */
.fabric-block__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.fabric-block__tab {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--default-text-color);
  font-weight: 500;
}

.fabric-block__tab:not(.is-active) {
  margin-right: var(--gap-xs);
}

.fabric-block__tab-line {
  display: block;
  width: 0;
  height: 2px;
  background: var(--default-text-color);
  opacity: 0;
  flex-shrink: 0;
  transition: width var(--animation-values), opacity var(--animation-values);
}

.fabric-block__tab.is-active .fabric-block__tab-line {
  width: 80px;
  opacity: 1;
}

.fabric-block__tab-label {
  color: #bec5cd; /* Blue-35 (Placeholder) — no CSS var exists */
  white-space: nowrap;
  transition: color var(--animation-values);
}

.fabric-block__tab.is-active .fabric-block__tab-label {
  color: var(--default-text-color);
}

/* Inactive collection panels stay in the DOM (their Swiper is measured when
   shown) but take no space. */
.fabric-block__panel[hidden] {
  display: none;
}

.fabric-block__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.fabric-block__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  /* border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent; */
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  /* transition: background var(--animation-values), border-color var(--animation-values), color var(--animation-values); */
}

.fabric-block__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.fabric-block__btn.swiper-button-disabled {
  cursor: default;
  /* border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color); */
}

.fabric-block__carousel .swiper {
  width: 100%;
  overflow: hidden;
}

.fabric-block__carousel .swiper-slide {
  height: auto;
  /* HARDCODED: 220px — Figma mobile product card width, kept at every width
     below the desktop switch (Swiper reads it via slidesPerView: 'auto'). */
  width: 220px;
}

.fabric-block__carousel .swiper-slide > * {
  height: 100%;
}

/* ============================================================
   DESKTOP (1024px) — sticky nav + blocks
   ============================================================ */
@media screen and (min-width: 1024px) {
  .fabric-block__banner-row {
    flex-direction: row;
    align-items: flex-end;
  }

  .fabric-block__nav {
    display: flex;
  }

  .fabric-selector {
    padding-inline: var(--padding-page-margin-desktop);
  }

  .fabric-selector__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gap-3xl);
    align-items: start;
  }

  .fabric-selector__dropdown {
    display: none;
  }

  .fabric-selector__nav {
    position: sticky;
    top: var(--fabric-sticky-top, 100px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .fabric-selector__blocks {
    gap: var(--margin-6xl); /* 80px */
  }

  .fabric-block {
    gap: var(--padding-2xl); /* 24px — gap scale has no exact match (--gap-2xl is 32px) */
    /* The selector sits in its own column here — only the header overlaps. */
    scroll-margin-top: var(--fabric-sticky-top, 100px);
  }

  .fabric-block__banner {
    aspect-ratio: auto;
    padding: var(--padding-4xl); /* 32px */
  }

  .fabric-block__banner-info {
    gap: var(--spacing-exact-12);
  }

  /* Hover on an enabled arrow: navy fill, no outline, white icon (Figma).
     Disabled arrows keep their tint state. */
  .fabric-block__btn:not(.swiper-button-disabled):hover {
    /* background: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white); */
  }
}

@media screen and (min-width: 1440px) {
  .fabric-selector {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .fabric-selector {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:fabric-selector */

/* START_SECTION:faq (INDEX:24) */
/* ============================================================
   FAQ
   Left: title + "view all" link. Right: accordion list built with
   native <details> (no JS). Rows separated by rules; +/- icon.
   Mobile-first: stacks; two columns from 1024px.
   ============================================================ */
.faq {
  display: block;
  background-color: var(--faq-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
  /* Allow height transitions to/from intrinsic sizes (e.g. auto) so the
     accordion can animate open. Progressive enhancement — browsers without
     support simply open instantly. */
  interpolate-size: allow-keywords;
}

.faq__layout {
  display: flex;
  flex-direction: column;
  /* HARDCODED: 40px — mobile gap below the "view all" link (PB-40px); no matching token */
  gap: 2.5rem;
  /* Only applies when the section is jumped to via #faq. Clears the sticky
     header (--header-height is 0px when no header is present) plus a gap,
     so the title is never sat under the navbar. */
  scroll-margin-top: calc(var(--header-height, 0px) + var(--margin-4xl));
}

/* ---------- Head ---------- */
.faq__head {
  display: flex;
  flex-direction: column;
  /* Mobile: 16px between the title and the "view all" link (PT-16px) */
  gap: var(--gap-lg);
}

.faq__title {
  margin: 0;
  color: var(--default-text-color);
}

/* HARDCODED: 28px — mobile FAQ title is smaller than the H2 preset (32px);
   no matching token. Desktop returns to 38px below. */
.faq .faq__title {
  font-size: 28px;
}

.faq__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  align-self: flex-start;
  color: var(--default-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: gap var(--animation-values);
}

.faq__link:hover {
  gap: var(--padding-xs);
}

.faq__link svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* Optional contact note: a small white card under the "view all" link */
.faq__note {
  margin: 0;
  padding: var(--padding-lg); /* Figma: 16px all round */
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  background: var(--color-white);
  color: var(--color-blue-70);
}

.faq__note > :first-child { margin-top: 0; }
.faq__note > :last-child { margin-bottom: 0; }

/* Three-class selector so the link keeps the note's text colour; the global
   .rte paragraph link rule in base.css would otherwise paint it blue. */
.faq .faq__note.rte a {
  color: inherit;
}
.faq .faq__note.rte p {
  font-size: 13px;
}

/* ---------- List ---------- */
.faq__list {
  width: 100%;
}

.faq__item {
  border-top: 1px solid var(--dark-border-color);
  padding-bottom: 12px;
}

.faq__item:last-child {
  border-bottom: 1px solid var(--dark-border-color);
}

.faq__summary {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  justify-content: space-between;
  padding-block: var(--padding-xl);
  cursor: pointer;
  list-style: none;
  color: var(--default-text-color);
  font-weight: 500;
  padding-bottom: 8px;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary-text {
  margin: 0;
}

.faq__icon {
  position: relative;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
  color: var(--default-text-color);
}

.faq__icon-glyph {
  position: absolute;
  inset: 0;
  transition: opacity var(--animation-values);
}

.faq__icon .svg-wrapper > svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.faq__icon-glyph--minus {
  opacity: 0;
}

.faq__item[open] .faq__icon-glyph--plus {
  opacity: 0;
}

.faq__item[open] .faq__icon-glyph--minus {
  opacity: 1;
}

/* Smoothly animate the accordion open/close.
   ::details-content is the collapsible box of a <details> element. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size var(--animation-speed-slow) var(--animation-easing),
    content-visibility var(--animation-speed-slow) var(--animation-easing) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content {
    transition: none;
  }
}

.faq__answer {
  padding-block-end: 8px;
  padding-inline-end: var(--padding-4xl);
  color: var(--color-blue-70);
}

.faq__answer .p2 > :first-child { margin-top: 0; }
.faq__answer .p2 > :last-child { margin-bottom: 0; }

/* ============================================================
   DESKTOP (1024px) — two columns
   ============================================================ */
@media screen and (min-width: 1024px) {
  .faq {
    /* HARDCODED: 30px — Figma desktop page margin; no matching token */
    padding-inline: 30px;
  }

  .faq__layout {
    container-type: inline-size;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap-3xl);
    --faq-grid-gutter: 24px;
    --faq-grid-column: calc((100cqi - 11 * var(--faq-grid-gutter)) / 12);
  }

  .faq__head {
    flex: 0 0 25%;
    gap: var(--gap-2xl);
  }

  .faq__note {
    width: calc(3 * var(--faq-grid-column) + 2 * var(--faq-grid-gutter));
  }

  .faq__list {
    flex: 1 1 0;
    max-width: 911px;
  }

  /* 24px of clear space on both sides of every rule. Above the question that
     is the summary's own top padding; below the row it is the summary's (or,
     when open, the answer's) 8px plus the item's bottom padding. */
  .faq__summary {
    padding-block-start: var(--padding-2xl); /* 24px */
  }

  .faq__item {
    padding-bottom: var(--padding-lg); /* 16px + the 8px above it = 24px */
  }

  .faq__answer.rte .p2,
  .faq__answer.rte .p2 *, 
  .faq__summary-text.p2--bold {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .faq .faq__title {
    font-size: 38px;
  }

  .faq .faq__note.rte p {
    font-size: 14px;
  }
}

/* 30px from the 1024px breakpoint above holds at 1440px and 1920px too —
   no container-padding-xl/2xl override here, unlike other sections */
/* END_SECTION:faq */

/* START_SECTION:feature-blocks (INDEX:25) */
/* ============================================================
   FEATURE BLOCKS
   Mobile-first. Desktop overrides via @media screen and (min-width: 1024px).
   ============================================================ */

/* ---------- Section content wrapper ---------- */
.feature-blocks {
  padding-inline: 16px;
}

/* ---------- Cards container ---------- */
.feature-blocks__cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs); /* 0.5rem = 8px */
}

/* ---------- Individual card ---------- */
.feature-block {
  display: flex;
  align-items: center;
  /* HARDCODED: 8px radius; --style-border-radius-sm = 0.6rem/9.6px, --style-border-radius-xs = 0.2rem/3.2px — no 8px token */
  border-radius: 0.5rem;
  border: 1px solid var(--dark-border-color);
  overflow: hidden;
}

/* ---------- Card image (background-image thumbnail) ---------- */
.feature-block__image {
  display: flex;
  align-items: flex-end;
  width: 61px;
  height: 81px;
  padding: var(--padding-4xl); /* 2rem = 32px */
  flex-shrink: 0;
  border-radius: 0.5rem;
  background-color: var(--light-border-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-self: stretch;
}

/* ---------- Text container ---------- */
.feature-block__body {
  display: flex;
  flex-direction: column;
  /* HARDCODED: 12px padding-block, 16px padding-inline; 12px = 0.75rem — no 12px padding token (--padding-md = 0.8rem/12.8px, --padding-sm = 0.7rem/11.2px) */
  padding: 0.75rem var(--padding-lg);
}

/* ---------- Title — font-family, font-size, line-height from .p2--bold class ---------- */
.feature-block__title {
  margin: 0;
}

/* ---------- Body text — font-family, font-size, line-height from .p2 class ---------- */
.feature-block__text {
  margin: 0;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .feature-blocks {
    padding-inline: 30px;
  }

  .feature-blocks__cards {
    flex-direction: row; /* column → row: all cards in a single row */
  }

  .feature-block {
    flex: 1 0 0;
    flex-direction: column; /* row → column: image stacks above text */
    align-items: stretch;
  }

  .feature-block__image {
    width: 100%; /* override fixed 61px → fluid */
    /* Figma 1440: 5 cards across a 1380px row = 268 x 100 image box. Holding that
       ratio instead of a fixed 100px height keeps the crop identical at every
       desktop width — a fixed height crops harder as the cards narrow. */
    height: auto;
    aspect-ratio: 268 / 100;
    flex-shrink: unset;
    align-self: auto;
  }

  .feature-block__body {
    padding: var(--padding-lg); /* 1rem = 16px on all sides */
    align-items: flex-start;
  }
}
/* END_SECTION:feature-blocks */

/* START_SECTION:floating-images (INDEX:26) */
/* ============================================================
   FLOATING IMAGES
   An asymmetric collage of images positioned absolutely on a
   ratio-based canvas. Every image's position, width, aspect and
   stacking order are adjustable per breakpoint from block settings.
   Mobile-first: mobile vars apply by default, desktop vars at 1024px+.
   ============================================================ */
.floating-images {
  display: block;
  background-color: var(--floating-images-bg, transparent);
  padding-inline: var(--container-padding-mobile);
}

.floating-images__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fi-ratio-mobile, 1);
  overflow-x: clip;
  overflow-y: visible;
}

.floating-images__item {
  position: absolute;
  left: calc(var(--fi-x-m, 0) * 1%);
  top: calc(var(--fi-y-m, 0) * 1%);
  width: calc(var(--fi-w-m, 40) * 1%);
  aspect-ratio: var(--fi-ratio, 1);
  z-index: var(--fi-z, 1);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.floating-images__item img,
.floating-images__item svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 600px) {
  .floating-images {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  .floating-images__canvas {
    max-width: 37.5rem;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1024px) {
  .floating-images {
    padding-inline: var(--container-padding-desktop);
  }

  .floating-images__canvas {
    aspect-ratio: var(--fi-ratio-desktop, 2.4);
  }

  .floating-images__item {
    left: calc(var(--fi-x, 0) * 1%);
    top: calc(var(--fi-y, 0) * 1%);
    width: calc(var(--fi-w, 20) * 1%);
  }
}

@media screen and (min-width: 1440px) {
  .floating-images {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .floating-images {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:floating-images */

/* START_SECTION:header-announcements (INDEX:30) */
/* The leading gutter is moved off the bar and onto the slides (below) so a
     scrolling announcement can reach the viewport edge. Swiper neutralises a
     negative margin on a slide — fade mode transforms each slide by its own
     offset — so padding is the only lever that actually moves the clip. */
  .announcement-bar {
    background-color: var(--background-color);
    color: var(--text-color);
    padding-block: var(--padding-2xs); /* Figma: 4px top/bottom on mobile */
    padding-inline-start: 0;
    padding-inline-end: var(--container-padding-mobile);
  }

  .announcement-bar__slider {
    position: relative;
  }

  /* Room on the right so the centred text never sits under the pause button.
     The slide is also the clipping window for the mobile marquee: it has to be
     the element that stays put while the text inside it is translated, or the
     clip travels along with the text and reveals nothing. */
  .announcement-bar__slide {
    /* Carries the bar's leading gutter as well as its own, so a centred
       announcement still sits on the viewport's centre line. */
    padding-inline-start: calc(var(--container-padding-mobile) + var(--padding-2xl));
    padding-inline-end: var(--padding-2xl);
    overflow: hidden;
  }

  /* Mobile: the bar is strictly one line. An announcement wider than the bar
     scrolls horizontally instead of wrapping, and its slide is held until the
     scroll has finished — announcement-bar.js measures the overflow and writes
     the distance, the travel time and the matching per-slide Swiper autoplay
     delay, so the rotation waits on the text rather than a fixed interval. */
  .announcement-bar__text {
    white-space: nowrap;
  }

  /* A scrolling announcement runs the full width of the bar: the slide is
     pulled back out through the bar's own inline padding and drops its leading
     padding, so the clipping window starts at the viewport edge instead of a
     gutter in from it. The trailing padding stays — that is what keeps the text
     clear of the pause button. Only marquee slides move; a centred short
     announcement keeps its symmetric gutters.

     announcement-bar.js measures the travel distance AFTER adding this class,
     because it is what decides the width the text has to scroll through. */
  .announcement-bar__slide--marquee {
    padding-inline-start: 0;
    /* 32px = the pause button's whole footprint (16px icon + its 16px leading
       pad), so the scroll stops exactly at the button's edge instead of running
       its last characters underneath. A centred slide keeps the smaller
       trailing pad — it is short by definition and never reaches the button. */
    padding-inline-end: var(--padding-4xl);
  }

  /* Centring a line that doesn't fit would clip its start, so a scrolling
     announcement starts flush left instead — but it starts one gutter in, not
     hard against the glass. The gutter is padding on the text rather than on the
     slide, so it only sets where the text BEGINS: the slide still clips at the
     viewport edge, and the text stays visible all the way out to it as it
     travels. Padding on the slide would move the clip too and cut the text off
     a gutter early. */
  .announcement-bar__slide--marquee .announcement-bar__text {
    text-align: left;
    padding-inline-start: var(--container-padding-mobile);
  }

  /* Seamless loop. A single copy of the text can only restart, which yanks the
     whole line back by its own width in one frame — measured at 83px in a single
     frame, and that jump is the flicker. So the text is duplicated into a flex
     track and translated by exactly one copy plus the gap: the second copy lands
     where the first began, making the wrap invisible. announcement-bar.js builds
     the copy, measures the advance and hides the duplicate from assistive tech
     so the announcement isn't announced twice. */
  .announcement-bar__track {
    /* Default, and desktop: behave as though the wrapper weren't there, so the
       text wraps normally and the duplicate stays out of the way. */
    display: contents;
  }

  .announcement-bar__copy[aria-hidden='true'] {
    display: none;
  }

  .announcement-bar__slide--marquee .announcement-bar__track {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xl);
  }

  .announcement-bar__slide--marquee .announcement-bar__copy {
    flex: none;
    white-space: nowrap;
  }

  .announcement-bar__slide--marquee .announcement-bar__copy[aria-hidden='true'] {
    display: block;
  }

  /* Always right-to-left, looped: each pass scrolls one full copy past, and the
     rotation waits for two of them. Deliberately NOT `alternate` — that reverses
     the travel and reads as a back-and-forth wobble rather than a marquee. */
  .announcement-bar__slide--marquee.swiper-slide-active .announcement-bar__text {
    animation: announcement-marquee var(--announcement-marquee-travel, 6s) linear
      var(--announcement-marquee-hold, 1s) 2 normal both;
  }

  /* A lone announcement has no next slide to hand over to, so it keeps looping
     instead of stopping after the two passes. The autoplay attribute is only
     rendered when there are slides to rotate. */
  announcement-bar-component:not([autoplay])
    .announcement-bar__slide--marquee.swiper-slide-active
    .announcement-bar__text {
    animation-iteration-count: infinite;
  }

  /* Paused by the button or a hidden tab, suspended by a hovering pointer —
     either way Swiper's autoplay has stopped, so the scroll has to stop with it
     or the two drift apart. The selector repeats the full marquee chain because
     the `animation` shorthand above resets animation-play-state to running, and
     a shorter selector loses to it on specificity. */
  announcement-bar-component[paused]
    .announcement-bar__slide--marquee.swiper-slide-active
    .announcement-bar__text,
  announcement-bar-component[suspended]
    .announcement-bar__slide--marquee.swiper-slide-active
    .announcement-bar__text {
    animation-play-state: paused;
  }

  @keyframes announcement-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-1 * var(--announcement-marquee-distance, 0px)));
    }
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }

  /* Pause / resume the rotation. The component's [paused] attribute swaps the icon. */
  .announcement-bar__pause {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    z-index: var(--layer-flat);
    padding-left: 16px;
  }

  /* HARDCODED: 16px mobile / 14px desktop — Figma pause icon sizes */
  .announcement-bar__pause .svg-wrapper,
  .announcement-bar__pause svg {
    width: 16px;
    height: 16px;
  }

  .announcement-bar__pause-icon--play,
  announcement-bar-component[paused] .announcement-bar__pause-icon--pause {
    display: none;
  }

  announcement-bar-component[paused] .announcement-bar__pause-icon--play {
    display: flex;
  }

  @media screen and (min-width: 1024px) {
    .announcement-bar {
      padding-block: var(--padding-xs); /* 8px on desktop (was the py-2 utility) */
      padding-inline: var(--container-padding-desktop);
    }

    /* Desktop has room for the full line, so the bar goes back to wrapping,
       centred text and the section's fixed rotation speed. The component drops
       data-swiper-autoplay here too, so Swiper falls back to that speed. */
    .announcement-bar__text {
      white-space: normal;
    }

    /* Symmetric gutters again — the full-bleed trick is mobile-only. The class
       can survive a resize past the breakpoint before the component re-measures,
       so the marquee slide is reset too, not just the animation. */
    .announcement-bar__slide,
    .announcement-bar__slide--marquee {
      padding-inline: var(--padding-2xl);
    }

    /* The active-slide selector is listed too: it is what carries the animation
       on mobile, and at (0,3,0) it outranks a plain descendant reset here — so
       without it the animation would survive a class that lingers past a resize
       until the component re-measures. */
    .announcement-bar__slide--marquee .announcement-bar__text,
    .announcement-bar__slide--marquee.swiper-slide-active .announcement-bar__text {
      text-align: inherit;
      animation: none;
      padding-inline-start: 0;
    }

    /* The duplicate is a mobile-marquee device only; on desktop the wrapper goes
       back to being transparent so the single copy wraps as normal text. */
    .announcement-bar__slide--marquee .announcement-bar__track {
      display: contents;
    }

    .announcement-bar__slide--marquee .announcement-bar__copy[aria-hidden='true'] {
      display: none;
    }

    .announcement-bar__pause .svg-wrapper,
    .announcement-bar__pause svg {
      width: 14px;
      height: 14px;
    }
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:31) */
body {
    --header-height: 0px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  body:has(> #header-group > header) {
    --header-height: 60px;
  }

  body:has(> #header-group:empty) {
    --header-group-height: 0px;
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    /* When hovering custom menu dropdown, force white background under transparent header */
    &:has(.menu-dropdown:hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: #ffffff;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    .header__row {
      /* Slower transition for "out" animation */
      transition: color var(--animation-values-slow), border-color var(--animation-values-slow),
        background-color var(--animation-values-slow);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;
    /* Always a stacking context above the page, so the dropdown backdrop
       (html[data-menu-open] body::before, one layer below) never covers the
       nav card even before the header turns sticky. */
    z-index: var(--layer-sticky);
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  .header[data-sticky-state='idle'],
  .header[data-sticky-state='active'][data-animating] {
    opacity: 0;
  }

  .header__row {
    position: relative;
    width: auto;
    margin-inline: var(--padding-lg);
    /* margin-block-start: var(--padding-sm); */
    margin-block-start: 12px;
    border-radius: 4px;
    overflow: scroll;
    scrollbar-width: none;

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

    /* will default to bg from its color scheme unless --header-bg-color is transparent.
       Figma White surface is #FEFEFE (the --color-white token is #FFFFFF). */
    background-color: var(--header-bg-color, #FEFEFE);
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 1199px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 1200px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile and tablet, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 1199px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    /* 8px between every icon box at 1200px+ (Figma / Yu Qi feedback). The old
       --gap-xl (20px) was clawed back with negative margins on .search-action
       and header-actions; those are gone, so the real gap lives here. */
    gap: var(--gap-xs);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 1200px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 1199px) {
      display: flex;
      grid-column: span 3;
      align-items: center;
      /* HARDCODED: 12px between icon boxes below 1200px (Figma / Yu Qi
         feedback) — no gap token equals 12px (sm is 11.2px, md 14.4px). */
      gap: 12px;
      padding-block: 0;
      /* HARDCODED: 20px left / 16px right — Figma mobile nav bar padding; no matching tokens */
      padding-inline: 20px 16px;

      .header-logo {
        order: -1;
        margin-inline-end: auto;
      }
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
      Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.dropdown-localization__button:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .dropdown-localization__button:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .dropdown-localization__button,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Set header paddings based on height setting */
  .header {
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, the section background extends to the viewport top.
     padding-top (not margin-top) keeps the background flush while pushing content below the card. */
  .header-section:has(.header[transparent]) + .shopify-section {
    padding-top: calc(var(--header-height) + var(--padding-sm));
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
   * the height of the header
   */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  @media screen and (min-width: 1200px) {
    .header__row {
      height: 56px;
      margin-inline: var(--padding-hero-banner-content-end);
      margin-block-start: var(--padding-lg);
      border-radius: 4px;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .header__columns {
      flex: 1 0 0;
      padding-inline: 24px;
      padding-block: 12px;
      align-items: center;
      justify-content: space-between;
    }
    
    .header__column {
      align-items: center;
    }
  }
  .header__row {
    margin-bottom: 12px;
  }
  @media screen and (min-width: 1200px) {
    .header__row {
      margin-bottom: 16px;
    }
  }

  /* Desktop dropdown backdrop: #000 at 40% with an 8px blur over the page while
     any menu dropdown is open. header-menu.js mirrors the open state onto
     <html> as data-menu-open (alongside scroll-lock). The overlay lives on
     body::before at the root stacking context, one layer below the sticky
     header, so it renders identically whether the header is at the top of the
     page or re-shown after scrolling — a pseudo inside the header was clipped
     by the sticky header's own stacking context. */
  @media screen and (min-width: 1200px) {
    html[data-menu-open] body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: calc(var(--layer-sticky) - 1);
      background: rgb(0 0 0 / var(--opacity-40));
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      pointer-events: none;
      animation: header-backdrop-in var(--animation-values-slow) both;
    }

    @keyframes header-backdrop-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }

  /* The navbar switches between its mobile and desktop layouts at 1200px, not
     at the sitewide 1024px breakpoint, so it cannot use the global
     .mobile\:hidden / .desktop\:hidden utilities — those would flip at 1024px
     and desync the header between 1024px and 1199px. */
  @media screen and (max-width: 1199px) {
    .header-hidden--mobile {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  @media screen and (min-width: 1200px) {
    .header-hidden--desktop {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero-banner-centered (INDEX:32) */
/* ============================================================
   Hero Banner — section-scoped styles
   All rules are prefixed with .hero-banner-slide or
   .hero-banner__ to avoid bleed into other sections.
   ============================================================ */

/* ----------------------------------------------------------
   Consistent height — set once on the container so all slides
   are the same height regardless of image dimensions.
   ---------------------------------------------------------- */
hero-banner {
  display: block;
  /* Mobile: 500px, or the remaining viewport below the announcement bar when the
     section's "Mobile height" setting is "Fill the fold" (hero-banner.js measures
     the offset into --hero-fold-offset). */
  height: 500px;
}

hero-banner[data-mobile-height='fold'] {
  height: calc(100svh - var(--hero-fold-offset, 0px));
}

/* Tablet (600–1023): the banner sits inside the same 16px inline inset as the
   nav card above it (Figma). Phones and desktop stay full-bleed. */
@media screen and (min-width: 600px) and (max-width: 1023px) {
  hero-banner {
    margin-inline: var(--padding-lg);
  }
}

@media screen and (min-width: 1024px){
  hero-banner,
  hero-banner[data-mobile-height='fold'] {
    /* Figma: 1440-wide banner at the height chosen in the "Desktop height"
       setting (600 or 800, exposed as the unitless --hero-height-1440), scaled
       proportionally with the viewport. Floored at the mobile height (a pure
       ratio would fall to 427px at 1024) and capped at 800px so a banner on an
       ultra-wide screen can never outgrow a short viewport — which is what
       pushed the bottom-anchored hero text below the fold. */
    height: clamp(500px, calc(var(--hero-height-1440, 600) / 1440 * 100vw), 800px);
  }
}

/* Pre-init: render the first slide (the LCP image) immediately at full
   width instead of hiding the whole banner until the deferred Swiper
   bundle initializes. Later slides stay hidden; .swiper's overflow:hidden
   clips them out of view. */
hero-banner:not(.swiper-initialized) .swiper-slide {
  width: 100%;
  flex-shrink: 0;
}

hero-banner:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  visibility: hidden;
}

hero-banner .swiper-wrapper,
.hero-banner-slide,
.hero-banner-slide > * {
  height: 100%;
}

.hero-banner-slide .image-block {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* With a separate mobile image, the image block wraps each <img> in a plain
   div. Stretch those wrappers so the 100% image height below has something
   to resolve against — otherwise the picture keeps its own ratio and leaves
   a strip of page background under it. */
.hero-banner-slide .image-block > div {
  height: 100%;
}

.hero-banner-slide .image-block__image,
.hero-banner-slide .placeholder-image {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center;
}

/* ----------------------------------------------------------
   Content vertical positioning
   Mobile: content sits at the bottom of the slide.
   Tablet+: revert to the slide's default (justify-center).
   ---------------------------------------------------------- */
/* Hero banner owns its own padding at every breakpoint — neutralize the
   shared .container utility here instead of stacking two paddings that
   must be hand-tuned to add up to the Figma value. */
.hero-banner-slide .container {
  padding-inline: 0;
}

/* Single source of truth for the banner's left/right gutter. The slide content
   and the pagination dashes must share one left edge, so both read this — they
   previously drifted apart because the dashes were positioned off
   --container-padding-* instead. Values are the Figma page margins. */
hero-banner {
  --hero-gutter: 16px;
}
/* Tablet (600-1023): the banner is inset 16px like the nav card, so the copy
   gutter matches the card's 20px inner padding and the text lines up with
   the logo. HARDCODED: 20px, the header's mobile inner padding. */
@media screen and (min-width: 600px) and (max-width: 1023px) {
  hero-banner {
    --hero-gutter: 20px;
  }
}
/* 1200+: the navbar switches to its desktop layout (see header.liquid), so the
   banner follows the 50px nav bar inset. The 1200px step is the navbar's own
   breakpoint — used here only to stay aligned with it. */
@media screen and (min-width: 1200px) {
  hero-banner {
    --hero-gutter: 50px; /* Figma: banner L/R padding, matches the 50px nav bar inset */
  }
}

.hero-banner-slide .content-wrapper {
  justify-content: flex-end;
  padding: var(--padding-4xl) var(--hero-gutter); /* Figma: Padding-Section-XS 32px, Padding-Page-margin 16px */
}
@media screen and (min-width: 1024px) {
  .hero-banner-slide .content-wrapper {
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   Content entrance animation — staggered per block child.
   JS adds .is-active on init and after each slide transition.
   Removing the class snaps children back to hidden instantly
   (no animation applies without .is-active), then re-adding
   it restarts the keyframe fresh on the next slide.
   ---------------------------------------------------------- */
@keyframes hero-drop-in {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-banner__content > * {
  opacity: 0;
  transform: translateY(-24px);
}

.hero-banner__content.is-active > * {
  animation: hero-drop-in 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-banner__content.is-active > *:nth-child(1) { animation-delay: 0ms; }
.hero-banner__content.is-active > *:nth-child(2) { animation-delay: 400ms; }
.hero-banner__content.is-active > *:nth-child(3) { animation-delay: 800ms; }
.hero-banner__content.is-active > *:nth-child(4) { animation-delay: 1200ms; }
.hero-banner__content.is-active > *:nth-child(5) { animation-delay: 1600ms; }
.hero-banner__content.is-active > *:nth-child(6) { animation-delay: 2000ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-banner__content.is-active > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------
   Eyebrow pill badge
   ---------------------------------------------------------- */
.hero-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  /* Symmetric block padding — keeps the label text centred inside the pill */
  padding: var(--padding-3xs) var(--padding-xs);
  border-radius: 4px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
}

.hero-banner__eyebrow-divider {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Hero button (glassmorphism)
   ---------------------------------------------------------- */
.hero-banner__btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-exact-12);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-exact-12);
  border-radius: var(--style-border-radius-button);
  background: rgb(var(--color-white-rgb) / var(--opacity-40));
  backdrop-filter: blur(2px);
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  justify-content: space-between;
  transition: background var(--animation-values);
  width: 100%;
}

/* `flex: 1 1 0` above shares a row between buttons inside a group. A button
   dropped straight onto the slide is a flex item in the content *column*, so
   that basis would stretch it over the full banner height instead. */
.hero-banner__content > .hero-banner__btn {
  flex: 0 0 auto;
}

.hero-banner__btn-label {
  white-space: nowrap;
}

.hero-banner__btn:hover {
  background: #fefefe;
  color: #06152B;
}
.hero-banner__btn:hover .hero-banner__btn-icon {
  background: #06152B;
  color: #fefefe;
}

.hero-banner__content .group-block-content {
  justify-content: flex-start;
}

.hero-banner__btn-icon {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--color-white);
  flex-shrink: 0;
}

.hero-banner__btn-icon .svg-wrapper,
.hero-banner__btn-icon .svg-wrapper > svg {
  width: 1rem;
  height: 1rem;
}

/* ----------------------------------------------------------
   Pagination — vertical dashes on mobile (right edge),
   horizontal dashes on desktop (bottom-left)
   ---------------------------------------------------------- */
hero-banner .swiper-pagination {
  position: absolute !important;
  right: var(--padding-lg) !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-xs);
  z-index: var(--layer-flat);
  width: auto !important;
}

hero-banner .swiper-pagination-bullet {
  position: relative;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: rgba(254, 254, 254, var(--opacity-40));
  opacity: 1 !important;
  margin: 0 !important;
  overflow: hidden;
  cursor: pointer;
  transition: height var(--animation-speed-slow) var(--animation-easing);
}

hero-banner .swiper-pagination-bullet-active {
  height: 48px;
  background: rgba(254, 254, 254, 0.2);
}

.hero-banner__bullet-fill {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  transform-origin: top center;
  transform: scaleY(0);
}

hero-banner .swiper-pagination-bullet-active .hero-banner__bullet-fill {
  animation: hero-bullet-fill-y var(--hero-autoplay-duration, 5000ms) linear forwards;
}

@keyframes hero-bullet-fill-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media screen and (min-width: 1024px) {
  hero-banner .swiper-pagination {
    flex-direction: row;
    align-items: center;
    right: auto !important;
    top: auto !important;
    bottom: var(--padding-5xl) !important;
    left: var(--hero-gutter) !important;
    transform: none;
  }

  hero-banner .swiper-pagination-bullet {
    width: 20px;
    height: 3px;
    transition: width var(--animation-speed-slow) var(--animation-easing);
  }

  hero-banner .swiper-pagination-bullet-active {
    width: 48px;
    height: 3px;
  }

  .hero-banner__bullet-fill {
    transform-origin: left center;
    transform: scaleX(0);
  }

  hero-banner .swiper-pagination-bullet-active .hero-banner__bullet-fill {
    animation-name: hero-bullet-fill-x;
  }

  @keyframes hero-bullet-fill-x {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* With no descriptor under it, the heading carries the whole gap down to the
   call to action, so its own block margin is not the right distance. */
@media screen and (max-width: 1023px) {
  .hero-banner-slide .hero-banner__content > .text-block:has(.h1):not(:has(~ .text-block)):not(:last-child) {
    margin-block-end: var(--padding-4xl); /* 32px */
  }
}

/* ----------------------------------------------------------
   Desktop layout: text/eyebrow/pagination left, buttons right.
   Mobile is untouched — all rules below are tablet+ only.
   ---------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .hero-banner-slide .hero-banner__content.content-wrapper {
    display: grid;
    /* Text sits in a third of the content width (Figma 4-of-12 columns); the
       1fr spacer keeps the buttons column on the right edge. */
    grid-template-columns: 50% 1fr auto;
    grid-template-rows: repeat(20, auto);
    align-content: end;
    align-items: start;
    column-gap: 20px;
    padding-top: var(--padding-hero-banner-content-end);
    padding-bottom: var(--padding-hero-banner-content-end);
    max-width: none;
    width: 100%;
  }

  .hero-banner-slide .hero-banner__content > *:not(.group-block) {
    grid-column: 1;
  }

  .hero-banner-slide .hero-banner__content > .group-block {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: end;
  }

  /* Same for a button added straight to the slide rather than through a
     group — it is still a call to action, not part of the text column. */
  .hero-banner-slide .hero-banner__content > .hero-banner__btn {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: end;
  }

  .hero-banner-slide .h1 {
    font-size: 55px;
    line-height: 1.1;
    font-weight: 700;
  }

  .hero-banner-slide .hero-banner__content > .hero-banner__eyebrow {
    justify-self: start;
    margin-block-end: 24px;
  }

  .hero-banner-slide .hero-banner__content > .text-block:has(.h1) {
    margin-block-end: 12px;
  }

  /* The buttons column bottom-aligns to the text column, so when the heading
     is the last thing in that column its trailing margin would drop the
     buttons a step below the text instead of level with it. */
  .hero-banner-slide .hero-banner__content > .text-block:has(.h1):not(:has(~ .text-block)) {
    margin-block-end: 0;
  }

  /* Multi-slide banners keep 24px under the descriptor to clear the
     pagination dashes that sit bottom-left. */
  .hero-banner-slide .hero-banner__content > .text-block:has(.p1) {
    margin-block-end: 24px;
  }

  /* Single slide: no pagination, so the descriptor bottom-aligns with the
     buttons in the right-hand column (Figma). */
  .hero-banner--single .hero-banner-slide .hero-banner__content > .text-block:has(.p1) {
    margin-block-end: 0;
  }

  .hero-banner-slide .hero-banner__btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
  }

  hero-banner .swiper-pagination-bullet {
    background: var(--color-blue-35); /* Blue-35 (Placeholder) */
  }

  hero-banner .swiper-pagination {
    bottom: 50px !important;
  }
}

@media screen and (min-width: 1024px) {
  /* The grid track above sets the width; nothing may spill out of it. */
  .hero-banner-slide .hero-banner__content > *:not(.group-block) {
    max-width: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .hero-banner-slide .hero-banner__content.content-wrapper {
    grid-template-columns: 33.33% 1fr auto;
  }
}

/* ============================================================
   Hero Banner (Centered) — sections/hero-banner-centered.liquid.
   Same slides as the Hero Banner. "Button position: Under the text" (.hero-banner--stacked)
   puts the buttons in the same column as the heading / logo and text, on every screen size.
   The column follows the slide's own settings: Alignment (--content-alignment: start / center
   / end, also the text alignment) and Content Position (--margin-left / --margin-right).
   Alignment + Content Position "Center" = everything centred in the banner.
   "Right corner" keeps the Hero Banner layout. Scoped, so the original section is unchanged.
   ============================================================ */
hero-banner.hero-banner--stacked .hero-banner-slide .hero-banner__content.content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--content-alignment, center);
  text-align: var(--content-alignment, center);
  width: 100%;
  max-width: var(--content-max-width, 650px);
  margin-left: var(--margin-left, auto);
  margin-right: var(--margin-right, auto);
}

hero-banner.hero-banner--stacked .hero-banner-slide .hero-banner__content > * {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  justify-self: auto;
}

hero-banner.hero-banner--stacked .hero-banner__content .group-block-content {
  justify-content: var(--content-alignment, center);
}

@media screen and (min-width: 1024px) {
  hero-banner.hero-banner--stacked .hero-banner-slide .hero-banner__content.content-wrapper {
    grid-template-columns: none;
    padding-top: var(--padding-hero-banner-content-end);
    padding-bottom: var(--padding-hero-banner-content-end);
  }

  /* The descriptor sits above the buttons here, so it keeps its gap even on a single slide. */
  hero-banner.hero-banner--stacked .hero-banner-slide .hero-banner__content > .text-block:has(.p1) {
    margin-block-end: 24px;
  }
}
/* "Mobile content alignment" = Left: below 1024px the heading, text and buttons line up on
   the left edge, overriding the slide's Alignment / Content Position and the heading / text
   blocks' own alignment. "Slide setting" leaves mobile as configured on the slide. */
@media screen and (max-width: 1023px) {
  hero-banner[data-mobile-align='left'] .hero-banner-slide .hero-banner__content.content-wrapper {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }

  /* Blocks set to "center" are also centred with margin-inline: auto
     (.text-block--align-center in snippets/text.liquid), on the block and its children */
  hero-banner[data-mobile-align='left'] .hero-banner__content > .text-block {
    align-items: flex-start;
    align-self: flex-start;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  hero-banner[data-mobile-align='left'] .hero-banner__content > .text-block > * {
    text-align: left;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  hero-banner[data-mobile-align='left'] .hero-banner__content .group-block-content {
    justify-content: flex-start;
  }
}
/* END_SECTION:hero-banner-centered */

/* START_SECTION:hero-banner (INDEX:33) */
/* ============================================================
   Hero Banner — section-scoped styles
   All rules are prefixed with .hero-banner-slide or
   .hero-banner__ to avoid bleed into other sections.
   ============================================================ */

  /* ----------------------------------------------------------
   Consistent height — set once on the container so all slides
   are the same height regardless of image dimensions.
   ---------------------------------------------------------- */
  hero-banner {
    display: block;
    /* Mobile: 500px, or the remaining viewport below the announcement bar when the
     section's "Mobile height" setting is "Fill the fold" (hero-banner.js measures
     the offset into --hero-fold-offset). */
    height: 500px;
  }

  hero-banner[data-mobile-height='fold'] {
    height: calc(100svh - var(--hero-fold-offset, 0px));
  }

  /* Tablet (600–1023): the banner sits inside the same 16px inline inset as the
   nav card above it (Figma). Phones and desktop stay full-bleed. */
  @media screen and (min-width: 600px) and (max-width: 1023px) {
    hero-banner {
      margin-inline: var(--padding-lg);
    }
  }

  @media screen and (min-width: 1024px) {
    hero-banner,
    hero-banner[data-mobile-height='fold'] {
      /* Figma: 1440-wide banner at the height chosen in the "Desktop height"
       setting (600 or 800, exposed as the unitless --hero-height-1440), scaled
       proportionally with the viewport. Floored at the mobile height (a pure
       ratio would fall to 427px at 1024) and capped at 800px so a banner on an
       ultra-wide screen can never outgrow a short viewport — which is what
       pushed the bottom-anchored hero text below the fold. */
      height: clamp(500px, calc(var(--hero-height-1440, 600) / 1440 * 100vw), 800px);
    }
  }

  /* "Keep media aspect ratio" (Desktop height / Mobile height = media): the banner takes the
   proportions of the first slide's image or video (desktop / mobile media), measured by
   assets/hero-banner.js into --hero-media-ratio(-mobile). The media keeps filling the banner
   as with the fixed heights, so it's shown whole. Use media of the same proportions across
   slides. */
  @media screen and (max-width: 1023px) {
    hero-banner[data-mobile-height='media'] {
      height: auto;
      aspect-ratio: var(--hero-media-ratio-mobile, var(--hero-media-ratio, 16 / 9));
    }
  }

  @media screen and (min-width: 1024px) {
    hero-banner[data-desktop-height='media'] {
      height: auto;
      aspect-ratio: var(--hero-media-ratio, 16 / 9);
    }
  }

  /* Mobile: images in the slide content (e.g. a heading set to an image wordmark) are
     capped at 65% of the content width. */
  @media screen and (max-width: 1023px) {
    .hero-banner__content img {
      max-width: 65%;
    }
  }

  /* "Hide buttons on mobile": hero buttons, and any group holding them (the usual
     button row), are removed below 1024px. */
  @media screen and (max-width: 1023px) {
    hero-banner[data-hide-buttons-mobile] .hero-banner__btn,
    hero-banner[data-hide-buttons-mobile] .hero-banner__content .group-block:has(.hero-banner__btn) {
      display: none;
    }
  }

  /* Ratio heights ("2880:800" desktop/mobile, "2880:1400" mobile): the ratio applies to the
     space BELOW the floating header, so the heading isn't hidden behind it. Height =
     header overlap + banner width × ratio. hero-banner.js measures --hero-width and
     --hero-header-offset (0 when the header doesn't float over the banner); before it runs,
     100vw / 0 approximate them. Media covers the banner, so other proportions are cropped. */
  @media screen and (min-width: 1024px) {
    hero-banner[data-desktop-height='2880-800'] {
      height: calc(var(--hero-header-offset, 0px) + var(--hero-width, 100vw) * 800 / 2880);
    }
  }

  @media screen and (max-width: 1023px) {
    hero-banner[data-mobile-height='2880-800'] {
      height: calc(var(--hero-header-offset, 0px) + var(--hero-width, 100vw) * 800 / 2880);
    }

    /* "2880:1400": taller wide ratio (~182px at 375px, below the header). */
    hero-banner[data-mobile-height='2880-1400'] {
      height: calc(var(--hero-header-offset, 0px) + var(--hero-width, 100vw) * 1400 / 2880);
    }
  }

  /* "2:3" (Mobile height = 2-3): fixed portrait ratio, width : height = 2 : 3, independent of
   the media. The media still covers the banner, so images of other proportions are cropped. */
  @media screen and (max-width: 1023px) {
    hero-banner[data-mobile-height='2-3'] {
      height: auto;
      aspect-ratio: 2 / 3;
    }
  }

  /* Pre-init: render the first slide (the LCP image) immediately at full
   width instead of hiding the whole banner until the deferred Swiper
   bundle initializes. Later slides stay hidden; .swiper's overflow:hidden
   clips them out of view. */
  hero-banner:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }

  hero-banner:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    visibility: hidden;
  }

  hero-banner .swiper-wrapper,
  .hero-banner-slide,
  .hero-banner-slide > * {
    height: 100%;
  }

  .hero-banner-slide .image-block {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* With a separate mobile image, the image block wraps each <img> in a plain
   div. Stretch those wrappers so the 100% image height below has something
   to resolve against — otherwise the picture keeps its own ratio and leaves
   a strip of page background under it. */
  .hero-banner-slide .image-block > div {
    height: 100%;
  }

  .hero-banner-slide .image-block__image,
  .hero-banner-slide .placeholder-image {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center;
  }

  /* ----------------------------------------------------------
   Content vertical positioning
   Mobile: content sits at the bottom of the slide.
   Tablet+: revert to the slide's default (justify-center).
   ---------------------------------------------------------- */
  /* Hero banner owns its own padding at every breakpoint — neutralize the
   shared .container utility here instead of stacking two paddings that
   must be hand-tuned to add up to the Figma value. */
  .hero-banner-slide .container {
    padding-inline: 0;
  }

  /* Single source of truth for the banner's left/right gutter. The slide content
   and the pagination dashes must share one left edge, so both read this — they
   previously drifted apart because the dashes were positioned off
   --container-padding-* instead. Values are the Figma page margins. */
  hero-banner {
    --hero-gutter: 16px;
  }
  /* Tablet (600-1023): the banner is inset 16px like the nav card, so the copy
   gutter matches the card's 20px inner padding and the text lines up with
   the logo. HARDCODED: 20px, the header's mobile inner padding. */
  @media screen and (min-width: 600px) and (max-width: 1023px) {
    hero-banner {
      --hero-gutter: 20px;
    }
  }
  /* 1200+: the navbar switches to its desktop layout (see header.liquid), so the
   banner follows the 50px nav bar inset. The 1200px step is the navbar's own
   breakpoint — used here only to stay aligned with it. */
  @media screen and (min-width: 1200px) {
    hero-banner {
      --hero-gutter: 50px; /* Figma: banner L/R padding, matches the 50px nav bar inset */
    }
  }

  .hero-banner-slide .content-wrapper {
    justify-content: flex-end;
    padding: var(--padding-4xl) var(--hero-gutter); /* Figma: Padding-Section-XS 32px, Padding-Page-margin 16px */
  }
  @media screen and (min-width: 1024px) {
    .hero-banner-slide .content-wrapper {
      justify-content: center;
    }
  }

  /* ----------------------------------------------------------
   Content entrance animation — staggered per block child.
   JS adds .is-active on init and after each slide transition.
   Removing the class snaps children back to hidden instantly
   (no animation applies without .is-active), then re-adding
   it restarts the keyframe fresh on the next slide.
   ---------------------------------------------------------- */
  @keyframes hero-drop-in {
    from {
      opacity: 0;
      transform: translateY(-24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-banner__content > * {
    opacity: 0;
    transform: translateY(-24px);
  }

  .hero-banner__content.is-active > * {
    animation: hero-drop-in 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .hero-banner__content.is-active > *:nth-child(1) {
    animation-delay: 0ms;
  }
  .hero-banner__content.is-active > *:nth-child(2) {
    animation-delay: 400ms;
  }
  .hero-banner__content.is-active > *:nth-child(3) {
    animation-delay: 800ms;
  }
  .hero-banner__content.is-active > *:nth-child(4) {
    animation-delay: 1200ms;
  }
  .hero-banner__content.is-active > *:nth-child(5) {
    animation-delay: 1600ms;
  }
  .hero-banner__content.is-active > *:nth-child(6) {
    animation-delay: 2000ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-banner__content.is-active > * {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  /* ----------------------------------------------------------
   Eyebrow pill badge
   ---------------------------------------------------------- */
  .hero-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    /* Symmetric block padding — keeps the label text centred inside the pill */
    padding: var(--padding-3xs) var(--padding-xs);
    border-radius: 4px;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
  }

  .hero-banner__eyebrow-divider {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: var(--color-white);
    flex-shrink: 0;
  }

  /* ----------------------------------------------------------
   Hero button (glassmorphism)
   ---------------------------------------------------------- */
  .hero-banner__btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-exact-12);
    flex: 1 1 0;
    min-width: 0;
    padding: var(--spacing-exact-12);
    border-radius: var(--style-border-radius-button);
    background: rgb(var(--color-white-rgb) / var(--opacity-40));
    backdrop-filter: blur(2px);
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    justify-content: space-between;
    transition: background var(--animation-values);
    width: 100%;
  }

  /* `flex: 1 1 0` above shares a row between buttons inside a group. A button
   dropped straight onto the slide is a flex item in the content *column*, so
   that basis would stretch it over the full banner height instead. */
  .hero-banner__content > .hero-banner__btn {
    flex: 0 0 auto;
  }

  .hero-banner__btn-label {
    white-space: nowrap;
  }

  .hero-banner__btn:hover {
    background: #fefefe;
    color: #06152b;
  }
  .hero-banner__btn:hover .hero-banner__btn-icon {
    background: #06152b;
    color: #fefefe;
  }

  /* Solid style (Hero Button "Style" = Solid): opaque button in place of the glass one.
   --hero-btn-bg / --hero-btn-fg come from the block's colour settings; the icon box takes
   the text colour with the arrow knocked out in the button colour, and hover swaps them. */
  .hero-banner__btn.hero-banner__btn--solid {
    background: var(--hero-btn-bg, #fefefe);
    backdrop-filter: none;
    color: var(--hero-btn-fg, #06152b);
    transition: background var(--animation-values), color var(--animation-values);
  }

  .hero-banner__btn.hero-banner__btn--solid .hero-banner__btn-icon {
    background: var(--hero-btn-fg, #06152b);
    color: var(--hero-btn-bg, #fefefe);
  }

  .hero-banner__btn.hero-banner__btn--solid:hover {
    background: var(--hero-btn-fg, #06152b);
    color: var(--hero-btn-bg, #fefefe);
  }

  .hero-banner__btn.hero-banner__btn--solid:hover .hero-banner__btn-icon {
    background: var(--hero-btn-bg, #fefefe);
    color: var(--hero-btn-fg, #06152b);
  }

  /* "Text with icon" style (Hero Button Style = Text with icon): label + arrow only, no
   button background or padding, sized to its content. --hero-btn-text comes from the
   block's colour setting; hover underlines the label. The extra .hero-banner-slide class
   outranks the desktop button rule (min-width: 180px). */
  .hero-banner-slide .hero-banner__btn.hero-banner__btn--text,
  .hero-banner__btn.hero-banner__btn--text {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    gap: var(--gap-xs);
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    color: var(--hero-btn-text, var(--color-white));
  }

  .hero-banner__btn.hero-banner__btn--text .hero-banner__btn-icon {
    width: auto;
    height: auto;
    background: transparent;
    color: inherit;
  }

  .hero-banner__btn.hero-banner__btn--text:hover {
    background: transparent;
    color: var(--hero-btn-text, var(--color-white));
  }

  .hero-banner__btn.hero-banner__btn--text:hover .hero-banner__btn-icon {
    background: transparent;
    color: inherit;
  }

  .hero-banner__btn.hero-banner__btn--text:hover .hero-banner__btn-label {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .hero-banner__content .group-block-content {
    justify-content: flex-start;
  }

  .hero-banner__btn-icon {
    display: flex;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: var(--color-white);
    flex-shrink: 0;
  }

  .hero-banner__btn-icon .svg-wrapper,
  .hero-banner__btn-icon .svg-wrapper > svg {
    width: 1rem;
    height: 1rem;
  }

  /* ----------------------------------------------------------
   Pagination — vertical dashes on mobile (right edge),
   horizontal dashes on desktop (bottom-left)
   ---------------------------------------------------------- */
  hero-banner .swiper-pagination {
    position: absolute !important;
    right: var(--padding-lg) !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-xs);
    z-index: var(--layer-flat);
    width: auto !important;
  }

  hero-banner .swiper-pagination-bullet {
    position: relative;
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: rgba(254, 254, 254, var(--opacity-40));
    opacity: 1 !important;
    margin: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: height var(--animation-speed-slow) var(--animation-easing);
  }

  hero-banner .swiper-pagination-bullet-active {
    height: 48px;
    background: rgba(254, 254, 254, 0.2);
  }

  .hero-banner__bullet-fill {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    transform-origin: top center;
    transform: scaleY(0);
  }

  hero-banner .swiper-pagination-bullet-active .hero-banner__bullet-fill {
    animation: hero-bullet-fill-y var(--hero-autoplay-duration, 5000ms) linear forwards;
  }

  @keyframes hero-bullet-fill-y {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

  @media screen and (min-width: 1024px) {
    hero-banner .swiper-pagination {
      flex-direction: row;
      align-items: center;
      right: auto !important;
      top: auto !important;
      bottom: var(--padding-5xl) !important;
      left: var(--hero-gutter) !important;
      transform: none;
    }

    hero-banner .swiper-pagination-bullet {
      width: 20px;
      height: 3px;
      transition: width var(--animation-speed-slow) var(--animation-easing);
    }

    hero-banner .swiper-pagination-bullet-active {
      width: 48px;
      height: 3px;
    }

    .hero-banner__bullet-fill {
      transform-origin: left center;
      transform: scaleX(0);
    }

    hero-banner .swiper-pagination-bullet-active .hero-banner__bullet-fill {
      animation-name: hero-bullet-fill-x;
    }

    @keyframes hero-bullet-fill-x {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }
  }

  /* With no descriptor under it, the heading carries the whole gap down to the
   call to action, so its own block margin is not the right distance. */
  @media screen and (max-width: 1023px) {
    .hero-banner-slide .hero-banner__content > .text-block:has(.h1):not(:has(~ .text-block)):not(:last-child) {
      margin-block-end: var(--padding-4xl); /* 32px */
    }
  }

  /* ----------------------------------------------------------
   Desktop layout: text/eyebrow/pagination left, buttons right.
   Mobile is untouched — all rules below are tablet+ only.
   ---------------------------------------------------------- */
  @media screen and (min-width: 1024px) {
    .hero-banner-slide .hero-banner__content.content-wrapper {
      display: grid;
      /* Text sits in a third of the content width (Figma 4-of-12 columns); the
       1fr spacer keeps the buttons column on the right edge. */
      grid-template-columns: 50% 1fr auto;
      grid-template-rows: repeat(20, auto);
      align-content: end;
      align-items: start;
      column-gap: 20px;
      padding-top: var(--padding-hero-banner-content-end);
      padding-bottom: var(--padding-hero-banner-content-end);
      max-width: none;
      width: 100%;
    }

    .hero-banner-slide .hero-banner__content > *:not(.group-block) {
      grid-column: 1;
    }

    .hero-banner-slide .hero-banner__content > .group-block {
      grid-column: 3;
      grid-row: 1 / -1;
      align-self: end;
    }

    /* Same for a button added straight to the slide rather than through a
     group — it is still a call to action, not part of the text column. */
    .hero-banner-slide .hero-banner__content > .hero-banner__btn {
      grid-column: 3;
      grid-row: 1 / -1;
      align-self: end;
      justify-self: end;
    }

    .hero-banner-slide .h1 {
      font-size: 55px;
      line-height: 1.1;
      font-weight: 700;
    }

    .hero-banner-slide .hero-banner__content > .hero-banner__eyebrow {
      justify-self: start;
      margin-block-end: 24px;
    }

    .hero-banner-slide .hero-banner__content > .text-block:has(.h1) {
      margin-block-end: 12px;
    }

    /* The buttons column bottom-aligns to the text column, so when the heading
     is the last thing in that column its trailing margin would drop the
     buttons a step below the text instead of level with it. */
    .hero-banner-slide .hero-banner__content > .text-block:has(.h1):not(:has(~ .text-block)) {
      margin-block-end: 0;
    }

    /* Multi-slide banners keep 24px under the descriptor to clear the
     pagination dashes that sit bottom-left. */
    .hero-banner-slide .hero-banner__content > .text-block:has(.p1) {
      margin-block-end: 24px;
    }

    /* Single slide: no pagination, so the descriptor bottom-aligns with the
     buttons in the right-hand column (Figma). */
    .hero-banner--single .hero-banner-slide .hero-banner__content > .text-block:has(.p1) {
      margin-block-end: 0;
    }

    .hero-banner-slide .hero-banner__btn {
      flex: 0 0 auto;
      width: auto;
      min-width: 180px;
    }

    hero-banner .swiper-pagination-bullet {
      background: var(--color-blue-35); /* Blue-35 (Placeholder) */
    }

    hero-banner .swiper-pagination {
      bottom: 50px !important;
    }
  }

  /* "Mobile content alignment" = center: centres the text and buttons below 1024px. The
   heading / text blocks set their own --text-align inline, so the text-align is overridden
   on their children rather than through the variable. */
  @media screen and (max-width: 1023px) {
    hero-banner[data-mobile-align='center'] .hero-banner__content {
      align-items: center;
    }

    hero-banner[data-mobile-align='center'] .hero-banner__content > .text-block {
      align-items: center;
    }

    hero-banner[data-mobile-align='center'] .hero-banner__content > .text-block > * {
      text-align: center;
    }

    hero-banner[data-mobile-align='center'] .hero-banner__content .group-block-content {
      justify-content: center;
    }
  }

  /* "Desktop button position" = below: the call to action drops into the text column
   under the copy instead of sitting in the right-hand column. */
  @media screen and (min-width: 1024px) {
    hero-banner[data-desktop-buttons='below'] .hero-banner-slide .hero-banner__content > .group-block,
    hero-banner[data-desktop-buttons='below'] .hero-banner-slide .hero-banner__content > .hero-banner__btn {
      grid-column: 1;
      grid-row: auto;
      align-self: start;
      justify-self: start;
    }

    /* The descriptor's bottom margin now separates text from buttons, so keep the
     24px step even on a single-slide banner. */
    hero-banner[data-desktop-buttons='below'].hero-banner--single
      .hero-banner-slide
      .hero-banner__content
      > .text-block:has(.p1):not(:last-child) {
      margin-block-end: 24px;
    }

    hero-banner[data-desktop-buttons='below']
      .hero-banner-slide
      .hero-banner__content
      > .text-block:has(.h1):not(:has(~ .text-block)):not(:last-child) {
      margin-block-end: 24px;
    }
  }

  @media screen and (min-width: 1024px) {
    /* The grid track above sets the width; nothing may spill out of it. */
    .hero-banner-slide .hero-banner__content > *:not(.group-block) {
      max-width: 100%;
    }
  }
  @media screen and (min-width: 1440px) {
    .hero-banner-slide .hero-banner__content.content-wrapper {
      grid-template-columns: 33.33% 1fr auto;
    }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:highlight-showcase (INDEX:34) */
/* ============================================================
   HIGHLIGHT SHOWCASE
   Split panel: a list of highlights on the left, a shared main
   image + thumbnail strip on the right. Selecting a highlight
   (hover title on desktop / tap thumbnail on mobile) swaps the
   active image, description and title.
   Mobile-first. Desktop overrides via @media (min-width: 1024px).
   ============================================================ */
.highlight-showcase {
  display: block;
  padding-inline: var(--container-padding-mobile);
}

.highlight-showcase__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'eyebrow'
    'media'
    'stack';
  /* Pastel #3: 20px from the image down to the title. One grid gap feeds both
     rows, so the media takes the missing 4px back as a top margin and
     eyebrow -> image stays on the Figma 24px. */
  gap: var(--padding-xl);
}

/* ---------- Eyebrow (line + label) ---------- */
.highlight-showcase__eyebrow {
  grid-area: eyebrow;
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.highlight-showcase__eyebrow-line {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--default-text-color);
  flex-shrink: 0;
}

.highlight-showcase__eyebrow-label {
  color: var(--default-text-color);
}

/* ---------- Left stack: titles (top) + description (bottom) ---------- */
.highlight-showcase__stack {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-exact-12);
}

.highlight-showcase__titles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* Title buttons: reset native button styling, inherit .h1 typography */
.highlight-showcase__title {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  /* Blue-35 (Placeholder) — inactive title */
  color: var(--color-blue-35);
  transition: color var(--animation-values);
}

.highlight-showcase__title.is-active {
  color: var(--default-text-color);
}

/* Mobile: only the active title is shown, below the image */
.highlight-showcase__mobile-title {
  display: none;
  color: var(--default-text-color);
}

.highlight-showcase__mobile-title.is-active {
  display: block;
}

/* Detail panels (USPs + description + link): only the active one is shown */
.highlight-showcase__detail {
  display: none;
  flex-direction: column;
  gap: var(--padding-2xl); /* 24px USPs -> descriptor */
}

.highlight-showcase__detail.is-active {
  display: flex;
}

.highlight-showcase__desc {
  margin: 0;
  max-width: 28rem;
  color: var(--color-blue-70);
}

/* Optional USP grid (icon + label) — 2 columns at all breakpoints */
.highlight-showcase__usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-2xs) var(--padding-xl); /* 4px row-gap; 20px column gutter */
  max-width: 28rem;
}

.highlight-showcase__usp {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* HARDCODED: 40px icon — Figma USP icon size */
.highlight-showcase__usp-icon {
  display: flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.highlight-showcase__usp-icon img,
.highlight-showcase__usp-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.highlight-showcase__usp-label {
  margin: 0;
  color: var(--color-blue-70);
  font-weight: 500;
}

/* Optional bottom text link */
.highlight-showcase__detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs); /* 4px */
  align-self: flex-start;
  color: var(--default-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: gap var(--animation-values);
}

.highlight-showcase__detail-link:hover {
  gap: var(--padding-xs);
}

.highlight-showcase__detail-link svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* ---------- Media: thumbnails + main image ---------- */
.highlight-showcase__media {
  grid-area: media;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--gap-xs); /* Padding-Padding-S / 8px */
  /* Pastel #3: puts eyebrow -> image back on 24px (see the inner grid gap). */
  margin-block-start: var(--padding-2xs);
}

/* Pastel #14: from 600px the column keeps the width it has at 600px instead of
   stretching with the viewport — a 1020px screen was rendering the image
   almost full-bleed. 568px is the content width at 600px (600 - 2x16). */
@media screen and (min-width: 600px) {
  .highlight-showcase__media {
    max-width: 568px;
  }
}

/* HARDCODED: 8px radius — Figma image-corner; no 8px token
   (--style-border-radius-sm = 0.6rem/9.6px is closest). */
.highlight-showcase__main {
  order: 1;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* Reserves the out-of-flow thumbnail strip (see .highlight-showcase__thumbs). */
  margin-inline-end: calc(var(--highlight-showcase-thumb-size) + var(--gap-xs));
  aspect-ratio: 511 / 639;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.highlight-showcase__main-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--animation-values-slow);
}

.highlight-showcase__main-img.is-active {
  opacity: 1;
}

.highlight-showcase__main-img img,
.highlight-showcase__main-img svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnail strip — sits beside the main image, ordered after it */
/* Pastel #2: at every width the strip has to live inside the image's height —
   seven thumbnails outrun it and used to push the media taller. Taking it out
   of flow pins it to the image's height so it can scroll internally; the main
   image reserves the space with a margin instead. `margin-block-start: auto`
   on the first thumb does the bottom alignment rather than
   `justify-content: flex-end`, which makes the overflowing top thumbnails
   unreachable inside a scroll container. */
.highlight-showcase__thumbs {
  order: 2;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--highlight-showcase-thumb-size);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-xs); /* Figma: 8px, exact match */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  z-index: var(--layer-flat);
}

.highlight-showcase__thumbs::-webkit-scrollbar {
  display: none;
}

.highlight-showcase__thumb:first-child {
  margin-block-start: auto;
}

/* Pastel #18: the thumbnail image is 48x57 (16/19). It was rendering 46x55
   because the 1.5px selected-state border is inside the border box and ate
   3px off each axis. An inset outline draws the same ring without taking any
   space, so the image keeps the full 48px. */
.highlight-showcase__thumb {
  appearance: none;
  padding: 0;
  margin: 0;
  width: var(--highlight-showcase-thumb-size);
  aspect-ratio: 16 / 19;
  /* Without this the column flex shrinks the thumbs vertically once they
     outrun the strip, squashing the 48x57 portrait into a landscape box.
     Holding the height is what makes the strip overflow — and scroll. */
  flex-shrink: 0;
  border: none;
  border-radius: 0.5rem;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  overflow: hidden;
  background: var(--light-border-color);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--animation-values), outline-color var(--animation-values);
}

.highlight-showcase__thumb.is-active {
  opacity: 1;
  outline-color: var(--default-text-color);
}

.highlight-showcase__thumb img,
.highlight-showcase__thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 800px){
  .highlight-showcase__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'eyebrow media'
      'stack   media';
    column-gap: var(--gap-3xl);
    row-gap: var(--margin-6xl); /* 5rem/80px — matches Figma eyebrow gap */
    align-items: start;
  }
  .highlight-showcase__media {
    grid-row: 1 / -1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: none;
    margin-block-start: 0;
  }
  .highlight-showcase__thumbs {
    order: 1;
    inset-inline: 0 auto;
  }
  .highlight-showcase__main {
    /* Fluid but capped to the 511px Figma width, which it reaches at 1440 */
    width: clamp(300px, 40vw, 511px);
    order: 2;
    /* Reserves the out-of-flow thumbnail strip, now on the leading edge. */
    margin-inline: calc(var(--highlight-showcase-thumb-size) + var(--gap-xs)) 0;
  }
  .highlight-showcase__stack {
    height: 100%;
    justify-content: space-between;
  }
  .highlight-showcase__titles.hidden--mobile {
    display: flex !important;
  }
  .highlight-showcase__mobile-title {
    display: none !important;
  }
}
/* ============================================================
   DESKTOP (1024px) — two-column split
   ============================================================ */
@media screen and (min-width: 1024px) {
  .highlight-showcase {
    padding-inline: var(--padding-page-margin-desktop);
  }

  

  /* Left column fills the media height; title top, description bottom */
  

  /* Show the full titles list, hide the mobile single-title */
  .highlight-showcase__mobile-title {
    display: none !important;
  }

  /* Media spans both rows and centres against the taller column */
  

  

  /* Thumbnails move to the LEFT of the main image. They stay out of flow for
     the same reason as on mobile: the main image is only clamp(300px, 40vw,
     511px) wide, so seven thumbs outrun its height well before 1440px. Pinned
     to the media box they are exactly the image's height and scroll inside it;
     in flow they would either stretch the media taller than the image or get
     squeezed out of ratio. The main image reserves the space with a margin. */
  
}

@media screen and (min-width: 1440px) {
  .highlight-showcase {
    padding-inline: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .highlight-showcase {
    padding-inline: var(--container-padding-2xl);
  }
}

/* Hide the whole section if it has no highlights */
.highlight-showcase:not(:has([data-hs-index])) {
  display: none;
}
/* END_SECTION:highlight-showcase */

/* START_SECTION:how-it-works (INDEX:35) */
/* ============================================================
   HOW IT WORKS
   Desktop (1024px+): sticky image on the left, numbered text steps
   on the right. The image cross-fades progressively as the user
   scrolls between steps (driven by how-it-works.js).
   Mobile/tablet: a horizontal Swiper of cards (image + number +
   title + body). Mobile-first.
   ============================================================ */
.how-it-works {
  display: block;
  background-color: var(--how-it-works-bg, var(--body-bg-color));
  --hiw-pad: var(--container-padding-mobile);
  padding-inline: var(--hiw-pad);
  /* clips the peeking card at the viewport edge, matching the category carousel pattern */
  overflow-x: clip;
}

.how-it-works__title {
  margin: 0;
  color: var(--default-text-color);
}

/* Mobile/tablet: the title follows its preset (H2 in the template, 32px).
   Desktop overrides to 45px below (Figma), which no preset provides. */

.how-it-works__number {
  margin: 0;
  color: var(--grey-color);
}

.how-it-works__step-title {
  margin: 0 0 var(--spacing-exact-12);
  color: var(--default-text-color);
}

.how-it-works__step-desc {
  margin: 0;
  color: var(--color-blue-70);
}

/* ---------- Mobile slider ---------- */
.how-it-works__mobile {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  --hiw-gap: 12px;
}

.how-it-works__mobile .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; .how-it-works' overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.how-it-works__card {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --hiw-cards / --hiw-peek come from the per-instance
     style block below. Swiper runs slidesPerView: 'auto'. */
  width: calc(
    (100% + var(--hiw-pad) - var(--hiw-peek)) / var(--hiw-cards)
    - var(--hiw-gap)
  );
}

.how-it-works__card-image {
  aspect-ratio: 3 / 2;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.how-it-works__card-image img,
.how-it-works__card-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Desktop layout (hidden until 1024px) ---------- */
.how-it-works__desktop {
  display: none;
}

/* ============================================================
   DESKTOP (1024px) — sticky image + scrolling steps
   ============================================================ */
@media screen and (min-width: 1024px) {
  .how-it-works__mobile {
    --hiw-gap: 20px;
  }

  .how-it-works {
    --hiw-pad: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }

  .how-it-works__mobile {
    display: none;
  }

  .how-it-works__desktop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
    /* column-gap: var(--gap-3xl); */
    align-items: start;
  }

  .how-it-works__sticky {
    position: sticky;
    /* HARDCODED: 105px offset — Figma sticky top; clears the header */
    top: 105px;
    display: flex;
    flex-direction: column;
    gap: var(--margin-2xl);
  }

  .how-it-works__media {
    position: relative;
    /* HARDCODED: 850/567 — Figma image ratio */
    aspect-ratio: 850 / 567;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--light-border-color);
  }

  .how-it-works__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity;
  }

  .how-it-works__image:first-child {
    opacity: 1;
  }

  .how-it-works__image img,
  .how-it-works__image svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .how-it-works__steps {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
    /* Offsets the steps by the title block above the image so the first
       step centres on the image itself; --hiw-media-top is measured by
       how-it-works.js */
    padding-block-start: var(--hiw-media-top, 0px);
    padding-inline: var(--spacing-exact-50); /* Figma: 50px either side of the step copy */
  }

  .how-it-works__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Each step is as tall as the sticky image (--hiw-media-height, measured
       by how-it-works.js) so its centre lines up with the image centre at
       every desktop width. HARDCODED: 567px — Figma image height, fallback
       until the script has measured. */
    min-height: var(--hiw-media-height, min(567px, 80svh));
  }

  .how-it-works__step-title {
    margin-bottom: var(--margin-lg); /* Figma: 16px */
  }

  .how-it-works .how-it-works__title {
    font-size: 45px;
  }
}

@media screen and (min-width: 1440px) {
  .how-it-works {
    --hiw-pad: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }

}

@media screen and (min-width: 1920px) {
  .how-it-works {
    --hiw-pad: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }
}
/* END_SECTION:how-it-works */

/* START_SECTION:logo-marquee (INDEX:37) */
/* =============================================================================
   SECTION: Logo Marquee
   Mobile-first. Desktop overrides at 1024px.
   Tokens: --light-border-color (Blue-15 strip BG), --default-text-color (Navy),
           --padding-lg (1rem / 16px block padding)
   HARDCODED: item gap 3.5rem / 56px mobile (Figma Section-M — no gap token at this value;
              closest is --gap-3xl: 3rem / 48px). Desktop gap 5rem / 80px same reason.
              Logo container 5.3125rem×2.4375rem (85×39px Figma spec — no size tokens).
              Logo internal padding 0.4717rem (~7.547px Figma spec — no token at this value).
   ============================================================================= */

  /* Strip carries the background and clips the scrolling animation. It sits inside
   the section element so spacing-padding can add outer breathing room independently. */
  .logo-marquee__strip {
    background: var(--light-border-color);
    overflow: hidden;
    padding-block: var(--padding-lg);
    display: flex;
    align-items: center;
  }

  /* Track: full natural width of all items so translateX(-50%) lands back at start. */
  .logo-marquee__track {
    display: flex;
    align-items: center;
    /* HARDCODED: 56px gap — Figma Section-M. No gap token at this value. */
    /* gap: 3.5rem; */
    gap: var(--padding-lg);
    width: max-content;
    animation: logo-marquee-scroll var(--logo-marquee-duration, 30s) linear infinite;
  }

  @media screen and (min-width: 1024px) {
    .logo-marquee__track {
      /* HARDCODED: 80px gap — Figma Section-M desktop. No gap token at this value. */
      gap: 5rem;

      gap: var(--padding-lg);
    }
  }

  /* Pause in Shopify editor (no clones rendered there, so animation would clip items). */
  .logo-marquee__track--paused,
  .logo-marquee__track:hover {
    animation-play-state: paused;
  }

  /* Each item: quote text + logo side by side. */
  .logo-marquee__item {
    display: flex;
    align-items: center;
    gap: var(--padding-lg);
    flex-shrink: 0;
  }

  /* p2 class handles font-family, font-size, line-height. Override only colour and margin. */
  .logo-marquee__text {
    color: var(--default-text-color);
    margin: 0;
    white-space: nowrap;
  }

  /* HARDCODED: 85×39px — Figma spec. No logo-size tokens available. */
  .logo-marquee__logo-wrap {
    width: 5.3125rem;
    height: 2.4375rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-marquee__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Items are duplicated in markup (original + aria-hidden clone). Animating to -50%
   moves exactly one full set off-screen, creating a seamless infinite loop. */
  @keyframes logo-marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
/* END_SECTION:logo-marquee */

/* START_SECTION:main-article (INDEX:39) */
/* HARDCODED: 56px — spec value; no matching padding token (closest are
     --padding-5xl 48px / --padding-6xl 64px). Scoped to the direct-child
     .container (the article body) so it doesn't affect the on-scroll nav's
     own nested .container inside <blog-post-navigation>. */
  .article__main-part > .container {
    padding-block: 56px;
  }

  /* Share row — sits after the article content, gated by show_share_buttons. */
  .article__share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs); /* 8px between the icons */
    /* HARDCODED: 40px — no matching margin token (closest: --margin-4xl
       32px / --margin-5xl 48px) */
    margin-block-start: 40px;
  }

  .article__share-row-label {
    color: var(--default-text-color);
    /* holds the label 16px off the first icon, on top of the row's 8px */
    margin-inline-end: var(--gap-xs);
  }

  .article__share-row-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs); /* 8px */
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-button); /* 4px */
    border: 1px solid var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--animation-values);
  }

  .article__share-row-btn .svg-wrapper svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* settings.icon_link_copy currently hardcodes stroke="#06152B" (Navy)
     rather than currentColor — invisible on this button's navy fill
     without this override. Kept as a safety net regardless of how the
     SVG pasted into that setting styles its own stroke/fill. A CSS
     declaration always beats an SVG presentation attribute, so no
     !important is needed here. */
  .article__share-row-btn .svg-wrapper svg path {
    stroke: var(--color-white);
  }

  /* Copy-link icon swap — <article-share-row> (assets/article-share-row.js)
     toggles .is-copied on itself for 2s after a successful copy. */
  .article__share-row-icon--copied {
    display: none;
  }

  .article__share-row.is-copied .article__share-row-icon--default {
    display: none;
  }

  .article__share-row.is-copied .article__share-row-icon--copied {
    display: flex;
  }

  /* ============================================================
     DESKTOP (1024px)
     ============================================================ */
  /* Article body. The content is authored HTML from the blog editor and
     carries inline styles, so the theme sets the type and rhythm around it.

     1. Type: the default paragraph preset targets `.rte p` (0,1,1), which
        outranks the author's own .p1 / .p2 classes on those paragraphs, so
        every paragraph rendered at P1. Re-assert the presets at higher
        specificity — intro paragraph P1, body paragraphs P2.
        HARDCODED: mirrors the P1 (15 / 16px) and P2 (13 / 14px) preset tiers;
        the theme has no size tokens for them. */
  .article__content .rte p.p1 {
    font-size: 15px;
  }

  .article__content .rte p.p2,
  .article__content .rte .p2 p {
    font-size: 13px;
  }

  @media screen and (min-width: 1440px) {
    .article__content .rte p.p1 {
      font-size: 16px;
    }

    .article__content .rte p.p2,
    .article__content .rte .p2 p {
      font-size: 14px;
    }
  }

  /* 2. Rhythm: 40px between the top-level blocks (intro paragraph, image
        group + caption, heading + paragraph group) on mobile and tablet, 50px
        on desktop (Figma Padding/Section/S). The editor writes
        `margin-bottom: 50px` inline on those blocks, which only !important can
        override — the one place in this theme where that is unavoidable. The
        last block carries none, so the share row's own 40px margin is the gap. */
  .article__content .rte > * {
    margin-block-end: 40px !important;
  }

  .article__content .rte > :last-child {
    margin-block-end: 0 !important;
  }

  @media screen and (min-width: 1024px) {
    .article__content .rte > * {
      margin-block-end: 50px !important;
    }
  }

  /* 3. Image groups: the editor writes each one as an image — or a grid row of
        two or three images — followed by a .p3 caption, inside a flex column,
        and puts the frame and both gaps in inline styles. The selectors are
        structural rather than class-based so they hold for any article written
        to the same pattern; the gaps are inline, so only !important wins. */

  .article__content .rte img {
    border-radius: var(--style-border-radius-image);
    /* border: 1px solid var(--dark-border-color); */
  }

  /* Image (or image row) → its caption. */
  .article__content .rte div:has(> .p3) {
    gap: var(--gap-xs) !important; /* 8px */
  }

  /* Between the images of a two- or three-up row. Desktop keeps the
     authored 12px. */
  @media screen and (max-width: 1023px) {
    .article__content .rte div:has(> img + img) {
      gap: var(--gap-xs) !important; /* 8px */
    }
  }

  @media screen and (min-width: 1024px) {
    .article__content .rte div:has(> .p3) {
      gap: var(--gap-lg) !important; /* 16px */
    }
  }

  @media screen and (min-width: 1024px) {
    .article__main-part > .container {
      /* HARDCODED: 80px / 120px — Figma desktop container padding; no
         matching padding tokens (closest: --padding-5xl 48px / --padding-6xl 64px) */
      padding-block: 80px;
      padding-inline: 120px;
    }

    .article__inner {
      /* HARDCODED: 910px — Figma desktop content max-width; no matching token */
      max-width: 910px;
      margin-inline: auto;
    }
  }
/* END_SECTION:main-article */

/* START_SECTION:main-blog-post (INDEX:40) */
.article-share svg {
    width: 20px;
    height: 20px;
  }

  .blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-cart (INDEX:42) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 32px;
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: 20px;
  }

  @media screen and (min-width: 1024px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart__container--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }

    .cart__container--extend {
      height: 100%;
    }
  }

  @media screen and (min-width: 1920px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }

  /* Hide the cart's own upsell/recommendation slider when the cart is empty.
     Scoped to [data-cart-recommendation] (the cart-page product-sliders with
     as_cart_product_recommendation) because this {% stylesheet %} is bundled
     globally and `cart-is-empty` is toggled on <html> site-wide — an unscoped
     `product-sliders` selector also hid the PDP's Recently Viewed / You May
     Also Like when the cart was emptied on a product page. */
  html.cart-is-empty .shopify-section:has(product-sliders[data-cart-recommendation]) {
    display: none !important;
  }

  /* Fallback: at least hide the custom element if the wrapper selector doesn't match */
  html.cart-is-empty product-sliders[data-cart-recommendation] {
    display: none !important;
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:43) */
/* Grid items default to min-width: auto, so a static block whose content can't
     shrink (e.g. the featured-collection swiper) balloons past the grid track and
     overflows the page once .product-grid-container becomes a grid at tablet+. */
  .product-grid-container > .shopify-block {
    min-width: 0;
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 1024px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .collection-wrapper {
    @media screen and (min-width: 1024px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 1024px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 1024px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 1024px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:membership-tiers (INDEX:46) */
/* ============================================================
   MEMBERSHIP TIERS
   A benefits-comparison table: benefit labels down the left, up
   to four tier columns across. Cells show a check, nothing, or a
   text value. The table keeps a fixed minimum width and scrolls
   horizontally on mobile. Mobile-first.
   ============================================================ */
  .membership-tiers {
    display: block;
    background-color: var(--membership-tiers-bg, var(--body-bg-color));
    padding-inline: var(--container-padding-mobile);
  }

  .membership-tiers__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .membership-tiers__title {
    margin: 0;
    color: var(--default-text-color);
    text-align: center;
    /* pins to the scroll container's left edge so the title stays fully
     visible while the table beneath it scrolls horizontally */
    position: sticky;
    left: 0;
    /* horizontal inset comes from .membership-tiers__scroll's padding-inline */
    padding-top: var(--spacing-exact-40);
    background: var(--color-white);
  }

  /* Plain block, not itself a flex item — sidesteps a leak we hit where a
   flex item that also sets overflow-x: auto directly could still reach
   documentElement's scrollable region on the live site even though every
   box's own clientWidth/scrollWidth measured as correctly contained.
   This wrapper takes the flex item's spot; .membership-tiers__scroll
   (the actual overflow-x: auto box) sits inside it, once removed from
   being a flex item itself. */
  .membership-tiers__scroll-outer {
    min-width: 0;
    max-width: 100%;
  }

  /* Bordered, rounded card that clips and scrolls the table */
  .membership-tiers__scroll {
    max-width: 100%;
    /* Figma: the white card carries no stroke */
    border: none;
    /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
    border-radius: 0.5rem;
    background: var(--color-white);
    padding-inline: var(--padding-lg);
    padding-block-end: var(--spacing-exact-40);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    /* Forces the 784px table inside to be treated as fully isolated from
     any ancestor's layout/size calculations — stronger guarantee than
     overflow-x: auto alone, which was still leaking this box's content
     width into documentElement.scrollWidth despite this element's own
     clientWidth/scrollWidth measuring as correctly contained. */
    contain: layout paint;
  }

  .membership-tiers__table {
    /* HARDCODED: 784px — Figma table width; a floor that keeps the columns
     readable and triggers the card's horizontal scroll on narrow screens.
     width: 100% lets the table fill the card wherever the card is wider
     than that (e.g. 930–1023px), instead of leaving blank space. */
    width: 100%;
    min-width: 784px;
    border-collapse: collapse;
    text-align: center;
    /* fixed layout: the label column below gets its explicit width, and the
     tier columns (left unset) share the remainder equally — otherwise
     auto layout over-grows the label column to fit its longest text */
    table-layout: fixed;
  }

  .membership-tiers__table th,
  .membership-tiers__table td {
    padding-block: var(--spacing-exact-12);
    /* border-collapse sums this side with the next cell's — 12px + 12px
     gives the 24px gap between columns; border-collapse means adjacent
     cell padding, not a gap property, is what creates the visual gap */
    padding-inline: var(--spacing-exact-12);
  }

  .membership-tiers__table thead th {
    padding-block: var(--padding-lg);
    /* Top: icons and tier names line up even when a second-line note wraps (e.g. "₱8,000 total spend") */
    vertical-align: top;
  }

  /* Zebra striping instead of row borders — background lives on the cells
   (not the tr) so it can be flush edge-to-edge and corner-rounded */
  .membership-tiers__table tbody tr:nth-child(odd) th,
  .membership-tiers__table tbody tr:nth-child(odd) td {
    background: var(--body-bg-color);
  }

  .membership-tiers__table tbody tr:nth-child(even) th,
  .membership-tiers__table tbody tr:nth-child(even) td {
    background: var(--color-white);
  }

  .membership-tiers__table tbody tr th:first-child,
  .membership-tiers__table tbody tr td:first-child {
    /* HARDCODED: 4px radius — Figma row corner; no 4px token */
    border-radius: 0.25rem 0 0 0.25rem;
  }

  .membership-tiers__table tbody tr th:last-child,
  .membership-tiers__table tbody tr td:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
  }

  /* Benefit label column */
  .membership-tiers__table th[scope='row'],
  .membership-tiers__corner {
    text-align: left;
    padding-inline-start: var(--padding-lg);
    /* HARDCODED: 152px label column — Figma spec; no matching token.
     table-layout: fixed only reads the width from row 1 (the corner
     cell), so it must be set here, not just on th[scope="row"]. */
    width: 152px;
  }

  /* table-scoped so the 500 weight outranks the .p2 preset on the same element */
  .membership-tiers__table .membership-tiers__label {
    margin: 0;
    color: var(--default-text-color);
    font-weight: 500;
  }

  /* Tier header cell: optional icon above the name */
  .membership-tiers__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
  }

  .membership-tiers__tier-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .membership-tiers__tier-icon img,
  .membership-tiers__tier-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .membership-tiers__tier-name {
    margin: 0;
    color: var(--default-text-color);
  }

  /* Second line(s) of the tier name field */
  .membership-tiers__tier-note {
    margin: 0;
    color: var(--default-text-color);
    font-weight: 400;
    padding-top: 4px;
  }

  /* Cell values */
  .membership-tiers__value {
    margin: 0;
    color: var(--color-blue-70);
  }

  /* Label and values are rich text, so their <p> would otherwise pick up the
   default paragraph typography and margins instead of the P2 cell styling. */
  .membership-tiers__label :is(p, ul, ol),
  .membership-tiers__value :is(p, ul, ol) {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    margin: 0;
  }

  .membership-tiers__check {
    display: inline-flex;
    color: var(--default-text-color);
  }

  .membership-tiers__check svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* ============================================================
   MOBILE / TABLET (below 1024px) — compact columns
   Every column — the benefit labels (th[scope=row] / corner) and the tier
   cells — has a 100px content width plus 8px padding each side (116px in
   total; content-box so the padding sits outside the 100px). Neighbouring
   cells sit 16px apart (8px + 8px; border-collapse adds the paddings, there
   is no gap property). The table is as wide as its columns (5 x 116px)
   instead of the 784px floor, and scrolls sideways inside the card when the
   screen is narrower.
   ============================================================ */
  @media screen and (max-width: 1023px) {
    .membership-tiers__table {
      width: auto;
      min-width: 0;
    }

    .membership-tiers__table th,
    .membership-tiers__table td,
    .membership-tiers__table th[scope='row'],
    .membership-tiers__table .membership-tiers__corner {
      /* label selectors listed so this outranks the 152px / 16px label-column rule */
      box-sizing: content-box; /* 100px is the content width; padding is added on top */
      width: 100px;
      max-width: 100px;
      min-width: 100px;
      padding-inline: var(--padding-xs); /* 8px */
    }
  }

  /* ============================================================
   DESKTOP (1024px)
   ============================================================ */
  @media screen and (min-width: 1024px) {
    .membership-tiers {
      /* HARDCODED: 147px — Figma desktop page margin; no matching token */
      padding-inline: var(--padding-page-margin-desktop);
    }

    .membership-tiers__inner {
      gap: var(--gap-2xl);
    }

    .membership-tiers__title {
      padding-top: var(--spacing-exact-50);
      padding-bottom: var(--spacing-exact-50);
    }

    /* HARDCODED: 38px — desktop title matches the H2 preset while mobile keeps
     the H3 preset (28px). No matching token. */
    .membership-tiers .membership-tiers__title {
      font-size: 38px;
    }

    .membership-tiers__scroll {
      /* caps the card so it doesn't stretch edge-to-edge on wide desktop
       screens, matching Figma; centered within the section */
      max-width: var(--narrow-page-width);
      margin-inline: auto;
      padding-inline: var(--spacing-exact-50);
      padding-block-end: var(--spacing-exact-50);
    }

    .membership-tiers__table {
      /* Desktop: the table always fits its card. The card can be narrower than
       the 784px mobile floor between 1024 and 1439px (147px page margins +
       50px card padding), so the floor is dropped and the tier columns wrap. */
      min-width: 0;
    }

    .membership-tiers__table th,
    .membership-tiers__table td {
      /* padding: L(16px) both sides — also gives the 32px inter-column gap
       via border-collapse (16px + 16px from the adjacent cell) */
      padding: var(--padding-lg);
    }

    .membership-tiers__table th[scope='row'],
    .membership-tiers__corner {
      padding-inline-start: var(--padding-2xl);
      /* HARDCODED: 280px — Figma desktop label column; wider than the mobile
       152px so labels stay on one line and the tier columns wrap instead */
      width: 200px;
    }
  }

  /* Section padding from the 1024px breakpoint above holds at 1440px and 1920px
   too — no container-padding-xl/2xl override here, unlike other sections */

  /* ============================================================
   XL (1440px) — card narrows to 8 of the 12 Figma columns
   ============================================================ */
  @media screen and (min-width: 1440px) {
    .membership-tiers__scroll {
      /* 8 of the 12 Figma columns (20px gutters): 8 columns + the 7 gutters
       they span, centred by the margin-inline: auto set at 1024px. Same
       column maths as .ac-row__image in alternating-content. Replaces the
       --narrow-page-width cap, which only bit above 1500px and left the card
       near edge-to-edge at 1440px. */
      max-width: calc((100% - 11 * var(--gap-xl)) / 12 * 8 + 7 * var(--gap-xl));
    }
  }
/* END_SECTION:membership-tiers */

/* START_SECTION:new-in-products (INDEX:47) */
/* ============================================================
   NEW IN — static product carousel
   Header (title + text link + nav) above a Swiper of product cards.
   Adapted from PDP - Recommendations for static (page) use.
   Mobile-first.
   ============================================================ */
.new-in {
  display: block;
  background-color: var(--new-in-bg, #f8f7f7);
  /* --carousel-gap must match spaceBetween in new-in-products.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: 8px;
  padding-inline: var(--carousel-pad);
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

/* Mobile top padding is a Figma value the padding_block_start setting cannot
   produce (its sizes are 32/40/56/80 but the section's saved size differs per
   template). Overriding the longhand here — at higher specificity than the
   single-class .el-spacing rule — wins without touching the section's JSON
   settings, and only below the desktop breakpoint so the JSON-driven desktop
   values are untouched. With a header the 56px is the divider → title
   distance; without one the carousel sits 20px under whatever precedes it. */
@media screen and (max-width: 1023px) {
  .new-in.el-spacing {
    padding-block-start: var(--spacing-exact-56);
  }

  .new-in--no-header.el-spacing {
    padding-block-start: var(--padding-xl); /* 20px */
  }
}

.new-in__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg); /* Pastel #10: 16px title -> slider below 1024px */
}

/* ---------- Header ---------- */
.new-in__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
}

.new-in__title {
  margin: 0;
  color: var(--default-text-color);
}

.new-in__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  flex-shrink: 0;
}

.new-in__nav {
  display: flex;
  gap: var(--gap-2xs);
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.new-in__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent;
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--animation-values), border-color var(--animation-values), color var(--animation-values);
}

.new-in__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.new-in__btn.swiper-button-disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

/* ---------- Text link ---------- */
.new-in__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs); /* 4px */
  color: var(--default-text-color);
  text-decoration: none;
  transition: gap var(--animation-values);
}

.new-in__link:hover {
  gap: var(--padding-xs);
}

.new-in__link .svg-wrapper {
  width: 14px;
  height: 14px;
}

.new-in__link--mobile {
  align-self: flex-start;
}

/* ---------- Footer (mobile: link + divider below carousel) ---------- */
.new-in__footer {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-top: var(--margin-lg);
  padding-top: var(--padding-lg);
  border-top: 1px solid var(--dark-border-color);
}

/* ---------- Track ---------- */
.new-in .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; the section's overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.new-in .swiper-slide {
  height: auto;
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --carousel-cards / --carousel-peek come from the
     per-instance style block below. Swiper runs slidesPerView: 'auto'. */
  width: calc(
    (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
    - var(--carousel-gap)
  );
}

.new-in .swiper-slide > * {
  height: 100%;
}

/* Hide the section entirely when no products are selected */
.new-in:not(:has(.swiper-slide)) {
  display: none;
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .new-in__body {
    gap: var(--padding-2xl); /* Pastel #10: 24px title -> slider */
  }

  .new-in {
    --carousel-pad: var(--padding-page-margin-desktop);
  }

  /* Hover on an enabled arrow: navy fill, no outline, white icon (Figma).
     Disabled arrows keep their tint state. */
  .new-in__btn:not(.swiper-button-disabled):hover {
    background: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);
  }
}

@media screen and (min-width: 1440px) {
  .new-in {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .new-in {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SECTION:new-in-products */

/* START_SECTION:page-intro (INDEX:50) */
/* ============================================================
   PAGE INTRO
   A simple page header: title, short body text, and a button —
   all static from section settings. Centered by default (per the
   Returns & Exchanges design) with a left-aligned option for
   reuse on other utility pages. Mobile-first.
   ============================================================ */
.page-intro {
  display: block;
  background-color: var(--page-intro-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.page-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  text-align: left;
}

.page-intro--center .page-intro__inner {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.page-intro__title {
  margin: 0;
  color: var(--default-text-color);
}

.page-intro__body {
  margin: 0;
  max-width: 36rem;
  color: var(--color-blue-70);
}

/* The body is a richtext field, so its <p> children are targeted directly by
   the global default-typography (p1) rule and would otherwise ignore the .p2
   wrapper. Inherit so the copy renders at P2: 13px mobile / 14px desktop. */
.page-intro .page-intro__body :is(p, li) {
  font-size: inherit;
  line-height: inherit;
}

.page-intro__body > :first-child { margin-top: 0; }
.page-intro__body > :last-child { margin-bottom: 0; }

.page-intro__btn {
  margin-top: var(--margin-2xl);
}

/* Button 1 hover per Glossary: BG White / Text Navy / Outline Blue-20.
   Scoped to this section — the global .btn1:hover setting still differs. */
.page-intro .page-intro__btn.btn1:hover {
  background-color: var(--color-white);
  color: var(--default-text-color);
  border-color: var(--dark-border-color);
}

/* ----------------------------------------------------------
   Button style "Hero": label + arrow tile, like the hero banner's .hero-banner__btn, in navy
   for this light background. Hover inverts (white with a navy tile).
   ---------------------------------------------------------- */
.page-intro__btn--hero {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-exact-12, 12px);
  min-width: 260px;
  padding: var(--spacing-exact-12, 12px) var(--spacing-exact-12, 12px) var(--spacing-exact-12, 12px) var(--padding-lg, 16px);
  border: 1px solid var(--default-text-color);
  border-radius: var(--style-border-radius-button);
  background: var(--default-text-color);
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--animation-values, 0.2s ease), color var(--animation-values, 0.2s ease),
    border-color var(--animation-values, 0.2s ease);
}

.page-intro__btn--hero .page-intro__btn-label {
  white-space: nowrap;
}

.page-intro__btn--hero .page-intro__btn-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  background: var(--color-white);
  color: var(--default-text-color);
  transition: background-color var(--animation-values, 0.2s ease), color var(--animation-values, 0.2s ease),
    transform var(--animation-values, 0.2s ease);
}

.page-intro__btn--hero .page-intro__btn-icon .svg-wrapper,
.page-intro__btn--hero .page-intro__btn-icon svg {
  width: 1rem;
  height: 1rem;
}

.page-intro__btn--hero:hover {
  background: var(--color-white);
  color: var(--default-text-color);
  border-color: var(--dark-border-color);
}

.page-intro__btn--hero:hover .page-intro__btn-icon {
  background: var(--default-text-color);
  color: var(--color-white);
  transform: translate(2px, -2px);
}

/* ----------------------------------------------------------
   Button intro animation: pops in once the intro is revealed, then two soft rings pulse out
   to draw the eye. Off with reduced motion.
   ---------------------------------------------------------- */
@keyframes page-intro-btn-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes page-intro-btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(6 21 43 / 0.35);
  }
  100% {
    box-shadow: 0 0 0 14px rgb(6 21 43 / 0);
  }
}

.page-intro__btn--animate {
  opacity: 0;
}

.page-intro__inner.is-revealed .page-intro__btn--animate,
.page-intro__inner:not([data-scroll-reveal]) .page-intro__btn--animate {
  animation: page-intro-btn-pop 700ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards,
    page-intro-btn-pulse 1400ms ease-out 1200ms 2;
}

@media (prefers-reduced-motion: reduce) {
  .page-intro__btn--animate,
  .page-intro__inner.is-revealed .page-intro__btn--animate {
    opacity: 1;
    animation: none;
  }
}

@media screen and (min-width: 600px) {
  .page-intro {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .page-intro {
    padding-inline: var(--container-padding-desktop);
  }

  /* HARDCODED: 55px — Returns & Exchanges desktop title sits between the
     H1 (45px) and H0 (70px) presets; no matching token */
  .page-intro .page-intro__title {
    font-size: 55px;
  }
}

@media screen and (min-width: 1440px) {
  .page-intro {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .page-intro {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:page-intro */

/* START_SECTION:password (INDEX:51) */
.section--password {
    --section-min-height: calc(100svh - 8rem);
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: var(--padding-xl);
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-enter__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-enter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 1023px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-enter__admin-link {
    margin: 0;
  }

  .password-enter__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 1024px) {
      width: auto;
    }
  }
/* END_SECTION:password */

/* START_SECTION:pdp-description (INDEX:52) */
pdp-description-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl); /* 2rem = 32px */
  }

  /* ─── Section ─────────────────────────────────────────────────── */
  .pdp-desc {
    background: var(--pdp-bg, var(--body-bg-color, #F8F8F8));
    color: var(--pdp-text, var(--default-text-color));
  }

  .pdp-desc__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--pdp-pt) var(--pdp-pb);
    padding-inline: var(--container-padding-mobile);
    /* Figma: --Padding-Section-M = 56px gap between segments */
    gap: 56px;
    width: 100%;
  }

  /* ─── Left: description + USPs ────────────────────────────────── */
  .pdp-desc__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xl); /* 2rem = 32px */
    width: 100%;
  }

  /* ─── Toggle row ──────────────────────────────────────────────── */
  .pdp-desc__toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs); /* 0.5rem = 8px */
  }

  .pdp-tab {
    display: flex;
    align-items: center;
    gap: var(--gap-xs); /* 0.5rem = 8px */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Line: mirrors category-nav__tab-line — slides in when active */
  .pdp-tab__line {
    display: block;
    width: 0;
    height: 1px;
    background: #06152B;
    opacity: 0;
    overflow: hidden;
    transition: width var(--animation-values), opacity var(--animation-values);
  }

  .pdp-tab.pdp-tab--active .pdp-tab__line {
    width: 80px;
    opacity: 1;
  }

  .pdp-tab__label {
    /* Figma: --blue-35-placeholder = #BEC5CD — no theme token equivalent */
    color: #BEC5CD;
    font-family: var(--font-paragraph--family);
    /* Figma: --Typography-Size-P2 = 13px; --font-size--xs = 0.8125rem = 13px */
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1.4;
    transition: color var(--animation-values);
  }

  .pdp-tab.pdp-tab--active .pdp-tab__label {
    color: var(--default-text-color);
  }

  /* ─── Label row fallback (no care guide) ──────────────────────── */
  .pdp-desc__label-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs); /* 0.5rem = 8px */
  }

  .pdp-desc__label-line {
    display: block;
    width: 80px;
    height: 1px;
    background: var(--default-text-color);
    flex-shrink: 0;
  }

  .pdp-desc__label {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs); /* 13px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--default-text-color);
  }

  /* ─── Description / Care Guide panel ─────────────────────────── */
  .pdp-desc__panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl); /* 2rem = 32px */
  }
  @media screen and (min-width: 1024px){
    .pdp-desc__panel {
      gap: 50px;
    }
  }

  /* ─── Description body ────────────────────────────────────────── */
  /* .pdp-desc__body.rte p has higher specificity than .rte p from typography.liquid */
  .pdp-desc__body.rte p,
  .pdp-desc__body.rte p span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
  }
  .pdp-desc__body ul{
    margin-top: 16px;
  }

  /* ─── USPs ─────────────────────────────────────────────────────── */
  .pdp-desc__usps {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    /* Figma: row gap = --Padding-Padding-XS = 4px, col gap = --Padding-Page-gutter = 12px */
    gap: 4px 12px;
    flex-wrap: wrap;
    align-self: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pdp-desc__usp {
    display: flex;
    align-items: center;
    gap: var(--gap-xs); /* 0.5rem = 8px */
    /* 2-col layout: (100% - 12px column-gap) / 2 */
    flex: 0 0 calc(50% - 6px);
  }

  .pdp-desc__usp-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-desc__usp-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
  }

  .pdp-desc__usp-text {
    /* Figma: --blue-70-body = #3F4855 — no theme token equivalent */
    color: #3F4855;
    font-family: var(--font-paragraph--family);
    /* Figma: --Typography-Size-P2 = 13px; --font-size--xs = 0.8125rem = 13px */
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1.4;
  }

  /* ─── Care guide panels ────────────────────────────────────────── */
  .pdp-desc__panel[data-pdp-tab-panel='care-guide'] {
    gap: var(--gap-xl);
  }

  .pdp-care-section {
    margin-bottom: 0;
  }

  .pdp-care-section__title {
    color: var(--default-text-color);
    margin: 0 0 var(--margin-xs);
  }

  .pdp-care-section__content {
    color: var(--default-text-color);
    margin: 0;
  }

  /* .pdp-care-section__content.rte :is(...) outranks .rte p from typography.liquid */
  .pdp-care-section__content.rte :is(p, ul, ol, li, span):not(.pdp-care-section__title.h5) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }

  .pdp-care-section__content ul,
  .pdp-care-section__content ol {
    padding-left: 20px;
    margin: 0;
  }

  .pdp-care-section__content li {
    margin-bottom: 4px;
  }

  /* ─── Right: Complete the Look — mobile ──────────────────────── */
  .pdp-desc__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Figma: --Padding-Padding-M = 12px — no exact token */
    gap: 12px;
    align-self: stretch;
    width: 100%;
  }

  .pdp-desc__ctl-header {
    display: flex;
    align-items: center;
    /* Figma: 24px — no exact token */
    gap: 24px;
    align-self: stretch;
  }

  .pdp-desc__ctl-title {
    /* Typography handled by .h5 class */
    color: var(--default-text-color);
    margin: 0;
  }

  .pdp-ctl-nav {
    display: none;
    align-items: center;
    gap: var(--gap-xs);
  }

  .pdp-ctl-prev,
  .pdp-ctl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Figma: 32x32px — no exact token */
    width: 32px;
    height: 32px;
    /* border: 1px solid var(--dark-border-color); */
    /* Figma: --Padding-Page-button-corner = 4px — no token */
    /* border-radius: 4px; */
    background: transparent;
    cursor: pointer;
    /* color: currentColor; */
    transition: border-color var(--animation-values);
    flex-shrink: 0;
  }

  .pdp-ctl-prev:hover,
  .pdp-ctl-next:hover { 
    /* border-color: currentColor;  */
  }

  .pdp-ctl-prev.swiper-button-disabled,
  .pdp-ctl-next.swiper-button-disabled { 
    /* opacity: 0.35;  */
    cursor: default; 
  }

  /* Products container: mobile — stacked list (Swiper disabled) */
  .pdp-ctl-slider {
    width: 100%;
    min-width: 0;
    overflow: visible;
    align-self: stretch;
  }

  .pdp-ctl-slider .swiper-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs); /* 0.5rem = 8px */
  }

  .pdp-ctl-slider .swiper-slide {
    width: 100%;
    height: auto;
  }

  /* Product card */
  .pdp-ctl-card {
    display: flex;
    align-items: center;
    align-self: stretch;
    /* Figma: --Padding-Page-button-corner = 4px — no token */
    border-radius: 4px;
    border: 1px solid var(--dark-border-color);
    background: var(--body-bg-color);
    overflow: hidden;
  }

  /* Image */
  .pdp-ctl-card__image-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* Figma: 60x83px — no tokens */
    width: 60px;
    /* Figma: --Padding-Padding-M = 12px — no exact token */
    flex-shrink: 0;
    aspect-ratio: 60 / 83;
    /* Mobile: the card's own radius + overflow clip rounds the image, so a
       second radius here would curve its right edge mid-card */
    overflow: hidden;
    text-decoration: none;
  }

  .pdp-ctl-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Product info container */
  .pdp-ctl-card__info {
    display: flex;
    /* Figma: padding 8px 12px — 12px has no exact token */
    padding: var(--gap-xs) 12px;
    align-items: center;
    gap: var(--gap-lg); /* 1rem = 16px */
    flex: 1 0 0;
  }

  /* Text container */
  .pdp-ctl-card__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Figma: --Padding-Padding-XXS = 2px — no token */
    gap: 2px;
    flex: 1 0 0;
  }

  /* Product title — font handled by .p3 class */
  .pdp-ctl-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
    overflow: hidden;
    color: var(--default-text-color);
    text-overflow: ellipsis;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
  }

  .pdp-ctl-card__title:hover { text-decoration: underline; }

  .pdp-ctl-card__price {
    display: none;
  }

  /* ATC button */
  .pdp-ctl-card__atc {
    display: flex;
    /* Figma: 32x32px — no tokens */
    width: 32px;
    height: 32px;
    padding: var(--gap-xs); /* 0.5rem = 8px */
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    /* Figma: --Padding-Page-button-corner = 4px — no token */
    border-radius: 4px;
    border: 1px solid var(--default-text-color);
    background: none;
    cursor: pointer;
    color: var(--default-text-color);
    flex-shrink: 0;
    transition: opacity var(--animation-values);
  }

  .pdp-ctl-card__atc:disabled { opacity: 0.5; cursor: default; }

  /* ─── Desktop ──────────────────────────────────────────────────── */
  @media screen and (min-width: 1024px) {
    .pdp-desc__panel[data-pdp-tab-panel='care-guide'] {
      gap: 24px;
    }

    .pdp-desc__inner--split {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: var(--pdp-gap, 64px);
      padding-inline: 50px;
      align-items: start;
    }

    .pdp-desc__inner {
      padding-block: var(--pdp-pt-lg) var(--pdp-pb-lg);
      padding-inline: 50px;
    }

    .pdp-desc__ctl-header {
      justify-content: space-between;
    }

    .pdp-ctl-nav { display: flex; }

    .pdp-ctl-slider {
      overflow: hidden;
    }

    .pdp-ctl-slider .swiper-wrapper {
      flex-direction: row;
      gap: 0;
    }

    .pdp-ctl-slider .swiper-slide {
      width: auto;
      height: auto;
    }

    .pdp-ctl-card {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
    }

    .pdp-ctl-card__image-link {
      width: 100%;
      height: auto;
      aspect-ratio: 200 / 283;
      flex-shrink: 1;
      border-radius: var(--style-border-radius-image);
    }

    .pdp-ctl-card__info {
      flex: 0 1 auto;
      min-width: 0;
      padding: 0 8px;
    }

    .pdp-ctl-card__price {
      display: block;
      font-family: var(--font-paragraph--family);
      font-size: var(--font-size--xs); /* 13px */
      opacity: 0.65;
      line-height: 1.4;
      margin-top: 2px;
    }

    .pdp-ctl-card__atc {
      display: none;
    }
  }
/* END_SECTION:pdp-description */

/* START_SECTION:pdp-extra-info (INDEX:53) */
/* ============================================================
     PDP SHOWCASE ("Engineered For Comfort, Designed For Confidence")
     Mobile-first. Desktop overrides via @media (min-width: 1024px).
     Peeking Swiper track — same technique as content-carousel.liquid /
     category-carousel.liquid: slide width via calc() off --carousel-*
     custom properties, Swiper runs slidesPerView: 'auto'.
     ============================================================ */
  .pdp-showcase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg, 1rem);
    background: var(--body-bg-color);
    /* --carousel-gap must match spaceBetween in pdp-showcase.js */
    --pdp-pad: var(--container-padding-mobile);
    --carousel-gap: var(--spacing-exact-12, 0.75rem);
    padding-inline: var(--pdp-pad);
    /* clips the bleeding slide at the viewport edge */
    overflow-x: clip;
  }

  /* ===== HEADER ===== */
  .pdp-showcase__heading {
    color: var(--default-text-color);
    margin: 0;
  }

  .pdp-showcase__heading-desc {
    color: var(--color-blue-70);
    margin: var(--margin-xs, 0.5rem) 0 0;
  }
  .pdp-showcase__heading-desc p {
    margin: 0;
  }

  /* ===== TRACK ===== */
  .pdp-showcase .swiper {
    width: 100%;
    /* off-track slide bleeds past the container padding and peeks from the
       section edge; the section's overflow-x: clip cuts it at the viewport */
    overflow: visible;
  }

  .pdp-showcase .swiper-slide {
    height: auto; /* let cards stretch to equal height */
    /* --carousel-cards / --carousel-peek come from the per-instance style
       block below. Swiper runs slidesPerView: 'auto'. */
    width: calc(
      (100% + var(--pdp-pad) - var(--carousel-peek)) / var(--carousel-cards)
      - var(--carousel-gap)
    );
  }
  @media screen and (min-width: 600px){
    .pdp-showcase .swiper-slide {
      width: 230px;
    }
  }
  @media screen and (min-width: 1000){
    .pdp-showcase .swiper-slide {
      width: auto;
    }
  }

  /* ===== CARD ===== */
  .pdp-showcase__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    height: 100%;
    border: 1px solid var(--dark-border-color);
    border-radius: var(--pdp-showcase-radius, 8px);
    background: var(--color-white);
    overflow: hidden;
  }

  .pdp-showcase__card-image {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    flex-shrink: 0;
  }

  .pdp-showcase__img,
  .pdp-showcase__img--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ===== TEXT CONTAINER ===== */
  .pdp-showcase__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-xl, 1.25rem);
    padding: var(--padding-xl, 1.25rem);
  }

  .pdp-showcase__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    /* Figma-exact 4px — no scale token matches; reuses the same dedicated
       exact-value token established for --spacing-exact-12. */
    gap: var(--gap-highlight-stack, 0.25rem);
  }

  .pdp-showcase__card-title {
    color: var(--default-text-color);
    margin: 0;
  }

  .pdp-showcase__card-text {
    color: var(--color-blue-70);
    margin: 0;
  }

  /* ============================================================
     TABLET (1024px)
     ============================================================ */
  @media screen and (min-width: 600px) {
    .pdp-showcase {
      --pdp-pad: var(--container-padding-tablet);
    }
  }

  /* ============================================================
     DESKTOP (1024px)
     ============================================================ */
  @media screen and (min-width: 1024px) {
    .pdp-showcase {
      --pdp-pad: var(--padding-page-margin-desktop);
      /* --carousel-gap must match the spaceBetween 1024px breakpoint entry in
         pdp-showcase.js */
      --carousel-gap: var(--gap-xl, 1.25rem);
    }

    .pdp-showcase .swiper-slide {
      width: calc(
        (100% - var(--carousel-peek) - (var(--carousel-cards) - 1) * var(--carousel-gap))
        / var(--carousel-cards)
      );
    }

    .pdp-showcase__card-body {
      padding: var(--padding-2xl, 1.5rem);
    }
  }

  @media screen and (min-width: 1440px) {
    .pdp-showcase {
      --pdp-pad: var(--container-padding-xl);
    }
  }

  @media screen and (min-width: 1920px) {
    .pdp-showcase {
      --pdp-pad: var(--container-padding-2xl);
    }
  }
/* END_SECTION:pdp-extra-info */

/* START_SECTION:pdp-hero (INDEX:54) */
.pdp-hero {
    background: #fff;
  }

  /* Images */
  .pdp-images-swiper .swiper-slide img {
    aspect-ratio: 375 / 486;
    object-fit: cover;
    width: 100%;
  }
  .pdp-images-pagination.swiper-pagination {
    bottom: 12px;
  }
  .pdp-images-pagination .swiper-pagination-bullet {
    background: rgba(6,21,43,0.3);
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  .pdp-images-pagination .swiper-pagination-bullet-active {
    background: #06152B;
    width: 18px;
    border-radius: 3px;
  }

  /* Badges */
  .pdp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 2px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .pdp-badge--sale { background: #E8435A; color: #fff; }
  .pdp-badge--bestseller { background: #06152B; color: #fff; }
  .pdp-badge--new { background: #2B7A77; color: #fff; }

  /* Zoom button */
  .pdp-zoom-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
  }

  /* Model info */
  .pdp-model-info {
    background: rgba(255,255,255,0.85);
    border-radius: 100px;
    padding: 4px 12px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    color: #3F4855;
  }

  /* Category line */
  .pdp-category__type,
  .pdp-category__collection {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    color: #3F4855;
    line-height: 1.4;
  }

  .pdp-category__sep {
    display: block;
    width: 30px;
    height: 2px;
    background: #3F4855;
    flex-shrink: 0;
  }

  /* Title */
  .pdp-title {
    font-family: var(--font-paragraph--family);
    font-size: 1.5rem;
    font-weight: 700;
    color: #06152B;
    line-height: 1.2;
    margin: 0 0 8px;
  }
  @media (min-width: 1024px) {
    .pdp-title { font-size: 2rem; }
  }

  /* Price */
  .pdp-price__sale {
    font-family: var(--font-paragraph--family);
    font-size: 1.125rem;
    font-weight: 600;
    color: #06152B;
    line-height: 1.3;
  }
  .pdp-price__sale--onsale { color: #E8435A; }
  .pdp-price__compare {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm);
    color: #9AA3AE;
    line-height: 1.3;
    text-decoration: line-through;
  }

  /* Bundle banner */
  .pdp-bundle-banner {
    background: #F5F5F5;
    border-radius: 4px;
    padding: 12px 14px;
    text-decoration: none;
  }
  .pdp-bundle-banner__text {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    color: #06152B;
    line-height: 1.4;
  }

  /* Separator */
  .pdp-separator {
    border: none;
    border-top: 1px solid #E5E7EA;
    margin: 0;
  }

  /* Size group */
  .pdp-size-group__label {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 500;
    color: #06152B;
    line-height: 1.4;
  }
  .pdp-size-group__selected-name {
    font-weight: 400;
    color: #3F4855;
  }
  .pdp-size-guide-link {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    color: #06152B;
    text-decoration: underline;
    line-height: 1.4;
  }

  /* Size buttons */
  .pdp-size-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .pdp-size-label:hover { border-color: #06152B; }
  .pdp-size-label--selected {
    background: #06152B;
    border-color: #06152B;
    color: #fff;
  }
  .pdp-size-label--unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
  }
  .pdp-size-label--unavailable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: rotate(-15deg) translateY(-50%);
    opacity: 0.5;
  }
  .pdp-size-label__text {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1;
    color: inherit;
    pointer-events: none;
  }
  .pdp-size-label--selected .pdp-size-label__text { color: #fff; }

  /* Personalisation button */
  .pdp-personalisation-btn {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    padding: 14px 16px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 500;
    color: #06152B;
    cursor: pointer;
    transition: border-color 0.15s ease;
    line-height: 1.4;
  }
  .pdp-personalisation-btn:hover { border-color: #06152B; }
  .pdp-personalisation-btn__logo {
    font-weight: 700;
    background: linear-gradient(90deg, #E8435A, #F97316, #FACC15, #22C55E, #3B82F6, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ATC button */
  .pdp-atc-btn {
    position: relative;
    overflow: hidden;
    background: #06152B;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    line-height: 1.3;
    min-height: 52px;
  }
  .pdp-atc-btn:hover:not(:disabled) { background: #1a2e4a; }
  .pdp-atc-btn:disabled { background: #9AA3AE; cursor: not-allowed; }

  /* Wishlist button */
  .pdp-wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid #06152B;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    color: #06152B;
    transition: background 0.15s ease;
    flex-shrink: 0;
  }
  .pdp-wishlist-btn:hover { background: #f5f5f5; }

  /* USPs */
  .pdp-usp__text {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    color: #06152B;
    line-height: 1.4;
  }

  /* Desktop layout: images left, details right */
  @media (min-width: 1024px) {
    .pdp-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
    .pdp-images-swiper .swiper-slide img {
      aspect-ratio: auto;
      min-height: 600px;
    }
    .pdp-hero__details {
      padding: 24px 40px 48px;
      max-width: 520px;
    }
  }
/* END_SECTION:pdp-hero */

/* START_SECTION:pdp-recently-viewed (INDEX:55) */
.pdp-recently-viewed .pdp-recently-viewed__inner {
    background-color: var(--pdp-rv-bg, transparent);
  }

  /* Slides: HARDCODED 220px — Figma mobile/tablet product card; 5-up on desktop.
     The slider runs slidesPerView: 'auto' and reads these widths from layout. */
  .pdp-recently-viewed .resource-list__carousel .swiper-slide {
    min-width: 0;
    width: 220px;
  }

  @media screen and (min-width: 1024px) {
    .pdp-recently-viewed .resource-list__carousel .swiper-slide {
      width: calc((100% - var(--gap-xs) * 4) / 5);
    }
  }

  /* Header → cards: 12px mobile/tablet, 16px desktop (Figma) */
  .pdp-recently-viewed .resource-list {
    margin-top: var(--spacing-exact-12);
  }

  @media screen and (min-width: 1024px) {
    .pdp-recently-viewed .resource-list {
      margin-top: var(--gap-lg);
    }
  }

  /* Below the desktop switch the slider bleeds to the viewport edge, so a
     partly visible card is cut by the screen edge, not by the container — the
     theme's peeking-carousel pattern. The container padding is pinned to the
     theme tiers here so the section matches the other carousels. */
  .pdp-recently-viewed .container {
    padding-inline: var(--container-padding-mobile);
  }

  @media screen and (min-width: 600px) {
    .pdp-recently-viewed .container {
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media screen and (min-width: 1024px) {
    .pdp-recently-viewed .container {
      padding-inline: var(--container-padding-desktop);
    }
  }

  @media screen and (max-width: 1023px) {
    .pdp-recently-viewed .container {
      overflow-x: clip;
    }

    .pdp-recently-viewed .resource-list__carousel .swiper {
      overflow: visible; /* slides run on into the container padding, clipped at the viewport edge */
    }
  }

  .pdp-recently-viewed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Title follows the H4 preset (24 / 26 / 30px) via its class */
  .pdp-recently-viewed__title {
    color: currentcolor;
    margin: 0;
  }

  .pdp-recently-viewed__nav {
    display: none;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
  }

  @media screen and (min-width: 1024px) {
    .pdp-recently-viewed__nav {
      display: flex;
    }
  }

  .pdp-rv-nav-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    justify-content: center;
    align-items: center;
    gap: 12px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid var(--default-text-color);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--default-text-color);
  }

  .pdp-rv-nav-btn:disabled {
    border-radius: 4px;
    background: var(--light-border-color);
    border-color: transparent;
    color: #BEC5CD;
    cursor: default;
  }

  .pdp-rv-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* Hide default Swiper nav and pagination */
  .pdp-recently-viewed .swiper-button-prev,
  .pdp-recently-viewed .swiper-button-next {
    display: none;
  }

  .pdp-recently-viewed .swiper-pagination {
    display: none;
  }

  /* Hide section when skeleton is gone and no slides were loaded */
  .pdp-recently-viewed:not(:has(.swiper-slide)):not(:has(.resource-list--grid:not([style*="display: none"]))) {
    display: none;
  }
/* END_SECTION:pdp-recently-viewed */

/* START_SECTION:pdp-recommendations (INDEX:56) */
.pdp-recommendations .pdp-recommendations__inner {
    background-color: var(--pdp-rec-bg, transparent);
    --card-reveal-curtain: var(--pdp-rec-bg, var(--body-bg-color));
  }

  .pdp-recommendations__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Header → cards: 12px mobile/tablet, 16px desktop (Figma) */
  .pdp-recommendations .resource-list {
    margin-top: var(--spacing-exact-12);
  }

  @media screen and (min-width: 1024px) {
    .pdp-recommendations .resource-list {
      margin-top: var(--gap-lg);
    }
  }

  /* Below the desktop switch the track bleeds to the viewport edge, so a
     partly visible card is cut by the screen edge, not by the container — the
     theme's peeking-carousel pattern. The container padding is pinned to the
     theme tiers here so the bleed can mirror it exactly. */
  .pdp-recommendations .container {
    padding-inline: var(--container-padding-mobile);
  }

  @media screen and (min-width: 600px) {
    .pdp-recommendations .container {
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media screen and (min-width: 1024px) {
    .pdp-recommendations .container {
      padding-inline: var(--container-padding-desktop);
    }
  }

  /* Keeps the bleeding track inside the page at every width. `clip` rather than
     `hidden`: hidden would turn the container into a scroll container and let
     the page be dragged sideways, which is exactly what must not happen. */
  .pdp-recommendations .container {
    overflow-x: clip;
  }

  @media screen and (max-width: 1023px) {
    .pdp-recommendations .pdp-rec-track {
      margin-inline: calc(-1 * var(--container-padding-mobile));
      padding-inline: var(--container-padding-mobile);
      scroll-padding-inline: var(--container-padding-mobile);
    }
  }

  @media screen and (min-width: 600px) and (max-width: 1023px) {
    .pdp-recommendations .pdp-rec-track {
      margin-inline: calc(-1 * var(--container-padding-tablet));
      padding-inline: var(--container-padding-tablet);
      scroll-padding-inline: var(--container-padding-tablet);
    }
  }

  /* Desktop bleeds the same way. The negative margin plus matching padding keeps
     the FIRST card aligned to the container edge while the track's border box
     reaches the viewport edge, so the peeking card is no longer sliced off at the
     container padding. scroll-padding keeps snapped cards on that same edge. */
  @media screen and (min-width: 1024px) {
    .pdp-recommendations .pdp-rec-track {
      margin-inline: calc(-1 * var(--container-padding-desktop));
      padding-inline: var(--container-padding-desktop);
      scroll-padding-inline: var(--container-padding-desktop);
    }
  }

  .pdp-recommendations__title {
    color: var(--default-text-color);
    margin: 0;
  }

  .pdp-recommendations__nav {
    display: none;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
  }

  @media screen and (min-width: 1024px) {
    .pdp-recommendations__nav {
      display: flex;
    }
  }

  .pdp-recommendations__nav:has(.pdp-rec-nav-btn--prev:disabled):has(.pdp-rec-nav-btn--next:disabled) {
    display: none;
  }

  .pdp-rec-nav-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    justify-content: center;
    align-items: center;
    gap: 12px;
    aspect-ratio: 1 / 1;
    /* border-radius: 4px; */
    /* border: 1px solid var(--default-text-color); */
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--default-text-color);
  }

  .pdp-rec-nav-btn:disabled {
    border-radius: 4px;
    /* background: var(--light-border-color); */
    /* border-color: transparent; */
    /* color: #BEC5CD; */
    cursor: default;
  }

  .pdp-rec-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .pdp-recommendations .pdp-rec-track {
    display: flex;
    gap: var(--gap-xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pdp-recommendations .pdp-rec-track::-webkit-scrollbar {
    display: none;
  }

  .pdp-recommendations .pdp-rec-track__item {
    flex: 0 0 220px;
    min-width: 0;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 1024px) {
    .pdp-recommendations .pdp-rec-track__item {
      flex-basis: calc((100% - var(--gap-xs) * 3) / 4);
    }

    /* With more than four products the row should read as a carousel, with the
       fifth card peeking rather than sitting flush off the edge (Pastel 78).
       :has(:nth-child(5)) keeps exactly-four rows full width, so a short row
       still fills the container instead of leaving a gap.
       HARDCODED 24px: the visible peek is this plus the container padding the
       track bleeds into, minus the 8px gap — about 46px at 1440px. Kept small so
       the four full cards stay as wide as possible; there is no peek token
       (product-sliders takes its own from section settings). */
    .pdp-recommendations .pdp-rec-track:has(> .pdp-rec-track__item:nth-child(5)) .pdp-rec-track__item {
      flex-basis: calc((100% - var(--gap-xs) * 3 - 24px) / 4);
    }
  }

  /* Hide section when static source has no products */
  .pdp-recommendations:not([data-url]):has([data-has-products='false']) {
    display: none;
  }
/* END_SECTION:pdp-recommendations */

/* START_SECTION:pdp-reviews (INDEX:57) */
.pdp-reviews {
    background: #fff;
  }

  .pdp-reviews__outer {
    padding: 0 16px 80px;
  }

  .pdp-reviews__card {
    background: #FEFEFE;
    border-radius: 8px;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* Rating summary */
  .pdp-reviews__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .pdp-reviews__stars-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .pdp-reviews__score {
    font-family: var(--font-heading--family, var(--font-paragraph--family));
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #06152B;
    white-space: nowrap;
  }

  .pdp-reviews__stars {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .pdp-reviews__count {
    font-family: var(--font-paragraph--family);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: #06152B;
    margin: 0;
    white-space: nowrap;
  }

  /* Controls */
  .pdp-reviews__controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pdp-write-review-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
    border: 1px solid #06152B;
    border-radius: 4px;
    text-decoration: none;
    background: none;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
    font-family: inherit;
  }

  .pdp-write-review-btn:hover { background: #f8f8f8; }

  .pdp-write-review-btn__text {
    font-family: var(--font-paragraph--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #06152B;
  }

  .pdp-write-review-btn__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #06152B;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .pdp-sort-by {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .pdp-sort-by__text {
    font-family: var(--font-paragraph--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #06152B;
    white-space: nowrap;
  }

  /* Divider */
  .pdp-reviews__hr {
    border: none;
    border-top: 1px solid #D0D7E0;
    margin: 0;
  }

  /* Review list */
  .pdp-reviews__list {
    display: flex;
    flex-direction: column;
  }

  .pdp-review-entry {
    border-bottom: 1px solid #D0D7E0;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pdp-review-entry__top {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pdp-review-entry__stars {
    display: flex;
    align-items: center;
  }

  .pdp-review-entry__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pdp-review-entry__title {
    font-family: var(--font-paragraph--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #06152B;
    margin: 0;
  }

  .pdp-review-entry__body {
    font-family: var(--font-paragraph--family);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #06152B;
    margin: 0;
  }

  .pdp-review-entry__photo {
    width: 180px;
    height: 176px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
  }

  .pdp-review-entry__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 34px;
  }

  .pdp-review-entry__reviewer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .pdp-review-entry__name {
    font-family: var(--font-paragraph--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #06152B;
  }

  .pdp-review-entry__verified {
    font-family: var(--font-paragraph--family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #3F4855;
    white-space: nowrap;
  }

  .pdp-review-entry__date {
    font-family: var(--font-paragraph--family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #3F4855;
    text-align: right;
  }

  /* Pagination */
  .pdp-reviews__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
  }

  .pdp-reviews__page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
  }

  .pdp-reviews__page-btn--prev {
    background: #E8EDF2;
    border: none;
    color: #06152B;
  }

  .pdp-reviews__page-btn--next {
    background: none;
    border: 1px solid #06152B;
    color: #06152B;
  }

  .pdp-reviews__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .pdp-reviews__pages {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pdp-reviews__page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #D0D7E0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: var(--font-paragraph--family);
    font-size: 11px;
    font-weight: 400;
    color: #BEC5CD;
    line-height: 1.4;
    transition: border-color 0.15s ease;
  }

  .pdp-reviews__page-num:hover:not(.pdp-reviews__page-num--active) {
    border-color: #06152B;
    color: #06152B;
  }

  .pdp-reviews__page-num--active {
    background: #06152B;
    border-color: #06152B;
    color: #FEFEFE;
    font-weight: 500;
    cursor: default;
  }

  .pdp-reviews__page-ellipsis {
    font-family: var(--font-paragraph--family);
    font-size: 11px;
    color: #BEC5CD;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 32px;
  }

  @media (min-width: 1024px) {
    .pdp-reviews__outer {
      padding: 0 32px 80px;
    }
    .pdp-reviews__card {
      padding: 40px 24px;
    }
  }
/* END_SECTION:pdp-reviews */

/* START_SECTION:pers-market-guard (INDEX:59) */
.pers-market-guard__toast {
    position: fixed;
    inset-block: auto var(--margin-4xl);
    inset-inline: var(--container-padding-mobile);
    margin: 0 auto;
    max-inline-size: var(--narrow-content-width);
    padding: var(--padding-md) var(--padding-lg);
    border: 0;
    border-radius: var(--style-border-radius-sm);
    background-color: var(--default-text-color);
    color: var(--color-white);
    text-align: center;
    opacity: 0;
    translate: 0 var(--margin-lg);
    transition:
      opacity var(--animation-values-slow),
      translate var(--animation-values-slow),
      display var(--animation-values-slow) allow-discrete,
      overlay var(--animation-values-slow) allow-discrete;

    &:popover-open {
      opacity: 1;
      translate: 0 0;

      @starting-style {
        opacity: 0;
        translate: 0 var(--margin-lg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
/* END_SECTION:pers-market-guard */

/* START_SECTION:predictive-search (INDEX:62) */
predictive-search-component {
    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  :not(:is(dialog)) > predictive-search-component {
    @media screen and (min-width: 1024px) {
      max-width: min(40dvw, 650px);
    }
  }

  :not(:is(dialog)) > predictive-search-component .predictive-search__close-modal-button {
    display: none;
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .predictive-search--right {
    margin-right: 0;
    margin-left: auto;
  }

  .predictive-search--left {
    margin-right: auto;
    margin-left: 0;
  }

  :not(:is(dialog)) > predictive-search-component.predictive-search--floating {
    width: min(40dvw, 650px);
    position: absolute;
    top: var(--search-top, unset);
    right: var(--search-right, unset);
    left: var(--search-left, unset);
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    /* top: 100%; */
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 1023px) {
      border-radius: 0;
    }

    @media screen and (min-width: 1024px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 1024px) {
      height: fit-content;
    }
  }

  :not(:is(dialog))
    > predictive-search-component:not(.predictive-search--expanded)
    .predictive-search-form__content-wrapper {
    display: none;
  }

  .predictive-search-form__header-inner:has(.search-input:focus-visible) {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: calc(var(--focus-outline-offset) * -1);
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__inner > * {
    padding-inline: var(--padding-xl);
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__list-item {
    padding-inline: var(--padding-sm);
    padding-block: var(--list-item-padding-block);
    scroll-margin-block: var(--padding-xl);

    &:first-child {
      /* scroll-margin to match font + padding + margin on .predictive-search-results__title */
      scroll-margin-block-start: calc(
        var(--title-font-size) + var(--title-margin-block) + var(--list-item-padding-block)
      );
    }

    &:not(:has(.predictive-search-results__list-item-link--pill))[aria-selected='true'].keyboard-focus {
      background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
      transform: translateY(0);
    }
  }

  .predictive-search-results__list-item:has(.predictive-search-results__list-item-link--pill) {
    width: fit-content;
    padding: 0;
  }

  .predictive-search-results__list-item-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: var(--gap-xl);
    align-items: center;
  }

  .predictive-search-results__list-item-link--pill {
    display: block;
    padding: var(--padding-2xs) var(--padding-sm);
  }

  .predictive-search-results__list-item[aria-selected='true'] .predictive-search-results__list-item-link--pill {
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
  }

  .predictive-search-results__list-item-link--no-media {
    grid-template-columns: 1fr;
  }

  .predictive-search-results__list-item-image,
  .predictive-search-results__list-item-icon {
    width: 100%;
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
    margin: auto;
    object-fit: cover;
  }

  .predictive-search-results__list-item-details {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
  }

  .predictive-search-results__list-item-content {
    font-size: var(--font-size-xs);
    color: rgb(var(--color-primary-rgb) / var(--opacity-subdued-text));
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
  }

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

  .predictive-search-form__header .search-input {
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);

    &:hover {
      background-color: transparent;
    }
  }

  .svg-wrapper.predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    cursor: pointer;
    pointer-events: auto;

    &::before {
      content: '';
      position: absolute;
      inset: calc((var(--icon-size-lg) - var(--minimum-touch-target)) / 2);
    }

    @media screen and (min-width: 1024px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    background: transparent;
    color: var(--color-foreground);
    opacity: 1;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (max-width: 1023px) {
      margin-right: var(--margin-md);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);

    @media screen and (max-width: 1023px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 1023px) {
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline: 0;
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 1024px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 1023px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }

    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .predictive-search-form__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 1024px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 1024px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 1023px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  @media screen and (max-width: 1023px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 1023px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 1024px) {
      border-bottom-color: transparent;
    }
  }

  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 1024px) {
      border: 0;
    }
  }

  @media screen and (max-width: 1023px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  /* Styles for the snippets */

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 1023px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    padding-block: var(--padding-3xs);
    gap: var(--gap-md);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: unset;

    @media screen and (min-width: 1024px) {
      padding-block-end: unset;
    }
  }

  .predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:hover {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-color: var(--card-border-focus);
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 1024px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 1023px) {
      display: none;
    }
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 1023px) {
      display: none;
    }
  }

  .predictive-search-dropdown .predictive-search-results__list-item-image,
  .predictive-search-dropdown .predictive-search-results__list-item-icon {
    width: 100%;
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
    margin: auto;
    object-fit: cover;
  }

  .predictive-search-results__list-item,
  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    animation-delay: 0ms !important;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__list-item {
    animation-delay: calc(30ms * var(--nth-child, 1) + 50ms);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  [data-resource-type] {
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
  }

  .predictive-search-results__list-item.removing,
  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search__reset-button {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);
  }

  .predictive-search-results__no-results {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.5;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)),
  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--color-border) !important;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 1023px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search-form__header {
    border: var(--search-border-width) solid var(--color-border);
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  .predictive-search-results__pill {
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-information (INDEX:63) */
/* Zero-height children of the buy box column still consume a full 12px row
     gap each, which is where the doubled spacing in Pastel 18 and 100 came
     from — not from any margin we set:

     - .ai-size-container is the AI Fit Finder app's data holder (scripts and
       JSON only, nothing visual). display: contents takes it out of the flex
       row while still rendering anything the app injects into it later.
     - An empty .shopify-block is an app-block slot with nothing in it.

     Scoped to the PDP buy box so ordinary group blocks elsewhere are untouched. */
  .product-information .group-block-content > .ai-size-container {
    display: contents;
  }

  .product-information .group-block-content > .shopify-block:empty {
    display: none;
  }

  /* The image lightbox is position: fixed with z-index 9999, but
     .product-information__media is position: sticky — and sticky always forms a
     stacking context, z-index: auto or not. That confined the 9999 to inside the
     media column, so the (also sticky, and later in the DOM) buy box column and
     the header painted straight over the zoomed image (Pastel 90). Lifting the
     media column's own stacking context while the lightbox is open fixes the
     order without touching the lightbox itself. */
  .product-information__media:has(.pdp-lightbox:not([hidden])) {
    z-index: var(--layer-temporary);
  }

  /* PDP content gutters — Figma "Padding/Section/S" = 50px. Literal because the
     theme has no matching token (container-padding tokens are 32/40px). Follows
     the theme's .container convention (max-width: 100%, no content cap); only
     the inline padding differs. Breadcrumb + gallery + details sit flush at 50px. */
  /* Column gap between gallery and details (Figma = 50px). Set here rather than
     a `gap-[50px]` utility because theme.css is pre-compiled — arbitrary Tailwind
     values aren't in it, so the class produces no rule. Only affects the flex
     layout from 1024px (block/stacked below that, where gap is ignored), so it
     doesn't need a breakpoint of its own.

     This was previously three declarations — a base 50px, a 1024px override to
     20px, and a second 1024px block back to 50px. Both media queries had the
     same breakpoint so the later one always won, making the 20px dead. They
     collapse to the single value that was already in effect. */
  .product-information__grid {
    gap: 50px;
  }
  @media screen and (min-width: 1024px) {
    .product-information__grid {
      align-items: flex-start;
    }
  }

  /* Mobile-only gap between the media gallery and the buy box (Figma = 12px).
     `.product-information__grid` only becomes flex once `lg:flex` kicks in
     (1024px), so on mobile it's stacked in block flow and needs its own margin;
     reset to 0 at that breakpoint so it doesn't double up with the flex gap. */
  .product-information__media {
    margin-block-end: var(--spacing-exact-12);
  }

  @media screen and (min-width: 1024px) {
    .product-information__media {
      margin-block-end: 0;
      position: sticky;
      top: 100px;
    }
  }

  @media screen and (max-width: 1023px) {
    .product-information .product-details:not(dialog *) {
      padding: 0;
    }

    .product-information .product-details:not(dialog *) .group-block-content:has(> * > .promo-message) {
      gap: 4px;
    }
  }

  @media screen and (min-width: 1024px) {
    .product-information .container {
      padding-inline: 50px;
    }
  }

  /* Bottom padding override — 20px mobile / 24px desktop. The section's own
     padding_block_end setting (select: nopadding/small/medium/large) floors
     at "small" = 40px, below both targets, so this bypasses the token system
     entirely with a scoped, higher-specificity rule (two classes vs. the
     shared .el-spacing rule's one) instead of converting the setting to a
     manual numeric field — avoids touching settings_schema.json/
     settings_data.json/templates/product.json altogether. */
  .product-information.el-spacing {
    padding-block-end: 20px;
  }

  @media screen and (min-width: 1024px) {
    .product-information.el-spacing {
      padding-block-end: 24px;
    }
  }

  /* Eyebrow → title gap = 8px (Figma). Both live in the shared buy-box flex
     column, whose 12px gap (._product-details block's own "gap" setting)
     applies uniformly to every sibling pair — changing it would shift every
     other pair's spacing too. Pulling the title 4px closer (12 - 4 = 8) via
     margin is scoped to just this one pair, no schema/template change needed.
     .text-block is product-title's actual box — its own wrapper
     (blocks/product-title.liquid) is display:contents and has no box of its
     own, so the negative margin has to land on .text-block instead. */
  .product-eyebrow + .contents > .text-block {
    margin-block-start: -4px;
  }

  @media screen and (max-width: 1023px) {
    #judgeme_product_reviews {
      margin-inline: var(--padding-lg) !important;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-quick-add (INDEX:64) */
/* ============================================================
     QUICK ADD SHEET — Figma 9978-42930
     Sheet chrome (background, radius, close button) is in
     snippets/quick-add-modal.liquid; this file styles the content.
     ============================================================ */

  .product-quick-add {
    display: flex;
    flex-direction: column;
  }

  .quick-add-sheet__body {
    display: flex;
    flex-direction: column;
    /* HARDCODED: 24px either side of the divider (Yu Qi feedback) — no gap
       token is 24px (--gap-xl is 20px, --gap-2xl 32px). */
    gap: 1.5rem;
    padding-inline: var(--padding-lg);
  }

  /* ── Product summary ── */
  .quick-add-sheet__summary {
    display: flex;
    align-items: stretch;
    /* HARDCODED 12px (Yu Qi, revising the 8px she asked for earlier) — no gap
       token is 12px (--gap-sm is 11.2px, --gap-md 14.4px). */
    gap: 12px;
    padding-block-end: var(--padding-2xl); /* 24px */
    border-bottom: 1px solid var(--dark-border-color);
  }

  .quick-add-sheet__thumb {
    display: block;
    width: 104px;
    aspect-ratio: 104 / 143;
    flex-shrink: 0;
    overflow: hidden;
    /* HARDCODED: 8px image corner; no matching radius token */
    border-radius: 0.5rem;
    background-color: var(--light-border-color);
  }

  .quick-add-sheet__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .quick-add-sheet__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-3xs); /* 2px between eyebrow and title */
    min-width: 0;
    flex: 1 1 0;
  }

  .quick-add-sheet__eyebrow {
    display: flex;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
    margin: 0;
    font-weight: 500;
    color: var(--default-text-color);
  }

  .quick-add-sheet__eyebrow-divider {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--color-black);
    flex-shrink: 0;
  }

  .quick-add-sheet__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 500;
    color: var(--default-text-color);
    text-decoration: none;
  }

  /* Price sits 4px under the title block (Figma), not on the shared el-spacing rhythm */
  .quick-add-sheet__meta product-price {
    /* HARDCODED: spec calls for 4px; no exact margin token */
    margin-block-start: 0.25rem;
  }

  /* ── Options ── */
  /* The shared variant picker draws its own rule above the first swatch group;
     the summary above already provides it here. */
  .quick-add-sheet__options .variant-picker__form .variant-option--swatches:first-child {
    padding-top: 0;
    border-top: none;
  }

  .quick-add-sheet__options .variant-picker {
    margin: 0;
  }

  /* Figma lays the swatch rows out 8 to a line. blocks/colour-swatches.liquid
     hardcodes a 32.9px swatch, so 8 of them plus 7 x 8px gaps come to 319.2px
     and overrun this 319px column by a fraction, wrapping the eighth onto its
     own row. Shaving the gap keeps the row intact; the permanent fix is the
     32.9px width in that block. */
  .quick-add-sheet__options .pdp-colour-swatches {
    column-gap: 7.8px;
  }

  /* 16px between the colour swatch row and the size options (Yu Qi feedback);
     the shared block only leaves 4px, which is the PDP rhythm. */
  .quick-add-sheet__options .pdp-colour-group {
    /* HARDCODED: 16px — no margin token equals 16px. */
    margin-block-end: 1rem;
  }

  /* ── Footer ── */
  .quick-add-sheet__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* HARDCODED: spec calls for 12px; --gap-sm is 11.2px, --gap-md is 14.4px */
    gap: 0.75rem;
    margin-block-start: var(--margin-2xl); /* 24px above the closing rule */
    /* The rule is this element's own border, so the footer is inset with a
       margin (not padding) to keep it off the sheet edges (Yu Qi feedback).
       padding-inline stays 0 so the button row keeps the body's content width. */
    margin-inline: var(--padding-lg);
    padding: var(--padding-lg) 0 var(--padding-2xl); /* 24px bottom (Yu Qi feedback) */
    border-top: 1px solid var(--dark-border-color);
  }

  .quick-add-sheet__footer .buy-buttons-block {
    width: 100%;
  }

  /* Quantity, express checkout and pickup rows are PDP-only — the sheet keeps to
     add-to-cart, wishlist and the PDP link (Figma 9978-42930). */
  .quick-add-sheet__footer .quantity-selector,
  .quick-add-sheet__footer .accelerated-checkout-block,
  .quick-add-sheet__footer local-pickup {
    display: none;
  }

  .quick-add-sheet__pdp-link {
    display: flex;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
    font-weight: 500;
    color: var(--default-text-color);
    text-decoration: none;
  }

  .quick-add-sheet__pdp-link:hover span:first-child {
    text-decoration: underline;
  }

  .quick-add-sheet__pdp-link .svg-wrapper {
    width: 14px;
    height: 14px;
  }
/* END_SECTION:product-quick-add */

/* START_SECTION:product-sliders (INDEX:65) */
/* The heading / text blocks in the header are .el-spacing elements nested
     inside the section's own .el-spacing wrapper. Custom properties inherit,
     so without this reset they re-apply the section's padding (80px mobile /
     120px desktop) above the title. `initial` makes each var() fall through
     to its fallback (0); a block's own inline spacing vars still win. */
  .product-sliders__copy > .el-spacing {
    --padding-block-start: initial;
    --padding-block-start-md: initial;
    --padding-block-start-lg: initial;
    --padding-block-start-xl: initial;
    --padding-block-start-2xl: initial;
    --padding-block-end: initial;
    --padding-block-end-md: initial;
    --padding-block-end-lg: initial;
    --padding-block-end-xl: initial;
    --padding-block-end-2xl: initial;
  }

  .product-sliders__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .product-sliders__copy {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }
  .product-sliders__copy h3 {
    font-size: 38px;
  }

  .product-sliders__carousel {
    margin-top: 16px;
  }
  
  @media screen and (min-width: 1024px) {
    .product-sliders__carousel {
      margin-top: var(--margin-2xl);
    }
    .product-sliders__header {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .product-sliders__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: white;
    opacity: 0.3;
    border-radius: 4px;
  }

  /* Match the skeleton grid to Swiper breakpoints */
  .resource-list--grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, 1fr);
  }

  /* Hide skeleton items beyond visible columns */
  .product-sliders__skeleton-item:nth-child(n+2) {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .resource-list--grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .product-sliders__skeleton-item:nth-child(n+2) {
      display: block;
    }
    .product-sliders__skeleton-item:nth-child(n+3) {
      display: none;
    }
  }

  @media screen and (min-width: 1024px) {
    .resource-list--grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .product-sliders__skeleton-item:nth-child(n+3) {
      display: block;
    }
    .product-sliders__skeleton-item:nth-child(n+4) {
      display: none;
    }
  }
      grid-template-columns: repeat(4, 1fr);
    }
    .product-sliders__skeleton-item:nth-child(n+4) {
      display: block;
    }
    .product-sliders__skeleton-item:nth-child(n+5) {
      display: none;
   .resource-list--grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media screen and (min-width: 1440px) {
    .resource-list--grid {
      grid-template-columns: repeat(5, 1fr);
    }
    .product-sliders__skeleton-item:nth-child(n+4) {
      display: block;
    }
    .product-sliders__skeleton-item:nth-child(n+6) {
      display: none;
    }
  }

  /* --- Peeking carousel: bleed past the padded .container to the true viewport edge ---
     --carousel-cards / --carousel-peek come from the section's Carousel settings via
     the {% style %} block below. Swiper runs slidesPerView: 'auto' and reads the
     computed slide width from layout. */
  .product-sliders .container {
    overflow-x: clip;
    padding-left: 16px;
    padding-right: 16px;
    --carousel-pad: 16px;
    /* --carousel-gap must match spaceBetween in the section's script below (Figma: 8px) */
    --carousel-gap: 8px;
  }

  @media screen and (min-width: 1024px) {
    .product-sliders .container {
      --carousel-pad: 23px;
      padding-left: 23px;
      padding-right: 23px;
    }
  }

  @media screen and (min-width: 1024px) {
    .product-sliders .container {
      --carousel-pad: 30px;
      padding-left: 30px;
      padding-right: 30px;
    }
    .product-sliders__copy h3,
    .product-sliders__copy .h3 {
      font-size: 38px;
    }
  }

  .product-sliders__swiper,
  .ps-tab-swiper {
    overflow: visible;
  }

  .product-sliders__swiper .swiper-slide,
  .ps-tab-swiper .swiper-slide {
    height: unset;
    width: calc(
      (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
      - var(--carousel-gap)
    );
  }

  /* 600-1023px keeps the mobile card size instead of stretching one card across
     the row (Yu Qi feedback). Swiper runs slidesPerView: 'auto' below 1024px, so
     it just picks this width up from layout. */
  @media screen and (min-width: 600px) and (max-width: 1023px) {
    .product-sliders__swiper .swiper-slide,
    .ps-tab-swiper .swiper-slide {
      /* HARDCODED: 220px product card (Figma); no width token. */
      width: 220px;
    }
  }

  /* Hide section only when static product sources have no products */
  product-sliders:not([data-url]):not([data-recently-viewed]):has([data-has-products='false']) {
    display: none;
  }

  .product-sliders__actions {
    display: none;
    align-items: center;
    gap: var(--gap-lg);
    flex-shrink: 0;
  }
  @media screen and (min-width: 1024px){
    .product-sliders__actions {
      display: flex;
    }
  }

  .product-sliders__nav {
    display: none;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
  }

  .ps-nav-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    justify-content: center;
    align-items: center;
    gap: 12px;
    aspect-ratio: 1 / 1;
    /* border-radius: 4px;
    border: 1px solid var(--default-text-color); */
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    /* color: var(--default-text-color); */
  }

  .ps-nav-btn:hover:not(:disabled),
  .ps-nav-btn:focus-visible:not(:disabled) {
    /* background: var(--default-text-color);
    border-color: transparent;
    color: var(--color-white); */
  }

  .ps-nav-btn:disabled {
    /* background: var(--light-border-color);
    border-color: transparent;
    color: #BEC5CD; */
    cursor: default;
  }

  .ps-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* Hide default Swiper nav — custom buttons handle desktop navigation */
  .product-sliders .swiper-button-prev,
  .product-sliders .swiper-button-next {
    display: none;
  }

  .product-sliders__header-link {
    display: none;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
    text-decoration: none;
  }

  .product-sliders__header-link:hover .product-sliders__header-link-label {
    text-decoration: underline;
  }

  .product-sliders__header-link-label {
    color: var(--default-text-color);
    font-size: var(--font-size--sm);
    font-weight: 500;
    line-height: 140%;
  }

  .product-sliders__header-link .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  /* ── Footer link (below carousel) ── */
  .product-sliders__footer {
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-top: var(--margin-lg);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--dark-border-color);
  }

  .product-sliders__footer-link {
    display: flex;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
    text-decoration: none;
  }

  .product-sliders__footer-link-label {
    color: var(--default-text-color);
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 140%;
  }

  .product-sliders__footer-link .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  @media screen and (min-width: 1024px) {
    .product-sliders__nav {
      display: flex;
    }

    .product-sliders__header-link {
      display: flex;
    }

    .product-sliders__footer {
      display: none;
    }
  }

  /* ── Tabs ── */
  .ps-tabs {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .ps-tab {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .ps-tab:not(.is-active) {
    margin-right: var(--gap-xs);
  }

  .ps-tab__line {
    display: block;
    width: 0;
    height: 1px;
    background-color: var(--default-text-color);
    opacity: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: width var(--animation-values), opacity var(--animation-values);
  }

  .ps-tab.is-active .ps-tab__line {
    width: 80px;
    opacity: 1;
  }

  .ps-tab__label {
    color: #BEC5CD;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: color var(--animation-values);
  }

  .ps-tab.is-active .ps-tab__label {
    color: var(--default-text-color);
  }

  @media screen and (min-width: 1024px) {
    .ps-tab__label {
      font-size: var(--font-size--sm);
    }

    .product-sliders__header--has-tabs {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    .product-sliders__header--has-tabs .product-sliders__actions {
      justify-content: flex-end;
    }
  }

  /* .ps-tab-swiper slide width is covered by the shared
     .product-sliders__swiper, .ps-tab-swiper rule above */
/* END_SECTION:product-sliders */

/* START_SECTION:rewards-points (INDEX:67) */
/* ============================================================
   REWARDS POINTS ("Rewards Made Easy")
   Title + description, then a row of bordered reward cards
   (image, title, body). Below 1024px the cards are a horizontal
   peeking Swiper (next card bleeds from the viewport edge, same
   pattern as how-it-works/content-carousel); on desktop they
   form an equal-column grid. Optional footnote below. Mobile-first.
   ============================================================ */
.rewards-points {
  display: block;
  background-color: var(--rewards-points-bg, var(--body-bg-color));
  /* --rp-gap must match spaceBetween in rewards-points.js */
  --rp-pad: var(--container-padding-mobile);
  --rp-gap: 12px;
  padding-inline: var(--rp-pad);
  /* clips the peeking card at the viewport edge, matching the how-it-works pattern */
  overflow-x: clip;
}

.rewards-points__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.rewards-points__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  /* Mobile: 16px from the description to the cards (8px inner gap + 8px) */
  margin-block-end: var(--gap-xs);
}

.rewards-points__title {
  margin: 0;
  color: var(--default-text-color);
}

.rewards-points__description {
  margin: 0;
  max-width: 36rem;
  color: var(--color-blue-70);
}

.rewards-points__swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; .rewards-points' overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.rewards-points__slide {
  height: auto;
  display: flex;
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --rp-cards / --rp-peek come from the per-instance style
     block below. Swiper runs slidesPerView: 'auto'. */
  width: calc(
    (100% + var(--rp-pad) - var(--rp-peek)) / var(--rp-cards)
    - var(--rp-gap)
  );
}

/* ---------- Card (follows the Content Block / content-box look) ---------- */
.rewards-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  /* Card follows the section / page background — no white surface */
  background: var(--rewards-points-bg, var(--body-bg-color));
}

.rewards-card__image {
  /* HARDCODED: 442/553 — Figma Content Block image ratio */
  aspect-ratio: 442 / 553;
  background: var(--light-border-color);
  overflow: hidden;
  /* HARDCODED: 8px radius on all corners — Figma rounds the bottom edge of
     the image inside the card as well as the top; no 8px token */
  border-radius: 0.5rem;
}

.rewards-card__image img,
.rewards-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rewards-card__body {
  display: flex;
  flex-direction: column;
  /* --gap-2xs is 4.8px, not exact; --padding-2xs already covers exact 4px */
  gap: var(--padding-2xs);
  flex: 1 0 auto;
  padding: var(--padding-xl);
}

.rewards-card__title {
  margin: 0;
  color: var(--default-text-color);
}

.rewards-card__text {
  margin: 0;
  color: var(--color-grey-666);
}

.rewards-points__footnote {
  margin: 0;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px) — grid replaces the slider
   ============================================================ */
@media screen and (min-width: 600px) {
  .rewards-points {
    --rp-pad: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .rewards-points {
    /* HARDCODED: 30px — Figma desktop page margin; no matching token */
    padding-inline: 30px;
    margin-bottom: var(--margin-lg);
  }

  .rewards-points__inner {
    gap: var(--spacing-exact-12); /* Figma: 12px between the cards and the footnote */
  }

  .rewards-points__head {
    margin-block-end: var(--spacing-exact-12); /* + the 12px gap = 24px copy→cards (Figma) */
  }

  /* HARDCODED: 38px — desktop title matches the H2 preset while mobile keeps
     the H3 preset (28px). No matching token. */
  .rewards-points .rewards-points__title {
    font-size: 38px;
  }

  .rewards-points__description {
    /* 4 of 12 grid columns with 20px gutters (Figma): (W - 11g) / 12 * 4 + 3g */
    max-width: calc((100% - 11 * var(--gap-xl)) / 3 + 3 * var(--gap-xl));
  }

  .rewards-card__body {
    padding: var(--padding-2xl); /* Figma: 24px all round */
  }

  .rewards-points__track {
    display: grid;
    grid-template-columns: repeat(var(--rp-cols, 4), 1fr);
    gap: var(--gap-xl);
  }

  .rewards-points__slide {
    width: auto;
  }
}

/* "Mobile & tablet layout: Grid" — below 1024px the cards sit in a grid instead of the
   carousel (rewards-points.js skips Swiper): Columns (mobile) below 600px, Columns
   (tablet) from 600px. */
@media screen and (max-width: 1023px) {
  .rewards-points[data-layout='grid'] .rewards-points__track {
    display: grid;
    grid-template-columns: repeat(var(--rp-cols-mobile, 1), minmax(0, 1fr));
    gap: var(--gap-sm, 12px);
  }

  .rewards-points[data-layout='grid'] .rewards-points__slide {
    width: auto;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  .rewards-points[data-layout='grid'] .rewards-points__track {
    grid-template-columns: repeat(var(--rp-cols-tablet, 2), minmax(0, 1fr));
  }
}

/* 30px from the 1024px breakpoint above holds at 1440px and 1920px too —
   no container-padding-xl/2xl override here, unlike other sections */
/* END_SECTION:rewards-points */

/* START_SECTION:search-header (INDEX:68) */
.search-header__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
  }

  .search-header__description {
    color: var(--color-blue-70);
  }

  @media screen and (min-width: 1024px) {
    .search-header__content {
      gap: var(--gap-sm);
    }
  }
/* END_SECTION:search-header */

/* START_SECTION:search-results (INDEX:69) */
.search-empty {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
    min-width: 0;
    max-width: 100%;
  }

  .search-empty__slider {
    min-width: 0;
    max-width: 100%;
  }

  .search-empty__message {
    margin: 0;
  }

  .search-empty__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-block-end: 12px;
    @media screen and (min-width: 1024px) {
      margin-block-end: 20px;
    }
  }

  .search-empty__title {
    margin: 0;
  }

  .search-empty__nav {
    display: none;
    align-items: center;
    gap: var(--gap-2xs);
    flex-shrink: 0;

    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }

  .search-empty__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--default-text-color);
    background-color: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    transition: background-color var(--animation-values);

    &:hover {
      background-color: var(--light-border-color);
    }
  }

  .search-empty__nav-btn.swiper-button-disabled {
    border-color: transparent;
    background-color: var(--light-border-color);
    color: var(--grey-color);
    cursor: default;
  }

  .search-empty__nav-btn svg {
    width: 16px;
    height: 16px;
  }

  .search-empty__swiper {
    overflow: hidden;
    /* Prevent the fixed-width slides from propagating their intrinsic
       width up the grid/flex ancestors (results-list is a grid and
       .container sizes to min-content, which widens the page). */
    contain: inline-size;

    /* Full bleed: escape the .container inline padding so the slides
       run to the viewport edge. Symmetric padding keeps the first slide
       aligned with the content and makes the last slide rest at the
       content edge (not the screen edge), while cards still bleed
       through the padding zone mid-scroll. */
    width: auto;
    margin-inline: calc(var(--container-padding-mobile) * -1);
    padding-inline: var(--container-padding-mobile);

    @media screen and (min-width: 600px) {
      margin-inline: calc(var(--container-padding-tablet) * -1);
      padding-inline: var(--container-padding-tablet);
    }

    @media screen and (min-width: 1024px) {
      margin-inline: calc(var(--container-padding-desktop) * -1);
      padding-inline: var(--container-padding-desktop);
    }

    @media screen and (min-width: 1440px) {
      margin-inline: calc(var(--container-padding-xl) * -1);
      padding-inline: var(--container-padding-xl);
    }

    @media screen and (min-width: 1920px) {
      margin-inline: calc(var(--container-padding-2xl) * -1);
      padding-inline: var(--container-padding-2xl);
    }
  }

  .search-empty__card {
    display: flex;
    flex-direction: column;
    width: 198px;
    border: 1px solid var(--dark-border-color);
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    text-decoration: none;
    color: var(--default-text-color);
    background-color: var(--color-white);

    @media screen and (min-width: 1024px) {
      width: 245px;
    }
  }

  .search-empty__card-media {
    width: 100%;
    aspect-ratio: 245 / 327;
    background-color: var(--light-border-color);
  }

  .search-empty__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-empty__card-title {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    padding: var(--padding-lg);
    font-size: var(--font-p2--size);
    font-weight: 500;
    line-height: 1.4;
  }

  .search-empty__card-icon svg {
    width: 14px;
    height: 14px;
  }
  #ResultsList.main-collection-grid {
    padding-bottom: 56px;
  }
  /* Only the bottom margin is being zeroed here — the `margin-block` shorthand
     this used to be also pinned the TOP margin to 48px at every width, which
     overrode the responsive 40px/48px in snippets/pagination.liquid and left
     mobile at 48px (Pastel #1). */
  .main-collection-grid .pagination-nav {
    margin-block-end: 0;
  }
  .product-sliders.recently-viewed-slider {
    margin-block-start: 0;
    padding-top: 40px;
    border-top: 1px solid #D0D7E0;
  }
  .search-empty {
    padding-top: 40px;
  }
  @media screen and (min-width: 1024px) {
    .product-sliders.recently-viewed-slider {
      padding-top: 50px;
    }
    #ResultsList.main-collection-grid {
      padding-bottom: 80px;
    }
    .search-empty {
      padding-top: 50px;
    }
  }
/* END_SECTION:search-results */

/* START_SECTION:section-about-us-collage (INDEX:70) */
/* =============================================================================
   SECTION: About Us Collage
   Mobile-first. Desktop overrides in @media screen and (min-width: 1024px).
   Tokens: --default-text-color, --body-bg-color, --gap-*, --padding-*,
           --container-padding-*, --animation-values, font preset classes.
   ============================================================================= */

.about-collage-section {
  padding-inline: var(--container-padding-mobile);
}

@media screen and (min-width: 600px) {
  .about-collage-section {
    padding-inline: var(--container-padding-tablet);
  }
}

/* From 1024px every size below is a percentage of the full Figma desktop frame
   (1440 wide, edge to edge), so the section breaks out of the page-width grid
   column and drops its own inline padding. */
@media screen and (min-width: 1024px) {
  .about-collage-section {
    padding-inline: 0;
    margin-inline: calc(var(--page-margin) * -1);
  }
}

.about-collage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl); /* Figma: 32px between the collage and the copy on mobile */
}

.about-collage__images {
  position: relative;
  width: 100%;
  /* Cap the collage at its 600px design width — past that the mobile layout
     scales up and the images read far too large on tablet widths. */
  max-width: 600px;
  /* HARDCODED: 343/327 — Figma mobile collage box at 375px. A fixed ratio (no
     height cap) plus percentage positions below keeps the three images
     overlapping the same way at every mobile/tablet width. */
  aspect-ratio: 343 / 327;
}

.about-collage__img-wrap--3,
.about-collage__img-wrap--4,
.about-collage__img-wrap--5 {
  display: none;
}

.about-collage__img-wrap {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
}

/* Mobile positions are % of the collage box (343 x 327 at 375px, Figma):
   image 1 top-right on the margin, image 2 large bottom-left in front of it,
   image 3 small square in front of image 2's lower-right corner. */

/* Image 1: 183 x 129 at 375px, right-aligned to the margin */
.about-collage__img-wrap--1 {
  right: 0;
  top: 0;
  width: 53.4%;
  aspect-ratio: 183 / 129;
}

/* Image 2: 195px square at 375px, 97px down */
.about-collage__img-wrap--2 {
  left: 0;
  top: 29.6%;
  width: 56.9%;
  aspect-ratio: 1 / 1;
}

/* Image 3: 104px square at 375px, 192px in and 222px down (bottom of the box) */
.about-collage__img-wrap--6 {
  left: 53%;
  top: 67.9%;
  width: 30.3%;
  aspect-ratio: 1 / 1;
}

.about-collage__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-collage__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.about-collage__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl);
  align-self: stretch;
}

.about-collage__text {
  color: var(--default-text-color);
  text-align: center;
  margin: 0;
  /* font-size: 32px; */
}

/* HARDCODED: 52px — Figma button height for this CTA on every breakpoint */
.about-collage__btn {
  height: 52px;
}

.about-collage__btn:hover {
  background-color: #FEFEFE;
  border-color: #D0D7E0;
  color: #06152B; 
}
.about-collage__btn:hover .svg-wrapper {
  background-color: #06152B;
  color: #fefefe; 
}

@media screen and (min-width: 1024px) {
  .about-collage__text {
    /* Figma: 45px on the 1440 frame. 45 / 1440 = 3.125vw, so below 1440 the
       quote keeps the design's four-line wrap inside its 46.7361% column, and
       from 1440 up it pins at 45px (the 1440 and 1920 glossary value). */
    /* font-size: min(3.125vw, 45px); */
  }
}

/* ---------------------------------------------------------------------------
   DESKTOP (1024px+) — Figma node 9594:18251

   Frame                1440 x 829
     Image box          x 76     y 62.11   1289 x 704
     Text + button      x 383.5  y 274      673 x 281   (centred in the frame)

   Image box 1289 x 704, children:
     1  x 85    y 31    245 x 164        4  x 1008  y 0    281 x 189
     2  x 0     y 163   208 x 208        5  x 1038  y 315  251 x 333
     3  x 0     y 482   331 x 222        6  x 887   y 526  178 x 178

   Every width, height and offset below is that number as a percentage of its
   parent box, so the composition is identical at any viewport width.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .about-collage {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* 1440 / 829 — pins the box to the design frame ratio so every percentage
       below resolves proportionally instead of tracking the text height. */
    aspect-ratio: 1440 / 829;
  }

  .about-collage__images {
    position: absolute;
    left: 5.2778%; /* 76 / 1440 */
    right: auto;
    top: 7.4921%; /* 62.11 / 829 */
    bottom: auto;
    width: 89.5139%; /* 1289 / 1440 */
    height: 84.9216%; /* 704 / 829 */
    flex: none;
    max-width: none;
    aspect-ratio: auto;
  }

  .about-collage__img-wrap--3,
  .about-collage__img-wrap--4,
  .about-collage__img-wrap--5 {
    display: block;
  }

  .about-collage__img {
    height: 100%;
    object-fit: cover;
  }

  /* 1 — 245 x 164 at (85, 31) */
  .about-collage__img-wrap--1 {
    left: 6.5943%; /* 85 / 1289 */
    right: auto;
    top: 4.4034%; /* 31 / 704 */
    bottom: auto;
    width: 19.007%; /* 245 / 1289 */
    aspect-ratio: 245 / 164;
  }

  /* 2 — 208 square at (0, 163), overlapping image 1's bottom-left corner */
  .about-collage__img-wrap--2 {
    left: 0;
    right: auto;
    top: 23.1534%; /* 163 / 704 */
    bottom: auto;
    width: 16.1365%; /* 208 / 1289 */
    aspect-ratio: 1 / 1;
    z-index: var(--layer-flat);
  }

  /* 3 — 331 x 222 at (0, 482), flush with the bottom of the box */
  .about-collage__img-wrap--3 {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: 25.6788%; /* 331 / 1289 */
    aspect-ratio: 331 / 222;
  }

  /* 4 — 281 x 189 at (1008, 0), flush with the top-right corner */
  .about-collage__img-wrap--4 {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    width: 21.8003%; /* 281 / 1289 */
    aspect-ratio: 281 / 189;
  }

  /* 5 — 251 x 333 at (1038, 315), right edge flush, over image 6 */
  .about-collage__img-wrap--5 {
    left: auto;
    right: 0;
    top: auto;
    bottom: 7.9545%; /* (704 - 315 - 333) / 704 */
    width: 19.4724%; /* 251 / 1289 */
    aspect-ratio: 251 / 333;
    z-index: var(--layer-raised);
  }

  /* 6 — 178 square at (887, 526), flush with the bottom, behind image 5 */
  .about-collage__img-wrap--6 {
    left: 68.813%; /* 887 / 1289 */
    right: auto;
    top: auto;
    bottom: 0;
    width: 13.8092%; /* 178 / 1289 */
    aspect-ratio: 1 / 1;
  }

  .about-collage__content {
    position: relative;
    z-index: var(--layer-flat);
    flex: none;
    width: 46.7361%; /* 673 / 1440 */
    align-self: center;
    /* HARDCODED: 30px — Figma gap between the quote (ends at 200) and the
       button row (starts at 230). */
    gap: 30px;
  }
}
/* END_SECTION:section-about-us-collage */

/* START_SECTION:seo-text (INDEX:76) */
/* spacing-padding writes the section's padding as custom properties on the
     section wrapper, and custom properties inherit — so the heading and text
     blocks, which are .el-spacing elements themselves, were re-applying the
     section's 40px/50px padding as their own. That put ~92px between the
     heading and the body copy instead of the 12px/16px the heading block's
     margin setting asks for (Pastel #11). Reset the inherited values for the
     blocks; a block that sets its own padding still wins, because its
     spacing-padding writes them inline on the block element. Matched on
     .el-spacing rather than a child combinator so it holds whether or not
     Shopify wraps the block. */
  .seo-text__container .el-spacing {
    --padding-block-start: 0;
    --padding-block-start-md: 0;
    --padding-block-start-lg: 0;
    --padding-block-start-xl: 0;
    --padding-block-start-2xl: 0;
    --padding-block-end: 0;
    --padding-block-end-md: 0;
    --padding-block-end-lg: 0;
    --padding-block-end-xl: 0;
    --padding-block-end-2xl: 0;
    --padding-inline-start: 0;
    --padding-inline-start-md: 0;
    --padding-inline-start-lg: 0;
    --padding-inline-start-xl: 0;
    --padding-inline-start-2xl: 0;
    --padding-inline-end: 0;
    --padding-inline-end-md: 0;
    --padding-inline-end-lg: 0;
    --padding-inline-end-xl: 0;
    --padding-inline-end-2xl: 0;
  }
/* END_SECTION:seo-text */

/* START_SECTION:social-proof-carousel (INDEX:77) */
/* =============================================================================
   SECTION: Social Proof Carousel
   Mobile-first. The mobile layout holds until 1440px — this section keeps the
   scroll track through the 1024–1440 range; grouped desktop slides start at 1440px.
   Value-only steps (container padding, title size) still fire at 1024px.
   Tokens used: --default-text-color (Navy), --light-border-color (Blue-15),
   --dark-border-color (Blue-20), --grey-color (Blue-40), --body-bg-color (BG).
   ============================================================================= */

/* --- Inline (horizontal) padding matches container-padding convention --- */
.social-proof-carousel {
  display: block;
  padding-inline: 16px;
  /* clips the bleeding track at the viewport edge, mirroring the New In /
     Product Sliders carousels so the peeking card reaches the true screen edge */
  overflow-x: clip;
}

@media screen and (min-width: 1024px) {
  .social-proof-carousel {
    padding-inline: 23px;
  }
}

@media screen and (min-width: 1024px) {
  .social-proof-carousel {
    padding-inline: 30px;
  }
}

/* --- Layout column inside the custom element ---
   HARDCODED: 1.75rem (28px) gap — Figma spec. No gap token at this value
   (--gap-xl = 1.25rem/20px, --gap-2xl = 2rem/32px).
   NOTE: no align-items override — default stretch is required so the track
   fills its parent width, which lets overflow-x: auto activate for scroll. --- */
.social-proof-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
   /* HARDCODED: 1rem (16px) padding — Figma spec. No padding token at this value */
  /* padding: var(--padding-5xl) 1rem 0 1rem; */
}

@media screen and (min-width: 1024px) {
  .social-proof-carousel__body {
    /* HARDCODED: 1.5rem (24px) gap — Figma spec. No gap token at this value */
    gap: 1.5rem;
    /* HARDCODED: 120px (7.5rem)  & 30px (1.875rem) padding — Figma spec. No padding token at this value */
    /* padding: 120px 30px 0 30px; */
  }
}
/* --- Header: title + controls --- */
.social-proof-carousel__header {
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
  width: 100%;
}

.social-proof-carousel__controls {
  display: none;
  gap: var(--gap-sm);
  margin-left: auto;
  flex-shrink: 0;
}

@media screen and (min-width: 1024px) {
  /* HARDCODED: 38px — desktop section title matches the H2 preset while mobile
     keeps the H3 preset (28px). No matching token. */
  .social-proof-carousel .social-proof-carousel__header .h3 {
    font-size: 38px;
  }
}

/* The arrows only drive the grouped desktop slides, which start at 1440px. */
@media screen and (min-width: 1440px) {
  .social-proof-carousel__controls {
    display: flex;
  }
}

/* --- Prev / Next buttons ---
   HARDCODED: 2rem (32px) size, 0.25rem (4px) radius.
   No 32px icon-button-size token. No 4px radius token
   (--style-border-radius-xs = 0.2rem/3.2px is closest but doesn't match). --- */
.social-proof-carousel__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  /* border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent; */
  cursor: pointer;
  flex-shrink: 0;
  /* transition: background var(--animation-values), border-color var(--animation-values); */
}

.social-proof-carousel__btn:hover:not(:disabled),
.social-proof-carousel__btn:focus-visible:not(:disabled) {
  /* background: var(--default-text-color);
  border-color: transparent;
  color: var(--color-white); */
}

.social-proof-carousel__btn:disabled {
  /* background: var(--blue-15-tint, #E8EDF2);
  border-color: var(--blue-15-tint, #E8EDF2); */
}

.social-proof-carousel__btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

/* --- Mobile scroll track (hidden on desktop) --- */
.social-proof-carousel__track {
  display: flex;
  flex-direction: row;
  gap: var(--gap-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
  /* Bleed past the wrapper's own right-edge padding only, so the peeking card
     reaches the true viewport edge — the left stays flush with the section's
     normal padding (inherited from .social-proof-carousel, untouched here).
     --carousel-peek comes from the section's Carousel setting via the
     {% style %} block below. */
  margin-inline-end: calc(-1 * var(--container-padding-mobile));
  padding-inline-end: var(--carousel-peek);
}

@media screen and (min-width: 600px) {
  .social-proof-carousel__track {
    margin-inline-end: calc(-1 * var(--container-padding-tablet));
  }
}

/* The track now runs to 1440px, so its bleed has to match the 30px the section
   pads with from 1024px or the peeking card stops short of the edge. */
@media screen and (min-width: 1024px) {
  .social-proof-carousel__track {
    margin-inline-end: calc(-1 * var(--container-padding-desktop));
  }
}

.social-proof-carousel__track::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 1440px) {
  .social-proof-carousel__track {
    display: none;
  }
}

/* --- Desktop slides wrapper (hidden on mobile) --- */
.social-proof-carousel__slides {
  display: none;
}

@media screen and (min-width: 1440px) {
  .social-proof-carousel__slides {
    display: block;
    overflow: hidden;
  }
}

/* --- Single desktop slide: Figma split, not an even one ---
   Node 9458:25128 — UGC Reels 754 / gutter 20 / Review Cards 606 in a 1380
   container. Expressed as fr so the split holds at any width above 1024px. */
.social-proof-carousel__slide {
  display: grid;
  grid-template-columns: 754fr 606fr;
  gap: var(--gap-xl);
}

/* --- Video column (left, desktop) --- */
.social-proof-carousel__videos-col {
  display: flex;
  flex-direction: row;
  gap: var(--gap-xl);
}

/* --- Reviews column (right, desktop) --- */
.social-proof-carousel__reviews-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

/* No height here: the grid row is sized by the video column's locked ratio and
   the two review cards (flex: 1 0 0) split whatever that comes to. */


/* =============================================================================
   VIDEO CARD
   ============================================================================= */

/* --- HARDCODED: 230px mobile card width — no card-width token --- */
.social-proof-video-card {
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  scroll-snap-align: start;
  flex-shrink: 0;
}

@media screen and (min-width: 1440px) {
  .social-proof-video-card {
    flex: 1 0 0;
    width: auto;
    gap: var(--gap-md);
    scroll-snap-align: unset;
  }
}

/* --- HARDCODED: 0.5rem (8px) radius — closest token --style-border-radius-sm = 0.6rem/9.6px ---*/
.social-proof-video-card__media {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background-color: var(--light-border-color);
  flex-shrink: 0;
  align-self: stretch;
}

/* The video autoplays muted, so this button is the only route back to sound.
   HARDCODED: 32px square, 4px radius — Figma square-button; no tokens. */
.social-proof-video-card__sound {
  position: absolute;
  top: var(--padding-xs);
  right: var(--padding-xs);
  z-index: var(--layer-flat);
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.25rem;
  background: rgb(var(--color-white-rgb) / var(--opacity-20));
  backdrop-filter: blur(2px);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--animation-values);
}

.social-proof-video-card__sound:hover {
  background: rgb(var(--color-white-rgb) / var(--opacity-40));
}

.social-proof-video-card__sound svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Muted is the resting state, so its icon shows until the button is pressed. */
.social-proof-video-card__sound-icon--audible {
  display: none;
}

.social-proof-video-card__sound.is-audible .social-proof-video-card__sound-icon--muted {
  display: none;
}

.social-proof-video-card__sound.is-audible .social-proof-video-card__sound-icon--audible {
  display: flex;
}

/* Credit over the video — mobile keeps the copy under the card instead. */
.social-proof-video-card__overlay {
  display: none;
}

.social-proof-video-card__overlay-name,
.social-proof-video-card__overlay-role {
  margin: 0;
}

.social-proof-video-card__overlay-name {
  color: var(--color-white);
}

.social-proof-video-card__overlay-role {
  color: var(--color-blue-35, #bec5cd);
}

.social-proof-video-card__video,
.social-proof-video-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 1440px) {
  /* The base 9 / 16 aspect-ratio becomes a FLOOR, not a fixed ratio.
     `flex: 1 0 auto` in the card's column: basis auto takes its height from
     the ratio, shrink 0 means it can never go below it, grow 1 lets it stretch
     up to the grid row when the review column is the taller of the two.
     So a short review card can no longer squash the reel (which is what
     cropped the video), and a tall one just gives it extra height.
     Figma's card is 367 x 650.59 (0.5641); 9 / 16 is 0.5625 — within 2px at
     the design width, and it is the reels' own ratio. */
  .social-proof-video-card__media {
    flex: 1 0 auto;
  }

  .social-proof-video-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: var(--padding-xl);
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
    opacity: 0;
    transition: opacity var(--animation-values-slow);
  }

  .social-proof-video-card:hover .social-proof-video-card__overlay,
  .social-proof-video-card:focus-within .social-proof-video-card__overlay {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-proof-video-card__overlay {
    transition: none;
  }
}

.social-proof-video-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-proof-video-card__text {
  display: flex;
  flex-direction: column;
  padding-inline: var(--padding-xs);
  align-self: stretch;
}

@media screen and (min-width: 1440px) {
  .social-proof-video-card__text {
    display: none;
  }
}

/* .p3 class handles font-size and line-height; only override colour and margin here */
.social-proof-video-card__name {
  color: var(--default-text-color);
  margin: 0;
  font-weight: 500;
}

.social-proof-video-card__role {
  color: var(--grey-color);
  margin: 0;
  font-weight: 500;
}


/* =============================================================================
   REVIEW CARD
   ============================================================================= */

/* --- HARDCODED: 260px mobile card width, 0.5rem (8px) radius — no tokens --- */
.social-proof-review-card {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-2xl);
  scroll-snap-align: start;
  flex-shrink: 0;
  padding: var(--padding-xl);
  box-sizing: border-box;
  background: var(--light-border-color);
  border-radius: 0.5rem;
}

@media screen and (min-width: 1440px) {
  .social-proof-review-card {
    flex: 1 0 0;
    width: auto;
    align-self: stretch;
    scroll-snap-align: unset;
    border: 1px solid var(--dark-border-color);
    padding: var(--padding-2xl);
  }
}

.social-proof-review-card__quote-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  align-self: stretch;
  flex: 1 0 0;
}

/* Pastel #24 — 30px between the quote and its rule on desktop. The sibling
   name -> stars override lives with the .social-proof-review-card__meta base
   rule further down: declaring it up here put it BEFORE that base rule, and at
   equal specificity the later declaration won at every width, which is why the
   4px never took effect. */
@media screen and (min-width: 1440px) {
  .social-proof-review-card__quote-wrap {
    gap: var(--spacing-exact-30); /* 30px */
  }
}

/* .p2--bold handles font-size / family / weight; override only colour and margin */
.social-proof-review-card__quote {
  color: var(--default-text-color);
  margin: 0;
}

.social-proof-review-card__divider {
  width: 100%;
  height: 1px;
  background: var(--dark-border-color);
  border: none;
  margin: 0;
  flex-shrink: 0;
}

.social-proof-review-card__bottom {
  display: flex;
  flex-direction: column;
  /* Pastel #45: 12px down to the product card on mobile / tablet. */
  gap: var(--spacing-exact-12);
  align-self: stretch;
}

@media screen and (min-width: 1440px) {
  .social-proof-review-card__bottom {
    flex-direction: row;
    align-items: flex-end;
    /* HARDCODED - 1.5rem (24px) gap — no gap token at this value */
    gap: 1.5rem;
  }
}

.social-proof-review-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--padding-2xs);
  flex: 1 0 0;
}

.social-proof-review-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* HARDCODED: 40px decorative rule — no token for name-line width */
.social-proof-review-card__name-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--default-text-color);
  flex-shrink: 0;
}

/* .p3 handles font-size; override only colour and margin */
.social-proof-review-card__name {
  color: var(--default-text-color);
  margin: 0;
}

.social-proof-review-card__stars {
  display: flex;
  align-items: center;
  color: var(--default-text-color);
}

.social-proof-review-card__stars svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}


/* =============================================================================
   PRODUCT CARD (inside review card)
   ============================================================================= */

/* --- HARDCODED: 0.25rem (4px) radius — no 4px token --- */
.social-proof-product-card {
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--dark-border-color);
  background: var(--body-bg-color);
  overflow: hidden;
  align-self: stretch;
}

@media screen and (min-width: 1440px) {
  /* HARDCODED: 298px desktop width — Figma spec; no token */
  .social-proof-product-card {
    width: 298px;
    flex-shrink: 0;
    align-self: auto;
  }
}

/* HARDCODED: 60px × 83px mobile, 44px × 60px desktop — Figma spec; no image-thumbnail-size tokens */
.social-proof-product-card__image-wrap {
  width: 60px;
  height: 83px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--light-border-color);
  align-self: stretch;
}

@media screen and (min-width: 1440px) {
  .social-proof-product-card__image-wrap {
    width: 44px;
    height: 60px;
    margin: var(--padding-sm);
    /* HARDCODED: 0.125rem (2px) inside corner — no 2px token */
    border-radius: 0.125rem;
    align-self: center;
  }
}

.social-proof-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .p3 handles font-size; override only colour, margin, clamping */
.social-proof-product-card__title {
  flex: 1;
  padding-inline: var(--padding-sm);
  color: var(--default-text-color);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- Bag icon link button ---
   HARDCODED: 2rem (32px) size, 0.25rem (4px) radius — no tokens --- */
.social-proof-product-card__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  text-decoration: none;
  background: transparent;
  margin: var(--padding-sm);
  color: var(--default-text-color);
  transition: background var(--animation-values);
}

.social-proof-product-card__btn:hover {
  background: var(--light-border-color);
}

.social-proof-product-card__btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}
/* END_SECTION:social-proof-carousel */

/* START_SECTION:store-list (INDEX:78) */
/* ============================================================
   STORE LIST ("Our Locations")
   A large featured store panel (image + details + actions) driven
   by a thumbnail strip below it (Swiper thumbs → main). Static from
   block settings. Mobile-first.
   ============================================================ */
.store-list {
  display: block;
  background-color: var(--store-list-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.store-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  /* Only applies when an Anchor ID is set and the section is jumped to.
     Clears the sticky header (--header-height is 0px when no header is
     present) plus a gap, so the title is never sat under the navbar. */
  scroll-margin-top: calc(var(--header-height, 0px) + var(--margin-4xl));
}

.store-list__title {
  margin: 0;
  color: var(--default-text-color);
}

.store-list .swiper {
  width: 100%;
  overflow: hidden;
}

/* ---------- Featured card ---------- */
.store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gap-2xl);
  min-height: 500px;
  padding: var(--padding-4xl) var(--padding-lg);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  isolation: isolate;
}

.store-card__bg {
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background: var(--light-border-color);
}

.store-card__bg picture,
.store-card__bg img,
.store-card__bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient scrim for legibility — darkness is per-block via --store-card-overlay-opacity.
   Mobile/tablet: the Figma scrim runs from transparent at the very top to the
   block's darkness at the bottom, so the copy stays readable on the shorter
   card. Desktop starts the fade halfway down (rule below). */
.store-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-lowest);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / var(--store-card-overlay-opacity, var(--opacity-80))) 100%);
}

@media screen and (min-width: 1024px) {
  .store-card::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0 0 0 / var(--store-card-overlay-opacity, var(--opacity-80))));
  }
}

.store-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
}

.store-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-exact-12);
  flex: 1 0 0;
  min-width: 0;
}

.store-card__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--padding-xs) var(--padding-3xs);
  /* Extra 8px on top of the 12px flex gap = 20px eyebrow-to-name spacing per Figma */
  margin-bottom: var(--margin-xs);
  border: 1px solid var(--color-white);
  border-radius: 4px;
  color: var(--color-white);
  font-size: 11px;
  line-height: 1.4;
  width: fit-content;
}

.store-card__name {
  margin: 0;
  color: var(--color-white);
}

.store-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.store-card__detail {
  display: flex;
  align-items: center; /* Figma: icon centred on the text */
  gap: var(--gap-xs);
  color: var(--color-white);
  margin: 0;
}

.store-card__detail svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.store-card__actions {
  display: grid;
  grid-template-columns: max-content;
  align-self: flex-start;
  gap: var(--gap-xs);
}

/* Glass buttons */
.store-card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  padding: var(--spacing-exact-12);
  white-space: nowrap;
  border-radius: 4px;
  background: rgba(255, 255, 255, var(--opacity-20));
  backdrop-filter: blur(2px);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--animation-values);
}

.store-card__btn:hover {
  background: #FEFEFE;
  color: #06152B;
}
.store-card__btn:hover .store-card__btn-icon {
  color: #FEFEFE;
  background: #06152B;
}

.store-card__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--color-white);
  color: var(--default-text-color);
}

.store-card__btn-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- Thumbnails ---------- */
.store-list__thumbs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  align-self: stretch;
}

.store-list__thumbs .swiper-slide {
  /* HARDCODED: 72px width — Figma gives aspect-ratio only, sized down from the previous 160px thumb */
  width: 48px;
  cursor: pointer;
}

.store-list__thumb {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 48 / 59;
  border: 1.5px solid transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  isolation: isolate;
  opacity: 0.5;
  background: var(--light-border-color);
  transition: opacity var(--animation-values), border-color var(--animation-values);
}

.store-list__thumb img,
.store-list__thumb svg {
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-list__thumb-name {
  display: none;
  margin: 0;
  color: var(--color-white);
}

.swiper-slide-thumb-active .store-list__thumb {
  opacity: 1;
  border-color: var(--default-text-color);
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .store-list {
    padding-inline: var(--container-padding-desktop);
  }

  .store-list__body {
    gap: var(--gap-lg);
  }

  .store-card {
    min-height: 600px;
    /* HARDCODED: 50px padding — Figma spec; falls between --padding-5xl (48px) and --padding-6xl (64px) */
    padding: 3.125rem;
    gap: var(--gap-2xl);
  }

  .store-card__row {
    flex-direction: row;
    align-items: flex-end;
  }

  .store-card__actions {
    grid-auto-flow: column;
    grid-template-columns: none;
    align-self: auto;
  }

  .store-card__eyebrow {
    margin-bottom: var(--spacing-exact-12);
  }

  .store-list__thumbs .swiper-slide {
    /* HARDCODED: 200px width — Figma desktop thumb, bigger than the mobile 72px thumb */
    width: 12.5rem;
  }

  .store-list__thumb {
    align-items: flex-end;
    padding: var(--spacing-exact-12);
    aspect-ratio: 200 / 133;
    isolation: isolate;
  }

  .store-list__thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-lowest);
    background: rgba(0, 0, 0, var(--opacity-20));
  }

  .swiper-slide-thumb-active .store-list__thumb-name {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  /* HARDCODED: 55px — store name sits between the H1 (45px) and H0 (70px)
     presets; two-class selector so the global .h1 breakpoint rule cannot win */
  .store-card .store-card__name {
    font-size: 55px;
  }
}

@media screen and (min-width: 1440px) {
  .store-list {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .store-list {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:store-list */

/* START_SECTION:testimonial-marquee (INDEX:79) */
/* ============================================================
   TESTIMONIAL MARQUEE ("Hear What Others Are Saying")
   Continuously scrolling rows of testimonial cards. Mobile shows
   one row; on desktop (1024px+) an optional second row appears and
   scrolls in the opposite direction. CSS-only animation — items
   are duplicated in Liquid so translateX(-50%) loops seamlessly.
   Mobile-first.
   ============================================================ */
.testimonial-marquee {
  display: block;
  background-color: var(--testimonial-marquee-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.testimonial-marquee__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.testimonial-marquee__title {
  margin: 0;
  color: var(--default-text-color);
}

/* HARDCODED: 28px — mobile title is smaller than the H2 preset (32px);
   no matching token. Desktop returns to the preset's 38px below. */
.testimonial-marquee .testimonial-marquee__title {
  font-size: 28px;
}

/* Rows break out of the padded container to full viewport width,
   matching each breakpoint's container padding (same technique as
   the Colour Marquee). */
.testimonial-marquee__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  overflow: hidden;
  margin-inline: calc(-1 * var(--container-padding-mobile));
}

.testimonial-marquee__row {
  width: 100%;
  overflow: hidden;
}

/* Row 2 is desktop-only — mobile shows a single line */
.testimonial-marquee__row--secondary {
  display: none;
}

.testimonial-marquee__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation-duration: var(--testimonial-marquee-duration, 40s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.testimonial-marquee__track--left {
  animation-name: testimonial-marquee-left;
}

.testimonial-marquee__track--right {
  animation-name: testimonial-marquee-right;
}

.testimonial-marquee__track--paused,
.testimonial-marquee__row:hover .testimonial-marquee__track {
  animation-play-state: paused;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .testimonial-marquee__track {
    animation: none;
  }
}

/* ---------- Card ---------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* HARDCODED: 40px — Figma Padding-Section-S; no exact gap token match */
  gap: 2.5rem;
  /* HARDCODED: 280px card width — Figma mobile Review Card */
  width: 280px;
  height: 350px;
  flex-shrink: 0;
  padding: var(--padding-xl); /* Figma: Padding-XL, 20px */
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  background: var(--light-border-color); /* Figma: Blue-15 (#E8EDF2) review card surface */
  /* HARDCODED: 12px gutter between cards — Figma; margin (not flex gap) so
     each duplicated half of the track has identical width for the -50% loop */
  margin-right: 12px;
}

.testimonial-card__review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--padding-xl); /* Figma: Padding-XL, 20px */
  align-self: stretch;
  /* grows to fill the stretched card height (marquee track uses
     align-items: stretch) so the reviewer box lands in the same spot
     across cards regardless of quote length */
  flex: 1 0 auto;
}

.testimonial-card__divider {
  display: block;
  align-self: stretch;
  height: 1px;
  flex-shrink: 0;
  background: var(--dark-border-color); /* #D0D7E0 */
}

.testimonial-card__stars {
  display: flex;
  align-items: center;
  gap: var(--gap-3xs);
  color: var(--default-text-color);
}

.testimonial-card__stars svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.testimonial-card__quote {
  margin: 0;
  color: var(--default-text-color);
  white-space: normal;
}

.testimonial-card__reviewer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px; /* HARDCODED: Figma spec; no exact gap token match */
  align-self: stretch;
}

.testimonial-card__person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.testimonial-card__name-row {
  display: flex;
  align-items: flex-start;
  gap: var(--padding-xs); /* Figma: Padding-S, 8px */
  align-self: stretch;
}

/* HARDCODED: 40px decorative rule — matches review-card name-line */
.testimonial-card__line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--default-text-color);
  flex-shrink: 0;
  margin-top: 0.6em; /* roughly centers the rule against the name's line-height */
}

.testimonial-card__name {
  margin: 0;
  color: var(--default-text-color);
  font-weight: 500;
}

.testimonial-card__role {
  margin: 0;
  color: var(--default-text-color);
}

/* The height is set on the image and the wrapper is a flex box, so the
   wrapper hugs the logo's scaled width rather than its intrinsic one. */
.testimonial-card__icon {
  display: flex;
  flex-shrink: 0;
}

/* HARDCODED: 32px mobile / 34px desktop logo height — Figma reviewer icon;
   no matching token. Width hugs the artwork at that height. */
.testimonial-card__icon img {
  width: auto;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* ============================================================
   DESKTOP (1024px) — second row appears, wider cards
   ============================================================ */
@media screen and (min-width: 1024px) {
  .testimonial-marquee {
    padding-inline: var(--container-padding-desktop);
  }

  .testimonial-marquee__inner {
    gap: var(--padding-2xl); /* Figma: 24px */
  }

  .testimonial-marquee .testimonial-marquee__title {
    font-size: 38px;
  }

  .testimonial-marquee__rows {
    gap: var(--padding-2xl); /* 24px between the two rows on desktop */
    margin-inline: calc(-1 * var(--container-padding-desktop));
  }

  .testimonial-marquee__row--secondary {
    display: block;
  }

  .testimonial-card {
    /* HARDCODED: 446px card width, 20px gutter — Figma desktop Review Card */
    width: 446px;
    height: auto;
    margin-right: 20px;
    padding: var(--padding-2xl); /* Figma: 24px */
  }

  .testimonial-card__review {
    gap: var(--spacing-exact-30); /* 30px quote -> divider on desktop */
  }

  .testimonial-card__reviewer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
  }

  /* The stretch that gives the name block full width in the mobile column
     would fill the row's height here and float the name to the top, so the
     name and the logo would not share a bottom edge. */
  .testimonial-card__person {
    align-self: flex-end;
  }

  .testimonial-card__icon img {
    height: 34px;
  }
}

@media screen and (min-width: 1440px) {
  .testimonial-marquee {
    padding-inline: var(--container-padding-xl);
  }

  .testimonial-marquee__rows {
    margin-inline: calc(-1 * var(--container-padding-xl));
  }
}

@media screen and (min-width: 1920px) {
  .testimonial-marquee {
    padding-inline: var(--container-padding-2xl);
  }

  .testimonial-marquee__rows {
    margin-inline: calc(-1 * var(--container-padding-2xl));
  }
}
/* END_SECTION:testimonial-marquee */

/* START_SECTION:trusted-teams (INDEX:80) */
/* ============================================================
   TRUSTED TEAMS
   Title + a horizontal Swiper of photos. Each block sets its own
   display width AND height, so card sizes are fully merchant-
   controlled per breakpoint (jagged by design). The next card
   still peeks from the edge via the bleed/clip technique below.
   Mobile-first.
   ============================================================ */
.trusted-teams {
  display: block;
  background-color: var(--trusted-teams-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
  /* clips the bleeding slide at the viewport edge, matching the category
     carousel peek pattern */
  overflow-x: clip;
}

.trusted-teams__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.trusted-teams__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
}

.trusted-teams__title {
  margin: 0;
  color: var(--default-text-color);
}

.trusted-teams__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.trusted-teams__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.trusted-teams__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.trusted-teams__btn.swiper-button-disabled {
  cursor: default;
}

.trusted-teams .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; .trusted-teams's overflow-x: clip cuts them at the
     viewport */
  overflow: visible;
}

.trusted-teams .swiper-wrapper {
  align-items: flex-start;
}

.trusted-teams__slide {
  width: var(--tt-width-mobile, 280px);
  flex-shrink: 0;
}

.trusted-teams__image {
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-border-color);
}

.trusted-teams__image img,
.trusted-teams__image svg {
  display: block;
  width: 100%;
  height: var(--tt-height-mobile, 260px);
  object-fit: cover;
}

@media screen and (min-width: 600px) {
  .trusted-teams {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .trusted-teams__nav {
    display: flex;
  }
}

@media screen and (min-width: 1024px) {
  .trusted-teams {
    padding-inline: var(--container-padding-desktop);
  }

  .trusted-teams__inner {
    gap: var(--padding-2xl); /* Figma: 24px */
  }

  .trusted-teams__slide {
    width: var(--tt-width, 420px);
  }

  .trusted-teams__image img,
  .trusted-teams__image svg {
    height: var(--tt-height, 420px);
  }
}

@media screen and (min-width: 1440px) {
  .trusted-teams {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .trusted-teams {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:trusted-teams */

/* START_SECTION:value-list (INDEX:81) */
/* ============================================================
   VALUE LIST ("Frame 671")
   A stacked list of large titles separated by rules. On desktop
   each row reveals its description on hover (the first row is open
   at rest); on mobile every description is shown. CSS-only.
   ============================================================ */
.value-list {
  display: block;
  background-color: var(--value-list-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.value-list__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* HARDCODED: 40px — no gap/margin token matches this value */
}

/* ---------- Eyebrow (line + label) ---------- */
.value-list__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.value-list__eyebrow-line {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--default-text-color);
  flex-shrink: 0;
}

.value-list__eyebrow-label {
  color: var(--default-text-color);
  font-weight: 500;
}

/* ---------- List ---------- */
.value-list__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.value-list__row {
  border-bottom: 1px solid var(--dark-border-color);
  margin-bottom: 0;
}

.value-list__row-inner {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-block: var(--padding-xl); /* 20px */
}

/* The first row butts against the eyebrow, so the body gap above it is the
   whole distance — its own top padding would double up. */
.value-list__row:first-child .value-list__row-inner {
  padding-block-start: 0;
}

.value-list__title {
  margin: 0;
  color: var(--default-text-color);
  transition: color var(--animation-values);
}

/* Description reveal via animatable grid-rows */
.value-list__desc-wrap {
  display: grid;
  grid-template-rows: 1fr; /* mobile: open */
  padding-top: 0.75rem; /* HARDCODED: 12px — no padding token matches this value */
  transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
    padding-top var(--animation-speed-slow) var(--animation-easing);
}

.value-list__desc-wrap > * {
  min-height: 0;
  overflow: hidden;
}

.value-list__desc {
  margin: var(--margin-lg) 0 0;
  max-width: 28rem;
  color: var(--color-blue-70);
}

/* ============================================================
   DESKTOP (1024px) — hover reveal
   ============================================================ */
@media screen and (min-width: 600px) {
  .value-list {
    padding-inline: var(--container-padding-tablet);
  }
}

@media screen and (min-width: 1024px) {
  .value-list {
    padding-inline: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }

  .value-list__body {
    gap: var(--spacing-exact-50); /* 50px eyebrow -> first row on desktop */
  }

  /* HARDCODED: 55px — desktop row title sits between the H1 (45px) and H0
     (70px) presets; no matching token. Mobile keeps the H1 preset. */
  .value-list .value-list__title {
    font-size: 55px;
  }

  /* Desktop rhythm: 16px title -> descriptor (wrap padding 0 + 16px margin),
     24px text -> divider on both sides of the rule */
  .value-list__row-inner {
    padding-block: var(--padding-2xl);
  }

  /* The 16px only belongs to an open descriptor — a collapsed row is
     zero-height, so the padding would show as dead space above the rule.
     Every state below sets the two together. */
  .value-list__desc-wrap {
    padding-top: 16px;
  }

  /* Resting state: titles muted, descriptions collapsed */
  .value-list__row .value-list__title {
    color: #bec5cd; /* Blue-35 (Placeholder) — no CSS var exists */
  }

  .value-list__row .value-list__desc-wrap {
    grid-template-rows: 0fr;
    padding-top: 0;
  }

  /* First row is open at rest so the section reads clearly */
  .value-list__row:first-child .value-list__title {
    color: var(--default-text-color);
  }

  .value-list__row:first-child .value-list__desc-wrap {
    grid-template-rows: 1fr;
    padding-top: 16px;
  }

  /* Hovering the list collapses the resting-open first row … */
  .value-list__list:hover .value-list__row:first-child .value-list__title {
    color: #bec5cd;
  }

  .value-list__list:hover .value-list__row:first-child .value-list__desc-wrap {
    grid-template-rows: 0fr;
    padding-top: 0;
  }

  /* … and the actually-hovered row opens (declared last to win ties) */
  .value-list__list:hover .value-list__row:hover .value-list__title {
    color: var(--default-text-color);
  }

  .value-list__list:hover .value-list__row:hover .value-list__desc-wrap {
    grid-template-rows: 1fr;
    padding-top: 16px;
  }
}

@media screen and (min-width: 1440px) {
  .value-list {
    padding-inline: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }
}

@media screen and (min-width: 1920px) {
  .value-list {
    padding-inline: var(--padding-page-margin-desktop); /* Figma: Padding-Page-margin, 30px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-list__desc-wrap {
    transition: none;
  }
}
/* END_SECTION:value-list */

/* START_SECTION:video-section (INDEX:82) */
/* ============================================================
   VIDEO SECTION
   A single 16:9 video panel with a cover image and a white square
   play button. Supports a Shopify-hosted video file or an external
   YouTube / Vimeo URL (hosted file takes priority). Click-to-play
   via video-section.js. Mobile-first.
   ============================================================ */
.video-section {
  display: block;
  background-color: var(--video-section-bg, var(--body-bg-color));
  padding-inline: var(--container-padding-mobile);
}

.video-section__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-black);
}

.video-section__frame video,
.video-section__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-section__frame video {
  object-fit: contain;
}

/* ---------- Cover / poster overlay ---------- */
.video-section__poster {
  position: absolute;
  inset: 0;
  z-index: var(--layer-flat);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-section__poster[hidden] {
  display: none;
}

.video-section__poster img,
.video-section__poster svg.placeholder-svg {
  position: absolute;
  inset: 0;
  z-index: var(--layer-lowest);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-section__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: var(--padding-xs);
  border: 0;
  border-radius: 4px;
  background: var(--color-white);
  color: var(--default-text-color);
  cursor: pointer;
  transition: transform var(--animation-values);
}

.video-section__play:hover {
  transform: scale(1.05);
}

.video-section__play svg {
  width: 28.8px;
  height: 28.8px;
  display: block;
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .video-section {
    padding-inline: var(--container-padding-desktop);
  }

  .video-section__play svg {
    width: 24px;
    height: 24px;
  }
}

@media screen and (min-width: 1440px) {
  .video-section {
    padding-inline: var(--container-padding-xl);
  }
}

@media screen and (min-width: 1920px) {
  .video-section {
    padding-inline: var(--container-padding-2xl);
  }
}
/* END_SECTION:video-section */

/* START_SECTION:wishlist-content (INDEX:83) */
/* ============================================================
   WISHLIST CONTENT
   Client-side rendered wishlist product grid (HulkApps Advanced
   Wishlist via the /apps/advanced-wishlist app proxy) with an
   empty-state category carousel ("Discover our Products").
   States are driven by wishlist-page.js via data-state.
   ============================================================ */
.wishlist-content {
  display: block;
  /* empty-state carousel slides bleed to the viewport edge */
  overflow-x: clip;
}

.wishlist-content__grid[hidden],
.wishlist-content__skeleton[hidden],
.wishlist-content__empty[hidden] {
  display: none;
}

/* .product-grid has margin:auto — as a direct child of the .section grid it
   shrink-wraps to one column; stretch it back to the content column. */
.product-grid.wishlist-content__grid {
  width: 100%;
  margin: 0;
  /* 8px gutter between cards; 24px between rows, 50px from 1024px up
     (Yu Qi feedback, revising the earlier 20px).
     HARDCODED 1.5rem (24px): no --gap-* token is 24px (xl is 20px, 2xl 32px). */
  gap: 1.5rem var(--gap-xs);
  /* Figma: always 2 columns below 1024, always 4 columns from 1024 up */
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 1024px) {
  .product-grid.wishlist-content__grid {
    grid-template-columns: repeat(4, 1fr);
    /* HARDCODED 50px row gap (Yu Qi feedback) — no gap token is 50px. */
    row-gap: 50px;
  }
}

/* Injected card content (large imgs) must never stretch the 1fr tracks:
   without min-width:0 the item's min-content blows the column widths apart
   while cards stream in. */
.product-grid.wishlist-content__grid .product-grid__item {
  min-width: 0;
  /* The items are <li>, and the inherited list margin-bottom stacked on the
     grid's row gap — 30px between rows instead of the 24px asked for (and 56px
     instead of 50px on desktop). The row gap is the only spacing here. */
  margin-bottom: 0;
}

/* Gap between the empty-state carousel's heading and its cards: 12px, 16px
   from 1024px up (Yu Qi feedback). snippets/category-carousel-css.liquid sets
   16px/32px and is shared with sections/category-carousel.liquid elsewhere, so
   the override is scoped to this page rather than changing it for every
   carousel that was not part of this review. */
.wishlist-content .category-carousel__body {
  gap: 12px;
}

@media screen and (min-width: 1024px) {
  .wishlist-content .category-carousel__body {
    gap: var(--gap-lg); /* 16px */
  }
}

/* While a card is still hydrating, keep the skeleton look and hide the
   half-loaded card so there is no layout flash on first paint. */
.wishlist-content__grid .product-grid__item.is-loading > * {
  visibility: hidden;
}

/* Card fade-out when its heart is un-wishlisted (removed by wishlist-page.js) */
.wishlist-content__grid .product-grid__item.is-removing {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--animation-values-slow), transform var(--animation-values-slow);
  pointer-events: none;
}

/* ---------- Skeleton (visible while the wishlist loads) ---------- */
.wishlist-content__skeleton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-xl) var(--gap-xs);
}

@media screen and (min-width: 1024px) {
  .wishlist-content__skeleton {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wishlist-content__skeleton-tile,
.wishlist-content__grid .product-grid__item.is-loading {
  aspect-ratio: 339 / 465;
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  background: var(--light-border-color);
  animation: wishlist-skeleton-pulse 1.2s var(--animation-easing) infinite alternate;
}

.wishlist-content__skeleton-tile:nth-child(n + 3) {
  display: none;
}

@media screen and (min-width: 1024px) {
  .wishlist-content__skeleton-tile:nth-child(n + 3) {
    display: block;
  }
}

@keyframes wishlist-skeleton-pulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-content__skeleton-tile,
  .wishlist-content__grid .product-grid__item.is-loading {
    animation: none;
  }
}
/* END_SECTION:wishlist-content */

/* START_SECTION:wishlist-heading (INDEX:84) */
/* ============================================================
   WISHLIST HEADING
   Page title + status line for the wishlist page. The status line
   swaps between the guest login prompt and the empty-wishlist
   message; wishlist-page.js flips data-state on the element when
   the wishlist-content section reports its item count.
   ============================================================ */
.wishlist-heading {
  display: flex;
  flex-direction: column;
}

.wishlist-heading__title {
  margin: 0;
  color: var(--default-text-color);
  /* Size comes from the preset class on the element (h3 — Yu Qi feedback); a
     hardcoded font-size here used to override whatever the setting picked. */
}

.wishlist-heading__desc * {
  font-size: 13px;
}
.wishlist-heading__desc {
  margin: 0;
  /* 8px below the title (Yu Qi "mt-8"); 12px from 1024px up, below. */
  margin-block-start: var(--margin-xs);
  color: var(--color-blue-70);
  font-size: 13px;
}

.wishlist-heading__desc p {
  margin: 0;
}

.wishlist-heading__desc a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.wishlist-heading__desc--empty {
  display: none;
}

wishlist-heading[data-state='empty'] .wishlist-heading__desc--empty {
  display: block;
}

wishlist-heading[data-state='empty'] .wishlist-heading__desc--guest {
  display: none;
}
@media screen and (min-width: 1024px) {
  .wishlist-heading__desc *,
  .wishlist-heading__desc {
    font-size: 14px;
  }

  /* HARDCODED 12px (Yu Qi "mt-12") — no --margin-* token is 12px
     (sm is 11.2px, lg is 16px). */
  .wishlist-heading__desc {
    margin-block-start: 12px;
  }
}
/* END_SECTION:wishlist-heading */

/* START_SECTION:xmas-bundle-guard (INDEX:85) */
/* Same toast as sections/pers-market-guard.liquid. */
  .xmas-bundle-guard__toast {
    position: fixed;
    inset-block: auto var(--margin-4xl);
    inset-inline: var(--container-padding-mobile);
    margin: 0 auto;
    max-inline-size: var(--narrow-content-width);
    padding: var(--padding-md) var(--padding-lg);
    border: 0;
    border-radius: var(--style-border-radius-sm);
    background-color: var(--default-text-color);
    color: var(--color-white);
    text-align: center;
    opacity: 0;
    translate: 0 var(--margin-lg);
    transition:
      opacity var(--animation-values-slow),
      translate var(--animation-values-slow),
      display var(--animation-values-slow) allow-discrete,
      overlay var(--animation-values-slow) allow-discrete;

    &:popover-open {
      opacity: 1;
      translate: 0 0;

      @starting-style {
        opacity: 0;
        translate: 0 var(--margin-lg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
/* END_SECTION:xmas-bundle-guard */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-info-text (INDEX:91) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-size--paragraph);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_cart-products (INDEX:93) */
.cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:94) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__discount-label {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cart__total {
    align-items: baseline;
  }

  .cart__discount-label svg {
    width: 24px;
    height: 24px;
    display: inline-block;
  }

  .cart__summary-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 1024px) {
      padding: 32px;
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group .header[sticky]) .cart__summary-inner {
    top: 10px;
  }

  .cart__summary-container {
    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart__summary-container,
  .cart__summary-container .cart__summary-inner {
    height: auto;
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:95) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-title .cart-bubble__background {
    background-color: var(--grey-color);
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-content-entry (INDEX:96) */
.collection-content-entry {
    grid-column: span 2;
  }

  /* Pastel #74: 12px between two entries stacked below 1024px. The grid's own
     row gap is 24px and belongs to the product rows (Figma), so the pair pulls
     the difference back instead of changing the grid's rhythm. */
  .collection-content-entry + .collection-content-entry {
    margin-block-start: -12px;
  }

  @media screen and (min-width: 1024px) {
    .collection-content-entry + .collection-content-entry {
      margin-block-start: 0;
    }

    /* The entry pair always starts a fresh row. When the collection has fewer
       products than the configured position (e.g. 5 products, positions 9/10)
       the fallback appends the entries after the last card; pinning the first
       entry to column 1 stops it sharing a row with a leftover product card,
       and the second entry auto-places beside it in columns 3-4. */
    :not(.collection-content-entry) + .collection-content-entry {
      grid-column: 1 / span 2;
    }
  }

  .collection-content-entry__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--dark-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--default-text-color);
  }

  .collection-content-entry__media {
    aspect-ratio: 680 / 465;
    background-color: var(--light-border-color);
  }

  .collection-content-entry__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .collection-content-entry__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xl);
    padding: var(--container-padding-mobile);
  }

  .collection-content-entry__text {
    display: flex;
    flex-direction: column;
    gap: var(--margin-3xs);
  }

  .collection-content-entry__title,
  .collection-content-entry__description {
    margin: 0;
  }

  .collection-content-entry__description {
    color: var(--grey-color);
  }

  .collection-content-entry__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);
    font-weight: 500;
  }

  @media screen and (min-width: 1024px) {
    .collection-content-entry__content {
      gap: var(--gap-2xl);
      padding: var(--container-padding-desktop);
    }
  }
/* END_BLOCK:_collection-content-entry */

/* START_BLOCK:_collection-group-filter (INDEX:97) */
.collection-group-filter {
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid #d0d7e0; /* HARDCODED: Figma card border; selected state darkens it below */
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--animation-values);
    overflow: hidden;
  }

  .collection-group-filter[aria-pressed='true'] {
    border-color: var(--default-text-color);
  }

  .collection-group-filter__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 1.5rem;
    object-fit: contain;
    object-position: left;
  }

  .collection-group-filter__description {
    color: var(--color-blue-70);
  }

  /* Checkbox in the top-right corner (screenshot: square box on each card) */
  .collection-group-filter__check {
    position: absolute;
    inset-block-start: var(--padding-md);
    inset-inline-end: var(--padding-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--dark-border-color);
    border-radius: 2px;
    background-color: var(--color-white);
    color: transparent;
  }

  .collection-group-filter[aria-pressed='true'] .collection-group-filter__check {
    border-color: var(--default-text-color);
    background-color: var(--default-text-color);
    color: var(--color-white);
  }
/* END_BLOCK:_collection-group-filter */

/* START_BLOCK:_collection-group-filters (INDEX:98) */
.collection-group-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    padding-block: var(--padding-4xl) var(--padding-2xl); /* matches the Featured Collection block */
    border-block-end: 1px solid var(--dark-border-color);
  }

  .collection-group-filters__title {
    margin: 0;
    text-align: center;
  }

  /* Mobile / tablet: max 2 columns, cards stack image over text so they fit half the width */
  /* Cards are at most 200px wide below 1024px (they share the row on phones, and stay
     card-sized instead of stretching on tablets); the row is left-aligned. */
  .collection-group-filters__grid {
    display: grid;
    grid-template-columns: repeat(var(--filter-columns-mobile, 2), minmax(0, 200px));
    justify-content: start;
    gap: var(--gap-xs);
    width: 100%;
  }

  .collection-group-filters__grid > .shopify-block {
    min-width: 0;
  }

  .collection-group-filters .featured-collection-card {
    flex-direction: column;
  }

  /* The ratio box sizes itself; the image is pinned inside it. With the image in flow
     (height: 100% of an aspect-ratio box in a flex column <button>), Safari / iOS let the
     image's own height win and the card lost its ratio on mobile. 3:4 = portrait. */
  .collection-group-filters .featured-collection-card__image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  .collection-group-filters .featured-collection-card__image img,
  .collection-group-filters .featured-collection-card__image svg {
    position: absolute;
    inset: 0;
  }

  .collection-group-filters .featured-collection-card__content {
    width: auto;
    flex-shrink: 1;
    justify-content: flex-start;
    padding: var(--padding-md);
  }

  /* Desktop: one row of up to 4 left-aligned cards, image beside text (Featured Collection layout) */
  @media screen and (min-width: 1024px) {
    .collection-group-filters__grid {
      grid-template-columns: repeat(var(--filter-columns, 2), minmax(0, 25rem));
      justify-content: start;
      gap: var(--gap-xl);
    }

    .collection-group-filters .featured-collection-card {
      flex-direction: row;
    }

    .collection-group-filters .featured-collection-card__image {
      width: 8.625rem;
      height: 11.75rem;
      aspect-ratio: auto;
    }

    .collection-group-filters .featured-collection-card__content {
      justify-content: center;
      padding: var(--padding-2xl);
    }
  }
/* END_BLOCK:_collection-group-filters */

/* START_BLOCK:_collection-group (INDEX:99) */
.collection-group__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    margin-block-end: var(--padding-2xl);
  }

  .collection-group__title {
    margin: 0;
  }

  .collection-group__description {
    margin: 0;
    color: var(--color-blue-70);
  }

  /* Items past "Rows to show" (collection-groups.js); beats the grid item's own display */
  .collection-group__grid > [hidden] {
    display: none;
  }

  /* Mobile / tablet: the card takes a full row of its own, always the last row — `order`
     moves it after every product, and products past "Rows to show" are display: none, so
     it sits right under the last visible row. "Rows to show" counts products only. */
  @media screen and (max-width: 1023px) {
    .collection-group__grid > .collection-group__card {
      --card-bleed: var(--container-padding-mobile);
      order: 1;
      grid-column: 1 / -1;
      /* Flush with the screen edges: pull out past the .container side padding */
      margin-inline: calc(-1 * var(--card-bleed));
    }

    .collection-group__card .collection-group__card-media {
      border-radius: 0;
    }

    /* Text lines up with the product card text: the bleed plus the product card's 8px inset */
    .collection-group__card .collection-group__card-body {
      padding-inline: calc(var(--card-bleed) + 8px);
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .collection-group__grid > .collection-group__card {
      --card-bleed: var(--container-padding-tablet);
    }
  }

  .collection-group__card {
    display: flex;
    flex-direction: column;
    list-style: none;
  }

  .collection-group__card-media {
    position: relative;
    aspect-ratio: 225 / 300;
    overflow: hidden;
    border-radius: var(--style-border-radius-image); /* same as .product-card__image */
    background-color: var(--light-border-color);
  }

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

  /* Same inset as the product card text (.product-card__bottom / .product-card__info):
     8px top and sides on mobile, 12px on desktop */
  .collection-group__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-xs) 8px 0;
  }

  @media screen and (min-width: 1024px) {
    .collection-group__card-body {
      padding: 12px 12px 0;
    }
  }

  .collection-group__card-heading,
  .collection-group__card-description {
    margin: 0;
  }

  .collection-group__card-heading {
    font-weight: 500;
  }

  .collection-group__empty {
    padding: var(--padding-lg);
    border: 1px dashed var(--dark-border-color);
  }
/* END_BLOCK:_collection-group */

/* START_BLOCK:_collection-groups (INDEX:100) */
.collection-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-exact-56); /* 56px between groups */
    padding-block-start: var(--padding-2xl);
  }

  .collection-groups > .shopify-block:has(> .collection-group[hidden]),
  .collection-groups > .shopify-block:empty {
    display: none;
  }
/* END_BLOCK:_collection-groups */

/* START_BLOCK:_collection-top-content (INDEX:101) */
collection-top-content {
    display: block;
  }

  .collection-top-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
  }

  .collection-top-content:not(.collection-top-content--banner) {
    padding-block-start: 10px; /* HARDCODED: Figma header -> breadcrumb on mobile; no 10px token */
    padding-block-end: var(--padding-2xl);
    border-block-end: 1px solid var(--dark-border-color);
  }

  .collection-top-content .breadcrumb {
    padding: 0;
  }

  .collection-top-content__intro {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .collection-top-content__heading {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    max-width: var(--normal-content-width);
  }

  .collection-top-content__description {
    color: var(--color-blue-70);
    max-width: var(--narrow-content-width);
  }

  .collection-top-content__quick-links {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--gap-xs);
    padding: var(--padding-xs);
    max-width: 100%;
    overflow-x: auto;
    background-color: var(--color-white);
    border-radius: 0.5rem;
    scrollbar-width: none;
  }

  .collection-top-content__quick-links::-webkit-scrollbar {
    display: none;
  }

  .collection-top-content__quick-link {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-radius: 0.25rem;
    text-decoration: none;
  }

  .collection-top-content__quick-link-image {
    width: 1.9375rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 0.25rem;
  }

  .collection-top-content__quick-link-title {
    display: flex;
    align-items: center;
    padding-inline: var(--spacing-exact-12); /* Figma: 12px either side of the tab label */
    font-weight: 500;
    color: var(--default-text-color);
    white-space: nowrap;
  }

  .collection-top-content__nav--below-banner {
    padding-block: var(--padding-2xl);
    border-block-end: 1px solid var(--dark-border-color);
  }

  .collection-top-content--banner {
    position: relative;
    min-height: 23.75rem;
    display: flex;
    flex-direction: column;
    color: var(--color-white);
  }

  /* "2880:800 ratio" mobile banner height (below 1024px). min-height: auto drops the 23.75rem
     floor but keeps the box tall enough for its content, so the text never overflows. */
  @media screen and (max-width: 1023px) {
    .collection-top-content--banner-2880-800-mobile {
      min-height: auto;
      aspect-ratio: 2880 / 800;
    }
  }

  .collection-top-content--banner .breadcrumb .breadcrumb__item {
    color: var(--color-white);
  }

  .collection-top-content--banner .breadcrumb .breadcrumb__separator {
    background-color: var(--color-white);
  }

  .collection-top-content__banner-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .collection-top-content__banner-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / var(--opacity-50)));
  }

  .collection-top-content__banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-top-content__banner-inner {
    position: relative;
    z-index: var(--layer-flat);
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-2xl);
    padding-block: var(--padding-4xl);
  }

  /* Heading stays at the bottom of the banner whether or not a breadcrumb sits above it */
  .collection-top-content__banner-inner > .collection-top-content__heading {
    margin-block-start: auto;
  }

  .collection-top-content--banner .collection-top-content__description {
    color: var(--color-white);
    max-width: 28rem;
  }

  /* The header floats over the banner (sections/header.liquid turns transparent
     for collections with a banner metafield). The breadcrumb sits at a fixed
     84px from the top on mobile/tablet, 100px on desktop — same values as the
     article banner (Figma: floating header card + gap). */
  body:has(.header[transparent]) .collection-top-content__banner-inner {
    padding-block-start: 84px; /* HARDCODED: Figma mobile banner PT; no matching token */
  }

  @media screen and (min-width: 1024px) {
    .collection-top-content {
      gap: var(--spacing-exact-50); /* Figma: 50px between the intro and the quick links */
    }

    .collection-top-content:not(.collection-top-content--banner) {
      padding-block-start: var(--spacing-exact-30);
      padding-block-end: var(--spacing-exact-30);
    }

    .collection-top-content__intro {
      gap: var(--margin-2xl);
    }

    .collection-top-content__heading {
      gap: var(--spacing-exact-12); /* Figma: 12px title -> description */
    }

    .collection-top-content__quick-link-image {
      width: 3rem;
      height: 4.25rem;
    }

    .collection-top-content__quick-link-title {
      padding-inline: var(--padding-lg);
    }

    .collection-top-content__nav--below-banner {
      padding-block: var(--padding-3xl);
    }

    .collection-top-content--banner {
      min-height: 25rem;
    }

    /* "2880:800 ratio" banner height: fixed wide ratio (400px tall at 1440). min-height: auto
       drops the 25rem floor but keeps the box tall enough for its content, so the
       breadcrumb/title never overflow on narrow desktops. */
    .collection-top-content--banner-2880-800 {
      min-height: auto;
      aspect-ratio: 2880 / 800;
    }

    /* Figma: 50px inline and bottom padding inside the banner (two-class
       selector so it wins over the theme.css .container padding). */
    .collection-top-content__banner-inner.container {
      padding-inline: var(--spacing-exact-50);
      padding-block-end: var(--spacing-exact-50);
    }

    body:has(.header[transparent]) .collection-top-content__banner-inner {
      padding-block-start: 100px; /* HARDCODED: Figma desktop banner PT; no matching token */
    }
  }
/* END_BLOCK:_collection-top-content */

/* START_BLOCK:_featured-categories (INDEX:102) */
.featured-categories-block {
    display: block;
    width: 100%;
    padding-block: var(--padding-2xl); /* 24px above and below on mobile */
    /* Divider below the carousel, same line as the Featured Collection block */
    border-block-end: 1px solid var(--dark-border-color);
    margin-bottom: 24px;
  }

  .featured-categories-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-bottom: var(--spacing-exact-12);
  }

  .featured-categories-block__title {
    margin: 0;
  }

  .featured-categories-block__nav {
    display: none;
    gap: var(--gap-2xs);
    flex-shrink: 0;
  }

  /* Full bleed: cards scroll to the viewport edge; matching padding keeps the first card
     on the page content edge (same as the Featured Collection block). */
  .featured-categories-block .swiper {
    width: auto;
    overflow: hidden;
    margin-inline: calc(var(--container-padding-mobile) * -1);
    padding-inline: var(--container-padding-mobile);
  }

  .featured-categories-block .swiper-wrapper > .shopify-block {
    height: auto;
    width: auto;
  }

  @media screen and (min-width: 600px) {
    .featured-categories-block .swiper {
      margin-inline: calc(var(--container-padding-tablet) * -1);
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media screen and (min-width: 1024px) {
    .featured-categories-block {
      padding-block: var(--spacing-exact-30);
    }

    .featured-categories-block__nav {
      display: flex;
    }

    .featured-categories-block__header {
      margin-bottom: var(--margin-lg);
    }

    .featured-categories-block .swiper {
      margin-inline: calc(var(--container-padding-desktop) * -1);
      padding-inline: var(--container-padding-desktop);
    }
  }

  @media screen and (min-width: 1440px) {
    .featured-categories-block .swiper {
      margin-inline: calc(var(--container-padding-xl) * -1);
      padding-inline: var(--container-padding-xl);
    }
  }

  @media screen and (min-width: 1920px) {
    .featured-categories-block .swiper {
      margin-inline: calc(var(--container-padding-2xl) * -1);
      padding-inline: var(--container-padding-2xl);
    }
  }
/* END_BLOCK:_featured-categories */

/* START_BLOCK:_featured-category-card (INDEX:103) */
/* Portrait link card (Figma): image on top, label strip below, light border */
  .featured-category-card {
    display: flex;
    flex-direction: column;
    /* Square image: 150 x 150 on mobile, 250 x 250 on desktop (1024px+) */
    width: 150px;
    height: 100%;
    overflow: hidden;
    border: 1px solid #d0d7e0; /* HARDCODED: Figma card border, same as the collection filter cards */
    border-radius: var(--style-border-radius-image);
    background-color: var(--color-white);
    text-decoration: none;
    color: var(--default-text-color);
  }

  .featured-category-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--light-border-color);
  }

  .featured-category-card__image img,
  .featured-category-card__image svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-values);
  }

  .featured-category-card:hover .featured-category-card__image img {
    transform: scale(1.03);
  }

  @media screen and (min-width: 1024px) {
    .featured-category-card {
      width: 250px;
    }
  }

  .featured-category-card__label {
    display: block;
    padding: var(--padding-md) var(--padding-md);
    font-weight: 500;
  }
/* END_BLOCK:_featured-category-card */

/* START_BLOCK:_featured-collection-card (INDEX:104) */
.featured-collection-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--default-text-color);
  }

  .featured-collection-card__image {
    width: 6.5625rem;
    height: 8.9375rem;
    flex-shrink: 0;
    background-color: var(--light-border-color);
  }

  .featured-collection-card__image img,
  .featured-collection-card__image svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .featured-collection-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-xs);
    padding: var(--padding-xl);
    width: 191px; /* HARDCODED: Figma mobile card text column */
    flex-shrink: 0;
  }

  /* Fabric titles (MoveTech®, ADAPT®, White Coat Pro+®) show the black wordmark from Theme
     settings > Fabric (snippets/fabric-logo); other titles stay text. */
  .featured-collection-card__logo {
    display: block;
    width: auto;
    height: 24px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .featured-collection-card__title {
    margin: 0;
    font-weight: 500;
  }

  .featured-collection-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-blue-70);
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs); /* Figma: 4px between features */
  }

  /* Bullet aligns with the first line of the feature, not the block centre */
  .featured-collection-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0; /* theme.css gives every li a 6px bottom margin */
  }

  .featured-collection-card__features li::before {
    content: '';
    width: 0.25rem;
    height: 0.25rem;
    flex-shrink: 0;
    /* centre of the first line: half the 1.4 line-height minus half the dot */
    margin-block-start: calc(0.7em - 0.125rem);
    border-radius: var(--style-border-radius-50);
    background-color: var(--grey-color);
  }

  @media screen and (min-width: 1024px) {
    .featured-collection-card__image {
      width: 8.625rem;
      height: 11.75rem;
    }

    .featured-collection-card__content {
      padding: var(--padding-2xl);
      width: auto;
      flex-shrink: 1;
    }
  }
/* END_BLOCK:_featured-collection-card */

/* START_BLOCK:_featured-collection (INDEX:105) */
.featured-collection-block {
    display: block;
    width: 100%;
    padding-block: var(--padding-4xl) var(--padding-2xl); /* Figma: 32px above, 24px below on mobile */
    border-block-end: 1px solid var(--dark-border-color);
  }

  .featured-collection-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-bottom: var(--spacing-exact-12); /* Figma: 12px title -> cards on mobile */
  }

  .featured-collection-block__title {
    margin: 0;
  }

  .featured-collection-block__nav {
    display: none;
    gap: var(--gap-2xs);
    flex-shrink: 0;
  }

  .featured-collection__btn {
    display: flex;
    width: 2rem;
    height: 2rem;
    padding: var(--padding-xs);
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid var(--default-text-color);
    background: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--animation-values), border-color var(--animation-values);
  }

  .featured-collection__btn svg {
    width: 1rem;
    height: 1rem;
    display: block;
  }

  .featured-collection__btn.swiper-button-disabled {
    cursor: default;
    border-color: var(--light-border-color);
    background: var(--light-border-color);
    color: var(--grey-color);
  }

  /* Full bleed: escape the .container inline padding so cards scroll to
     the viewport edge; matching padding-inline on the swiper keeps the
     first card aligned with the page content edge. */
  .featured-collection-block .swiper {
    width: auto;
    overflow: hidden;
    margin-inline: calc(var(--container-padding-mobile) * -1);
    padding-inline: var(--container-padding-mobile);
  }

  .featured-collection-block .swiper-wrapper > .shopify-block {
    height: auto;
    width: auto;
  }

  @media screen and (min-width: 600px) {
    .featured-collection-block .swiper {
      margin-inline: calc(var(--container-padding-tablet) * -1);
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media screen and (min-width: 1024px) {
    .featured-collection-block__nav {
      display: flex;
    }
  }

  @media screen and (min-width: 1024px) {
    .featured-collection-block {
      padding-block: var(--spacing-exact-50); /* Figma: small section spacing (50px) above and below */
    }

    .featured-collection-block__header {
      margin-bottom: var(--margin-lg); /* 16px on desktop */
    }

    .featured-collection-block .swiper {
      margin-inline: calc(var(--container-padding-desktop) * -1);
      padding-inline: var(--container-padding-desktop);
    }
  }

  @media screen and (min-width: 1440px) {
    .featured-collection-block .swiper {
      margin-inline: calc(var(--container-padding-xl) * -1);
      padding-inline: var(--container-padding-xl);
    }
  }

  @media screen and (min-width: 1920px) {
    .featured-collection-block .swiper {
      margin-inline: calc(var(--container-padding-2xl) * -1);
      padding-inline: var(--container-padding-2xl);
    }
  }
/* END_BLOCK:_featured-collection */

/* START_BLOCK:_footer-copyright (INDEX:106) */
.footer__copyright {
    color: var(--color-white);
    text-transform: capitalize;
  }

  /* desktop-only: mobile splits the copyright and "Designed by" to opposite
     edges of one row, leaving no room for the rights line */
  .footer__copyright-rights {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .footer__copyright-rights {
      display: inline;
    }
  }
  @media screen and (min-width: 1024px) {
    .footer__copyright-shop-name {
      text-transform: uppercase;
    }
  }
/* END_BLOCK:_footer-copyright */

/* START_BLOCK:_footer-policy-list (INDEX:107) */
.footer__policy-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__policy-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer__policy-link {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-position: from-font;
    transition: opacity var(--animation-values);
  }

  .footer__policy-link:hover {
    opacity: var(--opacity-70);
  }

  @media screen and (min-width: 1024px) {
    .footer__policy-list {
      gap: var(--gap-md);
    }
  }
/* END_BLOCK:_footer-policy-list */

/* START_BLOCK:_footer-social-icons (INDEX:108) */
@media screen and (min-width: 1200px) {
    .footer__social-section {
      margin-block-end: var(--margin-2xl);
    }
  }

  .footer__social-label {
    color: var(--color-white);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 var(--margin-lg);
  }

  .social-icons__wrapper {
    display: flex;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .footer__social-section .social-icons__icon-wrapper {
    display: flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;
    /* transparent in the resting state so the hover stroke can transition
       without the box resizing */
    border: 1px solid transparent;
    background-color: rgb(255 255 255 / var(--opacity-20));
    backdrop-filter: blur(2px);
    color: var(--color-white);
    transition:
      background-color var(--animation-values),
      border-color var(--animation-values),
      color var(--animation-values);
  }

  .footer__social-section .social-icons__icon-wrapper:hover {
    background-color: rgb(255 255 255 / var(--opacity-80));
    border-color: var(--dark-border-color);
    color: var(--default-text-color);
  }

  .footer__social-section .social-icons__icon-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    padding: var(--padding-xs);
    color: inherit;
  }

  .footer__social-section .social-icons__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:109) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 1199px) {
      padding: 0;
    }

    @media screen and (min-width: 1200px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 1200px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:110) */
/* Desktop nav (1200px+) replaces the hamburger drawer. Design asked for the
     mobile breakpoint at 1200px sitewide; the mega-menu layout was previously
     gated to 1200px+, so check the 601-1199px range when editing this. */
  @media screen and (max-width: 1199px) {
    .header-menu--show-on-desktop {
      display: none;
    }
  }

  @media screen and (min-width: 1200px) {
    .header__drawer.header__drawer--hide-on-desktop {
      display: none;
    }
  }

  @media screen and (min-width: 1200px) {
    .menu-dropdown.mega-dropdown {
      display: inline-flex;
      flex-direction: row;
      align-items: stretch;
      padding-bottom: 0;
      border-radius: 4px;
      background-color: #ffffff;
      box-shadow: var(--shadow-popover);
      overflow: hidden;
      top: 0;
      /* left: calc(var(--padding-hero-banner-content-end) + 24px); */
      left: var(--padding-hero-banner-content-end);
      width: auto;
      z-index: var(--layer-header-menu);
    }

    .mega-nav-tabs {
      display: flex;
      width: 310px;
      padding: 32px 24px;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      flex-shrink: 0;
    }

    .mega-nav-tab {
      display: flex;
      align-items: center;
      gap: 0;
      text-decoration: none;
      width: 100%;
    }

    /* Collapsed for inactive tabs so their text sits on the container margin;
       the active tab grows a 46px rule + 16px gap in front of its text (Figma). */
    .mega-nav-tab__indicator {
      display: flex;
      width: 0;
      padding-top: 2px;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      flex-shrink: 0;
      overflow: hidden;
      transition: width var(--animation-values), margin var(--animation-values);
    }

    .mega-nav-tab.is-active .mega-nav-tab__indicator {
      width: 46px;
      margin-inline-end: var(--gap-lg);
    }

    .mega-nav-tab__line {
      width: 0;
      height: 1px;
      background: var(--default-text-color);
      opacity: 0;
      overflow: hidden;
      transition: width var(--animation-values), opacity var(--animation-values);
    }

    .mega-nav-tab.is-active .mega-nav-tab__line {
      width: 46px;
      opacity: 1;
    }

    /* HARDCODED: 24px — desktop category label is smaller than the H4 preset
       (26–30px); no matching token. Mobile uses 28px (see mega-dropdown block). */
    .mega-dropdown .mega-nav-tabs .mega-nav-tab__text {
      font-size: 24px;
    }

    .mega-nav-tab__text {
      color: var(--grey-color);
      transition: color var(--animation-values);
    }

    .mega-nav-tab.is-active .mega-nav-tab__text {
      color: var(--default-text-color);
    }
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  header-menu {
    width: 100%;
  }

  /* Drawer menu featured content */
  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  /* Apply title case to drawer menu featured content */
  .menu-drawer__featured-content-list-item--product .resource-card__title,
  .menu-drawer__featured-content-list-item--collection .resource-card__title {
    text-transform: var(--title-case);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--default-text-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

    &:hover,
    &:focus {
      color: var(--default-text-color);
    }

    @media screen and (min-width: 1200px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Transparent header: white text when at top */
  .header[transparent]:not([data-sticky-state='active']) .menu-list__link,
  .header[transparent='always'][data-sticky-state='active'] .menu-list__link {
    color: #ffffff;
  }

  /* Transparent header: inherit color when scrolling down or menu is open */
  .header[transparent][data-sticky-state='active']:not([transparent='always']) .menu-list__link,
  .header[transparent]:has(.mega-menu__list:hover) .menu-list__link,
  .header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])) .menu-list__link,
  .header[transparent]:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) .menu-list__link,
  /* Ensure menu links inherit default color when hovering custom menu dropdown */
  .header[transparent]:has(.menu-dropdown:hover) .menu-list__link {
    color: var(--default-text-color) !important;
  }

  /* Subdued effect for transparent header at top */
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list:where(:has(.menu-list__list-item:hover))
    .menu-list__link,
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list:where(:has(.menu-list__list-item:focus-within))
    .menu-list__link,
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active))
    .menu-list__link {
    color: rgba(255, 255, 255, 0.6);
  }

  /* Active/hovered links remain white in transparent state */
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list:not(:has(.menu-list__list-item:hover))
    .menu-list__link--active,
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list
    .menu-list__list-item:where(:hover, :focus-within)
    .menu-list__link,
  .header[transparent]:not([data-sticky-state='active'])
    .menu-list
    .menu-list__list-item[slot='overflow']
    .menu-list__link[aria-expanded='true'] {
    color: #ffffff;
  }

  /*
      High specificity selectors to subdue non-hovered links without javascript.
      If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
    */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / 0.6);
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--default-text-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0 var(--menu-horizontal-gap);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--body-bg-color);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

  .menu-list__list-item:is([slot='overflow']) {
    display: contents;
    white-space: normal;

    .menu-list__link {
      --submenu-content-opacity: 0;

      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      opacity: var(--submenu-content-opacity);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);

      .menu-list__submenu-inner {
        padding-block-start: 0;
        grid-column: unset;
      }
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;
    transition: color var(--animation-speed) var(--animation-easing);

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 1199px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */
  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--collection-image {
    grid-column: span 1;

    @media screen and (min-width: 1200px) {
      grid-column: span 2;
    }
  }

  .mega-menu__column--collection-image .mega-menu__link {
    text-transform: var(--title-case);
  }

  .mega-menu__submenu .mega-menu__column--collection-image {
    grid-column: span 1;
  }

  /* Apply title case to featured products and collections */
  .mega-menu__content-list--products .resource-card__title,
  .mega-menu__content-list--collections .resource-card__title {
    text-transform: var(--title-case);
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 1200px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 1200px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--default-text-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  @media screen and (min-width: 1200px) {
    /* Desktop nav links: all Navy at rest. While one link is hovered (or its
       dropdown is open) that link stays Navy and its siblings fade to Blue-35.
       The transparent-header rules above use !important, so these do too. */
    .menu-list__link {
      color: var(--default-text-color) !important;
      font-family: var(--font-paragraph--family, Switzer);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }

    .menu-list__link--active {
      font-weight: 500;
    }

    .menu-list__link-title--byos {
      font-weight: 700;
    }

    /* #header-component prefix: once the header is sticky (scrolled), the
       Horizon transparent-header rule above
       (.header[transparent][data-sticky-state='active']:not(...) .menu-list__link,
       also !important) outranks a class-only selector and cancelled the
       dimming; the id keeps these rules on top in every scroll state. */
    #header-component header-menu:has(.menu-list__list-item:hover) .menu-list__link,
    #header-component header-menu:has(.menu-list__list-item:focus-within) .menu-list__link,
    #header-component header-menu:has(.menu-list__list-item[data-menu-active='true']) .menu-list__link {
      color: #bec5cd !important; /* Blue-35 (Placeholder) — no CSS var exists */
    }

    #header-component header-menu .menu-list__list-item:is(:hover, :focus-within) .menu-list__link,
    #header-component header-menu .menu-list__list-item[data-menu-active='true'] .menu-list__link {
      color: var(--default-text-color) !important;
    }
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_hero-banner-slide (INDEX:111) */
.hero-banner-slide__link-wrapper--active {
  cursor: pointer;
}

.hero-banner-slide .content-wrapper {
  align-items: var(--content-alignment);
  margin-left: var(--margin-left);
  margin-right: var(--margin-right);
}

.hero-banner__content .group-block-content {
  flex-flow: row nowrap;
  gap: 8px;
}
/* END_BLOCK:_hero-banner-slide */

/* START_BLOCK:_product-details (INDEX:113) */
/* Container styles — padding vars from settings control external spacing */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  /* Breakpoints fall back to the one below, matching .el-spacing in base.css,
     because spacing-padding only emits values that change per breakpoint */
  @media screen and (min-width: 1024px) {
    .product-details {
      padding-block-start: var(--padding-block-start-md, var(--padding-block-start, 0));
      padding-block-end: var(--padding-block-end-md, var(--padding-block-end, 0));
      padding-inline-start: var(--padding-inline-start-md, var(--padding-inline-start, 0));
      padding-inline-end: var(--padding-inline-end-md, var(--padding-inline-end, 0));
    }
  }

  @media screen and (min-width: 1024px) {
    .product-details {
      padding-block-start: var(--padding-block-start-lg, var(--padding-block-start-md, var(--padding-block-start, 0)));
      padding-block-end: var(--padding-block-end-lg, var(--padding-block-end-md, var(--padding-block-end, 0)));
      padding-inline-start: var(--padding-inline-start-lg, var(--padding-inline-start-md, var(--padding-inline-start, 0)));
      padding-inline-end: var(--padding-inline-end-lg, var(--padding-inline-end-md, var(--padding-inline-end, 0)));
    }
  }

  @media screen and (min-width: 1280px) {
    .product-details {
      padding-block-start: var(--padding-block-start-xl, var(--padding-block-start-lg, var(--padding-block-start-md, var(--padding-block-start, 0))));
      padding-block-end: var(--padding-block-end-xl, var(--padding-block-end-lg, var(--padding-block-end-md, var(--padding-block-end, 0))));
      padding-inline-start: var(--padding-inline-start-xl, var(--padding-inline-start-lg, var(--padding-inline-start-md, var(--padding-inline-start, 0))));
      padding-inline-end: var(--padding-inline-end-xl, var(--padding-inline-end-lg, var(--padding-inline-end-md, var(--padding-inline-end, 0))));
    }
  }

  @media screen and (min-width: 1536px) {
    .product-details {
      padding-block-start: var(--padding-block-start-2xl, var(--padding-block-start-xl, var(--padding-block-start-lg, var(--padding-block-start-md, var(--padding-block-start, 0)))));
      padding-block-end: var(--padding-block-end-2xl, var(--padding-block-end-xl, var(--padding-block-end-lg, var(--padding-block-end-md, var(--padding-block-end, 0)))));
      padding-inline-start: var(--padding-inline-start-2xl, var(--padding-inline-start-xl, var(--padding-inline-start-lg, var(--padding-inline-start-md, var(--padding-inline-start, 0)))));
      padding-inline-end: var(--padding-inline-end-2xl, var(--padding-inline-end-xl, var(--padding-inline-end-lg, var(--padding-inline-end-md, var(--padding-inline-end, 0)))));
    }
  }

  /* Mobile: white card container */
  .product-details > .group-block {
    padding: 20px 12px;
    border-radius: 8px;
    background: var(--color-white);
  }

  @media screen and (min-width: 1024px) {
    .product-details > .group-block {
      padding: 24px 16px;
    }
  }

  @media screen and (min-width: 1024px) {
    .product-details .group-block-content:has(> product-price) {
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 30px;
      align-items: flex-start;
      align-self: stretch;
      /* dense: the price (column 2) moves up into the title's row even when the rating sits
         between them in the block order. */
      grid-auto-flow: row dense;
    }

    .product-details .group-block-content:has(> product-price) > * {
      grid-column: 1 / -1;
    }

    /* Title (and the rating under it) take the left column; the price sits top-right,
       level with the title's first line. */
    .product-details .group-block-content:has(> product-price) > .product-title-text,
    .product-details .group-block-content:has(> product-price) > .product-rating {
      grid-column: 1;
    }

    .product-details .group-block-content:has(> product-price) > product-price {
      grid-column: 2;
    }
  }

  @media screen and (min-width: 1024px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }

  /* Stop the section's padding leaking onto every block in the buy box. */
  @media screen and (min-width: 1024px) {
    .product-details {
      --padding-block-end-lg: 0px;
      --padding-block-end-xl: 0px;
      --padding-block-end-2xl: 0px;
    }
  }

  .product-details .group-block-content {
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-block-start-md: 0px;
    --padding-block-end-md: 0px;
    --padding-block-start-lg: 0px;
    --padding-block-end-lg: 0px;
    --padding-block-start-xl: 0px;
    --padding-block-end-xl: 0px;
    --padding-block-start-2xl: 0px;
    --padding-block-end-2xl: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    --padding-inline-start-md: 0px;
    --padding-inline-end-md: 0px;
    --padding-inline-start-lg: 0px;
    --padding-inline-end-lg: 0px;
    --padding-inline-start-xl: 0px;
    --padding-inline-end-xl: 0px;
    --padding-inline-start-2xl: 0px;
    --padding-inline-end-2xl: 0px;
  }

  
  /* Removed (Pastel 18): this added a third helping of spacing above the
     add-to-cart on any PDP with personalisation — on top of the buy box
     column's 12px row gap AND the buy-buttons block's own
     margin_block_start setting (12px / 20px), for 52px instead of the agreed
     32px. Both PDP shapes now land on the same 32px desktop / 24px mobile
     from the row gap plus that one block setting. */

    /* Short-viewport behaviour — the buy box scrolls itself before the page.
     On a short screen the details column runs past the fold, so reaching the
     size picker or add-to-cart meant scrolling the whole page and losing the
     gallery. Clamping the column to the viewport and letting it scroll
     internally keeps the product image in view while the buy box is read.

     Deliberately NOT `overscroll-behavior: contain` — the default chaining is
     the point: once the column bottoms out, the gesture continues into the page
     and on to the sections below.

     Self-activating: `max-height` only bites when the content is taller than the
     screen, so on tall viewports the column is its natural height, unscrolled
     and unchanged. Uses --header-group-height (set on <body> by critical.js),
     matching the gallery clamp — not --sticky-header-offset, which the theme
     consumes but never defines. */
  @media screen and (min-width: 1024px) and (max-height: 700px) {
    .product-details {
      position: sticky;
      top: calc(var(--header-group-height, 0px) + 16px);
      max-height: calc(100svh - var(--header-group-height, 0px) - 32px);
      overflow-y: auto;
      scrollbar-width: none;
    }

    .product-details::-webkit-scrollbar {
      display: none;
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:114) */
/* ── Mobile slider (default / mobile-first) ── */
  .pdp-gallery__mobile {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 10px;
    position: relative;
  }

  .pdp-gallery__mobile-track {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 8px;
  }

  .pdp-gallery__mobile-track::-webkit-scrollbar {
    display: none;
  }

  .pdp-gallery__mobile-slide {
    position: relative;
    flex: 1 0 100%;
    scroll-snap-align: start;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 468 / 663;
    background-color: lightgray;
  }

  .pdp-gallery__mobile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Top row: badges left, zoom right */
  .pdp-gallery__mobile-top-row {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: var(--layer-raised);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
  }

  .pdp-gallery__mobile-badges {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    pointer-events: auto;
  }

  /* Sticker base styles available on PDP (product-card stylesheet may not load here) */
  .pdp-gallery__mobile-badges .product-card__badges {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
  }

  .pdp-gallery__mobile-badges .product-card__sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    text-align: center;
    font-family: var(--font-paragraph--family);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
  }

  .pdp-gallery__mobile-badges .product-card__sticker--badge {
    border: 1px solid transparent;
  }

  /* Zoom button */
  .pdp-gallery__mobile-zoom {
    pointer-events: auto;
    display: flex;
    width: 32px;
    height: 32px;
    padding: 8px;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 12px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid var(--dark-border-color);
    background: #FFF;
    cursor: pointer;
    flex-shrink: 0;
  }

  .pdp-gallery__mobile-zoom svg,
  .pdp-gallery__mobile-zoom img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Model info pill — absolute, centered at bottom */
  .pdp-gallery__mobile .pdp-gallery__model-info {
    position: absolute;
    bottom: 27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--layer-raised);
    display: flex;
    /* HARDCODED 3px top (Pastel 22 "pt-3") — the text was flush against the
       pill's top edge with only the 2px below it. */
    padding: 3px 8px 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, var(--opacity-80));
    backdrop-filter: blur(2px);
    white-space: nowrap;
    text-align: center;
    color: var(--color-black);
    opacity: 1;
    transition: opacity var(--animation-values-slow);
    pointer-events: none;
  }

  .pdp-gallery__mobile:not([data-at-first]) .pdp-gallery__model-info {
    opacity: 0;
  }

  /* Pagination bullets */
  .pdp-gallery__pagination {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .pdp-gallery__bullet {
    display: block;
    width: 8px;
    height: 3px;
    border-radius: 2px;
    background: #BEC5CD;
    transition: width var(--animation-values), background var(--animation-values);
    flex-shrink: 0;
  }

  .pdp-gallery__bullet.is-active {
    width: 40px;
    background: var(--color-white);
  }

  /* Hide desktop on mobile */
  .pdp-gallery__main-col,
  .pdp-gallery__thumbs-wrap {
    display: none;
  }

  /* ── Desktop (1024px+): show original layout, hide mobile slider ── */
  @media screen and (min-width: 1024px) {
    .pdp-gallery__mobile {
      display: none;
    }

    .pdp-gallery {
      display: flex;
      gap: 8px;
      width: 100%;
      position: relative;
    }

    .pdp-gallery {
      /* HARDCODED 44px = the 16px sticky top offset + 16px below the gallery +
         12px so the floating thumbnail arrows are never flush against the
         bottom of a short viewport (Pastel 13: "there needs to be pb-12" —
         they were landing 2px off the edge on a 700px-tall screen). */
      --pdp-gallery-viewport-reserve: 44px;
    }

    .pdp-gallery__main-col {
      display: block;
      /* Column width follows the image: 58% of the gallery, but on a short
         viewport .pdp-gallery__main-wrap's max-height caps the image, and
         through its aspect ratio that caps the image's width too. The column
         caps at the same height-derived width so the thumbnails stay 8px from
         the image instead of drifting apart as the screen widens. */
      flex: 0 0 auto;
      width: min(58%, calc((100svh - var(--header-group-height, 0px) - var(--pdp-gallery-viewport-reserve)) * 468 / 663));
      max-width: 58%;
    }

    .pdp-gallery__main-col:only-child {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .pdp-gallery__main-wrap {
      position: sticky;
      top: calc(var(--header-group-height, 0px) + 16px);
      border-radius: 8px;
      overflow: hidden;
      /* Definite height from the product image aspect so the thumbnail column
         can match it exactly (no trailing gap). */
      aspect-ratio: 468 / 663;
      /* ...but never taller than the screen. The aspect ratio alone pushes the
         gallery past the fold on short viewports (laptops at ~800px and below),
         which drags the thumbnail scroll arrows — pinned to the bottom of the
         thumbnail column — off screen entirely. Clamping here caps the flex row,
         so the thumbnail column and its arrows follow. The image is
         object-fit: cover, so the surplus crops rather than letterboxing.
         Self-activating: on tall screens the aspect ratio still wins and nothing
         changes. Subtracts the sticky top offset plus a matching 16px gap below.
         Mirrors the existing clamp on .product-details (_product-details.liquid). */
      max-height: calc(100svh - var(--header-group-height, 0px) - var(--pdp-gallery-viewport-reserve));
      cursor: pointer;
    }

    .pdp-gallery__main-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.2s ease;
    }

    .pdp-gallery__tags {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      pointer-events: auto;
    }

    .pdp-gallery__badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-family: var(--font-paragraph--family);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.4;
      white-space: nowrap;
    }

    .pdp-gallery__badge--sale       { background: #E8435A; color: #fff; }
    .pdp-gallery__badge--bestseller { background: transparent; color: #143666; border: 1px solid #143666; }
    .pdp-gallery__badge--new        { background: transparent; color: #143666; border: 1px solid #143666; }

    .pdp-gallery__tags .product-card__badges {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      padding: 0;
    }

    .pdp-gallery__tags .product-card__sticker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      padding: 2px 8px;
      white-space: nowrap;
      font-family: var(--font-paragraph--family);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.4;
    }

    .pdp-gallery__tags .product-card__sticker--badge {
      border: 1px solid transparent;
    }

    /* Hidden from 1024px: the thumbnail rail opens the zoom now, and clicking
       the main image still does too. Everything else is left in place, so
       restoring the button is a matter of putting `display: flex` back. */
    .pdp-gallery__zoom-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      border: 1px solid #d0d7e0;
      border-radius: 4px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 8px;
      cursor: pointer;
      pointer-events: auto;
    }

    .pdp-gallery__model-info {
      position: absolute;
      bottom: 12px;
      left: 12px;
      z-index: 2;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 4px;
      /* Matches the mobile pill's 3px top (Pastel 22, "[all]"). */
      padding: 3px 8px 2px;
      text-align: center;
      color: var(--color-black);
      white-space: nowrap;
    }

    .pdp-gallery__thumbs-wrap {
      display: flex;
      flex: 1 0 0;
      flex-direction: column;
      min-width: 0;
      position: relative;
    }

    .pdp-gallery__thumb-nav-float {
      position: absolute;
      bottom: 12px;
      right: 12px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 2px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 4px;
    }

    .pdp-gallery__thumb-nav-float button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      color: #06152B;
      line-height: 1;
    }

    /* Fill the column (which stretches to the main image's height) and scroll
       internally — was a fixed max-height that left an empty gap below the
       thumbs once the gallery widened. */
    .pdp-gallery__thumbs-col {
      position: absolute;
      inset: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
    }

    .pdp-gallery__thumbs-col::-webkit-scrollbar {
      display: none;
    }

    .pdp-gallery__thumb {
      width: 100%;
      aspect-ratio: 468 / 663;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      flex-shrink: 0;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }

    /* The active state is parked, not removed: thumbs open the zoom rather than
       selecting the main image, so there is nothing for it to mark right now.
       _setDesktopMain still applies the class — add `.pdp-gallery__thumb.is-active`
       back to this selector to bring the highlight back. */
    .pdp-gallery__thumb:hover {
      border-color: #143666;
      opacity: 1;
    }

    .pdp-gallery__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.2s ease;
    }

    .pdp-gallery__thumb:hover img {
      opacity: 0.85;
    }
  }

  /* ── Placeholder ── */
  .pdp-gallery__placeholder {
    aspect-ratio: 468 / 663;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .pdp-gallery__placeholder svg {
    width: 60px;
    height: 60px;
    opacity: 0.3;
  }

  /* ── Lightbox (vertical scroll gallery) ── */
  .pdp-lightbox {
    position: fixed;
    inset: 0;
    background: var(--body-bg-color);
    z-index: 9999;
    display: flex;
    align-items: stretch;
  }

  .pdp-lightbox[hidden] {
    display: none;
  }

  /* Close — square Blue-15 button, top-right */
  .pdp-lightbox__close {
    position: absolute;
    top: calc(20px + 24px);
    right: calc(16px + 24px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: var(--light-border-color);
    color: var(--default-text-color);
    cursor: pointer;
  }

  /* Controls column (counter + arrows) — desktop only */
  .pdp-lightbox__controls {
    display: none;
  }

  .pdp-lightbox__counter {
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }

  .pdp-lightbox__nav {
    display: flex;
    gap: 4px;
  }

  .pdp-lightbox__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: 1px solid var(--color-black);
    border-radius: 4px;
    background: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    transition: background var(--animation-values),
      border-color var(--animation-values),
      color var(--animation-values);
  }

  .pdp-lightbox__btn:disabled {
    border-color: transparent;
    background: var(--light-border-color);
    color: #bec5cd; /* Blue-35 (Placeholder) — no theme token, literal per v2.17 */
    cursor: default;
  }

  /* Scroll area — vertical stack of all images */
  .pdp-lightbox__scroll {
    flex: 1;
    min-width: 0;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    scroll-padding-top: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pdp-lightbox__scroll::-webkit-scrollbar {
    display: none;
  }

  .pdp-lightbox__slide {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-lightbox__slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  @media screen and (min-width: 1024px) {
    .pdp-lightbox__controls {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 12px;
      width: 127px;
      flex-shrink: 0;
      padding: 24px;
      z-index: 2;
    }

    .pdp-lightbox__scroll {
      padding: 24px 24px 24px 20px;
      scroll-padding-top: 24px;
    }

    .pdp-lightbox__close {
      top: calc(24px + 24px);
      right: calc(24px + 24px);
    }
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_product-type-filter-card (INDEX:115) */
.product-type-filter-card {
    position: relative;
    transition: border-color var(--animation-values);
  }

  /* Selected: the card border and the checkbox darken (Figma) */
  .product-type-filter-card.is-active {
    border-color: var(--default-text-color);
  }

  .product-type-filter-card__check {
    position: absolute;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--dark-border-color);
    border-radius: 2px;
    background-color: var(--color-white);
    color: transparent;
  }

  .product-type-filter-card.is-active .product-type-filter-card__check {
    border-color: var(--default-text-color);
    background-color: var(--default-text-color);
    color: var(--color-white);
  }

  /* While the results are refreshing after a tap */
  .product-type-filter-card[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
  }

  .product-type-filter-card--missing {
    border-style: dashed;
    padding: var(--padding-md);
  }
/* END_BLOCK:_product-type-filter-card */

/* START_BLOCK:_product-type-filters (INDEX:116) */
.product-type-filters {
    display: block;
  }

  /* Card gap in CSS too (same as Swiper's spaceBetween in assets/featured-collection.js):
     the filter re-render drops Swiper's inline slide margins, which closed the gap */
  .product-type-filters .swiper-wrapper > .shopify-block:not(:last-child) {
    margin-right: 8px !important;
  }

  @media screen and (min-width: 1024px) {
    .product-type-filters .swiper-wrapper > .shopify-block:not(:last-child) {
      margin-right: 20px !important;
    }
  }
/* END_BLOCK:_product-type-filters */

/* START_BLOCK:_social-link (INDEX:117) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
    fill: currentColor;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:_xmas-bundle-set (INDEX:118) */
.xmas-bundle-set__placeholder {
    padding: 12px 16px;
    border: 1px solid #d0d7e0;
    border-radius: 4px;
    background: #f8f8f8;
  }

  .xmas-bundle-set__placeholder--unused {
    opacity: 0.6;
    border-style: dashed;
  }
/* END_BLOCK:_xmas-bundle-set */

/* START_BLOCK:accelerated-checkout (INDEX:119) */
.shopify-payment-button__button--unbranded {
    background-color: red;
  }

  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:120) */
.accordion {
    flex: 1;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width, 1px) solid var(--color-border, rgb(229 231 235));
  }
  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width, 1px) * var(--show-fallback-borders, 1)) solid var(--color-border, rgb(229 231 235));
  }
  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width, 1px) * var(--show-fallback-borders, 1)) solid var(--color-border, rgb(229 231 235));
  }

  accordion-custom details .details-content {
    padding-block-end: 16px;
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:128) */
.buy-buttons-block {
    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }

  .product-form-buttons--stacked > *:not(.quantity-selector) {
    flex-basis: 51%;
  }

  .quantity-selector {
    flex-grow: 0;
  }

  .add-to-cart-button {
    display: flex;
    width: 100%;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    font-family: var(--font-p2--family, Switzer);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  /* Product pages: the button in the product's swatch colour (set above) */
  .buy-buttons-block--accent .add-to-cart-button,
  .buy-buttons-block--accent .add-to-cart-button:hover {
    background-color: var(--product-accent);
    border-color: var(--product-accent);
    color: var(--product-accent-text);
  }

  .buy-buttons-block--accent .add-to-cart-button:hover:not(:disabled) {
    filter: brightness(0.92);
  }

  .product-form-buttons .shopify-payment-button__button {
    width: 100%;
    min-height: var(--minimum-touch-target);
  }

  .buy-buttons-atc-row {
    display: flex;
    align-self: stretch;
    gap: 8px;
  }

  .buy-buttons-atc-row add-to-cart-component {
    flex: 1;
    min-width: 0;
  }

  /* Hide the disabled "Sold Out" button while Klaviyo loads the BIS trigger.
     visibility: hidden keeps it in the DOM (Klaviyo needs it to replace), but the
     user never sees the flash. Only set where Klaviyo actually runs — callers
     passing bis_fallback render a real "Notify me" button instead. */
  .buy-buttons-atc-row--bis button:disabled {
    visibility: hidden;
  }

  /* Klaviyo BIS trigger — injected as <a class="btn1"> replacing the button.
     Layout/sizing only — typography handled by btn1. */
  .buy-buttons-atc-row add-to-cart-component a.btn1 {
    display: flex;
    /* 44px to match .add-to-cart-button and the wishlist box above. */
    height: 44px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    text-decoration: none;
  }

  /* Wrapper we own: sizing, border, hover. The <a> inside is HulkApps' — untouched by our CSS
     structure, just stretched to fill this box. Our icon renders as a sibling overlay on top. */
  .buy-buttons-wishlist-btn {
    position: relative;
    display: flex;
    /* HARDCODED: 44px — the add-to-cart button's rendered height (12px block
       padding + the p2 line-height + its 1px border), so the two boxes line up
       (Yu Qi feedback). It can't be derived: `align-self: stretch` gives the
       right height but a flex item with `width: auto` takes its main size from
       content, so aspect-ratio can't pull the width back to a square. */
    width: 44px;
    height: 44px;
    padding: 8px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--style-border-radius-button);
    border: 1px solid var(--color-black);
    background: transparent;
    transition: background var(--animation-values);
  }

  .buy-buttons-wishlist-btn:hover {
    background: var(--light-border-color);
  }

  .buy-buttons-wishlist-btn > a.wishlist-btn {
    /* !important + the .wishlist-btn qualifier (for specificity) mirror the fix in
       snippets/product-card.liquid: HulkApps' script/CSS can set display:none on this
       <a> until it finishes init, and that scan doesn't reliably reach every render
       context (e.g. this block re-rendering via Section Rendering API on variant
       change). Without !important here, that leaves our icon visible (separate
       sibling, pointer-events: none) but nothing underneath to receive the click. */
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-black);
    background: transparent !important;
    box-shadow: none !important;
  }

  .buy-buttons-wishlist-btn > a.wishlist-btn:hover,
  .buy-buttons-wishlist-btn > a.wishlist-btn:focus,
  .buy-buttons-wishlist-btn > a.wishlist-btn:active,
  .buy-buttons-wishlist-btn > a.wishlist-btn[data-added='true'] {
    background: transparent !important;
    box-shadow: none !important;
  }

  .buy-buttons-wishlist-btn:focus,
  .buy-buttons-wishlist-btn:focus-within,
  .buy-buttons-wishlist-btn:active {
    background: transparent;
  }

  .buy-buttons-wishlist-btn .hulk_wl_icon-text,
  .buy-buttons-wishlist-btn .hulk_wl_icon {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  /* Kept in the DOM (not removed) — HulkApps' script reads/rewrites this on state change;
     hidden visually only, our own SVG overlay (sibling, outside their markup) renders instead */
  .buy-buttons-wishlist-btn .heart-hulk-animation {
    display: none;
  }

  .buy-buttons-wishlist-btn .count {
    display: none;
  }

  .buy-buttons-wishlist-btn > .svg-wrapper {
    /* Override the global .svg-wrapper's fixed width/height (assets/base.css) — without this,
       the explicit size wins over inset:0's implied height, pinning the box to the top. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  .buy-buttons-wishlist-btn > .svg-wrapper svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .buy-buttons-wishlist-btn > .svg-wrapper svg path {
    transition: fill var(--animation-values);
  }

  /* HulkApps flips data-added on their <a> when the item is wishlisted; our icon
     is a sibling (not a descendant), so we react to it via a sibling selector */
  .buy-buttons-wishlist-btn a[data-added='true'] ~ .svg-wrapper svg path {
    fill: var(--color-black);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:colour-swatches (INDEX:129) */
.pdp-colour-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    /* + the buy box's 12px column gap = 16px to the next colour group / the
       size picker (Figma) */
    margin-block-end: 4px;
  }

  .pdp-colour-group__title-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .pdp-colour-group__name {
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1.4;
  }

  /* p2 bold from 1024px up (Pastel 99). HARDCODED 14px: takes
     no Liquid, so the p2 desktop size from settings_schema (font_size_body_2_desktop)
     cannot be referenced here — keep the two in step if that setting changes. */
  @media screen and (min-width: 1024px) {
    .pdp-colour-group__name {
      font-size: 14px;
      font-weight: 500;
    }
  }

  .pdp-colour-group__selected {
    color: #3F4855; /* Blue-70 — size/weight/family come from the .p2 preset */
  }

  .pdp-colour-swatches {
    display: flex;
    padding-top: 4px;
    align-items: flex-start;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .pdp-colour-swatch-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Until the row is checked only the current colour shows, so colours that turn out
     sold out or not sold here never flash. A group without the current colour waits
     whole (title included). */
  pdp-colour-swatch-check:not([data-checked]) .pdp-colour-swatch-col:not(.pdp-colour-swatch-col--active),
  .pdp-colour-group:has(pdp-colour-swatch-check:not([data-checked])):not(:has(.pdp-colour-swatch-col--active)) {
    display: none;
  }

  .pdp-colour-swatch-link {
    position: relative;
    display: block;
    line-height: 0;
    text-decoration: none;
  }

  .pdp-colour-swatch {
    display: block;
    width: 32.9px;
    height: 32.9px;
    flex-shrink: 0;
    /* HARDCODED: 3px corner (Pastel 82); no radius token matches. */
    border-radius: 3px;
    border: 0.5px solid var(--dark-border-color);
  }
  @media screen and (min-width: 1024px){
    .pdp-colour-swatch {
      width: 24px;
      height: 24px; 
    }
  }

  .pdp-colour-swatch__unavailable-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* Sold out: the strike only. The old 40% fade washed dark colours (Graphite,
     So Black) out to grey, so the swatch keeps its full colour. */

  .pdp-colour-swatch__underline {
    display: block;
    width: 32.9px;
    height: 1px;
    background: transparent;
  }
  @media screen and (min-width: 1024px){
    .pdp-colour-swatch__underline {
      width: 24px;
    }
  }

  .pdp-colour-swatch-col--active .pdp-colour-swatch__underline,
  .pdp-colour-swatch-col:hover .pdp-colour-swatch__underline {
    background: var(--default-text-color);
  }
/* END_BLOCK:colour-swatches */

/* START_BLOCK:filters (INDEX:133) */
/* Floating trigger button */
  .facets-popup-trigger {
    position: fixed;
    inset-inline-start: var(--container-padding-mobile);
    inset-block-end: calc(var(--margin-xl) + env(safe-area-inset-bottom, 0px));
    /* Below the header (--layer-sticky) and the mega-menu backdrop one step
       under it, so the navigation dropdown always paints over this button.
       Same layer as the PDP sticky ATC bar (snippets/pdp-sticky-atc.liquid). */
    z-index: calc(var(--layer-sticky) - 2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition:
      opacity var(--animation-values-slow),
      transform var(--animation-values-slow),
      visibility var(--animation-values-slow);

    @media screen and (min-width: 600px) {
      inset-inline-start: var(--container-padding-tablet);
    }

    @media screen and (min-width: 1024px) {
      inset-inline-start: var(--container-padding-desktop);
      inset-block-end: var(--margin-4xl);
    }

    @media screen and (min-width: 1440px) {
      inset-inline-start: var(--container-padding-xl);
    }

    @media screen and (min-width: 1920px) {
      inset-inline-start: var(--container-padding-2xl);
    }
  }

  .facets-popup-trigger--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .facets-popup-trigger__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xl);
    padding: var(--spacing-exact-12); /* Figma: 12px all around */
    /* Mobile/tablet: two grid columns wide = one product-card column
       (half the content width minus half the 8px grid gap) */
    width: calc(50vw - var(--container-padding-mobile) - var(--padding-2xs));
    border-radius: 4px;
    background-color: rgb(255 255 255 / var(--opacity-80));
    backdrop-filter: blur(2px);
    color: var(--default-text-color);
    cursor: pointer;

    @media screen and (min-width: 600px) {
      width: calc(50vw - var(--container-padding-tablet) - var(--padding-2xs));
    }

    @media screen and (min-width: 1024px) {
      width: auto;
    }
  }

  .facets-popup-trigger__label {
    font-weight: 500;
  }

  .facets-popup-trigger__count {
    color: var(--grey-color);
  }

  .facets-popup-trigger__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 2px;
    background-color: var(--default-text-color);
    color: var(--color-white);
  }

  .facets-popup-trigger__icon .svg-wrapper,
  .facets-popup-trigger__icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Custom properties consumed by the nested facet snippets */
  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;
  }

  /* Popup dialog */
  dialog.facets-popup__dialog {
    --drawer-padding: var(--padding-lg);
    --facets-popup-offset: var(--spacing-exact-12); /* Figma: 12px screen inset on mobile/tablet */

    position: fixed;
    inset: var(--facets-popup-offset);
    margin: 0;
    border: none;
    padding: 0;
    width: calc(100dvw - var(--facets-popup-offset) * 2);
    max-width: calc(100dvw - var(--facets-popup-offset) * 2);
    height: calc(100dvh - var(--facets-popup-offset) * 2);
    max-height: calc(100dvh - var(--facets-popup-offset) * 2);
    min-height: 0;
    background-color: var(--body-bg-color);
    border-radius: 4px; /* Pastel #5 */
    box-shadow: var(--shadow-drawer);
    overflow: hidden;

    @media screen and (min-width: 1024px) {
      --facets-popup-offset: 30px;

      inset-inline-end: auto;
      width: 417px;
      border-radius: 8px;
    }
  }

  dialog.facets-popup__dialog[open] {
    display: flex;
    flex-direction: column;
    animation: facets-popup-slide-in var(--animation-values-slow) forwards;
  }

  dialog.facets-popup__dialog.dialog-closing {
    animation: facets-popup-slide-out var(--animation-values-slow) forwards;
  }

  dialog.facets-popup__dialog::backdrop {
    background: rgb(0 0 0 / var(--opacity-40));
    backdrop-filter: blur(4px);
  }

  @keyframes facets-popup-slide-in {
    from {
      transform: translateX(calc(-100% - var(--facets-popup-offset)));
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes facets-popup-slide-out {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-100% - var(--facets-popup-offset)));
    }
  }

  /* Popup header */
  .facets-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    flex-shrink: 0;
    padding: var(--padding-2xl) var(--padding-xl) var(--padding-lg);
  }

  .facets-popup__title {
    display: flex;
    align-items: baseline;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--font-size--2xl); /* design H5 = 24px */
  }

  .facets-popup__title-count {
    color: var(--grey-color);
  }

  .facets-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 4px;
    /* Pastel #4: no fill behind the mark at any width. */
    background-color: transparent;
    cursor: pointer;
  }

  .facets-popup__close svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  /* Popup scrollable body */
  .facets-popup__dialog .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    color: var(--color-foreground-muted);
  }

  .facets-popup__dialog .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .facets-popup__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: var(--padding-lg);
  }

  /* Active filter pills */
  .facets-popup__dialog .facets-remove:has(facet-remove-component) {
    margin-block: 0 var(--margin-lg);
  }

  .facets-popup__dialog .pills__pill {
    gap: var(--padding-2xs); /* Figma: 4px label -> close icon */
    padding: var(--padding-2xs) var(--padding-xs); /* Figma: 4px / 8px */
    background-color: var(--light-border-color);
    border: none;
    border-radius: 4px;
    color: var(--color-blue-70);
    font-size: 12px; /* design P3 (no 12px token) */
  }

  .facets-popup__dialog .facets__clear-all-link {
    color: var(--color-blue-70);
    font-size: 12px; /* design P3 (no 12px token) */
    text-decoration: underline;
    text-underline-offset: 0.125em;
  }

  /* Filter accordion cards */
  .facets-popup__dialog .facets__filters-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding-inline: var(--padding-lg);
  }

  .facets-popup__dialog :is(.facets__item, .sorting-filter) {
    background-color: var(--color-white);
    border-radius: 4px;
  }

  .facets-popup__dialog .facets__panel {
    padding: var(--padding-lg) var(--spacing-exact-12); /* Figma: 16px block / 12px inline */
  }

  /* Popup text is Navy throughout; the sidebar's "dim the other summaries while
     one is open" hover treatment does not apply to the popup cards. */
  .facets-popup__dialog .facets__form-wrapper,
  .facets-popup__dialog .facets__label {
    color: var(--default-text-color);
  }

  .facets-popup__dialog .facets__summary {
    opacity: 1;
  }

  /* The current sort value is not repeated in the closed Sort row (Figma) */
  .facets-popup__dialog .sorting-filter .facets__status {
    display: none;
  }

  /* sorting.liquid hides .facets--drawer .sorting-filter at >=1024px
     (legacy mobile-only drawer) — the popup shows it on all screens */
  .facets-popup__dialog.facets--drawer .sorting-filter {
    @media screen and (min-width: 1024px) {
      display: block;
    }
  }

  .facets-popup__dialog .facets__summary {
    padding-block: 0;
  }

  .facets-popup__dialog .sorting-filter .facets__summary {
    padding-inline: 0;
  }

  /* Accordion +/- indicator (icon-caret.svg asset is missing, and the
     design uses plus/minus) — drawn with CSS on the summary */
  .facets-popup__dialog .facets__summary .icon-caret {
    display: none;
  }

  .facets-popup__dialog .facets__summary::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--default-text-color);
    background:
      linear-gradient(currentColor, currentColor) center / 10px 1.2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.2px 10px no-repeat;
  }

  .facets-popup__dialog details[open] > .facets__summary::after {
    background: linear-gradient(currentColor, currentColor) center / 10px 1.2px no-repeat;
  }

  .facets-popup__dialog .sorting-filter__options {
    padding-inline: 0;
    padding-block: var(--spacing-exact-12) 0;
    gap: 6px; /* Figma: 6px between sort options; no 6px token */
  }

  .facets-popup__dialog .sorting-filter__option {
    padding: 0;
    min-width: 0;

    &:hover {
      background-color: transparent;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
    cursor: pointer;

    &:hover {
      --icon-opacity: 1;
    }

    @media screen and (min-width: 1024px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    transition: color var(--animation-values);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) 0;
  }

  /* Popup accordion internals: 12px title-to-content, tight option rows */
  .facets-popup__dialog .facets__inputs-wrapper {
    margin-block: var(--spacing-exact-12) 0;
  }

  /* The card's own 16px padding is the bottom spacing; drop the accordion
     content's extra 16px (blocks/accordion.liquid) */
  .facets-popup__dialog .facets__panel-content {
    padding-block-end: 0;
  }

  .facets-popup__dialog .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets-popup__dialog .facets__inputs-wrapper .facets__inputs-list {
    gap: 6px; /* design option-row gap */
  }

  .facets-popup__dialog .facets__inputs-list-item {
    margin-block: 0;
  }

  /* Filter options: plain text with a sliding dash on hover/selected —
     the checkbox square is only kept for the Sort options (design) */
  .facets-popup__dialog .facets__item .input-checkbox {
    display: flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
  }

  .facets-popup__dialog .facets__item .input-checkbox .checkmark {
    display: none;
  }

  .facets-popup__dialog .facets__item .input-checkbox::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 0;
    height: 1px; /* Figma: 1px rule */
    background-color: var(--default-text-color);
    margin-inline-end: 0;
    transition:
      width var(--animation-values-slow),
      margin var(--animation-values-slow);
  }

  .facets-popup__dialog .facets__item .input-checkbox:hover::before {
    width: 30px;
    margin-inline-end: var(--margin-xs);
  }

  .facets-popup__dialog .facets__item .input-checkbox:has(input:checked)::before {
    width: 60px;
    margin-inline-end: var(--margin-xs);
  }

  .facets-popup__dialog .facets__item .input-checkbox:has(input:checked) :is(.p1, .p2) {
    font-weight: 500;
  }

  /* Availability: single "In stock" toggle switch (design shows no
     out-of-stock option) */
  .facets-popup__dialog .facets__inputs-list-item:has(input[name='filter.v.availability'][value='0']) {
    display: none;
  }

  .facets-popup__dialog .facets__item .input-checkbox:has(input[name='filter.v.availability'])::before {
    content: none;
  }

  /* top/border/display/transform reset the base input-checkbox tick styles,
     which otherwise offset the track 5px and hide/rotate the knob when off */
  .facets-popup__dialog .facets__item .input-checkbox:has(input[name='filter.v.availability']) .checkmark {
    display: block;
    order: -1;
    flex-shrink: 0;
    position: relative;
    top: 0;
    width: 36px;
    height: 20px;
    margin-inline-end: var(--margin-xs);
    border: none;
    border-radius: 4px;
    background-color: #bec5cd;
    transition: background-color var(--animation-values);
  }

  .facets-popup__dialog .facets__item .input-checkbox:has(input[name='filter.v.availability']) .checkmark::after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 2px;
    background-color: var(--color-white);
    transform: none;
    transition: transform var(--animation-values);
  }

  .facets-popup__dialog
    .facets__item
    .input-checkbox:has(input[name='filter.v.availability']:checked)
    .checkmark {
    background-color: var(--default-text-color);
  }

  .facets-popup__dialog
    .facets__item
    .input-checkbox:has(input[name='filter.v.availability']:checked)
    .checkmark::after {
    transform: translateX(16px);
  }

  /* Design keeps the toggle label at regular weight when active */
  .facets-popup__dialog
    .facets__item
    .input-checkbox:has(input[name='filter.v.availability']:checked)
    :is(.p1, .p2) {
    font-weight: 400;
  }

  /* Size filter: bordered chips, selected = navy fill (design) */
  .facets-popup__dialog .facets__inputs-list--grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-md);
  }

  .facets-popup__dialog .facets__pill-wrapper {
    margin: 0;
  }

  .facets-popup__dialog .facets__pill-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 39px;
    padding-block: 6px 7px;
    padding-inline: var(--padding-xs);
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    background-color: transparent;
    color: var(--default-text-color);
    font-size: 12px; /* design P3 (no 12px token) */
    line-height: 1.4;
    cursor: pointer;
    transition:
      background-color var(--animation-values),
      color var(--animation-values),
      border-color var(--animation-values);
  }

  .facets-popup__dialog .facets__pill-label:hover {
    border-color: var(--default-text-color);
  }

  .facets-popup__dialog .facets__pill-wrapper:has(input:checked) .facets__pill-label {
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);
  }

  /* Colour filter: square swatch tiles in a 4-column grid, label below,
     selected = navy ring + centered dot (design) */
  .facets-popup__dialog .facets__form .facets__inputs-wrapper .facets__inputs-list--swatches {
    --columns: 4;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--spacing-exact-12) var(--gap-xs);

    /* Pastel #3: the drawer is 417px wide from 1024px, so it fits five. */
    @media screen and (min-width: 1024px) {
      --columns: 5;
    }
  }

  .facets-popup__dialog .facets__form .facets__inputs-list--swatches .facets__inputs-list-item {
    display: block;
    min-width: 0;
    margin: 0;
  }

  .facets-popup__dialog .variant-option--swatches {
    margin: 0;
    padding: 0;
    border: none;
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__button-label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Pastel #13: 4px between the swatch and its label. */
    gap: var(--padding-2xs);
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
  }

  /* Pastel #14: variant-main-picker.liquid gives every
     .variant-option__button-label--has-swatch the 24px --variant-picker-swatch-radius,
     and the focus ring that appears the moment a swatch is clicked follows it —
     drawing a pill-shaped outline around the swatch AND its label. Inside the
     filter drawer the shape is a 4px square, so the ring has to match. */
  .facets-popup__dialog .variant-option--swatches .variant-option__button-label--has-swatch {
    --focus-outline-radius: 4px;

    border-radius: 4px;
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper .swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgb(6 21 43 / var(--opacity-8));
  }

  /* ring + centered dot indicator (dot = white square with navy edge,
     visible on light and dark swatches) */
  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    border: 1.2px solid transparent; /* Figma: 1.2px Navy ring when selected */
    pointer-events: none;
    transition: border-color var(--animation-values);
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--color-white);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--animation-values);
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper:hover::after {
    border-color: var(--grey-color);
  }

  /* Pastel #15: the centre dot is a plain mark — the second (navy) layer that
     used to sit behind it as a 1px frame is switched off. Selection still
     reads from the Navy ring around the swatch itself. */
  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper:has(input:checked)::after {
    border-color: var(--default-text-color);
  }

  .facets-popup__dialog .variant-option--swatches .variant-option__swatch-wrapper:has(input:checked)::before {
    transform: translate(-50%, -50%) scale(1);
  }

  .facets-popup__dialog .variant-option--swatches .facets__swatch-label {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 11px; /* design P4 (no 11px token) */
    line-height: 1.4;
    color: var(--default-text-color);
    cursor: pointer;
  }

  .facets-popup__dialog
    .variant-option--swatches
    .variant-option__button-label--has-swatch:hover,
  .facets-popup__dialog
    .variant-option--swatches
    .variant-option__button-label--has-swatch:has(:checked),
  .facets-popup__dialog
    .variant-option--swatches
    .variant-option__button-label--has-swatch:has(:checked):hover {
    padding-block-end: 0;
    border-bottom: none;
  }

  .facets-popup__dialog
    .variant-option--swatches
    .variant-option__swatch-wrapper:has(input:checked)
    ~ .facets__swatch-label {
    font-weight: 500;
  }

  /* Sort options: radio indicator vertically centered with the label */
  .facets-popup__dialog .sorting-filter__option {
    align-items: center;
    gap: var(--gap-xs);
    grid-template-columns: 17px 1fr;
  }

  .facets-popup__dialog .sorting-filter__checkmark {
    visibility: visible;
    position: relative;
    width: 17px;
    height: 17px;
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    transition: border-color var(--animation-values);
  }

  .facets-popup__dialog .sorting-filter__checkmark svg {
    display: none;
  }

  .facets-popup__dialog .sorting-filter__checkmark::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 2px;
    background-color: var(--default-text-color);
    transform: scale(0);
    transition: transform var(--animation-values);
  }

  /* Pastel #6: size comes from the .p2 preset on the element itself
     (snippets/sorting.liquid) rather than a fixed 14px here. */
  .facets-popup__dialog .sorting-filter__label {
    line-height: 1.4;
  }

  .facets-popup__dialog .sorting-filter__option:hover .sorting-filter__checkmark {
    border-color: var(--default-text-color);
  }

  .facets-popup__dialog .sorting-filter__input:checked ~ .sorting-filter__checkmark {
    border-color: var(--default-text-color);
  }

  .facets-popup__dialog .sorting-filter__input:checked ~ .sorting-filter__checkmark::after {
    transform: scale(1);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--gap-xs);
    flex-direction: column;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-xs);

    @media screen and (min-width: 1024px) {
      --min-column-width: 50px;
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 16px;

    gap: var(--gap-2xs);
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-values);
  }

  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    font-size: var(--font-size--sm);
    font-weight: 500;
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  /* Popup footer actions */
  .facets-popup__dialog .facets__actions {
    position: static;
    flex-shrink: 0;
    background-image: none;
    background-color: var(--body-bg-color);
    box-shadow: none;
    padding: var(--padding-lg);
    margin-top: 0;
  }

  .facets-popup__dialog .facets__see-results {
    width: 100%;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-utilities (INDEX:134) */
.footer__utilities {
    background-color: var(--default-text-color);
    padding-top: var(--padding-4xl);
    padding-bottom: var(--padding-2xl);
  }

  .footer__utilities-localization {
    position: relative;
    padding-top: 2.5rem;
    padding-bottom: var(--padding-lg);
  }

  /* Trigger button */
  .footer__country-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-white);
  }

  .footer__country-caret {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform var(--animation-values);
  }

  .footer__country-trigger[aria-expanded="true"] .footer__country-caret {
    transform: rotate(180deg);
  }

  /* Modal card */
  .footer__country-modal {
    position: absolute;
    bottom: 70%;
    left: 0;
    /* min-width: 20rem; */
    background-color: var(--body-bg-color);
    border-radius: 0.5rem;
    padding: var(--padding-xl) var(--padding-lg);
    box-shadow: 0 0 18px 1px rgba(6, 21, 43, 0.10);
    z-index: var(--layer-overlay);
  }

  .footer__country-modal-header {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-bottom: var(--margin-lg);
  }

  .footer__country-modal-title {
    flex: 1;
    margin: 0;
    color: var(--default-text-color);
    font-size: var(--font-size--xl);
    font-weight: 700;
    line-height: var(--line-height--display-normal);
  }

  .footer__country-modal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--default-text-color);
    line-height: 0;
  }

  /* Select wrapper */
  .footer__country-modal-select-wrapper {
    position: relative;
    margin-bottom: var(--margin-xs);
  }

  /* Toggle — replaces the native select control */
  .footer__country-modal-select {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    width: 100%;
    padding: var(--padding-md) var(--padding-lg);
    background-color: var(--color-white);
    border: 1px solid var(--dark-border-color);
    border-radius: 0.5rem;
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
  }

  .footer__country-modal-select-caret {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--default-text-color);
    transition: transform var(--animation-values);
  }

  .footer__country-modal-select[aria-expanded="true"] .footer__country-modal-select-caret {
    transform: rotate(180deg);
  }

  /* Option list — floats over the card rather than sitting in flow, so opening
     it never resizes the modal or shifts the Submit button. */
  .footer__country-modal-select-list {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + var(--gap-2xs));
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--dark-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 18px 1px rgba(6, 21, 43, 0.10);
    max-height: 20rem;
    overflow-y: auto; 
  }

  .footer__country-modal-select-list[hidden] {
    display: none;
  }

  .footer__country-modal-option {
    appearance: none;
    width: 100%;
    padding: var(--padding-md) var(--padding-lg);
    background: none;
    border: none;
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--animation-values);
  }

  .footer__country-modal-option:hover,
  .footer__country-modal-option:focus-visible,
  .footer__country-modal-option[aria-current="true"] {
    background-color: var(--light-border-color);
  }

  /* Submit button */
  .footer__country-modal-submit {
    width: 100%;
    justify-content: center;
    transition: background-color var(--animation-values), color var(--animation-values), border-color var(--animation-values);
  }

  .footer__country-modal-submit:hover {
    background-color: var(--color-white);
    color: var(--default-text-color);
    border-color: var(--dark-border-color);
  }

  .footer__payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0 0 var(--margin-2xl);
    padding: 0;
    list-style: none;
  }

  .footer__payment-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: 38px;
    height: 24px;
    overflow: hidden;
  }

  .footer__payment-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .footer__payment-icon-item--unionpay {
    width: 35px;
  }

  .footer__utilities-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .footer__utilities-bottom .footer__policy-list {
    /* mobile: policy links sit above the copyright row */
    order: -1;
    margin: 0;
    padding: 0;
  }

  .footer__utilities-attribution {
    /* mobile: copyright left, "Designed by" right */
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
    color: var(--color-white);
  }

  .footer__designed-by {
    white-space: nowrap;
  }

  @media screen and (min-width: 1024px) {
    .footer__utilities {
      display: flex;
      padding: var(--padding-lg) var(--spacing-exact-50) var(--padding-4xl) var(--spacing-exact-50);
      flex-direction: column;
      align-items: stretch;
      gap: var(--gap-lg);
      align-self: stretch;
    }

    .footer__utilities .container {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--gap-lg);
      padding: 0;
      max-width: none;
    }

    .footer__utilities .footer__social-section {
      display: none;
    }

    .footer__utilities-bottom {
      order: 1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--gap-xl);
    }

    .footer__utilities-bottom .footer__policy-list {
      order: 0;
    }

    /* back to one continuous sentence alongside the policy links */
    .footer__utilities-attribution {
      display: block;
    }

    .footer__utilities-localization {
      order: 2;
      margin-block: 0;
      padding-block: 0;
      margin-inline-start: auto;
    }

    .footer__country-modal {
      left: -56px;
      right: auto;
      bottom: calc(100% + var(--padding-4xl) + var(--gap-xs));
      min-width: 430px;
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
      padding: var(--padding-2xl) var(--padding-lg);
    }

    .footer__country-modal-header {
      margin-bottom: 0;
    }

    .footer__country-modal-title {
      font-size: var(--font-size--2xl);
    }

    .footer__country-modal form {
      display: flex;
      align-items: stretch;
      gap: var(--gap-xs);
    }

    .footer__country-modal-select-wrapper {
      flex: 1;
      margin-bottom: 0;
    }

    .footer__country-modal-submit {
      width: auto;
    }

    .footer__payment-icons {
      order: 3;
      margin: 0;
      gap: var(--gap-2xs);
      align-self: center;
    }
  }
/* END_BLOCK:footer-utilities */

/* START_BLOCK:icon_payment (INDEX:140) */
.footer__payment-icon-item {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer__payment-icon-img {
    display: block;
    width: 36px;
    height: 24px;
    object-fit: contain;
    aspect-ratio: 3 / 2;
  }

  .footer__payment-icon-item--empty .footer__payment-icon-placeholder {
    display: block;
    width: 40px;
    height: 24px;
    background-color: rgb(255 255 255 / 0.15);
    border-radius: var(--style-border-radius-xs);
  }
/* END_BLOCK:icon_payment */

/* START_BLOCK:image (INDEX:141) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .placeholder-image svg {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .placeholder-image--mobile,
  .placeholder-image--mobile svg {
    aspect-ratio: var(--ratio-mobile);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .image-block__image--mobile {
    aspect-ratio: var(--ratio-mobile);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:144) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 1023px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:main-footer (INDEX:145) */
.footer__main {
    background-color: var(--default-text-color);
    padding-block-start: var(--spacing-exact-56);
    padding-block-end: 0; /* Figma: the utilities row follows directly on mobile */
  }
  
  .footer__newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xl);
  }

  .footer__newsletter-form {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    background-color: var(--color-white);
    overflow: hidden;
  }

  .footer__newsletter-heading--primary,
  .footer__newsletter-heading--secondary {
    display: inline;
    margin: 0;
  }

  .footer__newsletter-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-inline: var(--padding-lg);
    background: transparent;
    border: none;
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm);
    outline: none;
  }

  .footer__newsletter-input::placeholder {
    color: var(--grey-color);
  }

  .footer__newsletter-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-inline: var(--padding-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--animation-values);
  }

  .footer__newsletter-submit:hover {
    background-color: var(--light-border-color);
  }

  .footer__newsletter-note {
    margin: var(--padding-sm) 0 0;
    color: var(--grey-color);
    /* padding-inline: var(--padding-sm); */
  }

  .footer__newsletter-message {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .footer__newsletter-message--error {
    color: var(--color-error);
  }

  .footer__newsletter-success {
    color: var(--color-white);
    margin: 0;
  }

  .footer__nav-wrapper {
    width: 100%;
    margin-block-start: 2.5rem;
  }

  .footer__nav-socials {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .footer__main {
      padding: 80px 50px 50px 50px;
    }

    .footer__main .container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 80px;
      padding: 0;
      max-width: none;
    }

    .footer__newsletter {
      flex-direction: row;
      align-items: flex-start;
      align-self: stretch;
      gap: 137px;
    }

    .footer__newsletter-heading {
      flex: 1;
    }

    .footer__newsletter-heading--primary,
    .footer__newsletter-heading--secondary {
      display: block;
    }

    .footer__newsletter > form {
      flex: 1 0 0;
    }

    .footer__nav-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--gap-2xl);
      align-items: start;
      align-self: stretch;
      margin-block-start: 0;
    }

    .footer__nav-socials {
      display: block;
    }
  }
/* END_BLOCK:main-footer */

/* START_BLOCK:mega-dropdown (INDEX:146) */
/* ── Mobile: tab list (inside drawer) ──────────────────── */
  .mega-nav-tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-xl);
    align-self: stretch;
  }

  .mega-nav-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    text-decoration: none;
    color: var(--default-text-color);
  }

  /* HARDCODED: 28px — mobile subcategory label matches the H3 preset rather
     than the H4 class it carries; the desktop size lives in _header-menu. */
  .mega-nav-tab .mega-nav-tab__text {
    font-size: 28px;
  }

  /* Fabric tabs use the black wordmark from Theme settings > Fabric (snippets/fabric-logo),
     all at the same 30px height (35px on mobile) (max 200px wide). */
  .mega-nav-tab__text--logo {
    display: inline-flex;
    align-items: center;
  }

  .mega-nav-tab__logo {
    display: block;
    width: auto;
    height: 30px;
    max-width: 200px;
    /* a logo wider than 200px at this height scales down instead of stretching */
    object-fit: contain;
    object-position: left center;
  }

  /* Desktop (1200px+): like the tab text, which is grey until the tab is active (hovering a
     tab activates it), inactive logos are dimmed and come to full strength on hover/active.
     Mobile tab text is never grey, so mobile logos stay at full strength. */
  @media screen and (min-width: 1200px) {
    .mega-nav-tab__logo {
      opacity: 0.4;
      transition: opacity var(--animation-values);
    }

    .mega-nav-tab.is-active .mega-nav-tab__logo,
    .mega-nav-tab:hover .mega-nav-tab__logo,
    .mega-nav-tab:focus-visible .mega-nav-tab__logo {
      opacity: 1;
    }
  }

  /* Mobile drawer (header breakpoint: below 1200px): 35px wordmarks */
  @media screen and (max-width: 1199px) {
    .mega-nav-tab__logo {
      height: 35px;
    }
  }

  .drawer-l2__text--logo {
    display: inline-flex;
    align-items: center;
  }

  .drawer-l2__logo {
    display: block;
    width: auto;
    height: 35px;
    max-width: 200px;
    /* a logo wider than 200px at this height scales down instead of stretching */
    object-fit: contain;
    object-position: left center;
  }

  /* Header-scoped breakpoint: the drawer runs to 1199px */
  @media screen and (max-width: 1199px) {
    .mega-nav-tab__indicator {
      display: none;
    }
  }

  .mega-nav-tab__caret {
    display: flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .mega-nav-tab > .mega-nav-tab__caret svg {
    width: 20px;
    height: 20px;
  }

  /* ── Desktop: hide caret, restore side-by-side indicator layout ── */
  @media screen and (min-width: 1200px) {
    .mega-nav-tab {
      justify-content: flex-start;
    }

    .mega-nav-tab__caret {
      display: none;
    }
  }

  /* ── Block container ────────────────────────────────────── */
  .mega-dropdown {
    display: flex;
    flex-direction: column;
  }

  .mega-dropdown__image-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mega-dropdown__image-list-item {
    border-bottom: 1px solid var(--light-border-color);

    &:last-child {
      border-bottom: none;
    }
  }

  .mega-dropdown__image-link {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--padding-sm) var(--padding-xl);
    text-decoration: none;
    color: var(--default-text-color);

    &:hover .mega-dropdown__image-label {
      color: var(--grey-color);
    }
  }

  .mega-dropdown__image-thumb {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--menu-image-border-radius, 4px);
    overflow: hidden;
    background-color: var(--light-border-color);

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

  .mega-dropdown__image-placeholder {
    opacity: var(--opacity-30);
  }

  .mega-dropdown__image-label {
    transition: color var(--animation-values);
  }
/* END_BLOCK:mega-dropdown */

/* START_BLOCK:megamenu-colours (INDEX:147) */
/* ── Mobile (default) ─────────────────────────────────── */

  .colour-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-xs);
  }

  .colour-group__label {
    color: var(--color-blue-70);
  }

  .colour-group__swatches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* mobile drawer: 5 per row */
    gap: var(--gap-xs);
    align-self: stretch;
  }

  .colour-group__swatches li {
    min-width: 0;
  }

  .colour-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xs);
    text-decoration: none;
    color: var(--default-text-color);
  }

  .colour-swatch__dot {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid transparent;
  }

  .colour-swatch__name {
    text-align: center;
    word-break: break-word;
    line-height: 1;
    min-height: 30px; /* keeps rows even when a name wraps */
  }

  /* Mobile drawer: smaller names so 5 columns fit. Scoped under .colour-swatch
     to outrank the .p4 utility class on the same element. */
  @media screen and (max-width: 1199px) {
    .colour-swatch .colour-swatch__name {
      font-size: 10px;
    }
  }

  /* ── Desktop (1200px+) ────────────────────────────────── */

  @media screen and (min-width: 1200px) {
    .mega-panel--colours {
      width: 450px;
      padding: var(--padding-2xl) var(--padding-lg);
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      border-radius: 0 4px 4px 0;
      background: var(--body-bg-color);
    }

    .colour-group__label {
      font-size: 14px;
      font-weight: 500;
      line-height: 140%;
    }

    .colour-group__swatches {
      grid-template-columns: repeat(6, 1fr);
    }

    .colour-swatch {
      width: 63px;
      border-radius: 4px;
    }

    .colour-swatch__dot {
      align-self: stretch;
    }

    .colour-swatch__name {
      padding: 4px 0;
    }
  }
/* END_BLOCK:megamenu-colours */

/* START_BLOCK:megamenu-links (INDEX:148) */
/* ── Mobile (default) ─────────────────────────────────── */

  .mega-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-2xl);
  }

  /* Links wrapped in a white card */
  /* "Show panel / promotional cards on": the header switches to the mobile drawer below 1200px */
  @media screen and (max-width: 1199px) {
    .mega-panel__cards--desktop,
    .mega-panel__promo--desktop {
      display: none !important;
    }
  }

  @media screen and (min-width: 1200px) {
    .mega-panel__cards--mobile,
    .mega-panel__promo--mobile {
      display: none !important;
    }
  }

  /* "Panel cards position": before (default) or after the links; promotional cards stay last */
  .mega-panel__promo {
    order: 2;
  }

  @media screen and (max-width: 1199px) {
    .mega-panel__cards--after-mobile {
      order: 1;
    }
  }

  @media screen and (min-width: 1200px) {
    .mega-panel__cards--after-desktop {
      order: 1;
    }
  }

  /* Panel cards above the links: two per row, image on top, label / fabric logo below */
  .mega-panel__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-xs);
    align-self: stretch;
  }

  .mega-panel__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d0d7e0; /* HARDCODED: same border as the collection filter cards */
    border-radius: var(--style-border-radius-image);
    background-color: var(--color-white);
    text-decoration: none;
    color: var(--default-text-color);
  }

  .mega-panel__card-image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--light-border-color);
  }

  .mega-panel__card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-values);
  }

  .mega-panel__card:hover .mega-panel__card-image img {
    transform: scale(1.03);
  }

  .mega-panel__card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--padding-2xs);
    min-height: 2.75rem;
    padding: var(--padding-xs) var(--padding-md);
    font-weight: 500;
  }

  .mega-panel__card-logo {
    display: block;
    width: auto;
    height: 20px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .mega-panel__list {
    list-style: none;
    margin: 0;
    padding: var(--padding-xs);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-xs);
    align-self: stretch;
    border-radius: 8px;
    background: var(--color-white);
  }

  .mega-panel__item {
    align-self: stretch;
  }

  .mega-panel__link {
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    color: var(--default-text-color);

    &:hover {
      color: var(--grey-color);
    }
  }

  /* Thumbnail: fixed 48 x 66 (48:66) at every size, whatever the row height or image shape */
  .mega-panel__thumb {
    display: flex;
    width: 48px;
    height: 66px;
    min-height: 66px;
    max-height: 66px;
    align-self: center;
    align-items: flex-end;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: var(--light-border-color);
    background-image: var(--nav-thumb, none);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;

    img {
      display: none;
    }
  }

  /* Product links fall back to the product's main photo: a full-length shot on white.
     Zoom in on the upper body so it fills the box like the tighter collection images.
     A product's custom.nav_thumbnail is used as-is (no zoom). Two classes, so it also
     beats the desktop thumb rule's background-size. */
  .mega-panel__thumb.mega-panel__thumb--product {
    background-size: cover;
    background-position: 50% 15%;
  }

  /* Row height = the 66px thumbnail: no vertical padding, text centred, capped at 66px */
  .mega-panel__link-text {
    flex: 1;
    max-height: 66px;
    padding: 0 var(--padding-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
  }

  /* Promo outer container */
  .mega-panel__promo {
    display: flex;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    align-self: stretch;
  }

  /* Bordered card wrapping image + body */
  .mega-panel__promo-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--dark-border-color);
    overflow: hidden;
    padding: 0;
    gap: 0;

    > img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 8px; /* Figma: all four image corners rounded, incl. where it meets the body */
      margin: 0;
      padding: 0;
      flex-shrink: 0;
    }
  }

  /* Text area below the image */
  .mega-panel__promo-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-2xl);
    gap: var(--padding-xl);
  }

  /* Heading + body text grouped with no gap */
  .mega-panel__promo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    /* HARDCODED: 20px — header and descriptor share one size at every
       breakpoint (Figma); the H5 preset would grow to 22–24px on desktop */
    .h5 {
      font-size: 20px;
    }

    /* The descriptor is rich text, so its <p> would otherwise pick up the
       default paragraph typography (P1) instead of the H5 styling above. */
    .h5 :is(p, div) {
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      color: inherit;
      margin: 0;
    }

    /* Descriptor under a heading is subdued; a lone text (no heading set)
       keeps the title styling — H5 in Navy (Figma). */
    .h5:not(:first-child) {
      color: var(--grey-color);
    }
  }

  /* CTA link row */
  .mega-panel__promo-cta {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    text-decoration: none;
    color: var(--default-text-color);

    a {
      text-decoration: none;
      color: inherit;
      font-weight: 500;
    }
  }

  /* ── Desktop (1200px+) ─────────────────────────────────── */

  @media screen and (min-width: 1200px) {
    .mega-panel {
      border-radius: 0 4px 4px 0;
      background: var(--body-bg-color);
      width: 450px;
      padding: var(--padding-2xl) var(--padding-lg);
      gap: var(--padding-xl);
      overflow-y: auto;
      max-height: calc(100svh - var(--header-height) - 80px);
      align-self: stretch;
    }

    /* 2-column grid inside white card */
    .mega-panel__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--padding-xs);
      align-self: stretch;
      padding: var(--padding-xs);
      border-radius: 8px;
      background: var(--color-white);
    }

    .mega-panel__item {
      display: flex;
      border-bottom: none;
    }

    .mega-panel__link {
      display: flex;
      width: 100%;
      align-items: stretch;
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 4px;

      &:hover {
        color: var(--default-text-color);
      }
    }

    .mega-panel__thumb {
      display: flex;
      width: 48px;
      height: 66px;
      min-height: 66px;
      max-height: 66px;
      align-items: flex-end;
      flex-shrink: 0;
      align-self: center;
      border-radius: 4px;
      background-color: var(--light-border-color);
      background-image: var(--nav-thumb, none);
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;

      img {
        display: none;
      }
    }

    .mega-panel__link-text {
      display: flex;
      flex: 1;
      max-height: 66px;
      padding: 0 var(--padding-lg);
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 24px;
      align-self: stretch;
    }

    /* Promo resets for desktop flat layout */
    .mega-panel__promo {
      align-self: stretch;
      padding: 0;
      gap: var(--gap-sm);
    }

    .mega-panel__promo-card {
      border: 1px solid var(--dark-border-color);
      border-radius: 8px;
      overflow: hidden;
      gap: 0;
    }

    .mega-panel__promo-body {
      padding: var(--padding-2xl);
      gap: var(--padding-xl);
    }

    /* HARDCODED: 13px — desktop submenu text links hold the P2 mobile size
       instead of stepping up at 1440px */
    .mega-panel .mega-panel__link-text,
    .mega-panel .mega-panel__promo-cta a {
      font-size: 13px;
    }
  }
/* END_BLOCK:megamenu-links */

/* START_BLOCK:payment-icons (INDEX:152) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:154) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:155) */
product-price .price {
    font-weight: 500;
  }

  .tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-eyebrow (INDEX:159) */
.product-eyebrow {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .product-eyebrow__label {
    font-weight: 500;
    color: var(--default-text-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
  }

  .product-eyebrow__divider {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--color-black);
    flex-shrink: 0;
  }
/* END_BLOCK:product-eyebrow */

/* START_BLOCK:product-inventory (INDEX:160) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-promo-message (INDEX:161) */
.shopify-block:has(.promo-message) {
    margin-right:16px;
  }
  .promo-message {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .promo-message__text {
    color: var(--default-text-color);
  }
/* END_BLOCK:product-promo-message */

/* START_BLOCK:product-rating (INDEX:162) */
.product-rating {
    /* Figma: 14px stars, no gap between them, 2px to the count */
    --product-rating-star-size: 0.875rem;

    display: flex;
    align-items: center;
    gap: var(--gap-3xs);
    color: var(--default-text-color);
  }

  /* Title → stars gap is 2px in Figma. The buy-box column applies its own 12px
     gap to every sibling pair, so pull this block back by 10px when it directly
     follows the product title (same approach as the eyebrow → title pair in
     sections/product-information.liquid). */
  .text-block + .product-rating,
  .contents + .product-rating {
    margin-block-start: -10px;
  }

  .product-rating__stars {
    display: flex;
    align-items: center;
  }

  .product-rating__star {
    display: block;
    width: var(--product-rating-star-size);
    height: var(--product-rating-star-size);
    flex-shrink: 0;
  }

  .product-rating__star--empty {
    color: var(--dark-border-color);
  }

  .product-rating__count {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
  }
/* END_BLOCK:product-rating */

/* START_BLOCK:register-form (INDEX:165) */
.phone-input-row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--gap-sm, 8px);
    align-items: center;
  }
  @media screen and (max-width: 1023px) {
    .phone-input-row {
      grid-template-columns: 1.2fr 2.8fr;
    }
  }
  .country-code-select {
    min-width: 0;
  }
  .phone-number-input {
    min-width: 0;
  }
/* END_BLOCK:register-form */

/* START_BLOCK:simple-dropdown (INDEX:167) */
.simple-dropdown__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
  }

  @media screen and (min-width: 1024px) {
    [data-block-type="simple-dropdown"] {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--padding-2xl) var(--padding-lg);
      border-radius: 4px;
      background: var(--color-white);
      top: 0;
      z-index: var(--layer-header-menu);
      width: 192px;
    }

    .simple-dropdown__links {
      gap: 12px;
    }

    .simple-dropdown__links a {
      color: var(--default-text-color);
      text-decoration: none;
    }
  }
/* END_BLOCK:simple-dropdown */

/* START_BLOCK:xmas-bundle-builder (INDEX:171) */
/* Vertical rhythm inside the builder: debug panel, gender banner, accordions. */
  .xmas-bundle-builder {
    --xmas-bundle-gap: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--xmas-bundle-gap);
  }

  @media screen and (min-width: 1024px) {
    .xmas-bundle-builder {
      --xmas-bundle-gap: 12px;
    }
  }

  /* Add to cart (theme btn1). Disabled = the theme's disabled look. */
  .xmas-bundle-atc {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.4;
  }

  @media screen and (min-width: 1024px) {
    .xmas-bundle-atc {
      font-size: 14px;
    }
  }

  .xmas-bundle-atc:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .xb-debug--note {
    padding: 8px 12px;
    border: 2px dashed #f0326e;
    font-size: 12px;
  }

  /* Set accordions sit flush; each draws its own divider lines. */
  .xmas-bundle-builder__sets {
    display: flex;
    flex-direction: column;
  }

  /* No sets (Accessories): take the empty container out of the layout so it adds no gap. */
  .xmas-bundle-builder__sets:not(:has(.xmas-bundle-set, .xmas-bundle-set__placeholder)) {
    display: none;
  }

  /* One top line above the first set; every set draws its own bottom line. */
  .xmas-bundle-builder__sets:has(.xmas-bundle-set) {
    border-top: 1px solid #d0d7e0;
  }

  .xmas-bundle-builder__placeholder {
    padding: 16px;
    border: 1px dashed #d0d7e0;
    border-radius: 8px;
    background: #fff;
  }
/* END_BLOCK:xmas-bundle-builder */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:173) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    /* HARDCODED: 16px bottom (Yu Qi feedback) — no padding token equals 16px. */
    padding-block-end: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);

    &:last-child {
      padding-block-end: var(--padding-xl);
    }
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 300px) {
      grid-template-columns: 1fr;
    }
  }

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:174) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    /* height: var(--button-size);
    width: var(--button-size); */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .account-button__avatar {
    --account-button-size: 1.625rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--light-border-color);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--default-text-color);
    text-transform: uppercase;
    line-height: 1;
  }

  /* .svg-wrapper's own width/height (--icon-size-sm, 20px) ties in specificity
     with .header-actions__action svg (24px) — the two-class selectors below
     win deterministically regardless of stylesheet compile order.
     icon_account_header's native viewBox is 14x14 (vs 16-20 for its
     siblings) — rendering it at the same 24px box as the others scales its
     stroke-width up disproportionately, reading as bolder/bigger, so it's
     sized down to 20px here to match their visual weight instead of their
     literal pixel box. */
  .account-button .svg-wrapper {
    width: 32px;
    height: 32px;
  }

  .header-actions__action.account-button .svg-wrapper svg {
    width: 14px;
    height: 14px;
  }

  /* Transparent header: navy color for account button */
  .header[transparent]:not([data-sticky-state='active']) .account-button,
  .header[transparent='always'][data-sticky-state='active'] .account-button {
    color: var(--default-text-color);
  }

  /* Transparent header: inherit color when scrolling down or menu is open */
  .header[transparent][data-sticky-state='active']:not([transparent='always']) .account-button,
  .header[transparent]:has(.mega-menu__list:hover) .account-button,
  .header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])) .account-button,
  .header[transparent]:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) .account-button,
  .header[transparent]:has(.menu-dropdown:hover) .account-button {
    color: inherit;
  }

  /* Layout-transparent: the gate must not become a flex item of .account-button */
  .account-button__avatar-gate {
    display: contents;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:175) */
.account-drawer {
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:176) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;
    margin: 0;
    top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
    left: unset;
    /* Flush with the right edge of the nav bar card, not with the account icon
       (Yu Qi feedback). The card's own inline margin is set in
       sections/header.liquid: --padding-lg below 1200px, then
       --padding-hero-banner-content-end. */
    right: var(--padding-lg);

    width: max-content;
    min-width: var(--account-popover-min-width);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-popover);
    background-color: var(--body-bg-color);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }
  }

  @media screen and (min-width: 1200px) {
    .account-popover__panel {
      right: var(--padding-hero-banner-content-end);
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
    .account-popover__panel:popover-open {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:add-to-cart-button (INDEX:177) */
.add-to-cart-text__price {
    white-space: nowrap;
  }

  .add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-video (INDEX:181) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bis-trigger-button (INDEX:182) */
/* .add-to-cart-button supplies padding, type and flex sizing. The label/price
     row is repeated here rather than borrowing .add-to-cart-text from
     snippets/add-to-cart-button.liquid: that snippet does not render on this
     page, so its {% stylesheet %} is not guaranteed to be present. */
  .bis-trigger-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    text-decoration: none;
  }

  .bis-trigger-button__price {
    white-space: nowrap;
  }
/* END_SNIPPET:bis-trigger-button */

/* START_SNIPPET:blog-comment-form (INDEX:183) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 1024px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: 1px solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:breadcrumb (INDEX:185) */
.breadcrumb {
    padding-top: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .breadcrumb__item {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    line-height: 1.4;
    color: var(--color-blue-70);
  }
  .breadcrumb__separator {
    display: block;
    width: 30px;
    height: 1px; /* Figma: 1px rule in Blue-70 */
    flex-shrink: 0;
    background-color: var(--color-blue-70);
  }
/* END_SNIPPET:breadcrumb */

/* START_SNIPPET:cart-cross-sell (INDEX:195) */
/* Recommendations-mode shell: the block below is fetched into it */
	cart-cross-sell-recommendations {
		display: block;
	}

	/* Full-bleed within the drawer's 16px-padded items area so the carousel runs
	   edge-to-edge and slides can peek/scroll cleanly to the drawer edge instead
	   of clipping mid-card. The head + swiper below re-inset their content by the
	   same 16px (--padding-lg) so the heading, arrows and cards stay aligned with
	   the rest of the cart. */
	.cart-cross-sell-component {
		width: calc(100% + 2 * var(--padding-lg));
		margin-inline: calc(-1 * var(--padding-lg));
	}

	/* Divider between the cart items and the carousel. The last cart row drops its
	   own border on purpose (.cart-items--dividers .cart-items__table-row:last-child
	   in cart-products), so the boundary rule lives here — which also keeps it tied
	   to the carousel actually rendering. Inset by the drawer padding so it lines up
	   with the dividers between cart items instead of running into the full-bleed
	   gutters this component negative-margins into. 24px clears it on both sides. */
	.cart-cross-sell-component::before {
		content: '';
		display: block;
		margin-inline: var(--padding-lg);
		/* Figma: 20px above and below the rule on mobile, 24px on both on desktop */
		margin-block-start: var(--padding-xl);
		margin-block-end: var(--padding-xl);
		border-block-start: 1px solid var(--dark-border-color);
	}

	@media screen and (min-width: 1024px) {
		.cart-cross-sell-component::before {
			margin-block-start: var(--padding-2xl);
			margin-block-end: var(--padding-2xl);
		}
	}

	.cart-cross-sell__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: var(--spacing-exact-12);
		padding-inline: var(--padding-lg);
	}

	@media screen and (min-width: 1024px) {
		.cart-cross-sell__head {
			margin-block-end: var(--margin-lg);
		}
	}

	/* Inset the slides to the content edge at rest; the swiper's overflow clips
	   at its padding box (the drawer edge), giving the full-bleed peek. */
	.cart-cross-sell-component .swiper {
		padding-inline: var(--padding-lg);
	}

	.cart-cross-sell__title {
		font-weight: 500;
		color: var(--default-text-color);
	}

	.cart-cross-sell__nav {
		display: flex;
		align-items: center;
		gap: var(--gap-xs);
	}

	/* Arrow state is driven by whether it can scroll (Swiper toggles [disabled]
	   via isBeginning/isEnd), NOT by direction. Figma:
	     enabled  = navy outline, transparent fill, navy icon
	     disabled = Blue-15 tint fill, no border, Blue-35 muted icon */
	.cart-cross-sell__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: var(--padding-xs);
		border-radius: 4px; /* Figma button-corner */
		box-shadow: none;
		cursor: pointer;
		background-color: transparent;
		border: 1px solid var(--default-text-color);
		color: var(--default-text-color);
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	.cart-cross-sell__arrow[disabled] {
		background-color: var(--light-border-color);
		border-color: transparent;
		color: #bec5cd; /* Blue-35 (Placeholder) — no theme token equivalent */
		cursor: default;
	}

	.cart-cross-sell__arrow .svg-wrapper,
	.cart-cross-sell__arrow svg {
		width: 16px;
		height: 16px;
	}

	/* ---------------------------------------------------------------------
	   Below 1024px (Pastel #38) the carousel is a stacked list of horizontal
	   cards: image flush left, title, quick-add on the right. Swiper is not
	   initialised in this range (see assets/cart-drawer.js), so the wrapper is
	   free to be a plain column. From 1024px the Figma carousel of 100px
	   column cards returns, further down this file.
	   --------------------------------------------------------------------- */
	.cart-cross-sell-component .swiper-wrapper {
		flex-direction: column;
		gap: var(--gap-xs);
	}

	.cart-cross-sell-component .swiper-slide {
		width: 100%;
	}

	/* The stacked list is not swipeable, so the carousel arrows have nothing to
	   drive. */
	.cart-cross-sell__nav {
		display: none;
	}

	.cart-cross-sell__card {
		display: flex;
		align-items: center;
		gap: var(--spacing-exact-12);
		padding-inline-end: var(--spacing-exact-12);
		text-decoration: none;
		color: var(--default-text-color);
		background-color: var(--color-white);
		border: 1px solid var(--light-border-color);
		border-radius: 8px;
		overflow: hidden;
	}

	.cart-cross-sell__media {
		flex: 0 0 auto;
		aspect-ratio: 200 / 283;
		width: 4rem; /* 64px */
		overflow: hidden;
		background-color: var(--light-border-color);
	}

	.cart-cross-sell__media img,
	.cart-cross-sell__media svg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.cart-cross-sell__card-title {
		flex: 1 1 auto;
		min-width: 0;
		color: var(--default-text-color);
		text-decoration: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Quick add — opens the shared sheet so a colour and size get picked,
	   rather than adding the first available variant blind. */
	.cart-cross-sell__atc {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: var(--padding-xs);
		background-color: transparent;
		border: 1px solid var(--default-text-color);
		border-radius: 4px; /* Figma button-corner */
		box-shadow: none;
		color: var(--default-text-color);
		cursor: pointer;
		min-height: 0;
		transition: background-color var(--animation-values), color var(--animation-values);
	}

	.cart-cross-sell__atc:hover {
		background-color: var(--default-text-color);
		color: var(--color-white);
	}

	.cart-cross-sell__atc[disabled] {
		opacity: 0.5;
		cursor: default;
	}

	.cart-cross-sell__atc .svg-wrapper,
	.cart-cross-sell__atc svg {
		width: 16px;
		height: 16px;
		display: block;
	}

	/* --------------------------------------------------- 1024px: carousel */
	@media screen and (min-width: 1024px) {
		.cart-cross-sell-component .swiper-wrapper {
			flex-direction: row;
			gap: 0; /* Swiper spaces the slides itself */
		}

		/* Figma: fixed 100px cards with an 8px gap. Paired with Swiper
		   slidesPerView:'auto' so cards keep this width (rather than being
		   stretched to fill), the row shows ~4.6 cards, and the last peeks
		   cleanly at the content edge instead of a fat clipped slice. */
		.cart-cross-sell-component .swiper-slide {
			width: 100px;
		}

		.cart-cross-sell__nav {
			display: flex;
		}

		/* Swiper tags both arrows with its lockClass when every slide fits, so
		   there is nothing to page through. */
		.cart-cross-sell__nav:has(.swiper-button-lock) {
			display: none;
		}

		.cart-cross-sell__card {
			flex-direction: column;
			align-items: stretch;
			gap: var(--gap-xs);
			padding-inline-end: 0;
			background-color: transparent;
			border: none;
			border-radius: 0;
			overflow: visible;
		}

		.cart-cross-sell__media {
			width: 100%;
			border-radius: 8px; /* Figma image-corner */
		}

		.cart-cross-sell__card-title {
			flex: 0 1 auto;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			padding-inline: var(--padding-xs); /* Figma: title inset 8px within the card */
		}

		.cart-cross-sell__atc {
			display: none;
		}
	}
/* END_SNIPPET:cart-cross-sell */

/* START_SNIPPET:cart-discount (INDEX:196) */
.cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: 1px;
    border-color: var(--color-input-border);
    border-style: solid;
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: 61px;
  }

  .cart-discount__pill {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 40px;
    background-color: var(--grey-color);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  cart-discount-component {
    display: flex;
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-drawer-cta (INDEX:197) */
.cart-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xl);
    width: 100%;
    min-height: 52px;
    padding: var(--padding-md) var(--padding-lg);
    background-color: var(--default-text-color);
    color: var(--color-white);
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-sm, 4px);
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--animation-values), color var(--animation-values),
      border-color var(--animation-values);
  }

  .cart-drawer-cta:hover {
    background-color: var(--color-white);
    color: var(--default-text-color);
    border-color: var(--dark-border-color);
  }

  .cart-drawer-cta:hover .cart-drawer-cta__icon {
    background-color: var(--default-text-color);
    color: var(--color-white);
  }

  .cart-drawer-cta__label {
    font-family: var(--font-p2--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: 1.4;
  }

  .cart-drawer-cta__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--color-white);
    color: var(--default-text-color);
    border-radius: 2px;
    transition: background-color var(--animation-values), color var(--animation-values);
  }

  .cart-drawer-cta__icon svg {
    width: 16px;
    height: 16px;
  }
/* END_SNIPPET:cart-drawer-cta */

/* START_SNIPPET:cart-drawer (INDEX:198) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__state {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .cart-drawer__view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__view[hidden] {
    display: none;
  }

  /* Cart <-> gifting uses the menu drawer's level-change transition
     (snippets/header-drawer.liquid): forward slides in from the right, back from
     the left, both fading up. */
  .cart-drawer__view--enter {
    animation: cart-drawer-view-in var(--animation-values-slow) both;
  }

  .cart-drawer__view--enter-back {
    animation: cart-drawer-view-in-back var(--animation-values-slow) both;
  }

  @keyframes cart-drawer-view-in {
    from {
      transform: translateX(12%);
      opacity: 0;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  @keyframes cart-drawer-view-in-back {
    from {
      transform: translateX(-12%);
      opacity: 0;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__view--enter,
    .cart-drawer__view--enter-back {
      animation: none;
    }
  }

  /* ---------------------------------------------------------------- Header */
  .cart-drawer__inner {
    /* The dialog is display:flex (from .dialog-modal[open]); the inner must fill
       the full 538px width or the content sits narrow. */
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--body-bg-color);
  }

  .cart-drawer__inner:focus,
  .cart-drawer__inner:focus-visible {
    outline: none;
  }

  .cart-drawer__header {
    background-color: var(--body-bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 16px 12px;
    position: sticky;
    top: 0;
    z-index: var(--layer-flat);

    @media screen and (min-width: 1024px) {
      padding: 24px 20px 16px;
    }
  }

  .cart-drawer__heading {
    display: flex;
    align-items: baseline;
    gap: var(--gap-2xs);
    min-width: 0;
  }

  .cart-drawer__count {
    color: var(--grey-color);
  }

  /* Figma White surface (#F8F8F8) on the container only — the +/- cells and the
     input stay transparent so the whole control reads as one white box inside a
     Blue-20 stroke. */
  .cart-drawer .quantity-selector,
  .cart-drawer .quantity-selector:hover {
    background-color: #F8F8F8;
  }

  .cart-drawer .quantity-selector input[type='number']:focus-visible {
    outline: none;
  }

  .cart-drawer .quantity-selector:has(input[type='number']:focus-visible) {
    border-color: var(--default-text-color);
  }

  /* Locked quantity boxes (the gift box line — gifting is one-per-order) keep
     the same shape but mute their controls so they don't invite a click.
     Blue-35 (Placeholder); no theme token equivalent. */
  .cart-drawer .quantity-selector :is(.quantity-minus, .quantity-plus):disabled {
    color: #BEC5CD;
    cursor: default;
  }

  .cart-drawer__header-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
  }

  .cart-drawer__rewards {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: var(--default-text-color);
    text-decoration: underline;
    white-space: nowrap;
  }

  .cart-drawer__close-button {
    /* Override the global .close-button (position: fixed), which pulls the X out of
    the header flow and makes it overlap the Rewards link. */
    position: static;
    background-color: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    border-radius: var(--style-border-radius-sm, 4px);
  }

  .cart-drawer__header--empty {
    justify-content: flex-end;
  }

  /* --------------------------------------------------------- Free shipping */
  .cart-drawer__free-shipping {
    background-color: var(--body-bg-color);
    padding: 0 var(--padding-xl) var(--padding-lg);
    position: sticky;
    top: 60px;
    z-index: var(--layer-flat);
  }

  .cart-drawer__free-shipping:empty {
    display: none;
  }

  /* ---------------------------------------------------------------- Layout */
  .cart-drawer__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
  }

  .cart-drawer__items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--spacing-exact-12) var(--padding-xl) var(--padding-lg);
  }

  .cart-drawer__summary {
    background-color: var(--body-bg-color);
    position: sticky;
    bottom: 0;
    z-index: var(--layer-flat); 
    padding: var(--padding-lg) var(--padding-xl) var(--padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    border-top: 1px solid var(--dark-border-color);
  }

  /* ----------------------------------------------------- Add Gifting entry */
  .cart-drawer__gifting-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    width: 100%;
    padding: var(--spacing-exact-12) var(--padding-lg);
    background-color: transparent;
    border: 1px solid var(--dark-border-color);
    border-radius: var(--style-border-radius-sm, 4px);
    color: var(--default-text-color);
    box-shadow: none;
    cursor: pointer;
    min-height: 0;
  }

  .cart-drawer__gifting-link span:last-child {
    text-decoration: underline;
  }

  /* -------------------------------------------------------- Footer totals */
  .cart-drawer__totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--spacing-exact-12);
  }

  .cart-drawer__subtotal-label {
    font-weight: 500;
    color: var(--default-text-color);
  }

  .cart-drawer__subtotal-value {
    font-size: var(--font-size--md);
    font-weight: 500;
    color: var(--default-text-color);
  }

  .cart-drawer__checkout {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xl);
    width: 100%;
    min-height: 52px;
    padding: var(--padding-md) var(--padding-lg);
    background-color: var(--default-text-color);
    color: var(--color-white);
    /* Navy border at rest rather than `none`: it is invisible against the navy
       fill but reserves the 1px box so the Blue-20 hover outline below swaps in
       without the button resizing. Mirrors how global .btn1 is constructed. */
    border: 1px solid var(--default-text-color);
    border-radius: var(--style-border-radius-sm, 4px);
    box-shadow: none;
    cursor: pointer;
    margin-top: var(--padding-md);
    transition: background-color var(--animation-values), color var(--animation-values),
      border-color var(--animation-values);
  }

  /* Button 1 hover (Figma): BG White / Text Navy / Outline Blue-20,
     with the icon square inverting to Navy fill / White icon. */
  @media (hover: hover) {
    .cart-drawer__checkout:hover {
      background-color: var(--color-white);
      color: var(--default-text-color);
      border-color: var(--dark-border-color);
    }

    .cart-drawer__checkout:hover .cart-drawer__checkout-arrow {
      background-color: var(--default-text-color);
      color: var(--color-white);
    }
  }

  .cart-drawer__checkout.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 1;
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
  }

  .cart-drawer__checkout.is-loading .cart-drawer__checkout-label,
  .cart-drawer__checkout.is-loading .cart-drawer__checkout-arrow {
    visibility: hidden;
  }

  .cart-drawer__checkout.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: cart-checkout-spin 0.6s linear infinite;
  }

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

  .cart-drawer__checkout-label {
    font-family: var(--font-p2--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: 1.4;
  }

  .cart-drawer__checkout-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--color-white);
    color: var(--default-text-color);
    border-radius: 2px;
    transition: background-color var(--animation-values), color var(--animation-values);
  }

  .cart-drawer__checkout-arrow svg {
    width: 16px;
    height: 16px;
  }

  .cart-drawer__checkout-note {
    color: var(--color-blue-70);
    text-align: center;
    margin-top: var(--padding-xs);
  }

  /* ------------------------------------------------------------ Empty state */
  /* The empty state centres in the space LEFT OVER under the header. `height:
     100%` measured against the whole drawer instead, so the centring point sat
     a header's height too low (Pastel #39: "too much space above compared to
     below"). Flexing into the remaining space fixes it; `justify-content` is
     the vertical axis here because .cart-drawer__content is a column. */
  .cart-drawer__content--empty {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* header-actions.liquid stretches the empty drawer's inner to 100dvh, but the
     dialog is inset 12px top and bottom — the 24px overflow is clipped off the
     bottom and drags the centred content down with it. Same specificity there,
     so qualify with the element to win regardless of stylesheet order. */
  dialog.cart-drawer--empty .cart-drawer__inner {
    height: 100%;
  }

  .cart-drawer__empty {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    padding: var(--padding-lg);
  }
  @media screen and (min-width: 1024px){
    .cart-drawer__empty {
      gap: 30px;
      padding: 20px;
    }
  }

  .cart-drawer__empty-heading {
    color: var(--default-text-color);
  }

  .cart-drawer__empty-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }
  @media screen and (min-width: 1024px){
    .cart-drawer__empty-ctas {
      display: flex;
      flex-direction: column;
      gap: var(--gap-xs);
    }

  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-gifting-panel (INDEX:200) */
.cart-gifting {
    height: 100%;
  }

  /* Qualified with .cart-drawer__header so it beats that class's own padding
     regardless of which {% stylesheet %} Shopify concatenates first. */
  .cart-drawer__header.cart-gifting__header {
    gap: var(--gap-md);
    justify-content: flex-start;
    /* Pastel #26: 16px below the header (desktop is already 16px). */
    padding-block-end: var(--padding-lg);
  }

  .cart-gifting__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--default-text-color);
    transform: rotate(90deg);
  }

  .cart-gifting__back .svg-wrapper,
  .cart-gifting__back svg {
    width: 16px;
    height: 16px;
  }

  .cart-gifting__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Figma section gap = 24px (padding/xl); no exact gap token, so literal. */
    gap: 24px;
    /* Pastel #27: 12px top. Figma: 20px bottom on mobile. */
    padding: var(--spacing-exact-12) var(--padding-lg) var(--padding-xl);
  }

  @media screen and (min-width: 1024px) {
    .cart-gifting__body {
      padding-block-end: var(--padding-2xl); /* Figma: 24px bottom on desktop */
    }
  }

  .cart-gifting__section {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* Section labels: "Gift Box Colour" / "Gift Box Size" are P2 at weight 500;
     "Add Gift Message" (.cart-gifting__label--message) is P1 at the preset's 400. */
  .cart-gifting__label {
    color: var(--default-text-color);
    font-weight: 500;
  }

  /* The colour/size section labels are <legend>s, which don't reliably receive
     the fieldset's flex gap — so the label→controls spacing (Figma Padding/M =
     12px) is applied to the legend directly. The message section's <p> label
     carries the same 12px of its own, further down. */
  legend.cart-gifting__label {
    /* Pastel #29 / #32 */
    margin-bottom: var(--spacing-exact-12);
  }

  /* Shared square check / radio box */
  .cart-gifting__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .cart-gifting__box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--dark-border-color);
    /* Literal 3px — the theme's --style-border-radius-sm is 0.6rem (~9.6px),
       which turns a 16px box into a circle. Figma checkbox is a square; Pastel
       #30 asked for 3px after confirming 2px read too sharp. */
    border-radius: 3px;
    background-color: transparent;
  }

  .cart-gifting__box::after {
    content: '';
    width: 8.5px;
    height: 8.5px;
    border-radius: 1px;
    background-color: var(--default-text-color);
    opacity: 0;
  }

  /* Checked state via :has() on the label — works whether or not the input is
     the box's adjacent sibling (colour cards nest the box below the media). */
  .cart-gifting__colour-card:has(.cart-gifting__input:checked) .cart-gifting__box,
  .cart-gifting__size-row:has(.cart-gifting__input:checked) .cart-gifting__box,
  .cart-gifting__leave-blank:has(.cart-gifting__input:checked) .cart-gifting__box {
    border-color: var(--default-text-color);
  }

  .cart-gifting__colour-card:has(.cart-gifting__input:checked) .cart-gifting__box::after,
  .cart-gifting__size-row:has(.cart-gifting__input:checked) .cart-gifting__box::after,
  .cart-gifting__leave-blank:has(.cart-gifting__input:checked) .cart-gifting__box::after {
    opacity: 1;
  }

  /* Colour cards */
  .cart-gifting__colour-grid {
    /* Figma image slot is 213x125 (node 10567:225581) inside a 245-wide card.
       Declared once as a ratio, not fixed px, so the two cards stay fluid at
       every drawer width — the img and the no-image placeholder both read it. */
    --gift-box-media-ratio: 213 / 125;

    display: grid;
    /* At most 2 columns; more colours wrap onto new rows */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-xs);
  }

  /* A single gift box colour takes the whole row */
  .cart-gifting__colour-card:only-child {
    grid-column: 1 / -1;
  }

  .cart-gifting__colour-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dark-border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
  }

  .cart-gifting__colour-card:has(.cart-gifting__input:checked) {
    border-color: var(--default-text-color);
  }

  /* The grey slot spans the full card width and is rounded on all four corners —
     the card's own overflow:hidden only clips the top two, so the bottom radius
     has to be declared here or the slot ends square against the label row. */
  .cart-gifting__colour-media {
    display: block;
    padding: var(--padding-lg);
    /* Figma image-slot grey (node 10562:223180) — no theme token equivalent. */
    background-color: #e2e0df;
    border-radius: 8px;
  }

  /* `contain` keeps the whole box in frame. `cover` fills the slot but crops the
     lid off the open-box shots, which are squarer than the pre-cropped landscape
     asset in Figma; the letterboxing falls back to the slot grey above, which
     matches the backdrop baked into the photos, so the seam is invisible. */
  .cart-gifting__colour-media img,
  .cart-gifting__colour-media svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--gift-box-media-ratio);
    object-fit: contain;
  }

  /* Placeholder (no image yet) holds the same slot ratio so cards don't
     collapse until a variant image is added. */
  .cart-gifting__colour-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--gift-box-media-ratio);
    background-color: var(--dark-border-color);
  }

  .cart-gifting__check-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-lg);
  }

  /* Size rows */
  .cart-gifting__size-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .cart-gifting__size-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-lg);
    background-color: var(--color-white);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
  }

  .cart-gifting__size-row:has(.cart-gifting__input:checked) {
    border-color: var(--default-text-color);
  }

  /* Figma has every checkbox label at P2 - Bold (weight 500); only the bracketed
     size dimensions drop back to P2 - Regular. */
  .cart-gifting__check-label {
    color: var(--default-text-color);
    font-weight: 500;
  }

  .cart-gifting__size-dims {
    font-weight: 400;
  }

  /* Message fields. The label -> content step is 12px like the legends above
     (Pastel #33) while the field groups stay 16px apart, so the section gap is
     declared per child rather than once on the container. */
  .cart-gifting__message {
    gap: 0;
  }

  .cart-gifting__label--message {
    margin-bottom: var(--spacing-exact-12);
  }

  .cart-gifting__field-group + .cart-gifting__field-group,
  .cart-gifting__leave-blank {
    margin-block-start: var(--gap-lg);
  }

  .cart-gifting__field-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .cart-gifting__field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-gifting__field-head label {
    font-weight: 500;
    color: var(--default-text-color);
  }

  .cart-gifting__counter {
    color: var(--color-blue-70);
  }

  .cart-gifting__field {
    width: 100%;
    min-height: 47px;
    padding: var(--padding-md) var(--padding-lg);
    background-color: var(--color-white);
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    color: var(--default-text-color);
    resize: none;
  }

  .cart-gifting__field::placeholder {
    color: var(--grey-color);
  }

  .cart-gifting__field--area {
    min-height: 130px;
  }

  .cart-gifting__field:disabled {
    opacity: 0.6;
  }

  .cart-gifting__leave-blank {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    cursor: pointer;
  }

  /* Footer */
  .cart-gifting__footer {
    background-color: var(--body-bg-color);
    position: sticky;
    bottom: 0;
    padding: var(--padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .cart-gifting__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: var(--padding-md) var(--padding-lg);
    background-color: var(--default-text-color);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size--sm);
  }

  .cart-gifting__add[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  .cart-gifting__error {
    color: var(--color-error);
  }

  .cart-gifting__error[hidden] {
    display: none;
  }
/* END_SNIPPET:cart-gifting-panel */

/* START_SNIPPET:cart-icon-component (INDEX:201) */
/* Cart badge invisible and takes no space when cart is empty */
  cart-icon:has(.cart-bubble__text-count:empty) .cart-bubble {
    display: none;
  }

  /* Transparent header: white color for cart icon when at top */
  .header[transparent]:not([data-sticky-state='active']) cart-icon .svg-wrapper,
  .header[transparent='always'][data-sticky-state='active'] cart-icon .svg-wrapper {
    color: #ffffff;
  }

  /* Transparent header: inherit color when scrolling down or menu is open */
  .header[transparent][data-sticky-state='active']:not([transparent='always']) cart-icon .svg-wrapper,
  .header[transparent]:has(.mega-menu__list:hover) cart-icon .svg-wrapper,
  .header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])) cart-icon .svg-wrapper,
  .header[transparent]:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) cart-icon .svg-wrapper,
  .header[transparent]:has(.menu-dropdown:hover) cart-icon .svg-wrapper {
    color: currentcolor;
  }
/* END_SNIPPET:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:204) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  /* Pastel #25 ([784-1023] should follow mobile design): the `@container
     cart-items (min-width: 720px)` rule near the bottom of this file switches
     the line item to the wide four-column table. That is the cart PAGE layout —
     the drawer is full-bleed below 1024px, so its items container clears 720px
     from roughly a 780px viewport and the drawer flipped to the desktop row in
     the middle of the mobile range. Renaming the drawer's container leaves that
     query with no matching ancestor, so the drawer keeps the mobile stack at
     every width (at 1024px+ the drawer is 538px and never matched anyway). */
  .cart-drawer .cart-items {
    container-name: cart-items-drawer;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__table {
    width: 100%;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    grid-template-areas:
      'media details price'
      'media error error'
      'media quantity quantity';
    column-gap: var(--gap-lg);
    row-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--padding-lg);
    margin-bottom: var(--margin-lg);
  }

  @media screen and (min-width: 600px) {
    .cart-items__table-row {
      grid-template-columns: 120px minmax(0, 1fr) auto;
    }
  }

  /* Drawer-only geometry — the cart page keeps the values above. */

  /* Pastel #2: 12px between the media and the details column below 1024px. */
  .cart-drawer .cart-items__table-row {
    column-gap: var(--spacing-exact-12);
  }

  @media screen and (min-width: 1024px) {
    .cart-drawer .cart-items__table-row {
      column-gap: var(--gap-lg);
    }
  }

  /* Pastel #22: 16px between the details column and the quantity row. The error
     cell keeps its own grid row even while `.!hidden` collapses it to zero
     height, so the gaps above AND below it stack into the doubled step the
     comment asked to remove. Halving the row gap while no error is showing
     leaves the one visible step at 16px. */
  .cart-drawer .cart-items__table-row {
    row-gap: 16px;
  }

  .cart-drawer .cart-items__table-row:not(:has(.cart-items__error:not(.\!hidden))) {
    row-gap: 8px;
  }


  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(0.3s * 2) cubic-bezier(0.4,0,0.2,1) forwards;
    animation-delay: 0.3s;
  }

  @keyframes removeRow {
    0% {
      height: 4rem;
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--dark-border-color);
    margin-bottom: var(--margin-lg);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-child {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: var(--color-blue-70);
  }

  /* .cart-items__details > * + *, */
  .cart-items__bundle li {
    margin-block-start: 0.25rem;
  }

  .cart-items__details * {
    /* font-size: 0.875rem; */
  }

  .cart-items__details a {
    text-decoration: none;
  }

  /* Pastel #6: 2px between each line of the details column. `.cart-items__table *`
     zeroes every margin, so the steps have to be re-declared here. */
  .cart-items__vendor + p,
  .cart-items__details .cart-items__variants {
    margin-block-start: 2px;
  }

  .cart-items__vendor {
    /* font-size: var(--font-size--sm); */
    font-weight: 500;
  }

  .cart-items__vendor.product-eyebrow {
    display: flex;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
  }

  .cart-items__vendor .product-eyebrow__divider {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--color-black);
    flex-shrink: 0;
  }
  .cart-items__title {
    /* font-size: var(--font-size--sm); */
    font-weight: 500;
    color: var(--default-text-color);
    text-transform: none;
  }

  .cart-items__unit-price {
    font-size: var(--font-size--sm);
    color: var(--default-text-color);
  }

  .cart-items__unit-price .compare-at-price {
    color: var(--grey-color);
    margin-inline-start: var(--margin-2xs);
  }

  /* White Coat — drawer price parity (Figma): one price block top-right, red sale
     over a struck compare-at. Scoped to .cart-drawer so the cart page is unaffected. */
  .cart-items__price-compare {
    display: none;
  }

  .cart-drawer .cart-items__unit-price {
    display: none;
  }

  .cart-drawer .cart-items__price-compare {
    display: block;
    color: #BEC5CD;
    text-decoration: line-through;
    /* font-size: var(--font-size--xs); */
    font-weight: 400;
  }

  .cart-drawer .cart-items__price-value--sale {
    color: var(--color-error);
  }

  .cart-items__variant {
    display: inline-block;
  }

  .cart-items__variants {
    color: var(--color-blue-70);
  }

  .cart-items__variants dt,
  .cart-items__variants dd {
    font-size: inherit;
  }

  /* HARDCODED: 12px — variant line at the P3 size on every tier (Figma); the
     <dd> inside would otherwise pick up the default paragraph size */
  .cart-drawer .cart-items__variant,
  .cart-drawer .cart-items__variant dd,
  .cart-drawer .cart-bundle-item__variant {
    font-size: 12px;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    width: 100%;
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    flex: 0 1 6rem;
    font-size: 0.875rem;
    height: auto;
    border-radius: 4px;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--default-text-color);
    width: 16px;
    height: 24px;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    min-height: 0;
  }

  .cart-items__remove .svg-wrapper,
  .cart-items__remove svg {
    width: 16px;
    height: 16px;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: fit-content;
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--default-text-color);
  }

  /* Pastel #5: current / sale price is P2 at weight 500. The `.p2` preset sets
     weight 400 on the value itself, which beat the inherited 500 on the cell. */
  .cart-items__price-value {
    font-weight: 500;
  }

  .cart-items__price-unit {
    font-size: 0.75rem;
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: 120 / 163;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--style-border-radius-sm, 8px);
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: 1rem;
    padding-inline: 3rem;
    padding-block: 1rem;
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: 0.5rem;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1),
      transform 0.3s cubic-bezier(0.4,0,0.2,1);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: 0.875rem;
    padding-block: 0.25rem;
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin-inline: 0.125rem 0.5rem;
    margin-block-start: 0.125rem;
  }

  @container cart-items (min-width: 720px) {
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(6rem, auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: 44px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
  }

  .cart__original-total-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: 0.25rem;

    &:has(.cart__installments) {
      row-gap: 0.5rem;
    }
  }

  .cart__original-total-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 1024px) {
      padding-block-start: 0;
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: 0.75rem;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, 55px, 55px);
    padding-inline: 3rem;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: 4px;
  }

  .cart-note {
    width: 100%;
  }

  .cart-note__inner {
    padding-block: 0.25rem 0.75rem;
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgba(17,17,17,0.55);
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .cart-note__instructions {
    color: #111111;
    background-color: #ffffff;
    border-width: 1px;
    border-color: #cccccc;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: 0.875rem;
    padding: max(4px, calc(4px * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: 1rem;
    width: 1rem;
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  /* Pastel #34: no leading margin — the property lines read as one block with
     the variant line above them. */
  .cart-items__properties {
    display: block;
    margin-block-start: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
  }

  .cart-items__preorder-badge {
    display: inline-flex;
    align-items: center;
    margin-block-start: var(--margin-2xs);
    padding: var(--padding-3xs) var(--padding-xs);
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    color: var(--default-text-color);
    white-space: nowrap;
  }

  /* White Coat — personalisation roll-up inside a base cart item (Figma node
     10562:221223 — flush left, no divider rules between groups, title and
     detail lines share one colour and differ only by font-weight). */
  .cart-item__pers {
    /* Pastel #14: 12px under the variant line. */
    margin-block-start: var(--spacing-exact-12);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cart-item__pers[hidden] {
    display: none;
  }

  .cart-item__pers-title {
    font-weight: 500;
    color: var(--color-blue-70);
  }

  .cart-item__pers-line {
    color: var(--color-blue-70);
  }

  .cart-item__pers-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs); /* Figma: 4px between the icon and the label */
    /* Pastel #16: 4px between the last personalisation line and the toggle. */
    margin-block-start: var(--padding-2xs);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    cursor: pointer;
    color: var(--default-text-color);
    min-height: 0;
    white-space: nowrap;
  }

  /* Leading 12px plus/minus glyph (designer SVG): plus when collapsed (Show),
     minus when expanded (Hide) — the vertical bar drops out, keyed on
     aria-expanded, which cart-bundle-actions.js already flips. */
  .cart-item__pers-toggle-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    text-decoration: none;
  }

  .cart-item__pers-toggle-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    display: block;
  }

  .cart-item__pers-toggle-bar {
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
  }

  .cart-item__pers-toggle[aria-expanded='true'] .cart-item__pers-toggle-bar {
    opacity: 0;
  }

  /* ====================================================================== */
  /* White Coat — bundle composite row                                      */
  /* ====================================================================== */

  /* Break the composite row out of the grid layout used by normal rows. */
  .cart-bundle-item-row,
  .cart-bundle-item-row > td {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Pastel #23: 16px below a bundle row on mobile, 20px from 1024px. */
  .cart-bundle-item-row {
    margin-bottom: var(--margin-lg);
  }

  @media screen and (min-width: 1024px) {
    .cart-bundle-item-row {
      margin-bottom: 20px;
    }
  }

  .cart-bundle-item {
    /* Scoped aliases onto the host brand tokens, kept so the rules below stay
       DRY. Radii: --wc-radius (image/body 8px), --wc-radius-sm (buttons 4px),
       --wc-radius-xs (badge 2px) — no exact token on the theme radius scale. */
    --wc-navy: var(--default-text-color);
    --wc-blue-70: var(--color-blue-70);
    --wc-blue-20: var(--dark-border-color);
    --wc-blue-15: var(--light-border-color);
    --wc-radius: 8px;
    --wc-radius-sm: 4px;
    --wc-radius-xs: 2px;

    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  /* (a) Header — transparent row on the drawer background ---------------- */
  .cart-bundle-item__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  @media screen and (min-width: 1024px) {
    .cart-bundle-item__header {
      gap: var(--gap-lg);
    }
  }

  .cart-bundle-item__media {
    flex: 0 0 auto;
    display: block;
    width: 5rem; /* 80px */
    aspect-ratio: 120 / 163;
    border-radius: var(--wc-radius);
    overflow: hidden;
    background: var(--wc-blue-15);
  }

  @media screen and (min-width: 600px) {
    .cart-bundle-item__media {
      width: 7.5rem; /* 120px */
    }
  }

  .cart-bundle-item__media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-bundle-item__info {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gap-lg);
  }

  .cart-bundle-item__info-top {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xl);
  }

  .cart-bundle-item__titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
  }

  .cart-bundle-item__category {
    /* font-size: var(--font-size--xs); */
    font-weight: 500;
    color: var(--wc-navy);
  }

  .cart-bundle-item__vendor {
    font-weight: 500;
    color: var(--wc-navy);
  }

  .cart-bundle-item__vendor.product-eyebrow {
    display: flex;
    align-items: center;
    /* HARDCODED: spec calls for 4px; no exact gap token */
    gap: 0.25rem;
  }

  .cart-bundle-item__vendor .product-eyebrow__divider {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--color-black);
    flex-shrink: 0;
  }

  .cart-bundle-item__title {
    /* font-size: var(--font-size--sm); */
    font-weight: 500;
    color: var(--wc-navy);
    text-decoration: none;
  }

  .cart-bundle-item__variant {
    /* font-size: var(--font-size--xs); */
    color: var(--wc-blue-70);
  }

  .cart-bundle-item__price {
    flex: 0 0 auto;
    /* font-size: var(--font-size--sm); */
    font-weight: 500;
    color: var(--wc-navy);
    white-space: nowrap;
  }

  .cart-bundle-item__info-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-xs);
  }

  .cart-bundle-item__stepper {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    border: 1px solid var(--wc-blue-20);
    border-radius: var(--wc-radius-sm);
    overflow: hidden;
  }

  /* Pastel #7: transparent fill (the white buttons made the middle cell read as
     a separate grey block) and the same 16px minus/plus marks the line-item
     quantity selector uses. */
  .cart-bundle-item__stepper-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--wc-navy);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    min-height: 0;
  }

  .cart-bundle-item__stepper-btn .svg-wrapper,
  .cart-bundle-item__stepper-btn svg {
    width: 16px;
    height: 16px;
  }

  .cart-bundle-item__stepper-btn:hover {
    background: var(--wc-blue-15);
  }

  .cart-bundle-item__qty {
    min-width: 2rem;
    text-align: center;
    /* font-size: var(--font-size--sm); */
    color: var(--wc-navy);
  }

  .cart-bundle-item__remove {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--wc-blue-70);
    /* width: 2rem; */
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 0;
    cursor: pointer;
  }

  .cart-bundle-item__remove .svg-wrapper,
  .cart-bundle-item__remove svg {
    width: 16px;
    height: 16px;
  }

  .cart-bundle-item__remove:hover {
    color: var(--wc-navy);
  }

  @media screen and (min-width: 1024px) {
    .cart-bundle-item__remove {
      /* width: 1rem; */
    }
  }

  /* (b) Includes toggle bar — navy, joins onto the white body below ------ */
  .cart-bundle-item__includes-toggle {
    display: flex;
    align-items: center;
    /* Pastel #9: 8px between the item count and the chevron. The label grows to
       fill, so this only ever shows up as the chip -> chevron step. */
    gap: var(--gap-xs);
    width: 100%;
    padding: 0.625rem var(--padding-lg); /* 10px / 16px */
    background: var(--wc-navy);
    border: none;
    border-radius: var(--wc-radius-sm);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    color: var(--color-white);
    min-height: 0;
  }

  .cart-bundle-item__includes-label {
    flex: 1 1 auto;
  }

  .cart-bundle-item__includes-chip {
    color: var(--wc-blue-15);
  }

  /* Pastel #8 / #10: was a rotated 8px square with 2px borders — the rotation
     put the visual mark off the text's centre line and the borders read heavy.
     A 16px SVG chevron centres on its own box and carries the theme's 1.2
     stroke; expanded flips it rather than re-rotating a corner. */
  .cart-bundle-item__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--color-white);
    transition: transform var(--animation-speed-slow) var(--animation-easing);
  }

  .cart-bundle-item__chevron svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .cart-bundle-item__includes-toggle[aria-expanded='true'] .cart-bundle-item__chevron {
    transform: rotate(180deg);
  }

  /* (c) Components list — white body, rounded bottom --------------------- */
  .cart-bundle-item__includes-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    /* Pastel #11 */
    padding: var(--spacing-exact-12);
    background: var(--color-white);
    border-radius: 0 0 var(--wc-radius) var(--wc-radius);
  }

  .cart-bundle-item__includes-body[hidden] {
    display: none;
  }

  /* Body sits flush under the toggle bar — cancels the .cart-bundle-item
     column gap for this pair only, leaving the header gap intact. */
  .cart-bundle-item__includes-toggle + .cart-bundle-item__includes-body {
    margin-block-start: calc(-1 * var(--gap-lg));
  }

  .cart-bundle-item__component {
    display: flex;
    align-items: flex-start;
    /* Pastel #12: 12px between the badge, the image and the info column. */
    gap: var(--spacing-exact-12);
  }

  .cart-bundle-item__component + .cart-bundle-item__component {
    padding-block-start: var(--padding-lg);
    border-block-start: 1px solid var(--wc-blue-20);
  }

  .cart-bundle-item__component-badge {
    flex: 0 0 auto;
    width: 1.125rem; /* 18px */
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wc-blue-20);
    border-radius: var(--wc-radius-xs);
    background: var(--color-white);
    color: var(--wc-navy);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1;
  }

  /* Pastel #19: 48px on the mobile tier (the drawer is only ~351px wide on a
     phone), stepping back to the Figma 64px from the 600px tier up. Height
     follows the 64:87 portrait ratio. */
  .cart-bundle-item__component-media {
    flex: 0 0 auto;
    width: 3rem; /* 48px */
    height: 4.078125rem; /* 65.25px, keeps 64:87 */
    border-radius: var(--wc-radius-sm);
    overflow: hidden;
    background: var(--wc-blue-15);
  }

  @media screen and (min-width: 600px) {
    .cart-bundle-item__component-media {
      width: 4rem; /* 64px */
      height: 5.4375rem; /* 87px */
    }
  }

  .cart-bundle-item__component-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Every step inside the info column is a different value, so the shared flex
     gap is dropped and each one is declared on the element that owns it:
       title  -> variant  0px   (Pastel #13 / #21 red)
       variant -> pers     12px  (Pastel #14)
       pers   -> toggle    4px   (Pastel #16)
       variant -> toggle   8px   when personalisation is collapsed (#21 blue) */
  .cart-bundle-item__component-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .cart-bundle-item__component-title {
    color: var(--wc-navy);
  }

  .cart-bundle-item__component-variant {
    color: var(--wc-blue-70);
    margin-block-start: 0;
  }

  /* Per-component personalisation block — flush, no left rule */
  .cart-bundle-item__pers {
    display: flex;
    flex-direction: column;
    /* Pastel #15 */
    gap: 6px;
    margin-block-start: var(--spacing-exact-12);
  }

  .cart-bundle-item__pers[hidden] {
    display: none;
  }

  /* Pastel #21: collapsed, the toggle follows the variant line directly at 8px. */
  .cart-bundle-item__pers[hidden] + .cart-bundle-item__pers-toggle {
    margin-block-start: var(--gap-xs);
  }

  .cart-bundle-item__pers-title {
    font-weight: 500;
    color: var(--wc-blue-70);
  }

  .cart-bundle-item__pers-line {
    color: var(--wc-blue-70);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .cart-bundle-item__pers-toggle {
    display: inline-flex;
    align-items: center;
    /* Pastel #17: 4px between the +/- mark and the label. */
    gap: var(--padding-2xs);
    /* Pastel #16 */
    margin-block-start: var(--padding-2xs);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    cursor: pointer;
    color: var(--wc-navy);
    min-height: 0;
  }

  /* Leading plus/minus glyph (designer SVG): plus when collapsed (Show), minus
     when expanded (Hide) — JS only flips aria-expanded on the button. */
  .cart-bundle-item__pers-toggle-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    text-decoration: none;
  }

  .cart-bundle-item__pers-toggle-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    display: block;
  }

  .cart-bundle-item__pers-toggle-bar {
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
  }

  .cart-bundle-item__pers-toggle[aria-expanded='true'] .cart-bundle-item__pers-toggle-bar {
    opacity: 0;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:205) */
.cart-actions {
    display: flex;
    flex-direction: column;
  }

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: 20px;
    border-block-start: 1px solid var(--dark-border-color);
    padding-block-start: 15px;
  }

  .cart__installments {
    color: red;
  }

  .cart__checkout-button.is-loading,
  .cart__checkout-button.is-loading:hover {
    cursor: wait;
    pointer-events: none;
    color: transparent;
    opacity: 1;
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
  }

  .cart__checkout-button.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: cart-checkout-spin 0.6s linear infinite;
  }

  @keyframes cart-checkout-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:category-carousel-css (INDEX:206) */
/* ============================================================
   CATEGORY CAROUSEL ("Shop by Category")
   Header (title + nav) above a Swiper track of image cards, each
   captioned with a text link. Mobile-first.
   ============================================================ */
.category-carousel {
  display: block;
  background-color: var(--category-carousel-bg, #f8f7f7);
  /* --carousel-gap must match spaceBetween in category-carousel.js */
  --carousel-pad: var(--container-padding-mobile);
  --carousel-gap: 12px;
  padding-inline: var(--carousel-pad);
  /* clips the bleeding slides at the viewport edge */
  overflow-x: clip;
}

.category-carousel__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ---------- Header: title + nav ---------- */
.category-carousel__header {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  justify-content: space-between;
}

.category-carousel__title {
  margin: 0;
  color: var(--default-text-color);
}

.category-carousel__nav {
  display: none;
  gap: var(--gap-2xs);
  flex-shrink: 0;
}

/* HARDCODED: 32px square, 4px radius — Figma square-button; no matching tokens */
.category-carousel__btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: var(--padding-xs);
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--default-text-color);
  background: transparent;
  color: var(--default-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--animation-values), border-color var(--animation-values);
}

.category-carousel__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.category-carousel__btn.swiper-button-disabled {
  cursor: default;
  border-color: var(--light-border-color);
  background: var(--light-border-color);
  color: var(--grey-color);
}

/* ---------- Track ---------- */
.category-carousel .swiper {
  width: 100%;
  /* off-track slides bleed past the container padding and peek from the
     section edge; the section's overflow-x: clip cuts them at the viewport */
  overflow: visible;
}

.category-carousel .swiper-slide {
  height: auto; /* let cards stretch to equal height */
  /* Whole cards fill the content column and the next card peeks from the
     viewport edge; --carousel-cards / --carousel-peek come from the
     per-instance style block below. Swiper runs slidesPerView: 'auto'. */
  /* width: calc(
    (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
    - var(--carousel-gap)
  ); */
  width: 198px;
}
@media screen and (min-width: 1024px){
  .category-carousel .swiper-slide {
    width: calc(
      (100% + var(--carousel-pad) - var(--carousel-peek)) / var(--carousel-cards)
      - var(--carousel-gap)
    );
  }
}

/* ---------- Card ---------- */
.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--dark-border-color);
  /* HARDCODED: 8px radius — Figma image-corner; no 8px token */
  border-radius: 0.5rem;
  overflow: hidden;
  background: #F8F7F7;
  text-decoration: none;
}

.category-card__image {
  aspect-ratio: 245 / 327;
  background: var(--light-border-color);
  overflow: hidden;
}

.category-card__image img,
.category-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Text link caption ---------- */
.category-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs); /* 4px */
  padding: var(--padding-lg); /* 16px */
  color: var(--default-text-color);
  font-weight: 500;
  transition: gap var(--animation-values);
}

.category-card:hover .category-card__link {
  gap: var(--padding-xs);
}

.category-card__link .svg-wrapper {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================
   DESKTOP (1024px)
   ============================================================ */
@media screen and (min-width: 1024px) {
  .category-carousel__nav {
    display: flex;
  }

  .category-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
    --carousel-gap: 20px; /* must match spaceBetween breakpoint in category-carousel.js */
  }

  .category-carousel__body {
    gap: var(--padding-2xl); /* 24px — the gap scale has no 24px step (--gap-2xl is 32px) */
  }
}

@media screen and (min-width: 1440px) {
  .category-carousel {
    --carousel-pad: var(--padding-page-margin-desktop);
  }
}

@media screen and (min-width: 1920px) {
  .category-carousel {
    --carousel-pad: var(--container-padding-2xl);
  }
}
/* END_SNIPPET:category-carousel-css */

/* START_SNIPPET:contact-form (INDEX:211) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 1024px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-foreground);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border: 1px solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_SNIPPET:contact-form */

/* START_SNIPPET:divider (INDEX:213) */
.divider {
    width: 100%;
    height: var(--divider-border-thickness);
    background-color: var(--divider-border-color);
    display: block;
  }

  .divider.el-spacing {
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:dropdown-localization (INDEX:215) */
/* Tucks the localization picker away on mobile and tablet, matching the mobile drawer layout; only shows at the true desktop breakpoint */
  @media screen and (max-width: 1199px) {
    .dropdown-localization--show-on-desktop {
      display: none;
    }
  }

  /* HARDCODED: 14px — desktop currency selector (Figma); the P2 preset is 13px until 1440px */
  @media screen and (min-width: 1200px) {
    .dropdown-localization .dropdown-localization__button {
      font-size: 14px;
    }
  }
/* END_SNIPPET:dropdown-localization */

/* START_SNIPPET:facets-actions (INDEX:217) */
/* Facets - Actions */
  .facets__actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 1024px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 1024px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 1024px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 1024px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 1024px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      --button-color: var(--color-primary);

      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 1024px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 1024px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      background-color: transparent;
      position: static;
      transform: none;
    }
  }

  @starting-style {
    .facets__clear-all.active {
      opacity: 0;
      transform: translateY(100%);
    }

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 1024px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:218) */
/* Facets - Remove buttons */
  .facets-remove {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;

    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 1024px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper {
      flex-shrink: 0;
    }

    /* Pastel #7: 8x8 mark — .svg-wrapper--smaller's --icon-size-2xs renders
       at ~9.6px, which read oversized inside the pill. */
    .svg-wrapper--smaller,
    .svg-wrapper--smaller svg {
      width: 8px;
      height: 8px;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:filters-toggle (INDEX:219) */
/* Facets - Toggle */
  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  /* Filter count */
  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 1023px) {
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }
/* END_SNIPPET:filters-toggle */

/* START_SNIPPET:footer-accordion (INDEX:221) */
.footer__nav {
    width: 100%;
    color: var(--color-white);
  }

  .footer__nav-item .footer__details {
    border-block-end: 1px solid var(--dark-border-color);
  }

  .footer__details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding-block: var(--padding-lg);
    cursor: pointer;
    list-style: none;
  }

  .footer__details-header::-webkit-details-marker {
    display: none;
  }

  .footer__nav-item:first-child .footer__details-header {
    padding-block-start: 0;
  }

  .footer__toggle-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .footer__toggle-icon--minus {
    display: none;
  }

  .footer__details[open] .footer__toggle-icon--minus {
    display: flex;
  }

  .footer__details[open] .footer__toggle-icon--plus {
    display: none;
  }

  /* .footer__details-content carries `p2` in the markup: the theme's default
     typography rule targets bare `div`, which would otherwise reset this
     subtree to P1/16px. */
  .footer__details-content {
    
    padding-block-end: var(--padding-xl);
  }

  .footer__nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
  }

  .footer__nav-link-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer__nav-link {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--animation-values);
  }

  .footer__nav-link:hover {
    opacity: var(--opacity-70);
  }

  @media screen and (min-width: 1024px) {
    .footer__nav {
      grid-column: span 4;
      display: grid;
      grid-template-columns: subgrid;
    }

    .footer__nav-item .footer__details {
      border-block-end: none;
    }

    .footer__nav-item .footer__details-content {
      display: block !important;
    }

    .footer__nav-item .footer__toggle-icon {
      display: none !important;
    }

    .footer__nav-item .footer__details-header {
      pointer-events: none;
      cursor: default;
      min-height: unset;
      padding-block: 0;
      margin-block-end: var(--margin-lg);
    }

    .footer__details-content {
      padding-block-start: 0;
      padding-block-end: 0;
    }
  }
/* END_SNIPPET:footer-accordion */

/* START_SNIPPET:free-shipping-info (INDEX:223) */
.free-shipping-line p {
    color: var(--color-blue-70);
}
.free-shipping-line .free-shipping-line__track {
    height: 4px;
    margin-block-start: var(--margin-xs);
    /* Pastel #40: the unfilled track is Blue-15 (#E8EDF2), not Blue-20. */
    background-color: var(--light-border-color);
    border-radius: 5px;
}
.free-shipping-line .free-shipping-line__fill {
    display: block;
    height: 4px;
    background-color: var(--default-text-color);
    border-radius: 5px;
    transition: width 1s var(--animation-easing);
}
/* END_SNIPPET:free-shipping-info */

/* START_SNIPPET:gift-recipient-form (INDEX:225) */
.gift-recipient-form {
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
      width: 100%;
      margin-block-end: var(--padding-2xl);
      margin-top: 8px;
    }

    @media screen and (min-width: 1024px) {
      .gift-recipient-form {
        margin-block-end: var(--padding-4xl);
        margin-top: 24px;
      }

      .buy-buttons-block:has(.gift-recipient-form) {
        margin-block-start: calc(-1 * var(--gap, 12px));
      }
    }

    .gift-recipient-form__field-group {
      display: flex;
      flex-direction: column;
      gap: var(--gap-xs);
    }

    .gift-recipient-form__field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .gift-recipient-form__field-head label {
      font-weight: 500;
      color: var(--default-text-color);
    }

    .gift-recipient-form__counter {
      color: var(--color-blue-70);
    }

    .gift-recipient-form__field {
      width: 100%;
      min-height: 2.9375rem;
      padding-block: var(--padding-md);
      padding-inline: var(--padding-lg);
      background-color: var(--body-bg-color);
      border: var(--style-border-width) solid var(--dark-border-color);
      border-radius: var(--style-border-radius-xs);
      color: var(--default-text-color);
      resize: none;
    }

    .gift-recipient-form__field::placeholder {
      color: var(--grey-color);
    }

    .gift-recipient-form__field--area {
      min-height: 8.125rem;
    }

    .gift-recipient-form__field:disabled {
      opacity: var(--opacity-60);
    }

    .gift-recipient-form__field[aria-invalid='true'] {
      border-color: var(--color-error);
    }

    .gift-recipient-form__error {
      color: var(--color-error);
    }

    .gift-recipient-form__error[hidden] {
      display: none;
    }

    /* "Leave Blank" + its (i) and callout (the callout opens above the row). */
    .gift-recipient-form__leave-blank-row {
      position: relative;
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    /* Same glyph and size as the personalisation panels' .pers-panel__trigger-info. */
    .gift-recipient-form__info {
      display: inline-flex;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }

    .gift-recipient-form__info svg {
      width: 100%;
      height: 100%;
    }

    /* Same look as the personalisation info callout (snippets/pers-info-popup.liquid). */
    .gift-recipient-form__info-popup {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      z-index: var(--layer-overlay);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs, 0.5rem);
      width: 260px;
      max-width: 100%;
      padding: var(--spacing-exact-12, 0.75rem) var(--padding-lg, 1rem);
      background: var(--body-bg-color);
      border: 1px solid var(--dark-border-color);
      border-radius: var(--style-border-radius-button, 0.25rem);
    }

    .gift-recipient-form__info-popup[hidden] {
      display: none;
    }

    .gift-recipient-form__info-text {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      color: var(--default-text-color);
    }

    .gift-recipient-form__info-close {
      flex-shrink: 0;
      margin-top: 2px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--default-text-color);
      line-height: 0;
    }

    .gift-recipient-form__info-close .svg-wrapper,
    .gift-recipient-form__info-close svg {
      display: block;
      width: 12px;
      height: 12px;
    }

    .gift-recipient-form__leave-blank {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
      cursor: pointer;
    }

    .gift-recipient-form__checkbox-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .gift-recipient-form__checkbox {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border: var(--style-border-width) solid var(--dark-border-color);
      border-radius: var(--style-border-radius-xs);
      background-color: var(--color-white);
    }

    .gift-recipient-form__checkbox-input:checked + .gift-recipient-form__checkbox {
      border-color: var(--default-text-color);
    }

    .gift-recipient-form__checkbox-input:checked + .gift-recipient-form__checkbox::after {
      content: '';
      width: 0.53125rem;
      height: 0.53125rem;
      background-color: var(--default-text-color);
    }
/* END_SNIPPET:gift-recipient-form */

/* START_SNIPPET:group (INDEX:226) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:227) */
/* Compound selector (.cart-drawer__dialog.dialog-modal) so these win over the
     base .dialog-modal — which at >=1024px sets `position: static; min-height: 500px`
     and would otherwise drop the drawer into margin:auto centering (floating
     left-of-centre) instead of anchoring it to the right edge.

     The cart drawer is NOT a header component: it switches at the global 1024px
     desktop breakpoint, not the 1200px navbar breakpoint, even though its CSS
     lives in this file alongside the header icon row. */
  .cart-drawer .cart-drawer__dialog.dialog-modal {
    /* Mobile (<1024px): floating card inset 12px on every side with 4px corners
       (Figma). Explicit longhands + component-ancestor specificity (0,3,0) to beat
       the base .dialog-modal, which at >=1024px forces `position: static;
       min-height: 500px` and drops the drawer into margin:auto centring (floating
       left-of-centre) instead of anchoring to the right edge. */
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 4px;
    width: auto;
    max-width: calc(100vw - 24px);
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
  }

  /* Desktop (>=1024px): floating card inset 30px (Figma padding/section/xs) with an
     8px radius. This must stay at 1024px, not 1200px — this rule set outranks the
     inline style block in cart-drawer.liquid (0,3,0 vs 0,2,0), so gating it at
     1200px left 1024–1199px with `border-radius: 0` and no `overflow: hidden`:
     square corners and content spilling past the card edge. */
  @media screen and (min-width: 1024px) {
    .cart-drawer .cart-drawer__dialog.dialog-modal {
      position: fixed;
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: auto;
      /* Figma cart drawer content card = 538px (498px inner + 20px gutters). */
      width: 538px;
      height: auto;
      min-height: 0;
      max-width: calc(100vw - 60px);
      border-radius: var(--style-border-radius-sm, 8px);
      overflow: hidden;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
  }

  .cart-drawer__content {
    padding: 0;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: left;
    min-height: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dark-border-color);
    margin-bottom: 20px;
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black 12px);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
    border-block-start: 1px solid var(--dark-border-color);
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  header-actions {
    display: flex;
    align-items: center;
    /* HARDCODED: 12px below 1200px — no gap token equals 12px. */
    gap: 12px;

    @media screen and (min-width: 1200px) {
      gap: var(--gap-xs);
      justify-self: flex-end;
    }
  }

  /* Wishlist link in the header icon row — desktop only (1200px+).
     Compound selector (.header-actions__action.header-actions__action--wishlist)
     so this reliably beats .header-actions__action's `display: flex` — both are
     single-class selectors of equal specificity, so without the compound form
     the winner depends on source order instead of intent. */
  .header-actions__action.header-actions__action--wishlist {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .header-actions__action.header-actions__action--wishlist {
      display: flex;
    }
  }

  .header-actions__action {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-actions__action .svg-wrapper {
    height: 32px;
    width: 32px;
  }

  /* Figma / Yu Qi feedback: 16px glyph inside the 32px wrapper, i.e. 8px of
     padding all round. The wrapper is a centred flex box, so the 8px is the
     leftover space — do not add explicit padding on top of this. */
  .header-actions__action .svg-wrapper svg {
    width: 16px;
    height: 16px;
  }

  .header-actions__cart-icon {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .header-actions__cart-icon .cart-bubble {
    margin-inline-start: -3px;
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:228) */
/* Mobile drawer dropdown container: full-height slide-in */
  .menu-drawer__menu-dropdown-container {
    position: absolute;
    inset: 0;
    block-size: 100%;
    transform: translateX(-12%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--animation-speed, 300ms) var(--animation-easing, ease),
      opacity var(--animation-speed, 300ms) var(--animation-easing, ease);
    will-change: transform, opacity;
    z-index: var(--layer-overlay, 10);
    background: var(--body-bg-color, #ffffff);
    display: flex;
    flex-direction: column;
    padding: var(--padding-2xl) var(--padding-lg) var(--padding-lg); /* Figma: 16px bottom */
    /* HARDCODED: 32px row gap between the back button and the first nav link
       (Yu Qi feedback) — --gap-3xl is 48px, --gap-2xl 32px is the rem token. */
    gap: var(--gap-2xl);
    overflow: hidden;
  }

  .menu-drawer__menu-dropdown-container .menu-drawer__back-button {
    display: none;
    flex-shrink: 0;
    padding: 0;
    width: auto;
    background: transparent;
  }

  .menu-drawer__menu-dropdown-container .shopify-block {
    position: static;
    flex: 1;
    overflow-y: auto;
  }

  .menu-drawer__menu-dropdown-container.is-active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto;
  }

  .menu-drawer__menu-dropdown-container.is-active .menu-drawer__back-button {
    display: flex;
  }

  /* Slide each panel in on every level change. The container transition above
     only runs on the first push (L1 -> L2); L2 -> L3 and the way back swap
     panel display with the container already active, so they animate here. */
  .menu-drawer__panel-enter {
    animation: menu-drawer-panel-in var(--animation-values-slow) both;
  }

  .menu-drawer__panel-enter--back {
    animation-name: menu-drawer-panel-in-back;
  }

  @keyframes menu-drawer-panel-in {
    from {
      transform: translateX(12%);
      opacity: 0;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  @keyframes menu-drawer-panel-in-back {
    from {
      transform: translateX(-12%);
      opacity: 0;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-drawer__panel-enter {
      animation: none;
    }
  }

  /* Hide forward caret by default; JS reveals when submenu exists */
  .menu-drawer__menu .icon-caret--forward {
    display: none;
  }

  /* Caret icon sizing — overrides the blanket .menu-drawer svg rule */
  .menu-drawer__menu .icon-caret--forward svg,
  .menu-drawer__back-button .icon-caret--backward svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /*
   * base.css assumes the caret SVG is a downward chevron (v) and rotates to reposition it.
   * Our inline SVG is already right-facing (>), so we override those rotations here.
   */
  .menu-drawer .icon-caret--forward svg {
    transform: none;
  }

  /* Backward caret: flip the right-facing chevron to point left */
  .menu-drawer .icon-caret--backward svg {
    transform: rotate(180deg);
  }

  /* Panels take their natural height: a forced 100% min-height plus the
     container padding made every panel scroll even when its content fit. */
  .header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 1200px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    border-radius: 4px;
    flex-shrink: 0;
  }

  /* Transparent header: white color for menu drawer icon when at top */
  .header[transparent]:not([data-sticky-state='active']) .menu-drawer-container .header__icon--summary,
  .header[transparent='always'][data-sticky-state='active'] .menu-drawer-container .header__icon--summary {
    color: #ffffff;
  }

  /* Transparent header: inherit color when scrolling down or menu is open */
  .header[transparent][data-sticky-state='active']:not([transparent='always']) .menu-drawer-container .header__icon--summary,
  .header[transparent]:has(.mega-menu__list:hover) .menu-drawer-container .header__icon--summary,
  .header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])) .menu-drawer-container .header__icon--summary,
  .header[transparent]:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) .menu-drawer-container .header__icon--summary {
    color: inherit;
  }

  /* Both icons fill the same 32×32 space; opacity drives the crossfade */
  .menu-drawer-container .header__icon--summary .header-drawer-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: auto;
    height: auto;
    transition: opacity var(--animation-speed-medium) var(--animation-easing),
                visibility var(--animation-speed-medium) var(--animation-easing);
  }

  /* The inline icons ship at 20px, which read oversized next to the 16px
     search / cart / account glyphs — the X most of all (Yu Qi feedback).
     Both states are sized here so open and closed stay identical. */
  .menu-drawer-container .header__icon--summary .header-drawer-icon svg {
    width: 16px;
    height: 16px;
  }

  /* Default: hamburger visible, X hidden */
  .menu-drawer-container .header-drawer-icon--open {
    opacity: 1;
    visibility: visible;
  }

  .menu-drawer-container .header-drawer-icon--close {
    opacity: 0;
    visibility: hidden;
  }

  /* Open state: crossfade to X — note: details IS .menu-drawer-container, so no space */
  details[open].menu-drawer-container .header-drawer-icon--open {
    opacity: 0;
    visibility: hidden;
  }

  details[open].menu-drawer-container .header-drawer-icon--close {
    opacity: 1;
    visibility: visible;
  }

  /* Open state: navy X on the bare nav bar — no filled container (Yu Qi feedback) */
  details[open].menu-drawer-container .header__icon--menu.header__icon--summary {
    background: transparent;
    color: var(--default-text-color);
  }

  /* Force navy on the close SVG regardless of SVG's own stroke attribute */
  details[open].menu-drawer-container .header-drawer-icon--close svg,
  details[open].menu-drawer-container .header-drawer-icon--close svg path,
  details[open].menu-drawer-container .header-drawer-icon--close svg line {
    stroke: var(--default-text-color);
  }

  /* Desktop: always show hamburger */
  @media screen and (min-width: 1200px) {
    details[open].menu-drawer-container .header-drawer-icon--open {
      opacity: 1;
      visibility: visible;
    }

    details[open].menu-drawer-container .header-drawer-icon--close {
      opacity: 0;
      visibility: hidden;
    }
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;
    /* Mobile: the 8px row gap plus the 4px inset of the 24px glyph inside its
       32px box gives the 12px Figma gap between the cart bubble and the X —
       no extra margin here. */

    @media screen and (min-width: 1200px) {
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xl);
    align-self: stretch;

    @media screen and (min-width: 1200px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__menu .menu-drawer__menu-item--mainlist {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 110%;
    color: var(--default-text-color);
    /* padding-block: var(--padding-md); */
  }


  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: calc(100svh - var(--header-card-bottom, var(--header-height)) - 12px - var(--padding-lg));
    width: auto;
    left: var(--padding-lg);
    right: var(--padding-lg);
    top: calc(var(--header-card-bottom, var(--header-height)) + 12px);
    z-index: var(--layer-menu-drawer);
    padding: var(--padding-2xl) var(--padding-lg) var(--padding-lg); /* Figma: 16px bottom */
    background-color: var(--body-bg-color);
    overflow: auto;
    display: flex;
    box-shadow: var(--shadow-drawer);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-2xl);
    border-radius: 4px;

    @media screen and (min-width: 1200px) {
      width: 25rem;
      right: auto;
    }

    .header__drawer--desktop & {
      height: calc(100svh - var(--header-card-bottom, var(--header-height)) - 8px - var(--padding-lg));
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgb(0 0 0 / var(--opacity-40));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: var(--layer-lowest);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 1200px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    list-style: none;
    padding-inline: 0;
    margin-inline: 0;
    margin-block-start: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-xl);
  }

  .menu-drawer__menu .menu-drawer__list-item {
    width: 100%;
    /* The list is spaced by the parent's row gap only; the inherited li
       margin-bottom added an uneven 6px to every item but the last. */
    margin-block-end: 0;
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__menu-item--mainlist {
    justify-content: space-between;
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    /* padding: var(--padding-2xs) 0; */
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .menu-drawer__close-button {
    display: none;
  }

  .menu-drawer__back-button {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    flex-shrink: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    color: var(--default-text-color);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }


  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    flex-shrink: 0;
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--body-bg-color);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .menu-drawer__back-button > .svg-wrapper svg {
    width: 16px;
    height: 16px;
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .menu-drawer__utility-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-md);
    align-self: stretch;
  }

  .menu-drawer__utility-link {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    text-decoration: none;
    color: var(--default-text-color);
  }

  /* HARDCODED: 14px — Figma utility icon size; no matching icon token */
  .menu-drawer__utility-link .svg-wrapper {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .menu-drawer__utility-link svg {
    width: 14px;
    height: 14px;
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* L3 accordion — a mega menu tab's panel (megamenu-links / megamenu-colours) opens
     in place directly under the tab instead of on its own level (header-drawer.js
     #toggleAccordion). Overrides the generic dropdown-container block rule, which would
     make the panel a separate scroll area. */
  .menu-drawer__menu-dropdown-container .menu-drawer__accordion-panel {
    flex: none;
    align-self: stretch;
    width: 100%;
    overflow: visible;
    margin-block: var(--padding-md) var(--padding-xs);
  }

  .menu-drawer__accordion-panel--enter {
    animation: menu-drawer-accordion-in var(--animation-values) both;
  }

  @keyframes menu-drawer-accordion-in {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-drawer__accordion-panel--enter {
      animation: none;
    }
  }

  /* Caret points down while the tab's panel is open */
  .menu-drawer .mega-nav-tab .mega-nav-tab__caret svg {
    transition: transform var(--animation-values);
  }

  .menu-drawer .mega-nav-tab[aria-expanded='true'] .mega-nav-tab__caret svg {
    transform: rotate(90deg);
  }

  /* L2 panel — sub-links of an L1 item (e.g. Shop → Featured/Women/Men/…) */
  .drawer-l2-panel {
    flex: 1;
    overflow-y: auto;
  }

  .drawer-l2__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-xl);
    align-self: stretch;
  }

  .drawer-l2__item {
    align-self: stretch;
    width: 100%;
  }

  .drawer-l2__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    text-decoration: none;
    color: var(--default-text-color);
  }

  .drawer-l2__link .icon-caret--forward {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .drawer-l2__link .icon-caret--forward svg {
    width: 20px;
    height: 20px;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:input-checkbox (INDEX:237) */
/* The container */
.input-checkbox {
  display: block;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.input-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.input-checkbox .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 16px;
  width: 16px;
  border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.input-checkbox:hover input ~ .checkmark {
  /* background-color: #ccc; */
}

/* When the checkbox is checked, add a blue background */
.input-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
  border: 1px solid #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.input-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.input-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.input-checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* END_SNIPPET:input-checkbox */

/* START_SNIPPET:input-radio (INDEX:240) */
.input-radio {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.input-radio .dot {
  position: absolute;
  top: 5px;
  left: 0;
  height: 16px;
  width: 16px;
  border-radius: 9999px;
  border: 1px solid #ccc;
}

.input-radio input:focus-visible ~ .dot {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

.input-radio input:checked ~ .dot {
  border-color: #2196F3;
}

.input-radio .dot:after {
  content: "";
  position: absolute;
  display: none;
}

.input-radio input:checked ~ .dot:after {
  display: block;
}

.input-radio .dot:after {
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #2196F3;
}

.input-radio input:disabled ~ .dot,
.input-radio input:disabled ~ .dot:after {
  opacity: 0.6;
}

.input-radio input:disabled ~ .dot {
  cursor: not-allowed;
}
/* END_SNIPPET:input-radio */

/* START_SNIPPET:input-select (INDEX:241) */
input-select { display:block; }
input-select .p1 { display:block; margin-bottom: 0.25rem; }
input-select .is-container { position: relative; }
input-select .is-native { position:absolute; inset:0; opacity:0; pointer-events:none; height:0; width:0; }
/* Match visual style of .input-single */
input-select .is-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem; /* same as .input-single */
  border: 1px solid #d1d5db; /* same as .input-single */
  border-radius: 0.375rem; /* same as .input-single */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* same as .input-single */
  background: #fff;
  color: #111;
  cursor: pointer;
}
input-select .is-trigger:focus {
  outline: 2px solid transparent; /* same as .input-single */
  outline-offset: 2px; /* same as .input-single */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); /* same as .input-single */
  border-color: #6366f1; /* same as .input-single */
}
input-select .is-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
input-select .is-caret { display:inline-flex; }
input-select .is-menu { position:absolute; z-index:20; top:100%; left:0; right:0; margin-top:0.25rem; background:#fff; border:1px solid rgba(0,0,0,0.15); border-radius:0.25rem; box-shadow:0 8px 24px rgba(0,0,0,0.12); max-height:16rem; overflow:auto; }
input-select .is-option { padding:0.5rem 0.75rem; cursor:pointer; }
input-select .is-option[aria-selected="true"], input-select .is-option:hover { background:#111; color:#fff; }
input-select .hidden { display:none; }
/* END_SNIPPET:input-select */

/* START_SNIPPET:input-single (INDEX:242) */
.input-single {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-single::placeholder {
  color: #9ca3af;
}

.input-single:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}
/* END_SNIPPET:input-single */

/* START_SNIPPET:input-switch (INDEX:243) */
.input-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.input-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.input-switch .track {
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background: #d1d5db;
  transition: background 150ms ease;
}

.input-switch .thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 150ms ease;
}

.input-switch input:checked ~ .track {
  background: #2196F3;
}

.input-switch input:checked ~ .thumb {
  transform: translateX(20px);
}

.input-switch input:focus-visible ~ .track {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-switch input:disabled ~ .track,
.input-switch input:disabled ~ .thumb {
  opacity: 0.6;
}

.input-switch input:disabled ~ .track {
  cursor: not-allowed;
}
/* END_SNIPPET:input-switch */

/* START_SNIPPET:input-textarea (INDEX:244) */
.input-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  resize: vertical;
}

.input-textarea::placeholder {
  color: #9ca3af;
}

.input-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

.input-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* END_SNIPPET:input-textarea */

/* START_SNIPPET:list-filter (INDEX:247) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    border-color: #000000;
    background-color: #f0f0f0;
  }

  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    background-color: #d0d0d0;
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
    color: #000000;
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(---pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color: var(--color-background);
      --pill-label-background-color: var(--color-foreground);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: none;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 1023px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 1024px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;

    &.variant-option--swatches-disabled,
    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;

    .variant-option--swatches-disabled &,
    .variant-option--swatches:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-highlight-stack);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .variant-option--images {
    position: relative;
  }

  .variant-option--images {
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    border-radius: var(--image-facet-border-radius);

    &:hover:not(:has(input:disabled)),
    &:has(input:checked) {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    &:has(input:disabled),
    &:has(input:disabled):hover {
      --image-facet-border-opacity: 0;

      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      img {
        opacity: var(--disabled-opacity);
      }

      input,
      label,
      .facets__image-label {
        cursor: not-allowed;
      }

      .facets__image-wrapper {
        border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
        border-radius: var(--image-facet-border-radius);
      }
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;

    .variant-option--images:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
    font-weight: 500;
  }

  .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:248) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 1024px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .drawer-localization__button .icon-flag,
  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-foreground);
  }

  /* Transparent header: navy color for localization button */
  .header[transparent]:not([data-sticky-state='active']) .dropdown-localization__button,
  .header[transparent='always'][data-sticky-state='active'] .dropdown-localization__button {
    color: var(--default-text-color);
  }

  /* Transparent header: inherit color when scrolling down or menu is open */
  .header[transparent][data-sticky-state='active']:not([transparent='always']) .dropdown-localization__button,
  .header[transparent]:has(.mega-menu__list:hover) .dropdown-localization__button,
  .header[transparent]:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])) .dropdown-localization__button,
  .header[transparent]:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) .dropdown-localization__button,
  /* Also inherit when hovering custom menu dropdown */
  .header[transparent]:has(.menu-dropdown:hover) .dropdown-localization__button {
    color: inherit;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }
  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: 1px solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--dark-border-color);
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 1024px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    background-color: var(--body-bg-color);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector,
  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:249) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 1024px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 1024px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 1023px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:255) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(
      var(--overlay-direction),
      var(--overlay-from) var(--overlay-fade-start),
      var(--overlay-to)
    );
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination (INDEX:256) */
.pagination-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-exact-12); /* Figma: 12px meta -> controls on mobile */
    margin-block: var(--spacing-exact-40) var(--margin-2xl); /* Figma: 40px above on mobile */
  }

  @media screen and (min-width: 1024px) {
    .pagination-nav {
      gap: var(--gap-lg);
      margin-block-start: var(--margin-5xl); /* Figma: 48px above on desktop */
    }
  }

  .pagination-nav__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    color: var(--color-blue-70);
  }

  .pagination-nav__meta-dash {
    display: inline-block;
    width: 30px;
    height: 1px; /* Figma: 1px rule */
    background-color: currentColor;
  }

  .pagination-nav__controls {
    display: flex;
    align-items: center;
    gap: var(--gap-xl);
  }

  .pagination-nav__list {
    display: flex;
    align-items: center;
    gap: var(--gap-xs); /* Figma: 8px between page numbers on mobile/tablet */
    margin: 0;
    padding: 0;

    @media screen and (min-width: 1024px) {
      gap: var(--spacing-exact-12); /* Figma: 12px between page numbers on desktop */
    }
  }

  .pagination-nav__item {
    margin: 0;
    display: flex;
  }

  .pagination-nav__page {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 6px var(--padding-xs) 7px var(--padding-xs);
    justify-content: center;
    align-items: center;
    gap: var(--padding-2xs);
    border-radius: 4px;
    /* Pastel #10: a page that can be navigated to is Navy outline + Navy
       number. Only the current page (--current, navy fill) and the ellipsis
       read differently; the disabled arrows keep their own muted treatment. */
    border: 1px solid var(--default-text-color);
    background-color: transparent;
    color: var(--default-text-color);
    font-size: var(--font-size--sm);
    line-height: 1.4;
    text-decoration: none;
    transition:
      background-color var(--animation-values),
      color var(--animation-values),
      border-color var(--animation-values);

    &:hover:not(.pagination-nav__page--current) {
      background-color: var(--default-text-color);
      border-color: transparent;
      color: var(--color-white);
    }
  }

  /* Figma: Navy fill, white number */
  .pagination-nav__page--current {
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);
    font-weight: 500;
  }

  .pagination-nav__ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    color: var(--color-blue-35);
  }

  .pagination-nav__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--default-text-color);
    color: var(--default-text-color);
    transition:
      background-color var(--animation-values),
      color var(--animation-values),
      border-color var(--animation-values);

    &:hover {
      background-color: var(--default-text-color);
      border-color: transparent;
      color: var(--color-white);
    }
  }

  .pagination-nav__arrow--disabled {
    border-color: transparent;
    background-color: var(--light-border-color);
    color: var(--color-blue-35);
    cursor: default;

    &:hover {
      background-color: var(--light-border-color);
      border-color: transparent;
      color: var(--color-blue-35);
    }
  }

  .pagination-nav__arrow .svg-wrapper svg {
    width: 16px;
    height: 16px;
  }

  /* The icon settings ship with stroke="#000000"; the button colour (Navy,
     Blue-35 when disabled) has to drive the stroke instead. */
  .pagination-nav__arrow .svg-wrapper svg :is(path, line, polyline) {
    stroke: currentColor;
  }
/* END_SNIPPET:pagination */

/* START_SNIPPET:pdp-breadcrumb (INDEX:257) */
.pdp-breadcrumb {
    /* Small gap below the in-flow (sticky) header — the old 84px assumed a
       fixed/overlay header, which this theme does not use, so it read as dead
       space below the nav. Matches Figma's breadcrumb sitting just under the nav. */
    padding: var(--spacing-exact-12) 0;
  }

  /* The container provides the gutter, so the breadcrumb carries no inline
     padding of its own — keeps "Shop All …" flush with the gallery's left
     edge. On desktop the top padding goes to 16px per design; the 12px bottom
     is unchanged. */
  @media screen and (min-width: 1024px) {
    .pdp-breadcrumb {
      padding-top: var(--padding-lg);
    }
  }
  .pdp-breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdp-breadcrumb__list-item {
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .pdp-breadcrumb__list-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .pdp-breadcrumb__list-item:last-child .pdp-breadcrumb__item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pdp-breadcrumb__separator {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #3F4855;
    flex-shrink: 0;
  }
  .pdp-breadcrumb__item {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #3F4855;
    text-decoration: underline;
    margin: 0;
    padding: 0;
  }
  .pdp-breadcrumb__item[aria-current="page"] {
    text-decoration: none;
  }

  @media screen and (min-width: 1024px) {
    .pdp-breadcrumb__list {
      flex-wrap: wrap;
    }
    .pdp-breadcrumb__list-item:last-child {
      overflow: visible;
    }
    .pdp-breadcrumb__list-item:last-child .pdp-breadcrumb__item {
      display: inline;
      overflow: visible;
      text-overflow: clip;
    }
  }
/* END_SNIPPET:pdp-breadcrumb */

/* START_SNIPPET:pdp-sticky-atc (INDEX:259) */
/* Sticky ATC bar */
  .pdp-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Below the header (--layer-sticky) and the mega-menu backdrop one step
       under it, so the navigation dropdown always paints over this bar. Above
       --layer-heightened so in-flow content (e.g. card reveal curtains) cannot
       paint over it while scrolling. */
    z-index: calc(var(--layer-sticky) - 2);
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .pdp-sticky-atc[hidden] { display: none; }
  .pdp-sticky-atc:not([hidden]) { display: block; }
  .pdp-sticky-atc.is-visible { transform: translateY(0); }

  .pdp-sticky-atc__inner {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .pdp-sticky-atc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    background: #06152B;
    color: #FEFEFE;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    font-family: var(--font-paragraph--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    min-height: 52px;
    transition: background 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pdp-sticky-atc__btn:hover:not(:disabled) { background: #1a2e4a; }
  .pdp-sticky-atc__btn:disabled {
    background: #9AA3AE;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pdp-sticky-atc__btn .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
  }
  .pdp-sticky-atc__btn.atc-added .add-to-cart-text { animation-name: atc-slide-out; }

  .pdp-sticky-atc__btn .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    opacity: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
  }
  .pdp-sticky-atc__btn.atc-added .add-to-cart-text--added { animation-name: atc-slide-in; }

  @keyframes atc-slide-in {
    from { opacity: 0; transform: translateY(0.5em); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes atc-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-1em); }
  }

  @media screen and (min-width: 1024px) {
    .pdp-sticky-atc { display: none !important; }
  }

  .pdp-sticky-atc,
  .pdp-sticky-card {
    --pdp-sticky-bar-height: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .pdp-sticky-card {
    position: fixed;
    left: var(--container-padding-mobile);
    right: var(--container-padding-mobile);
    bottom: calc(var(--pdp-sticky-bar-height) + var(--gap-xs));
    z-index: calc(var(--layer-sticky) - 2); /* same layer as the bar; see above */
    transform: translateY(calc(100% + var(--pdp-sticky-bar-height) + var(--gap-xs)));
    transition: transform var(--animation-values-slow);
  }

  @media screen and (min-width: 1024px) {
    .pdp-sticky-card {
      /* Aligned to the page gutter so the card's left edge lines up with the
         media column above it. */
      left: var(--container-padding-desktop);
      right: auto;
      bottom: 24px;
      /* HARDCODED: 330px (Pastel 92) — a fixed width, not the media column's. */
      width: 330px;
      transform: translateY(calc(100% + 24px));
    }
  }

  .pdp-sticky-card[hidden] { display: none; }
  .pdp-sticky-card:not([hidden]) { display: block; }
  .pdp-sticky-card.is-visible { transform: translateY(0); }

  /* The card is the desktop treatment only — below 1024px the full-width
     .pdp-sticky-atc bar is the sticky CTA, and both were showing at once
     (Pastel 86). Mirrors how the bar is hidden from 1024px up. */
  @media screen and (max-width: 1023px) {
    /* stylelint-disable-next-line declaration-no-important */
    .pdp-sticky-card { display: none !important; }
  }

  /* No padding and no gap on the card itself: the image sits flush in the
     corner (Pastel 93) and the text column carries its own padding
     (Pastel 94). overflow: hidden lets the 8px radius clip the image. */
  .pdp-sticky-card__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(6, 21, 43, 0.12);
  }

  .pdp-sticky-card__img {
    flex-shrink: 0;
    width: 104px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 8px;
  }

  .pdp-sticky-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* HARDCODED: 12px block / 16px inline (Pastel 94) — no padding token pair
       matches, and --padding-sm is 11.2px rather than 12px. */
    padding: 12px 16px;
    /* Title and price sit flush (Pastel 97); the space before the buttons is
       .pdp-sticky-card__actions' own margin instead of a shared row gap. */
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  .pdp-sticky-card__title {
    margin: 0;
    /* p2 bold (Pastel 95) — the .p2 class carries the size, the weight is not
       part of any preset, and bold is 500 here. */
    font-weight: 500;
    color: var(--default-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* p3 bold (Pastel 96). The price snippet renders its own spans, so the
     weight is set on the wrapper and inherited. */
  .pdp-sticky-card__price {
    font-weight: 500;
  }

  .pdp-sticky-card__price .price-group {
    display: flex;
    align-items: baseline;
    gap: var(--gap-xs);
  }

  /* The currency app's stylesheet sizes .price / .trans-money at 16px/400,
     which was beating the .p3 class on the wrapper. Inherit instead, so the
     preset and the weight above are what renders (Pastel 96). */
  .pdp-sticky-card__price .price-group,
  .pdp-sticky-card__price .price,
  .pdp-sticky-card__price .trans-money,
  .pdp-sticky-card__price .compare-at-price {
    font-size: inherit;
    font-weight: inherit;
  }
  @media screen and (min-width: 1024px){
    .pdp-sticky-card__price .price-group,
    .pdp-sticky-card__price .price,
    .pdp-sticky-card__price .trans-money,
    .pdp-sticky-card__price .compare-at-price {
      font-size: 13px;
      font-weight: 500;
    }
  }

  .pdp-sticky-card__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    /* HARDCODED: 12px — what the removed body row gap plus this margin used to
       add up to, so only the title -> price gap actually disappears. */
    margin-block-start: 12px;
  }

  .pdp-sticky-card__btn {
    position: relative;
    flex: 1 1 auto;
    font-family: var(--font-paragraph--family);
  }
  .pdp-sticky-card__btn .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    opacity: 0;
  }

  .pdp-sticky-card__btn.atc-added .add-to-cart-text {
    animation: atc-slide-out var(--animation-speed-slow) var(--animation-easing) forwards;
  }

  .pdp-sticky-card__btn.atc-added .add-to-cart-text--added {
    animation: atc-slide-in var(--animation-speed-slow) var(--animation-easing) forwards;
  }

  .pdp-sticky-card__view {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37.59;
    height: 37.59;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--color-black);
    border-radius: 4px;
    color: var(--default-text-color);
    cursor: pointer;
    transition: background var(--animation-values);
  }

  .pdp-sticky-card__view:hover:not(:disabled) { background: var(--light-border-color); }

  /* Nothing customised yet, so nothing to preview (Pastel 98). Matches the
     add-to-cart button's own disabled treatment. */
  .pdp-sticky-card__view:disabled {
    cursor: default;
    opacity: 0.4;
  }

  /* A product with no personalisation panel has no preview at all — the button
     would be permanently inert, so it is not rendered in that case. */
  .pdp-sticky-card__view[hidden] {
    display: none;
  }
/* END_SNIPPET:pdp-sticky-atc */

/* START_SNIPPET:pers-info-popup (INDEX:262) */
/* Positioning context for the callout — just the trigger bar, not the
     whole (variable-height, expand/collapse) .pers-panel__section, so the
     popup's anchor point doesn't move when the accordion body opens. */
  .pers-panel__trigger-wrap {
    position: relative;
  }

  /* Compact bordered callout — Figma: #F8F8F8 bg, Blue-20 border, 4px radius,
     12px block / 16px inline padding, 16px gap, text + 12px close. Outer
     container is a column (Figma) so future stacked rows share that 16px
     gap; today there's only the one text+close row. */
  .pers-info-popup {
    --pers-info-gap: 8px;
    --pers-info-placement: top;
    position: absolute;
    left: var(--pers-info-x, 0px);
    top: var(--pers-info-y, 0px);
    z-index: var(--layer-overlay);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg, 1rem);
    /* Fixed, not max-width: with only `right` set (no `left`), a shrink-to-fit
       width collapses into a tall, narrow, squished column instead of a
       comfortable box. */
    width: 240px;
    padding: var(--spacing-exact-12, 0.75rem) var(--padding-lg, 1rem);
    background: var(--body-bg-color);
    border: 1px solid var(--dark-border-color);
    border-radius: var(--style-border-radius-button, 0.25rem);
    overflow: clip;
  }

  .pers-info-popup[hidden] {
    display: none;
  }

  /* Desktop: still above the icon, centred on it, with a 16px gap (Figma) */
  @media screen and (min-width: 1024px) {
    .pers-info-popup {
      --pers-info-gap: 16px;
      --pers-info-placement: top;
    }
  }

  .pers-info-popup__row {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap-xs, 0.5rem);
  }

  .pers-info-popup__content {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--default-text-color);
  }

  /* Richtext outputs a child <p>. The theme's `.p3` preset only sizes child
     elements via `.rte .p3 p`, and this callout isn't inside `.rte` — so the
     <p> would fall back to the generic paragraph size. Inherit the container's
     P3 font (family/size/weight/line-height) instead. */
  .pers-info-popup__content > * {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  .pers-info-popup__close {
    flex-shrink: 0;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--default-text-color);
    line-height: 0;
  }

  .pers-info-popup__close .svg-wrapper,
  .pers-info-popup__close svg {
    display: block;
    width: 12px;
    height: 12px;
  }
/* END_SNIPPET:pers-info-popup */

/* START_SNIPPET:predictive-search-empty-state (INDEX:273) */
.predictive-search-history {
    display: flex;
    flex-direction: column;
    padding-block-end: var(--padding-2xl);
  }
  .predictive-search-divider {
    margin-block-end: var(--padding-2xl);
    padding-inline: var(--padding-lg);
    display: flex;
    width: 100%;
  }
  .predictive-search-divider span {
    border-bottom: 1px solid var(--light-border-color);
    width: 100%;
    display: block;
  }

  .predictive-search-history[hidden] {
    display: none;
  }

  .predictive-search-results__inner:not(:has(.recently-viewed-wrapper)) .predictive-search-divider {
    display: none;
  }

  .predictive-search-history__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs);
  }

  .predictive-search-history__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    padding: var(--padding-3xs) var(--padding-xs);
    background-color: var(--light-border-color);
    border-radius: 4px;
  }

  .predictive-search-history__chip-term {
    font-size: var(--font-size--xs);
    line-height: 1.4;
    color: var(--color-blue-70);
  }

  .predictive-search-history__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-blue-70);
  }

  .predictive-search-history__chip-remove svg {
    width: 0.5rem;
    height: 0.5rem;
  }

  .predictive-search-history__clear {
    font-size: var(--font-size--xs);
    color: var(--color-blue-70);
    text-decoration: underline;
  }
/* END_SNIPPET:predictive-search-empty-state */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:275) */
.predictive-search-results__wrapper slideshow-slides {
    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:predictive-search (INDEX:276) */
predictive-search-component {
    &:has([data-search-results]):not(:has(.predictive-search-results__no-results)) {
      .predictive-search-form__footer {
        display: block;
      }
    }
  }

  .predictive-search-form__footer {
    display: none;
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-filter (INDEX:277) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: 1px;
    gap: calc(var(--gap-sm) + (1px * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 1024px) {
      padding: calc(var(--padding-md) + 1px);
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  /* noUiSlider styling inside price facet */
  .price-facet__slider-wrapper {
    padding: var(--gap-sm) var(--gap-sm) 0;
  }

  .price-facet .noUi-target {
    /* background: var(--color-border); */
    border: none;
    box-shadow: none;
  }
  .price-facet .noUi-connect {
    /* background: var(--color-foreground); */
  }
  .price-facet .noUi-horizontal {
    height: 6px;
    border-radius: 999px;
  }
  .price-facet .noUi-handle {
    width: 18px;
    height: 18px;
    right: -9px; /* center over track */
    border-radius: 50%;
  }
  .price-facet .noUi-handle:before,
  .price-facet .noUi-handle:after {
    display: none;
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .field__label.price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price (INDEX:278) */
.price-sale-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    align-self: stretch;
  }

  .product-details .price-sale-row {
    align-items: center;
  }

  .product-details .price-sale-row > span {
    line-height: 0;
  }

  /* PDP desktop stacks the compare-at price under the sale price, both
     right-aligned. Product cards keep the inline row at every breakpoint. */
  @media screen and (min-width: 1024px) {
    .product-details .price-sale-row {
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
    }
  }

  /* Scoped to .price-group so the compare-at rule below wins over the global
     .compare-at-price in base.css regardless of stylesheet order. Weight and
     size come from the typography classes, not from here. */
  .price-group .price--sale {
    color: var(--color-error);
  }

  .price-group .compare-at-price {
    color: var(--color-blue-35);
    opacity: 1;
    text-decoration-line: line-through;
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-card (INDEX:282) */
product-card-link {
    height: 100% !important;
  }

  .product-card {
    display: block;
    height: 100%;
  }

  /* ── Image area ── */
  .product-card__image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    border-radius: var(--style-border-radius-image);
  }

  .product-card {
    /* Inset of the wishlist / quick-add / sticker overlays from the image edge:
       8px on mobile, 12px from 1024 (Figma) */
    --card-overlay-inset: var(--padding-xs);
  }

  .product-card__content {
    gap: var(--gap-xs); /* 8px, exact Figma match */
  }

  @media screen and (min-width: 1024px) {
    .product-card {
      --card-overlay-inset: var(--spacing-exact-12);
    }

    .product-card__content {
      gap: var(--spacing-exact-12); /* Figma: 12px image -> swatches on desktop */
    }
  }

  .product-card__primary-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }

  /* Hover image — positioned absolute over primary, fades in on hover */
  .product-card__hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--animation-values);
    pointer-events: none;
  }

  @media (hover: hover) {
    .product-card:hover .product-card__hover-image {
      opacity: 1;
    }
  }

  .product-card__placeholder-image svg {
    width: 100%;
    height: 200px;
  }

  /* ── Wishlist button — always visible, top-right of image ── */
  /* Wrapper we own: positioning, box, colour. The <a> inside is HulkApps' — untouched by our CSS
     structure, just stretched to fill this box. Our icon renders as a sibling overlay on top. */
  .product-card__wishlist {
    position: absolute;
    top: var(--card-overlay-inset);
    right: var(--card-overlay-inset);
    z-index: var(--layer-raised);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--style-border-radius-button);
    border: 1px solid var(--dark-border-color);
    background: rgba(255, 255, 255, var(--opacity-80));
    backdrop-filter: blur(2px);
  }

  .product-card__wishlist > a.wishlist-btn {
    /* Selector includes .wishlist-btn (not just the parent + element) so our specificity
       (0,2,1) beats HulkApps' own bundled CSS rule `.wishlist-btn[data-gridhulklist] {
       display: none !important }` (specificity 0,2,0) — that rule is how their script keeps
       a button hidden until it finishes init (by removing the data-gridhulklist attribute);
       since their script never reaches AJAX-inserted content, it stays hidden forever unless
       we out-specificity it here. Also forces position/inset regardless of their runtime
       inline styles, so the button stays visible/clickable even when their script never runs. */
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--default-text-color);
  }

  .product-card__wishlist .wishlist_btn_icon {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  /* Kept in the DOM (not removed) — HulkApps' script reads/rewrites this on state change;
     hidden visually only, our own SVG overlay (sibling, outside their markup) renders instead */
  .product-card__wishlist .heart-hulk-animation {
    display: none;
  }

  /* Status text ("Add to wishlist" / "Added to wishlist") — HulkApps writes into this node,
     but we show our own icon only, no text label */
  .product-card__wishlist > a > span:not(.count) {
    display: none;
  }

  .product-card__wishlist .count {
    display: none;
  }

  .product-card__wishlist-icon {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  .product-card__wishlist-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .product-card__wishlist-icon svg path {
    transition: fill var(--animation-values);
  }

  /* HulkApps flips data-added on their <a> when the item is wishlisted; our icon
     is a sibling (not a descendant), so we react to it via a sibling selector */
  .product-card__wishlist a[data-added='true'] ~ .product-card__wishlist-icon svg path {
    fill: var(--default-text-color);
  }

  /* ── Fabric feature stickers — bottom-left of image, revealed on hover ── */
  .product-card__fabric-stickers {
    position: absolute;
    bottom: var(--card-overlay-inset);
    left: var(--card-overlay-inset);
    /* quick-add: inset + 32px button + 20px gap */
    right: calc(var(--card-overlay-inset) + 32px + var(--padding-xl));
    display: flex;
    align-items: center;
    align-content: flex-end;
    flex-wrap: wrap;
    gap: var(--padding-2xs); /* Figma: 4px between sticker rows and columns */
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: var(--layer-raised);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--animation-values), transform var(--animation-values);
    pointer-events: none;
  }

  @media (hover: hover) {
    .product-card:hover .product-card__fabric-stickers {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }

  /* ── Status badges row — below swatches ── */
  .product-card__badges {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    align-self: stretch;
    padding-block-start: var(--padding-xs);
  }

  /* Sticker pill base */
  .product-card__sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: var(--padding-3xs) var(--padding-xs) var(--padding-3xs) var(--padding-xs);
    white-space: nowrap;
    text-align: center;
  }

  /* Fabric feature pill */
  .product-card__sticker--fabric {
    background: rgba(255, 255, 255, var(--opacity-80));
    color: var(--default-text-color);
    backdrop-filter: blur(2px);
    margin: 0; /* theme.css gives every li a 6px bottom margin */
    /* HARDCODED: 3px / 1px — Switzer's em box leaves more room under the
       glyphs than above, so equal padding reads as text sitting high in the
       pill; shifting 1px of padding to the top centres it optically. */
    padding-block: 3px 1px;
  }

  /* Status badge pill — colors set via inline style per badge type */
  .product-card__sticker--badge {
    border: 1px solid transparent;
  }

  /* ── Quick-add hover reveal — desktop only ──
     `hover: hover` alone still matches a desktop browser narrowed to a phone
     width, so below 1024px the button was hidden until the card was hovered and
     showed up half-faded mid-transition (Yu Qi feedback). From 1024px up it
     keeps revealing on hover; below that it is simply always visible. */
  @media (hover: hover) and (min-width: 1024px) {
    .product-card .quick-add {
      opacity: 0;
      transition: opacity var(--animation-values);
    }

    .product-card:hover .quick-add {
      opacity: 1;
    }
  }

  /* ── Bottom meta area ── */
  /* Container bottom naturally aligns with the per-swatch underlines.
     margin-bottom drives the consistent gap to the next element (badges or title). */
  .product-card__swatch {
    margin-bottom: 6px;
  }

  @media screen and (min-width: 1024px) {
    .product-card__badges {
      padding-block-start: 12px;
    }
  }

  /* Fieldset (variant-option swatches) must sit flush like the metaobject /
     collection-set pickers, or its row drops 4px below neighbouring cards */
  .product-card__swatch .variant-option--swatches {
    display: flex;
    padding: 0;
    align-items: flex-start;
    gap: 6px;
  }

  .product-card__swatch .variant-option__swatch-list {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
  }

  /* Colour check (MetaobjectSwatchPickerComponent, assets/product-card.js): every colour but
     the card's own stays hidden until all of the card's colours are checked, then the ones
     sold here and in stock appear together. Colours from other markets and sold-out ones
     never flash; the "+N" count waits for the recount. */
  metaobject-swatch-picker:not([data-market-resolved])
    li.variant-option__swatch:not(:has(input[data-is-current='true'])) {
    display: none;
  }

  metaobject-swatch-picker:not([data-market-resolved]) [data-swatch-more] {
    visibility: hidden;
  }

  /* Reset theme.css `ul li { margin-bottom: 6px }` for all swatches */
  .product-card__swatch .variant-option__swatch {
    margin: 0;
  }

  /* Visible swatch column: circle on top, underline below with 6px gap.
     :not([data-extra-swatch]) stops display:flex overriding .hidden on hidden swatches. */
  .product-card__swatch .variant-option__swatch:not([data-extra-swatch]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .product-card__swatch .variant-option__swatch:not([data-extra-swatch])::after {
    content: '';
    display: block;
    width: 15px;
    height: 1px;
    flex-shrink: 0;
    background: transparent;
  }

  /* Swatch square, 15px mobile / 24px desktop (Figma). Lives here so every
     surface that renders a product card gets the same size — grids, sliders,
     recently viewed, recommendations, wishlist. base.css sizes .swatch and its
     background from these two vars. */
  .product-card__swatch .swatch {
    --swatch-width: 15px;
    --swatch-height: 15px;

    border-radius: 3px;
    border: 0.5px solid var(--dark-border-color);
  }

  /* white swatches draw their own stroke with the global (pill) radius */
  .product-card__swatch .swatch::before {
    border-radius: inherit;
  }

  /* Unavailable swatches match the PDP (blocks/colour-swatches.liquid): the
     diagonal strike over the full colour. The old 40% fade washed dark colours
     (Graphite, So Black) out to grey, so it is gone. settings.icon_unavailable
     also paints a 60% Navy square that darkened the colour, so its fill is
     dropped; scoped to cards because buy-buttons.liquid renders the same
     setting on the PDP. */
  .product-card__swatch .variant-option__button-label--has-swatch svg g > path {
    fill: none;
  }
  /* "+N" collapsed-swatch count: a plain P4 link to the product, in Navy.
     Swatch items are swatch + 6px gap + 1px underline tall and the row is
     centre-aligned, so a matching 7px bottom margin on the count lets its
     margin box centre while the text sits centred on the swatch square. */
  .product-card__swatch .variant-option__swatch-more {
    margin: 0 0 7px;
  }

  .hidden-swatches__count {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--default-text-color);
    text-decoration: none;
  }
  .product-card__swatch .variant-option__swatch:not([data-extra-swatch]):hover::after,
  .product-card__swatch .variant-option__swatch:not([data-extra-swatch]):has(input:checked)::after {
    background: var(--default-text-color);
  }

  /* Inside a card the label is only a wrapper for the swatch. The option-button
     rules in snippets/variant-main-picker.liquid (43px / quarter-width boxes,
     pill radius, Navy fill when checked, overflow clip) target the same class
     and reach every card once the quick-add sheet renders that snippet, so
     they are reset here at higher specificity. :hover is included because the
     picker's swatch hover adds a border-bottom that doubles the ::after underline. */
  .product-card .product-card__swatch .variant-option__button-label,
  .product-card .product-card__swatch li .variant-option__button-label:hover,
  .product-card .product-card__swatch li .variant-option__button-label:has(:checked) {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    cursor: pointer;
    line-height: 0;
  }

  @media screen and (min-width: 1024px) {
    /* Figma: 8px between swatches on desktop (6px on mobile) */
    .product-card__swatch .variant-option--swatches,
    .product-card__swatch .variant-option__swatch-list {
      gap: var(--gap-xs);
    }

    .product-card__swatch .swatch {
      --swatch-width: 24px;
      --swatch-height: 24px;
    }

    .product-card__swatch .variant-option__swatch:not([data-extra-swatch])::after {
      width: 24px;
    }
  }


  .product-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    padding-block-start: var(--padding-xs);
  }

  @media screen and (min-width: 1024px) {
    .product-card__info {
      padding-block-start: 12px;
    }
    .product-card__info--has-badge {
      padding-block-start: var(--padding-xs);
    }
  }

  .product-card__text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  .product-card__subtitle {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 0 4px;
    align-self: stretch;
    flex-wrap: wrap;
    color: var(--default-text-color);
    margin: 0;
  }

  .product-card__subtitle-divider {
    display: block;
    width: 30px;
    border-top: 1px solid currentColor;
    flex-shrink: 0;
  }

  .product-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--default-text-color);
    font-weight: 400;
  }

  /* ── Cascade stagger: set delay token on parent, cascades into product-card ── */
.swiper-slide:nth-child(1),
.resource-list--grid > *:nth-child(1)  { --card-reveal-delay: 0s;     }
.swiper-slide:nth-child(2),
.resource-list--grid > *:nth-child(2)  { --card-reveal-delay: 0.1s;   }
.swiper-slide:nth-child(3),
.resource-list--grid > *:nth-child(3)  { --card-reveal-delay: 0.2s;   }
.swiper-slide:nth-child(4),
.resource-list--grid > *:nth-child(4)  { --card-reveal-delay: 0.3s;   }
.swiper-slide:nth-child(5),
.resource-list--grid > *:nth-child(5)  { --card-reveal-delay: 0.4s;   }
.swiper-slide:nth-child(6),
.resource-list--grid > *:nth-child(6)  { --card-reveal-delay: 0.5s;   }

.product-grid > *:nth-child(2n + 1)     { --card-reveal-delay: 0s;     }
.product-grid > *:nth-child(2n)         { --card-reveal-delay: 0.1s;   }

@media screen and (min-width: 1024px) {
  .product-grid > *:nth-child(4n + 1)   { --card-reveal-delay: 0s;     }
  .product-grid > *:nth-child(4n + 2)   { --card-reveal-delay: 0.1s;   }
  .product-grid > *:nth-child(4n + 3)   { --card-reveal-delay: 0.2s;   }
  .product-grid > *:nth-child(4n)       { --card-reveal-delay: 0.3s;   }
}
  /* ── Top-down curtain reveal on scroll ── */
  @keyframes card-reveal-curtain {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
  }

  /* Override global opacity fade — the curtain handles visibility */
  product-card[data-scroll-reveal] {
    opacity: 1;
  }

  product-card[data-scroll-reveal] .product-card__content {
    position: relative;
  }

  product-card[data-scroll-reveal] .product-card__content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    pointer-events: none;
    background: var(--card-reveal-curtain, var(--body-bg-color));
    transform: scaleY(1);
    transform-origin: bottom;
  }

  product-card[data-scroll-reveal].is-revealed .product-card__content::after {
    animation: card-reveal-curtain 1.2s ease-out var(--card-reveal-delay, 0s) both;
  }

  /* Hold the reveal while the primary image is still loading (attribute is set and
     cleared by product-card.js). Same specificity as the rule above, so being later
     wins; when the attribute is removed the animation starts from its first frame. */
  product-card[data-scroll-reveal][data-image-pending] .product-card__content::after {
    animation: none;
    transform: scaleY(1);
  }

  /* Once the user has interacted with a slider, later cards appear without animating. */
  [data-reveal-done] product-card[data-scroll-reveal] .product-card__content::after {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    product-card[data-scroll-reveal] .product-card__content::after {
      display: none;
    }
  }

  /* Freeze all hover-driven transitions during variant morph. DOM mutations can
     briefly invalidate :hover, causing the card lift and quick-add opacity to
     animate — visible only on desktop. The JS removes this class after 2 rAFs. */
  product-card.is-morphing,
  product-card.is-morphing .quick-add {
    transition: none;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:283) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);

    isolation: isolate;

    @media screen and (min-width: 1024px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  /* Results grid is always 4 columns per row above 1024px
     (zoom-out view keeps its own column count) */
  @media screen and (min-width: 1024px) {
    .main-collection-grid .product-grid:not([product-grid-view='zoom-out']) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 1024px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    --grid--margin--mobile: 0 0;
    --grid-column--desktop: var(--centered);
    --grid-column--mobile: var(--centered);
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;

    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 1024px) {
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  /* theme.css resets `ul li { margin-bottom: 6px }`, which lands on every item
     in the product grid. Two problems fall out of it:
       - it stacks on top of the grid's own row gap, so mobile rows sat 30px
         apart instead of the Figma 24px (Pastel #8);
       - `ul li:last-child` is exempt, so a grid item with the margin resolves
         6px SHORTER than the one beside it — which is why the two content
         entries sharing a row ended at different heights (Pastel #16).
     The grid gap owns the spacing; the item margin is just reset noise. */
  .main-collection-grid .product-grid > li {
    margin-block-end: 0;
  }

  .main-collection-grid__inner {
    --product-grid-gap-mobile: 24px 8px; /* Figma: 24px rows on mobile */
    --product-grid-gap-desktop: 50px 8px;

    grid-column: var(--full-width);
    container-type: inline-size;
    container-name: product-grid;
  }

  /* Product count is commented out in the markup above
  .main-collection-grid__count {
    display: flex;
    justify-content: flex-end;
    padding-block: var(--padding-lg);
    color: var(--color-blue-70);
  }
  */

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 1023px) {
      margin-left: var(--page-margin);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:quick-add-modal (INDEX:286) */
#quick-add-dialog .ai-size-container{
    display: none !important;
  }
  /* Quick add sheet chrome — Figma 9978-42930: a 12px-inset card anchored to the
     bottom of the screen, centred once there is room for it. */
  .quick-add-modal {
    /* HARDCODED: 12px screen inset. Anchoring to the bottom only (top: auto) is
       what lets the height stay content-driven — with both top and bottom set,
       an auto height would be stretched to fill instead. */
    inset: auto 0 0.75rem;
    margin-inline: auto;
    margin-block: 0;
    width: calc(100% - 1.5rem);
    max-width: 30rem;
    /* .dialog-modal forces 100dvh — the sheet is content-height, capped to the screen */
    height: auto;
    max-height: calc(100svh - 1.5rem);
    padding: 0;
    overflow: hidden;
    background-color: var(--body-bg-color);
    /* HARDCODED: 8px sheet corner; no matching radius token */
    border-radius: 0.5rem;
    border: none;
  }

  /* Below 510px the sheet is effectively full-width, so it reads as a bottom
     sheet. From 510px (Yu Qi's spec; the card caps at 30rem + the 12px insets)
     it is narrower than the screen and is centred on both axes instead.
     Not a theme layout tier — it is derived from this card's own max-width. */
  @media screen and (min-width: 510px) {
    .quick-add-modal {
      inset: 0;
      margin: auto;
      /* `height: auto` with all four insets set would stretch the card to fill
         the screen (see the note above) — fit-content keeps it content-driven
         while auto margins centre it. */
      height: fit-content;
      min-height: 0; /* .dialog-modal sets 500px from 1024px up */
    }
  }

  /* Use base (mobile) behavior; show overrides can be placed in min-width blocks if needed */

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal[open] .quick-add-modal__close {
    display: block;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    display: none;
    position: absolute;
    /* Figma header: 20px above the 32px button, 16px from the right edge */
    top: var(--padding-xl);
    right: var(--padding-lg);
    width: 32px;
    height: 32px;
    padding: var(--padding-xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
  }

  .quick-add-modal__close .svg-wrapper,
  .quick-add-modal__close svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__content {
    position: relative;
    overflow-y: auto;
    /* 72px header (20px + 32px close button + 20px) sits above the content */
    padding-block-start: 4.5rem;
    max-height: calc(100svh - 1.5rem);
  }

  /* Fade the sheet contents in as the dialog opens */
  .quick-add-modal[open] .quick-add-modal__content > * {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:287) */
.quick-add {
    position: absolute;
    /* --card-overlay-inset comes from product-card.liquid: 8px mobile, 12px desktop */
    bottom: var(--card-overlay-inset, 8px);
    right: var(--card-overlay-inset, 8px);
    z-index: var(--layer-raised);
  }

  .quick-add[class*='color-scheme-'] {
    background-color: transparent;
  }

  @media screen and (min-width: 1024px) {
    product-card:focus-within .quick-add__button,
    .card-gallery:hover .quick-add__button {
      display: flex !important;
      will-change: auto;
      animation: none;
    }
  }

  .quick-add__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid var(--dark-border-color);
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 8px;
  cursor: pointer;
  pointer-events: all;
  aspect-ratio: 1 / 1;
  contain: strict;
  transition: background-color var(--animation-values), border-color var(--animation-values);
  }

  /* Hover is gated to real pointers: touch browsers emulate :hover on tap and
     keep it matched until the next tap, which left the button stuck navy and
     hid the (navy) loading spinner against it on mobile. */
  @media (hover: hover) {
    .quick-add__button:hover {
      background-color: var(--default-text-color);
      border-color: var(--default-text-color);
    }

    .quick-add__button:hover .add-to-cart-icon svg {
      color: var(--color-white);
    }
  }

  .quick-add__button:focus-visible {
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
  }

  .quick-add__button:focus-visible .add-to-cart-icon svg {
    color: var(--color-white);
  }

  .quick-add__button .add-to-cart-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    color: var(--default-text-color);
    transition: color var(--animation-values);
  }

  .quick-add__button .svg-wrapper.add-to-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .quick-add__button--loading {
    cursor: wait !important;
    pointer-events: none;
  }

  .quick-add__button--loading .add-to-cart-icon {
    visibility: hidden;
  }

  .quick-add__button--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(6, 21, 43, 0.25);
    border-top-color: var(--default-text-color);
    border-radius: 50%;
    animation: quick-add-spin 0.6s linear infinite;
  }

  .quick-add__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── Inline size picker ── */

  /* Keep quick-add visible while size picker is open (overrides hover-only opacity) */
  @media (hover: hover) {
    .product-card .quick-add[data-size-picker-open] {
      opacity: 1;
    }
  }

  /* Hide fabric feature stickers when the size picker is open */
  .product-card__top:has(.quick-add[data-size-picker-open]) .product-card__fabric-stickers {
    opacity: 0;
    pointer-events: none;
  }

  /* Size picker replaces the ATC button — spans the full card-image bottom */
  .quick-add[data-size-picker-open] {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
  }

  /* Hide the ATC button when the size picker is visible */
  .quick-add[data-size-picker-open] > product-form-component {
    display: none;
  }

  .quick-add__size-picker {
    margin: 8px;
    border-radius: 4px;
    background-color: var(--color-white);
    border-top: 1px solid var(--dark-border-color);
    padding: var(--padding-2xs); /* 4px — compact, fits neatly in card */
    overflow-x: auto;
    scrollbar-width: none;

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

  /* Equal-width columns — sizes fill the full card width */
  .quick-add__size-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3xs);
    border: none;
    margin: 0;
    padding: 0;
  }

  .quick-add__size-option-label {
    min-width: 40px;
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--padding-xs) var(--padding-2xs);
    border-radius: 4px;
    border: 1px solid var(--dark-border-color);
    background-color: var(--color-white);
    cursor: pointer;
    overflow: clip;
    transition: background-color var(--animation-values), border-color var(--animation-values), color var(--animation-values);
  }

  .quick-add__size-options--loading {
    cursor: wait;
    pointer-events: none;
  }

  @keyframes quick-add-spin {
    to { transform: rotate(360deg); }
  }

  .quick-add__size-options--loading .quick-add__size-option-label:has(:checked)::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: quick-add-spin 0.6s linear infinite;
  }

  .quick-add__size-option-label:hover:not(:has([data-option-available='false'])),
  .quick-add__size-option-label:has(:checked) {
    background-color: var(--default-text-color);
    color: var(--color-white);
    border-color: var(--default-text-color);
  }

  .quick-add__size-option-label:has([data-option-available='false']) {
    color: var(--grey-color);
    border-color: var(--light-border-color);
  }

  /* Diagonal strikethrough for unavailable sizes */
  .quick-add__size-strike {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    stroke: var(--dark-border-color);
    stroke-width: 1px;
  }

  .quick-add__size-option-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .quick-add__size-option-text {
    font-size: var(--font-size--xs);
    line-height: 1;
    position: relative; /* sit above the SVG */
    z-index: 1;
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:recently-viewed-slider (INDEX:288) */
.recently-viewed-slider {
    display: block;
    margin-block-start: var(--margin-5xl);
  }

  .recently-viewed-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-block-end: var(--spacing-exact-12); /* Figma: 12px title -> cards on mobile */

    @media screen and (min-width: 1024px) {
      margin-block-end: var(--margin-lg); /* Figma: 16px on desktop */
    }
  }

  .recently-viewed-slider__title {
    margin: 0;
  }

  .recently-viewed-slider__nav {
    display: none;
    align-items: center;
    gap: var(--gap-2xs);
    flex-shrink: 0;

    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }

  .recently-viewed-slider__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--default-text-color);
    background-color: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    transition: background-color var(--animation-values);

    &:hover {
      background-color: var(--light-border-color);
    }
  }

  .recently-viewed-slider__nav-btn:disabled {
    border-color: transparent;
    background-color: var(--light-border-color);
    color: var(--grey-color);
    cursor: default;
  }

  .recently-viewed-slider__nav-btn svg {
    width: 16px;
    height: 16px;
  }

  /* The real Swiper nav elements are only wiring targets for
     product-sliders.js — the visible controls are the header buttons. */
  .recently-viewed-slider .swiper-button-prev,
  .recently-viewed-slider .swiper-button-next {
    display: none;
  }

  .recently-viewed-slider__carousel[data-has-products='false'] {
    display: none;
  }

  /* Full bleed: escape the .container inline padding so the slides run
     to the viewport edge; left padding keeps the first slide aligned
     with the content. */
  .recently-viewed-slider__carousel {
    margin-inline: calc(var(--container-padding-mobile) * -1);
    width: auto;

    @media screen and (min-width: 600px) {
      margin-inline: calc(var(--container-padding-tablet) * -1);
    }

    @media screen and (min-width: 1024px) {
      margin-inline: calc(var(--container-padding-desktop) * -1);
    }

    @media screen and (min-width: 1440px) {
      margin-inline: calc(var(--container-padding-xl) * -1);
    }

    @media screen and (min-width: 1920px) {
      margin-inline: calc(var(--container-padding-2xl) * -1);
    }
  }

  /* Symmetric padding: Swiper sizes slides from the content box, so the
     last slide rests aligned with the container content edge instead of
     the screen edge, while cards still bleed through the padding zone
     mid-scroll. */
  .recently-viewed-slider__carousel .swiper {
    padding-inline: var(--container-padding-mobile);

    @media screen and (min-width: 600px) {
      padding-inline: var(--container-padding-tablet);
    }

    @media screen and (min-width: 1024px) {
      padding-inline: var(--container-padding-desktop);
    }

    @media screen and (min-width: 1440px) {
      padding-inline: var(--container-padding-xl);
    }

    @media screen and (min-width: 1920px) {
      padding-inline: var(--container-padding-2xl);
    }
  }

  .recently-viewed-slider .swiper-slide {
    height: auto;
  }

  /* Explicit slide width — the --carousel-cards/--carousel-peek/--carousel-gap
     vars from sections/product-sliders.liquid's .swiper-slide rule are never
     defined in this scope, so that rule is invalid here and must not be
     relied on. */
  .recently-viewed-slider__carousel .product-sliders__swiper .swiper-slide {
    min-width: 0;
    width: 220px; /* HARDCODED: Figma mobile card width; 8px between cards comes from Swiper's spaceBetween */
  }

  @media screen and (min-width: 1024px) {
    .recently-viewed-slider__carousel .product-sliders__swiper .swiper-slide {
      width: calc((100% - var(--gap-xs) * 3) / 4);
    }
  }

  .recently-viewed-slider__skeleton {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-xs);

    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .recently-viewed-slider__skeleton-item {
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    background-color: var(--light-border-color);
  }

  /* Hide the whole component when nothing was loaded and the skeleton is gone */
  .recently-viewed-slider:not(:has(.swiper-slide)):not(:has(.resource-list--grid:not([style*='display: none']))) {
    display: none;
  }
/* END_SNIPPET:recently-viewed-slider */

/* START_SNIPPET:resource-card (INDEX:289) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:search-modal (INDEX:291) */
/* Header search icon button (hook used by snippets/search.liquid) */
  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0; /* Figma nav: no extra space after the search icon */
  }

  .search-modal {
    --search-backdrop-offset: var(--header-card-bottom, var(--header-height, 60px));
  }

  /* Visible dim — a regular element covering the whole viewport. The dialog is
     non-modal, so the page is not inert: clicks land on this overlay (inside the
     dialog-component) and close the dialog via its click-outside handler. */
  .search-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--layer-window-overlay);
    background-color: color-mix(in srgb, var(--color-black) calc(var(--opacity-40) * 100%), transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-values-slow), visibility var(--animation-values-slow);
  }

  .search-modal:has(.dialog-modal[open]) .search-modal__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .dialog-modal[open] {
    border-radius: 4px;
  }

  .search-modal:has(.dialog-modal.dialog-closing) .search-modal__overlay {
    opacity: 0;
    pointer-events: none;
  }

  /* Only the header row card floats above the overlay: raising .header-section
     (transparent apart from the .header__row card) lifts it out of the sticky
     z-index (--layer-sticky) that would otherwise trap it below the overlay.
     The announcement bar is a separate section and stays dimmed. */
  body:has(#search-modal .dialog-modal[open]) .header-section {
    z-index: var(--layer-overlay);
  }

  /* Panel — dropdown card below the header, right-aligned on tablet+ */
  .search-modal__content {
    /* Blue-35 placeholder colour from the palette — no global token exists for it */
    --search-placeholder-color: #bec5cd;
    --search-modal-offset: calc(var(--search-backdrop-offset) + var(--margin-xs));

    position: fixed;
    inset: var(--search-modal-offset) var(--padding-lg) auto;
    z-index: var(--layer-menu-drawer);
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    height: calc(100dvh - var(--search-modal-offset) - var(--padding-lg));
    margin: 0;
    padding: 0;
    flex-direction: column;
    border-radius: 4px;
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: var(--shadow-popover);
    transform-origin: top right;
    max-height: unset;
    /* Right offset matches .header__row's margin-inline so the panel's right
       edge lines up with the header card at every breakpoint */
    @media screen and (min-width: 1024px) {
      /* inset-inline: auto var(--padding-lg); */
      inset-inline: auto 16px;
      width: 23.375rem;
      height: calc(100dvh - var(--search-modal-offset) - var(--padding-5xl));
    }
    @media screen and (min-width: 1200px){
      inset-inline: auto var(--padding-hero-banner-content-end);
    }
  }

  .search-modal .search-modal__content[open] {
    display: flex;
    animation: search-modal-slide-in var(--animation-values-slow) forwards;
  }

  .search-modal .search-modal__content.dialog-closing {
    animation: search-modal-slide-out var(--animation-values) forwards;
  }

  @keyframes search-modal-slide-in {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-modal-slide-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  /* Inner layout — header row fixed, results scroll */
  .search-modal predictive-search-component {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
  }

  .search-modal .predictive-search-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    align-self: stretch;
  }

  .search-modal .dialog-modal .predictive-search-form__header {
    position: static;
    display: flex;
    width: 100%;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-4xl);
    border: 0;
    background-color: var(--color-white);
    padding-bottom: 24px;
    
    @media screen and (min-width: 1024px) {
      padding: var(--padding-2xl) var(--padding-lg);
    }
  }

  /* Search field */
  .search-modal .dialog-modal .predictive-search-form__header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-exact-12);
    width: 100%;
    min-height: 2.9375rem;
    padding-inline: var(--padding-lg);
    background-color: var(--body-bg-color);
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
  }

  .search-modal .dialog-modal .search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--font-size--sm);
    color: var(--default-text-color);
  }

  .search-modal .search-input::placeholder {
    color: var(--search-placeholder-color);
    opacity: 1;
  }

  .search-modal .dialog-modal .predictive-search__icon {
    position: relative;
    order: 3;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    pointer-events: auto;
  }

  .search-modal .dialog-modal .predictive-search__icon::before {
    content: '';
    position: absolute;
    inset: calc((1.125rem - var(--minimum-touch-target)) / 2);
  }

  .search-modal .dialog-modal .predictive-search__icon svg {
    width: 100%;
    height: 100%;
  }

  .search-modal .dialog-modal .predictive-search__reset-button {
    order: 2;
    min-width: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
  }

  .search-modal .dialog-modal .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--dark-border-color);
    border-radius: var(--style-border-radius-50);
    color: var(--default-text-color);
  }

  .search-modal .predictive-search__reset-button-icon svg {
    width: 0.625rem;
    height: 0.625rem;
  }

  .search-modal .dialog-modal .predictive-search__reset-button-text {
    display: none;
  }

  /* Closing happens via the overlay or Escape — keep the button for assistive tech only */
  .search-modal .dialog-modal .predictive-search__close-modal-button {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Scrollable results area */
  .search-modal .dialog-modal .predictive-search-form__content-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: none;
    width: 100%;
    height: auto;
  }

  .search-modal .dialog-modal .predictive-search-form__content,
  .search-modal .dialog-modal .predictive-search-form__content-wrapper > .predictive-search-form__content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-block-end: 0;
    background-color: var(--color-white);
    scrollbar-width: none;
  }

  .search-modal .dialog-modal .predictive-search-results__inner {
    padding-block: 0 var(--padding-2xl);
  }

  .search-modal .dialog-modal .predictive-search-results__inner > * {
    padding-inline: var(--padding-lg);
  }

  /* The floating "view all" footer is replaced by the results header link */
  .search-modal .dialog-modal .predictive-search-form__content-wrapper .predictive-search-form__footer {
    display: none;
  }

  /* Results header row */
  .search-modal .dialog-modal .predictive-search-results__title {
    margin-block: 0 var(--margin-xs);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--color-blue-70);
  }

  .search-modal .predictive-search-results__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--default-text-color);
    text-decoration: none;
  }

  .search-modal .predictive-search-results__view-all:hover {
    text-decoration: underline;
  }

  .search-modal .predictive-search-results__view-all .svg-wrapper {
    width: 0.875rem;
    height: 0.875rem;
  }

  .search-modal .predictive-search-results__clear.button-unstyled {
    margin-left: var(--margin-sm);
    font-size: var(--font-size--xs);
    font-weight: 400;
    color: var(--color-blue-70);
    opacity: 1;
    text-decoration: underline;
  }

  /* Product grid — two columns as per the design */
  .search-modal .dialog-modal .predictive-search-results__wrapper-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--padding-2xl) var(--gap-xs);
    /* padding-block-end: var(--padding-2xl); */
  }

  .search-modal .resource-card__media {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }

  .search-modal .resource-card__content {
    padding-inline: var(--padding-xs);
    gap: var(--gap-3xs);
  }

  .search-modal .resource-card__title {
    font-size: var(--font-size--xs);
    line-height: 1.4;
    color: var(--default-text-color);
  }

  .search-modal .resource-card__content .price {
    font-size: var(--font-size--xs);
    font-weight: 400;
    color: var(--default-text-color);
  }

  .search-modal .resource-card__content .price--sale {
    color: var(--color-error);
  }

  .search-modal .resource-card__content .compare-at-price {
    font-size: var(--font-size--xs);
    color: var(--search-placeholder-color);
  }

  /* No results */
  .search-modal .dialog-modal .predictive-search-results__no-results,
  .search-modal .dialog-modal .predictive-search-results__no-results:last-child {
    margin-block: 0 var(--margin-xl);
    text-align: left;
    font-size: var(--font-size--sm);
    color: var(--color-blue-70);
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:292) */
.search-action {
    --search-border-width: 1px;

    display: flex;
  }

  .search-modal__button-icon--close {
    display: none;
  }

  /* While the search dialog is open the header icon reads as a close button.
     The two icon spans share the same box, so the swap never shifts the
     neighbouring header actions (e.g. the localization dropdown). */
  body:has(#search-modal .dialog-modal[open]) .search-modal__button-icon--open {
    display: none;
  }

  body:has(#search-modal .dialog-modal[open]) .search-modal__button-icon--close {
    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  /* Only the real 3-column desktop grid (1200px+) pulls the search bar out to
     the column edge. Below 1200px the header is one flex row and this offset
     ate the 12px gap between the search and account icons (Yu Qi feedback). */
  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (min-width: 1200px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:294) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:size-guide-modal (INDEX:295) */
.size-guide {
    display: contents;
  }

  /* Guarantee the ancestor legend row is flex wherever this trigger renders.
     The bundle PDP (bundle-variant-selectors.liquid) never renders
     variant-main-picker.liquid, so that snippet's own
     ".variant-option__legend-row { display: flex; ... }" stylesheet isn't
     compiled onto bundle pages at all — assets/bundle.css's
     `justify-content: space-between` override for this row has no flex
     container to act on there. :has() scopes this to rows that actually
     contain the trigger, so unrelated legend rows are untouched. */
  .variant-option__legend-row:has(.size-guide) {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Pin the trigger to the opposite end of its row (the "Size" label sits
     at the start), regardless of whether the sibling title-group's own
     flex-grow is winning in a given context. */
  .size-guide .variant-option__size-guide {
    margin-inline-start: auto;
  }

  /* Mobile default. Inset from the viewport edge instead of the base
     .dialog-modal's edge-to-edge sizing — header and body manage their
     own padding instead. Compounded with .dialog-modal so this reliably
     wins over the base rule regardless of stylesheet load order. */
  .size-guide-modal.dialog-modal {
    position: fixed;
    inset: var(--spacing-exact-12);
    width: auto;
    height: fit-content;
    max-width: calc(100dvw - (2 * var(--spacing-exact-12)));
    max-height: calc(100dvh - (2 * var(--spacing-exact-12)));
    margin: 0;
    padding: 0;
    flex-direction: column;
    background: var(--body-bg-color);
    border-radius: var(--style-border-radius-button);
    top: 50%;
    transform: translateY(-50%);
    /* display: flex only applies once [open] is set (matching the base
       .dialog-modal[open] rule) — an unconditional display here would
       override the browser's default `dialog:not([open]) { display: none }`
       and force the modal visible on page load. */
    &[open] {
      display: flex;
    }
  }

  /* Header (title row) sits outside .size-guide-modal__body, so it stays put
     while the body scrolls beneath it. */
  .size-guide-modal__header {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xl);
    padding: var(--padding-xl) var(--padding-lg);
    border-radius: var(--style-border-radius-button) var(--style-border-radius-button) 0 0;
    background: var(--body-bg-color);
  }

  .size-guide-modal__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xl);
    width: 100%;
  }

  .size-guide-modal__title {
    color: var(--default-text-color);
  }

  .size-guide-modal__close {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    aspect-ratio: 1 / 1;
    padding: 8px;
    background-color: transparent;
    /* background: #E8EDF2; */
  }
  .size-guide-modal__close svg {
    width: 16px;
    height: 16px;
  }
  @media screen and (min-width: 1024px){
    .size-guide-modal__close {
      background: transparent;
    }
  }

  /* Scrollable body — only the chart content lives here, so the header
     above stays fixed. min-height: 0 lets a flex child shrink below its
     content size so overflow-y actually kicks in. */
  .size-guide-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--padding-lg) var(--padding-xl);
  }

  .size-guide-modal__divider {
    flex: none;
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid var(--dark-border-color);
  }

  /* ── Structured chart ───────────────────────────────────────────────── */

  .size-guide-chart,
  .size-guide-measure {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--spacing-exact-12);
  }

  .size-guide-chart__title,
  .size-guide-measure__title {
    margin: 0;
    color: var(--default-text-color);
  }

  /* The border and the rounded corners live here, not on the table: a table
     can't clip its own overflow, so the radius would be squared off by the
     corner cells. This box also owns the horizontal scroll the mobile design
     relies on. */
  .size-guide-chart__box {
    gap: 8px;
    display: flex;
    flex-direction: column;
  }
  .size-guide-chart__scroll {
    overflow-x: auto;
    border: 1px solid #D0D7E0;
    border-radius: var(--style-border-radius-button);
  }

  .size-guide-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
  }

  .size-guide-table th,
  .size-guide-table td {
    padding: 8px 12px;
    border-inline-end: 1px solid #D0D7E0;
    color: var(--default-text-color);
    text-align: center;
    /* white-space: nowrap; */
    width: 83px;
    min-width: 83px;
    max-width: 83px;
    flex-shrink: 0;
  }

  /* The wrapper already draws the outer edge, so the last cell in a row and the
     last row must not double it up. */
  .size-guide-table th:last-child,
  .size-guide-table td:last-child {
    border-inline-end: none;
  }

  .size-guide-table thead th {
    padding-block: var(--padding-xs);
    background-color: var(--light-border-color);
    border-bottom: 1px solid #D0D7E0;
    font-weight: 500;
  }

  .size-guide-table tbody th {
    font-weight: 400;
  }

  .size-guide-table tbody tr:not(:last-child) th,
  .size-guide-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #D0D7E0;
  }

  /* Figma tints the even rows (S, L, XXL) rather than the odd ones. */
  .size-guide-table tbody tr:nth-child(even) th,
  .size-guide-table tbody tr:nth-child(even) td {
    background-color: #E8EDF2;
  }

  /* ── How to measure ────────────────────────────────────────────────── */

  .size-guide-measure__layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .size-guide-measure__figure {
    flex: none;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--style-border-radius-image);
    width: 250px;
  }

  .size-guide-measure__figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 250px;
  }

  .size-guide-measure__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
  }

  .size-guide-measure__item > * {
    margin: 0;
  }

  .size-guide-measure__term {
    color: var(--default-text-color);
  }

  .size-guide-measure__desc {
    color: var(--color-blue-70);
  }

  /* Desktop — the mobile rule above sets `position: fixed` unscoped, which
     (being a compound .size-guide-modal.dialog-modal selector) outranks the
     base .dialog-modal's own desktop centering rule at every breakpoint, so
     it must be explicitly re-overridden here rather than left to fall back
     to the base rule. */
  @media screen and (min-width: 1024px) {
    .size-guide-modal.dialog-modal::backdrop {
      background: rgb(0 0 0 / var(--opacity-40));
      backdrop-filter: blur(4px);
    }

    .size-guide-modal.dialog-modal {
      top: var(--spacing-exact-30);
      right: var(--spacing-exact-30);
      bottom: var(--spacing-exact-30);
      left: auto;
      width: 100%;
      max-width: 538px;
      max-height: calc(100dvh - (2 * var(--spacing-exact-30)));
      margin: 0;
      border-radius: var(--style-border-radius-image);
      transform: unset;
    }

    .size-guide-modal__header {
      padding: var(--padding-2xl) var(--padding-xl) var(--padding-lg);
      gap: var(--padding-2xl);
      border-radius: var(--style-border-radius-image) var(--style-border-radius-image) 0 0;
    }

    .size-guide-modal__body {
      gap: 24px;
      padding: 0 var(--padding-xl) var(--padding-2xl);
    }

    /* Figma pairs a fixed 220px illustration with the descriptions beside it. */
    .size-guide-measure__layout {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--padding-xl);
    }
    .size-guide-measure__list {
      gap: var(--spacing-exact-12);
    }

    .size-guide-measure__figure {
      width: 220px;
    }
  }
/* END_SNIPPET:size-guide-modal */

/* START_SNIPPET:sorting (INDEX:301) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 1024px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: flex;
    right: 0;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 1023px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-mobile-wrapper .sorting-filter__options {
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
    min-width: var(--facets-panel-min-width);
    max-width: var(--facets-panel-width);
    max-height: var(--facets-panel-height);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 1023px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 1023px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 1023px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .sorting-filter__options {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: content-visibility var(--animation-speed-slow) allow-discrete,
      padding-block var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }

    &:focus-within {
      overflow-y: visible;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:309) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width):is(.p1, .p2, .p3) {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > *,
  .text-block.p1 > *,
  .text-block.p2 > *,
  .text-block.p3 > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
    text-align: center;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  .text-block:not(.rte) {
    color: var(--color, inherit);
  }

  /* Text Truncation Show More/Less Styles */
  .text-truncate-wrapper {
    width: 100%;
  }

  .text-truncated {
    display: -webkit-box;
    -webkit-line-clamp: var(--truncate-lines);
    line-clamp: var(--truncate-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    hyphens: auto;
  }

  .text-full {
    display: block;
  }

  /* The truncated paragraph keeps its paragraph margin because the button, not
     the text, is the wrapper's last child; drop it so the 8px button margin is
     the whole gap (Figma). */
  .text-truncate-wrapper .text-content {
    margin-block-end: 0;
  }

  .text-show-more-button {
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin: 0;
    margin-block-start: var(--margin-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .text-show-more-button:hover {
    opacity: 0.8;
  }

  .text-show-more-button .show-less-text {
    display: none;
  }

  .text-truncate-wrapper[data-expanded="true"] .text-show-more-button .show-more-text {
    display: none;
  }

  .text-truncate-wrapper[data-expanded="true"] .text-show-more-button .show-less-text {
    display: inline;
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:315) */
{%- comment -%}
    The AI Fit Finder app auto-places its own "What's my size? / Size Chart"
    buttons client-side, at a time we don't control (before or after our own
    JS runs). component-size-recommender.js only proxies clicks through to
    them — it used to also hide them via an inline style once its own JS
    caught up, which left a visible flash between the app injecting them and
    our JS running. Hiding via a static, always-on CSS rule instead means
    they're never painted in the first place, regardless of injection timing.
  {%- endcomment -%}
  .ai-size-button-container {
    display: none !important;
  }

  .variant-picker {
    width: 100%;
  }

  @keyframes bis-btn-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .klaviyo-bis-btn {
    animation: bis-btn-fadein 0.5s ease-out both;
  }

  @media (prefers-reduced-motion: reduce) {
    .klaviyo-bis-btn { animation: none; }
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .variant-option {
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-picker__form .variant-option--swatches:first-child {
    padding-top: 16px;
    border-top: 1px solid #D0D7E0;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (max-width: 1023px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: none;
  }

  {%- comment -%}
    No flex gap by design. "Your size L" and "Size Guide" sit at the end of
    this row and the gap was stacking with the 8px margin on
    .variant-option__whats-my-size, pushing them 20px apart. The 8px is the
    intended spacing, so the row supplies none of its own — the separation
    between the "Size / S" title group and the links comes from free space,
    not gap, so removing it doesn't affect that end.
  {%- endcomment -%}
  .variant-option__legend-row {
    float: none;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
  }


  .variant-option__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
  }

  /* Typography comes from the .p2--bold class on the element; only colour
     is scoped here. */
  .variant-option__name {
    color: var(--default-text-color);
  }

  /* Typography comes from the .p2 class on the element; only colour is
     scoped here. */
  .variant-option__swatch-value {
    color: var(--color-blue-70, #3F4855);
  }

  .variant-option__size-guide {
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: 400;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    white-space: nowrap;
  }

  /* AI Fit Finder popup overrides — the app renders this markup itself, so
     these target its own class names rather than ours. */
  {%- comment -%}
    Panel padding per design: 20px top / 32px bottom / 16px inline below
    1024px, 24px block / 32px inline from 1024px. Every value has an exact
    token, so none are literal.

    The class is repeated to lift specificity to (0,2,0). ai-size-design.css
    sets `.ai-size-popup-right { padding: 30px 20px }` inside a
    `max-width: 991px` media query — same (0,1,0) as a single class, so if
    that declaration is !important it comes down to which stylesheet loads
    last, which we don't control. Doubling the class wins outright either
    way, and unlike an ancestor selector it assumes nothing about where the
    app nests this element.

    Physical longhands rather than padding-block/padding-inline on purpose:
    Chrome doesn't strike through an overridden `padding` shorthand when the
    overrides are logical properties, so the app's rule renders as though it
    were still live and the cascade is unreadable in DevTools. Same computed
    values, legible override.
  {%- endcomment -%}
  .ai-size-popup-right.ai-size-popup-right {
    padding-top: var(--padding-xl) !important;
    padding-bottom: var(--padding-4xl) !important;
    padding-left: var(--padding-lg) !important;
    padding-right: var(--padding-lg) !important;
    position: relative !important;
  }

  @media only screen and (min-width: 1024px) {
    .ai-size-popup-right.ai-size-popup-right {
      padding-top: var(--padding-2xl) !important;
      padding-bottom: var(--padding-2xl) !important;
      padding-left: var(--padding-4xl) !important;
      padding-right: var(--padding-4xl) !important;
    }
  }

  {%- comment -%}
    The actual positioned element is .close itself (position: absolute;
    top: 10px; right: 10px in ai-size-design.css), not its parent
    .ai-size-popup-header, which is just a plain flex box.

    These offsets are measured from the panel's padding BOX, so they don't
    move when .ai-size-popup-right's padding changes — the title does. Both
    therefore track the panel padding deliberately:

      right = the panel's inline padding, so the icon lines up with the
              right edge of the content column.
      top   = the panel's block-start padding + 3px. The title row is 26.4px
              and this button ~20.4px, so +3px centres one on the other
              ((26.4 - 20.4) / 2). That's why 20px padding paired with 23px,
              and why 24px desktop padding pairs with 27px.

    Do NOT try to centre this on .ai-size-popup-header instead — that was
    tried and reverted. The header box is not the title row: centring against
    it pulls the icon roughly 25px ABOVE the title, breaking every step.
  {%- endcomment -%}
  .close {
    top: 23px !important;
    right: var(--padding-lg) !important;
  }

  @media only screen and (min-width: 1024px) {
    .close {
      top: 27px !important;
      right: var(--padding-4xl) !important;
    }
  }

  {%- comment -%}
    The result step (data-step="10") is the only one whose title doesn't start
    flush at the top of the step container. Every other step opens with an
    h3.step-title as the body's first visible child; this one opens with
    .ai-size-answer-header, which carries margin-top: 30px
    (ai-size-design.css:799) that they don't have. That 30px is the whole
    discrepancy — it's what pushed "Your best fit" below the close button.

    Zeroing it brings the title up to where every other step's title sits,
    rather than pushing the close button down to meet it. Both land the same
    "Your best fit ⋯ ✕" row; this one does it without a constant, and keeps
    the icon at the same height on every step.

    It also survives scrolling. Pushing .close down (top: 23 + 30 = 53px) was
    tried first: it holds at scroll-top, but this is the tall step and
    .ai-size-popup-body scrolls while .close doesn't, so the title drifts out
    from under the icon as soon as you scroll. With the margin gone the title
    starts at the top of the body, exactly like every other step, so it
    behaves the same way there too.

    Trade-off: the result step's content sits 30px higher than the app
    intended.
  {%- endcomment -%}
  @media only screen and (min-width: 1024px) {
    .ai-size-answer-header {
      margin-block-start: 0 !important;
    }
  }

  .ai-size-popup-title,
  .ai-size-guide-title,
  .ai-size-how-to-measure__title,
  .ai-size-answer-heading,
  .ai-size-result,
  .step-title {
    color: var(--default-text-color) !important;
  }

  .step-title {
    margin-bottom: var(--margin-xl) !important;
  }

  .ai-size-guide-title,
  .ai-size-guide-text-block {
    text-align: left !important;
    margin-top: 0 !important;
  }

  .ai-size-how-to-measure__title-line {
    display: none !important;
  }

  {%- comment -%}
    display isn't forced here — some of these cards carry .ai-size-hidden
    (only 2-3 relevant measurement cards show per product), and forcing
    display would repeat the exact regression hit with .next-button and the
    how-to-measure-link earlier. The app already renders visible cards as
    flex by default.
  {%- endcomment -%}
  .ai-size-how-to-measure__card {
    flex-direction: row !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    border-radius: var(--style-border-radius-image) !important;
    border: 1px solid var(--dark-border-color) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.ai-size-popup-open .ai-size-how-to-measure__scroll--scrollbar {
    height: auto !important;
  }

  .ai-size-how-to-measure__header {
    text-align: left !important;
    margin-bottom: var(--margin-lg) !important;
  }

  {%- comment -%}
    overflow: hidden lives on the small fixed-size figure box, not the card
    itself — putting it on the card was clipping the description text
    whenever it ran taller than the 108px image.
  {%- endcomment -%}
  .ai-size-how-to-measure__figure {
    width: 108px !important;
    flex: 0 0 108px !important;
    align-self: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top-left-radius: var(--style-border-radius-image) !important;
    border-bottom-left-radius: var(--style-border-radius-image) !important;
  }

  .ai-size-how-to-measure__figure-img {
    width: 108px !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .ai-size-how-to-measure__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-exact-12) !important;
    flex: 1 0 0 !important;
    padding: var(--padding-lg) !important;
  }

  .ai-size-ruler-section-label {
    color: var(--default-text-color) !important;
  }

  .ai-size-result-product-title {
    color: var(--color-blue-70, #3F4855) !important;
  }

  .ai-size-result-container {
    display: flex !important;
    flex-direction: row !important;
    padding: var(--padding-xl) !important;
    align-items: center !important;
    gap: var(--gap-xl) !important;
    align-self: stretch !important;
    border-radius: var(--style-border-radius-button) !important;
    background: var(--light-border-color) !important;
  }

  .ai-size-result-product-title {
    flex: 1 0 0 !important;
  }

  .ai-size-step-51-links-container {
    gap: var(--gap-xs) !important;
  }

  .ai-size-step-51-how-to-measure-link,
  .ai-size-step-51-size-chart-link {
    padding: var(--gap-xs) var(--spacing-exact-12) !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: var(--spacing-exact-12) !important;
    border-radius: var(--style-border-radius-button) !important;
    border: 1px solid var(--dark-border-color) !important;
    background: var(--color-white) !important;
    color: var(--default-text-color) !important;
    margin-inline: 0 !important;
    margin-bottom: var(--spacing-exact-12) !important;
  }

  {%- comment -%}
    align-items was flex-start, which hangs both unit buttons off the top of
    the toggle instead of centring them in it — invisible while the two
    buttons are the same height, but it's the wrong default and it stacks on
    top of the cap-centring issue handled on .ai-size-ruler-unit-btn below.
  {%- endcomment -%}
  .ai-size-ruler-unit-toggle {
    padding: var(--padding-3xs) !important;
    align-items: center !important;
  }

  body.ai-size-popup-open .ai-size-ruler-unit-toggle {
    border-radius: 2px !important;
  }

  .shoulder-label-main,
  .thigh-label-main,
  .torso-label-main {
    gap: var(--gap-lg) !important;
  }

  {%- comment -%}
    border-radius and border-color are set inline with !important, AND a
    separate dynamically-injected <style> tag also forces
    border-radius: 0px !important on this same class list — two different
    mechanisms fighting us at once. The inline pair is stripped via JS;
    body.ai-size-popup-open here beats the injected <style> tag's plain
    class selector on specificity.
  {%- endcomment -%}
  body.ai-size-popup-open .shoulder-label,
  body.ai-size-popup-open .stomach-label,
  body.ai-size-popup-open .fit-preference-label,
  body.ai-size-popup-open .hips-label,
  body.ai-size-popup-open .seat-label {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--dark-border-color) !important;
    border-radius: var(--style-border-radius-button) !important;
    /* background: var(--body-bg-color) !important; */
  }

  body.ai-size-popup-open .body-shape-label {
    display: flex !important;
    padding: var(--spacing-exact-12) var(--padding-lg) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--spacing-exact-12) !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    border-radius: var(--style-border-radius-button) !important;
    background: var(--light-border-color) !important;
  }

  {%- comment -%}
    display: flex is the real fix here. The justify-content / align-items
    pair below was inert — the app renders this as a default inline-block
    button, so neither property had a flex container to act on and the label
    was positioned by padding and half-leading alone. Guarded with
    :not(.ai-size-hidden):not([hidden]) for the same reason as the
    .next-button rule further down — these CTAs are rendered up front and
    hidden per step, and an unguarded display would un-hide them.

    height 28px + padding-block 0 reproduces the box this button already had
    (4px + 4px padding around a 19.6px line box) now that flex centring, not
    padding, positions the label — so the toggle keeps its size.

    A `text-box: trim-both cap alphabetic` was here to centre on cap-height
    rather than the font's em box, since "IN"/"CM" have no descenders. It was
    removed while bisecting a stylesheet-wide CSS failure: it's the only
    non-baseline syntax in this block and therefore the first suspect. The
    residual it corrected measured 0.33px. If it's wanted back, put it in
    assets/base.css — a plain stylesheet with no Shopify {% raw %}{% stylesheet %}{% endraw %}
    processing between it and the browser.
  {%- endcomment -%}
  :is(#ai-size-popup, body.ai-size-popup-open)
    .ai-size-ruler-unit-btn:not(.ai-size-hidden):not([hidden]) {
    display: flex !important;
    box-sizing: border-box !important;
    height: 28px !important;
    padding-block: 0 !important;
    padding-inline: var(--spacing-exact-12) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--gap-xs) !important;
    flex-shrink: 0 !important;
    border-radius: 2px !important;
  }

  {%- comment -%}
    #ai-size-1001-root is a per-session/per-product generated ID (we've seen
    other numbered variants elsewhere), so matching it directly would be
    fragile — body.ai-size-popup-open gives enough specificity to beat their
    #id + class rule without depending on that unstable number.
  {%- endcomment -%}
  body.ai-size-popup-open .ai-size-ruler-unit-btn {
    color: var(--default-text-color) !important;
  }

  {%- comment -%}
    Needs higher specificity than the body.ai-size-popup-open
    .ai-size-ruler-unit-btn (Navy) rule above — otherwise that rule's higher
    specificity would win on the active button too, overriding this white
    text with Navy.
  {%- endcomment -%}
  body.ai-size-popup-open .ai-size-ruler-unit-btn.ai-size-ruler-unit-btn--active {
    background: var(--default-text-color) !important;
    color: var(--color-white) !important;
  }

  .ai-size-popup-content,
  .ai-size-guide {
    position: relative !important;
  }

  {%- comment -%}
    Mobile sizing follows snippets/size-guide-modal.liquid, per design — the
    two modals should read as the same component. That modal is
    `inset: var(--spacing-exact-12)` with
    `max-height: calc(100dvh - (2 * var(--spacing-exact-12)))`, i.e. a 12px
    gutter on all four sides.

    Reproduced here as overlay padding + a card that fills it. min-height and
    max-height are set to the same value so the card is that box rather than
    merely capped by it — the size guide fills its box because its content is
    tall, and the fit finder's steps aren't, so a cap alone would leave it
    short. The footer row is pinned to the bottom, so the slack lands above
    it, which is what the Figma frame shows.

    width/max-width reset because the inset has to come from one mechanism:
    whatever the app uses (overlay padding or a max-width on the card) is
    neutralised so the 12px gutter is the only thing setting the card's size.
  {%- endcomment -%}
  @media only screen and (max-width: 1023px) {
    #ai-size-popup.ai-size-popup {
      padding: var(--spacing-exact-12) !important;
    }

    .ai-size-popup-content.ai-size-popup-content {
      width: 100% !important;
      max-width: none !important;
      min-height: calc(100dvh - (2 * var(--spacing-exact-12))) !important;
      max-height: calc(100dvh - (2 * var(--spacing-exact-12))) !important;
    }
  }

  {%- comment -%}
    Desktop only. The overlay is a full-viewport flex column with
    justify-content: center, so a taller card grows evenly top and bottom.
    The 80px bottom padding anchors it so the card only grows upward, and the
    650px floor stops it resizing between steps of differing height. Both
    were unscoped and leaking onto mobile, where they fought the sizing
    above.
  {%- endcomment -%}
  @media only screen and (min-width: 1024px) {
    #ai-size-popup {
      padding-bottom: var(--margin-6xl) !important;
    }

    .ai-size-popup-content,
    .ai-size-guide {
      min-height: 650px !important;
      max-height: 95dvh !important;
    }
  }

  body.ai-size-popup-open .ai-size-measure-fields-step-51 {
    max-height: 600px !important;
  }

  {%- comment -%}
    Button 1 geometry from Figma: 52px tall, 12px/16px padding, 20px gap
    between label and icon, 4px radius, Navy fill. The 90px width and 52px
    height are exact Figma values with no token equivalent, so they stay
    literal here (same as the 108px how-to-measure figure above).

    The :not() guards are what make forcing `display` safe: several of these
    CTAs are rendered up front and hidden per step (.ai-size-hidden +
    [hidden]), and an unguarded `display: flex !important` is exactly what
    regressed them before. The width is on .next-button alone — "Add to cart"
    and "Continue shopping" are far longer labels than "Next" and would clip
    at 90px, so they take the shared look and size to their own content.

    #ai-size-popup / body.ai-size-popup-open are there for specificity only:
    ai-size-design.css sets text-align on `#ai-size-popup .next-button` with
    !important, which a bare class selector can't outrank. :is() takes the
    highest specificity of its arguments, so both branches clear it.
  {%- endcomment -%}
  :is(#ai-size-popup, body.ai-size-popup-open)
    :is(.next-button, .ai-size-add-to-cart-button, .continue-shopping-button):not(.ai-size-hidden):not([hidden]) {
    display: flex !important;
    box-sizing: border-box !important;
    height: 52px !important;
    padding: var(--spacing-exact-12) var(--padding-lg) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--gap-xl) !important;
    text-align: center !important;
    border-radius: var(--style-border-radius-button) !important;
    background: var(--default-text-color) !important;
    border: none !important;
    color: var(--color-white) !important;
  }

  :is(#ai-size-popup, body.ai-size-popup-open)
    .next-button:not(.ai-size-hidden):not([hidden]) {
    /* width: 90px !important; */
  }

  .ai-size-popup-step[data-step="4"] .ai-size-step4-actions-row.ai-size-step4-kym-chrome .next-button:after{
    display: none !important;
  }

  .ai-fv-active .ai-size-answer .ai-size-result-container.ai-size-step10-meta{
    margin-bottom: 8px !important;
  }

  @media only screen and (min-width: 1024px) {
    .ai-fv-active .ai-size-answer .ai-size-result-container.ai-size-step10-meta{
      margin-bottom: 16px !important;
    }
  }

  .back-button span,
  .back-button-size-chart span {
    color: var(--default-text-color) !important;
    -webkit-text-fill-color: var(--default-text-color) !important;
  }

  body.ai-size-popup-open .body-shape-label div {
    color: var(--default-text-color) !important;
  }

  /* Progress pills — mirrors hero-banner's .swiper-pagination-bullet
     pattern: short inactive dashes, active one elongates horizontally. */
  .navigation-dots {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .navigation-dots .navigation-dot {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--dark-border-color) !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: width var(--animation-speed-slow) var(--animation-easing);
  }

  .navigation-dots .navigation-dot.active {
    width: 48px;
    background: var(--default-text-color) !important;
  }

  .ai-size-know-your-measurements-rulers,
  .start-over-button {
    color: var(--color-blue-70, #3F4855) !important;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  .ai-size-guide-text-block,
  .ai-size-guide-text-block p,
  .ai-size-answer-subheading {
    color: var(--color-blue-70, #3F4855) !important;
  }

  .ai-size-terms span {
    color: var(--default-text-color) !important;
  }

  {%- comment -%}
    20px of breathing room above the terms line, desktop only — below 1024px
    it keeps the app's own spacing. Bare class + !important is the default
    convention in this block; escalate to body.ai-size-popup-open only if the
    app turns out to set this with !important of its own.
  {%- endcomment -%}
  @media only screen and (min-width: 1024px) {
    .ai-size-terms {
      padding-block-start: var(--padding-xl) !important;
    }
  }

  {%- comment -%}
    Hidden by default, revealed only once the app is confirmed usable.
    The trigger inside does nothing but proxy clicks to the AI Fit Finder
    button, so on a product the app has no fit data for it would otherwise
    sit there dead. Defaulting to hidden in CSS — rather than painting it and
    letting JS take it away a few seconds later — means it is never shown on
    those products at all.
    component-size-recommender.js adds data-app-ready once it binds a live
    trigger, and removes it again if the app switches its widget back off.
  {%- endcomment -%}
  size-recommender-component {
    display: none;
  }

  size-recommender-component[data-app-ready] {
    display: contents;
  }

  {%- comment -%}
    The 8px here is the gap between "Your size L" and "Size Guide", and it's
    the only spacing between them now that .variant-option__legend-row
    carries no flex gap. Positioning only — the button's visuals are left to
    however the app renders its widget, per the original brief.
  {%- endcomment -%}
  .variant-option__legend-row:has(.size-guide) .variant-option__whats-my-size {
    margin-inline-end: var(--gap-xs);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    @media screen and (min-width: 1024px){
      min-width: 43px;
      width: fit-content;
    }
  }
  .variant-option__button-label {
    --variant-picker-stroke-color: var(--dark-border-color);
    width: calc((100% - 24px) / 4);
    @media screen and (min-width: 1024px){
      width: 43px;
    }
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    position: relative;
    padding: 6px 8px 7px 8px;
    border: 1px solid var(--dark-border-color);
    border-radius: 4px;
    overflow: clip;
    justify-content: center;
    white-space: nowrap;
    background-color: transparent;
    color: var(--default-text-color);
    font-family: var(--font-paragraph--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--default-text-color);
      border-color: var(--default-text-color);
      color: var(--color-white);
    }
  }
  .variant-option__buttons-grid-gift .variant-option__button-label {
    padding: 8px 12px 10px;
    flex-shrink: 0;
    width: fit-content;
    @media screen and (min-width: 1024px){
      padding: 8px 12px;
    }
  }

  .variant-option__button-label__text {
    text-align: left;
    text-wrap: auto;
  }

  .variant-option--equal-width-buttons {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    align-self: stretch;

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
  }

  @media screen and (min-width: 1024px) {
    .variant-option__buttons-grid {
      width: auto;
    }

    .variant-option--equal-width-buttons .variant-option__button-label__text {
      text-align: left;
      text-wrap: auto;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);
    border-radius: var(--variant-picker-swatch-radius);
    padding: 0;
    border: none;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

  .variant-option--swatches .variant-option__legend-row {
    margin-block-end: var(--gap-xs);
  }

  .variant-option--swatches .variant-option__button-label--has-swatch {
    width: auto;
    padding-block-end: 4px;
    border-bottom: 1px solid transparent;
  }

  .variant-option--swatches .variant-option__button-label--has-swatch .swatch {
    --variant-picker-swatch-width: 32.9px;
    --variant-picker-swatch-height: 32.9px;

    border: 0.5px solid var(--dark-border-color);
  }

  .variant-option--swatches .variant-option__button-label--has-swatch:hover,
  .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked),
  .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked):hover {
    background-color: transparent;
    border-bottom: 1px solid var(--default-text-color);
    outline: none;
  }

  @media screen and (min-width: 1024px) {
    .variant-option--swatches .variant-option__button-label--has-swatch .swatch {
      --variant-picker-swatch-width: 24px;
      --variant-picker-swatch-height: 24px;
    }
  }

  .variant-option__button-label:has(:checked) {
    background-color: var(--default-text-color);
    border-color: var(--default-text-color);
    color: var(--color-white);

    &:hover {
      background-color: var(--default-text-color);
      border-color: var(--default-text-color);
      color: var(--color-white);
    }
  }

  /* Out-of-stock option values stay selectable so choosing one flips the buy box
     into its sold-out state and surfaces the Klaviyo back-in-stock trigger.
     They keep their greyed/strikethrough treatment to read as unavailable. */
  .variant-option__button-label:has([data-option-available='false']) {
    color: #BEC5CD;
    cursor: pointer;
  }

  .variant-option__button-label:has([data-option-available='false']):hover {
    background-color: transparent;
    border-color: var(--dark-border-color);
    color: #BEC5CD;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    outline: none;
    border: none;
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, var(--variant-picker-swatch-radius));
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']):has(:checked) {
    background-color: var(--color-blue-70);
    color: var(--color-white);
    border-color: transparent;

    &:hover {
      background-color: var(--color-blue-70);
      color: var(--color-white);
      border-color: transparent;
    }
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']):has(:checked) svg {
    stroke: var(--color-white);
  }

  .variant-option__button-label input,
  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-color: var(--dark-border-color);
  }

  .variant-option__button-label svg {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--dark-border-color);
  }

  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: 1px solid var(--color-border);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  /* Size guide table — IN/CM unit toggle */
  .ai-size-measurement-wrapper {
    align-items: flex-start !important;
  }

  .ai-size-guide-unit-toggle {
    padding: var(--padding-3xs) !important;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    margin-inline: 0 !important;
  }

  .ai-toggle-btn {
    padding: var(--padding-2xs) var(--spacing-exact-12) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--gap-xs) !important;
    border-radius: 2px !important;
  }

  {%- comment -%}
    ai-size-design.css's own rule is scoped as
    .ai-size-guide-unit-toggle .ai-toggle-btn (2 classes) — matching that
    scoping here since our plain .ai-toggle-btn (1 class) wouldn't out-
    specify it.
  {%- endcomment -%}
  .ai-size-guide-unit-toggle .ai-toggle-btn {
    min-width: 0 !important;
  }

  {%- comment -%}
    The wrapper carries inline custom properties
    (--ai-size-unit-toggle-active-bg/-fg) that the app's own same-specificity
    .ai-toggle-btn.active rule reads from — on a specificity tie, source
    order decides and the app's stylesheet wins. body.ai-size-popup-open
    bumps us past that tie, same fix as the ruler toggle earlier.
  {%- endcomment -%}
  body.ai-size-popup-open .ai-toggle-btn.active {
    background: var(--default-text-color) !important;
    color: var(--color-white) !important;
  }

  /* Size guide table — header + body cells + alternating rows */
  .ai-size-measurement-table thead {
    background: var(--light-border-color) !important;
  }

  .ai-size-measurement-table th {
    padding: var(--gap-xs) var(--spacing-exact-12) !important;
    border-bottom: 1px solid var(--dark-border-color) !important;
    border-right: 1px solid var(--dark-border-color) !important;
    background: var(--light-border-color) !important;
    color: var(--default-text-color) !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .ai-size-measurement-table td {
    width: 84px !important;
    padding: var(--spacing-exact-12) !important;
    color: var(--default-text-color) !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .ai-size-measurement-table tbody tr:nth-child(odd) {
    background: var(--color-white) !important;
  }

  .ai-size-measurement-table tbody tr:nth-child(even) {
    background: var(--light-border-color) !important;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches-metaobject (INDEX:317) */
.product-card__swatch .variant-option__button-label--has-swatch {
    position: relative;
  }

  .product-card__swatch .variant-option__button-label--has-swatch svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
/* END_SNIPPET:variant-swatches-metaobject */

/* START_SNIPPET:variant-swatches (INDEX:318) */
/* Position the unavailable icon so it overlays the full swatch square */
  .product-card__swatch .variant-option__button-label--has-swatch {
    position: relative;
  }

  .product-card__swatch .variant-option__button-label--has-swatch svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:319) */
deferred-media,
  deferred-media iframe {
    aspect-ratio: var(--size-style-aspect-ratio);
  }

  .video-block video,
  .video-block iframe {
    width: var(--size-style-width-mobile);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }

  .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
  }

  .deferred-media__poster-icon svg {
    width: 40px;
    height: 40px;
  }

  deferred-media:not([autoplay]) video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  @media only screen and (min-width: 1024px) {
    .video-block video,
    .video-block iframe {
      width: var(--size-style-width);
    }
  }
/* END_SNIPPET:video */

/* START_SNIPPET:xmas-bundle-cart-row (INDEX:320) */
/* "Complimentary" tag on free items (same look as the builder's tag, assets/xmas-bundle.css). */
  .xmas-bundle-cart-row__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-block-start: 4px;
    padding: 4px 8px;
    border-radius: 2px;
    background: #f6a609;
    color: #06152b;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* Same gift icon as the builder's tag, without its bounce. */
  .xmas-bundle-cart-row__tag-icon {
    flex: none;
    width: 12px;
    height: 12px;
  }
/* END_SNIPPET:xmas-bundle-cart-row */