/** Shopify CDN: Minification failed

Line 17291:9 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:card-grid (INDEX:3) */
.card-grid-section__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
  }

  .card-grid-section__header {
    align-items: var(--card-grid-title-align-items, flex-start);
    display: flex;
    flex-direction: column;
    text-align: var(--card-grid-title-text-align, left);
    width: 100%;
  }

  .card-grid-section__header > .shopify-block {
    align-items: inherit;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
  }

  .card-grid-section__header .typography-block {
    text-align: inherit;
  }

  /* A fill-width title keeps its own box, so the section alignment has to move
     the box as well as the text — matching the doorways header handoff. */
  .card-grid-section__header .typography-block--width-fill {
    margin-inline: 0;
  }

  .card-grid-section__header--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .card-grid-section__header--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .card-grid-section__header--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .card-grid-section__header--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  .card-grid {
    column-gap: var(--card-grid-columns-gap-mobile, 8px);
    display: grid;
    grid-template-columns: repeat(
      var(--card-grid-columns-mobile, 2),
      minmax(0, 1fr)
    );
    row-gap: var(--card-grid-rows-gap-mobile, 24px);
    width: 100%;
  }

  .card-grid > .shopify-block {
    min-width: 0;
    width: 100%;
  }

  /* Cards consume --card-grid-card-* for their own text, but a fill-width block
     also needs its box moved, which only the alignment class can do. */
  .card-grid .typography-block--width-fill {
    margin-inline: 0;
  }

  .card-grid--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .card-grid--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .card-grid--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .card-grid--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  .card-grid--featured {
    grid-template-columns: minmax(0, 1fr);
  }

  @media screen and (min-width: 768px) {
    .card-grid {
      column-gap: var(--card-grid-columns-gap, 16px);
      row-gap: var(--card-grid-rows-gap, 24px);
    }

    .card-grid--uniform {
      grid-template-columns: repeat(
        var(--card-grid-columns, 5),
        minmax(0, 1fr)
      );
    }

    /* A twelve-column track lets every card stay one third wide while the pair
       row is distributed with space around it: one column of inset at each
       edge and two between the cards. */
    .card-grid--featured {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .card-grid--featured > .shopify-block {
      grid-column: span 4;
    }

    .card-grid--featured > .shopify-block:nth-child(5n + 1) {
      grid-column: 2 / span 4;
    }

    .card-grid--featured > .shopify-block:nth-child(5n + 2) {
      grid-column: 8 / span 4;
    }
  }
/* END_SECTION:card-grid */

/* START_SECTION:cart-drawer (INDEX:4) */
.cart-drawer {
    --cart-drawer-overlay: rgb(0 0 0 / 60%);
    display: block;
  }

  /*
    Open and close motion, rebuilt on the review's call (4 Sep): two
    properties, one switch. The panel transitions its transform and the scrim
    its opacity, both on the header's motion tokens so the two drawers move
    alike, and the `is-open` class on the dialog is the only thing that
    changes — assets/cart-drawer.js adds it one layout after showModal() and
    removes it before dialog.close(), waiting for the panel's transitionend.
    Nothing on the dialog element itself animates, and there is no
    @starting-style or discrete display transition to interleave with it.
  */
  /*
    overflow: clip, never hidden. A hidden overflow makes the dialog a scroll
    container; the panel translated off to the right adds scrollable overflow,
    and showModal() focusing the close button scrolls it into view — after
    which the scroll offset shrinks in step with the transform and the panel
    never appears to move. That was the no-animation complaint of both review
    rounds: the transition ran, the geometry APIs even reported it, and the
    screen showed a panel already in place. Clip cannot scroll.
  */
  .cart-drawer__dialog {
    background: transparent;
    border: none;
    height: 100%;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: clip;
    padding: 0;
    position: fixed;
    width: 100%;
  }

  .cart-drawer__dialog::backdrop {
    background-color: transparent;
  }

  .cart-drawer__scrim {
    background-color: var(--cart-drawer-overlay);
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity var(--search-motion-duration)
      var(--search-motion-easing);
  }

  .cart-drawer__panel {
    background-color: var(--color-surface--primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-inline-start: auto;
    max-width: 503px;
    position: relative;
    transform: translateX(100%);
    transition: transform var(--search-motion-duration)
      var(--search-motion-easing);
    width: min(100%, 503px);
    z-index: 1;
  }

  .cart-drawer__dialog.is-open .cart-drawer__scrim {
    opacity: 1;
  }

  .cart-drawer__dialog.is-open .cart-drawer__panel {
    transform: translateX(0);
  }

  /*
    Add to cart, in flight. The drawer no longer opens until the line lands, so
    there is no dimmed bag to show any more — the wait belongs on the button
    that was pressed. This section sits in the header group, so its stylesheet
    is present on every page that has an add-to-cart button.

    Same spinner as the line items. The attribute is repeated to raise
    specificity to (0,2,1): the button is `disabled` while the add is in
    flight, so the rule to beat is `.btn--primary:disabled` at (0,2,0), which
    sets its own colour and would otherwise leave the label showing through
    the spinner. Measured on the build — a single attribute selector lost.
  */
  button[data-cart-drawer-adding][data-cart-drawer-adding] {
    color: transparent;
    pointer-events: none;
    position: relative;
  }

  button[data-cart-drawer-adding]::after {
    animation: cart-drawer-adding-spin 600ms linear infinite;
    border: 2px solid var(--color-text--primary);
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    height: 20px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% -50%;
    width: 20px;
  }

  @keyframes cart-drawer-adding-spin {
    to {
      rotate: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    button[data-cart-drawer-adding]::after {
      animation-duration: 1.8s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__scrim,
    .cart-drawer__panel {
      transition: none;
    }
  }

  .cart-drawer__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .cart-drawer__error {
    background-color: var(--color-surface--primary);
    color: var(--color-brand--red);
    margin: 0;
    padding-block: var(--spacing--2xs);
    padding-inline: var(--spacing--sm);
  }

  /*
    Free Gift With Purchase card. Figma 17227:19637, which renders identically
    to the you-may-also-like item 17183:47854. Spec table:
    TASKS/MARLIN-TASKS/RL/CART/FGWP-869dfj1az-SPEC.md

    Repeated verbatim from sections/cart.liquid: a Section Rendering API
    fragment arrives without its section stylesheet, so each host section owns
    the rules for what it renders. The two are identical, so /cart having both
    in the DOM changes nothing.
  */
  .fgwp {
    display: block;
    width: 100%;
  }

  .fgwp__selectors[hidden] {
    display: none;
  }

  .fgwp__selectors {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
  }

  /*
    Figma `Cart - Free Gift` 16750:18799 / 16807:22503: the offer card sits
    where the first row would (20 / 16 under the bar, from the body's own
    padding), then 20 to a rule and 20 to the first row — the rows' own rhythm.
    The controller element is always in the DOM for its script, so the rule
    and the gaps key on a card actually being shown: with none, it takes no
    room at all. That was the 64px gap of the review — an empty element
    holding two gap slots.
  */
  .cart-drawer .fgwp:not(:has(.fgwp__selectors:not([hidden]) .fgwp-card)) {
    display: none;
  }

  .cart-drawer .fgwp:has(.fgwp__selectors:not([hidden]) .fgwp-card) {
    border-block-end: 1px solid var(--color-border--secondary);
    margin-block-end: var(--spacing--sm);
    padding-block-end: var(--spacing--sm);
  }

  /* Root padding 8, media 90 ending at 98 against info starting at 114 -> 16. */
  .fgwp-card {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    display: flex;
    gap: var(--spacing--xs);
    padding: var(--spacing--3xs);
    position: relative;
    width: 100%;
  }

  /*
    Badge is flush to the top-right corner of the card (Figma x=396 y=0 on a
    463 root, so right edge and top both 0) — not beside the title, where the
    line item's own badge instance is marked hidden. Two-corner tag radius,
    same shape as snippets/product-badge.liquid for this component.
  */
  .fgwp-card__badge {
    align-items: center;
    background-color: var(--color-brand--blue);
    border-end-start-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    color: var(--color-text--invert);
    display: inline-flex;
    /* Client's call: the token is 600, which renders heavier in the browser
       than it reads in Figma, so 400 is what actually matches. */
    font-weight: 400;
    inset-block-start: 0;
    inset-inline-end: 0;
    min-height: 20px;
    padding-inline: var(--spacing--3xs);
    position: absolute;
  }

  .fgwp-card__media {
    flex-shrink: 0;
    height: 112px;
    overflow: hidden;
    width: 90px;
  }

  .fgwp-card__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  /* Title -> price -> actions are 8 apart (44-36, 78-70 in 16721:55150). */
  .fgwp-card__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  .fgwp-card__title {
    color: var(--color-text--primary);
    margin: 0;
    padding-inline-end: 75px;
  }

  /* 4 between the struck price and the current one (44 - 40). */
  .fgwp-card__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

  .fgwp-card__compare {
    color: var(--color-text--primary);
  }

  .fgwp-card__free {
    color: var(--color-brand--blue);
  }

  /*
    Sizes and ADD, from Figma `PC/Cart` 16721:55149 — the you-may-also-like
    upsell card the client pointed at. Chips are a fixed 44.33 x 34 with 12
    inline padding, 8 apart, and the row ends 16 before ADD (Sizes 149 wide,
    Add at x=165). They do NOT grow: stretching them across a full-width cart
    row is what made the S and M buttons enormous.
  */
  /*
    Colour dots — one per gift PRODUCT. The disc is the merchant's hex when
    one is set for that position, otherwise the product's own image, because
    no metafield in this catalogue carries a colour value. The pressed ring is
    a two-layer shadow: card surface first for the gap, then ink.
  */
  .fgwp-card__panel[hidden],
  .fgwp-card__media-frame[hidden] {
    display: none;
  }

  .fgwp-card__panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  .fgwp-card__media-frame {
    height: 100%;
    width: 100%;
  }

  .fgwp-card__colours {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  /*
    16324:19745. The swatch is a 24 hit area with the dot painted INSIDE it,
    not a 24 disc: the design draws r=8 (16 dia) unselected, and chosen
    shrinks the dot to r=6 (12) and adds a ring at r=9 with a 1.2 stroke.
    Sizing the button itself was the review's "disc is too large" — the frame
    was measured and the artwork inside it never was. The button stays 24 in
    both states so the row's 8px gaps and the tap target do not move.

    The dot is the grid's only child, so `place-items` centres it and the
    ring below hangs off the dot rather than needing a box of its own.
  */
  .fgwp-card__colour {
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    flex-shrink: 0;
    height: 24px;
    padding: 0;
    place-items: center;
    width: 24px;
  }

  /* One element for a hex and for an image, so the two cannot drift apart. */
  .fgwp-card__disc {
    background-color: var(--fgwp-swatch, var(--color-surface--primary));
    border-radius: 50%;
    display: block;
    height: 16px;
    overflow: hidden;
    width: 16px;
  }

  /*
    Chosen: the dot shrinks to r=6 and gains the ring — r=9 centreline at a
    1.2 stroke, so its inner edge is r=8.4 and its outer r=9.6.

    The ring is an OUTLINE on the dot, not a second box centred beside it. An
    outline grows from the dot's own edge, so it is concentric by construction
    and there is no independent position to get wrong; a separate 19.2 box had
    to be centred in a 24 track on its own, which put a 1px hairline a
    half-pixel off and read as "not centred" in review. It also cannot be
    measured — getBoundingClientRect does not reach a pseudo-element — so the
    error was invisible to the verification pass.

    2.4 offset + 1.2 stroke around a 12 dot reproduces the design's edges
    exactly: 6 + 2.4 = 8.4 inner, + 1.2 = 9.6 outer.
  */
  .fgwp-card__colour[aria-pressed='true'] .fgwp-card__disc {
    height: 12px;
    outline: 1.2px solid var(--color-border--primary);
    outline-offset: 2.4px;
    width: 12px;
  }

  .fgwp-card__colour-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .fgwp-card__colour:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .fgwp-card__actions {
    align-items: center;
    display: flex;
    /* Long size labels can outgrow the info column — wrap rather than
       push ADD out of the card. */
    flex-wrap: wrap;
    gap: var(--spacing--xs);
    width: fit-content;
  }

  .fgwp-card__sizes {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  /* Static 44.33 (the design's three-chip width) so two chips do not stretch. */
  /*
    44.33 x 34 is the design's chip, drawn for S / M / L. Some products carry
    a long size instead ("Child UK 9-12"), and a fixed width made those wrap
    to five lines and stretched the card — the review's overflowing chips. So
    44.33 becomes the MINIMUM and the chip grows on one line for anything
    longer, which leaves S / M / L exactly as measured.
  */
  .fgwp-card__size {
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    cursor: pointer;
    flex: none;
    min-height: 34px;
    min-width: 44.33px;
    padding-inline: var(--spacing--3xs);
    text-align: center;
    white-space: nowrap;
  }

  .fgwp-card__size--selected {
    border-color: var(--color-border--primary);
  }

  .fgwp-card__size:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* Identical to .cart-upsell-card__add — same button, same glyph, same disc. */
  .fgwp-card__add {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    gap: var(--spacing--4xs);
    padding: 0;
  }

  .fgwp-card__add:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .fgwp-card__add:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .fgwp-card__add-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    transition: background-color 0.2s ease;
    width: 16px;
  }

  /* `State=Selected` primes the ADD control with the brand yellow disc. */
  .fgwp-card__add--ready .fgwp-card__add-icon {
    background-color: var(--color-button--primary);
  }

  .fgwp-card__add-glyph {
    --icon-size: 12px;
  }

  /* Announces the in-flight add. Local rather than the header's utility, so an
     SRA fragment cannot arrive without it. */
  .fgwp-card__status {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* Adding: the spinner sits in the plus's disc, so the row keeps its width. */
  .fgwp-card--adding .fgwp-card__add-glyph {
    visibility: hidden;
  }

  .fgwp-card--adding .fgwp-card__add-icon {
    position: relative;
  }

  .fgwp-card--adding .fgwp-card__add-icon::after {
    animation: fgwp-spin 600ms linear infinite;
    border: 2px solid currentcolor;
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    height: 14px;
    position: absolute;
    width: 14px;
  }

  @keyframes fgwp-spin {
    to {
      rotate: 360deg;
    }
  }

  .fgwp[aria-busy='true'] .fgwp-card {
    opacity: 0.6;
  }

  .fgwp[aria-busy='true'] .fgwp-card__size,
  .fgwp[aria-busy='true'] .fgwp-card__add {
    cursor: progress;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .fgwp-card--adding .fgwp-card__add-icon::after {
      animation-duration: 1.8s;
    }

    .fgwp-card__add-icon {
      transition: none;
    }
  }

  /*
    Figma Cart-Header 16716:48735 / 16716:48740: the title row is
    16 + 29 + 16 = 61 on desktop and 16 + 24 + 16 = 56 on mobile, inset 20 / 16,
    and the rewards bar sits directly under it (43 tall — its disc overhang is
    part of that, see cart-thresholds.liquid). The gap to the first row belongs
    to the body below, not to this header.
  */
  .cart-drawer__header {
    background-color: var(--color-surface--primary);
    display: flex;
    flex-direction: column;
    padding-block: var(--spacing--xs) 0;
    padding-inline: var(--spacing--xs);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .cart-drawer__title-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-block-end: var(--spacing--xs);
    width: 100%;
  }

  /*
    Heading/Desktop/md 22 and Heading/Mobile/md 18 — the title-md token at each
    breakpoint, one step under the cart page's title-lg. Figma's weight is 600
    where the token carries 700. The count is Desktop Body/Bold/md, 8 to the
    right.
  */
  .cart-drawer__title {
    align-items: baseline;
    color: var(--color-text--primary);
    display: inline-flex;
    font-weight: 600;
    gap: var(--spacing--3xs);
    line-height: 1.3;
    margin: 0;
  }

  .cart-drawer__count {
    color: var(--color-text--primary);
  }

  .cart-drawer__close {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px;
  }

  .cart-drawer__close-icon {
    --icon-size: 14px;
  }

  /*
    The body carries the gap under the header — 16 on mobile (the header's own
    bottom padding in the frame) and 20 on desktop (Products Container y=20).
    No gap between its children: each one spaces itself, so an element that
    renders nothing cannot leave a gap behind.

    Overlay scrollbar: a thin rounded thumb on no track, so the list does not
    lose width to a gutter and the chrome stays out of the way. Firefox gets
    the standard properties; WebKit needs its own pseudo-elements.
  */
  .cart-drawer__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-start: var(--spacing--xs);
    padding-inline: var(--spacing--sm);
    scrollbar-color: var(--color-border--secondary) transparent;
    scrollbar-width: thin;
  }

  .cart-drawer__body::-webkit-scrollbar {
    width: 6px;
  }

  .cart-drawer__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .cart-drawer__body::-webkit-scrollbar-thumb {
    background-color: var(--color-border--secondary);
    border-radius: var(--radius--pill);
  }

  .cart-drawer__body:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-border--primary);
  }

  /* Rows 20 above and below each rule (Divider at 160 under a 140 card, next card at 180). */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    width: 100%;
  }

  .cart-drawer__item {
    width: 100%;
  }

  .cart-drawer__divider {
    border: 0;
    border-top: 1px solid var(--color-border--secondary);
    margin-block-end: var(--spacing--sm);
  }

  /*
    Figma `Cart - Empty Cart` `Content`: 118 tall, centred in the body on both
    axes (y=297 in a 712 frame at both breakpoints); title 18/1.3/600 at BOTH
    breakpoints — the mobile frame measures 23 too, so the title-sm mobile
    step of 16 does not apply — 16 to the message (14/1.5), 16 to a 148 x 42
    CTA in Button/xs, all centred.
  */
  /* The body pads the top for the first row; with nothing to pad, that
     padding would pull the centred stack 8px below the true centre. */
  .cart-drawer__body:has(.cart-drawer__empty) {
    padding-block-start: 0;
  }

  .cart-drawer__empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-block: auto;
    padding-block: var(--spacing--lg);
    text-align: center;
  }

  .cart-drawer__empty-title {
    color: var(--color-text--primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  .cart-drawer__empty-text {
    color: var(--color-text--primary);
    margin: var(--spacing--xs) 0 0;
  }

  .cart-drawer__empty .cart-drawer__empty-cta {
    --button-height: 42px;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: normal;
    line-height: var(--button-xs--line-height);
    margin-block-start: var(--spacing--xs);
    min-width: 148px;
    text-transform: capitalize;
  }

  /*
    Figma `Cart - Default` 16715:46375 / 16807:20354: the YMAL block is
    full-bleed (x=0) with its own 24 inset, but the rule above it is the last
    row's divider — inset 20, not full width — 20 under the row, then 8 to the
    block and the block's own 20 to the heading (28 in all). The negative
    margins undo the body's padding for the carousel; the rule is drawn by the
    pseudo-element so it keeps the rows' width. Nothing recommended leaves no
    block behind — assets/cart-upsell.js removes the skeleton when the API
    comes back empty.
  */
  .cart-drawer__recommendations {
    margin-block-start: var(--spacing--sm);
    margin-inline: calc(var(--spacing--sm) * -1);
  }

  .cart-drawer__recommendations::before {
    background-color: var(--color-border--secondary);
    content: '';
    display: block;
    height: 1px;
    margin-inline: var(--spacing--sm);
  }

  .cart-drawer__recommendations .cart-upsell-carousel {
    padding-block-start: calc(var(--spacing--sm) + var(--spacing--3xs));
  }

  .cart-drawer__recommendations:not(:has(.cart-upsell-carousel)) {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .cart-drawer__header {
      padding-inline: var(--spacing--sm);
    }

    .cart-drawer__body {
      padding-block-start: var(--spacing--sm);
    }

    /*
      Rounded on the leading edge only, and only at this breakpoint: on mobile
      the panel is the full viewport width, so there is no edge to round (PO
      review 7 Sep, "desktop only ... the left side of the modal").

      8 is --radius--md, which is radius/md in the design system and the radius
      the theme's other drawer (sections/search-drawer.liquid) already uses.
      The Mini Cart frame itself is square — the review is adding this — so the
      value is a reuse rather than a measurement, and the spec says so.

      Clipping is what makes it visible: the header and the footer each paint
      their own white ground out to the panel edges and would square the
      corners off again.
    */
    .cart-drawer__panel {
      border-end-start-radius: var(--radius--md);
      border-start-start-radius: var(--radius--md);
      overflow: clip;
    }
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:cart (INDEX:7) */
.cart-page {
    display: block;
    width: 100%;
  }

  /* Title block: 20 above and below on mobile, 40 above on desktop. */
  .cart-page__header {
    padding-block: var(--spacing--sm);
  }

  /*
    Figma `Heading/Mobile/lg` is 22/1.3 at weight **600**, not the 700 the
    title-lg token carries — that extra weight is what read as a larger label.
    Overridden locally rather than in the token, which the rest of the theme
    shares.
  */
  .cart-page__title {
    align-items: center;
    color: var(--color-text--primary);
    display: flex;
    flex-wrap: wrap;
    font-weight: 600;
    gap: var(--spacing--3xs);
    margin: 0;
  }

  /* `Desktop Body/Bold/md` — 14/1.5 at 600, so the count is semibold too. */
  .cart-page__count {
    color: var(--color-text--primary);
    font-weight: var(--body-md--weight-bold);
  }

  .cart-page__error {
    color: var(--color-brand--red);
    margin: 0;
    padding-block-end: var(--spacing--3xs);
  }

  .cart-page__error[hidden] {
    display: none;
  }

  /*
    Empty state: 80 above and below the stack, 16 between its parts.

    No align-items or text-align here on purpose. Each block already carries
    its own width and alignment controls (the template ships fill + centre),
    and centring them from the section would leave a merchant switching a
    block to fit-content / left with a control that silently does nothing.
  */
  .cart-page__empty {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    margin-inline: auto;
    max-width: 800px;
    padding-block: var(--spacing--4xl);
    width: 100%;
  }

  .cart-page__empty--editor {
    border: 1px dashed var(--color-border--secondary);
  }

  .cart-page__empty-hint {
    margin: 0;
  }

  /*
    Empty-state CTA measures 148x42 with `Button/xs` type in both frames.
    Same reasoning as the summary CTA — restated locally, global token
    (36 high, uppercase font-button-sm) left alone.
  */
  .cart-page__empty .button-block__link.btn {
    --button-height: 42px;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: normal;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
  }

  .cart-page__layout {
    display: grid;
    grid-template-areas:
      'items'
      'upsell'
      'aside';
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .cart-page__items {
    grid-area: items;
    min-width: 0;
  }

  /* No frame specifies the gaps around the bar on this page: the cart frames
     predate it, and the Figma node supplied is the component itself, whose 20px
     inset belongs to the drawer's padding context rather than to this column.
     So the placement follows the page's existing rhythm instead, and this is
     stated in the hand-off: --spacing--sm below, matching the header's own
     padding-block, so the bar sits on the same rhythm as everything around it. */
  .cart-page__thresholds {
    margin-block-end: var(--spacing--sm);
  }

  /* Column headings are desktop-only; mobile leads with a rule instead. */
  .cart-page__columns {
    display: none;
  }

  .cart-line-items {
    border-block-start: 1px solid var(--color-border--secondary);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Each row sits 20 clear of the rule above and below it. */
  .cart-line-items__item {
    border-block-end: 1px solid var(--color-border--secondary);
    padding-block: var(--spacing--sm);
  }

  /*
    Upsells bleed to the viewport edges on mobile (Figma YMAL is x=0, w=375
    while the rows are inset 20) and stay inside the column on desktop.
  */
  .cart-page__upsell {
    border-block-start: 1px solid var(--color-border--secondary);
    grid-area: upsell;
    margin-block-start: var(--spacing--sm);
    margin-inline: calc(var(--page-margin) * -1);
    min-width: 0;
  }

  .cart-upsell {
    display: block;
  }

  /* Nothing recommended (or the request failed) leaves no block behind. */
  .cart-page__upsell:not(:has(.cart-upsell-carousel)) {
    display: none;
  }

  /*
    Mobile `Checkout Block` (16817:32934) is one full-bleed surface-brand card
    holding the summary AND the USP strip, so the card lives here rather than
    on .cart-summary. Desktop splits them again: the card is the summary alone
    and the USPs sit on the page below it.
  */
  .cart-page__aside {
    background-color: var(--color-surface--brand);
    /* Figma radius/md. The theme's scale stops at radius--sm (4). */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    grid-area: aside;
    margin-inline: calc(var(--page-margin) * -1);
    min-width: 0;
    padding: var(--spacing--sm);
  }

  /*
    Mobile USPs are a stacked list, icon beside copy. The PDP grid layout is
    untouched — this only re-lays the shared component inside the cart.
  */
  .cart-page__usps .product-usps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    /* The shared component sets padding-block only, so the ul keeps the UA's
       40px padding-inline-start and the rows sit indented. */
    padding-block: 0;
    padding-inline: 0;
  }

  .cart-page__usps .product-usps__item {
    align-items: center;
    flex-direction: row;
    gap: var(--spacing--3xs);
    min-height: 32px;
    text-align: start;
  }

  @media screen and (min-width: 768px) {
    .cart-page__header {
      /*
        Figma leaves 50 between the title and the first rule
        (labels at 224 - title bottom at 174): 20 title padding + 10 frame gap
        + 20 contents padding. Taken as the 48 token, 2px under the drawing.
      */
      padding-block: var(--spacing--xl) var(--spacing--2xl);
    }

    /*
      One grid for the column headings and every row, so Item / Quantity /
      Subtotal sit above their cells.

      Widths come from the page instance (16817:25705 at 841 wide), not the
      component master (870 wide) — the master reports quantity and subtotal at
      163, but they fill, and at the page's own width they are 148.5 each:
      841 - 112 media - 360 info - 32 bin - 40 gaps = 297, halved. Written as
      fr in that ratio so 1440 reproduces the design exactly and narrower
      desktops shrink proportionally instead of starving the title.

      The first track is 120, not 112: the media is 112 and sits at the start of
      it, so the 8 of slack plus the 8 column gap make up the 16 the design puts
      between tile and title (128-112). Carrying that as a margin on the title
      instead would take it out of the 360 track and drift every column.
      120 + 32 gaps + 32 bin = 184 fixed, so the fr tracks share exactly 657.
    */
    .cart-page__items {
      --cart-line-grid: 120px 360fr 148.5fr 148.5fr 32px;
    }

    .cart-page__columns {
      border-block-end: 1px solid var(--color-border--secondary);
      color: var(--color-text--primary);
      column-gap: var(--spacing--3xs);
      display: grid;
      grid-template-columns: var(--cart-line-grid);
      padding-block-end: var(--spacing--xs);
    }

    /* Figma puts the Item label at x=0, over the tile — not over the title. */
    .cart-page__column--item {
      grid-column: 1 / 3;
    }

    /*
      Quantity is the one heading that is not centred on its cell: Figma sets
      it 33 right of the quantity control's centre, which right-aligning in the
      cell reproduces. Subtotal stays centred, as drawn.
    */
    .cart-page__column--quantity {
      grid-column: 3;
      text-align: end;
    }

    .cart-page__column--subtotal {
      grid-column: 4;
      text-align: center;
    }

    .cart-line-items {
      border-block-start: 0;
    }

    /* 32 from the heading rule to the first row (280 - 248). */
    .cart-line-items__item:first-child {
      padding-block-start: var(--spacing--lg);
    }

    /* Desktop already has the last row's rule above it — no second one. */
    .cart-page__upsell {
      border-block-start: 0;
      margin-block-start: var(--spacing--lg);
      margin-inline: 0;
    }

    /*
      PO review (CU-869ev1qza): the block's #efefef fill went in the first
      review, and without it the carousel's 24 inset read as the heading and
      cards sitting off the rows' left edge. They now start where the rows do;
      the track keeps its bleed to the right.
    */
    .cart-page__upsell .cart-upsell-carousel {
      padding-inline-start: 0;
    }

    .cart-page__aside {
      background-color: transparent;
      border-radius: 0;
      margin-inline: 0;
      padding: 0;
    }

    /*
      Figma `Column` (16817:25628) is 455 x 98: three 132-wide items 16 apart,
      centred, with 12 above and below. 3x132 + 2x16 = 428, so the 13.5 inline
      inset is what makes the items land at 132 inside the 455 card column.
    */
    .cart-page__usps .product-usps {
      display: grid;
      gap: var(--spacing--xs);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding-block: var(--spacing--2xs);
      padding-inline: 13.5px;
    }

    .cart-page__usps .product-usps__item {
      flex-direction: column;
      gap: var(--spacing--3xs);
      text-align: center;
    }
  }

  /*
    The two-column layout needs room for a whole row beside a 455 summary, so
    it waits for 1200 rather than joining the rest of the desktop styling at
    768. A row cannot compress: 120 media track + 32 bin + 32 gaps is fixed,
    and `fr` tracks floor at their content, so the quantity column never goes
    below the 96 pill. At 768 the items column would be ~169 against a ~460
    minimum row, and since the summary is sticky and paints over it, the
    quantity, price and bin would sit under the card with no way to scroll to
    them (html/body clip the overflow). 1200 gives the column ~601.

    Between 768 and 1199 the page stays stacked, which is the mobile order with
    the desktop row grid — the rows are full width there, so they fit.
  */
  @media screen and (min-width: 1200px) {
    .cart-page__layout {
      align-items: start;
      column-gap: var(--spacing--2xl);
      grid-template-areas:
        'items  aside'
        'upsell aside';
      grid-template-columns: minmax(0, 1fr) 455px;
      grid-template-rows: auto 1fr;
    }

    .cart-page__aside {
      position: sticky;
      top: var(--cart-aside-offset, var(--spacing--sm));
    }

    /*
      `--header-height` is scoped to .header, so it cannot be read here. Clear
      the header's own height when the merchant has the sticky header on,
      keyed on its state classes rather than a viewport guess: 88 inline, 60
      compact (sections/header.liquid). `header--search-stacked` resolves well
      below this breakpoint, so it cannot co-occur.
    */
    body:has(.header-wrapper--sticky) .cart-page__aside {
      --cart-aside-offset: calc(88px + var(--spacing--sm));
    }

    body:has(.header-wrapper--sticky):has(.header--compact) .cart-page__aside {
      --cart-aside-offset: calc(60px + var(--spacing--sm));
    }
  }

  /*
    Free Gift With Purchase card. Figma 17227:19637, which renders identically
    to the you-may-also-like item 17183:47854. Spec table:
    TASKS/MARLIN-TASKS/RL/CART/FGWP-869dfj1az-SPEC.md

    The same block is repeated in sections/cart-drawer.liquid: a Section
    Rendering API fragment arrives without its section stylesheet, so each host
    section owns the rules for what it renders.
  */
  .fgwp {
    display: block;
    width: 100%;
  }

  .fgwp__selectors[hidden] {
    display: none;
  }

  .fgwp__selectors {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
  }

  /*
    Scoped to the page's own card, because the DRAWER is in the DOM on /cart
    too and this selector reached it: its gift block already carries a 20
    padding above its rule, so the leaked margin stacked into a 40 gap above
    the rule against 20 below — the uneven spacing the 7 Sep review pulled up
    ("reduce spacing here to match below the divider"). The design has 20 on
    both sides (Divider at 158 under a widget ending 138, first row at 178).

    The cart page needs the margin: its gift card has no rule of its own, so
    this is the whole gap to the items table.
  */
  .cart-page .fgwp__selectors {
    margin-block-end: var(--spacing--sm);
  }

  /* Root padding 8, media 90 ending at 98 against info starting at 114 -> 16. */
  .fgwp-card {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    display: flex;
    gap: var(--spacing--xs);
    padding: var(--spacing--3xs);
    position: relative;
    width: 100%;
  }

  /*
    Badge is flush to the top-right corner of the card (Figma x=396 y=0 on a
    463 root, so right edge and top both 0) — not beside the title, where the
    line item's own badge instance is marked hidden. Two-corner tag radius,
    same shape as snippets/product-badge.liquid for this component.
  */
  .fgwp-card__badge {
    align-items: center;
    background-color: var(--color-brand--blue);
    border-end-start-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    color: var(--color-text--invert);
    display: inline-flex;
    /* Client's call: the token is 600, which renders heavier in the browser
       than it reads in Figma, so 400 is what actually matches. */
    font-weight: 400;
    inset-block-start: 0;
    inset-inline-end: 0;
    min-height: 20px;
    padding-inline: var(--spacing--3xs);
    position: absolute;
  }

  .fgwp-card__media {
    flex-shrink: 0;
    height: 112px;
    overflow: hidden;
    width: 90px;
  }

  .fgwp-card__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  /* Title -> price -> actions are 8 apart (44-36, 78-70 in 16721:55150). */
  .fgwp-card__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  .fgwp-card__title {
    color: var(--color-text--primary);
    margin: 0;
    padding-inline-end: 75px;
  }

  /* 4 between the struck price and the current one (44 - 40). */
  .fgwp-card__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

  .fgwp-card__compare {
    color: var(--color-text--primary);
  }

  .fgwp-card__free {
    color: var(--color-brand--blue);
  }

  /*
    Sizes and ADD, from Figma `PC/Cart` 16721:55149 — the you-may-also-like
    upsell card the client pointed at. Chips are a fixed 44.33 x 34 with 12
    inline padding, 8 apart, and the row ends 16 before ADD (Sizes 149 wide,
    Add at x=165). They do NOT grow: stretching them across a full-width cart
    row is what made the S and M buttons enormous.
  */
  /*
    Colour dots — one per gift PRODUCT. The disc is the merchant's hex when
    one is set for that position, otherwise the product's own image, because
    no metafield in this catalogue carries a colour value. The pressed ring is
    a two-layer shadow: card surface first for the gap, then ink.
  */
  .fgwp-card__panel[hidden],
  .fgwp-card__media-frame[hidden] {
    display: none;
  }

  .fgwp-card__panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  .fgwp-card__media-frame {
    height: 100%;
    width: 100%;
  }

  .fgwp-card__colours {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  /*
    16324:19745. The swatch is a 24 hit area with the dot painted INSIDE it,
    not a 24 disc: the design draws r=8 (16 dia) unselected, and chosen
    shrinks the dot to r=6 (12) and adds a ring at r=9 with a 1.2 stroke.
    Sizing the button itself was the review's "disc is too large" — the frame
    was measured and the artwork inside it never was. The button stays 24 in
    both states so the row's 8px gaps and the tap target do not move.

    The dot is the grid's only child, so `place-items` centres it and the
    ring below hangs off the dot rather than needing a box of its own.
  */
  .fgwp-card__colour {
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    flex-shrink: 0;
    height: 24px;
    padding: 0;
    place-items: center;
    width: 24px;
  }

  /* One element for a hex and for an image, so the two cannot drift apart. */
  .fgwp-card__disc {
    background-color: var(--fgwp-swatch, var(--color-surface--primary));
    border-radius: 50%;
    display: block;
    height: 16px;
    overflow: hidden;
    width: 16px;
  }

  /*
    Chosen: the dot shrinks to r=6 and gains the ring — r=9 centreline at a
    1.2 stroke, so its inner edge is r=8.4 and its outer r=9.6.

    The ring is an OUTLINE on the dot, not a second box centred beside it. An
    outline grows from the dot's own edge, so it is concentric by construction
    and there is no independent position to get wrong; a separate 19.2 box had
    to be centred in a 24 track on its own, which put a 1px hairline a
    half-pixel off and read as "not centred" in review. It also cannot be
    measured — getBoundingClientRect does not reach a pseudo-element — so the
    error was invisible to the verification pass.

    2.4 offset + 1.2 stroke around a 12 dot reproduces the design's edges
    exactly: 6 + 2.4 = 8.4 inner, + 1.2 = 9.6 outer.
  */
  .fgwp-card__colour[aria-pressed='true'] .fgwp-card__disc {
    height: 12px;
    outline: 1.2px solid var(--color-border--primary);
    outline-offset: 2.4px;
    width: 12px;
  }

  .fgwp-card__colour-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .fgwp-card__colour:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .fgwp-card__actions {
    align-items: center;
    display: flex;
    /* Long size labels can outgrow the info column — wrap rather than
       push ADD out of the card. */
    flex-wrap: wrap;
    gap: var(--spacing--xs);
    width: fit-content;
  }

  .fgwp-card__sizes {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  /* Static 44.33 (the design's three-chip width) so two chips do not stretch. */
  /*
    44.33 x 34 is the design's chip, drawn for S / M / L. Some products carry
    a long size instead ("Child UK 9-12"), and a fixed width made those wrap
    to five lines and stretched the card — the review's overflowing chips. So
    44.33 becomes the MINIMUM and the chip grows on one line for anything
    longer, which leaves S / M / L exactly as measured.
  */
  .fgwp-card__size {
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    cursor: pointer;
    flex: none;
    min-height: 34px;
    min-width: 44.33px;
    padding-inline: var(--spacing--3xs);
    text-align: center;
    white-space: nowrap;
  }

  .fgwp-card__size--selected {
    border-color: var(--color-border--primary);
  }

  .fgwp-card__size:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* Identical to .cart-upsell-card__add — same button, same glyph, same disc. */
  .fgwp-card__add {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    gap: var(--spacing--4xs);
    padding: 0;
  }

  .fgwp-card__add:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .fgwp-card__add:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .fgwp-card__add-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    transition: background-color 0.2s ease;
    width: 16px;
  }

  /* `State=Selected` primes the ADD control with the brand yellow disc. */
  .fgwp-card__add--ready .fgwp-card__add-icon {
    background-color: var(--color-button--primary);
  }

  .fgwp-card__add-glyph {
    --icon-size: 12px;
  }

  /* Announces the in-flight add. Local rather than the header's utility, so an
     SRA fragment cannot arrive without it. */
  .fgwp-card__status {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* Adding: the spinner sits in the plus's disc, so the row keeps its width. */
  .fgwp-card--adding .fgwp-card__add-glyph {
    visibility: hidden;
  }

  .fgwp-card--adding .fgwp-card__add-icon {
    position: relative;
  }

  .fgwp-card--adding .fgwp-card__add-icon::after {
    animation: fgwp-spin 600ms linear infinite;
    border: 2px solid currentcolor;
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    height: 14px;
    position: absolute;
    width: 14px;
  }

  @keyframes fgwp-spin {
    to {
      rotate: 360deg;
    }
  }

  .fgwp[aria-busy='true'] .fgwp-card {
    opacity: 0.6;
  }

  .fgwp[aria-busy='true'] .fgwp-card__size,
  .fgwp[aria-busy='true'] .fgwp-card__add {
    cursor: progress;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .fgwp-card--adding .fgwp-card__add-icon::after {
      animation-duration: 1.8s;
    }

    .fgwp-card__add-icon {
      transition: none;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection-grid (INDEX:8) */
.collection-product-grid {
    padding-block: var(--grid-padding-block-start-mobile)
      var(--grid-padding-block-end-mobile);
  }

  .collection-page__grid {
    display: grid;
    gap: var(--collection-rows-gap-mobile) var(--collection-columns-gap-mobile);
    grid-template-columns: repeat(
      var(--collection-mobile-columns),
      minmax(0, 1fr)
    );
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 768px) {
    .collection-product-grid {
      padding-block: var(--grid-padding-block-start)
        var(--grid-padding-block-end);
    }

    .collection-page__grid {
      --collection-total-gap: calc(
        (var(--collection-columns) - 1) * var(--collection-columns-gap)
      );
      --collection-max-track: calc(
        (100% - var(--collection-total-gap)) / var(--collection-columns)
      );

      gap: var(--collection-rows-gap) var(--collection-columns-gap);
      grid-template-columns: repeat(
        auto-fill,
        minmax(
          max(var(--collection-card-min), var(--collection-max-track)),
          1fr
        )
      );
    }
  }
/* END_SECTION:collection-grid */

/* START_SECTION:collection-header (INDEX:9) */
/* The schema's `class` puts this class on the <section> wrapper and
     section-shell repeats it on the shell div, so an unqualified rule drew the
     line twice — two stacked 1px rules reading as one heavy 2px band, in two
     different greys since only the shell sits inside the colour-scheme scope.
     Pinning it to the shell keeps one line, and keeps it scheme-aware. */
  .section-shell.collection-header-section {
    border-bottom: 1px solid var(--color-border--secondary);
  }

  .collection-header-section__layout {
    display: flex;
    flex-direction: column;

    /* Resolved here rather than in the block, which redefines
       --padding-inline-* for its own padding settings and so cannot read the
       shell inset it needs to cancel on mobile. */
    --quick-links-inset-start: var(--page-margin);
    --quick-links-inset-end: var(--page-margin);
  }
/* END_SECTION:collection-header */

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

/* START_SECTION:content-blocks (INDEX:11) */
.content-blocks-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    width: 100%;
  }

  .content-blocks__header {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }

  .content-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    width: 100%;
  }

  .content-blocks__swiper {
    overflow: hidden;
    width: 100%;
  }

  .content-blocks__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: var(--content-blocks-gap, 20px);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .content-blocks__swiper:not(.swiper-initialized)
    .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .content-blocks__swiper:not(.swiper-initialized)
    .swiper-wrapper
    > .shopify-block {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: var(--content-blocks-card-width-mobile, 304px);
  }

  /* Empty blocks render no card but still leave a Shopify wrapper */
  .content-blocks__swiper
    .swiper-wrapper
    > .shopify-block:not(:has(.content-block)) {
    display: none;
  }

  .content-blocks__swiper.swiper .swiper-wrapper > .shopify-block.swiper-slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: auto;
    width: var(--content-blocks-card-width-mobile, 304px);
  }

  .content-blocks__swiper.swiper
    .swiper-wrapper
    > .shopify-block.swiper-slide
    .content-block {
    width: 100%;
  }

  .content-blocks__footer {
    align-items: center;
    display: flex;
    gap: var(--spacing--md);
  }

  .content-blocks__footer[hidden] {
    display: none;
  }

  .content-blocks__nav {
    display: inline-flex;
    gap: var(--spacing--none);
  }

  .content-blocks__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .content-blocks__nav-button:disabled {
    cursor: default;
    opacity: 0.3;
  }

  .content-blocks__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .content-blocks__nav-icon {
    --icon-size: 20px;
  }

  .content-blocks__progress {
    align-items: center;
    display: inline-flex;
    gap: var(--spacing--4xs);
    min-height: 3px;
  }

  .content-blocks__progress[hidden] {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .content-blocks-layout,
    .content-blocks {
      gap: var(--spacing--lg);
    }

    .content-blocks__swiper:not(.swiper-initialized)
      .swiper-wrapper
      > .shopify-block {
      width: var(--content-blocks-card-width-desktop, 320px);
    }

    .content-blocks__swiper.swiper
      .swiper-wrapper
      > .shopify-block.swiper-slide {
      width: var(--content-blocks-card-width-desktop, 320px);
    }

    .content-blocks[data-desktop-slides='3']
      .content-blocks__swiper.swiper
      .swiper-wrapper
      > .shopify-block.swiper-slide,
    .content-blocks[data-desktop-slides='4']
      .content-blocks__swiper.swiper
      .swiper-wrapper
      > .shopify-block.swiper-slide {
      width: auto;
    }

    /* Equal-width fallback when Swiper never initializes */
    .content-blocks[data-desktop-slides='3']
      .content-blocks__swiper:not(.swiper-initialized)
      .swiper-wrapper
      > .shopify-block {
      width: calc((100% - (2 * var(--content-blocks-gap, 20px))) / 3);
    }

    .content-blocks[data-desktop-slides='4']
      .content-blocks__swiper:not(.swiper-initialized)
      .swiper-wrapper
      > .shopify-block {
      width: calc((100% - (3 * var(--content-blocks-gap, 20px))) / 4);
    }
  }
/* END_SECTION:content-blocks */

/* START_SECTION:content (INDEX:12) */
.content-section--divider {
    border-block-start: 1px solid var(--color-border--secondary);
  }

  .content-section__layout {
    align-items: var(--content-section-items, center);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    margin: var(--content-section-margin, 0 auto);
    max-width: var(--content-section-max-width, 800px);
    text-align: var(--content-section-align, center);
    width: 100%;
  }

  /* Blocks are wrapped by Shopify — stretch them to the content column */
  .content-section__layout > .shopify-block {
    width: 100%;
  }

  /*
   * A typography block only owns its alignment at `width: fill` — at
   * `fit-content` its own control is inert, so the box follows the section's
   * text alignment instead of sitting hard left inside a full-width wrapper.
   */
  .content-section__layout--align-center .typography-block--width-fit-content {
    margin-inline: auto;
  }

  .content-section__layout--align-right .typography-block--width-fit-content {
    margin-inline: auto 0;
  }

  /*
   * Rich text copy is often merchant- or metafield-authored, so the heading
   * level is out of the theme's control. Flatten the top levels to title-md.
   */
  .content-section .rich-text-block :is(h1, h2) {
    font-size: var(--title-md--size);
  }

  /* metafield_tag wraps dynamic-source copy in its own element */
  .content-section .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .content-section .metafield-rich_text_field > :last-child {
    margin-block-end: 0;
  }

  .content-section__placeholder {
    color: var(--color-text--secondary);
    margin: 0;
  }
/* END_SECTION:content */

/* START_SECTION:depict-patched-collection-grid (INDEX:13) */
.collection-product-grid {
    padding-block: var(--grid-padding-block-start-mobile)
      var(--grid-padding-block-end-mobile);
  }

  .collection-page__grid {
    display: grid;
    gap: var(--collection-rows-gap-mobile) var(--collection-columns-gap-mobile);
    grid-template-columns: repeat(
      var(--collection-mobile-columns),
      minmax(0, 1fr)
    );
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 768px) {
    .collection-product-grid {
      padding-block: var(--grid-padding-block-start)
        var(--grid-padding-block-end);
    }

    .collection-page__grid {
      --collection-total-gap: calc(
        (var(--collection-columns) - 1) * var(--collection-columns-gap)
      );
      --collection-max-track: calc(
        (100% - var(--collection-total-gap)) / var(--collection-columns)
      );

      gap: var(--collection-rows-gap) var(--collection-columns-gap);
      grid-template-columns: repeat(
        auto-fill,
        minmax(
          max(var(--collection-card-min), var(--collection-max-track)),
          1fr
        )
      );
    }
  }
/* END_SECTION:depict-patched-collection-grid */

/* START_SECTION:designer-founder-notes (INDEX:14) */
.designer-founder-notes {
    display: flex;
    flex-direction: column;
    gap: var(--designer-founder-notes-gap, 8px);
    width: 100%;
  }

  .designer-founder-notes__panel {
    align-items: center;
    background-color: color-mix(
      in srgb,
      var(--designer-founder-notes-panel-bg, #fde47e)
        var(--designer-founder-notes-panel-bg-opacity, 100%),
      transparent
    );
    border-radius: var(--radius--sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing--lg) var(--spacing--sm);
  }

  .designer-founder-notes__copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    min-width: 0;
    width: 100%;
  }

  /* Headshot sits beside the headline on mobile, above it on desktop. */
  .designer-founder-notes__intro {
    align-items: center;
    display: flex;
    gap: var(--spacing--2xs);
    width: 100%;
  }

  .designer-founder-notes__headshot {
    border-radius: 50%;
    flex-shrink: 0;
    height: 56px;
    object-fit: cover;
    width: 56px;
  }

  .designer-founder-notes__headline {
    margin: 0;
    min-width: 0;
  }

  .designer-founder-notes__quote,
  .designer-founder-notes__body {
    border: 0;
    font-style: normal;
    margin: 0;
  }

  .designer-founder-notes__attribution {
    margin: 0;
  }

  /* Body roles are fixed sizes in the token set — Figma steps this panel from
     body/md on mobile to body/lg from 768px, so the size is set per breakpoint
     while the role classes keep the weight and line height. */
  .designer-founder-notes__headline,
  .designer-founder-notes__quote,
  .designer-founder-notes__attribution {
    font-size: var(--body-md--size);
  }

  .designer-founder-notes__media {
    border-radius: var(--radius--sm);
    height: 440px;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .designer-founder-notes__media-asset,
  .designer-founder-notes__media .media-block__video-wrap,
  .designer-founder-notes__media .media-block__image,
  .designer-founder-notes__media-image {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .designer-founder-notes__media .media-block__video {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .designer-founder-notes--media-only .designer-founder-notes__media {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .designer-founder-notes {
      align-items: stretch;
      flex-direction: row;
      gap: var(--designer-founder-notes-gap, 8px);
    }

    .designer-founder-notes--media-only {
      flex-direction: column;
    }

    .designer-founder-notes__panel {
      flex: 0 1 547px;
      padding: var(--spacing--3xl) var(--spacing--2xl);
    }

    .designer-founder-notes__copy {
      gap: var(--spacing--2xl);
      max-width: 446px;
    }

    .designer-founder-notes__intro {
      flex-direction: column;
      justify-content: center;
    }

    .designer-founder-notes__headshot {
      height: 64px;
      width: 64px;
    }

    .designer-founder-notes__headline,
    .designer-founder-notes__quote,
    .designer-founder-notes__attribution {
      font-size: var(--body-lg--size);
      text-align: center;
    }

    .designer-founder-notes__media {
      aspect-ratio: auto;
      flex: 1 1 auto;
      height: auto;
      min-height: 20rem;
    }

    .designer-founder-notes__media-image {
      bottom: 0;
      height: 100%;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
/* END_SECTION:designer-founder-notes */

/* START_SECTION:doorways-carousel (INDEX:15) */
.doorways-carousel-section__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
  }

  .doorways-carousel-section__track {
    display: grid;
    gap: var(--doorways-columns-gap);
    grid-template-columns: repeat(var(--doorways-columns), minmax(0, 1fr));
  }

  @media screen and (max-width: 767px) {
    .doorways-carousel-section__track {
      grid-template-columns: repeat(
        var(--doorways-mobile-columns),
        minmax(0, 1fr)
      );
    }
  }
/* END_SECTION:doorways-carousel */

/* START_SECTION:doorways (INDEX:16) */
.doorways-section .mini-doorway {
    gap: var(--doorways-content-gap, 8px);
  }

  /* The design-system card pairs a 14px title with the 12px body copy rather
     than following the title scale, so the square variant borrows the body-md
     tokens. card-title only offers title-* sizes in the editor. */
  .doorways-section .mini-doorway--square .card-title {
    font-size: var(--body-md--size);
    font-weight: var(--body-md--weight-bold);
  }

  .doorways-section .mini-doorway .media-block {
    width: 100%;
  }

  .doorways-section .mini-doorway .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, 253 / 378);
  }

  .doorways-section .mini-doorway .media-block__desktop {
    aspect-ratio: var(--media-ratio-desktop, 253 / 378);
  }

  .doorways-section .mini-doorway .media-block__image,
  .doorways-section .mini-doorway .media-block__video,
  .doorways-section .mini-doorway .media-block__placeholder {
    height: 100%;
    object-fit: var(--doorway-media-object-fit, cover);
  }

  .doorways-section {
    --doorway-tile-width: 253px;
    --doorway-tile-width-square: 303px;
    --doorway-tile-width-wide: 313px;
  }

  .doorways-section
    :is(
      .section-shell__content--page-width,
      .section-shell__content--full-width
    ) {
    --doorway-tile-width: 292px;
    --doorway-tile-width-square: 303px;
    --doorway-tile-width-wide: 360px;
  }

  @media screen and (min-width: 768px) {
    .doorways-section {
      --doorway-tile-width-wide: 435px;
    }

    .doorways-section
      :is(
        .section-shell__content--page-width,
        .section-shell__content--full-width
      ) {
      --doorway-tile-width: 340px;
      --doorway-tile-width-square: 321px;
      --doorway-tile-width-wide: 480px;
    }
  }

  .doorways {
    --doorways-track-pad-start: var(--page-margin);
    --doorways-track-pad-end: var(--page-margin);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
  }

  @media screen and (min-width: 768px) {
    .doorways {
      gap: var(--spacing--lg);
    }
  }

  /* Gutters move onto the track so slides can run to the canvas edge. */
  .doorways-section .section-shell__content {
    padding-inline: 0;
    width: 100%;
  }

  .doorways-section .section-shell__content--full-width .doorways,
  .doorways-section .section-shell__content--viewport .doorways {
    --doorways-track-pad-start: 0px;
    --doorways-track-pad-end: 0px;
  }

  @media screen and (min-width: 768px) {
    .doorways {
      gap: var(--spacing--lg);
    }
  }

  .doorways__header {
    align-items: var(--doorways-title-align, flex-start);
    display: flex;
    flex-direction: column;
    padding-inline: var(--doorways-track-pad-start)
      var(--doorways-track-pad-end);
    text-align: var(--doorways-title-text-align, left);
    width: 100%;
  }

  .doorways__heading {
    align-items: inherit;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  /* Titles only. Bolding every typography block in the card also caught the
     body copy, which the design sets in regular. */
  .doorways__heading .section-title,
  .doorways__heading .typography-block,
  .doorways-section .mini-doorway .card-title {
    font-weight: 600;
  }

  .doorways__heading > .shopify-block {
    max-width: 100%;
    width: fit-content;
  }

  .doorways__heading > .shopify-block:has(.typography-block--width-fill) {
    width: 100%;
  }

  .doorways__heading .typography-block--width-fill {
    margin-inline: 0;
    text-align: inherit;
  }

  .doorways__header--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .doorways__header--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .doorways__header--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .doorways__header--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  .doorways__carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .doorways__carousel {
      gap: var(--spacing--sm);
    }
  }

  .doorways-section .doorways__swiper.swiper,
  .doorways-section .doorways__swiper {
    box-sizing: border-box;
    overflow: hidden;
    padding-inline: var(--doorways-track-pad-start)
      var(--doorways-track-pad-end);
    width: 100%;
  }

  .doorways__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: var(--doorways-columns-gap, 12px);
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .doorways__swiper:not(.swiper-initialized)
    .swiper-wrapper
    > :is(.shopify-block, .product-details-card-slide) {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: var(--doorway-slide-min-width, var(--doorway-tile-width, 253px));
  }

  .doorways__swiper:not(.swiper-initialized)
    .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .doorways__swiper.swiper
    .swiper-wrapper
    > :is(.shopify-block, .product-details-card-slide).swiper-slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: auto;
    position: relative;
    width: var(--doorway-slide-min-width, var(--doorway-tile-width, 253px));
  }

  .doorways__swiper.swiper
    .swiper-wrapper
    > :is(.shopify-block, .product-details-card-slide).swiper-slide
    .mini-doorway {
    width: 100%;
  }

  .doorways__swiper:not(.swiper-initialized)
    .swiper-wrapper
    > :is(.shopify-block, .product-details-card-slide)
    .mini-doorway {
    width: 100%;
  }

  .doorways__swiper.swiper
    .swiper-wrapper
    > :is(.shopify-block, .product-details-card-slide).swiper-slide
    .mini-doorway
    > * {
    max-width: 100%;
  }

  .doorways__controls {
    align-items: center;
    display: flex;
    gap: var(--spacing--md);
    padding-inline: var(--doorways-track-pad-start)
      var(--doorways-track-pad-end);
    width: 100%;
  }

  .doorways__controls--align-left {
    justify-content: flex-start;
  }

  .doorways__controls--align-center {
    justify-content: center;
  }

  .doorways__controls--align-right {
    justify-content: flex-end;
  }

  .doorways__controls.doorways__controls--locked {
    display: none;
  }

  .doorways__nav {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0;
  }

  .doorways__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

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

  .doorways__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .doorways__nav-icon {
    --icon-size: 20px;
  }

  .doorways__nav-icon svg {
    height: 30px;
    width: 20px;
  }

  .doorways__controls .doorways__pagination.swiper-pagination {
    align-items: center;
    bottom: auto;
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing--4xs);
    justify-content: flex-start;
    left: auto;
    margin: 0;
    padding: 0;
    position: static;
    top: auto;
    transform: none;
    width: auto;
  }

  .doorways__pagination.swiper-pagination-lock {
    display: none;
  }

  .doorways__pagination .swiper-pagination-bullet {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: auto;
    justify-content: center;
    margin: 0 !important;
    opacity: 1;
    padding-block: var(--spacing--3xs);
    padding-inline: 0;
    position: relative;
    width: auto;
  }

  .doorways__pagination .swiper-pagination-bullet::before {
    background-color: var(--color-text--primary);
    border-radius: var(--radius--pill);
    content: '';
    display: block;
    height: 3px;
    opacity: 0.3;
    transition:
      opacity 0.2s ease,
      width 0.2s ease;
    width: 6px;
  }

  .doorways__pagination .swiper-pagination-bullet-active::before {
    opacity: 1;
    width: 40px;
  }

  .doorways__pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }
/* END_SECTION:doorways */

/* START_SECTION:faq (INDEX:17) */
.faq-section__panel {
    background-color: color-mix(
      in srgb,
      var(--faq-panel-background) var(--faq-panel-background-opacity, 100%),
      transparent
    );
    border-radius: var(--radius--sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    justify-content: center;
    padding-block: var(--spacing--2xl);
    padding-inline: var(--spacing--sm);
    width: 100%;
  }

  .faq-section__blocks {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    width: 100%;
  }

  .faq-section__blocks > * {
    max-width: 40rem;
    width: 100%;
  }

  .faq-section__heading {
    text-align: center;
    width: 100%;
  }

  .faq-section__meta-title {
    color: var(--color-text--primary);
    margin: 0;
    text-align: center;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .faq-section__panel {
      padding-inline: var(--spacing--xl);
    }
  }

  /* Metaobject FAQ uses accordion-row markup without rendering accordion-row snippet */
  .faq-section .accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    width: 100%;
  }

  .faq-section .accordion-row {
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--sm);
    padding: var(--spacing--xs);
    width: 100%;
  }

  .faq-section .accordion-row__summary {
    align-items: center;
    color: var(--accordion-row-heading-color);
    cursor: pointer;
    display: flex;
    gap: var(--spacing--3xs);
    justify-content: space-between;
    list-style: none;
    text-transform: var(--accordion-row-heading-transform);
  }

  .faq-section .accordion-row__summary::-webkit-details-marker {
    display: none;
  }

  .faq-section .accordion-row__heading {
    flex: 1 0 0;
    min-width: 0;
    text-align: start;
  }

  .faq-section .accordion-row__icons {
    --icon-size: 20px;

    display: grid;
    flex-shrink: 0;
    height: 20px;
    place-items: center;
    position: relative;
    width: 20px;
  }

  .faq-section .accordion-row__icon {
    align-items: center;
    color: var(--accordion-row-heading-color);
    display: none;
    grid-area: 1 / 1;
    justify-content: center;
  }

  .faq-section .accordion-row__panel {
    height: 0;
    overflow: hidden;
  }

  .faq-section .accordion-row[open] .accordion-row__panel {
    height: auto;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .faq-section .accordion-row__icon {
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }

    .faq-section .accordion-row__panel {
      transition: height 0.3s ease;
    }
  }

  .faq-section .accordion-row__content {
    color: var(--accordion-row-content-color);
    padding-block-start: var(--spacing--3xs);
  }

  .faq-section .accordion--icon-plus .accordion-row__icon--plus {
    display: inline-flex;
  }

  .faq-section
    .accordion--icon-plus
    .accordion-row[open]
    .accordion-row__icon--plus {
    display: none;
  }

  .faq-section
    .accordion--icon-plus
    .accordion-row[open]
    .accordion-row__icon--minus {
    display: inline-flex;
  }

  .faq-section
    .accordion--icon-plus
    .accordion-row__summary.font-body-md--bold {
    font-size: var(--body-sm--size);
  }

  @media screen and (min-width: 768px) {
    .faq-section
      .accordion--icon-plus
      .accordion-row__summary.font-body-md--bold {
      font-size: var(--body-md--size);
    }
  }
/* END_SECTION:faq */

/* START_SECTION:footer (INDEX:18) */
.footer {
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow-x: clip;
  }

  .footer .svg-icon {
    --fill-0: currentColor;
    color: currentColor;
  }

  .footer__stripe {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .footer__stripe-primary {
    background-color: var(--footer-stripe-primary, var(--color-brand--blue));
    display: block;
    height: 28px;
    width: 100%;
  }

  .footer__stripe-secondary {
    background-color: var(--footer-stripe-secondary, var(--color-brand--pink));
    display: block;
    height: 8px;
    width: 100%;
  }

  .footer__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    padding-block: var(--spacing--xl);
    padding-inline: max(var(--spacing--sm), var(--section-content-gutter, 0px));
    width: 100%;
  }

  .footer__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--none);
    width: 100%;
  }

  .footer__brand-row {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
    width: 100%;
  }

  .footer__logo {
    justify-self: center;
    text-align: center;
    width: 100%;
  }

  .footer__menus {
    display: flex;
    flex-direction: column;
    margin-inline: calc(-1 * var(--spacing--sm));
    width: calc(100% + 2 * var(--spacing--sm));
  }

  .footer__menus-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .footer__badges-social {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .footer__accreditations {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs);
  }

  .footer__social {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs);
    margin-inline-start: auto;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .footer__meta-legal {
    width: 100%;
  }

  .footer__localization {
    flex-shrink: 0;
  }

  /* Full width of the section container, gutters included, but still capped by
     whatever width the shell is set to — so a 1920 cap still holds. */
  /* Same container as .footer__content — the footer itself is full-bleed, so
     without the cap and the auto margins this sits against the left edge. The
     only difference is that the artwork runs edge to edge inside that
     container, with no gutter padding. */
  .footer__artwork {
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    padding-inline: 0;
    width: 100%;
  }

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

  @media screen and (min-width: 768px) {
    .footer__content {
      gap: var(--spacing--4xl);
      padding-block: var(--spacing--2xl);
      padding-inline: max(
        var(--spacing--2xl),
        var(--section-content-gutter, 0px)
      );
    }

    .footer__brand-row {
      align-items: start;
      column-gap: clamp(var(--spacing--lg), 15vw, 224px);
      display: grid;
      grid-template-columns: 227px minmax(0, 1fr);
    }

    .footer__logo {
      min-width: 227px;
      text-align: start;
      width: 227px;
    }

    .footer__menus {
      display: flex;
      flex-direction: row;
      gap: clamp(var(--spacing--md), 8vw, 124px);
      justify-content: flex-start;
      margin-inline: 0;
      width: 100%;
    }

    .footer__menus-accordion {
      flex-direction: row;
      gap: clamp(var(--spacing--md), 8vw, 124px);
      justify-content: flex-start;
    }

    .footer__bottom {
      align-items: center;
      flex-direction: row;
      gap: var(--spacing--xs);
      justify-content: space-between;
    }

    .footer__meta-legal {
      flex: 1;
      order: -1;
    }

    .footer__localization {
      margin-inline-start: auto;
      order: 1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:19) */
.header-wrapper {
    display: block;
    position: relative;
  }

  /* The sticking itself is on the #shopify-section-* wrapper, set in the style
     tag at the top of this file — nothing inside the section has the room to
     stick. The --sticky class stays as the marker other components read to find
     out whether the header is sticky at all.

     The stacking context the mega menu and mobile nav panels sit in belongs to
     the wrapper whether or not it sticks: the menu dialog is opened non-modally
     (show(), not showModal()), so it is not in the top layer and paints in
     stacking order like any fixed element with z-index auto — which, with the
     sticky setting off, put the open mobile menu underneath the page content
     (ORI: a tap on the burger appeared to do nothing). */
  .header-wrapper {
    z-index: 20;
  }

  /* Every scroll lock pads by the scrollbar width it removes, so in-flow
     content — including the search field whose left edge the open animation
     promises not to move — keeps its geometry while locked. The JS owner of
     each lock writes --scrollbar-compensation before its class lands. */
  html.header-menu-open {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-compensation, 0px);
  }

  /* Fixed dialog is viewport-sized and ignores html padding — match the lock. */
  html.header-menu-open .header__menu-dialog {
    padding-inline-end: var(--scrollbar-compensation, 0px);
  }

  html.header-mega-menu-open {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-compensation, 0px);
  }

  /* The search drawer deliberately does NOT lock scroll. Removing the
     scrollbar is what forced the padding swap, and the swap leaves every
     full-bleed background a gutter short of the right edge while the page is
     still visible around the drawer. The panel is fixed to the header and
     already re-anchors itself on scroll, so the page moving behind the scrim
     is harmless — and the scrollbar never changing is what keeps the search
     field's left edge pinned. */

  .header {
    --header-height: 60px;
    --header-logo-width: 57px;
    --header-logo-width-desktop: 88px;
    --header-padding-block: var(--spacing--2xs);
    --header-padding-floor: var(--spacing--sm);
    --header-padding-inline: max(
      var(--header-padding-floor),
      var(--section-content-gutter, 0px)
    );
    --header-icon-gap: var(--spacing--xs);
    --icon-size: 24px;

    background-color: var(--color-surface--primary);
    position: relative;
    width: 100%;
  }

  shopify-account.header__icon-link {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--radius--sm);
    --shopify-account-radius-button: var(--radius--pill);
    --shopify-account-radius-input: var(--radius--sm);
    --shopify-account-color-background: var(--color-surface--primary);
    --shopify-account-color-text: var(--color-text--primary);
    --shopify-account-color-accent: var(--color-brand--charcoal);
    --shopify-account-color-accent-text: var(--color-text--invert);
    --shopify-account-color-border: var(--color-border--secondary);
    --shopify-account-signed-in-avatar-size: var(--icon-size);
    --shopify-account-signed-in-avatar-color-background: var(
      --color-brand--charcoal
    );
    --shopify-account-signed-in-avatar-color-text: var(--color-text--invert);
    --shopify-account-avatar-size: var(--icon-size);

    align-items: center;
    background: transparent;
    color: var(--color-text--primary);
    /* Keep the host to icon size for layout, but do not set font-size /
       line-height / overflow here — those pierce the shadow tree and can
       collapse account-sheet copy or clip the sheet if it is not portaled. */
    height: var(--icon-size);
    justify-content: center;
    max-width: var(--icon-size);
    min-width: var(--icon-size);
    width: var(--icon-size);
  }

  shopify-account.header__icon-link:not(:defined) {
    align-items: center;
    display: inline-flex;
    height: var(--icon-size);
    justify-content: center;
    width: var(--icon-size);
  }

  /* Mobile-only: beat shopify-account:not(:defined) { display: inline-flex }.
     Keep this out of the base cascade so desktop can show the placeholder
     before the custom element upgrades. */
  @media screen and (max-width: 767px) {
    shopify-account.header__icon-link.header__icon-link--account,
    shopify-account.header__icon-link.header__icon-link--account:not(:defined),
    .header__icon-link.header__icon-link--account {
      display: none;
    }
  }

  /* Kill the line-box strut on the avatar part only — not the host — so
     signed-out alignment matches wishlist/cart without affecting the sheet. */
  shopify-account.header__icon-link::part(signed-out-avatar) {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    display: inline-flex;
    font-size: 0;
    height: var(--icon-size);
    justify-content: center;
    line-height: 0;
    padding: 0;
    vertical-align: top;
    width: var(--icon-size);
  }

  .header__account-avatar {
    align-items: center;
    display: inline-flex;
    height: var(--icon-size);
    justify-content: center;
    line-height: 0;
    width: var(--icon-size);
  }

  .header__inner {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    min-height: var(--header-height);
    padding-block: var(--header-padding-block);
    padding-inline: var(--header-padding-inline);
    position: relative;
  }

  .header__menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    position: relative;
    z-index: 1;
  }

  .header__start {
    align-items: center;
    display: flex;
    gap: var(--spacing--xl);
    /* Span the full row so the logo stays optically centered even when the
       menu toggle and icon cluster have different widths. */
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    min-width: 0;
    pointer-events: none;
  }

  .header__nav-cluster {
    align-items: center;
    display: none;
    flex-shrink: 0;
    gap: var(--spacing--sm);
    min-width: 0;
  }

  .header__logo-link {
    color: inherit;
    display: flex;
    flex-shrink: 0;
    pointer-events: auto;
    text-decoration: none;
  }

  .header__logo-link .brand-logo__image {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: var(--header-logo-width);
  }

  .header__logo-link .brand-logo__text {
    max-width: min(20ch, 100%);
  }

  .header__nav,
  .header__bag-finder--bar {
    display: none;
  }

  .header__end {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing--md);
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    position: relative;
    z-index: 1;
  }

  .header__icons {
    align-items: center;
    display: flex;
    gap: var(--header-icon-gap);
  }

  /* shopify-account injects a sibling <shopify-store> host into this flex
     row. It paints nothing (0×0) but still consumes flex gap, which reads
     as padding before the first icon. */
  .header__icons > :not(.header__icon-link) {
    display: none;
  }

  .header__icon-link {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--icon-size);
    justify-content: center;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: var(--icon-size);
  }

  .header__icon-link:focus-visible {
    outline: none;
  }

  @media screen and (hover: hover) and (pointer: fine) {
    .header__icon-link:focus-visible {
      outline: 2px solid var(--color-border--primary);
      outline-offset: 2px;
    }
  }

  .header__icon-badge {
    background-color: var(--color-brand--red);
    border-radius: 50%;
    display: block;
    font-size: 0;
    height: 7px;
    overflow: hidden;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 7px;
  }

  .header__icon-badge[hidden] {
    display: none;
  }

  .header__bag-finder {
    align-items: center;
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--pill);
    color: var(--color-text--primary);
    flex-shrink: 0;
    gap: var(--spacing--4xs);
    padding-block: var(--spacing--4xs);
    padding-inline: var(--spacing--3xs) var(--spacing--2xs);
    text-decoration: none;
    white-space: nowrap;
  }

  .header__bag-finder-icon {
    --icon-size: 16px;
    display: inline-flex;
  }

  .header__search-icon {
    --icon-size: 20px;
    display: inline-flex;
    flex-shrink: 0;
  }

  .header__search-icon-graphic {
    --icon-size: 20px;
  }

  .header__search {
    align-items: center;
    background-color: var(--color-surface--secondary);
    border-radius: var(--radius--pill);
    display: flex;
    gap: var(--spacing--4xs);
    height: var(--button-height);
    padding-inline: var(--spacing--2xs);
  }

  /* The resting width. The measured value, once written, matches what the
     field already rests at — flex can hold it wider than the 196 floor, and
     the open animation interpolates min-width from HERE, so the two ends must
     share a base or the width sits still while the margin moves and the left
     edge wobbles through the animation. The open width, and the widening
     itself, live in the 768px block below. */
  .header__search--desktop {
    /* Hidden below 768px in CSS, not only via the JS-applied [hidden]: on
       first paint, or with scripts blocked, mobile would otherwise show this
       field and the stacked one together. The 768px block turns it back on. */
    display: none;
    min-width: var(--header-search-rest, 196px);
  }

  .header__search.header__search--desktop[hidden] {
    display: none;
  }

  /* The open-search treatment lives in the 768px block below: the icons fade
     and shrink in place and the field grows over them. No display flip here —
     an instant hide would win over the fade at every width, and the field's
     growth would assume space the icons still occupy. */

  .header__search--stacked {
    width: 100%;
  }

  .header__stacked-search {
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    padding-block: var(--spacing--3xs);
    padding-inline: var(--header-padding-inline);
  }

  .header__stacked-search[hidden] {
    display: none;
  }

  .header__nav-list {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header__nav-item {
    cursor: pointer;
    display: flex;
  }

  .header__nav-link {
    align-items: center;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    text-decoration: none;
    white-space: nowrap;
  }

  .header__nav-link-label {
    display: inline-block;
  }

  .header__mega-menu-indicator {
    background-color: var(--color-brand--pink);
    bottom: 0;
    display: none;
    grid-column: 1 / -1;
    grid-row: 1;
    height: 2px;
    left: var(--mega-menu-indicator-left, 0);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition:
      left 0.15s ease,
      width 0.15s ease,
      opacity 0.15s ease;
    width: var(--mega-menu-indicator-width, 0);
  }

  .header--nav-indicator-active .header__mega-menu-indicator {
    opacity: 1;
  }

  .header-mega-menu {
    --mega-menu-animation-duration: 0.25s;

    display: none;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 21;
  }

  .header-mega-menu--open {
    pointer-events: auto;
  }

  .header-mega-menu--closing {
    pointer-events: none;
  }

  .header-mega-menu__overlay {
    background-color: var(--color-overlay--mega-menu);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: var(--header-mega-menu-overlay-top, 0);
    transition: opacity var(--mega-menu-animation-duration) ease-out;
    z-index: 0;
  }

  .header-mega-menu--open .header-mega-menu__overlay {
    opacity: 1;
  }

  .header-mega-menu--closing .header-mega-menu__overlay {
    opacity: 0;
  }

  .header-mega-menu__overlay[hidden] {
    display: none;
  }

  .header-mega-menu__panels {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .mega-menu-panel {
    background-color: var(--color-surface--primary);
    border-top: 1px solid var(--color-border--secondary);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition:
      opacity var(--mega-menu-animation-duration) ease-out,
      transform var(--mega-menu-animation-duration) ease-out;
    visibility: hidden;
    will-change: opacity, transform;
  }

  .mega-menu-panel[hidden] {
    display: none;
  }

  .mega-menu-panel--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .mega-menu-panel--exit {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(0);
    visibility: visible;
    width: 100%;
    z-index: 0;
  }

  .mega-menu-panel--crossfade {
    position: relative;
    transform: translateY(0);
    visibility: visible;
    z-index: 1;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .header-mega-menu__overlay,
    .mega-menu-panel {
      transition: none;
    }

    .header__mega-menu-indicator {
      transition: none;
    }
  }

  .mega-menu-panel__inner {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing--md);
    justify-content: flex-start;
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    min-width: 0;
    overflow: hidden;
    padding-block: var(--spacing--md) var(--spacing--xl);
    padding-inline: var(--header-padding-inline, var(--spacing--2xl));
  }

  /* Horizontal flex only — never a multi-row grid (grid row tracks
     stretched Category/Need apart to match the tall Bestselling column). */
  .mega-menu-panel__columns {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing--md);
    min-width: 0;
  }

  .mega-menu-highlights {
    align-self: start;
    display: flex;
    flex: 0 1 160px;
    flex-direction: column;
    gap: var(--spacing--xs);
    min-width: 0;
    width: 160px;
  }

  /* One flex item: lists stacked with their own gap, independent of column gutters */
  .mega-menu-column-stack {
    display: flex;
    flex: 0 1 200px;
    flex-direction: column;
    gap: var(--spacing--lg);
    min-width: 0;
    width: 200px;
  }

  .mega-menu-column {
    display: flex;
    flex: 0 1 200px;
    flex-direction: column;
    gap: var(--spacing--xs);
    min-width: 0;
    width: 200px;
  }

  .mega-menu-column--prominent {
    flex: 0 0 auto;
    width: 100%;
  }

  .mega-menu-column-stack .mega-menu-column {
    flex: 0 0 auto;
    width: 100%;
  }

  .mega-menu-column__heading {
    color: var(--color-text--primary);
    margin: 0;
  }

  .mega-menu-column__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mega-menu-link {
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--2xs);
    max-width: 100%;
    text-decoration: none;
  }

  /* Figma: Menu item State=Hover paints the label surface/surface-brand1,
     carried in by the panel's 300ms ease-out Smart Animate. */
  .mega-menu-link__label {
    transition: color 300ms cubic-bezier(0, 0, 0.58, 1);
  }

  .mega-menu-link:hover .mega-menu-link__label {
    color: var(--color-brand--blue);
  }

  .mega-menu-link__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mega-menu-link__subtitle {
    color: var(--color-text--secondary);
  }

  .mega-menu-link.mega-menu-link--prominent {
    align-items: center;
    gap: 0;
    text-transform: none;
    transition: gap 300ms cubic-bezier(0.42, 0, 0.58, 1);
  }

  /* Figma: the Underline button's hover variant only widens its item spacing,
     nudging the arrow right. The label keeps text/text-primary. */
  .mega-menu-link--prominent:hover {
    gap: var(--spacing--4xs);
  }

  .mega-menu-link--prominent:hover .mega-menu-link__label {
    color: var(--color-text--primary);
  }

  .mega-menu-link__icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .mega-menu-link__arrow {
    --icon-size: 24px;
  }

  .mega-menu-promo {
    align-self: start;
    min-width: 0;
    width: 100%;
  }

  .mega-menu-promos {
    display: flex;
    flex: 0 1 auto;
    gap: var(--spacing--sm);
    justify-content: flex-end;
    margin-inline-start: auto;
    min-width: 0;
  }

  .mega-menu-promos .mega-menu-promo {
    flex: 0 1 400px;
    max-width: 400px;
    min-width: 0;
    width: 400px;
  }

  .mega-menu-promo__link {
    color: inherit;
    display: block;
    text-decoration: none;
  }

  .mega-menu-promo__media {
    aspect-ratio: 400 / 476;
    background-color: var(--color-surface--secondary);
    border-radius: var(--spacing--3xs);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  .mega-menu-promo__image {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
  }

  .mega-menu-promo__image[hidden] {
    display: none;
  }

  .mega-menu-promo__placeholder {
    height: 100%;
    width: 100%;
  }

  .mega-menu-promo__placeholder[hidden] {
    display: none;
  }

  .mega-menu-promo__media::after {
    background-image: linear-gradient(
      188deg,
      transparent 60%,
      var(--color-overlay--scrim) 94%
    );
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  .mega-menu-promo--media-only .mega-menu-promo__media::after {
    content: none;
  }

  .mega-menu-promo__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    min-width: 0;
    max-width: 270px;
    padding-block: var(--spacing--md);
    padding-inline: var(--spacing--sm);
    position: relative;
    z-index: 1;
  }

  .mega-menu-promo__title {
    color: var(--color-text--invert);
    margin: 0;
  }

  .mega-menu-promo__cta {
    align-items: center;
    background-color: var(--color-button--primary);
    border-radius: var(--radius--pill);
    color: var(--color-text--primary);
    display: inline-flex;
    justify-content: center;
    padding-block: var(--spacing--2xs);
    padding-inline: var(--spacing--sm);
    text-transform: capitalize;
    white-space: nowrap;
    width: fit-content;
  }

  .mega-menu-promo__cta[hidden] {
    display: none;
  }

  /* Hover previews crossfade the banner. Figma prototype: Smart Animate,
     300ms, ease-out — the outgoing frame sits on --previous and fades down
     while the incoming image fades up, so the tile never dips to background.
     Durations match PROMO_FADE_MS / PROMO_COPY_FADE_MS in header-mega-menu.js. */
  .mega-menu-promo__image {
    transition: opacity 300ms cubic-bezier(0, 0, 0.58, 1);
  }

  /* Overlay copy has no second layer to crossfade against, so it swaps at the
     midpoint of the same 300ms envelope. */
  .mega-menu-promo__content {
    transition: opacity 150ms cubic-bezier(0, 0, 0.58, 1);
  }

  .mega-menu-promo--swapping .mega-menu-promo__content {
    opacity: 0;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .mega-menu-link__label,
    .mega-menu-link--prominent,
    .mega-menu-promo__image,
    .mega-menu-promo__content {
      transition: none;
    }
  }

  .header__menu-toggle-bars {
    display: flex;
    flex-direction: column;
    height: 13.25px;
    justify-content: space-between;
    position: relative;
    width: 14.75px;
  }

  .header__menu-toggle-bar {
    background-color: currentColor;
    border-radius: 1px;
    display: block;
    height: 1.5px;
    transform-origin: center;
    transition:
      transform 0.25s ease,
      opacity 0.2s ease;
    width: 100%;
  }

  .header__menu-toggle[aria-expanded='true']
    .header__menu-toggle-bar:nth-child(1) {
    transform: translateY(5.875px) rotate(45deg);
  }

  .header__menu-toggle[aria-expanded='true']
    .header__menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .header__menu-toggle[aria-expanded='true']
    .header__menu-toggle-bar:nth-child(3) {
    transform: translateY(-5.875px) rotate(-45deg);
  }

  .header__menu-dialog {
    background-color: transparent;
    border: none;
    color: var(--color-text--primary);
    height: calc(100dvh - var(--header-mobile-menu-top, 0px));
    inset: var(--header-mobile-menu-top, 0px) 0 auto;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 0;
    position: fixed;
    /* No transform here: the slide lives on the panel below, whose
       is-opening/is-closing classes drive it. A translate on the dialog
       itself would hold the whole menu off-screen while the panel animates
       inside it. */
    transition:
      background-color var(--search-motion-duration) var(--search-motion-easing),
      display 0.25s allow-discrete,
      overlay 0.25s allow-discrete;
    width: 100%;
  }

  .header__menu-dialog[open] {
    display: block;
  }

  .header__menu-dialog-panel {
    background-color: var(--color-surface--primary);
    height: 100%;
    overflow: hidden;
    position: relative;
    transform: translateY(-100%);
    transition: transform 0.28s ease-out;
    width: 100%;
  }

  .header__menu-dialog[open] .header__menu-dialog-panel {
    transform: translateY(0);
  }

  .header__menu-dialog[open].is-opening .header__menu-dialog-panel,
  .header__menu-dialog[open].is-closing .header__menu-dialog-panel {
    transform: translateY(-100%);
  }

  .header__menu-dialog.is-opening,
  .header__menu-dialog.is-open-animating,
  .header__menu-dialog.is-closing {
    pointer-events: none;
  }

  .header__menu-dialog::backdrop {
    background-color: transparent;
  }

  /* Focusing the header field with the mobile menu open opens the search
     drawer over it. The menu is deliberately left open — the shopper keeps
     their place in the nav and gets it back when search closes — so only its
     surfaces clear.

     Two opaque plates have to go, or the drawer opens onto a blank sheet: the
     dialog shell, which sits outside the element that fades, and the navigation
     page inside it. `header-wrapper--search-open` is set on `roka-header` by
     the drawer whenever it opens, and was already being applied with no rule
     anywhere reading it. */
  .header-wrapper--search-open .header__menu-dialog,
  .header-wrapper--search-open .mobile-navigation__page {
    background-color: transparent;
  }

  .mobile-navigation {
    display: block;
    height: 100%;
    overflow: hidden;
    transition: opacity var(--search-motion-duration)
      var(--search-motion-easing);
  }

  /* The out half of the cross-fade, on the same tokens as the drawer panel's
     slide and the scrim's fade so both halves run on one timing from one tick —
     the drawer adds this class and the panel's open class together.

     `opacity` rather than `visibility` or `display`: the menu is still open,
     and its scroll position, expanded page and focus target all have to
     survive until search closes.

     Faded out is not gone, though — the links stay in the tab order and the
     accessibility tree, so search-drawer.js sets `inert` on this element for
     as long as the drawer owns the screen and clears it when the fade back in
     has finished. `pointer-events` here is belt and braces for the pointer
     half of that. */
  .header-wrapper--search-open .mobile-navigation {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-navigation__pages {
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .mobile-navigation__page {
    background-color: var(--color-surface--primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    inset: 0;
    position: absolute;
    transform: translateX(0);
    transition: transform var(--search-motion-duration)
      var(--search-motion-easing);
    width: 100%;
  }

  .mobile-navigation__page[hidden] {
    display: none;
  }

  .mobile-navigation__page--from-right,
  .mobile-navigation__page--to-right {
    transform: translateX(100%);
  }

  .mobile-navigation__page--from-left,
  .mobile-navigation__page--to-left {
    transform: translateX(-100%);
  }

  .mobile-navigation__scroll,
  .mobile-navigation__child-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-navigation__root-list,
  .mobile-navigation__group-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-navigation__root-item {
    border-bottom: 1px solid var(--color-surface--secondary);
  }

  .mobile-navigation__root-link {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-text--primary);
    display: flex;
    justify-content: space-between;
    min-height: 52px;
    padding: var(--spacing--2xs) var(--spacing--xs);
    text-align: start;
    text-decoration: none;
    width: 100%;
  }

  .mobile-navigation__root-link:link,
  .mobile-navigation__root-link:visited,
  .mobile-navigation__root-link:hover,
  .mobile-navigation__root-link:active,
  .mobile-navigation__root-link:focus,
  .mobile-navigation__root-link:focus-visible {
    color: var(--color-text--primary);
    outline: none;
    text-decoration: none;
  }

  @media screen and (hover: hover) and (pointer: fine) {
    .mobile-navigation__root-link:focus-visible {
      outline: 2px solid var(--color-border--primary);
      outline-offset: -2px;
    }
  }

  .mobile-navigation__root-link .svg-icon {
    --icon-size: 28px;
  }

  .mobile-navigation__bag-finder {
    --mobile-bag-finder-text-color: var(--color-brand--white);
    background-color: var(--color-brand--charcoal);
    border-radius: var(--spacing--3xs);
    color: var(--mobile-bag-finder-text-color);
    display: flex;
    min-height: 252px;
    margin: var(--spacing--sm);
    overflow: hidden;
    position: relative;
    text-decoration: none;
  }

  .mobile-navigation__bag-finder--text-dark {
    --mobile-bag-finder-text-color: var(--color-brand--charcoal);
  }

  .mobile-navigation__bag-finder--text-light {
    --mobile-bag-finder-text-color: var(--color-brand--white);
  }

  .mobile-navigation__bag-finder-image {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
  }

  .mobile-navigation__bag-finder-overlay {
    background-image: linear-gradient(
      180deg,
      transparent 42%,
      var(--color-overlay--backdrop) 100%
    );
    inset: 0;
    position: absolute;
  }

  .mobile-navigation__bag-finder-content {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    padding: var(--spacing--xs);
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .mobile-navigation__bag-finder-heading {
    color: var(--mobile-bag-finder-text-color, var(--color-brand--white));
  }

  .mobile-navigation__bag-finder-cta {
    align-items: center;
    background-color: var(--color-button--primary);
    border-radius: var(--radius--pill);
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--4xs);
    justify-content: center;
    min-height: var(--button-height);
    padding-inline: var(--spacing--sm);
    width: fit-content;
  }

  .mobile-navigation__bag-finder-cta .svg-icon {
    --icon-size: 16px;
  }

  .mobile-navigation__footer {
    align-items: center;
    background-color: var(--color-surface--primary);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing--2xs);
    justify-content: space-between;
    padding: var(--spacing--2xs) var(--spacing--sm) var(--spacing--sm);
    position: relative;
    z-index: 2;
  }

  .mobile-navigation__account,
  .mobile-navigation__localization {
    align-items: center;
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--3xs);
    text-decoration: none;
  }

  .mobile-navigation__account {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .mobile-navigation__localization {
    flex-shrink: 1;
    margin-inline-start: auto;
    min-width: 0;
  }

  .mobile-navigation__localization .footer-localization {
    display: block;
    min-width: 0;
  }

  .mobile-navigation__localization .footer-localization__controls {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* Panel is teleported onto the dialog + fixed via JS to escape panel transform/overflow. */
  .footer-localization__panel.is-positioned {
    inset: auto;
    z-index: 4;
  }

  .mobile-navigation__localization .footer-localization__trigger,
  .mobile-navigation__localization .footer-localization__trigger--static {
    gap: var(--spacing--3xs);
    padding: 0;
  }

  .mobile-navigation__child-header {
    border-bottom: 1px solid var(--color-border--secondary);
  }

  .mobile-navigation__back {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text--primary);
    display: flex;
    gap: var(--spacing--3xs);
    min-height: 48px;
    padding-block: var(--spacing--2xs) var(--spacing--3xs);
    padding-inline: 0;
    width: 100%;
  }

  .mobile-navigation__back .svg-icon {
    --icon-size: 28px;
  }

  .mobile-navigation__back-label {
    flex: 1;
    min-width: 0;
    text-align: start;
  }

  .mobile-navigation__child-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    padding-block: var(--spacing--4xs);
    padding-inline: var(--spacing--sm);
  }

  /* Highlights: cream pill, 20×12 padding, space-between, Button/xs.
     The row scrolls horizontally, which makes it a scroll container — and a
     scroll container's automatic min-height is 0, so as a flex item of the
     column panel above it would be squashed whenever the panel is taller than
     the viewport, then scroll vertically and clip its own labels. Keep it at
     content height and only ever scroll on the x axis. */
  .mobile-navigation__quick-links {
    align-items: center;
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--pill);
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: var(--spacing--3xs);
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--spacing--2xs) var(--spacing--sm);
    scrollbar-width: none;
  }

  .mobile-navigation__quick-links::-webkit-scrollbar {
    display: none;
  }

  .mobile-navigation__quick-links > li {
    flex-shrink: 0;
  }

  .mobile-navigation__quick-link {
    color: var(--color-text--primary);
    display: inline-flex;
    font-family: var(--font-body--family);
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .mobile-navigation__groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
  }

  .mobile-navigation__group {
    border-bottom: 1px solid var(--color-border--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-block: var(--spacing--4xs) var(--spacing--md);
  }

  .mobile-navigation__group:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .mobile-navigation__group-heading {
    margin: 0;
  }

  .mobile-navigation__group-list {
    gap: var(--spacing--xs);
  }

  .mobile-navigation__group-link {
    align-items: center;
    color: var(--color-text--primary);
    display: flex;
    gap: var(--spacing--2xs);
    text-decoration: none;
  }

  .mobile-navigation__group-link-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .mobile-navigation__group-link-label {
    color: var(--color-text--primary);
  }

  .mobile-navigation__group-link-subtitle {
    color: var(--color-text--secondary);
  }

  .mobile-navigation__thumbnail {
    aspect-ratio: 1;
    background-color: var(--color-surface--brand);
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
    height: 48px;
    object-fit: cover;
    width: 48px;
  }

  .mobile-navigation__swatch {
    background-color: var(--color-surface--brand);
    border-radius: 360px;
    display: block;
    flex-shrink: 0;
    height: 20px;
    object-fit: cover;
    width: 20px;
  }

  .mobile-navigation__swatch--empty {
    background-color: var(--color-brand--charcoal);
  }

  .mobile-navigation__promo {
    margin: 0;
  }

  .mobile-navigation__promo .mega-menu-promo__media {
    aspect-ratio: 335 / 400;
    min-height: 0;
  }

  .mobile-navigation__shop-all-bar {
    background-color: var(--color-surface--primary);
    flex-shrink: 0;
    padding: var(--spacing--sm) 12px
      calc(var(--spacing--sm) + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 3;
  }

  .mobile-navigation__shop-all {
    align-items: center;
    background-color: var(--color-button--primary);
    border-radius: var(--radius--pill);
    color: var(--color-text--primary);
    display: flex;
    font-family: var(--font-body--family);
    font-size: var(--button-sm--size);
    font-weight: var(--button-sm--weight);
    justify-content: center;
    line-height: var(--button-sm--line-height);
    min-height: 40px;
    padding-block: var(--spacing--3xs);
    padding-inline: var(--spacing--sm);
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    width: 100%;
  }

  /* Interpolation only — the end states above are unchanged, so this is the
     same instant behaviour: the shell is transparent and the nav content is
     hidden in frame 0, and the drawer is visible over it either way. */
  @media screen and (prefers-reduced-motion: reduce) {
    .header__menu-dialog,
    .mobile-navigation,
    .mobile-navigation__page {
      transition: none;
    }
  }

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

  @media screen and (min-width: 768px) {
    .header {
      --header-height: 88px;
      --header-padding-block: var(--spacing--xs);
      --header-padding-floor: var(--spacing--2xl);
      --header-icon-gap: var(--spacing--md);
    }

    .header__inner {
      align-items: stretch;
      display: flex;
      gap: var(--spacing--md);
      justify-content: space-between;
    }

    .header__menu-toggle {
      display: none;
    }

    .header__start {
      align-items: stretch;
      flex: 1;
      justify-self: unset;
      min-width: 0;
      pointer-events: auto;
    }

    .header__nav-cluster {
      align-items: stretch;
      display: flex;
    }

    .header__logo-link {
      align-self: center;
    }

    .header__logo-link .brand-logo__image {
      width: var(--header-logo-width-desktop);
    }

    .header__nav {
      align-self: stretch;
      display: flex;
      flex-shrink: 0;
      min-width: 0;
    }

    .header__mega-menu-indicator {
      display: block;
    }

    .header--compact .header__mega-menu-indicator,
    html.header-menu-open .header__mega-menu-indicator {
      display: none;
    }

    .header__nav-list {
      align-self: stretch;
      flex-wrap: nowrap;
    }

    .header__nav-link {
      /* Extend through header padding so the whole row shows pointer */
      margin-block: calc(-1 * var(--header-padding-block));
      min-height: calc(100% + 2 * var(--header-padding-block));
      padding-block: var(--header-padding-block);
    }

    .header__bag-finder--bar {
      align-self: center;
      display: inline-flex;
      flex-shrink: 0;
    }

    .header__end {
      align-items: center;
      justify-self: unset;
    }

    .header__search.header__search--desktop {
      display: flex;
      flex-shrink: 0;
    }

    /* Open search takes over the header's end cluster (desktop inline layout).
       Scoped to this breakpoint because the inline field only exists from
       768px up — the same switch `matchMedia('(min-width: 768px)')` uses — so
       below it the icons must stay visible with nothing covering them.

       The icons do not move: they fade and shrink IN PLACE, keeping their box,
       and the field grows OVER them. The growth is cancelled out of the row by
       an equal negative end margin, so the row's content width never changes —
       which is what pins the field's left edge. It cannot drift, because no
       layout ever moves: the right edge slides out to exactly where the row
       already ended. `--header-icons-width` is the cluster's measured resting
       width, written by the header element; unmeasured, the field simply does
       not grow. */
    .header__icons {
      transition:
        opacity calc(var(--search-motion-duration) * 0.6)
          var(--search-motion-easing) calc(var(--search-motion-duration) * 0.4),
        transform var(--search-motion-duration) var(--search-motion-easing),
        visibility 0s linear 0s;
      transform: none;
      transform-origin: right center;
      visibility: visible;
    }

    /* `pointer-events` goes at the start of the fade and `visibility` at the
       end of it, so the icons stop being clickable immediately and leave the
       tab order exactly where `display: none` used to drop them. */
    .header--search-open .header__icons {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.85);
      transition:
        opacity calc(var(--search-motion-duration) * 0.6)
          var(--search-motion-easing),
        transform var(--search-motion-duration) var(--search-motion-easing),
        visibility 0s linear var(--search-motion-duration);
      visibility: hidden;
    }

    /* Painted above the fading icons, so the whole field — including the end
       that overlaps them — stays clickable and focusable. */
    .header__search--desktop {
      position: relative;
      transition:
        min-width var(--search-motion-duration) var(--search-motion-easing),
        margin-inline-end var(--search-motion-duration)
          var(--search-motion-easing);
      z-index: 1;
    }

    /* The open width builds on the field's MEASURED resting width, not its
       min-width — flex can rest the field wider than 196, and any gap between
       the assumed and real resting width comes straight off the left edge.
       Growth and margin are the same expression, so they cancel exactly. */
    .header--search-open .header__search--desktop {
      margin-inline-end: calc(
        -1 * (var(--header-icons-width, 0px) + var(--spacing--md))
      );
      min-width: calc(
        var(--header-search-rest, 196px) + var(--header-icons-width, 0px) +
          var(--spacing--md)
      );
    }

    /* The header resolves its layout by removing state classes, forcing a
       reflow and measuring, several times a second. Without this each pass
       would animate the collapse — and the compact cluster gap — open and
       closed again. */
    .header--no-motion .header__end,
    .header--no-motion .header__icons,
    .header--no-motion .header__search--desktop,
    .header--no-motion.header--search-open .header__end,
    .header--no-motion.header--search-open .header__icons {
      transition: none;
    }

    .header--search-stacked .header__search.header__search--desktop {
      display: none;
    }

    .header__stacked-search {
      display: none;
    }

    .header--search-stacked .header__stacked-search {
      display: block;
    }

    /* When search drops under the nav, match mobile header rhythm.
       Inline desktop keeps the 88px / spacing--xs tokens above. */
    .header--search-stacked {
      --header-height: 60px;
      --header-padding-block: var(--spacing--2xs);
    }

    shopify-account.header__icon-link.header__icon-link--account,
    shopify-account.header__icon-link.header__icon-link--account:not(:defined),
    .header__icon-link.header__icon-link--account {
      display: inline-flex;
    }

    .header:not(.header--compact) .header__menu-dialog {
      display: none;
    }

    .header--compact {
      --header-height: 60px;
      --header-padding-block: var(--spacing--2xs);
      --header-padding-floor: var(--spacing--sm);
      --header-icon-gap: var(--spacing--xs);
    }

    .header--compact .header__inner {
      display: grid;
      gap: 0;
      grid-template-columns: 1fr auto 1fr;
      justify-content: unset;
    }

    .header--compact .header__menu-toggle {
      display: inline-flex;
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      position: relative;
      z-index: 1;
    }

    .header--compact .header__start {
      flex: unset;
      gap: 0;
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: center;
      pointer-events: none;
    }

    .header--compact .header__nav-cluster {
      display: none;
    }

    .header--compact .header__logo-link .brand-logo__image {
      width: var(--header-logo-width);
    }

    .header--compact .header__nav,
    .header--compact .header__bag-finder--bar {
      display: none;
    }

    .header--compact .header__end {
      gap: var(--spacing--xs);
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      position: relative;
      z-index: 1;
    }

    .header--compact
      shopify-account.header__icon-link.header__icon-link--account,
    .header--compact
      shopify-account.header__icon-link.header__icon-link--account:not(
        :defined
      ),
    .header--compact .header__icon-link.header__icon-link--account {
      display: none;
    }

    .header--compact .header__search.header__search--desktop {
      display: none;
    }

    .header--compact .header__stacked-search {
      display: block;
    }

    .header--compact .header__stacked-search[hidden] {
      display: block;
    }

    .header-mega-menu {
      display: block;
    }
  }

  /* Last in the file on purpose: the icon fade and the field's growth are
     declared inside the 768px block above, so an earlier opt-out would be
     overridden by it. Only the interpolation is switched off — every end state
     is unchanged, which is what makes this exactly the instant behaviour. */
  @media screen and (prefers-reduced-motion: reduce) {
    .mega-menu-panel {
      transition: none;
    }

    .header__mega-menu-indicator {
      transition: none;
    }

    .header-mega-menu__overlay {
      transition: none;
    }

    .header__end,
    .header__icons,
    .header__search--desktop,
    .header--search-open .header__end,
    .header--search-open .header__icons {
      transition: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero-banner (INDEX:20) */
.image-video-banner {
    --image-video-banner-height: 575px;
    --image-video-banner-content-padding: var(--spacing--2xl);
    --image-video-banner-subtitle-size-mobile: var(--body-lg--size);
    --image-video-banner-subtitle-size-desktop: 18px;

    border-radius: var(--radius--sm);
    isolation: isolate;
    min-height: var(--image-video-banner-height);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .image-video-banner--full {
    border-radius: 0;
    max-width: none;
  }

  .image-video-banner--contained {
    width: 100%;
  }

  /* Contained banners can drop the gutter up to the desktop breakpoint, so the
     media reaches the screen edge on mobile and tablet while desktop stays
     inside the page container. Corners square off to match, as they do at Full
     and Viewport. */
  @media screen and (max-width: 1023px) {
    .hero-banner-section--bleed-mobile > .section-shell__content {
      padding-inline: 0;
    }

    .hero-banner-section--bleed-mobile .image-video-banner {
      border-radius: 0;
    }
  }

  .image-video-banner__media {
    border-radius: inherit;
    inset: 0;
    overflow: hidden;
    position: absolute;
  }

  .image-video-banner__media-desktop,
  .image-video-banner__media-mobile {
    inset: 0;
    position: absolute;
  }

  .image-video-banner__media-mobile {
    display: block;
  }

  .image-video-banner__media-desktop {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .image-video-banner__media-mobile {
      display: none;
    }

    .image-video-banner__media-desktop {
      display: block;
    }
  }

  .image-video-banner__image,
  .image-video-banner__video {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .image-video-banner__video {
    display: block;
  }

  .image-video-banner__overlay {
    border-radius: inherit;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .image-video-banner--overlay-gradient .image-video-banner__overlay {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0%) 25%,
      rgb(0 0 0 / 40%) 100%
    );
  }

  .image-video-banner--overlay-solid .image-video-banner__overlay {
    background-color: rgb(47 46 46 / 50%);
  }

  .image-video-banner__content {
    display: flex;
    flex-direction: column;
    inset: 0;
    padding: var(--image-video-banner-content-padding);
    position: absolute;
    z-index: 2;
  }

  .image-video-banner--content-h-mobile-left .image-video-banner__content {
    align-items: flex-start;
  }

  .image-video-banner--content-h-mobile-center .image-video-banner__content {
    align-items: center;
  }

  .image-video-banner--content-h-mobile-right .image-video-banner__content {
    align-items: flex-end;
  }

  .image-video-banner--content-v-mobile-top .image-video-banner__content {
    justify-content: flex-start;
  }

  .image-video-banner--content-v-mobile-middle .image-video-banner__content {
    justify-content: center;
  }

  .image-video-banner--content-v-mobile-bottom .image-video-banner__content {
    justify-content: flex-end;
  }

  .image-video-banner__blocks {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
  }

  /* Shoppable tiles belong in __shop only; hide legacy tiles from the copy column */
  .image-video-banner__blocks .shopify-block:has(.mini-product-tile),
  .image-video-banner__blocks .mini-product-tile {
    display: none;
  }

  .image-video-banner--content-h-mobile-left .image-video-banner__blocks {
    align-items: flex-start;
    text-align: start;
  }

  .image-video-banner--content-h-mobile-center .image-video-banner__blocks {
    align-items: center;
    text-align: center;
  }

  .image-video-banner--content-h-mobile-right .image-video-banner__blocks {
    align-items: flex-end;
    text-align: end;
  }

  .image-video-banner__blocks .typography-block {
    --typography-color: var(--color-text--invert);
    --typography-margin-inline: 0;
    color: var(--color-text--invert);
  }

  .image-video-banner .section-subtitle {
    --body-xl--size: var(--image-video-banner-subtitle-size-mobile);
    font-weight: var(--body-xl--weight-bold);
  }

  .image-video-banner__blocks
    .typography-block
    :is(p, h1, h2, h3, h4, h5, h6, span, strong, em) {
    color: inherit;
  }

  .image-video-banner--content-h-mobile-left
    .image-video-banner__blocks
    .typography-block {
    --typography-text-align: start;
    text-align: start;
  }

  .image-video-banner--content-h-mobile-center
    .image-video-banner__blocks
    .typography-block {
    --typography-text-align: center;
    text-align: center;
  }

  .image-video-banner--content-h-mobile-right
    .image-video-banner__blocks
    .typography-block {
    --typography-text-align: end;
    text-align: end;
  }

  .image-video-banner .section-subtitle,
  .image-video-banner .section-subtitle p,
  .image-video-banner .section-title,
  .image-video-banner .section-title h1,
  .image-video-banner .section-title h2,
  .image-video-banner .section-title h3,
  .image-video-banner .section-title p {
    margin: 0;
  }

  .image-video-banner .button-block {
    flex-shrink: 0;
  }

  .image-video-banner .button-block__link {
    text-transform: capitalize;
  }

  .image-video-banner__shop {
    --mini-product-tile-inset: 10px;

    display: flex;
    inset: 0;
    padding: var(--mini-product-tile-inset);
    pointer-events: none;
    position: absolute;
    z-index: 3;
  }

  .image-video-banner__shop--h-mobile-left {
    justify-content: flex-start;
  }

  .image-video-banner__shop--h-mobile-center {
    justify-content: center;
  }

  .image-video-banner__shop--h-mobile-right {
    justify-content: flex-end;
  }

  .image-video-banner__shop--v-mobile-top {
    align-items: flex-start;
  }

  .image-video-banner__shop--v-mobile-middle {
    align-items: center;
  }

  .image-video-banner__shop--v-mobile-bottom {
    align-items: flex-end;
  }

  .image-video-banner__shop-group {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: auto;
  }

  .image-video-banner__shop .mini-product-tile--anchored {
    inset: auto;
    position: relative;
  }

  .image-video-banner__shop .mini-product-tile--empty {
    max-width: 12rem;
  }

  @media screen and (min-width: 768px) {
    .image-video-banner {
      --image-video-banner-height: 575px;
      --image-video-banner-content-padding: var(--spacing--2xl);
    }

    .image-video-banner--contained {
      --image-video-banner-height: 575px;
    }

    .image-video-banner__shop {
      --mini-product-tile-inset: 18px;
    }

    .image-video-banner .section-subtitle {
      --body-xl--size: var(--image-video-banner-subtitle-size-desktop);
    }

    .image-video-banner--content-h-desktop-left .image-video-banner__content {
      align-items: flex-start;
    }

    .image-video-banner--content-h-desktop-center .image-video-banner__content {
      align-items: center;
    }

    .image-video-banner--content-h-desktop-right .image-video-banner__content {
      align-items: flex-end;
    }

    .image-video-banner--content-v-desktop-top .image-video-banner__content {
      justify-content: flex-start;
    }

    .image-video-banner--content-v-desktop-middle .image-video-banner__content {
      justify-content: center;
    }

    .image-video-banner--content-v-desktop-bottom .image-video-banner__content {
      justify-content: flex-end;
    }

    .image-video-banner--content-h-desktop-left .image-video-banner__blocks {
      align-items: flex-start;
      text-align: start;
    }

    .image-video-banner--content-h-desktop-center .image-video-banner__blocks {
      align-items: center;
      text-align: center;
    }

    .image-video-banner--content-h-desktop-right .image-video-banner__blocks {
      align-items: flex-end;
      text-align: end;
    }

    .image-video-banner--content-h-desktop-left
      .image-video-banner__blocks
      .typography-block {
      --typography-text-align: start;
      text-align: start;
    }

    .image-video-banner--content-h-desktop-center
      .image-video-banner__blocks
      .typography-block {
      --typography-text-align: center;
      text-align: center;
    }

    .image-video-banner--content-h-desktop-right
      .image-video-banner__blocks
      .typography-block {
      --typography-text-align: end;
      text-align: end;
    }

    .image-video-banner__shop--h-desktop-left {
      justify-content: flex-start;
    }

    .image-video-banner__shop--h-desktop-center {
      justify-content: center;
    }

    .image-video-banner__shop--h-desktop-right {
      justify-content: flex-end;
    }

    .image-video-banner__shop--v-desktop-top {
      align-items: flex-start;
    }

    .image-video-banner__shop--v-desktop-middle {
      align-items: center;
    }

    .image-video-banner__shop--v-desktop-bottom {
      align-items: flex-end;
    }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:html-embed (INDEX:21) */
.html-embed__layout {
    align-items: var(--html-embed-content-align-items, flex-start);
    display: flex;
    flex-direction: column;
    gap: var(--html-embed-content-gap, 24px);
    text-align: var(--html-embed-content-text-align, left);
    width: 100%;
  }

  .html-embed__layout > .shopify-block {
    align-items: inherit;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .html-embed__layout .typography-block {
    text-align: inherit;
  }

  /* Fill-width typography and buttons keep their own box, so the section
     alignment has to move the box as well as the text. */
  .html-embed__layout .typography-block--width-fill {
    margin-inline: 0;
  }

  .html-embed__layout .button-block {
    justify-content: var(--html-embed-content-align-items, flex-start);
    margin-inline: 0;
  }

  .html-embed__layout--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .html-embed__layout--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .html-embed__layout--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .html-embed__layout--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }
/* END_SECTION:html-embed */

/* START_SECTION:image-and-text (INDEX:22) */
.image-and-text {
    --image-and-text-media-radius: 8px;
    --mini-product-tile-inset: var(--spacing--sm);

    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--image-and-text-gap, var(--spacing--sm));
  }

  .image-and-text--mobile-media-bottom {
    flex-direction: column-reverse;
  }

  .image-and-text__media {
    border-radius: var(--image-and-text-media-radius);
    min-width: 0;
    position: relative;
    width: 100%;
  }

  .image-and-text__media-frame {
    border-radius: inherit;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  /* Keep the media on the same radius as the frame that clips it. The media
     block rounds itself, which is what survives a block with padding — the
     frame's clip only reaches the image while it sits flush against it. */
  .image-and-text__media .media-block {
    --media-radius: var(--image-and-text-media-radius);
  }

  .image-and-text--media-height-50svh .image-and-text__media,
  .image-and-text--media-height-60svh .image-and-text__media,
  .image-and-text--media-height-80svh .image-and-text__media,
  .image-and-text--media-height-100svh .image-and-text__media {
    display: flex;
  }

  .image-and-text--media-height-50svh .image-and-text__media-frame,
  .image-and-text--media-height-60svh .image-and-text__media-frame,
  .image-and-text--media-height-80svh .image-and-text__media-frame,
  .image-and-text--media-height-100svh .image-and-text__media-frame {
    display: flex;
    flex: 1;
    min-height: inherit;
  }

  .image-and-text--media-height-50svh .image-and-text__media {
    min-height: 50svh;
  }

  .image-and-text--media-height-60svh .image-and-text__media {
    min-height: 60svh;
  }

  .image-and-text--media-height-80svh .image-and-text__media {
    min-height: 80svh;
  }

  .image-and-text--media-height-100svh .image-and-text__media {
    min-height: 100svh;
  }

  .image-and-text--media-height-50svh .image-and-text__media .media-block,
  .image-and-text--media-height-60svh .image-and-text__media .media-block,
  .image-and-text--media-height-80svh .image-and-text__media .media-block,
  .image-and-text--media-height-100svh .image-and-text__media .media-block {
    flex: 1;
    height: 100%;
    min-height: inherit;
  }

  .image-and-text--media-height-50svh
    .image-and-text__media
    .media-block__image,
  .image-and-text--media-height-50svh
    .image-and-text__media
    .media-block__video,
  .image-and-text--media-height-50svh
    .image-and-text__media
    .media-block__placeholder,
  .image-and-text--media-height-60svh
    .image-and-text__media
    .media-block__image,
  .image-and-text--media-height-60svh
    .image-and-text__media
    .media-block__video,
  .image-and-text--media-height-60svh
    .image-and-text__media
    .media-block__placeholder,
  .image-and-text--media-height-80svh
    .image-and-text__media
    .media-block__image,
  .image-and-text--media-height-80svh
    .image-and-text__media
    .media-block__video,
  .image-and-text--media-height-80svh
    .image-and-text__media
    .media-block__placeholder,
  .image-and-text--media-height-100svh
    .image-and-text__media
    .media-block__image,
  .image-and-text--media-height-100svh
    .image-and-text__media
    .media-block__video,
  .image-and-text--media-height-100svh
    .image-and-text__media
    .media-block__placeholder {
    height: 100%;
  }

  .image-and-text--media-height-50svh .media-block__desktop,
  .image-and-text--media-height-50svh .media-block__mobile,
  .image-and-text--media-height-60svh .media-block__desktop,
  .image-and-text--media-height-60svh .media-block__mobile,
  .image-and-text--media-height-80svh .media-block__desktop,
  .image-and-text--media-height-80svh .media-block__mobile,
  .image-and-text--media-height-100svh .media-block__desktop,
  .image-and-text--media-height-100svh .media-block__mobile {
    aspect-ratio: unset;
    height: 100%;
  }

  .image-and-text__shop {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }

  .image-and-text__shop .mini-product-tile {
    pointer-events: auto;
  }

  .image-and-text__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .image-and-text__content .group {
    width: 100%;
  }

  .image-and-text .button-block__link {
    letter-spacing: 0;
    text-transform: capitalize;
  }

  @media screen and (min-width: 768px) {
    .image-and-text {
      align-items: var(--image-and-text-align, center);
      flex-direction: row;
      gap: var(--image-and-text-gap, var(--spacing--2xl));
    }

    /* Match media height to the text column; cover + focal point control the crop */
    .image-and-text--media-height-auto {
      align-items: stretch;
    }

    .image-and-text--media-height-auto .image-and-text__media {
      align-self: stretch;
      display: flex;
    }

    .image-and-text--media-height-auto .image-and-text__media-frame {
      display: flex;
      flex: 1;
      min-height: 0;
    }

    .image-and-text--media-height-auto .image-and-text__media .media-block {
      flex: 1;
      height: 100%;
      min-height: 0;
    }

    .image-and-text--media-height-auto .media-block__desktop,
    .image-and-text--media-height-auto
      .media-block--doorway
      .media-block__desktop {
      aspect-ratio: unset;
      height: 100%;
    }

    .image-and-text--media-height-auto
      .image-and-text__media
      .media-block__desktop
      .media-block__image,
    .image-and-text--media-height-auto
      .image-and-text__media
      .media-block__desktop
      .media-block__video,
    .image-and-text--media-height-auto
      .image-and-text__media
      .media-block__desktop
      .media-block__placeholder {
      height: 100%;
      object-fit: var(--media-object-fit, cover);
    }

    .image-and-text--media-height-auto .image-and-text__content {
      justify-content: var(--image-and-text-content-justify, center);
    }

    .image-and-text--media-right,
    .image-and-text--mobile-media-bottom.image-and-text--media-right {
      flex-direction: row-reverse;
    }

    .image-and-text--mobile-media-bottom.image-and-text--media-left {
      flex-direction: row;
    }

    .image-and-text--media-width-narrow .image-and-text__media {
      flex: 0 1 33.333%;
      max-width: 33.333%;
    }

    .image-and-text--media-width-medium .image-and-text__media {
      flex: 0 1 50%;
      max-width: 50%;
    }

    .image-and-text--media-width-wide .image-and-text__media {
      flex: 0 1 66.666%;
      max-width: 66.666%;
    }

    .image-and-text__content {
      flex: 1 1 0;
    }
  }
/* END_SECTION:image-and-text */

/* START_SECTION:large-doorways (INDEX:23) */
.large-doorways-section .content-doorway {
    aspect-ratio: var(--content-doorway-ratio-mobile, 335 / 448);
  }

  @media screen and (min-width: 768px) {
    .large-doorways-section .content-doorway {
      aspect-ratio: var(--content-doorway-ratio-desktop, 672 / 680);
    }
  }

  .large-doorways {
    display: flex;
    flex-direction: column;
    gap: var(--large-doorways-rows-gap, 16px);
    width: 100%;
  }

  .large-doorways > .shopify-block {
    min-width: 0;
    width: 100%;
  }

  .large-doorways .content-doorway {
    height: 100%;
  }

  .large-doorways-section .content-doorway__sticky {
    gap: 16px;
  }

  .large-doorways-section .content-doorway__sticky .card-title,
  .large-doorways-section .content-doorway__sticky .typography-block {
    font-weight: 600;
  }

  .large-doorways-section .content-doorway__sticky .btn--primary {
    --button-padding-x: 20px;
    --button-padding-y: 12px;
    font-size: 11px;
    height: auto;
    letter-spacing: normal;
    line-height: 1.4;
    text-transform: capitalize;
  }

  @media screen and (min-width: 768px) {
    .large-doorways {
      --large-doorways-column-width: calc(
        (
            100% - (var(--large-doorways-columns) - 1) *
              var(--large-doorways-columns-gap, 16px)
          ) /
          var(--large-doorways-columns, 2)
      );
      align-items: stretch;
      column-gap: var(--large-doorways-columns-gap, 16px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: var(--large-doorways-justify-content, flex-start);
      row-gap: var(--large-doorways-rows-gap, 16px);
    }

    .large-doorways > .shopify-block {
      flex: 0 0 var(--large-doorways-column-width);
      max-width: var(--large-doorways-column-width);
      width: var(--large-doorways-column-width);
    }

    .large-doorways--align-flex-start {
      --large-doorways-justify-content: flex-start;
    }

    .large-doorways--align-center {
      --large-doorways-justify-content: center;
    }

    .large-doorways--align-flex-end {
      --large-doorways-justify-content: flex-end;
    }

    .large-doorways-section .content-doorway__sticky {
      gap: 20px;
    }

    .large-doorways-section .content-doorway__sticky .btn--primary {
      font-size: 13px;
    }

    /* Zero column gap: square only the corners that touch within each row. */
    .large-doorways--columns-2.large-doorways--flush
      > .shopify-block:nth-child(odd):not(:last-child)
      .content-doorway {
      --content-doorway-radius-tr: 0;
      --content-doorway-radius-br: 0;
    }

    .large-doorways--columns-2.large-doorways--flush
      > .shopify-block:nth-child(even)
      .content-doorway {
      --content-doorway-radius-tl: 0;
      --content-doorway-radius-bl: 0;
    }

    .large-doorways--columns-3.large-doorways--flush
      > .shopify-block:nth-child(3n + 1):not(:last-child)
      .content-doorway {
      --content-doorway-radius-tr: 0;
      --content-doorway-radius-br: 0;
    }

    .large-doorways--columns-3.large-doorways--flush
      > .shopify-block:nth-child(3n + 2)
      .content-doorway {
      --content-doorway-radius-tl: 0;
      --content-doorway-radius-bl: 0;
    }

    .large-doorways--columns-3.large-doorways--flush
      > .shopify-block:nth-child(3n + 2):not(:last-child)
      .content-doorway {
      --content-doorway-radius-tr: 0;
      --content-doorway-radius-br: 0;
    }

    .large-doorways--columns-3.large-doorways--flush
      > .shopify-block:nth-child(3n)
      .content-doorway {
      --content-doorway-radius-tl: 0;
      --content-doorway-radius-bl: 0;
    }
  }
/* END_SECTION:large-doorways */

/* START_SECTION:main-product (INDEX:24) */
.product-page {
    display: block;
    width: 100%;
  }

  /* Colourway swaps re-render the section over the network, and the optimistic
     gallery already shows the new colour, so the only thing left to signal is
     that price, sizes and stock are still catching up. A top progress bar runs
     to 90% and holds there until the swap lands and the attribute is dropped. */
  [data-colourway-loading]::before {
    animation: colourway-progress 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    background-color: var(--color-brand--charcoal, #2f2e2e);
    block-size: 2px;
    content: '';
    inset-block-start: 0;
    inset-inline-start: 0;
    position: fixed;
    z-index: 100;
  }

  @keyframes colourway-progress {
    0% {
      inline-size: 0%;
    }
    60% {
      inline-size: 65%;
    }
    100% {
      inline-size: 90%;
    }
  }

  /* Stale until the swap lands: dim them so the old price is not read as the
     new one, but keep them in flow so nothing shifts. */
  [data-colourway-loading] .card-price--product,
  [data-colourway-loading] .product-variant-picker__sizes,
  [data-colourway-loading] .product-buy-buttons {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 120ms ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-colourway-loading]::before {
      animation: none;
      inline-size: 100%;
    }
  }

  /* Gutters move off the shell and onto .product-page__container, the same way
     doorways moves them onto its track, so the mobile gallery can run edge to
     edge while every other block stays inset. --section-content-gutter carries
     the width mode the merchant picked: the page margin for page-width, 0 for
     full-width and viewport. */
  .main-product-shell .section-shell__content {
    padding-inline: 0;
  }

  /*
   * Mobile: one column, 20px gutters on every block except the gallery, and
   * Perfect Hue sits between the promo banner and the accordions. The
   * info-column chain collapses with `display: contents` so every block becomes
   * a direct flex child of the container — that is what lets the complementary
   * slot be re-ordered across what are two DOM columns on desktop.
   */
  .product-page__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    width: 100%;
  }

  .product-page__gallery-column,
  .product-page__info-column,
  .product-page__form,
  .product-page__blocks {
    display: contents;
  }

  .product-page__gallery-column > *,
  .product-page__blocks > * {
    min-width: 0;
    order: 2;
    padding-inline: var(--section-content-gutter, var(--page-margin));
  }

  .product-page__slot--gallery {
    order: 1;
    padding-inline: 0;
  }

  .product-page__slot--complementary {
    order: 3;
  }

  .product-page__blocks > :has(.product-accordions),
  .product-page__blocks > :has(.product-designer-notes),
  .product-page__blocks > :has(.product-social-gallery) {
    order: 4;
  }

  /*
   * Some neighbouring blocks are one tighter group in the design rather than
   * two rows a full gap apart. They are separate merchant blocks here, so the
   * follower is pulled back up by the difference against the container gap.
   *   title → description   4px  (both breakpoints)
   *   description → USPs   12px  (mobile only; desktop keeps the 20px row)
   */
  .product-page__blocks > :has(.product-title) + :has(.product-description) {
    margin-block-start: calc(var(--spacing--4xs) - var(--spacing--sm));
  }

  .product-page__blocks
    > :has(.product-description)
    + :has(.product-feature-usps-host) {
    margin-block-start: calc(var(--spacing--2xs) - var(--spacing--sm));
  }

  /* Mobile runs the UGC strip edge to edge, 40px clear of the quote. */
  .product-page__blocks > :has(.product-social-gallery) {
    margin-block-start: calc(var(--spacing--xl) - var(--spacing--sm));
    padding-inline: 0;
  }

  /* Theme blocks that render nothing still leave a .shopify-block wrapper;
     hide those so flex gap collapses (e.g. blank description / feature USPs).
     Never hide app blocks — they may hydrate after first paint. */
  .product-page__blocks > .shopify-block:not(.shopify-app-block):not(:has(*)) {
    display: none;
  }

  /* Mobile overlays badges on the gallery. The inner block is hidden, but the
     wrapper would still take the container flex gap above the wishlist. */
  .product-page__blocks > .shopify-block:has(> .product-badges-block) {
    display: none;
  }

  /* Klarna OSM — 11px body, small badge, no legal line. */
  .product-page__blocks klarna-placement {
    color: var(--color-foreground, #2f2e2e);
    display: block;
    font-family: inherit;
    width: 100%;
  }

  .product-page__blocks klarna-placement::part(osm-container) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    padding-block: 8px 4px;
    padding-inline: 0;
  }

  .product-page__blocks klarna-placement::part(osm-badge-container) {
    flex-shrink: 0;
    line-height: 0;
  }

  .product-page__blocks klarna-placement::part(osm-badge) {
    display: block;
    height: 16px;
    width: auto;
  }

  .product-page__blocks klarna-placement::part(osm-message) {
    color: var(--color-foreground, #2f2e2e);
    font-family: inherit !important;
    font-size: var(--body-xs--size);
    font-weight: var(--body-xs--weight);
    line-height: var(--body-xs--line-height);
  }

  .product-page__blocks klarna-placement::part(osm-cta) {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit !important;
    font-size: var(--body-xs--size);
    font-weight: var(--body-xs--weight);
    line-height: var(--body-xs--line-height);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .product-page__blocks klarna-placement::part(osm-legal) {
    display: none;
  }

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

  @media screen and (min-width: 1024px) {
    .product-page {
      --product-gallery-sticky-top: 0;
    }

    /*
     * The form column is fixed at the design's 429px (Figma 16435:25030 pins
     * the accordion, designer notes and UGC blocks to that width, and the
     * colour strip is drawn 7 x 56px + 4px gutters against it). The gallery
     * takes whatever is left. Gutters come from the global page margin so the
     * PDP lines up with the header and every other section.
     */
    .product-page__container {
      align-items: start;
      column-gap: 64px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 429px;
      padding-inline: var(--section-content-gutter, var(--page-margin));
      row-gap: 0;
    }

    /* Stick while the taller info column scrolls; release at the bottom of the grid row */
    /* One row gap of clearance under the column, matching what the stacked
       mobile layout gets from the container gap. Without it a gallery column
       taller than the info column ends flush against the next section, since
       the shell carries no bottom padding on this template. */
    .product-page__gallery-column {
      align-self: start;
      display: flex;
      flex-direction: column;
      gap: var(--spacing--sm);
      min-width: 0;
      padding-block-end: var(--spacing--sm);
      position: sticky;
      top: var(--product-gallery-sticky-top);
    }

    .product-page__info-column,
    .product-page__form {
      display: block;
      min-width: 0;
      width: 100%;
    }

    .product-page__blocks {
      display: flex;
      flex-direction: column;
      gap: var(--spacing--sm);
    }

    .product-page__blocks > .shopify-block:has(> .product-badges-block) {
      display: block;
    }

    .product-page__gallery-column > *,
    .product-page__blocks > *,
    .product-page__blocks > :has(.product-accordions),
    .product-page__blocks > :has(.product-designer-notes),
    .product-page__blocks > :has(.product-social-gallery) {
      order: 0;
      padding-inline: 0;
    }

    .product-page__blocks > :has(.product-social-gallery),
    .product-page__blocks
      > :has(.product-description)
      + :has(.product-feature-usps-host) {
      margin-block-start: 0;
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:market-picker-popup (INDEX:25) */
.market-picker-popup {
    display: block;
  }

  .market-picker-popup__dialog {
    background: transparent;
    border: none;
    height: 100%;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: var(--spacing--sm);
    position: fixed;
    inset: 0;
    width: 100%;
  }

  .market-picker-popup__dialog::backdrop {
    background-color: var(--color-overlay--backdrop);
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .market-picker-popup__dialog--active::backdrop {
    opacity: 1;
  }

  .market-picker-popup__panel {
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--sm);
    box-shadow: var(--shadow--elevated);
    display: flex;
    flex-direction: column;
    margin: auto;
    max-height: calc(100dvh - var(--spacing--lg));
    max-width: 28rem;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: translateY(12px);
    transition:
      opacity 300ms ease,
      transform 300ms ease;
    width: 100%;
  }

  .market-picker-popup__dialog--active .market-picker-popup__panel {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .market-picker-popup__dialog::backdrop,
    .market-picker-popup__panel {
      transition: none;
    }
  }

  .market-picker-popup__close {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    inset-block-start: var(--spacing--2xs);
    inset-inline-end: var(--spacing--2xs);
    justify-content: center;
    padding: 0;
    position: absolute;
    width: 2rem;
    z-index: 1;
  }

  .market-picker-popup__close-icon {
    --icon-size: 14px;
  }

  .market-picker-popup__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    overflow-y: auto;
    padding: var(--spacing--lg) var(--spacing--md) var(--spacing--md);
  }

  .market-picker-popup__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-inline-end: var(--spacing--md);
    text-align: center;
  }

  .market-picker-popup__title {
    color: var(--color-text--primary);
    margin: 0;
  }

  .market-picker-popup__title :is(p, h1, h2, h3, h4, h5, h6) {
    color: inherit;
    margin: 0;
  }

  .market-picker-popup__text {
    color: var(--color-text--secondary);
  }

  .market-picker-popup__text :is(p, ul, ol, blockquote) {
    margin-block: 0 var(--spacing--sm);
  }

  .market-picker-popup__text :is(ul, ol) {
    padding-inline-start: var(--spacing--md);
    text-align: start;
  }

  .market-picker-popup__text li {
    margin-block-end: var(--spacing--3xs);
  }

  .market-picker-popup__text :is(strong, b) {
    font-weight: var(--body-md--weight-bold);
  }

  .market-picker-popup__text a {
    color: var(--color-brand--blue);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .market-picker-popup__text > :first-child {
    margin-block-start: 0;
  }

  .market-picker-popup__text > :last-child {
    margin-block-end: 0;
  }

  .market-picker-popup__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    margin: 0;
  }

  .market-picker-popup__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
  }

  .market-picker-popup__label {
    color: var(--color-text--primary);
    margin: 0;
  }

  .market-picker-popup__select-wrap {
    align-items: center;
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    display: flex;
    gap: var(--spacing--3xs);
    padding-block: var(--spacing--2xs);
    padding-inline: var(--spacing--2xs);
    position: relative;
  }

  .market-picker-popup__flag {
    flex-shrink: 0;
    line-height: 0;
  }

  .market-picker-popup__select {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: 100%;
  }

  .market-picker-popup__select-chevron {
    --icon-size: 16px;
    flex-shrink: 0;
    pointer-events: none;
  }

  .market-picker-popup__actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
  }

  .market-picker-popup__confirm {
    width: 100%;
  }

  .market-picker-popup__dismiss {
    background: transparent;
    border: none;
    color: var(--color-text--secondary);
    cursor: pointer;
    padding-block: var(--spacing--3xs);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .market-picker-popup__dismiss:hover {
    color: var(--color-text--primary);
  }
/* END_SECTION:market-picker-popup */

/* START_SECTION:model-blocks (INDEX:26) */
.model-blocks {
    --model-blocks-columns: var(--model-blocks-columns-filtered, 1);

    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    width: 100%;
  }

  /* Showing every size at once needs a column per card; filtering back to one
     size falls through to the per-size count so the card widens again. Both
     live here rather than inline so the class can win — an inline custom
     property would outrank it. */
  .model-blocks--show-all {
    --model-blocks-columns: var(
      --model-blocks-columns-all,
      var(--model-blocks-columns-filtered, 1)
    );
  }

  /* Figma 16435:27167 — the size tabs sit on one row behind a lead-in label,
     left aligned, not centred. */
  .model-blocks__nav-row {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing--sm);
    width: 100%;
  }

  .model-blocks__nav-row[hidden] {
    display: none;
  }

  .model-blocks__nav-heading {
    margin: 0;
    white-space: nowrap;
  }

  .model-blocks__nav {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--md);
    justify-content: flex-start;
  }

  .model-blocks__nav-button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text--primary);
    cursor: pointer;
    opacity: 0.4;
    padding-block: 0 var(--spacing--4xs, 4px);
    padding-inline: 0;
  }

  .model-blocks__nav-button--active {
    border-bottom-color: var(--color-text--primary);
    opacity: 1;
  }

  .model-blocks__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* Swiper needs the track to bleed past the page gutter so the next card
     peeks off the screen edge (Figma 16435:27167). The gutter comes back as
     padding, which is where Swiper starts the first slide. */
  .model-blocks__carousel {
    width: 100%;
  }

  /* `width: auto` matters: as a stretched flex item the track grows by the
     negative margins to reach both screen edges. Pinning it to 100% instead
     keeps it at the content width, so the gutter padding eats into the first
     slide and the next one is clipped away entirely. */
  .model-blocks__carousel.swiper {
    margin-inline: calc(var(--section-content-gutter, var(--page-margin)) * -1);
    padding-inline: var(--section-content-gutter, var(--page-margin));
    width: auto;
  }

  .model-blocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--model-blocks-gap, 16px);
    transition: opacity 0.25s ease;
    width: 100%;
  }

  .model-blocks--tab-fade .model-blocks__list {
    opacity: 0.35;
  }

  .model-blocks__list > .shopify-block[hidden] {
    display: none;
  }

  /* Pre-JS: a block card can't take `hidden` on its platform wrapper, so the
     section marks the card and the wrapper collapses around it. */
  .model-blocks--multi-size:not(.model-blocks--ready)
    .model-blocks__list
    > .shopify-block:has(> .model-card[data-pre-hidden]) {
    display: none;
  }

  /* Pre-JS: hide non-card/app blocks while size nav will apply */
  .model-blocks--multi-size:not(.model-blocks--ready)
    .model-blocks__list
    > .shopify-block:not(:has([data-model-card])) {
    display: none;
  }

  .model-blocks__list--carousel-mobile {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Figma 16435:27167 sizes the card at 303px inside a 375px screen — that is
     the track width less the 32px that lets the next card peek. Deriving it
     from the track keeps the peek at narrower widths too. */
  .model-blocks__list--carousel-mobile > .shopify-block {
    flex: 0 0 auto;
    width: min(303px, calc(100% - var(--spacing--lg)));
  }

  /* Once Swiper owns the track it applies the gap itself as slide margin —
     leaving the flex gap on would double it. */
  .model-blocks--carousel-ready .model-blocks__list--carousel-mobile {
    gap: 0;
  }

  .model-blocks__list--carousel-mobile > .shopify-block .model-card {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .model-blocks {
      gap: var(--spacing--xl);
    }

    .model-blocks__nav {
      gap: var(--spacing--sm);
    }

    .model-blocks__carousel.swiper {
      margin-inline: 0;
      overflow: visible;
      padding-inline: 0;
      width: 100%;
    }

    .model-blocks__list,
    .model-blocks__list--carousel-mobile {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      overflow: visible;
      scroll-snap-type: none;
    }

    .model-blocks__list > .shopify-block,
    .model-blocks__list--carousel-mobile > .shopify-block,
    .model-blocks__list--carousel-mobile > .shopify-block.swiper-slide {
      /* Fixed share of densest size group — keeps width stable when switching tabs.
         The cap keeps a single card from stretching across the full section, and
         is a merchandising choice: at 100% desktop width one 800px card makes the
         model too large to read the sizing against (CU-869ezam7d). */
      flex: 0 0
        calc(
          (
              100% - (var(--model-blocks-columns, 1) - 1) *
                var(--model-blocks-gap, 16px)
            ) /
            var(--model-blocks-columns, 1)
        );
      max-width: min(
        var(--model-blocks-card-max, 800px),
        calc(
          (
              100% - (var(--model-blocks-columns, 1) - 1) *
                var(--model-blocks-gap, 16px)
            ) /
            var(--model-blocks-columns, 1)
        )
      );
      min-width: 0;
      width: 100%;
    }
  }
/* END_SECTION:model-blocks */

/* START_SECTION:newsletter-bar (INDEX:27) */
.newsletter-bar {
    background-color: var(--newsletter-bar-bg, var(--color-brand--yellow));
    color: var(--color-text--primary);
  }

  .newsletter-bar__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-max-width));
    padding-block: var(--spacing--2xl);
    padding-inline: max(var(--spacing--sm), var(--section-content-gutter, 0px));
    width: 100%;
  }

  .newsletter-bar__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    text-align: center;
    width: 100%;
  }

  .newsletter-bar__heading {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  .newsletter-bar__text {
    margin: 0;
  }

  .newsletter-bar__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    width: 100%;
  }

  .newsletter-bar__form-field {
    height: 44px;
    margin-inline: auto;
    max-width: 438px;
    position: relative;
    width: 100%;
  }

  .newsletter-bar__input {
    background-color: var(--color-surface--primary);
    border: 1px solid transparent;
    border-radius: var(--radius--pill);
    color: var(--color-text--primary);
    height: 44px;
    padding-block: var(--spacing--2xs);
    padding-inline: var(--spacing--sm);
    padding-inline-end: 56px;
    width: 100%;
  }

  .newsletter-bar__input::placeholder {
    color: var(--color-text--secondary);
  }

  .newsletter-bar__input:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .newsletter-bar__input[aria-invalid='true'] {
    border-color: var(--color-brand--red);
  }

  .newsletter-bar__submit {
    align-items: center;
    background-color: var(--color-button--secondary);
    border: none;
    border-radius: 50%;
    color: var(--color-text--invert);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.2s ease;
    width: 44px;
    z-index: 1;
  }

  .newsletter-bar__submit:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .newsletter-bar__submit:hover:not(:disabled) {
    opacity: var(--button-secondary--opacity-hover);
  }

  .newsletter-bar__submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .newsletter-bar__submit-label {
    display: none;
  }

  .newsletter-bar__submit-icon {
    --icon-size: 24px;
    color: var(--color-text--invert);
  }

  .newsletter-bar__message {
    margin: 0;
    margin-inline: auto;
    max-width: 438px;
    min-height: 1.5em;
    text-align: center;
    width: 100%;
  }

  .newsletter-bar__message--success {
    color: var(--color-text--primary);
  }

  .newsletter-bar__message--error {
    color: var(--color-brand--red);
  }

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

  @media screen and (min-width: 768px) {
    .newsletter-bar__heading {
      font-size: 28px;
    }

    .newsletter-bar__submit {
      border-radius: var(--radius--pill);
      font-family: var(--font-body--family);
      font-size: var(--button-xs--size);
      font-weight: var(--button-xs--weight);
      line-height: var(--button-xs--line-height);
      padding-inline: var(--spacing--sm);
      text-transform: capitalize;
      width: 119px;
    }

    .newsletter-bar__submit-label {
      display: inline;
    }

    .newsletter-bar__submit .newsletter-bar__submit-icon {
      display: none;
    }

    .newsletter-bar__input {
      padding-inline-end: 132px;
    }
  }
/* END_SECTION:newsletter-bar */

/* START_SECTION:page (INDEX:28) */
.page-section__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    width: 100%;
  }
/* END_SECTION:page */

/* START_SECTION:product-carousel (INDEX:34) */
.product-carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    min-width: 0;
    width: 100%;
  }

  /*
    Hold the whole carousel off-screen until Swiper setup + any dynamic panel
    hydration finish. Avoids pre-JS first-panel paint → enhanced hide → reveal.
  */
  .product-carousel--booting {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .product-carousel-section:has(.product-carousel--booting) {
    min-height: 0;
  }

  /* Mobile only: the shell gutter is dropped so the slide track can run out to
     the screen edge, and the carousel re-applies the same value as its own
     padding so the header and the resting first card still line up with other
     sections. The 1920 cap stays on the shell content. Desktop hands the gutter
     back to the shell at the bottom of this stylesheet.

     The section tag and the shell both carry `product-carousel-section`, so
     this matches the shell as the direct parent of its own content — the
     section tag is not that parent, so it cannot match by accident. */
  .product-carousel-section > .section-shell__content {
    padding-inline: 0;
    width: 100%;
  }

  .product-carousel {
    --product-carousel-track-pad: var(--page-margin);
  }

  .product-carousel__header {
    align-items: center;
    display: flex;
    gap: var(--spacing--lg);
    justify-content: space-between;
    padding-inline: var(--product-carousel-track-pad);
    width: 100%;
  }

  .product-carousel__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--lg);
    justify-content: flex-start;
    width: 100%;
  }

  .product-carousel__tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text--primary);
    cursor: pointer;
    opacity: 0.4;
    padding-block: 0 var(--spacing--4xs);
    padding-inline: 0;
    text-align: start;
    transition: opacity 0.2s ease;
  }

  .product-carousel__tab:hover {
    opacity: 1;
  }

  .product-carousel__tab[aria-selected='true'] {
    border-bottom-color: var(--color-text--primary);
    opacity: 1;
  }

  .product-carousel__tab:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-carousel__shop-links {
    display: none;
    flex-shrink: 0;
  }

  .product-carousel__shop-link {
    align-items: center;
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--none);
    text-decoration: none;
    text-transform: capitalize;
  }

  .product-carousel__shop-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-carousel__shop-link-icon {
    --icon-size: 24px;
  }

  .product-carousel__panels {
    display: block;
    min-width: 0;
    width: 100%;
  }

  /*
    Theme editor wraps each `_product-carousel` block in `.shopify-block`.
    Stack those wrappers in the grid (do not use display: contents — that
    lets the panel expand to the full slide track and breaks Swiper width).
  */
  .product-carousel--enhanced .product-carousel__panels {
    display: grid;
    position: relative;
  }

  .product-carousel--enhanced .product-carousel__panels > .shopify-block {
    grid-area: 1 / 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .product-carousel--enhanced
    .product-carousel__panels
    [data-product-carousel-panel] {
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    visibility: hidden;
    width: 100%;
    max-width: 100%;
    z-index: 0;
  }

  /* Inactive panels leave the flow so row height matches the active tab only. */
  .product-carousel--enhanced
    .product-carousel__panels
    > .shopify-block:not(:has([data-product-carousel-panel].is-active)) {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 0;
  }

  .product-carousel--enhanced
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-panel].is-active) {
    position: relative;
    z-index: 1;
  }

  .product-carousel--enhanced
    .product-carousel__panels
    [data-product-carousel-panel].is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-carousel--enhanced
      .product-carousel__panels
      [data-product-carousel-panel] {
      transition: none;
    }
  }

  .product-carousel:not(.product-carousel--enhanced) .product-carousel__header {
    display: none;
  }

  .product-carousel:not(.product-carousel--enhanced) .product-carousel__panels {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--lg);
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    [data-product-carousel-tab] {
    cursor: default;
    display: inline-flex;
    pointer-events: none;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    [data-product-carousel-shop-link] {
    display: none;
    margin-inline-start: auto;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    [data-product-carousel-mobile-cta] {
    display: none;
    order: 3;
    width: 100%;
  }

  /* First real panel CTA/tab only — skip empty manual stubs without a panel. */
  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-panel])
    [data-product-carousel-mobile-cta] {
    display: inline-flex;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-panel])
    ~ .shopify-block:has([data-product-carousel-panel])
    [data-product-carousel-mobile-cta] {
    display: none;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    [data-product-carousel-panel] {
    display: none;
    order: 2;
    width: 100%;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-panel])
    [data-product-carousel-panel]:not(.product-carousel-panel--pending) {
    display: block;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    [data-product-carousel-panel].product-carousel-panel--pending {
    display: none;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-panel])
    ~ .shopify-block:has([data-product-carousel-panel])
    [data-product-carousel-panel] {
    display: none;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-tab])
    [data-product-carousel-tab] {
    border-bottom-color: var(--color-text--primary);
    opacity: 1;
  }

  .product-carousel:not(.product-carousel--enhanced)
    .product-carousel__panels
    > .shopify-block:has([data-product-carousel-tab])
    ~ .shopify-block:has([data-product-carousel-tab])
    [data-product-carousel-tab] {
    border-bottom-color: transparent;
    opacity: 0.4;
  }

  .product-carousel:not(.product-carousel--swiper-ready)
    .product-carousel-panel__swiper
    .swiper-wrapper {
    display: flex;
    gap: var(--product-carousel-gap, 16px);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .product-carousel:not(.product-carousel--swiper-ready)
    .product-carousel-panel__swiper
    .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .product-carousel.product-carousel--enhanced
    .product-carousel__panels
    .product-carousel__tab,
  .product-carousel.product-carousel--enhanced
    .product-carousel__panels
    .product-carousel__shop-link,
  .product-carousel.product-carousel--enhanced
    .product-carousel__panels
    .product-carousel__mobile-cta {
    display: none;
  }

  .product-carousel__footer {
    align-items: center;
    display: none;
    gap: var(--spacing--md);
    justify-content: var(--product-carousel-nav-justify, flex-start);
    padding-inline: var(--product-carousel-track-pad);
  }

  .product-carousel__footer--align-center {
    --product-carousel-nav-justify: center;
  }

  .product-carousel__footer--align-right {
    --product-carousel-nav-justify: flex-end;
  }

  .product-carousel__nav {
    display: inline-flex;
    gap: var(--spacing--none);
  }

  .product-carousel__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .product-carousel__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-carousel__nav-icon {
    --icon-size: 20px;
  }

  /* Two classes so this beats `.svg-icon svg`, which ties on specificity and
     would letterbox the 20x30 glyph inside a 24px square. */
  .product-carousel__nav-button .product-carousel__nav-icon svg {
    height: 30px;
    width: 20px;
  }

  .product-carousel__mobile-ctas {
    display: flex;
    padding-inline: var(--product-carousel-track-pad);
    width: 100%;
  }

  .product-carousel__mobile-cta {
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
    width: 100%;
  }

  .product-carousel__mobile-cta[hidden] {
    display: none;
  }

  .product-carousel__shop-link[hidden] {
    display: none;
  }

  @media screen and (min-width: 768px) {
    /* No edge-to-edge scroll on desktop, so the shell owns the gutter again at
       whatever its width setting asks for, and the carousel adds nothing on
       top of it. */
    .product-carousel-section > .section-shell__content {
      padding-inline: var(--section-content-gutter, 0px);
    }

    .product-carousel {
      --product-carousel-track-pad: 0px;
      gap: var(--spacing--lg);
    }

    .product-carousel__tabs {
      gap: var(--spacing--lg);
      justify-content: flex-start;
      width: auto;
    }

    .product-carousel__tab {
      font-size: var(--body-xl--size);
      font-weight: var(--body-xl--weight-bold);
      line-height: var(--body-xl--line-height);
    }

    .product-carousel__shop-links {
      display: block;
    }

    .product-carousel--enhanced .product-carousel__footer {
      display: flex;
    }

    .product-carousel__mobile-ctas {
      display: none;
    }

    .product-carousel__shop-link-label {
      font-size: var(--body-md--size);
      font-weight: var(--body-md--weight-bold);
      line-height: 1.4;
    }

    .product-carousel:not(.product-carousel--enhanced)
      .product-carousel__panels
      > [data-product-carousel-shop-link]:first-of-type {
      display: inline-flex;
    }

    .product-carousel:not(.product-carousel--enhanced)
      .product-carousel__panels
      > [data-product-carousel-mobile-cta]:nth-of-type(2) {
      display: none;
    }
  }
/* END_SECTION:product-carousel */

/* START_SECTION:product-highlights-video (INDEX:35) */
.product-highlights-video {
    display: flex;
    flex-direction: column;
    gap: var(--product-highlights-video-gap, var(--spacing--lg));
    width: 100%;
  }

  .product-highlights-video__media {
    display: block;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .product-highlights-video__player {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  /* Mobile-only crop: the ratio setting reframes the video below 768px, and a
     mobile upload (when present) replaces the desktop one so the crop lands on
     footage that was shot for it. */
  @media screen and (max-width: 767px) {
    .product-highlights-video__media--ratio-mobile {
      aspect-ratio: var(--product-highlights-video-ratio-mobile);
    }

    .product-highlights-video__media--ratio-mobile
      .product-highlights-video__player {
      height: 100%;
      object-fit: cover;
    }

    .product-highlights-video__media--desktop {
      display: none;
    }
  }

  @media screen and (min-width: 768px) {
    .product-highlights-video__media--mobile {
      display: none;
    }
  }

  .product-highlights-video__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    max-width: 40rem;
    min-width: 0;
    text-align: center;
    width: 100%;
    margin-inline: auto;
  }

  .product-highlights-video__title,
  .product-highlights-video__subtitle {
    margin: 0;
  }
/* END_SECTION:product-highlights-video */

/* START_SECTION:product-reviews (INDEX:36) */
.product-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    /* The buy box rating links here by anchor. The header publishes its own
       measured height on the root — 0px when the merchant has it unsticky — so
       the section clears it instead of landing underneath. */
    scroll-margin-block-start: calc(
      var(--sticky-header-offset, 0px) + var(--spacing--md)
    );
    width: 100%;
  }

  .product-reviews__heading {
    margin: 0;
    width: 100%;
  }

  .product-reviews__widgets {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    width: 100%;
  }

  .product-reviews__apps:empty {
    display: none;
  }

  .product-reviews__apps:not(:has(*)) {
    display: none;
  }

  /* Lipscore — PDP reviews */
  .product-reviews,
  .product-reviews__lipscore,
  .product-reviews #lipscore-review-list,
  .product-reviews .lipscore-review-list-container {
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
  }

  .product-reviews .lipscore-rating-star,
  .product-reviews .lipscore-svg-rating-star,
  .product-reviews .lipscore-big-rating-current .lipscore-rating-star,
  .product-reviews .lipscore-review-rating-stars-wrapper .lipscore-rating-star {
    fill: var(--color-brand--charcoal);
  }

  .product-reviews .lipscore-rating-star-inactive,
  .product-reviews .lipscore-rating-star.lipscore-rating-star-inactive {
    fill: var(--color-border--secondary, #d5d5d5);
    opacity: 1;
  }

  .product-reviews .lipscore-rating-value,
  .product-reviews .lipscore-big-rating-value {
    color: var(--color-text--primary);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
  }

  .product-reviews .lipscore-rating-votes,
  .product-reviews .lipscore-big-rating-votes,
  .product-reviews .lipscore-text-muted,
  .product-reviews .lipscore-review-date,
  .product-reviews .lipscore-review-created-at {
    color: var(--color-text--secondary, #4d4d4d);
  }

  .product-reviews .lipscore-review-author,
  .product-reviews .lipscore-review-header,
  .product-reviews .lipscore-strong {
    color: var(--color-text--primary);
    font-weight: 600;
  }

  .product-reviews .lipscore-review-text,
  .product-reviews .lipscore-review-content-wrapper {
    color: var(--color-text--primary);
    line-height: 1.5;
  }

  .product-reviews .lipscore-rating-distribution-row {
    color: var(--color-text--secondary, #4d4d4d);
  }

  .product-reviews .lipscore-review-list-container,
  .product-reviews #lipscore-review-list {
    background: transparent;
  }

  .product-reviews .lipscore-review-content,
  .product-reviews .lipscore-review-content-wrapper,
  .product-reviews .lipscore-review-footer,
  .product-reviews .lipscore-review-list-footer {
    /* Lipscore ships white backgrounds with !important */
    background: var(--color-background) !important;
    background-color: var(--color-background) !important;
  }

  .product-reviews .lipscore-review-post {
    border-block-end: 1px solid var(--color-border--secondary, #d5d5d5);
    padding-block: var(--spacing--md, 1.5rem);
  }

  .product-reviews .lipscore-review-media-image,
  .product-reviews .lipscore-review-media-list-item img {
    border-radius: var(--radius--sm, 4px);
  }

  .product-reviews .lipscore-review-vote-thumb,
  .product-reviews .lipscore-review-flag-wrapper {
    color: var(--color-text--tertiary, #606060);
  }

  .product-reviews .lipscore-paginator {
    border: 1px solid var(--color-border--secondary, #d5d5d5);
    border-radius: var(--radius--sm, 4px);
    display: flex;
    justify-content: center;
    margin-block-start: var(--spacing--md, 1.5rem);
    margin-inline: auto;
    overflow: hidden;
    width: fit-content;
  }

  .product-reviews .lipscore-paginator a,
  .product-reviews .lipscore-paginator span,
  .product-reviews .lipscore-paginator button {
    background: var(--color-brand--white, #fff);
    border: 0;
    border-inline-end: 1px solid var(--color-border--secondary, #d5d5d5);
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    min-inline-size: 2.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-decoration: none;
  }

  .product-reviews .lipscore-paginator a:last-child,
  .product-reviews .lipscore-paginator span:last-child,
  .product-reviews .lipscore-paginator button:last-child {
    border-inline-end: 0;
  }

  .product-reviews .lipscore-paginator .lipscore-slide-active,
  .product-reviews .lipscore-paginator [aria-current='page'],
  .product-reviews .lipscore-paginator .active {
    background: var(--color-brand--charcoal);
    color: var(--color-brand--white, #fff);
  }
/* END_SECTION:product-reviews */

/* START_SECTION:promo-bar (INDEX:37) */
.promo-bar {
    --promo-bar-accent-height: 4px;
    --promo-bar-fade: 400ms;
    color: var(--promo-bar-text, var(--color-text--invert));
    display: block;
  }

  .promo-bar--hidden {
    display: none;
  }

  .promo-bar__banner {
    background-color: var(--promo-bar-bg, var(--color-brand--blue));
  }

  .promo-bar__inner {
    align-items: center;
    display: flex;
    gap: var(--spacing--3xs);
    justify-content: center;
    margin-inline: auto;
    max-width: var(
      --promo-bar-inner-width,
      var(--section-content-width, var(--page-max-width))
    );
    padding-block: var(--padding-block-start-mobile, 12px)
      var(--padding-block-end-mobile, 12px);
    padding-inline: max(
      var(--spacing--3xs),
      var(--section-content-gutter, 0px)
    );
    width: 100%;
  }

  /* Slides share one grid cell so the bar is as tall as its tallest promotion
     and never resizes mid-fade. */
  .promo-bar__slides {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
  }

  .promo-bar__slide {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
    grid-area: 1 / 1;
    justify-content: center;
    text-align: center;
  }

  .promo-bar--carousel .promo-bar__slide {
    opacity: 0;
    transition:
      opacity calc(var(--promo-bar-fade) / 2) ease,
      visibility 0s linear calc(var(--promo-bar-fade) / 2);
    visibility: hidden;
  }

  .promo-bar--carousel .promo-bar__slide.is-active {
    opacity: 1;
    transition:
      opacity calc(var(--promo-bar-fade) / 2) ease
        calc(var(--promo-bar-fade) / 2),
      visibility 0s linear 0s;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .promo-bar--carousel .promo-bar__slide,
    .promo-bar--carousel .promo-bar__slide.is-active {
      transition: none;
    }
  }

  .promo-bar-text {
    font-family: var(--font-body--family);
    font-size: var(--promo-bar-text-size, 11px);
    font-weight: 400;
    letter-spacing: var(--promo-bar-tracking, 0.05em);
    line-height: 1.4;
    margin: 0;
    /* Figma measures the bar from the cap height rather than the line box, so
       the 12px padding token only lands on the designed 42px bar once the
       half-leading is trimmed. Browsers without text-box just render the bar a
       few pixels taller — nothing clips. */
    text-box: trim-both cap alphabetic;
    text-transform: var(--promo-bar-case, uppercase);
  }

  /* Bold in the merchant's rich text means semibold here, not the 700 face the
     browser would otherwise reach for — 600 is the weight the design uses and
     the one the theme loads. */
  .promo-bar-text :is(b, strong) {
    font-weight: 600;
  }

  /* Links arrive inside the merchant's inline rich text, so they are styled
     where they land rather than on a wrapper class. */
  .promo-bar-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* The padding buys a 24px tap target on a 16px glyph; the matching negative
     margin keeps that target from making the bar taller than the design. */
  .promo-bar__nav {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    margin-block: calc(var(--spacing--4xs) * -1);
    padding: var(--spacing--4xs);
  }

  /* An expired countdown can drop the bar back to a single promotion, and the
     arrows go with it — the explicit rule is needed because `display` here
     would otherwise beat the `hidden` attribute. */
  .promo-bar__nav[hidden] {
    display: none;
  }

  .promo-bar__nav:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  .promo-bar__nav-icon {
    --icon-size: 16px;
  }

  .promo-bar__accent {
    background-color: var(--promo-bar-accent, var(--color-brand--pink));
    height: var(--promo-bar-accent-height);
    width: 100%;
  }

  /* Bar-local type scale. The theme's body tokens carry a 1.5 line height and
     a 400 weight, which the Figma eyebrow style does not — so the bar owns its
     own steps rather than borrowing the wrong ones. */
  .promo-bar--text-xs {
    --promo-bar-text-size: 10px;
    --promo-bar-countdown-size: 11px;
    --promo-bar-value-size: 11px;
  }

  .promo-bar--text-sm {
    --promo-bar-text-size: 11px;
    --promo-bar-countdown-size: 12px;
    --promo-bar-value-size: 13px;
  }

  .promo-bar--text-md {
    --promo-bar-text-size: 12px;
    --promo-bar-countdown-size: 13px;
    --promo-bar-value-size: 14px;
  }

  @media screen and (min-width: 768px) {
    .promo-bar {
      --promo-bar-accent-height: 8px;
    }

    .promo-bar__inner {
      padding-block: var(--padding-block-start, 12px)
        var(--padding-block-end, 12px);
      padding-inline: max(
        var(--spacing--sm),
        var(--section-content-gutter, 0px)
      );
    }

    /* Keeps the arrows beside the message instead of stranded at the screen
       edges — the 200px inset Figma shows on a 1440 canvas. */
    .promo-bar--carousel .promo-bar__inner {
      --promo-bar-inner-width: 1080px;
    }

    .promo-bar__nav-icon {
      --icon-size: 24px;
    }

    /* Desktop collapses the two roles back onto one size, as Figma does. */
    .promo-bar--text-xs {
      --promo-bar-text-size: 12px;
      --promo-bar-countdown-size: 12px;
      --promo-bar-value-size: 13px;
    }

    .promo-bar--text-sm {
      --promo-bar-text-size: 14px;
      --promo-bar-countdown-size: 14px;
      --promo-bar-value-size: 15px;
    }

    .promo-bar--text-md {
      --promo-bar-text-size: 16px;
      --promo-bar-countdown-size: 16px;
      --promo-bar-value-size: 17px;
    }
  }
/* END_SECTION:promo-bar */

/* START_SECTION:scrolling-usp (INDEX:38) */
.scrolling-usp {
    overflow: hidden;
    width: 100%;
  }

  .scrolling-usp__viewport {
    overflow: hidden;
    width: 100%;
  }

  .scrolling-usp__track {
    display: flex;
    width: max-content;
    animation: scrolling-usp-marquee var(--scrolling-usp-duration, 50s) linear
      infinite;
    animation-direction: var(--scrolling-usp-direction, reverse);
  }

  .scrolling-usp__group {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--scrolling-usp-gap-mobile, var(--spacing--xl));
    padding-inline-end: var(--scrolling-usp-gap-mobile, var(--spacing--xl));
  }

  .scrolling-usp[data-direction='normal'] {
    --scrolling-usp-direction: normal;
  }

  .scrolling-usp[data-direction='reverse'] {
    --scrolling-usp-direction: reverse;
  }

  @keyframes scrolling-usp-marquee {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  @media screen and (min-width: 768px) {
    .scrolling-usp__group {
      gap: var(--scrolling-usp-gap, 140px);
      padding-inline-end: var(--scrolling-usp-gap, 140px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scrolling-usp__track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: var(--spacing--md);
      width: 100%;
    }

    .scrolling-usp__group[aria-hidden='true'] {
      display: none;
    }

    .scrolling-usp__group {
      flex-wrap: wrap;
      justify-content: center;
      padding-inline-end: 0;
      row-gap: var(--spacing--md);
      width: 100%;
    }
  }
/* END_SECTION:scrolling-usp */

/* START_SECTION:search-drawer (INDEX:40) */
.search-drawer-section {
    padding: 0;
  }

  .search-drawer {
    /* Mirrors the header's own inline padding so drawer content lines up with
       the logo and nav above it. The header declares these on .header, which
       this section sits outside of. */
    --search-drawer-padding-inline: var(--spacing--sm);

    display: block;
    inset-inline: 0;
    pointer-events: none;
    position: fixed;
    top: var(--search-drawer-top, 0);

    /* Above the sticky header's 20. That 20 is a stacking context, and the
       mobile menu is a non-modal `<dialog>` inside it — so it is not promoted
       to the top layer and cannot be beaten from outside at 19, which is why
       an opaque full-height menu painted straight over this drawer.
       Nothing is gained over the header itself: the panel is positioned from
       the header's bottom edge and never reaches it. The other overlays do not
       collide — the cart drawer and the market picker both open with
       `showModal()` and so live in the top layer, above every z-index; the mega
       menu's own 21 is scoped inside the header's context and is compared
       against its siblings there, not against this. */
    z-index: 21;
  }

  .search-drawer--open {
    pointer-events: auto;
  }

  .search-drawer__panels {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .search-drawer__panel {
    background-color: var(--color-surface--primary);
    border-top: 1px solid var(--color-border--secondary);
    max-height: calc(100dvh - var(--search-drawer-top, 0px));
    /* The page is NOT scroll-locked while the drawer is open, so a wheel that
       reaches the end of this panel must not chain into scrolling the page
       behind the scrim. */
    overscroll-behavior: contain;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform var(--search-motion-duration)
      var(--search-motion-easing);
    will-change: transform;
  }

  .search-drawer--open .search-drawer__panel {
    transform: translateY(0);
  }

  .search-drawer__panels[hidden] {
    display: none;
  }

  .search-drawer__overlay {
    background-color: var(--color-overlay--mega-menu);
    bottom: 0;
    cursor: default;
    inset-inline: 0;
    opacity: 0;
    position: fixed;
    top: var(--search-drawer-overlay-top, 0);
    transition: opacity var(--search-motion-duration)
      var(--search-motion-easing);
    z-index: 0;
  }

  .search-drawer--open .search-drawer__overlay {
    opacity: 1;
  }

  /* Still the rule that takes the scrim out of hit-testing while closed. The
     `hidden` attribute is removed a frame before `.search-drawer--open` lands
     and re-applied only once the close timer has run, so opacity has both a
     start frame to fade in from and the full close to fade out over. */
  .search-drawer__overlay[hidden] {
    display: none;
  }

  .search-drawer__inner {
    margin-inline: auto;
    max-width: var(--section-content-width, var(--page-width));
    padding-block: var(--spacing--md);
    padding-inline: var(--search-drawer-padding-inline);
    width: 100%;
  }

  .search-drawer__view[hidden] {
    display: none;
  }

  .search-drawer__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
  }

  .search-drawer__aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
  }

  .search-drawer__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
  }

  .search-drawer__eyebrow {
    margin: 0;
  }

  .search-drawer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .search-drawer__chip {
    background-color: var(--color-surface--secondary);
    /* Figma radius/md is 8px; the theme has no token between --radius--sm
       (4px) and --radius--pill (100px), so the measured value is used raw. */
    border-radius: 8px;
    display: inline-flex;
    padding: var(--spacing--4xs) var(--spacing--2xs);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .search-drawer__chip:hover {
    background-color: var(--color-surface--brand);
  }

  .search-drawer__chip:focus-visible,
  .search-drawer__link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

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

  .search-drawer__link {
    display: inline-block;
    text-decoration: none;
  }

  .search-drawer__link:hover {
    text-decoration: underline;
  }

  .search-drawer__link--bold,
  .search-highlight__match {
    font-weight: 600;
  }

  .search-drawer__empty-body {
    margin: 0;
    max-width: 42ch;
  }

  .search-drawer__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    min-width: 0;
  }

  .search-drawer__main-header {
    align-items: center;
    display: flex;
    gap: var(--spacing--xs);
    justify-content: space-between;
  }

  /* Both links carry .btn modifiers that set display at 0-2-0, so the
     responsive swap has to outrank them rather than tie on source order. */
  .search-drawer .search-drawer__main-header .search-drawer__see-all {
    display: none;
  }

  .search-drawer .search-drawer__main .search-drawer__see-all-button {
    display: inline-flex;
    margin-block-start: var(--spacing--3xs);
    width: 100%;
  }

  .search-drawer__products {
    display: grid;
    gap: var(--spacing--xs);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-drawer__explore {
    display: grid;
    gap: var(--spacing--3xs);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Grid placement lands on the block wrapper; the ratio has to reach the card
     itself, which sits inside it. */
  .search-drawer__explore > *:nth-child(3) {
    grid-column: 1 / -1;
  }

  .search-drawer__explore .search-explore-card {
    aspect-ratio: 164 / 178;
  }

  .search-drawer__explore > *:nth-child(3) .search-explore-card {
    aspect-ratio: 336 / 238;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-drawer__panel,
    .search-drawer__overlay {
      transition: none;
    }
  }

  @media screen and (min-width: 768px) {
    .search-drawer {
      --search-drawer-padding-inline: var(--spacing--2xl);
    }

    .search-drawer__inner {
      padding-block: var(--spacing--md) var(--spacing--xl);
    }

    .search-drawer__layout {
      display: grid;
      gap: var(--spacing--2xl);
      grid-template-columns: 272px minmax(0, 1fr);
    }

    .search-drawer__products {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .search-drawer__explore {
      gap: var(--spacing--xs);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .search-drawer__explore > *:nth-child(3) {
      grid-column: auto;
    }

    .search-drawer__explore .search-explore-card,
    .search-drawer__explore > *:nth-child(3) .search-explore-card {
      aspect-ratio: 240 / 279;
    }

    .search-drawer .search-drawer__main-header .search-drawer__see-all {
      display: inline-flex;
    }

    .search-drawer .search-drawer__main .search-drawer__see-all-button {
      display: none;
    }
  }
/* END_SECTION:search-drawer */

/* START_SECTION:search (INDEX:41) */
.search-page {
    /* 48px between tabs on mobile and 40px on desktop, edge to edge — the wider
       gap is the small screen, not the large one. The anchors' 10px padding is
       vertical, so it takes nothing off the horizontal gap and the token is the
       measured value. */
    --search-tab-gap: var(--spacing--2xl);

    /* The heading and the no-results message share one 800px column on
       desktop — Figma measures both text blocks at exactly 800 inside a 1344
       container, so the message is not narrower than the heading above it.
       Mobile has no cap at all: the text fills the 335 content column. */
    --search-content-column: 800px;

    /* Declared on the section so the collection doorways, their skeleton and
       the explore cards all read one ratio and cannot drift apart. Figma sizes
       these cards fill-width by fixed height — 335x256 and 437.333x458 — and
       the ratio reproduces both exactly at the measured widths. */
    --search-doorway-ratio: 335 / 256;
  }

  /* A wrapper only so the strip can be taken down as one unit; `contents`
     keeps the nav's own full-bleed margins measuring against the section. */
  search-tabs {
    display: contents;
  }

  search-tabs[hidden] {
    display: none;
  }

  /* Re-declared rather than borrowed: a file's stylesheet only reaches a page
     when that same file renders on it. */
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  /* Mobile draws one search field, and it is the header's stacked one, so this
     section's own field is hidden below 768px (see .search-page__form) and the
     hero is left holding the heading alone — one flex item, so the gap below
     never draws and nothing has to be unwound for it. The 16 is therefore the
     desktop figure only: the hero's measured heading-to-field gap. */
  .search-page__hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    text-align: center;
  }

  .search-page__heading {
    margin: 0;
  }

  /* Same pill as the header's field (sections/header.liquid .header__search),
     so it is built from the same tokens rather than their current values.

     Hidden below 768px: the header's stacked field (.header__search--stacked,
     unconditional markup below 768 in sections/header.liquid) is the single
     input the design draws on mobile, and a second one on the page beneath it
     is not in any frame. `display: none` rather than a visual hide, so the
     field leaves the accessibility tree and the tab order with it. Hidden
     again above 768px whenever the header falls back to that same stacked
     field — see the state gate at the end of the 768px block. */
  .search-page__form {
    align-items: center;
    background-color: var(--color-surface--secondary);
    border-radius: var(--radius--pill);
    display: none;
    gap: var(--spacing--4xs);
    height: var(--button-height);
    padding-inline: var(--spacing--2xs);
    width: 100%;
  }

  /* Without this the wrapper blockifies and its line box adds descender space
     under the glyph, pushing the icon off the pill's optical centre. */
  .search-page__form-icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .search-page__form-icon-graphic {
    --icon-size: 20px;

    color: var(--color-text--primary);
  }

  .search-page__input {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    flex: 1;
    min-width: 0;
    outline: none;
    padding: 0;
    text-align: start;
  }

  /* Figma sets this field at 14, two above the body-sm default, and it matches
     the header field. iOS Safari then zooms any focused input under 16px, so
     touch takes 16 and pointer-fine keeps the designed 14. Overriding the token
     rather than font-size keeps .font-body-sm's line-height in step and avoids
     an equal-specificity clash with it. */
  .search-page__input {
    --body-sm--size: 14px;
  }

  @media (pointer: coarse) {
    .search-page__input {
      --body-sm--size: 16px;
    }
  }

  .search-page__input::placeholder {
    color: var(--color-text--secondary);
  }

  .search-page__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .search-page__clear {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .search-page__clear[hidden] {
    display: none;
  }

  /* 20px control, 12px cross — matches the header field's clear button. */
  .search-page__clear-icon {
    --icon-size: 12px;

    color: var(--color-text--primary);
  }

  .search-page__clear:focus-visible,
  .search-page__tab:focus-visible,
  .search-page__quick-link:focus-visible,
  .search-page__load-more:focus-visible,
  .search-doorway-card:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* The tab strip scrolls, and a scroll container clips an outline drawn
     outside its padding box, so the ring is drawn just inside the anchor. */
  .search-page__tab:focus-visible {
    outline-offset: -2px;
  }

  /* Pulled out to the section edges so the base rule reads as a full-bleed
     divider, the same idiom collection-header uses for its quick links.
     The pull mirrors section-shell's own max() so the divider still reaches
     the viewport edge when a padding setting is below the page margin. */
  .search-page__tabs {
    border-block-end: 1px solid var(--color-surface--secondary);
    display: flex;
    gap: var(--search-tab-gap);
    justify-content: flex-start;
    margin-block-start: var(--spacing--md);
    margin-inline-end: calc(-1 * var(--page-margin));
    margin-inline-start: calc(-1 * var(--page-margin));
    overflow-x: auto;
    padding-inline-end: var(--page-margin);
    padding-inline-start: var(--page-margin);
    scrollbar-width: none;
  }

  .search-page__tabs::-webkit-scrollbar {
    display: none;
  }

  .search-page__tab {
    color: var(--color-text--primary);
    display: inline-block;
    flex-shrink: 0;
    padding-block: 10px;
    text-decoration: none;
  }

  /* Auto margins rather than justify-content: center — centred flex content
     that outgrows a scroll container overflows past the start edge, where
     scrolling cannot reach it. Auto margins collapse to 0 instead. The strip
     scrolls at both breakpoints, so the idiom is the same at both. */
  .search-page__tab:first-child {
    margin-inline-start: auto;
  }

  .search-page__tab:last-child {
    margin-inline-end: auto;
  }

  .search-page__tab:hover {
    text-decoration: underline;
  }

  .search-page__tab[aria-current='page'] {
    box-shadow: inset 0 -2px 0 var(--color-brand--pink);
  }

  /* snippets/search-highlight.liquid emits this class but owns no stylesheet;
     the only other declaration lives in sections/search-drawer.liquid, which
     does not render on this page. */
  .search-highlight__match {
    font-weight: 600;
  }

  .search-page__grid {
    column-gap: var(--spacing--3xs);
    display: grid;
    grid-template-columns: repeat(
      var(--search-mobile-columns, 2),
      minmax(0, 1fr)
    );
    padding-block-start: var(--spacing--md);
    row-gap: var(--spacing--md);
  }

  .search-page__quick-links {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    padding-block-start: var(--spacing--xl);
  }

  /* Figma's mobile chip is a full-width 40px row with the label centred inside
     it, so the label and its trailing arrow travel together as one centred
     group. Desktop moves the group back to the start edge, below. */
  .search-page__quick-link {
    align-items: center;
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    display: flex;
    gap: var(--spacing--3xs);
    justify-content: center;
    min-height: 40px;
    padding: var(--spacing--3xs) var(--spacing--2xs);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .search-page__quick-link:hover {
    background-color: var(--color-surface--secondary);
  }

  .search-page__quick-link-icon {
    --icon-size: 24px;
  }

  .search-page__pagination {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-block-start: var(--spacing--lg);
  }

  .search-page__error {
    margin: 0;
    text-align: center;
  }

  .search-page__error[hidden] {
    display: none;
  }

  .search-page__scope-note {
    margin: 0;
    padding-block-start: var(--spacing--md);
    text-align: center;
  }

  .search-page__scope-link {
    color: inherit;
    text-decoration: underline;
  }

  .search-page__load-more {
    width: 100%;
  }

  .search-page__status {
    margin: 0;
    padding-block-start: var(--spacing--md);
    text-align: center;
  }

  .search-page__status[hidden] {
    display: none;
  }

  .search-page__collections {
    display: block;
    padding-block-start: var(--spacing--md);
  }

  .search-page__collections-status {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
  }

  .search-page__retry[hidden] {
    display: none;
  }

  .search-page__doorways {
    display: grid;
    gap: var(--spacing--xs);
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pre-upgrade the skeleton would sit there for good, so the text fallback
     carries the loading state instead; once the element upgrades they swap. */
  search-collections:not(:defined) .search-page__skeleton {
    display: none;
  }

  search-collections:defined:not([data-settled])
    .search-page__collections-status {
    display: none;
  }

  /* Empty and error are terminal, so the skeleton stops promising results. */
  search-collections[data-settled] .search-page__skeleton {
    display: none;
  }

  .search-page__skeleton-card {
    animation: search-page-skeleton-pulse 1.2s ease-in-out infinite;
    aspect-ratio: var(--search-doorway-ratio);
    background-color: var(--color-surface--secondary);
    border-radius: var(--radius--sm);
    display: block;
    width: 100%;
  }

  @keyframes search-page-skeleton-pulse {
    50% {
      opacity: 0.5;
    }
  }

  /* Doorway card presentation lives here rather than in the snippet: the card
     is rendered through the Section Rendering API, whose stylesheet tags never
     reach the already-loaded page. */
  .search-doorway-card {
    aspect-ratio: var(--search-doorway-ratio);
    border-radius: var(--radius--sm);
    color: inherit;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
  }

  .search-doorway-card__media {
    background-color: var(--color-surface--brand);
    display: block;
    height: 100%;
    width: 100%;
  }

  .search-doorway-card__image,
  .search-doorway-card__placeholder {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.35s ease;
    width: 100%;
  }

  .search-doorway-card:hover .search-doorway-card__image,
  .search-doorway-card:hover .search-doorway-card__placeholder {
    transform: scale(1.05);
  }

  .search-doorway-card__label {
    background-color: var(--color-brand--yellow);
    border-radius: var(--radius--pill);
    bottom: var(--spacing--xs);
    color: var(--color-text--primary);
    display: inline-block;
    inset-inline-start: var(--spacing--xs);
    padding: var(--spacing--4xs) var(--spacing--2xs);
    position: absolute;
  }

  /* 36 from the element above, at both breakpoints — Figma builds it out of a
     16 auto-layout gap plus the message wrapper's own 20 padding-top, so it is
     written as that sum rather than rounded onto a single token. The 32 between
     the message and Suggestions is the group gap measured on the search
     overlay, the only frame in the file that draws the two together. */
  .search-page__no-results {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    padding-block-start: calc(var(--spacing--xs) + var(--spacing--sm));
  }

  /* No cap on mobile: Figma fills the 335 content column and wraps to three
     lines. The desktop 800 column is set below, with the heading. */
  .search-page__no-results-body {
    margin: 0;
    text-align: center;
  }

  .search-page__explore-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-block-start: var(--spacing--sm);
    width: 100%;
  }

  /* `display: flex` above would win over the attribute's UA rule, and on the
     Collections tab the group ships hidden until the real count arrives. */
  .search-page__explore-group[hidden] {
    display: none;
  }

  /* Mirrors the drawer's suggestion chips, under this section's own names. */
  .search-page__suggestions-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .search-page__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--2xs);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Mirrors the drawer's Popular-searches chip, measured from the design:
     radius/md is 8 — the theme has no 8px radius token, so it is written as
     measured rather than promoted to the nearest token. */
  .search-page__suggestion {
    background-color: var(--color-surface--secondary);
    border-radius: 8px;
    display: inline-flex;
    padding: var(--spacing--4xs) var(--spacing--2xs);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .search-page__suggestion:hover {
    background-color: var(
      --color-surface--tertiary,
      var(--color-surface--secondary)
    );
  }

  .search-page__eyebrow {
    margin: 0;
  }

  /* The explore cards are the design's "Doorways" band: one card per row on
     mobile, three across from 768px, 16px apart at both breakpoints. They take
     the doorway ratio rather than one of their own — same band, same box. */
  .search-page__explore {
    display: grid;
    gap: var(--spacing--xs);
    grid-template-columns: minmax(0, 1fr);
  }

  .search-page__explore .search-explore-card {
    aspect-ratio: var(--search-doorway-ratio);
  }

  @media (prefers-reduced-motion: reduce) {
    .search-doorway-card__image,
    .search-doorway-card__placeholder {
      transition: none;
    }

    /* The tint alone still reads as a placeholder, so the pulse is dropped
       rather than replaced. */
    .search-page__skeleton-card {
      animation: none;
    }
  }

  @media screen and (min-width: 768px) {
    .search-page {
      --search-doorway-ratio: 437 / 458;
      --search-tab-gap: var(--spacing--xl);
    }

    .search-page__heading {
      max-width: var(--search-content-column);
    }

    /* The field comes back from 768px up, where the design draws it inside the
       hero below the heading. 346.154 is what the component exports, confirmed
       on three instances including the header's own field. It is a scaled
       value, not a rounded one, so it is written as measured rather than
       tidied to 346. */
    .search-page__form {
      display: flex;
      width: 346.154px;
    }

    /* …but 768px is not where the header stops drawing its own stacked field.
       The header picks between three desktop layouts by measuring itself, not
       by breakpoint: `header--search-stacked` when the inline field will not
       fit beside the navigation, and `header--compact` when the navigation
       collapses too. Both render the same full-width stacked input this page's
       field would then sit directly underneath — the duplication the mobile
       rule above exists to remove — and between 768px and roughly 1050px that
       is where the header usually lands. So the gate is the header's resolved
       state, not the viewport.

       Theme CSS is concatenated into one stylesheet, so the header's own state
       classes are in scope here; `body` is the nearest ancestor the header and
       this page share. A header that has not upgraded carries neither class and
       so keeps the field, which matches what it renders in that state — the
       inline field, the one layout the design draws both fields in. */
    body:has(.header--search-stacked) .search-page__form,
    body:has(.header--compact) .search-page__form {
      display: none;
    }

    /* The pull and its matching padding are re-stated against the desktop
       padding settings; the centring itself is in the base layer. */
    .search-page__tabs {
      margin-inline-end: calc(-1 * var(--page-margin));
      margin-inline-start: calc(-1 * var(--page-margin));
      padding-inline-end: var(--page-margin);
      padding-inline-start: var(--page-margin);
    }

    .search-page__grid {
      column-gap: var(--search-column-gap, 16px);
      grid-template-columns: repeat(var(--search-columns, 4), minmax(0, 1fr));
      padding-block-start: var(--spacing--lg);
      row-gap: var(--search-row-gap, 32px);
    }

    .search-page__quick-links {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .search-page__quick-link {
      justify-content: flex-start;
    }

    .search-page__load-more {
      min-width: 240px;
      width: auto;
    }

    /* Same 800 column as the heading, of the 1344 available — the sentence
       sits on one line at 1440, which is what Figma draws. */
    .search-page__no-results-body {
      max-width: var(--search-content-column);
    }

    .search-page__explore-group {
      padding-block-start: var(--spacing--xl);
    }

    .search-page__doorways {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .search-page__explore {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
/* END_SECTION:search */

/* START_SECTION:shop-by-colour-pattern (INDEX:42) */
.shop-by-colour {
    --shop-by-colour-content-bg: transparent;
    --shop-by-colour-product-bg: transparent;
    /* Side-by-side, both columns are this tall, so the product count only
       changes how the grid is divided and never the section height. */
    --shop-by-colour-panel-height: 448px;
    /* Split per axis so the column gap only ever applies side by side. Stacked,
       the space between the picker and the products is a row, so it follows the
       row gap setting instead. */
    column-gap: var(--shop-by-colour-grid-gap, 8px);
    display: flex;
    flex-direction: column;
    row-gap: var(--shop-by-colour-grid-row-gap, 8px);
    width: 100%;
  }

  .shop-by-colour__empty-text {
    color: var(--color-text--secondary);
    margin: 0;
  }

  /* The _colour-content block is the column itself, so it takes the slot. */
  .shop-by-colour > .shopify-block {
    display: contents;
  }

  .shop-by-colour--fading .colour-content {
    opacity: 0.65;
    transition: opacity 0.2s ease;
  }

  .shop-by-colour__cta {
    align-items: center;
    background: transparent;
    color: var(--color-text--primary);
    display: inline-flex;
    font-family: var(--font-body--family);
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    gap: 0;
    height: auto;
    justify-content: flex-start;
    line-height: 24px;
    min-height: 24px;
    padding: 0;
    text-decoration: none;
    text-transform: capitalize;
    width: auto;
  }

  .shop-by-colour__cta[hidden] {
    display: none;
  }

  .shop-by-colour__cta .shop-by-colour__cta-icon {
    --icon-size: 24px;
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    line-height: 0;
    transform: translateX(0);
    transition: transform 0.25s ease;
    width: 24px;
  }

  .shop-by-colour__cta:hover .shop-by-colour__cta-icon {
    transform: translateX(4px);
  }

  .shop-by-colour__cta .shop-by-colour__cta-label {
    flex: 0 1 auto;
    line-height: 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .shop-by-colour__cta .shop-by-colour__cta-icon {
      transition: none;
    }
  }

  .shop-by-colour__products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    min-width: 0;
    width: 100%;
  }

  .shop-by-colour__panels {
    min-width: 0;
    position: relative;
    width: 100%;
  }

  .shop-by-colour__panels > .shopify-block {
    display: contents;
  }

  .shop-by-colour__pagination {
    justify-content: center;
    width: 100%;
  }

  .shop-by-colour__pagination[hidden] {
    display: none;
  }

  .shop-by-colour--mobile-carousel .shop-by-colour-panel {
    overflow: hidden;
    width: 100%;
  }

  .shop-by-colour--mobile-carousel
    .shop-by-colour-panel
    .shop-by-colour-panel__grid {
    display: flex;
  }

  .shop-by-colour--mobile-carousel
    .shop-by-colour-panel
    .shop-by-colour-product {
    aspect-ratio: 140 / 160;
    flex-shrink: 0;
    height: 160px;
    width: 140px;
  }

  .shop-by-colour--mobile-carousel
    .shop-by-colour-panel.swiper-initialized
    .shop-by-colour-panel__grid {
    gap: 0;
  }

  /* The content block owns its own width, so the split reads it back off the
     block. Each width joins the row at its own breakpoint, so the product grid
     keeps ~360px+ : narrow 768, medium 1000, wide 1100. */
  @media screen and (min-width: 768px) {
    .shop-by-colour__cta {
      font-size: var(--button-md--size);
    }

    .shop-by-colour:has(.colour-content--width-narrow) {
      align-items: stretch;
      flex-direction: row;
    }

    .shop-by-colour--right:has(.colour-content--width-narrow) {
      flex-direction: row-reverse;
    }

    .shop-by-colour:has(.colour-content--width-narrow)
      .shop-by-colour__products {
      flex: 1 1 0;
    }

    .shop-by-colour:has(.colour-content--width-narrow) .shop-by-colour__panels {
      height: 100%;
      min-height: var(--shop-by-colour-panel-height, 448px);
    }

    .shop-by-colour:has(.colour-content--width-narrow)
      .shop-by-colour__pagination {
      display: none;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-narrow)
      .shop-by-colour-panel
      .shop-by-colour-panel__grid {
      display: grid;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-narrow)
      .shop-by-colour-panel
      .shop-by-colour-product {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
    }
  }

  @media screen and (min-width: 1000px) {
    .shop-by-colour:has(.colour-content--width-medium) {
      align-items: stretch;
      flex-direction: row;
    }

    .shop-by-colour--right:has(.colour-content--width-medium) {
      flex-direction: row-reverse;
    }

    .shop-by-colour:has(.colour-content--width-medium)
      .shop-by-colour__products {
      flex: 1 1 0;
    }

    .shop-by-colour:has(.colour-content--width-medium) .shop-by-colour__panels {
      height: 100%;
      min-height: var(--shop-by-colour-panel-height, 448px);
    }

    .shop-by-colour:has(.colour-content--width-medium)
      .shop-by-colour__pagination {
      display: none;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-medium)
      .shop-by-colour-panel
      .shop-by-colour-panel__grid {
      display: grid;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-medium)
      .shop-by-colour-panel
      .shop-by-colour-product {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
    }
  }

  @media screen and (min-width: 1100px) {
    .shop-by-colour:has(.colour-content--width-wide) {
      align-items: stretch;
      flex-direction: row;
    }

    .shop-by-colour--right:has(.colour-content--width-wide) {
      flex-direction: row-reverse;
    }

    .shop-by-colour:has(.colour-content--width-wide) .shop-by-colour__products {
      flex: 1 1 0;
    }

    .shop-by-colour:has(.colour-content--width-wide) .shop-by-colour__panels {
      height: 100%;
      min-height: var(--shop-by-colour-panel-height, 448px);
    }

    .shop-by-colour:has(.colour-content--width-wide)
      .shop-by-colour__pagination {
      display: none;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-wide)
      .shop-by-colour-panel
      .shop-by-colour-panel__grid {
      display: grid;
    }

    .shop-by-colour--mobile-carousel:has(.colour-content--width-wide)
      .shop-by-colour-panel
      .shop-by-colour-product {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
    }
  }
/* END_SECTION:shop-by-colour-pattern */

/* START_SECTION:ugc (INDEX:43) */
.ugc {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--lg);
    overflow: hidden;
    width: 100%;
  }

  .ugc__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    justify-content: center;
    width: 100%;
  }

  /*
   * Poppins Semibold 18 / 22 (not title-xl).
   * Beats .font-title-* helpers regardless of merchant font_size.
   */
  .ugc__header .btn.btn--doorway {
    font-size: var(--body-md--size);
    line-height: 1.4;
  }

  .ugc__embed {
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  .ugc__embed:empty {
    display: none;
  }

  .ugc__embed .reeview-app-widget:empty {
    min-height: calc(clamp(140px, 42vw, 300px) * 387 / 262);
  }

  .ugc__footer {
    align-items: center;
    display: flex;
    gap: var(--spacing--md);
    justify-content: center;
    width: 100%;
  }

  .ugc__nav {
    display: none;
    gap: var(--spacing--none);
  }

  .ugc__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .ugc__nav-button:disabled {
    cursor: default;
    opacity: 0.35;
  }

  .ugc__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .ugc__nav-icon {
    --icon-size: 20px;
  }

  /* Two classes so this beats `.svg-icon svg`, which ties on specificity and
     would letterbox the 20x30 glyph inside a 24px square. */
  .ugc__nav-button .ugc__nav-icon svg {
    height: 30px;
    width: 20px;
  }

  .ugc__progress {
    align-items: center;
    display: inline-flex;
    gap: var(--spacing--4xs);
    min-height: 3px;
  }

  @media screen and (max-width: 767px) {
    .ugc-section .section-shell__content {
      padding-inline: 0;
    }

    .ugc__header,
    .ugc__footer {
      padding-inline: var(--section-content-gutter, 0px);
    }

    /* The widget reserves far more height than its cards need on small
       screens. The matching cap inside the shadow root is applied by
       ugc-videowise-carousel.js. */
    .ugc__embed--capped {
      max-height: var(--ugc-embed-height-mobile);
    }

    .ugc__embed--capped .reeview-app-widget:empty {
      min-height: var(--ugc-embed-height-mobile);
    }

    /* Alignment is a mobile-only control. The header stacks here, so the title
       and the button can share one alignment; on desktop they sit at opposite
       ends of a row and there is nothing to align together. */
    .ugc__header {
      align-items: var(--ugc-header-alignment, center);
      justify-content: var(--ugc-header-alignment, center);
      text-align: var(--ugc-header-text-alignment, center);
    }

    .ugc__header .typography-block {
      text-align: inherit;
    }

    .ugc__header .typography-block--width-fill {
      margin-inline: 0;
    }

    .ugc__header .button-block {
      justify-content: var(--ugc-header-alignment, center);
      margin-inline: 0;
    }

    .ugc__header--align-center
      .typography-block--width-fill.typography-block--max-width-narrow,
    .ugc__header--align-center
      .typography-block--width-fill.typography-block--max-width-normal {
      margin-inline: auto;
    }

    .ugc__header--align-right
      .typography-block--width-fill.typography-block--max-width-narrow,
    .ugc__header--align-right
      .typography-block--width-fill.typography-block--max-width-normal {
      margin-inline: auto 0;
    }
  }

  @media screen and (min-width: 768px) {
    .ugc__header {
      flex-direction: row;
      justify-content: space-between;
    }

    .ugc__header .section-title {
      flex: 1 0 0;
      min-width: 0;
    }

    .ugc__footer {
      justify-content: flex-start;
    }

    .ugc-videowise-carousel--ready .ugc__nav {
      display: inline-flex;
    }
  }
/* END_SECTION:ugc */

/* CSS from block stylesheet tags */
/* START_BLOCK:_card-variant-picker (INDEX:46) */
.card-variant-picker {
    padding-block: var(--padding-block-start, 0) var(--padding-block-end, 0);
    padding-inline: var(--padding-inline-start, 0) var(--padding-inline-end, 0);
  }

  @media screen and (max-width: 767px) {
    .card-variant-picker {
      padding-block: var(--padding-block-start-mobile, 0)
        var(--padding-block-end-mobile, 0);
      padding-inline: var(--padding-inline-start-mobile, 0)
        var(--padding-inline-end-mobile, 0);
    }
  }
/* END_BLOCK:_card-variant-picker */

/* START_BLOCK:_collection-filter-bar (INDEX:47) */
/* `collection-filters` is the sticky element, and a sticky box can only
     travel inside its containing block. That has to stay the section — the
     grid's full height — so neither this wrapper nor the .shopify-block the
     editor puts around it may generate a box of its own, which would be only
     as tall as the bar and leave sticky nothing to move through.

     `display: contents` removes those boxes while keeping both elements in the
     inheritance chain, so the padding custom properties set inline above still
     reach the host, which paints them. */
  .collection-filter-bar,
  .shopify-block:has(> .collection-filter-bar) {
    display: contents;
  }
/* END_BLOCK:_collection-filter-bar */

/* START_BLOCK:_collection-header-content (INDEX:48) */
.collection-header-content {
    align-items: var(--header-content-align, center);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--header-content-gap, 16px);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    text-align: var(--header-content-text-align, center);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .collection-header-content {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .collection-header-content > .shopify-block {
    max-width: 100%;
    width: fit-content;
  }

  /* Blocks that manage their own inner alignment need the full row to do it. */
  .collection-header-content
    > .shopify-block:has(.typography-block--width-fill),
  .collection-header-content > .shopify-block:has(.breadcrumbs) {
    width: 100%;
  }

  /* The group owns alignment, so neutralise the inline alignment the typography
     blocks still carry and re-derive it from the group setting. */
  .collection-header-content .typography-block--width-fill {
    margin-inline: 0;
    text-align: inherit;
  }

  .collection-header-content--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .collection-header-content--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .collection-header-content--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .collection-header-content--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }
/* END_BLOCK:_collection-header-content */

/* START_BLOCK:_collection-pagination (INDEX:49) */
.collection-page__pagination {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    /* The controls bracket the grid, so scroll anchoring would latch onto one
       and drag the viewport by the height of every batch loaded — appending
       would pin the shopper to the button instead of leaving the new cards
       below them. Excluded here so the cards themselves are the anchors. */
    overflow-anchor: none;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    text-align: center;
  }

  .collection-page__count {
    color: var(--color-text--primary);
    margin: 0;
  }

  .collection-page__load-more {
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
  }

  .collection-page__load-more[aria-busy='true'] {
    gap: 0.5rem;
    pointer-events: none;
  }

  .collection-page__load-more[aria-busy='true']::after {
    animation: collection-page-spin 0.6s linear infinite;
    border: 2px solid currentcolor;
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 14px;
    width: 14px;
  }

  @keyframes collection-page-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-page__load-more[aria-busy='true']::after {
      animation-duration: 1.6s;
    }
  }

  .collection-page__pages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--2xs);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .collection-page__page {
    color: var(--color-text--primary);
    display: block;
    font-size: var(--button-xs--size);
    line-height: var(--button-xs--line-height);
    min-width: 2rem;
    padding: var(--spacing--3xs) var(--spacing--2xs);
    text-decoration: none;
  }

  .collection-page__page--current {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  @media screen and (min-width: 768px) {
    .collection-page__pagination {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
    }
  }
/* END_BLOCK:_collection-pagination */

/* START_BLOCK:_collection-quick-filters (INDEX:50) */
.collection-header-section__quick-links {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: 100%;

    --quick-filter-card-width-narrow: 160px;
    --quick-filter-card-width-wide: 200px;
  }

  /* Collapse the row entirely when the merchant has added no quick links */
  .collection-header-section__quick-links:not(
    :has(.collection-header-section__track > *)
  ) {
    display: none;
  }

  .collection-header-section__swiper {
    background-color: var(--quick-links-background);
    border-radius: var(--radius--sm);
    width: 100%;
  }

  /* Top aligned, not centred: a label that wraps onto two lines would
     otherwise pull its card down and knock the whole row of images out of
     line. */
  .collection-header-section__track {
    align-items: flex-start;
    display: flex;
    gap: var(--quick-links-gap);
  }

  .collection-header-section__quick-links--tags
    .collection-header-section__track,
  .collection-header-section__quick-links--product
    .collection-header-section__track {
    align-items: center;
  }

  /* Swiper applies the gap itself as slide margins and sizes the track from
     `spaceBetween` alone. Leaving the CSS gap on would double the spacing and,
     worse, understate maxTranslate — the trailing cards become unreachable. */
  .collection-header-section__swiper.swiper-initialized
    .collection-header-section__track {
    gap: 0;
  }

  .collection-header-section__track > * {
    flex-shrink: 0;
  }

  /* A related link with no resolvable label renders nothing — drop its wrapper
     so the gap does not leave a phantom slide, the same way the carousel
     script hides empty block wrappers. */
  .collection-header-section__slide:not(:has(*)) {
    display: none;
  }

  /* Swiper's base CSS sizes slides at 100%; with slidesPerView: 'auto' the
     card inside the block wrapper is what should set the width. */
  .collection-header-section__track > .swiper-slide {
    height: auto;
    width: auto;
  }

  /* Progressive enhancement: until Swiper upgrades the element the track is a
     plain overflow scroller, so the cards stay reachable without JS.
     `safe center` centres only while the row fits — plain `center` would push
     the leading cards into the start overflow region, which is unreachable
     because scrollLeft cannot go negative. Swiper reproduces this with
     `centerInsufficientSlides` once initialised. */
  .collection-header-section__swiper:not(.swiper-initialized)
    .collection-header-section__track {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .collection-header-section__swiper:not(.swiper-initialized)
    .collection-header-section__track::-webkit-scrollbar {
    display: none;
  }

  .collection-header-section__quick-links--align-center
    .collection-header-section__swiper:not(.swiper-initialized)
    .collection-header-section__track {
    justify-content: flex-start;
    justify-content: safe center;
  }

  .collection-header-section__quick-links--tags
    .collection-header-section__swiper {
    padding: var(--spacing--2xs);
  }

  .collection-header-section__controls {
    align-items: center;
    display: flex;
    gap: var(--spacing--md);
    width: 100%;
  }

  .collection-header-section__controls--align-left {
    justify-content: flex-start;
  }

  .collection-header-section__controls--align-center {
    justify-content: center;
  }

  .collection-header-section__controls--align-right {
    justify-content: flex-end;
  }

  .collection-header-section__controls--locked {
    display: none;
  }

  .collection-header-section__nav {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0;
  }

  .collection-header-section__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .collection-header-section__nav-button:disabled,
  .collection-header-section__nav-button.swiper-button-disabled {
    cursor: default;
    opacity: 0.3;
  }

  .collection-header-section__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .collection-header-section__nav-icon {
    --icon-size: 20px;
  }

  .collection-header-section__nav-icon svg {
    height: 30px;
    width: 20px;
  }

  .collection-header-section__controls
    .collection-header-section__pagination.swiper-pagination {
    align-items: center;
    bottom: auto;
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing--4xs);
    justify-content: flex-start;
    left: auto;
    margin: 0;
    padding: 0;
    position: static;
    top: auto;
    transform: none;
    width: auto;
  }

  .collection-header-section__pagination.swiper-pagination-lock {
    display: none;
  }

  .collection-header-section__pagination .swiper-pagination-bullet {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: auto;
    justify-content: center;
    margin: 0 !important;
    opacity: 1;
    padding-block: var(--spacing--3xs);
    padding-inline: 0;
    position: relative;
    width: auto;
  }

  .collection-header-section__pagination .swiper-pagination-bullet::before {
    background-color: var(--color-text--primary);
    border-radius: var(--radius--pill);
    content: '';
    display: block;
    height: 3px;
    opacity: 0.3;
    transition:
      opacity 0.2s ease,
      width 0.2s ease;
    width: 6px;
  }

  .collection-header-section__pagination
    .swiper-pagination-bullet-active::before {
    opacity: 1;
    width: 26px;
  }

  .collection-header-section__pagination
    .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  @media screen and (max-width: 767px) {
    .collection-header-section__quick-links {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);

      --quick-filter-card-width-narrow: 140px;
      --quick-filter-card-width-wide: 176px;
    }

    /* Full-bleed carousel: cancel the shell inset, then re-apply it as padding
       so the first card lines up with the copy and the row runs to the edge.
       Swiper clips at the padding box, so slides stay visible right out to the
       screen edge as they scroll. `width: auto` is required — `width: 100%`
       would pin the box and shift it left instead of widening it. */
    .collection-header-section__quick-links--lifestyle
      .collection-header-section__swiper,
    .collection-header-section__quick-links--product
      .collection-header-section__swiper,
    .collection-header-section__quick-links--tags
      .collection-header-section__swiper {
      box-sizing: border-box;
      margin-inline: calc(-1 * var(--quick-links-inset-start))
        calc(-1 * var(--quick-links-inset-end));
      padding-inline: var(--quick-links-inset-start)
        var(--quick-links-inset-end);
      width: auto;
    }

    .collection-header-section__quick-links--lifestyle
      .collection-header-section__swiper:not(.swiper-initialized)
      .collection-header-section__track,
    .collection-header-section__quick-links--product
      .collection-header-section__swiper:not(.swiper-initialized)
      .collection-header-section__track,
    .collection-header-section__quick-links--tags
      .collection-header-section__swiper:not(.swiper-initialized)
      .collection-header-section__track {
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_collection-quick-filters */

/* START_BLOCK:_colour-content (INDEX:51) */
.colour-content {
    background-color: var(--shop-by-colour-content-bg, transparent);
    border-radius: var(--radius--sm);
    display: flex;
    flex-direction: column;
    gap: var(--colour-content-gap, 32px);
    justify-content: var(--colour-content-justify, center);
    /* Stacked height; the side-by-side rules below swap in the panel height. */
    min-height: var(--colour-content-height-stacked, 269px);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    text-align: var(--colour-content-text-align, center);
    transition: background-color 0.25s ease;
    width: 100%;
  }

  .colour-content__copy {
    align-items: var(--colour-content-align, center);
    display: flex;
    flex-direction: column;
    gap: var(--colour-content-text-gap, 8px);
    width: 100%;
  }

  /* Alignment is owned here, so child blocks hand their own back. */
  .colour-content .typography-block--width-fill {
    margin-inline: 0;
    text-align: inherit;
  }

  .colour-content--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .colour-content--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .colour-content--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .colour-content--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  /* Scrolls when the swatches overflow; safe keeps the first one reachable. */
  /* Swapping options animates one swatch down and another up at the same time,
     so without a floor the row's tallest child dips to halfway through the
     change and the whole section shifts with it. */
  .colour-content__swatches {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: safe var(--colour-content-align, center);
    max-width: 100%;
    min-height: var(--shop-by-colour-swatch-size-active, 56px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .colour-content__swatches::-webkit-scrollbar {
    display: none;
  }

  .colour-content__ctas {
    align-items: center;
    display: flex;
    justify-content: var(--colour-content-align, center);
    min-height: 24px;
  }

  @media screen and (max-width: 767px) {
    .colour-content {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  /* Fixed column width once the section is side by side. Each width joins the
     row at its own breakpoint, so the product grid always keeps ~360px+. */
  @media screen and (min-width: 768px) {
    .colour-content__swatches {
      gap: 4px;
      min-height: var(--shop-by-colour-swatch-size-active, 64px);
      overflow: visible;
    }

    .colour-content--width-narrow {
      flex-shrink: 0;
      min-height: var(--shop-by-colour-panel-height, 448px);
      width: 360px;
    }
  }

  @media screen and (min-width: 1000px) {
    .colour-content--width-medium {
      flex-shrink: 0;
      min-height: var(--shop-by-colour-panel-height, 448px);
      width: 540px;
    }
  }

  @media screen and (min-width: 1100px) {
    .colour-content--width-wide {
      flex-shrink: 0;
      min-height: var(--shop-by-colour-panel-height, 448px);
      width: 640px;
    }
  }
/* END_BLOCK:_colour-content */

/* START_BLOCK:_contact-form (INDEX:53) */
.contact-form {
    box-sizing: border-box;
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .contact-form {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--spacing--md));
  }

  .contact-form__fields {
    display: grid;
    gap: var(--gap, var(--spacing--md));
    grid-template-columns: 1fr;
  }

  /*
   * `content_for 'blocks'` wraps each child in `.shopify-block`, which would
   * otherwise sit between the grid and the field and swallow its width setting.
   */
  .contact-form__fields > .shopify-block {
    display: contents;
  }

  .contact-form__fields > .form-field--full,
  .contact-form__field--full,
  .contact-form__notice {
    grid-column: 1 / -1;
  }

  .contact-form__success {
    color: var(--color-text--primary);
  }

  .contact-form__errors {
    color: var(--color-text--sale);
  }

  .contact-form__errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .contact-form__submit {
    justify-self: start;
    width: fit-content;
  }

  .contact-form__submit--full {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .contact-form--two-column .contact-form__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form--two-column .contact-form__fields > .form-field--half,
    .contact-form--two-column .contact-form__field--half {
      grid-column: span 1;
    }
  }
/* END_BLOCK:_contact-form */

/* START_BLOCK:_content-card (INDEX:55) */
.content-card {
    display: flex;
    flex-direction: column;
    gap: var(--content-card-gap, 12px);
    height: 100%;
    min-width: 0;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: relative;
    width: 100%;
  }

  /* Alignment is owned by the card-grid section, which sets
     --card-grid-card-* on the grid wrapper for every card at once. */
  .content-card > .shopify-block {
    align-items: var(--card-grid-card-align-items, flex-start);
    display: flex;
    flex-direction: column;
    margin-block: 0;
    max-width: 100%;
    width: 100%;
  }

  .content-card .typography-block {
    text-align: var(--card-grid-card-text-align, left);
  }

  .content-card .button-block {
    justify-content: var(--card-grid-card-align-items, flex-start);
    margin-inline: 0;
  }

  /* The stretched card link covers the article. Lift nested buttons above it
     so they stay clickable and can go to a different URL. */
  .content-card > .shopify-block:has(.button-block) {
    position: relative;
    z-index: 2;
  }

  .content-card__link {
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  .content-card__link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .shopify-design-mode .content-card__link {
    pointer-events: none;
  }

  @media screen and (min-width: 768px) {
    .content-card {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_content-card */

/* START_BLOCK:_content-doorway (INDEX:56) */
.content-doorway {
    --content-doorway-pad-block-start-default: var(--spacing--sm);
    --content-doorway-pad-block-end-default: var(--spacing--sm);
    --content-doorway-pad-inline-start-default: var(--spacing--sm);
    --content-doorway-pad-inline-end-default: var(--spacing--sm);
    --content-doorway-pad-block-start-used: var(
      --content-doorway-pad-block-start-mobile,
      var(--content-doorway-pad-block-start-default)
    );
    --content-doorway-pad-block-end-used: var(
      --content-doorway-pad-block-end-mobile,
      var(--content-doorway-pad-block-end-default)
    );
    --content-doorway-pad-inline-start-used: var(
      --content-doorway-pad-inline-start-mobile,
      var(--content-doorway-pad-inline-start-default)
    );
    --content-doorway-pad-inline-end-used: var(
      --content-doorway-pad-inline-end-mobile,
      var(--content-doorway-pad-inline-end-default)
    );
    --content-doorway-radius: var(--radius--sm);

    aspect-ratio: var(--content-doorway-ratio-mobile, 335 / 448);
    border-radius: var(
        --content-doorway-radius-tl,
        var(--content-doorway-radius)
      )
      var(--content-doorway-radius-tr, var(--content-doorway-radius))
      var(--content-doorway-radius-br, var(--content-doorway-radius))
      var(--content-doorway-radius-bl, var(--content-doorway-radius));
    color: var(--color-text--invert, #fff);
    display: block;
    isolation: isolate;
    position: relative;
    width: 100%;
  }

  .content-doorway__blocks {
    align-items: inherit;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: flex-start;
    min-height: 100%;
    padding-block: var(--content-doorway-pad-block-start-used)
      var(--content-doorway-pad-block-end-used);
    padding-inline: var(--content-doorway-pad-inline-start-used)
      var(--content-doorway-pad-inline-end-used);
    position: absolute;
    z-index: 2;
  }

  .content-doorway__blocks > .shopify-block:has(.media-block) {
    /* The doorway clips the media to its own corner shape, so the media block
       must not round itself inside that clip. */
    --media-radius: 0;

    border-radius: var(
        --content-doorway-radius-tl,
        var(--content-doorway-radius)
      )
      var(--content-doorway-radius-tr, var(--content-doorway-radius))
      var(--content-doorway-radius-br, var(--content-doorway-radius))
      var(--content-doorway-radius-bl, var(--content-doorway-radius));
    inset: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  .content-doorway__blocks > .shopify-block:has(.media-block) .media-block,
  .content-doorway__blocks
    > .shopify-block:has(.media-block)
    .media-block__desktop,
  .content-doorway__blocks
    > .shopify-block:has(.media-block)
    .media-block__mobile {
    height: 100%;
    width: 100%;
  }

  .content-doorway__blocks
    > .shopify-block:has(.media-block)
    .media-block__image,
  .content-doorway__blocks
    > .shopify-block:has(.media-block)
    .media-block__video,
  .content-doorway__blocks
    > .shopify-block:has(.media-block)
    .media-block__placeholder {
    height: 100%;
    object-fit: var(--doorway-media-object-fit, cover);
    width: 100%;
  }

  .content-doorway__sticky {
    align-items: var(--content-doorway-sticky-align-items, flex-start);
    display: flex;
    flex-direction: column;
    gap: var(--content-doorway-gap, 16px);
    max-width: 100%;
    pointer-events: auto;
    position: sticky;
    text-align: var(--content-doorway-sticky-text-align, left);
    width: fit-content;
    z-index: 2;
  }

  /* Pre-JS, children sit directly in the wrapper rather than in the sticky
     group; keep them above the overlay either way. */
  .content-doorway__blocks > .shopify-block:not(:has(.media-block)) {
    z-index: 2;
  }

  .content-doorway__sticky > .shopify-block {
    align-self: var(--content-doorway-sticky-align-items, flex-start);
    margin-block: 0;
    max-width: 100%;
    width: fit-content;
  }

  .content-doorway--sticky-off .content-doorway__sticky {
    bottom: auto;
    position: relative;
    top: auto;
  }

  .content-doorway__overlay {
    border-radius: inherit;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .content-doorway--overlay-gradient .content-doorway__overlay {
    background: linear-gradient(
      180deg,
      transparent 25%,
      var(--color-overlay--scrim) 100%
    );
  }

  .content-doorway--overlay-solid .content-doorway__overlay {
    background-color: var(--color-overlay--scrim);
  }

  .content-doorway__badge {
    background-color: var(--color-background--primary);
    border-radius: var(--radius--pill, 100px);
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    font-size: var(--eyebrow-xs--size);
    font-weight: var(--eyebrow-xs--weight);
    left: var(--content-doorway-pad-inline-start-used);
    line-height: 1.4;
    padding-block: var(--spacing--4xs, 4px);
    padding-inline: var(--spacing--2xs, 12px);
    position: absolute;
    top: var(--content-doorway-pad-block-start-used);
    z-index: 3;
  }

  .content-doorway__sticky .button-block {
    margin-inline: 0;
  }

  .content-doorway__sticky .card-title,
  .content-doorway__sticky .card-subtitle,
  .content-doorway__sticky .section-text,
  .content-doorway__sticky .typography-block {
    color: inherit;
  }

  .content-doorway__sticky .typography-block--width-fill,
  .content-doorway__sticky .button-block--width-full {
    margin-inline: 0;
    text-align: inherit;
  }

  .content-doorway--h-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .content-doorway--h-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .content-doorway--h-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .content-doorway--h-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  .content-doorway__sticky > .shopify-block:has(.typography-block--width-fill),
  .content-doorway__sticky > .shopify-block:has(.button-block--width-full) {
    width: 100%;
  }

  .content-doorway--h-left .content-doorway__blocks {
    align-items: flex-start;
    --content-doorway-sticky-align-items: flex-start;
    --content-doorway-sticky-text-align: left;
  }

  .content-doorway--h-center .content-doorway__blocks {
    align-items: center;
    --content-doorway-sticky-align-items: center;
    --content-doorway-sticky-text-align: center;
  }

  .content-doorway--h-right .content-doorway__blocks {
    align-items: flex-end;
    --content-doorway-sticky-align-items: flex-end;
    --content-doorway-sticky-text-align: right;
  }

  /* --sticky-header-offset is the sticky header's measured height, published on
     the root by the header section and 0 when the merchant hasn't made it
     sticky. Without it the content pins under the header rather than below it.
     Bottom-stuck content pins to the bottom of the viewport, so it needs
     nothing. */
  .content-doorway--v-top:not(.content-doorway--sticky-off)
    .content-doorway__sticky {
    bottom: auto;
    margin-block: 0;
    margin-top: 0;
    top: calc(
      var(--sticky-header-offset, 0px) +
        var(
          --content-doorway-pad-block-start,
          var(--content-doorway-pad-block-start-default)
        )
    );
  }

  .content-doorway--v-middle .content-doorway__blocks {
    justify-content: center;
  }

  .content-doorway--v-middle .content-doorway__sticky {
    bottom: auto;
    margin-block: auto;
    top: auto;
  }

  .content-doorway--v-bottom:not(.content-doorway--sticky-off)
    .content-doorway__sticky {
    bottom: var(--content-doorway-pad-block-end-used);
    margin-bottom: 0;
    margin-top: auto;
    top: auto;
  }

  .content-doorway--sticky-off.content-doorway--v-top .content-doorway__sticky,
  .content-doorway--sticky-off.content-doorway--v-bottom
    .content-doorway__sticky {
    bottom: auto;
    top: auto;
  }

  .content-doorway--sticky-off.content-doorway--v-bottom
    .content-doorway__sticky {
    margin-top: auto;
  }

  @media screen and (min-width: 768px) {
    .content-doorway {
      --content-doorway-pad-block-start-default: var(--spacing--lg);
      --content-doorway-pad-block-end-default: var(--spacing--lg);
      --content-doorway-pad-inline-start-default: var(--spacing--md);
      --content-doorway-pad-inline-end-default: var(--spacing--md);
      --content-doorway-pad-block-start-used: var(
        --content-doorway-pad-block-start,
        var(--content-doorway-pad-block-start-default)
      );
      --content-doorway-pad-block-end-used: var(
        --content-doorway-pad-block-end,
        var(--content-doorway-pad-block-end-default)
      );
      --content-doorway-pad-inline-start-used: var(
        --content-doorway-pad-inline-start,
        var(--content-doorway-pad-inline-start-default)
      );
      --content-doorway-pad-inline-end-used: var(
        --content-doorway-pad-inline-end,
        var(--content-doorway-pad-inline-end-default)
      );
      aspect-ratio: var(--content-doorway-ratio-desktop, 672 / 680);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .content-doorway__sticky {
      bottom: auto;
      position: relative;
      top: auto;
    }
  }
/* END_BLOCK:_content-doorway */

/* START_BLOCK:_doorway-card (INDEX:57) */
.doorway-card {
    display: block;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: relative;
    text-decoration: none;
  }

  .doorway-card__image {
    display: block;
    height: auto;
    width: 100%;
  }

  .doorway-card--placement-on_image .doorway-card__content {
    inset: 0;
    padding: var(--spacing--sm);
    position: absolute;
  }

  .doorway-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--doorway-card-gap, 12px);
  }

  .doorway-card__content--h-left {
    align-items: flex-start;
  }

  .doorway-card__content--h-center {
    align-items: center;
  }

  .doorway-card__content--h-right {
    align-items: flex-end;
  }

  .doorway-card__content--v-top {
    justify-content: flex-start;
  }

  .doorway-card__content--v-center {
    justify-content: center;
  }

  .doorway-card__content--v-bottom {
    justify-content: flex-end;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .doorway-card {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_doorway-card */

/* START_BLOCK:_form-field (INDEX:58) */
.contact-form__field {
    box-sizing: border-box;
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .contact-form__field {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .contact-form__notice {
    color: var(--color-text--secondary);
  }
/* END_BLOCK:_form-field */

/* START_BLOCK:_mini-doorway (INDEX:59) */
.mini-doorway {
    align-items: var(--mini-doorway-content-align, flex-start);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--doorways-content-gap, 8px);
    height: auto;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    text-align: var(--mini-doorway-text-align, left);
    width: var(--mini-doorway-width, 100%);
  }

  .mini-doorway > .shopify-block,
  .mini-doorway > * {
    margin-block: 0;
    max-width: 100%;
  }

  .mini-doorway > .shopify-block:not(:has(.media-block)) {
    width: fit-content;
  }

  .mini-doorway > .shopify-block:has(.media-block),
  .mini-doorway > .shopify-block:has(.typography-block--width-fill),
  .mini-doorway > .shopify-block:has(.button-block--width-full) {
    width: 100%;
  }

  .mini-doorway .button-block {
    margin-inline: 0;
  }

  .mini-doorway .media-block,
  .mini-doorway .button-block,
  .mini-doorway .typography-block,
  .mini-doorway .card-title,
  .mini-doorway .card-subtitle,
  .mini-doorway .section-text {
    margin-block: 0;
  }

  .mini-doorway .typography-block--width-fill,
  .mini-doorway .button-block--width-full {
    margin-inline: 0;
    text-align: inherit;
  }

  .mini-doorway--align-center
    .typography-block--width-fill.typography-block--max-width-narrow,
  .mini-doorway--align-center
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto;
  }

  .mini-doorway--align-right
    .typography-block--width-fill.typography-block--max-width-narrow,
  .mini-doorway--align-right
    .typography-block--width-fill.typography-block--max-width-normal {
    margin-inline: auto 0;
  }

  .mini-doorway .media-block {
    overflow: hidden;
    width: 100%;
  }

  /* Doorway tiles round tighter than the theme's default media radius. */
  .mini-doorway .media-block {
    --media-radius: var(--radius--sm);

    border-radius: var(--radius--sm);
  }

  .mini-doorway .media-block__image,
  .mini-doorway .media-block__video,
  .mini-doorway .media-block__placeholder {
    transform: scale(1);
    transition: transform 0.35s ease;
  }

  .mini-doorway .media-block:hover .media-block__image,
  .mini-doorway .media-block:hover .media-block__video,
  .mini-doorway .media-block:hover .media-block__placeholder {
    transform: scale(1.1);
  }

  @media (prefers-reduced-motion: reduce) {
    .mini-doorway .media-block__image,
    .mini-doorway .media-block__video,
    .mini-doorway .media-block__placeholder {
      transition: none;
    }
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .mini-doorway {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_mini-doorway */

/* START_BLOCK:_product-accordions (INDEX:63) */
.product-accordions {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 0px);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  /* Dividers sit between rows only — no rule above the first or below the
     last. */
  .product-accordions.accordion:not(.accordion--no-dividers) {
    border-block-start: 0;
  }

  .product-accordions.accordion:not(.accordion--no-dividers)
    > :last-child
    .accordion-row,
  .product-accordions.accordion:not(.accordion--no-dividers)
    > .accordion-row:last-child {
    border-block-end: 0;
  }

  .product-accordions.accordion:not(
      :has(
        .accordion-row:not(
          .accordion-row--hide-empty-size-fit:not(:has(.product-size-fit__size))
        )
      )
    ) {
    display: none;
  }

  /* 12px rows on mobile, 16px on desktop. */
  .product-accordions.accordion:not(.accordion--no-dividers)
    .accordion-row__summary {
    padding-block: var(--spacing--2xs);
  }

  /* The 12px mobile question size belongs to the FAQ accordion, which shares
     the icon-plus class. Product rows stay at 14px on both breakpoints. */
  .product-accordions.accordion .accordion-row__summary.font-body-md--bold {
    font-size: var(--body-md--size);
  }

  @media screen and (min-width: 768px) {
    .product-accordions.accordion:not(.accordion--no-dividers)
      .accordion-row__summary {
      padding-block: var(--spacing--xs);
    }
  }

  .product-accordions.accordion:not(.accordion--no-dividers)
    .accordion-row__content {
    padding-block-end: var(--spacing--xs);
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-accordions {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_product-accordions */

/* START_BLOCK:_product-badges (INDEX:64) */
.product-badges-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
    min-width: 0;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  /* Mobile overlays the badge on the gallery instead, so the row carries the
     wishlist alone. Hide the theme-editor wrapper too — `display: none` on
     the inner block still leaves a flex item and a gap above the wishlist. */
  @media screen and (max-width: 1023px) {
    .product-badges-block,
    .shopify-block:has(> .product-badges-block) {
      display: none;
    }
  }

  @media screen and (min-width: 768px) {
    .product-badges-block {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_product-badges */

/* START_BLOCK:_product-carousel (INDEX:67) */
/* Client-hydrated sources stay out of layout until slides are injected. */
  .product-carousel-panel--pending {
    display: none;
  }

  /* Doubled up on .swiper because swiper-bundle.min.css sets padding: 0 on
     .swiper at the same specificity and loads after the theme bundle. */
  .product-carousel-panel__swiper,
  .product-carousel-panel__swiper.swiper {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    /* Carries the page gutter so slides can scroll past the canvas edge while
       the first one still aligns with the header above it. */
    padding-inline: var(--product-carousel-track-pad, 0px);
    width: 100%;
  }

  .product-carousel-panel__swiper .swiper-wrapper {
    align-items: stretch;
  }
/* END_BLOCK:_product-carousel */

/* START_BLOCK:_product-complementary (INDEX:68) */
.product-complementary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    padding-block-start: var(--spacing--sm);
    width: 100%;
  }

  .product-complementary__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--sm);
    justify-content: flex-start;
  }

  .product-complementary__heading {
    margin: 0;
  }

  .product-complementary__empty {
    color: var(--color-text--secondary);
    margin: 0;
  }

  .product-complementary__colours {
    display: flex;
    gap: var(--spacing--3xs);
  }

  /* Swatches render inside Shopify block wrappers under panels; JS moves
     them into [data-perfect-hue-swatches]. Keep them out of layout until
     relocate + active panel fill (also start with [hidden] in Liquid). */
  .product-complementary__panels .product-complementary__colour,
  .product-complementary__panels [data-perfect-hue-swatch] {
    display: none !important;
  }

  /* Inactive colour wrappers only contain a [hidden] panel after relocate —
     collapse them so they never leave vertical gaps in the stack. */
  .product-complementary__panels
    > .shopify-block:has([data-perfect-hue-panel][hidden]) {
    display: none;
  }

  .product-complementary:not([data-perfect-hue-ready='true'])
    [data-perfect-hue-swatches] {
    opacity: 0;
    pointer-events: none;
  }

  .product-complementary__colour {
    align-items: center;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    width: 24px;
  }

  .product-complementary__colour--button {
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  /* Inactive fill 16px; active fill 12px + 2.4px white ring + 1.2px black ring. */
  .product-complementary__colour-fill {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
  }

  .product-complementary__colour--button.product-complementary__colour--active
    .product-complementary__colour-fill {
    box-shadow:
      0 0 0 2.4px var(--color-brand--white),
      0 0 0 3.6px var(--color-text--primary);
    height: 12px;
    width: 12px;
  }

  .product-complementary__panels {
    width: 100%;
  }

  .product-complementary__panel[hidden] {
    display: none;
  }

  .product-complementary__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
    transition: opacity 0.35s ease;
  }

  .product-complementary__list--fade {
    opacity: 0;
  }

  .product-complementary__item--skeleton {
    align-items: center;
    display: flex;
    gap: var(--spacing--2xs);
    pointer-events: none;
  }

  .product-complementary__skeleton-media {
    background: linear-gradient(
      90deg,
      var(--color-brand--off-white, #faf6f1) 0%,
      var(--color-background--secondary, #e8e8e8) 50%,
      var(--color-brand--off-white, #faf6f1) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--radius--sm, 4px);
    flex: 0 0 96px;
    height: 120px;
    width: 96px;
    animation: product-complementary-skeleton 1.2s ease-in-out infinite;
  }

  .product-complementary__skeleton-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--4xs);
    min-width: 0;
  }

  .product-complementary__skeleton-line {
    background: var(--color-background--secondary, #f2f2f2);
    height: 0.75rem;
    width: 88%;
  }

  .product-complementary__skeleton-line--short {
    width: 42%;
  }

  .product-complementary__item--enter {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.35s ease,
      transform 0.35s ease;
  }

  .product-complementary__item--enter.product-complementary__item--entered {
    opacity: 1;
    transform: none;
  }

  @keyframes product-complementary-skeleton {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }

  @media screen and (min-width: 768px) {
    .product-complementary__list {
      flex-direction: row;
      gap: var(--spacing--xl);
    }

    .product-complementary__item {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-complementary__list {
      transition: none;
    }

    .product-complementary__skeleton-media {
      animation: none;
    }

    .product-complementary__item--enter {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_BLOCK:_product-complementary */

/* START_BLOCK:_product-feature-usps (INDEX:70) */
.product-feature-usps-host {
    display: block;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-feature-usps-host[hidden] {
    display: none;
  }

  /*
   * Two columns sized by their own longest label, not two equal halves —
   * 1fr columns push the second column out to the right edge of the form.
   */
  .product-feature-usps {
    display: grid;
    /* 16px rows on mobile, 12px on desktop; 32px between columns throughout. */
    gap: var(--spacing--xs) var(--spacing--lg);
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .product-feature-usps__item {
    align-items: center;
    display: flex;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  /* 26px cream disc behind the glyph, which sits inside 6px of inset. */
  .product-feature-usps__icon-wrap {
    align-items: center;
    background-color: var(--color-surface--brand);
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    height: 26px;
    justify-content: center;
    padding: 3px;
    width: 26px;
  }

  .product-feature-usps__icon {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  .product-feature-usps__icon--fallback {
    color: var(--color-text--primary);
  }

  .product-feature-usps__icon--fallback svg {
    display: block;
    height: 20px;
    width: 20px;
  }

  /* 11px labels on mobile, 12px on desktop. Scoped to the list so it beats the
     font-body-sm--bold utility the markup also carries. */
  .product-feature-usps .product-feature-usps__label {
    color: var(--color-text--primary);
    font-size: var(--body-xs--size);
  }

  @media screen and (min-width: 1024px) {
    .product-feature-usps {
      gap: var(--spacing--2xs) var(--spacing--lg);
    }

    .product-feature-usps .product-feature-usps__label {
      font-size: var(--body-sm--size);
    }
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-feature-usps-host {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:_product-feature-usps */

/* START_BLOCK:_product-title (INDEX:77) */
/* title-md drops to 18px below the md breakpoint and the design opens the
     leading to 1.5 there; the 1.3 token is the desktop value. */
  @media screen and (max-width: 767px) {
    .product-title {
      line-height: 1.5;
    }
  }
/* END_BLOCK:_product-title */

/* START_BLOCK:_search-explore-card (INDEX:82) */
.search-explore-card {
    border-radius: var(--radius--sm);
    color: inherit;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
  }

  .search-explore-card:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .search-explore-card__media {
    background-color: var(--color-surface--brand);
    display: block;
    height: 100%;
    width: 100%;
  }

  .search-explore-card__image,
  .search-explore-card__placeholder {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.35s ease;
    width: 100%;
  }

  .search-explore-card__image--desktop {
    display: none;
  }

  .search-explore-card:hover .search-explore-card__image,
  .search-explore-card:hover .search-explore-card__placeholder {
    transform: scale(1.05);
  }

  .search-explore-card__label {
    background-color: var(--color-brand--yellow);
    border-radius: var(--radius--pill);
    bottom: var(--spacing--xs);
    color: var(--color-text--primary);
    display: inline-block;
    inset-inline-start: var(--spacing--xs);
    padding: var(--spacing--4xs) var(--spacing--2xs);
    position: absolute;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-explore-card__image,
    .search-explore-card__placeholder {
      transition: none;
    }
  }

  @media screen and (min-width: 768px) {
    .search-explore-card__image--desktop {
      display: block;
    }

    .search-explore-card__image--mobile {
      display: none;
    }
  }
/* END_BLOCK:_search-explore-card */

/* START_BLOCK:accordion (INDEX:83) */
.accordion {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .accordion {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .accordion--no-dividers {
    gap: var(--gap, var(--spacing--2xs));
  }
/* END_BLOCK:accordion */

/* START_BLOCK:button (INDEX:85) */
.button-block {
    box-sizing: border-box;
    display: flex;
    justify-content: var(--button-justify-content, flex-start);
    margin-inline: var(--button-margin-inline, 0);
    max-width: 100%;
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: fit-content;
  }

  .button-block--width-full {
    width: 100%;
  }

  .button-block__link {
    max-width: 100%;
  }

  .button-block--width-full .button-block__link {
    flex: 1 1 auto;
  }

  .btn.btn--link {
    --button-padding-x: 0px;
    --button-padding-y: 0px;
  }

  .btn.btn--doorway {
    --button-padding-x: 0px;
    --button-padding-y: 0px;
    align-items: center;
    background: transparent;
    color: var(--color-text--primary);
    display: flex;
    font-family: var(--font-body--family);
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    gap: 0;
    height: auto;
    justify-content: var(--button-justify-content, flex-start);
    line-height: 24px;
    min-height: 24px;
    text-decoration: none;
    text-transform: capitalize;
    width: auto;
  }

  /* Wide only applies to filled styles — Link and Doorway have no button box */
  .button-block--width-wide .button-block__link.btn--primary,
  .button-block--width-wide .button-block__link.btn--secondary {
    --button-padding-x: 41px;
  }

  .btn--doorway__icon {
    --icon-size: 24px;
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    line-height: 0;
    transform: translateX(0);
    transition: transform 0.25s ease;
    width: 24px;
  }

  .btn.btn--doorway:hover .btn--doorway__icon {
    transform: translateX(4px);
  }

  .btn--doorway__label {
    flex: 0 1 auto;
    line-height: 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn--doorway__icon {
      transition: none;
    }
  }

  @media screen and (max-width: 767px) {
    .button-block {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }
/* END_BLOCK:button */

/* START_BLOCK:card-price (INDEX:86) */
.card-price--product {
    align-items: center;
    color: var(--typography-color);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing--3xs);
    justify-content: space-between;
    margin: 0;
    max-width: var(--typography-max-width-value, none);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    text-align: var(--typography-text-align);
    text-transform: var(--typography-text-transform);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .card-price--product {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .card-price__amount {
    align-items: baseline;
    display: flex;
    gap: var(--spacing--3xs);
  }

  .card-price__compare {
    text-decoration: line-through;
  }

  .card-price__current {
    font-weight: var(--body-lg--weight-bold);
  }

  .card-price__reviews-slot {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-inline-start: auto;
    min-height: 20px;
  }

  .card-price__lipscore:empty {
    display: none;
  }

  /* Hide the reviews link until Lipscore injects rating markup into the slot */
  .card-price__reviews-slot:has(.card-price__lipscore:empty) {
    display: none;
  }

  .card-price__reviews {
    align-items: center;
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--3xs);
    text-decoration: none;
  }

  /* Lipscore inline stars — charcoal, compact size. */
  .card-price__reviews--lipscore #lipscore-rating,
  .card-price__reviews--lipscore .lipscore-rating-small {
    align-items: center;
    display: inline-flex;
    gap: 2px;
    line-height: 1;
  }

  .card-price__reviews--lipscore .lipscore-rating-small .lipscore-rating-star,
  .card-price__reviews--lipscore
    .lipscore-rating-small
    .lipscore-svg-rating-star,
  .card-price__reviews--lipscore #lipscore-rating .lipscore-rating-star,
  .card-price__reviews--lipscore #lipscore-rating .lipscore-svg-rating-star {
    fill: var(--color-brand--charcoal);
    height: 12px;
    width: 12px;
  }

  .card-price__reviews--lipscore
    .lipscore-rating-small
    .lipscore-rating-star-inactive,
  .card-price__reviews--lipscore
    #lipscore-rating
    .lipscore-rating-star-inactive {
    fill: var(--color-border--secondary, #d5d5d5);
  }

  .card-price__reviews--lipscore .lipscore-rating-value,
  .card-price__reviews--lipscore .lipscore-compact-rating-value,
  .card-price__reviews--lipscore .lipscore-rating-votes,
  .card-price__reviews--lipscore .lipscore-compact-rating-votes,
  .card-price__reviews--lipscore .lipscore-rating-small-votes {
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size, 0.875rem);
    text-decoration: underline;
  }

  /* The score reads before the review count. Lipscore hides its value node by
     default in some widget configurations. */
  .card-price__reviews--lipscore .lipscore-rating-value,
  .card-price__reviews--lipscore .lipscore-compact-rating-value {
    display: inline !important;
    margin-inline-end: 2px;
    order: -1;
  }

  @media screen and (max-width: 767px) {
    .card-price--product {
      width: 100%;
    }
  }
/* END_BLOCK:card-price */

/* START_BLOCK:group (INDEX:90) */
.group {
    display: flex;
    gap: var(--group-gap);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  .group--width-fill {
    width: 100%;
  }

  .group--width-fit-content {
    width: fit-content;
  }

  .group--width-custom {
    width: var(--size-style-width, 100%);
  }

  /* Mobile first: the mobile direction wins below the md breakpoint, and the
     desktop one takes over from 768px. */
  .group--mobile-column,
  .group--mobile-column-reverse {
    align-items: var(--group-align-horizontal, flex-start);
    justify-content: var(--group-align-vertical, flex-start);
  }

  .group--mobile-column {
    flex-direction: column;
  }

  .group--mobile-column-reverse {
    flex-direction: column-reverse;
  }

  .group--mobile-row,
  .group--mobile-row-reverse {
    align-items: var(--group-align-vertical, center);
    justify-content: var(--group-align-horizontal, flex-start);
  }

  .group--mobile-row {
    flex-direction: row;
  }

  .group--mobile-row-reverse {
    flex-direction: row-reverse;
  }

  /* A nested group has to be the flex item itself. `content_for 'blocks'`
     wraps every child in a .shopify-block, and that div has no width of its
     own, so it would swallow the child's width setting and stop it sharing
     the row. Scoped to groups: every other child keeps the box it has always
     had. */
  .group > .shopify-block:has(> .group) {
    display: contents;
  }

  /* In a row the columns share the main axis — one Fill column takes the whole
     row, two take half each, three a third. Fit and Custom opt out and keep
     the width they asked for. */
  .group--mobile-row > .shopify-block > .group--width-fill,
  .group--mobile-row-reverse > .shopify-block > .group--width-fill {
    flex: 1 1 0;
    min-width: 0;
  }

  .group--mobile-row > .shopify-block > .group--width-fit-content,
  .group--mobile-row-reverse > .shopify-block > .group--width-fit-content {
    flex: 0 0 auto;
  }

  .group--mobile-row > .shopify-block > .group--width-custom,
  .group--mobile-row-reverse > .shopify-block > .group--width-custom {
    flex: 0 0 var(--size-style-width, 100%);
    min-width: 0;
  }

  /* Flex alignment only moves children that shrink to their content, and a
     text block usually fills the row, so the group hands its alignment down as
     text-align as well. Left is left out on purpose: those groups keep
     whatever alignment each child set for itself. */
  .group--align-center,
  .group--align-right {
    text-align: var(--group-text-align, start);
  }

  .group--align-center .typography-block,
  .group--align-right .typography-block {
    text-align: inherit;
  }

  .group--align-center .typography-block--width-fill {
    margin-inline: auto;
  }

  .group--align-right .typography-block--width-fill {
    margin-inline: auto 0;
  }

  @media screen and (max-width: 767px) {
    .group--width-custom {
      width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }

    /* A media child is the one block whose wrapper has to be told to fill.
       The image inside is already `width: 100%`, but the .shopify-block around
       it is the flex item, and a column shrink-wraps its items on the cross
       axis - so without this the media would come out at the image's intrinsic
       width. Breakpoint-scoped, because the same group can be a row here. */
    .group--mobile-column > .shopify-block:has(> .media-block),
    .group--mobile-column-reverse > .shopify-block:has(> .media-block) {
      min-width: 0;
      width: 100%;
    }

    /* In a row the media sizes on the main axis instead; it only needs to be
       allowed to shrink below the image's intrinsic width. */
    .group--mobile-row > .shopify-block:has(> .media-block),
    .group--mobile-row-reverse > .shopify-block:has(> .media-block) {
      min-width: 0;
    }
  }

  /* Desktop padding and direction; the base rules above carry the mobile ones. */
  @media screen and (min-width: 768px) {
    .group {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }

    .group--desktop-column,
    .group--desktop-column-reverse {
      align-items: var(--group-align-horizontal, flex-start);
      justify-content: var(--group-align-vertical, flex-start);
    }

    .group--desktop-column {
      flex-direction: column;
    }

    .group--desktop-column-reverse {
      flex-direction: column-reverse;
    }

    .group--desktop-row,
    .group--desktop-row-reverse {
      align-items: var(--group-align-vertical, center);
      justify-content: var(--group-align-horizontal, flex-start);
    }

    .group--desktop-row {
      flex-direction: row;
    }

    .group--desktop-row-reverse {
      flex-direction: row-reverse;
    }

    /* The desktop direction decides row sharing from 768px up, so a group that
       is a row on mobile and a column here has to hand the flex rules back. */
    .group--desktop-column > .shopify-block > .group--width-fill,
    .group--desktop-column-reverse > .shopify-block > .group--width-fill {
      flex: 0 1 auto;
      width: 100%;
    }

    .group--desktop-row > .shopify-block > .group--width-fill,
    .group--desktop-row-reverse > .shopify-block > .group--width-fill {
      flex: 1 1 0;
      min-width: 0;
    }

    .group--desktop-row > .shopify-block > .group--width-fit-content,
    .group--desktop-row-reverse > .shopify-block > .group--width-fit-content {
      flex: 0 0 auto;
    }

    .group--desktop-row > .shopify-block > .group--width-custom,
    .group--desktop-row-reverse > .shopify-block > .group--width-custom {
      flex: 0 0 var(--size-style-width, 100%);
      min-width: 0;
    }

    .group--desktop-column > .shopify-block:has(> .media-block),
    .group--desktop-column-reverse > .shopify-block:has(> .media-block) {
      min-width: 0;
      width: 100%;
    }

    .group--desktop-row > .shopify-block:has(> .media-block),
    .group--desktop-row-reverse > .shopify-block:has(> .media-block) {
      min-width: 0;
      width: auto;
    }
  }
/* END_BLOCK:group */

/* START_BLOCK:html-embed (INDEX:91) */
.html-embed-block {
    min-width: 0;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    text-align: var(--html-embed-block-text-align, inherit);
    width: 100%;
  }

  .html-embed-block iframe,
  .html-embed-block video,
  .html-embed-block img {
    max-width: 100%;
  }

  .html-embed-block__placeholder {
    color: var(--color-text--secondary);
    margin: 0;
  }

  @media screen and (min-width: 768px) {
    .html-embed-block {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_BLOCK:html-embed */

/* START_BLOCK:section-text (INDEX:97) */
.section-text--expandable {
    box-sizing: border-box;
    color: var(--typography-color);
    display: block;
    margin-block: 0;
    margin-inline: var(--typography-margin-inline, 0);
    max-width: min(100%, var(--typography-max-width-value, 100%));
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    text-align: var(--typography-text-align, start);
    text-transform: var(--typography-text-transform);
    text-wrap: var(--typography-text-wrap);
    width: var(--size-style-width, fit-content);
  }

  @media screen and (max-width: 767px) {
    .section-text--expandable {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .section-text__content {
    margin: 0;
  }

  .section-text__toggle {
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: none;
    padding: 0;
    text-decoration: underline;
    vertical-align: baseline;
  }

  .section-text--enhanced .section-text__toggle {
    display: inline;
  }

  /* Collapsed: hide everything past the mobile preview and cap it with an
     ellipsis. The ellipsis is a pseudo-element so no markup whitespace can
     open a gap between the copy and the "…". */
  .section-text--enhanced[data-expanded='false'] .section-text__preview-extra,
  .section-text--enhanced[data-expanded='false'] .section-text__remainder {
    display: none;
  }

  .section-text--enhanced[data-expanded='false'] .section-text__preview::after {
    content: '…';
  }

  @media screen and (min-width: 768px) {
    /* Desktop fits more copy, so only the remainder collapses. */
    .section-text--enhanced[data-expanded='false']
      .section-text__preview-extra {
      display: inline;
    }

    .section-text--enhanced[data-expanded='false']
      .section-text__preview::after {
      content: none;
    }

    .section-text--enhanced[data-expanded='false']
      .section-text__preview-extra::after {
      content: '…';
    }

    /* Copy short enough for the desktop preview needs no desktop toggle. */
    .section-text--expandable-mobile .section-text__toggle {
      display: none;
    }

    .section-text--expandable-mobile[data-expanded='false']
      .section-text__preview-extra::after {
      content: none;
    }
  }
/* END_BLOCK:section-text */

/* START_BLOCK:wrapper (INDEX:99) */
.wrapper {
    display: flex;
    gap: var(--wrapper-row-gap) var(--wrapper-column-gap);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  .wrapper--width-fill {
    width: 100%;
  }

  .wrapper--width-fit-content {
    width: fit-content;
  }

  .wrapper--width-custom {
    width: var(--size-style-width, 100%);
  }

  /* Every child block sits in a .shopify-block, and that div — not the block
     inside it — is the flex item. It has no width, so it sizes to content and
     a nested wrapper set to Fill still shrank. Hand the child's width choice
     up to the item that carries it. Width rather than flex-grow: grow works on
     the main axis, which would stretch the child vertically in a column. */
  .wrapper > .shopify-block:has(> .wrapper--width-fill) {
    min-width: 0;
    width: 100%;
  }

  .wrapper > .shopify-block:has(> .wrapper--width-custom) {
    min-width: 0;
    width: var(--size-style-width, 100%);
  }

  /* Mobile first: the mobile direction wins below the md breakpoint, and the
     desktop one takes over from 768px. */
  .wrapper--mobile-column {
    align-items: var(--wrapper-align-horizontal, flex-start);
    flex-direction: column;
    justify-content: var(--wrapper-align-vertical, flex-start);
  }

  .wrapper--mobile-row {
    align-items: var(--wrapper-align-vertical, center);
    flex-direction: row;
    justify-content: var(--wrapper-align-horizontal, flex-start);
  }

  .wrapper--mobile-column-reverse {
    align-items: var(--wrapper-align-horizontal, flex-start);
    flex-direction: column-reverse;
    justify-content: var(--wrapper-align-vertical, flex-start);
  }

  .wrapper--mobile-row-reverse {
    align-items: var(--wrapper-align-vertical, center);
    flex-direction: row-reverse;
    justify-content: var(--wrapper-align-horizontal, flex-start);
  }

  /* Space between collapses to flex-start as soon as one of two children is
     hidden — which is exactly what the product badge does below 1024px. An
     auto margin keeps the survivor at the end there, and matches
     space-between while both are visible. Only for a pair: three or more
     children keep real space-between. */
  .wrapper--mobile-row.wrapper--split
    > :first-child:nth-last-child(2)
    ~ :last-child,
  .wrapper--mobile-row-reverse.wrapper--split
    > :first-child:nth-last-child(2)
    ~ :last-child {
    margin-inline-start: auto;
  }

  @media screen and (max-width: 767px) {
    .wrapper--width-custom {
      width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }

    .wrapper--mobile-width-fill {
      width: 100%;
    }

    .wrapper--mobile-width-fit-content {
      width: fit-content;
    }

    .wrapper--mobile-width-custom {
      width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }

    .wrapper > .shopify-block:has(> .wrapper--mobile-width-fill) {
      min-width: 0;
      width: 100%;
    }

    .wrapper > .shopify-block:has(> .wrapper--mobile-width-fit-content) {
      width: fit-content;
    }

    .wrapper > .shopify-block:has(> .wrapper--mobile-width-custom) {
      min-width: 0;
      width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }

  @media screen and (min-width: 768px) {
    .wrapper {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }

    .wrapper--desktop-column {
      align-items: var(--wrapper-align-horizontal, flex-start);
      flex-direction: column;
      justify-content: var(--wrapper-align-vertical, flex-start);
    }

    .wrapper--desktop-row {
      align-items: var(--wrapper-align-vertical, center);
      flex-direction: row;
      justify-content: var(--wrapper-align-horizontal, flex-start);
    }

    .wrapper--desktop-column-reverse {
      align-items: var(--wrapper-align-horizontal, flex-start);
      flex-direction: column-reverse;
      justify-content: var(--wrapper-align-vertical, flex-start);
    }

    .wrapper--desktop-row-reverse {
      align-items: var(--wrapper-align-vertical, center);
      flex-direction: row-reverse;
      justify-content: var(--wrapper-align-horizontal, flex-start);
    }

    .wrapper--desktop-row.wrapper--split
      > :first-child:nth-last-child(2)
      ~ :last-child,
    .wrapper--desktop-row-reverse.wrapper--split
      > :first-child:nth-last-child(2)
      ~ :last-child {
      margin-inline-start: auto;
    }
  }
/* END_BLOCK:wrapper */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-row (INDEX:100) */
.accordion-row {
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--sm);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  /* One product-size-fit render; hide when every size was skipped (no specs/copy) */
  .accordion-row--hide-empty-size-fit:not(:has(.product-size-fit__size)) {
    display: none;
  }

  .accordion-row__summary {
    align-items: center;
    color: var(--accordion-row-heading-color);
    cursor: pointer;
    display: flex;
    gap: var(--spacing--3xs);
    justify-content: space-between;
    list-style: none;
    text-transform: var(--accordion-row-heading-transform);
  }

  .accordion-row__summary::-webkit-details-marker {
    display: none;
  }

  .accordion-row__heading {
    flex: 1 0 0;
    min-width: 0;
    text-align: start;
  }

  .accordion-row__icons {
    --icon-size: 20px;

    display: grid;
    flex-shrink: 0;
    height: 20px;
    place-items: center;
    position: relative;
    width: 20px;
  }

  .accordion-row__icon {
    align-items: center;
    color: var(--accordion-row-heading-color);
    display: none;
    grid-area: 1 / 1;
    justify-content: center;
  }

  .accordion-row__panel {
    height: 0;
    overflow: hidden;
  }

  .accordion-row[open] .accordion-row__panel {
    height: auto;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .accordion-row__icon {
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }

    .accordion-row__panel {
      transition: height 0.3s ease;
    }
  }

  .accordion-row__content {
    color: var(--accordion-row-content-color);
    padding-block-start: var(--spacing--3xs);
  }

  .accordion-row__content a {
    text-decoration: underline;
  }

  /* metafield_tag wraps RTE in .metafield-rich_text_field — unwrap visually */
  .accordion-row__content .metafield-rich_text_field {
    display: contents;
  }

  /* Plus / minus icons (default FAQ look) */
  .accordion--icon-plus .accordion-row__icon--plus {
    display: inline-flex;
  }

  .accordion--icon-plus .accordion-row[open] .accordion-row__icon--plus {
    display: none;
  }

  .accordion--icon-plus .accordion-row[open] .accordion-row__icon--minus {
    display: inline-flex;
  }

  /* Caret icon */
  .accordion--icon-caret .accordion-row__icon--caret {
    display: inline-flex;
  }

  .accordion--icon-caret .accordion-row[open] .accordion-row__icon--caret {
    transform: rotate(180deg);
  }

  /* Divider style (legacy / optional) */
  .accordion:not(.accordion--no-dividers) .accordion-row {
    background-color: transparent;
    border-block-end: 1px solid var(--color-border--secondary);
    border-radius: 0;
  }

  .accordion:not(.accordion--no-dividers) .accordion-row__summary {
    padding-block: var(--spacing--sm);
  }

  .accordion:not(.accordion--no-dividers) .accordion-row__content {
    padding-block-end: var(--spacing--sm);
  }

  /* Card style (FAQ design). Merchant padding adds to the card inset so a
     stored 0 keeps the existing look. */
  .accordion--no-dividers .accordion-row {
    padding-block: calc(
        var(--spacing--xs) + var(--padding-block-start-mobile, 0px)
      )
      calc(var(--spacing--xs) + var(--padding-block-end-mobile, 0px));
    padding-inline: calc(
        var(--spacing--xs) + var(--padding-inline-start-mobile, 0px)
      )
      calc(var(--spacing--xs) + var(--padding-inline-end-mobile, 0px));
  }

  /* Mobile question size is 12px; desktop keeps body-md (14px). */
  .accordion--icon-plus .accordion-row__summary.font-body-md--bold {
    font-size: var(--body-sm--size);
  }

  @media screen and (min-width: 768px) {
    .accordion-row {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }

    .accordion--no-dividers .accordion-row {
      padding-block: calc(var(--spacing--xs) + var(--padding-block-start, 0px))
        calc(var(--spacing--xs) + var(--padding-block-end, 0px));
      padding-inline: calc(
          var(--spacing--xs) + var(--padding-inline-start, 0px)
        )
        calc(var(--spacing--xs) + var(--padding-inline-end, 0px));
    }

    .accordion--icon-plus .accordion-row__summary.font-body-md--bold {
      font-size: var(--body-md--size);
    }
  }
/* END_SNIPPET:accordion-row */

/* START_SNIPPET:brand-logo (INDEX:101) */
.brand-logo {
    color: inherit;
    text-decoration: none;
  }

  .brand-logo__text {
    color: inherit;
    line-height: 1;
  }
/* END_SNIPPET:brand-logo */

/* START_SNIPPET:breadcrumbs (INDEX:103) */
.breadcrumbs {
    box-sizing: border-box;
    color: var(--typography-color, var(--color-text--primary));
    text-transform: var(--typography-text-transform, none);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
  }

  @media screen and (max-width: 767px) {
    .breadcrumbs {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  /* The trail stays on one line; the current crumb ellipses rather than
     wrapping onto a second row. */
  .breadcrumbs__list {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--breadcrumbs-gap, var(--spacing--3xs));
    justify-content: var(--breadcrumbs-justify, flex-start);
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

  .breadcrumbs__item {
    align-items: center;
    display: inline-flex;
    gap: var(--breadcrumbs-gap, var(--spacing--3xs));
    min-width: 0;
  }

  .breadcrumbs__item:not(:last-child) {
    flex-shrink: 0;
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: var(--breadcrumbs-link-decoration, underline);
    white-space: nowrap;
  }

  .breadcrumbs__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumbs__separator {
    flex-shrink: 0;
  }

  .breadcrumbs__current,
  .breadcrumbs__separator {
    color: inherit;
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:carousel-pagination-styles (INDEX:104) */
.carousel-pagination {
    align-items: center;
    display: flex;
    gap: var(--spacing--4xs);
    min-height: 3px;
    width: auto;
  }

  .carousel-pagination__bullet {
    background-color: var(--color-brand--charcoal);
    border: 0;
    border-radius: var(--radius--pill);
    display: inline-block;
    flex-shrink: 0;
    height: 3px;
    margin: 0;
    opacity: 0.4;
    padding: 0;
    transition:
      width 0.25s ease,
      opacity 0.25s ease;
    width: 6px;
  }

  .carousel-pagination__bullet--active {
    border-radius: var(--radius--sm);
    opacity: 1;
    width: 40px;
  }

  /* Swiper positions its pagination absolutely against the slide area. Every
     carousel here places it in normal flow instead. */
  .carousel-pagination.swiper-pagination-horizontal {
    bottom: auto;
    left: auto;
    position: static;
    top: auto;
    transform: none;
    width: auto;
  }

  .carousel-pagination.swiper-pagination-lock {
    display: none;
  }

  button.carousel-pagination__bullet {
    cursor: pointer;
  }

  .carousel-pagination__bullet:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel-pagination__bullet {
      transition: none;
    }
  }
/* END_SNIPPET:carousel-pagination-styles */

/* START_SNIPPET:cart-drawer-line-item (INDEX:105) */
/*
    A column: the media + text row, then the bundle "Included" panel beneath it
    at full width. Non-bundle lines have the row as their only child, so this
    lays out exactly as the single flex row it replaces.
  */
  .cart-drawer-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .cart-drawer-item__row {
    display: flex;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .cart-drawer-item__media {
    background-color: var(--color-surface--brand);
    display: block;
    flex-shrink: 0;
    height: 140px;
    overflow: hidden;
    text-decoration: none;
    width: 112px;
  }

  .cart-drawer-item__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .cart-drawer-item__image-placeholder {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  .cart-drawer-item__placeholder-icon {
    --icon-size: 32px;
    color: var(--color-text--tertiary);
  }

  /*
    Figma 17227:20760 stretches the text column to the media's full 140 and
    pins the controls to the bottom — title at y=2, CTAs ending at 140 — rather
    than centring the stack with a gap. Every row inside is 8 apart
    (44-36, 78-70, 106-98), not 12.
  */
  .cart-drawer-item__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding-block-start: 2px;
  }

  .cart-drawer-item__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
  }

  .cart-drawer-item__title-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  .cart-drawer-item__title {
    color: var(--color-text--primary);
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
  }

  .cart-drawer-item__title:hover {
    text-decoration: underline;
  }

  /*
    Two-corner tag shape, the same component as snippets/product-badge.liquid
    (Figma Badge 7045:2935) — top-right and bottom-left only, not a pill.
  */
  .cart-drawer-item__badge {
    align-items: center;
    background-color: var(--color-brand--blue);
    border-end-start-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    color: var(--color-text--invert);
    display: inline-flex;
    flex-shrink: 0;
    /* Client's call: the token is 600, which renders heavier in the browser
       than it reads in Figma, so 400 is what actually matches. */
    font-weight: 400;
    margin-inline-start: auto;
    min-height: 20px;
    padding-inline: var(--spacing--3xs);
  }

  /* Description row: options on the left, badge right-aligned, 12 between. */
  .cart-drawer-item__meta {
    align-items: center;
    display: flex;
    gap: var(--spacing--2xs);
  }

  .cart-drawer-item__options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xs);
    min-width: 0;
  }

  .cart-drawer-item__option {
    margin: 0;
  }

  .cart-drawer-item__actions {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .cart-drawer-item__actions--gift {
    justify-content: flex-end;
  }

  /*
    Flex, not block: the price is an inline-flex child, so a block wrapper adds
    ~7px of line-box leading under it and pushes the option row off its 8 gap
    (the cart page's row carries the same fix).
  */
  .cart-drawer-item__price {
    display: flex;
  }

  /*
    Quantity selector: 96x32 pill, glyphs 12x12 with their outer edges on the
    12px inset (Figma 16716:49039: minus at x=12..24, plus at x=72..84).

    icon-minus/plus.svg are shared 20-unit boxes whose stroke only spans
    4.5..15.5, so an --icon-size of 12 drew a 6.6px glyph — the "+/- too small"
    of the review. Render the box at 20 (glyph 11, against the drawn 12) and
    inset the pill by 8, which puts the glyph edges at 12.5 and 83.5 — within
    half a pixel of the design without touching an asset every other component
    shares. Identical to .cart-line-item__quantity on the cart page.
  */
  .cart-drawer-item__quantity {
    align-items: center;
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--pill);
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: space-between;
    padding-inline: var(--spacing--3xs);
    width: 96px;
  }

  .cart-drawer-item__quantity-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .cart-drawer-item__quantity-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .cart-drawer-item__quantity-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .cart-drawer-item__quantity-icon {
    --icon-size: 20px;
  }

  .cart-drawer-item__quantity-value {
    color: var(--color-text--primary);
    text-align: center;
  }

  .cart-drawer-item__remove {
    align-items: center;
    background-color: var(--color-surface--brand);
    border: none;
    border-radius: 50%;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
  }

  /*
    In flight: dim the row's own children rather than the row, so the spinner
    drawn on ::after keeps full contrast — opacity on the host would fade the
    pseudo-element with everything else.
  */
  .cart-drawer-item[aria-busy='true'] {
    pointer-events: none;
    position: relative;
  }

  .cart-drawer-item[aria-busy='true'] > * {
    opacity: 0.35;
  }

  .cart-drawer-item[aria-busy='true']::after {
    animation: cart-drawer-item-spin 600ms linear infinite;
    border: 2px solid var(--color-text--primary);
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    height: 24px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% -50%;
    width: 24px;
  }

  @keyframes cart-drawer-item-spin {
    to {
      rotate: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer-item[aria-busy='true']::after {
      animation-duration: 1.8s;
    }
  }

  /*
    The design's own bin (Figma Icons/General/Bin, exported 4 Sep 2026): a
    filled glyph on a 15 x 16 viewBox whose ink spans 14 x 15.19 — the size the
    frame draws inside the 32 disc. Rendered at its own box, 15 x 16, so no
    scaling lands its edges between pixels; the outline asset it replaces was
    drawn at a fractional 16 x 17 and blurred. Two class levels because
    `.svg-icon svg` in icon.liquid ties on specificity and is concatenated later.
  */
  .cart-drawer-item__remove-icon {
    --icon-size: 16px;
  }

  .cart-drawer-item__remove .cart-drawer-item__remove-icon svg {
    height: 16px;
    max-width: none;
    width: 15px;
  }
  .cart-drawer-item__bundle-qty {
    margin: 0;
  }

  /* Bundle components — the POC's mini cart display, unchanged. */
  .cart-drawer-item__included {
    background-color: var(--color-surface--brand);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding: var(--spacing--xs);
    width: 100%;
  }

  .cart-drawer-item__included-label {
    color: var(--color-text--primary);
    margin: 0;
  }

  .cart-drawer-item__components {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cart-drawer-item__component {
    align-items: center;
    display: flex;
    gap: var(--spacing--2xs);
  }

  .cart-drawer-item__component-media {
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--sm);
    flex-shrink: 0;
    height: 64px;
    overflow: hidden;
    width: 64px;
  }

  .cart-drawer-item__component-image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .cart-drawer-item__component-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .cart-drawer-item__component-title,
  .cart-drawer-item__component-variant,
  .cart-drawer-item__component-qty {
    margin: 0;
  }
/* END_SNIPPET:cart-drawer-line-item */

/* START_SNIPPET:cart-drawer-summary (INDEX:106) */
/*
    `Sticky Checkout` 503x112 / 375x130: 20 padding all round. No rule above it
    in either frame; the shadow stands in for the one the review asked to
    remove — no shadow token in the theme reads right on a footer edge
    (--shadow--elevated is a 40px drop for floating panels), so the value is
    local and labelled a judgement call in the spec.

    Two rows now, so the gap IS the note -> CTA distance, and that distance is
    not the same at both breakpoints: 12 on desktop (50 - 38), 8 on mobile
    (68 - 60). The earlier build used 12 at both as a stated decision; with the
    footer rebuilt to the frame, the frame's own values apply.
  */
  .cart-drawer-summary {
    background-color: var(--color-surface--primary);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    padding: var(--spacing--sm);
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .cart-drawer-summary__note {
    margin: 0;
    text-align: center;
  }

  .cart-drawer-summary__form {
    margin: 0;
  }

  /* See snippets/cart-summary.liquid — the same hold, on the drawer's CTA. */
  [data-fgwp-settling] .cart-drawer-summary__checkout {
    opacity: 0.5;
    pointer-events: none;
  }

  /*
    The CTA holds its label and the total, 20 in from each end — label x=20
    inside the 463 button, price frame ending 20 short of its right edge. Every
    cart CTA is 42 high in Button/xs (13/1.4/600, capitalised, no tracking)
    against the theme's 36/40 uppercase buttons, so the type is restated here
    the way cart-summary.liquid does it. Two class levels so these win over
    .btn--primary whatever order the stylesheets concatenate in.
  */
  .cart-drawer-summary .cart-drawer-summary__checkout {
    --button-height: 42px;
    align-items: center;
    display: flex;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    gap: var(--spacing--2xs);
    justify-content: space-between;
    letter-spacing: normal;
    line-height: var(--button-xs--line-height);
    padding-inline: var(--spacing--sm);
    text-transform: capitalize;
    width: 100%;
  }

  /*
    4 is `spacing/spacing-4xs`, bound on the Sticky Checkout frame and the only
    spacing token there that the geometry does not already account for (12 is
    note -> CTA, 20 the padding). The frame stacks its two prices at the same
    x with the original hidden, so the pair's gap cannot be measured off it —
    derived, not measured.
  */
  .cart-drawer-summary__cta-price {
    align-items: baseline;
    display: inline-flex;
    gap: var(--spacing--4xs);
  }

  .cart-drawer-summary__compare {
    color: var(--color-text--primary);
  }

  .cart-drawer-summary__total--sale {
    color: var(--color-text--sale);
  }

  @media screen and (min-width: 768px) {
    .cart-drawer-summary {
      gap: var(--spacing--2xs);
    }
  }
/* END_SNIPPET:cart-drawer-summary */

/* START_SNIPPET:cart-line-item-price (INDEX:107) */
.cart-line-item-price {
    align-items: baseline;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

  .cart-line-item-price__compare {
    color: var(--color-text--sale);
  }

  .cart-line-item-price__current--free {
    color: var(--color-brand--blue);
  }

  /*
    Cart page variant. Figma `Shopping Cart / Product Card` prices are
    12/1.5 on mobile (335x140 frame) and 14/1.5 from the desktop frame, and the
    plain price is text-primary there rather than the drawer's secondary. Two
    class levels so these win over the .font-body-* utilities whatever order
    the section stylesheets concatenate in.
  */
  .cart-line-item-price--page .cart-line-item-price__current {
    color: var(--color-text--primary);
  }

  .cart-line-item-price--page .cart-line-item-price__current--free {
    color: var(--color-brand--blue);
  }

  @media screen and (min-width: 768px) {
    /* Compare-at -> current gap: 4 on mobile (44-40), 8 on desktop (84.5-76.5). */
    .cart-line-item-price--page {
      gap: var(--spacing--3xs);
    }

    .cart-line-item-price--page .cart-line-item-price__compare,
    .cart-line-item-price--page .cart-line-item-price__current {
      font-size: var(--body-md--size);
      line-height: var(--body-md--line-height);
    }
  }
/* END_SNIPPET:cart-line-item-price */

/* START_SNIPPET:cart-line-item (INDEX:108) */
/*
    Mobile: `Variant=Mini Cart` (335x140). Media 112x140, 16 to the text column,
    8 between every text row, in the order title -> price -> options -> controls.
  */
  .cart-line-item {
    align-content: start;
    column-gap: var(--spacing--xs);
    display: grid;
    grid-template-areas:
      'media title'
      'media price'
      'media options'
      'media controls';
    grid-template-columns: var(--cart-line-media-size, 112px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    row-gap: var(--spacing--3xs);
    width: 100%;
  }

  .cart-line-item__media {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    display: block;
    grid-area: media;
    height: var(--cart-line-media-height, 140px);
    overflow: hidden;
    text-decoration: none;
    width: var(--cart-line-media-size, 112px);
  }

  .cart-line-item__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .cart-line-item__title {
    grid-area: title;
    margin: 0;
  }

  .cart-line-item__title-link {
    color: var(--color-text--primary);
    text-decoration: none;
  }

  .cart-line-item__title-link:hover {
    text-decoration: underline;
  }

  .cart-line-item__title-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /*
    Flex, not block: the price is an inline-flex child, so a block wrapper adds
    ~7px of line-box leading under it and pushes the option row off its 8 gap.
  */
  .cart-line-item__price {
    display: flex;
    grid-area: price;
  }

  .cart-line-item__options {
    align-items: center;
    column-gap: var(--spacing--2xs);
    display: flex;
    flex-wrap: wrap;
    grid-area: options;
    row-gap: var(--spacing--4xs);
  }

  /*
    Chip is 67x20, right-aligned on the option row (Figma 17227:20445 badge at
    x=268 on a 335 column). Two-corner tag shape — top-right and bottom-left
    only — the same component as snippets/product-badge.liquid (Badge
    7045:2935), not a pill and not all four corners.

    Low stock keeps the light neutral fill; surface-secondary (#f6f6f6) is the
    closest token. The free gift chip is brand blue on white, per the design.
  */
  .cart-line-item__badge {
    align-items: center;
    background-color: var(--color-surface--secondary);
    border-end-start-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    color: var(--color-text--primary);
    display: inline-flex;
    /* Client's call: the token is 600, which renders heavier in the browser
       than it reads in Figma, so 400 is what actually matches. */
    font-weight: 400;
    margin-inline-start: auto;
    min-height: 20px;
    padding-inline: var(--spacing--3xs);
  }

  .cart-line-item__badge--gift {
    background-color: var(--color-brand--blue);
    color: var(--color-text--invert);
  }

  .cart-line-item__controls {
    align-items: center;
    align-self: end;
    display: flex;
    grid-area: controls;
    justify-content: space-between;
  }

  /* No stepper to balance against, so the bin sits on the right on its own. */
  .cart-line-item__controls--gift {
    justify-content: flex-end;
  }

  /*
    Quantity selector: 96x32 pill, glyphs 12x12 with their outer edges on the
    12px inset (Figma minus at x=12..24, plus at x=72..84).

    icon-minus/plus.svg are shared 20-unit boxes whose stroke only spans
    4.5..15.5, so an --icon-size of 12 would draw a 6.6px glyph. Render the box
    at 20 (glyph 11, against the drawn 12) and inset the pill by 8, which puts
    the glyph edges at 12.5 and 83.5 — within half a pixel of the design
    without touching an asset every other component shares.
  */
  .cart-line-item__quantity {
    align-items: center;
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--pill);
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: space-between;
    padding-inline: var(--spacing--3xs);
    width: 96px;
  }

  .cart-line-item__quantity-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .cart-line-item__quantity-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .cart-line-item__quantity-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .cart-line-item__quantity-icon {
    --icon-size: 20px;
  }

  .cart-line-item__quantity-value {
    color: var(--color-text--primary);
    text-align: center;
  }

  /* Bin: 32x32 circle on surface-brand, 14x15 glyph (icon-bin.svg viewBox). */
  .cart-line-item__remove {
    align-items: center;
    background-color: var(--color-surface--brand);
    border: none;
    border-radius: 50%;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
  }

  .cart-line-item__remove:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /*
    The design's own bin (Figma Icons/General/Bin, exported 4 Sep 2026): a
    filled glyph on a 15 x 16 viewBox whose ink spans 14 x 15.19 — the size the
    frame draws inside the 32 disc. Rendered at its own box, 15 x 16, so no
    scaling lands its edges between pixels; the outline asset it replaces was
    drawn at a fractional 16 x 17 and blurred. Two class levels because
    `.svg-icon svg` in icon.liquid ties on specificity and is concatenated later.
  */
  .cart-line-item__remove-icon {
    --icon-size: 16px;
  }

  .cart-line-item__remove .cart-line-item__remove-icon svg {
    height: 16px;
    max-width: none;
    width: 15px;
  }

  /*
    In flight: dim the row's own children rather than the row, so the spinner
    drawn on ::after keeps full contrast — opacity on the host would fade the
    pseudo-element with everything else.
  */
  .cart-line-item[aria-busy='true'] {
    pointer-events: none;
    position: relative;
  }

  .cart-line-item[aria-busy='true'] > * {
    opacity: 0.35;
  }

  .cart-line-item[aria-busy='true']::after {
    animation: cart-line-item-spin 600ms linear infinite;
    border: 2px solid var(--color-text--primary);
    border-block-start-color: transparent;
    border-radius: 50%;
    content: '';
    height: 24px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% -50%;
    width: 24px;
  }

  @keyframes cart-line-item-spin {
    to {
      rotate: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-line-item[aria-busy='true']::after {
      animation-duration: 1.8s;
    }
  }

  /*
    A gift line carries no treatment of its own — same media, same rhythm, same
    tile tint as every other row, exactly as the cart drawer renders it. The
    "Free gift" chip and the struck-through price carry the meaning; the tinted
    card and 90x112 media that used to sit here made it read as a different
    kind of thing on mobile only. `--free-gift` stays on the element as a state
    hook, matching `cart-drawer-item--gift`.
  */

  /*
    Desktop: `Variant=Shopping Cart` (870x140). Columns come from the component
    row -- Info fill, Quantity 163, Subtotal 163, bin 32, 8 apart -- and are
    shared with the header row via --cart-line-grid so the labels line up.
  */
  @media screen and (min-width: 768px) {
    .cart-line-item {
      column-gap: var(--spacing--3xs);
      /*
        The media spans every row, so its 140px is shared out across them —
        two auto rows would each grow to ~70 and the title and options would
        drift to the top and bottom of the row instead of sitting together.
        The 1fr rows top and bottom take that slack instead, which centres the
        pair against the tile whatever the title wraps to.
      */
      grid-template-areas:
        'media .        quantity price remove'
        'media title    quantity price remove'
        'media options  quantity price remove'
        'media .        quantity price remove';
      grid-template-columns: var(--cart-line-grid);
      grid-template-rows: 1fr auto auto 1fr;
      row-gap: 0;
    }

    /* First track is 120 and the tile is 112, so start-align it (see the grid). */
    .cart-line-item__media {
      align-self: center;
      justify-self: start;
    }

    .cart-line-item__title,
    .cart-line-item__options {
      align-self: center;
    }

    /*
      Title -> options is 8 (29-21). Carried as a margin rather than row-gap,
      which would also open gaps against the 1fr rows and push the pair off
      the tile's centre by half a gap.
    */
    .cart-line-item__options {
      margin-block-start: var(--spacing--3xs);
    }

    /*
      Desktop puts the chip straight after the description, inside the info
      column — the auto margin that right-aligns it in the narrow mobile and
      drawer columns pushed it to the far edge of its grid track here, which
      read as floating in the middle of the row.
    */
    .cart-line-item__badge {
      margin-inline-start: 0;
    }

    .cart-line-item__price {
      align-self: center;
      grid-area: price;
      justify-self: center;
    }

    .cart-line-item__controls {
      display: contents;
    }

    .cart-line-item__quantity {
      align-self: center;
      grid-area: quantity;
      justify-self: center;
    }

    /*
      The bin keeps its surface-brand disc on desktop — Figma's
      `Icons/General/Bin` instance carries the fill at both sizes, the same
      treatment as the USP icons.
    */
    .cart-line-item__remove {
      align-self: center;
      grid-area: remove;
      justify-self: center;
    }
  }
/* END_SNIPPET:cart-line-item */

/* START_SNIPPET:cart-sticky-checkout (INDEX:109) */
/* 375x130 = 20 padding + 40 note + 8 + 42 button + 20 padding. */
  /*
    Full-bleed: Figma's `Sticky Checkout` is x=0, w=375 with its 20 inset on the
    inside, so the bar reaches both screen edges rather than sitting in the
    page's 20 margin.
  */
  .cart-sticky-checkout {
    background-color: var(--color-surface--primary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    inset-block-end: 0;
    margin-inline: calc(var(--page-margin) * -1);
    padding-block: var(--spacing--sm);
    padding-inline: var(--spacing--sm);
    position: sticky;
    z-index: 2;
  }

  .cart-sticky-checkout__note {
    margin: 0;
  }

  /* Matches the summary CTA — see cart-summary.liquid for why the type is restated. */
  .cart-sticky-checkout__button {
    --button-height: 42px;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    justify-content: space-between;
    letter-spacing: normal;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
    width: 100%;
  }

  .cart-sticky-checkout__price-compare {
    color: var(--color-text--primary);
  }

  /* PO review (CU-869ev1qza): a total under a struck price reads in the sale colour, as the drawer's does. */
  .cart-sticky-checkout__price-total--sale {
    color: var(--color-text--sale);
  }

  [data-fgwp-settling] .cart-sticky-checkout__button {
    opacity: 0.5;
    pointer-events: none;
  }

  .cart-sticky-checkout[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .cart-sticky-checkout__price {
    align-items: baseline;
    display: inline-flex;
    gap: var(--spacing--2xs);
  }

  /*
    The drawer keeps its footer at every width — it is the panel's own base,
    not a viewport-anchored bar, so it neither sticks nor hides.
  */
  .cart-sticky-checkout--drawer {
    margin-inline: 0;
    position: static;
  }

  @media screen and (min-width: 768px) {
    .cart-sticky-checkout:not(.cart-sticky-checkout--drawer) {
      display: none;
    }
  }
/* END_SNIPPET:cart-sticky-checkout */

/* START_SNIPPET:cart-summary (INDEX:110) */
/*
    Mobile: the card is the whole aside (summary + USP strip together), so the
    fill and radius live on `.cart-page__aside` and this block only closes on
    the rule 16 below the totals. Desktop puts them back here, where the USP
    strip sits outside the card instead.
  */
  .cart-summary {
    border-block-end: 1px solid var(--color-border--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    padding-block-end: var(--spacing--xs);
    width: 100%;
  }

  .cart-summary[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  /*
    A gift that is no longer earned is on its way out of the bag; checkout
    waits for that rather than carrying it. Released as soon as the line goes.
  */
  [data-fgwp-settling] .cart-summary__checkout {
    opacity: 0.5;
    pointer-events: none;
  }

  .cart-summary__title {
    color: var(--color-text--primary);
    margin: 0;
  }

  .cart-summary__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
  }

  .cart-summary__delivery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cart-summary__delivery-row {
    align-items: flex-start;
    color: var(--color-text--primary);
    display: flex;
    gap: var(--spacing--2xs);
    justify-content: space-between;
    width: 100%;
  }

  .cart-summary__delivery-term {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  /*
    Figma gives the delivery glyphs a 19px slot (text starts at 27, so an 8 gap)
    while the shared asset is a 32px box with the glyph centred inside it. Pin
    the 32px svg to the centre of the 19x18 slot so the glyph lands at its
    drawn size -- van 19x10.85 -- without the asset's padding taking layout.
  */
  .cart-summary__delivery-icon {
    align-items: center;
    display: inline-flex;
    flex: none;
    height: 18px;
    justify-content: center;
    width: 19px;
  }

  /*
    Centred by flex, not absolute positioning: an absolutely positioned
    shrink-to-fit box next to inset-inline-start: 50% resolves to half the
    19px slot, and the theme's max-width: 100% on svg then clamps the glyph to
    9.5px wide. Sizing the box explicitly and letting it overflow the slot
    keeps the drawn geometry (van 19 x 10.85) exact.
  */
  .cart-summary__delivery-glyph {
    --icon-size: 32px;
    flex: none;
    height: 32px;
    pointer-events: none;
    width: 32px;
  }

  .cart-summary__delivery-glyph svg {
    max-width: none;
  }

  .cart-summary__delivery-note {
    display: block;
  }

  .cart-summary__delivery-value {
    flex: none;
    text-align: end;
  }

  .cart-summary__divider {
    border: 0;
    border-block-start: 1px solid var(--color-border--secondary);
    margin: 0;
    width: 100%;
  }

  .cart-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
  }

  .cart-summary__row {
    color: var(--color-text--primary);
    display: flex;
    gap: var(--spacing--2xs);
    justify-content: space-between;
    width: 100%;
  }

  .cart-summary__row--savings {
    color: var(--color-text--sale);
  }

  .cart-summary__row-value {
    text-align: end;
  }

  .cart-summary__note {
    margin: 0;
  }

  /*
    Every cart CTA measures 42 high with Figma `Button/xs` type — 13/1.4/600,
    no tracking, capitalised. The shared `.btn--primary` is 36 high with
    `font-button-sm` (12/14px, uppercase, +0.05em), so the type is restated
    here rather than moved on the global token. The `.font-button-xs` utility
    cannot do it: it and `.btn--primary` have equal specificity and
    `.btn--primary` is declared later in theme-styles-variables.
  */
  .cart-summary__checkout {
    --button-height: 42px;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: normal;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
    width: 100%;
  }

  .cart-summary__payments {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--2xs);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cart-summary__payment {
    display: inline-flex;
  }

  /*
    Figma draws each icon 25x16. Height is fixed and width left to the svg's own
    aspect so the brand marks are not stretched; they land at 25.3 wide.
  */
  .cart-summary__payment-icon {
    display: block;
    height: 16px;
    width: auto;
  }

  /*
    Mobile takes the CTA, the payment icons and the checkout note from the
    sticky bar instead — Figma hides all three inside the mobile block
    (16817:32934) and carries the note in `Sticky Checkout` only.
  */
  @media screen and (max-width: 767px) {
    .cart-summary__checkout,
    .cart-summary__payments,
    .cart-summary__note {
      display: none;
    }
  }

  /* Desktop `Checkout Block` (455x363): surface-brand card, 20 padding, radius 8. */
  @media screen and (min-width: 768px) {
    .cart-summary {
      background-color: var(--color-surface--brand);
      /* Figma radius/md. The theme's scale stops at radius--sm (4). */
      border-block-end: 0;
      border-radius: 8px;
      padding: var(--spacing--sm);
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-thresholds (INDEX:111) */
/*
    Figma `Thresholds` 503x43 desktop / 343x43 mobile (60 when the message
    wraps): message 11/1.5, 12 to a 2px track, segments equal with 8 between
    them, milestone disc at the end of each.
  */
  .cart-thresholds {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    /* The 24 disc hangs 11 below the 2px track. Figma's 43 block is
       message 17 + 12 + track 2 + 12, so it ends 12 under the track, not on it —
       without this the discs sat inside the gap to the first row. */
    padding-block-end: var(--spacing--2xs);
    width: 100%;
  }

  .cart-thresholds__message {
    color: var(--color-text--primary);
    margin: 0;
  }

  .cart-thresholds__amount {
    font-weight: var(--body-xs--weight-bold);
  }

  .cart-thresholds__track {
    display: flex;
    gap: var(--spacing--3xs);
    width: 100%;
  }

  /*
    Equal flex segments rather than fixed widths, so the bar always uses its
    full available width and the last milestone lands on the right end
    whatever the merchant configures (1, 2 or 3).
  */
  .cart-thresholds__segment {
    background-color: var(--color-border--secondary);
    border-radius: var(--radius--pill);
    flex: 1 1 0;
    height: 2px;
    min-width: 0;
    position: relative;
  }

  .cart-thresholds__fill {
    background-color: var(--color-text--primary);
    border-radius: var(--radius--pill);
    display: block;
    height: 100%;
    transition: width 0.4s ease;
    width: var(--cart-threshold-fill, 0%);
  }

  /*
    The disc overhangs its segment's right end by 3 (Figma: a 24 disc whose
    right edge sits at 149+3 on a 149 segment, and at 463+3 on the last).
  */
  .cart-thresholds__milestone {
    align-items: center;
    background-color: var(--color-border--secondary);
    border-radius: 50%;
    color: var(--color-text--primary);
    display: inline-flex;
    height: 24px;
    inset-block-start: 50%;
    inset-inline-end: -3px;
    justify-content: center;
    position: absolute;
    transition: background-color 0.4s ease;
    translate: 0 -50%;
    width: 24px;
  }

  .cart-thresholds__milestone--reached {
    background-color: var(--color-button--primary);
  }

  /*
    The glyphs keep their own 24 viewBox at both disc sizes: Figma draws the
    gift at 12 square in the 24 disc and again at 12 in the 20 disc, so the
    artwork does not scale with the disc. That leaves the mobile van at 16
    wide against the 14.67 drawn — one scale cannot satisfy both glyphs, and
    the gift is the one used twice.
  */
  .cart-thresholds__glyph {
    --icon-size: 24px;
    pointer-events: none;
  }

  @media screen and (max-width: 767px) {
    .cart-thresholds__milestone {
      height: 20px;
      inset-inline-end: -2px;
      width: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-thresholds__fill,
    .cart-thresholds__milestone {
      transition: none;
    }
  }
/* END_SNIPPET:cart-thresholds */

/* START_SNIPPET:cart-upsell-carousel (INDEX:113) */
/*
    Carousel block: full width of the cart column, 24 content inset, 20 top and
    24 bottom padding. No fill — the block sits on the page, separated by the
    rule that .cart-page__upsell carries on mobile.
  */
  .cart-upsell-carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-block: var(--spacing--sm) var(--spacing--md);
    padding-inline: var(--spacing--md);
    width: 100%;
  }

  .cart-upsell-carousel__header {
    align-items: center;
    display: flex;
    gap: var(--spacing--xs);
    justify-content: space-between;
    min-height: 30px;
  }

  .cart-upsell-carousel__heading {
    color: var(--color-text--primary);
    margin: 0;
  }

  .cart-upsell-carousel__nav {
    display: inline-flex;
    flex-shrink: 0;
  }

  .cart-upsell-carousel__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .cart-upsell-carousel__nav-button:disabled {
    cursor: default;
    opacity: 0.3;
  }

  .cart-upsell-carousel__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /*
    The arrows are 20 x 30, not square. `--icon-size` writes one value to both
    axes, so a 20 box made `preserveAspectRatio: meet` scale the 20 x 30
    viewBox by 20/30 and draw the glyph at 8.1 x 7.1 against the design's
    12.13 x 10.69. Sized at its own box it lands exactly, and
    icon-arrow-right-nav.svg is the 20 x 30 mirror of arrow-left —
    icon-arrow-right.svg is a 24 square and does not pair with it.
  */
  .cart-upsell-carousel__nav-icon {
    --icon-size: 20px;
  }

  .cart-upsell-carousel__nav-button .cart-upsell-carousel__nav-icon svg {
    height: 30px;
    max-width: none;
    width: 20px;
  }

  /*
    The container's 24 inset keeps the heading and arrows aligned with the rest
    of the cart, but applying it to the track too closed the viewport at exactly
    the point the next card would start, so nothing peeked. Bleed the track past
    the right edge instead and give it back as scroll padding, so the last card
    still clears the edge when you reach the end. Asymmetric on purpose.
  */
  .cart-upsell-carousel__track {
    display: flex;
    gap: var(--spacing--sm);
    list-style: none;
    margin-block: 0;
    margin-inline: 0 calc(var(--spacing--md) * -1);
    overflow-x: auto;
    padding-block: 0;
    padding-inline: 0 var(--spacing--md);
    scroll-behavior: smooth;
    scroll-padding-inline-end: var(--spacing--md);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cart-upsell-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .cart-upsell-carousel__track:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /*
    320 flat, not a vw fraction: the track is 327 at the 375 frame (375 - 2x24
    inset), so 85vw was capping the card at 318.75 and losing 1.25 of the
    drawn width. Narrower screens scroll the track instead.
  */
  .cart-upsell-carousel__slide {
    flex: none;
    max-width: 100%;
    scroll-snap-align: start;
    width: 320px;
  }

  /* Card: 320x112 -- media 90x112, 16 gap, content column. */
  .cart-upsell-card {
    display: flex;
    gap: var(--spacing--xs);
    height: 112px;
  }

  .cart-upsell-card__media {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    display: block;
    flex: none;
    height: 112px;
    overflow: hidden;
    width: 90px;
  }

  .cart-upsell-card__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .cart-upsell-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--3xs);
    min-width: 0;
  }

  .cart-upsell-card__title {
    color: var(--color-text--primary);
    display: -webkit-box;
    overflow: hidden;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cart-upsell-card__title:hover {
    text-decoration: underline;
  }

  .cart-upsell-card__title:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .cart-upsell-card__price {
    align-items: baseline;
    color: var(--color-text--primary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

  .cart-upsell-card__actions {
    align-items: center;
    display: flex;
    gap: var(--spacing--xs);
    margin-block-start: auto;
    min-width: 0;
  }

  .cart-upsell-card__sizes {
    display: flex;
    flex: 0 1 auto;
    gap: var(--spacing--3xs);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cart-upsell-card__sizes::-webkit-scrollbar {
    display: none;
  }

  /*
    Three sizes in the design's 210px content column land at 44.333 each
    ((210 - 45 ADD - 16 gap - 2x8) / 3). Held as a static width rather than
    shared out by flex: with two chips instead of three, growing them made the
    row look nothing like the design.
  */
  .cart-upsell-card__size {
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    cursor: pointer;
    flex: none;
    min-height: 34px;
    text-align: center;
    width: 44.33px;
  }

  /*
    Scheme role, not the literal. Figma marks the selected chip with
    `Brand / Black` (#111111); border--primary is the theme's role for it and
    reads #2f2e2e, so the outline follows the colour scheme instead of punching
    through it.
  */
  .cart-upsell-card__size[aria-pressed='true'] {
    border-color: var(--color-border--primary);
  }

  .cart-upsell-card__size:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .cart-upsell-card__size:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .cart-upsell-card__add {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    gap: var(--spacing--4xs);
    padding: 0;
  }

  .cart-upsell-card__add:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .cart-upsell-card__add:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .cart-upsell-card__add-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    transition: background-color 0.2s ease;
    width: 16px;
  }

  /* `State=Selected` primes the ADD control with the brand yellow disc. */
  .cart-upsell-card__add--ready .cart-upsell-card__add-icon {
    background-color: var(--color-button--primary);
  }

  .cart-upsell-card__add-glyph {
    --icon-size: 12px;
  }

  .cart-upsell-card[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  /*
    Skeleton: the placeholder blocks pulse in surface-secondary until the
    fragment replaces them. Same boxes as the cards (heading 21 tall in a 30
    row, rows 18, chips 34) so the swap does not shift anything.
  */
  .cart-upsell-carousel--skeleton .cart-upsell-carousel__track {
    overflow: hidden;
  }

  .cart-upsell-carousel__skeleton-block,
  .cart-upsell-carousel__skeleton-bar {
    animation: cart-upsell-pulse 1.4s ease-in-out infinite;
    background-color: var(--color-surface--secondary);
    border-radius: var(--radius--sm);
    display: block;
  }

  .cart-upsell-carousel__skeleton-bar {
    height: 18px;
  }

  .cart-upsell-carousel__skeleton-bar--heading {
    height: 21px;
    width: 135px;
  }

  .cart-upsell-carousel__skeleton-bar--title {
    width: 80%;
  }

  .cart-upsell-carousel__skeleton-bar--price {
    width: 40%;
  }

  .cart-upsell-carousel__skeleton-bar--chips {
    height: 34px;
    margin-block-start: auto;
    width: 60%;
  }

  @keyframes cart-upsell-pulse {
    50% {
      opacity: 0.45;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell-carousel__track {
      scroll-behavior: auto;
    }

    .cart-upsell-card__add-icon {
      transition: none;
    }

    .cart-upsell-carousel__skeleton-block,
    .cart-upsell-carousel__skeleton-bar {
      animation: none;
    }
  }
/* END_SNIPPET:cart-upsell-carousel */

/* START_SNIPPET:collection-filter-tags (INDEX:116) */
.collection-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .collection-filter-tags:empty {
    display: none;
  }

  .collection-filter-tags__link {
    align-items: center;
    border-radius: 40px;
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--4xs);
    padding: var(--spacing--4xs) var(--spacing--3xs);
    text-decoration: none;
    white-space: nowrap;
  }

  .collection-filter-tags__link:hover {
    text-decoration: underline;
  }

  .collection-filter-tags__link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .collection-filter-tags__icon {
    --icon-size: 10px;
  }
/* END_SNIPPET:collection-filter-tags */

/* START_SNIPPET:collection-filters (INDEX:117) */
/* The host is what sticks, not the bar inside it. A sticky element is
     confined to its parent's box, and this element's own box is only as tall as
     the bar — the dialog is fixed and out of flow — so sticking the bar would
     pin it to nothing. Sticking the host instead confines it to the section,
     which is the grid's full height. */
  .collection-filters {
    background-color: var(--color-surface--primary);
    display: block;
    position: sticky;
    /* Set by collection-filters.js from the sticky header's measured height. */
    top: var(--sticky-header-offset, 0px);
    /* Below the header's own 20. */
    z-index: 10;

    /* The row's spacing is a merchant setting on the _collection-filter-bar
       block, which passes it down as custom properties. It is painted here
       rather than on the block's own wrapper because that wrapper cannot
       generate a box without trapping the sticky positioning above. Zero when
       the snippet is rendered without the block. */
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  @media screen and (min-width: 768px) {
    .collection-filters {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }

  /* Pending state. Every count on screen, and the grid itself, is stale from
     the moment an option is ticked until the response lands — a second or so on
     a large collection. Dimming exactly those things is what makes the wait
     read as work in progress rather than a dropped click. The controls stay
     live throughout: the shopper is free to keep choosing. */
  .collection-filters[aria-busy='true'] {
    cursor: progress;
  }

  .collection-filters[aria-busy='true'] .collection-filters__count,
  .collection-filters[aria-busy='true'] .collection-filters__option-count {
    opacity: 0.4;
  }

  /* Except the row just chosen. Its label turns bold on the click, and a count
     greying out beside it reads as the choice not having registered — which is
     the one thing the dim must not say about the row the shopper is watching.
     The others dim as before: their numbers really are being recalculated. */
  .collection-filters[aria-busy='true']
    .collection-filters__input:checked
    ~ .collection-filters__option-label
    .collection-filters__option-count {
    opacity: 1;
  }

  [data-filter-results][aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .collection-filters__count,
    .collection-filters__option-count,
    [data-filter-results] {
      transition: opacity 0.2s ease;
    }
  }

  /* Block padding belongs to the _collection-filter-bar block that wraps this,
     so a merchant can change it. The gap between the two rows stays here — it
     is internal to the bar, not the space it sits in. */
  .collection-filters__bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
  }

  .collection-filters__bar-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--md);
  }

  /* Button/xs in Figma — 13px/1.4/600, no tracking, capitalised. `.btn--primary`
     defaults to the sm tokens, so those four are restated here, the same way
     .collection-page__load-more does it. Scoped through the host so it outweighs
     `.btn--primary`, which sets these at equal specificity from another
     stylesheet block whose order is not guaranteed. No filter icon here either
     — that belongs to the drawer header. */
  .collection-filters .collection-filters__toggle {
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
  }

  .collection-filters__count {
    color: var(--color-text--secondary);
    margin: 0;
  }

  /* Pushed to the end of the row rather than the row being split into two
     groups — the button and the count keep the layout they already had. */
  .collection-filters__views {
    align-items: center;
    display: flex;
    gap: var(--spacing--md);
    margin-inline-start: auto;
  }

  /* Button/xs, same four tokens as the Filter & Sort button. The underline is a
     transparent border rather than a border added on the active one, so the
     labels do not shift by a pixel as the choice changes. */
  /* font-family is restated because a button does not inherit it — the UA sheet
     sets its own, which left these two labels in Arial while everything around
     them was Poppins. The underline's 4px of padding and 1px of border hang
     below the text with nothing above, and the row centres border boxes, so the
     labels rode 2.6px high; matching space on top puts them back on the count's
     centre line. */
  .collection-filters__view {
    background: none;
    border: none;
    border-block-end: 1px solid transparent;
    color: var(--color-text--primary);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--button-xs--size);
    font-weight: var(--button-xs--weight);
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    padding: calc(var(--spacing--4xs) + 1px) 0 var(--spacing--4xs);
    text-transform: capitalize;
  }

  .collection-filters__view:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* The underline follows aria-pressed, which the server sets from the template
     the listing rendered through — one source for the state, so the marked
     label always names the grid on screen. */
  .collection-filters__view[aria-pressed='true'] {
    border-block-end-color: var(--color-button--primary);
  }

  /* The tags stack by default. This row holds two children — the label and the
     tag list — and it is the list's own wrapping that produces the stack, which
     only happens while the list stays shrinkable. */
  .collection-filters__applied {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
  }

  .collection-filters__applied-label {
    color: var(--color-text--secondary);
    opacity: 0.8;
    padding-block: var(--spacing--4xs);
    padding-inline-end: var(--spacing--3xs);
  }

  /* Below 768px the bar is the button and the view toggle only — the design
     hides the count and drops the applied-filters row there. The drawer footer
     keeps its own copy of that row, hence the bar scope on the selector. */
  @media screen and (max-width: 767px) {
    .collection-filters__count,
    .collection-filters__bar .collection-filters__applied {
      display: none;
    }

    /* One scrolling row instead. The drawer is full width on a phone, so a
       wrapped row of tags would push Apply and Clear off the bottom of the
       panel; the design runs the tags off the right edge and lets them be
       dragged back. The scrollbar is hidden because this reads as a carousel,
       not a scroll pane. */
    .collection-filters__applied {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }

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

    /* Both children hold their intrinsic width, so the list overflows the row
       rather than compressing into it and wrapping. */
    .collection-filters__applied > * {
      flex-shrink: 0;
    }
  }

  .collection-filters__header-icon {
    --icon-size: 24px;
  }

  /* Drawer */
  html.filters-drawer-open {
    overflow: hidden;
  }

  .collection-filters__dialog {
    background: transparent;
    border: none;
    height: 100%;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 0;
    position: fixed;
    width: 100%;
  }

  .collection-filters__dialog::backdrop {
    background-color: rgb(0 0 0 / 60%);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .collection-filters__dialog--active::backdrop {
    opacity: 1;
  }

  /* Figma draws the drawer at 360 on a 375 phone and 500 on desktop, so the
     phone keeps a strip of backdrop to tap and to read as a panel rather than a
     page. min() still hands the whole width to anything narrower than 360. */
  .collection-filters__panel {
    --filters-panel-width: 360px;

    background-color: var(--color-surface--primary);
    border-end-end-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-inline-end: auto;
    max-width: min(100%, var(--filters-panel-width));
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: min(100%, var(--filters-panel-width));
  }

  .collection-filters__dialog--active .collection-filters__panel {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-filters__dialog::backdrop,
    .collection-filters__panel {
      transition: none;
    }
  }

  .collection-filters__header {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing--3xs);
    padding-block: var(--spacing--xs);
    padding-inline: var(--spacing--xs);
  }

  .collection-filters__title {
    color: var(--color-text--primary);
    flex: 1 1 auto;
    margin: 0;
  }

  .collection-filters__close {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    padding: var(--spacing--4xs);
  }

  .collection-filters__close:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .collection-filters__close-icon {
    --icon-size: 16px;
  }

  /* Mobile runs the group rules edge to edge and insets only their contents;
     desktop insets the rules themselves by 32px. Hence the padding lives on the
     rows below 768px and on the form above it. */
  .collection-filters__form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-block-end: var(--spacing--xs);
  }

  /* Filter group */
  .collection-filters__group {
    border-block-end: 1px solid var(--color-border--secondary);
  }

  .collection-filters__group-heading {
    align-items: center;
    color: var(--color-text--primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding-block: var(--spacing--xs);
    padding-inline: var(--spacing--xs);
  }

  /* Safari still paints the default disclosure triangle without this. */
  .collection-filters__group-heading::-webkit-details-marker {
    display: none;
  }

  .collection-filters__group-heading:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .collection-filters__group-icon {
    display: block;
    flex-shrink: 0;
    height: 20px;
    position: relative;
    width: 20px;
  }

  .collection-filters__group-icon::before,
  .collection-filters__group-icon::after {
    background-color: currentcolor;
    content: '';
    height: 1.65px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% -50%;
    width: 11px;
  }

  .collection-filters__group-icon::after {
    rotate: 90deg;
  }

  .collection-filters__group[open] .collection-filters__group-icon::after {
    rotate: 0deg;
  }

  /* Height is driven inline by collection-filters.js, which measures the panel
     and animates to it. These rules are what a shopper without JS gets: the
     panel is simply there when the group is open. */
  /* Clipped on the block axis only: the height animation needs that, but the
     tick parks itself outside the inline edge while hidden and would be sliced
     mid-slide if the inline axis clipped too. */
  .collection-filters__options {
    display: flex;
    flex-direction: column;
    height: 0;
    overflow-x: visible;
    overflow-y: clip;
    padding-block-end: var(--spacing--2xs);
    padding-inline: var(--spacing--xs);
  }

  .collection-filters__group[open] .collection-filters__options {
    height: auto;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .collection-filters__group-icon::after {
      transition: rotate 0.3s ease;
    }

    .collection-filters__options {
      transition: height 0.3s ease;
    }
  }

  /* Option row */
  .collection-filters__option {
    align-items: center;
    color: var(--color-text--primary);
    cursor: pointer;
    display: flex;
    gap: var(--spacing--4xs);
    padding-block: var(--spacing--4xs) var(--spacing--3xs);
  }

  .collection-filters__option--disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .collection-filters__input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
  }

  /* Figma's Default row carries no tick at all, so the label starts flush left
     and moves right as the tick arrives. A negative start margin of the icon
     plus the row gap (12 + 4) folds the tick back out of the row; animating that
     margin to zero slides the label across with it. The 2px end margin is the
     optical nudge — flex centres boxes, and Poppins' line box sits ~1px below
     the label's ink centre, so the tick reads low without it. */
  .collection-filters__tick {
    --icon-size: 12px;

    color: var(--color-text--primary);
    margin-block-end: 2px;
    margin-inline-start: calc((var(--icon-size) + var(--spacing--4xs)) * -1);
    opacity: 0;
  }

  .collection-filters__input:checked ~ .collection-filters__tick {
    margin-inline-start: 0;
    opacity: 1;
  }

  .collection-filters__input:focus-visible ~ .collection-filters__tick {
    margin-inline-start: 0;
    opacity: 1;
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .collection-filters__tick {
      transition:
        margin-inline-start 0.2s ease,
        opacity 0.2s ease;
    }
  }

  .collection-filters__input:checked ~ .collection-filters__option-label {
    font-weight: var(--body-md--weight-bold);
  }

  /* 22px is what the Filter row's Value group gives the swatch in Figma. */
  .collection-filters__swatch {
    background-color: var(--swatch-color, var(--color-surface--secondary));
    background-position: center;
    background-size: cover;
    border: 1px solid var(--color-border--secondary);
    border-radius: 50%;
    flex-shrink: 0;
    height: 22px;
    width: 22px;
  }

  /* Price slider */
  .collection-filters__price {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    padding-block: var(--spacing--4xs) var(--spacing--sm);
  }

  .collection-filters__price-values {
    color: var(--color-text--primary);
    display: flex;
    justify-content: space-between;
  }

  /* Taller than the 3px bar so the thumbs, which overhang it, still get a hit
     area worth dragging. */
  .collection-filters__price-track {
    --price-thumb-size: 12px;

    height: 16px;
    position: relative;
  }

  .collection-filters__price-rail,
  .collection-filters__price-fill {
    background-color: var(--color-text--primary);
    border-radius: var(--radius--sm);
    height: 3px;
    inset-block-start: 50%;
    position: absolute;
    translate: 0 -50%;
  }

  .collection-filters__price-rail {
    inset-inline: 0;
    opacity: 0.3;
  }

  /* Both ends are 0–1 ratios, driven by collection-filters.js as the thumbs
     move and rendered from the applied range on first paint. A thumb's centre
     travels only `track - thumb`, starting half a thumb in, so the fill is
     mapped onto that same span rather than the full width — otherwise it runs
     past the handles it is supposed to join. */
  .collection-filters__price-fill {
    inset-inline-end: calc(
      (1 - var(--price-end, 1)) * (100% - var(--price-thumb-size)) +
        var(--price-thumb-size) / 2
    );
    inset-inline-start: calc(
      var(--price-start, 0) * (100% - var(--price-thumb-size)) +
        var(--price-thumb-size) / 2
    );
  }

  /* Two inputs on one track, so the upper one would swallow every press meant
     for the lower. Only the thumbs take pointer events; the track itself is
     inert, which also means a press on the bar does not jump either handle. */
  .collection-filters__price-thumb {
    appearance: none;
    background: transparent;
    height: 16px;
    inset-block-start: 50%;
    inset-inline: 0;
    margin: 0;
    pointer-events: none;
    position: absolute;
    translate: 0 -50%;
    width: 100%;
  }

  .collection-filters__price-thumb::-webkit-slider-runnable-track,
  .collection-filters__price-thumb::-moz-range-track {
    background: transparent;
    border: 0;
  }

  .collection-filters__price-thumb::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-button--secondary);
    border: 0;
    border-radius: 50%;
    height: 12px;
    pointer-events: auto;
    width: 12px;
  }

  .collection-filters__price-thumb::-moz-range-thumb {
    background-color: var(--color-button--secondary);
    border: 0;
    border-radius: 50%;
    height: 12px;
    pointer-events: auto;
    width: 12px;
  }

  /* The input's own ring would trace the full width of the track rather than
     the handle the keyboard is actually moving. */
  .collection-filters__price-thumb:focus {
    outline: none;
  }

  .collection-filters__price-thumb:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .collection-filters__price-thumb:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* Footer */

  /* Figma lifts the footer off the list with a shadow rather than ruling a line
     under it. The offset is smaller than the blur, so 4px of it bleeds back
     over the list above — which is the whole of what shows, the rest falling
     past the panel's bottom edge. Positioned so that bleed paints over the
     list's text instead of under it: shadows of in-flow siblings go down with
     the backgrounds, before any inline content. Padding is the footer's own
     12px on both axes, tighter than the groups, so the buttons sit wider than
     the rows they close off — the design has them nearly edge to edge. */
  .collection-filters__footer {
    background-color: var(--color-surface--primary);
    box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--spacing--2xs);
    padding: var(--spacing--2xs);
    position: relative;
    z-index: 1;
  }

  /* The rule the footer does carry is this one, between the applied tags and
     the buttons, and only when there are tags to divide from. Its own block
     start padding rather than the flex gap alone, so the line sits midway
     between the two rows instead of tight against the buttons. */
  .collection-filters__applied + .collection-filters__ctas {
    border-block-start: 1px solid var(--color-border--secondary);
    padding-block-start: var(--spacing--2xs);
  }

  /* The design only shows the footer once something is selected — there is
     nothing to apply or clear before that. The element itself always renders so
     the JS has something to swap into; `:has` is what hides it while empty. */
  .collection-filters__footer:not(:has(.collection-filters__ctas)) {
    display: none;
  }

  .collection-filters__ctas {
    display: flex;
    gap: var(--spacing--3xs);
  }

  /* Scoped through the host for the same reason as the toggle: `.btn--secondary`
     sets height and text-transform at equal specificity. */
  .collection-filters .collection-filters__cta {
    flex: 1 1 0;
    height: var(--button-height);
    text-transform: none;
  }

  /* Hover previews the choice at the 60% Figma gives the Hover state, against
     the full-strength tick a checked row keeps. */
  @media (hover: hover) {
    .collection-filters__option:hover .collection-filters__tick {
      margin-inline-start: 0;
      opacity: 1;
    }

    .collection-filters__option:hover
      .collection-filters__input:not(:checked)
      ~ .collection-filters__tick {
      opacity: 0.6;
    }
  }

  @media screen and (min-width: 768px) {
    .collection-filters__panel {
      --filters-panel-width: 500px;
    }

    .collection-filters__header,
    .collection-filters__form {
      padding-inline: var(--spacing--lg);
    }

    /* Rules move in with the form padding, so the rows give theirs back. */
    .collection-filters__group-heading,
    .collection-filters__options {
      padding-inline: 0;
    }
  }
/* END_SNIPPET:collection-filters */

/* START_SNIPPET:colour-products-group (INDEX:119) */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .shop-by-colour__swatch {
    align-items: stretch;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--shop-by-colour-swatch-size, 32px);
    overflow: hidden;
    padding: 0;
    position: relative;
    transition:
      height 0.25s ease,
      width 0.25s ease;
    width: var(--shop-by-colour-swatch-size, 32px);
  }

  .shop-by-colour__swatch[aria-pressed='true'] {
    height: var(--shop-by-colour-swatch-size-active, 56px);
    width: var(--shop-by-colour-swatch-size-active, 56px);
  }

  .shop-by-colour__swatch:focus-visible {
    outline: 2px solid var(--color-text--primary);
    outline-offset: 2px;
  }

  .shop-by-colour__swatch-fill,
  .shop-by-colour__swatch-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .shop-by-colour__swatch-fill--empty {
    background-color: var(--color-surface--secondary);
  }

  .shop-by-colour__swatch-fill--brand {
    background-color: var(--color-brand--charcoal);
  }

  .shop-by-colour-panel {
    height: 100%;
    opacity: 1;
    transition: opacity 0.25s ease;
    width: 100%;
  }

  .shop-by-colour-panel[hidden] {
    display: none;
  }

  /* When Liquid couldn't mark an active group, reveal the first without JS. */
  .shop-by-colour:not(.shop-by-colour--enhanced)
    .shop-by-colour__panels:not(:has([data-shop-by-colour-panel]:not([hidden])))
    > .shopify-block:first-child
    [data-shop-by-colour-panel][hidden] {
    display: block;
  }

  .shop-by-colour:not(.shop-by-colour--enhanced)
    .shop-by-colour__panels:not(:has([data-shop-by-colour-cta]:not([hidden])))
    > .shopify-block:first-child
    [data-shop-by-colour-cta][hidden] {
    display: inline-flex;
  }

  .shop-by-colour:not(.shop-by-colour--enhanced)
    .shop-by-colour__panels:not(
      :has([data-shop-by-colour-swatch][aria-pressed='true'])
    )
    > .shopify-block:first-child
    [data-shop-by-colour-swatch] {
    height: var(--shop-by-colour-swatch-size-active, 56px);
    width: var(--shop-by-colour-swatch-size-active, 56px);
  }

  @media screen and (max-width: 767px) {
    .shop-by-colour__swatch {
      height: 32px;
      width: 32px;
    }

    .shop-by-colour__swatch[aria-pressed='true'],
    .shop-by-colour:not(.shop-by-colour--enhanced)
      .shop-by-colour__panels:not(
        :has([data-shop-by-colour-swatch][aria-pressed='true'])
      )
      > .shopify-block:first-child
      [data-shop-by-colour-swatch] {
      height: 56px;
      width: 56px;
    }
  }

  .shop-by-colour-panel.is-fading-out,
  .shop-by-colour-panel.is-fading-in {
    display: block;
  }

  .shop-by-colour-panel.is-fading-out {
    opacity: 0;
  }

  .shop-by-colour-panel.is-fading-in {
    opacity: 0;
  }

  .shop-by-colour-panel.is-fading-in.is-visible {
    opacity: 1;
  }

  /* Columns and rows per product count, used once the section is side by side.
     The panel is a fixed height there, so the rows divide it and every count
     comes out the same height. Stacked, the grid is always two columns. */
  .shop-by-colour-panel--count-2 {
    --shop-by-colour-columns: 2;
    --shop-by-colour-rows: 1;
  }

  .shop-by-colour-panel--count-4 {
    --shop-by-colour-columns: 2;
    --shop-by-colour-rows: 2;
  }

  .shop-by-colour-panel--count-6 {
    --shop-by-colour-columns: 3;
    --shop-by-colour-rows: 2;
  }

  .shop-by-colour-panel--count-8 {
    --shop-by-colour-columns: 4;
    --shop-by-colour-rows: 2;
  }

  .shop-by-colour-panel__grid {
    display: grid;
    gap: var(--shop-by-colour-grid-row-gap, 8px)
      var(--shop-by-colour-grid-gap, 8px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 100%;
    width: 100%;
  }

  /* The card fills whatever shape its cell is; the image is contained inside
     it. Absolute so the image's own height never feeds back into the grid,
     which means the ratio below is the only thing sizing a stacked row. */
  .shop-by-colour-product {
    aspect-ratio: 193 / 222;
    background-color: var(--shop-by-colour-product-bg, transparent);
    border-radius: var(--radius--sm);
    display: block;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  .shop-by-colour-product__image {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: contain;
    object-position: center;
    position: absolute;
    width: 100%;
  }

  .shop-by-colour-product__placeholder {
    background-color: var(--color-surface--secondary);
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .shop-by-colour__swatch {
      height: var(--shop-by-colour-swatch-size, 36px);
      width: var(--shop-by-colour-swatch-size, 36px);
    }

    .shop-by-colour__swatch[aria-pressed='true'] {
      height: var(--shop-by-colour-swatch-size-active, 64px);
      width: var(--shop-by-colour-swatch-size-active, 64px);
    }

    .shop-by-colour:not(.shop-by-colour--enhanced)
      .shop-by-colour__panels:not(
        :has([data-shop-by-colour-swatch][aria-pressed='true'])
      )
      > .shopify-block:first-child
      [data-shop-by-colour-swatch] {
      height: var(--shop-by-colour-swatch-size-active, 64px);
      width: var(--shop-by-colour-swatch-size-active, 64px);
    }

    /* Side by side the panel has a fixed height, so the count picks the grid
       shape and the cards fill their cell instead of holding a ratio. Which
       breakpoint applies is the content block's width setting. */
    .shop-by-colour:has(.colour-content--width-narrow)
      .shop-by-colour-panel__grid {
      grid-template-columns: repeat(
        var(--shop-by-colour-columns, 2),
        minmax(0, 1fr)
      );
      grid-template-rows: repeat(var(--shop-by-colour-rows, 2), minmax(0, 1fr));
    }

    .shop-by-colour:has(.colour-content--width-narrow) .shop-by-colour-product {
      aspect-ratio: auto;
    }
  }

  @media screen and (min-width: 1000px) {
    .shop-by-colour:has(.colour-content--width-medium)
      .shop-by-colour-panel__grid {
      grid-template-columns: repeat(
        var(--shop-by-colour-columns, 2),
        minmax(0, 1fr)
      );
      grid-template-rows: repeat(var(--shop-by-colour-rows, 2), minmax(0, 1fr));
    }

    .shop-by-colour:has(.colour-content--width-medium) .shop-by-colour-product {
      aspect-ratio: auto;
    }
  }

  @media screen and (min-width: 1100px) {
    .shop-by-colour:has(.colour-content--width-wide)
      .shop-by-colour-panel__grid {
      grid-template-columns: repeat(
        var(--shop-by-colour-columns, 2),
        minmax(0, 1fr)
      );
      grid-template-rows: repeat(var(--shop-by-colour-rows, 2), minmax(0, 1fr));
    }

    .shop-by-colour:has(.colour-content--width-wide) .shop-by-colour-product {
      aspect-ratio: auto;
    }
  }
/* END_SNIPPET:colour-products-group */

/* START_SNIPPET:content-block (INDEX:120) */
.content-block {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    height: 100%;
    overflow: clip;
    text-decoration: none;
    width: 100%;
  }

  .content-block__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius--sm);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .content-block__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .content-block__image--placeholder {
    background-color: var(--color-surface--secondary);
  }

  .content-block__title {
    margin: 0;
  }

  .content-block__text {
    margin: 0;
  }

  .content-block--empty {
    opacity: 0.5;
  }
/* END_SNIPPET:content-block */

/* START_SNIPPET:country-flag (INDEX:121) */
.country-flag {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
  }

  .country-flag__image {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: var(--country-flag-width, 22px);
  }
/* END_SNIPPET:country-flag */

/* START_SNIPPET:footer-accreditation (INDEX:129) */
.footer-accreditation {
    --footer-accreditation-height: 125px;
    max-width: 100%;
    min-width: 0;
  }

  .footer-accreditation__link {
    display: inline-flex;
    max-width: 100%;
  }

  .footer-accreditation__image {
    display: block;
    height: var(--footer-accreditation-height);
    max-width: 100%;
    object-fit: contain;
    width: auto;
  }
/* END_SNIPPET:footer-accreditation */

/* START_SNIPPET:footer-artwork (INDEX:130) */
.footer-artwork {
    line-height: 0;
    overflow: hidden;
    width: 100%;
  }

  .footer-artwork__html {
    width: 100%;
  }

  .footer-artwork__html svg {
    display: block;
    height: auto;
    width: 100%;
  }

  .footer-artwork__image {
    width: 100%;
  }

  .footer-artwork__asset {
    display: block;
    height: auto;
    width: 100%;
  }

  .footer-artwork__image--desktop {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .footer-artwork__image--desktop {
      display: block;
    }

    .footer-artwork__image--mobile {
      display: none;
    }
  }
/* END_SNIPPET:footer-artwork */

/* START_SNIPPET:footer-legal (INDEX:131) */
.footer-legal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .footer-legal__copyright,
  .footer-legal__policy-link {
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
  }

  .footer-legal__copyright {
    margin: 0;
  }

  .footer-legal__policies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs);
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .footer-legal__policy-link:hover {
    text-decoration: underline;
  }

  @media screen and (min-width: 768px) {
    .footer-legal {
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--spacing--xs);
    }

    .footer-legal__copyright {
      order: -1;
      white-space: nowrap;
    }

    .footer-legal__policies {
      flex-wrap: nowrap;
      gap: var(--spacing--xs);
      justify-content: flex-start;
      width: auto;
    }
  }
/* END_SNIPPET:footer-legal */

/* START_SNIPPET:footer-localization (INDEX:132) */
.footer-localization__form {
    margin: 0;
  }

  .footer-localization__controls {
    align-items: center;
    color: inherit;
    display: flex;
    gap: var(--spacing--3xs);
  }

  .footer-localization__controls--static {
    cursor: default;
  }

  .footer-localization__select-wrap {
    align-items: center;
    display: flex;
    gap: var(--spacing--3xs);
    min-width: 0;
    position: relative;
  }

  .footer-localization__select-wrap--language {
    gap: 0;
  }

  .footer-localization__country {
    align-items: center;
    display: flex;
    gap: var(--spacing--3xs);
  }

  .footer-localization__flag {
    --country-flag-width: 22px;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
  }

  .footer-localization__divider {
    background-color: currentColor;
    display: inline-block;
    flex-shrink: 0;
    height: 12px;
    opacity: 0.6;
    width: 1px;
  }

  .footer-localization__chevron {
    --icon-size: 16px;
    display: inline-flex;
    flex-shrink: 0;
    pointer-events: none;
  }

  .footer-localization__select {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    margin: 0;
    min-width: 0;
    padding: 0;
    padding-inline-end: var(--spacing--3xs);
  }

  .footer-localization__select-wrap--language .footer-localization__select {
    max-width: 6ch;
  }
/* END_SNIPPET:footer-localization */

/* START_SNIPPET:footer-logo (INDEX:133) */
.footer-logo {
    color: inherit;
    display: block;
    margin-inline: auto;
    text-decoration: none;
    width: fit-content;
  }

  .footer-logo__image,
  .footer-logo__brand .brand-logo__image {
    display: block;
    height: auto;
    max-width: 119px;
    width: 119px;
  }

  .footer-logo__brand .brand-logo__text {
    max-width: 119px;
  }

  @media screen and (min-width: 768px) {
    .footer-logo {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:footer-logo */

/* START_SNIPPET:footer-menu-column (INDEX:134) */
.footer-menu {
    border-block-end: 1px solid currentColor;
    margin-inline: var(--spacing--sm);
    width: auto;
  }

  .footer-menu:last-child {
    border-block-end: none;
  }

  .footer-menu__desktop {
    display: none;
  }

  .footer-menu__mobile {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    width: 100%;
  }

  .footer-menu__summary {
    align-items: center;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: var(--spacing--3xs);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--spacing--sm);
    padding-inline: 0;
  }

  .footer-menu__summary::-webkit-details-marker {
    display: none;
  }

  .footer-menu__heading {
    flex: 1 0 0;
    letter-spacing: 0.05em;
    margin: 0;
    min-width: 0;
    text-align: start;
    text-transform: uppercase;
  }

  /* Match shared accordion-row panel animation (styles live here because
     accordion-row.liquid is not rendered in the footer). */
  .footer-menu .accordion-row__icons {
    --icon-size: 20px;
    display: grid;
    flex-shrink: 0;
    height: 20px;
    place-items: center;
    position: relative;
    width: 20px;
  }

  .footer-menu .accordion-row__icon {
    align-items: center;
    color: inherit;
    display: none;
    grid-area: 1 / 1;
    justify-content: center;
  }

  .footer-menu .accordion-row__panel {
    height: 0;
    overflow: hidden;
  }

  .footer-menu .accordion-row[open] .accordion-row__panel {
    height: auto;
  }

  .footer__menus-accordion.accordion--icon-plus .accordion-row__icon--plus {
    display: inline-flex;
  }

  .footer__menus-accordion.accordion--icon-plus
    .accordion-row[open]
    .accordion-row__icon--plus {
    display: none;
  }

  .footer__menus-accordion.accordion--icon-plus
    .accordion-row[open]
    .accordion-row__icon--minus {
    display: inline-flex;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .footer-menu .accordion-row__icon {
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }

    .footer-menu .accordion-row__panel {
      transition: height 0.3s ease;
    }
  }

  .footer-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    list-style: none;
    margin: 0;
    padding-block-end: var(--spacing--2xs);
    padding-inline: 0;
  }

  .footer-menu__link {
    color: inherit;
    text-decoration: none;
  }

  .footer-menu__link:hover {
    opacity: 0.6;
  }

  @media screen and (min-width: 768px) {
    .footer-menu {
      border-block-end: none;
      margin-inline: 0;
      width: 215px;
    }

    .footer-menu__desktop {
      display: block;
    }

    .footer-menu__mobile {
      display: none;
    }

    .footer-menu__desktop .footer-menu__list {
      gap: var(--spacing--sm);
      padding: 0;
      padding-block-start: var(--spacing--sm);
    }
  }
/* END_SNIPPET:footer-menu-column */

/* START_SNIPPET:footer-social-link (INDEX:135) */
.footer-social-link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
  }

  .footer-social-link__icon {
    --icon-size: 24px;
  }

  .footer-social-link__image {
    display: block;
    height: 24px;
    width: 24px;
  }

  .footer-social-link:hover {
    opacity: 0.6;
  }
/* END_SNIPPET:footer-social-link */

/* START_SNIPPET:form-field (INDEX:136) */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xs);
    width: 100%;
  }

  .form-field__label {
    color: var(--color-text--primary);
  }

  .form-field__required {
    margin-inline-start: 2px;
  }

  .form-field__control {
    background-color: transparent;
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--style-border-radius-inputs, var(--radius--sm));
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    padding: var(--spacing--2xs) var(--spacing--xs);
    width: 100%;
  }

  .form-field__control:focus-visible {
    border-color: var(--color-border--primary);
    outline: 2px solid var(--color-border--primary);
    outline-offset: -1px;
  }

  .form-field__control::placeholder {
    color: var(--color-text--tertiary);
  }

  .form-field__control--textarea {
    resize: vertical;
  }

  .form-field__control--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='m1.57 1.59 12.76 12.77L27.1 1.59' stroke-width='2' stroke='currentColor' fill='none'/%3E%3C/svg%3E");
    background-position: right var(--spacing--xs) center;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-inline-end: var(--spacing--lg);
  }
/* END_SNIPPET:form-field */

/* START_SNIPPET:header-search (INDEX:141) */
/* The field and the typewriter overlay both read `.font-body-sm`, so the
     size is set once here as the token the utility resolves — never on the
     input alone, or the animated placeholder would drift off the typed
     text's baseline. 14px is the design value. */
  .header-search__field {
    --body-sm--size: 14px;

    flex: 1;
    min-width: var(--header-search-field-min-width, 0px);
    overflow: hidden;
    position: relative;
  }

  /* iOS Safari zooms the page whenever a focused input computes under 16px,
     and the viewport meta must not suppress that (WCAG 1.4.4). Touch pointers
     therefore take 16px; fine pointers keep the design's 14px. */
  @media (pointer: coarse) {
    .header-search__field {
      --body-sm--size: 16px;
    }
  }

  .header-search__input {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-text--primary);
    flex: 1;
    min-width: 0;
    outline: none;
    padding: 0;
    width: 100%;
  }

  .header-search__input:focus,
  .header-search__input:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
  }

  .header-search__input::-webkit-search-decoration,
  .header-search__input::-webkit-search-cancel-button,
  .header-search__input::-webkit-search-results-button,
  .header-search__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .header-search__input::placeholder {
    color: var(--color-text--secondary);
  }

  .header-search__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .header-search__clear {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

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

  /* 20px control, 10px cross — the icon glyph fills ~86% of its box. */
  .header-search__clear-icon {
    --icon-size: 12px;
    color: var(--color-text--primary);
  }

  .animated-search-text {
    display: contents;
  }

  .animated-search-text__overlay {
    align-items: center;
    color: var(--color-text--secondary);
    display: flex;
    gap: var(--spacing--4xs);
    inset-block: 0;
    inset-inline: 0;
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
  }

  .animated-search-text__overlay[hidden] {
    display: none;
  }

  .animated-search-text__prefix {
    color: var(--color-text--secondary);
    flex-shrink: 0;
  }

  .animated-search-text__typewriter {
    color: var(--color-text--primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .animated-search-text__typewriter::after {
    animation: animated-search-text-cursor-blink 1s step-end infinite;
    content: '|';
    margin-inline-start: 1px;
  }

  @keyframes animated-search-text-cursor-blink {
    50% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .animated-search-text__typewriter::after {
      animation: none;
      content: '';
    }
  }
/* END_SNIPPET:header-search */

/* START_SNIPPET:icon (INDEX:142) */
.svg-icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
  }

  .svg-icon svg {
    height: var(--icon-size, 24px);
    width: var(--icon-size, 24px);
  }
/* END_SNIPPET:icon */

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

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

/* START_SNIPPET:media-block (INDEX:150) */
.media-block {
    box-sizing: border-box;
    overflow: hidden;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: relative;
    width: 100%;
  }

  .media-block__image,
  .media-block__video,
  .media-block__placeholder {
    display: block;
    object-fit: var(--media-object-fit, cover);
    width: 100%;
  }

  /* Rounded corners are the default for every media block. The radius sits on
     the viewport frames and the media itself, never on `.media-block` — that
     element carries the block's padding settings, so rounding it would round
     an empty padding box and leave the image square. Parents that already clip
     media to their own shape (content doorways) set `--media-radius: 0`. */
  .media-block__desktop,
  .media-block__mobile {
    border-radius: var(--media-radius, var(--radius--md));
    overflow: hidden;
  }

  .media-block__video-wrap,
  .media-block__image,
  .media-block__video,
  .media-block__placeholder,
  .media-block__color {
    border-radius: var(--media-radius, var(--radius--md));
  }

  .media-block__desktop .media-block__image,
  .media-block__desktop .media-block__video,
  .media-block__desktop .media-block__placeholder {
    object-position: var(--media-object-position-desktop, center center);
  }

  .media-block__mobile .media-block__image,
  .media-block__mobile .media-block__video,
  .media-block__mobile .media-block__placeholder {
    object-position: var(--media-object-position-mobile, center center);
  }

  .media-block:not(.media-block--ratio-desktop-adapt)
    .media-block__desktop
    .media-block__image,
  .media-block:not(.media-block--ratio-desktop-adapt)
    .media-block__desktop
    .media-block__video,
  .media-block:not(.media-block--ratio-desktop-adapt)
    .media-block__desktop
    .media-block__placeholder,
  .media-block:not(.media-block--ratio-mobile-adapt)
    .media-block__mobile
    .media-block__image,
  .media-block:not(.media-block--ratio-mobile-adapt)
    .media-block__mobile
    .media-block__video,
  .media-block:not(.media-block--ratio-mobile-adapt)
    .media-block__mobile
    .media-block__placeholder {
    height: 100%;
  }

  .media-block--ratio-desktop-adapt:not(.media-block--doorway)
    .media-block__desktop
    .media-block__image,
  .media-block--ratio-desktop-adapt:not(.media-block--doorway)
    .media-block__desktop
    .media-block__video,
  .media-block--ratio-mobile-adapt:not(.media-block--doorway)
    .media-block__mobile
    .media-block__image,
  .media-block--ratio-mobile-adapt:not(.media-block--doorway)
    .media-block__mobile
    .media-block__video {
    height: auto;
  }

  .media-block__placeholder {
    background-color: var(--color-surface--secondary);
    height: 100%;
    object-fit: var(--media-object-fit, cover);
    width: 100%;
  }

  /* The placeholder needs a height floor only where the frame has no aspect
     ratio to resolve `height: 100%` against. Applying it to ratio frames
     stretched narrow cards — a square placeholder came out portrait on mobile. */
  .media-block--ratio-desktop-adapt:not(.media-block--doorway)
    .media-block__desktop
    .media-block__placeholder,
  .media-block--ratio-mobile-adapt:not(.media-block--doorway)
    .media-block__mobile
    .media-block__placeholder {
    min-height: 12rem;
  }

  .media-block__color {
    background-color: var(--media-color, var(--color-surface--secondary));
    display: block;
    height: 100%;
    width: 100%;
  }

  /* A colour has no intrinsic size, and an adapt frame has no aspect ratio to
     resolve `height: 100%` against, so the fill needs its own height there. */
  .media-block--color.media-block--ratio-desktop-adapt:not(
      .media-block--doorway
    )
    .media-block__desktop
    .media-block__color,
  .media-block--color.media-block--ratio-mobile-adapt:not(.media-block--doorway)
    .media-block__mobile
    .media-block__color {
    min-height: var(--media-color-min-height, 12rem);
  }

  .media-block__mobile {
    display: block;
  }

  .media-block__desktop {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .media-block__mobile {
      display: none;
    }

    .media-block__desktop {
      display: block;
    }
  }

  .media-block--ratio-desktop-adapt .media-block__desktop {
    aspect-ratio: var(--media-ratio-desktop, auto);
  }

  .media-block--ratio-mobile-adapt .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, auto);
  }

  .media-block--doorway .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, 253 / 378);
  }

  .media-block--doorway .media-block__desktop {
    aspect-ratio: var(--media-ratio-desktop, 253 / 378);
  }

  .media-block--doorway .media-block__image,
  .media-block--doorway .media-block__video,
  .media-block--doorway .media-block__placeholder {
    height: 100%;
  }

  .media-block--ratio-desktop-square .media-block__desktop,
  .media-block--ratio-mobile-square .media-block__mobile {
    aspect-ratio: 1;
  }

  /* Parents can set --media-ratio-* (e.g. mini-doorway uses ~253/378) */
  .media-block--ratio-desktop-portrait .media-block__desktop {
    aspect-ratio: var(--media-ratio-desktop, 4 / 5);
  }

  .media-block--ratio-mobile-portrait .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, 4 / 5);
  }

  .media-block--ratio-desktop-landscape .media-block__desktop {
    aspect-ratio: var(--media-ratio-desktop, 16 / 9);
  }

  .media-block--ratio-mobile-landscape .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, 16 / 9);
  }

  .media-block--doorway {
    --media-object-fit: var(--doorway-media-object-fit, cover);
  }

  .media-block__video-wrap {
    height: 100%;
    position: relative;
    width: 100%;
  }

  .media-block__video-wrap .media-block__video {
    height: 100%;
  }

  .media-block__play {
    align-items: center;
    background-color: rgb(47 46 46 / 70%);
    border: 0;
    border-radius: 50%;
    color: var(--color-text--invert);
    cursor: pointer;
    display: inline-flex;
    height: 3.5rem;
    inset: 50% auto auto 50%;
    justify-content: center;
    padding: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 3.5rem;
    z-index: 1;
  }

  .media-block__play:focus-visible {
    outline: 2px solid var(--color-text--invert);
    outline-offset: 2px;
  }

  .media-block__play-icon {
    display: inline-flex;
    height: 1.25rem;
    margin-inline-start: 0.125rem;
    width: 1.25rem;
  }

  .media-block__play-icon .icon,
  .media-block__play-icon svg {
    display: block;
    height: 100%;
    width: 100%;
  }

  .media-block__video-wrap.is-playing .media-block__play {
    display: none;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .media-block {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:media-block */

/* START_SNIPPET:mini-product-tile (INDEX:158) */
.mini-product-tile {
    --mini-product-tile-expand-duration: 0.35s;
    --mini-product-tile-expand-easing: cubic-bezier(0.4, 0, 0.2, 1);
    /* The chip easing is tuned for a few pixels of growth; the drawer travels
       its full width, so it gets a longer, smoother curve of its own. */
    --mini-product-tile-drawer-duration: 0.45s;
    --mini-product-tile-drawer-easing: ease-in-out;
    --mini-product-tile-height: 77px;
    --mini-product-tile-surface: rgb(236 236 236 / 60%);
    --mini-product-tile-colour-count-size: 10px;
    --mini-product-tile-single-open-width: calc(
      269px + var(--mini-product-tile-gap, 4px) * 2
    );
    --mini-product-tile-single-chip-width: calc(
      81px + var(--mini-product-tile-gap, 4px) * 2
    );
    --mini-product-tile-inset: var(--spacing--sm);

    box-sizing: border-box;
    display: block;
    margin-inline-start: auto;
    max-width: 100%;
  }

  .mini-product-tile--anchored {
    margin-inline-start: 0;
    position: absolute;
    z-index: 2;
  }

  .mini-product-tile--single {
    height: calc(
      var(--mini-product-tile-height) + var(--padding-block-start-mobile, 0px) +
        var(--padding-block-end-mobile, 0px)
    );
    width: var(--mini-product-tile-single-chip-width);
  }

  .mini-product-tile--single .mini-product-tile__surface {
    max-width: none;
    position: absolute;
  }

  .mini-product-tile--expand-mobile-left .mini-product-tile__surface {
    inset-inline-start: 0;
  }

  .mini-product-tile--expand-mobile-center .mini-product-tile__surface {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .mini-product-tile--expand-mobile-right .mini-product-tile__surface {
    inset-inline-end: 0;
  }

  .mini-product-tile--mobile-top-left {
    inset-block-start: var(--mini-product-tile-inset);
    inset-inline-start: var(--mini-product-tile-inset);
  }

  .mini-product-tile--mobile-top-right {
    inset-block-start: var(--mini-product-tile-inset);
    inset-inline-end: var(--mini-product-tile-inset);
  }

  .mini-product-tile--mobile-bottom-left {
    inset-block-end: var(--mini-product-tile-inset);
    inset-inline-start: var(--mini-product-tile-inset);
  }

  .mini-product-tile--mobile-bottom-right {
    inset-block-end: var(--mini-product-tile-inset);
    inset-inline-end: var(--mini-product-tile-inset);
  }

  @media screen and (min-width: 768px) {
    .mini-product-tile--single {
      height: calc(
        var(--mini-product-tile-height) + var(--padding-block-start, 0px) +
          var(--padding-block-end, 0px)
      );
    }

    .mini-product-tile--expand-desktop-left .mini-product-tile__surface,
    .mini-product-tile--expand-desktop-center .mini-product-tile__surface,
    .mini-product-tile--expand-desktop-right .mini-product-tile__surface {
      inset-inline-end: auto;
      inset-inline-start: auto;
      transform: none;
    }

    .mini-product-tile--expand-desktop-left .mini-product-tile__surface {
      inset-inline-start: 0;
    }

    .mini-product-tile--expand-desktop-center .mini-product-tile__surface {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    .mini-product-tile--expand-desktop-right .mini-product-tile__surface {
      inset-inline-end: 0;
    }

    .mini-product-tile--desktop-top-left,
    .mini-product-tile--desktop-top-right,
    .mini-product-tile--desktop-bottom-left,
    .mini-product-tile--desktop-bottom-right {
      inset-block-end: auto;
      inset-block-start: auto;
      inset-inline-end: auto;
      inset-inline-start: auto;
    }

    .mini-product-tile--desktop-top-left {
      inset-block-start: var(--mini-product-tile-inset);
      inset-inline-start: var(--mini-product-tile-inset);
    }

    .mini-product-tile--desktop-top-right {
      inset-block-start: var(--mini-product-tile-inset);
      inset-inline-end: var(--mini-product-tile-inset);
    }

    .mini-product-tile--desktop-bottom-left {
      inset-block-end: var(--mini-product-tile-inset);
      inset-inline-start: var(--mini-product-tile-inset);
    }

    .mini-product-tile--desktop-bottom-right {
      inset-block-end: var(--mini-product-tile-inset);
      inset-inline-end: var(--mini-product-tile-inset);
    }
  }

  .mini-product-tile__surface {
    /* content-box so the chip widths below stay the size of the content and
       the padding settings grow the painted surface instead of offsetting it */
    box-sizing: content-box;
    max-width: 100%;
    overflow: hidden;
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    position: relative;
    transition: width var(--mini-product-tile-expand-duration)
      var(--mini-product-tile-expand-easing);
  }

  .mini-product-tile__backdrop {
    backdrop-filter: blur(10px);
    background-color: var(--mini-product-tile-surface);
    border-radius: var(--radius--sm);
    inset: 0;
    pointer-events: none;
    position: absolute;
    transition: background-color var(--mini-product-tile-expand-duration)
      var(--mini-product-tile-expand-easing);
  }

  .mini-product-tile--multiple .mini-product-tile__backdrop {
    background-color: var(--mini-product-tile-surface);
  }

  .mini-product-tile__content {
    position: relative;
    z-index: 1;
  }

  .mini-product-tile__content--single {
    align-items: center;
    column-gap: var(--mini-product-tile-gap, 4px);
    display: grid;
    grid-template-columns: 56px 0fr auto;
    height: var(--mini-product-tile-height);
    padding-block: 5px;
    padding-inline: 5px 4px;
    transition: grid-template-columns var(--mini-product-tile-expand-duration)
      var(--mini-product-tile-expand-easing);
    width: 100%;
  }

  .mini-product-tile--single.mini-product-tile--open
    .mini-product-tile__content--single {
    grid-template-columns: 56px 1fr auto;
  }

  .mini-product-tile--single .mini-product-tile__surface {
    width: var(--mini-product-tile-single-chip-width);
  }

  .mini-product-tile--single.mini-product-tile--open
    .mini-product-tile__surface {
    width: var(--mini-product-tile-single-open-width);
  }

  .mini-product-tile--single.mini-product-tile--open
    .mini-product-tile__backdrop {
    background-color: var(--mini-product-tile-surface);
  }

  .mini-product-tile__details {
    grid-column: 2;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    visibility: hidden;
  }

  .mini-product-tile--single.mini-product-tile--open
    .mini-product-tile__details {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
    visibility: visible;
  }

  .mini-product-tile--single:not(.mini-product-tile--open)
    .mini-product-tile__details {
    transition-delay: 0s;
  }

  .mini-product-tile__thumb {
    grid-column: 1;
    background-color: var(--color-surface--primary);
    border-radius: 4px;
    display: block;
    flex-shrink: 0;
    height: 67px;
    overflow: hidden;
    width: 56px;
  }

  .mini-product-tile__thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .mini-product-tile__toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--mini-product-tile-toggle-color, var(--color-text--primary));
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    grid-column: 3;
    height: 16px;
    justify-content: center;
    padding: 0;
    width: 16px;
  }

  .mini-product-tile__toggle-icon {
    --icon-size: 16px;
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--mini-product-tile-expand-duration)
      var(--mini-product-tile-expand-easing);
  }

  .mini-product-tile--open .mini-product-tile__toggle-icon {
    transform: rotate(45deg);
  }

  .mini-product-tile__content--multiple {
    position: relative;
  }

  .mini-product-tile__teaser {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--mini-product-tile-gap, 4px);
    height: var(--mini-product-tile-height);
    padding-block: 5px;
    padding-inline: 5px 4px;
    white-space: nowrap;
  }

  .mini-product-tile__thumbs {
    display: inline-flex;
    gap: var(--mini-product-tile-gap, 4px);
  }

  .mini-product-tile--multiple .mini-product-tile__surface {
    width: fit-content;
  }

  .mini-product-tile__dialog {
    background: transparent;
    border: 0;
    height: 100%;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 0;
    position: fixed;
    width: 100%;
  }

  .mini-product-tile__dialog::backdrop {
    background-color: transparent;
  }

  .mini-product-tile__panel {
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--sm) 0 0 var(--radius--sm);
    height: 100%;
    margin-inline-start: auto;
    overflow: hidden;
    overflow-y: auto;
    padding: var(--spacing--xl) var(--spacing--sm);
    position: relative;
    transform: translateX(100%);
    transition: transform var(--mini-product-tile-drawer-duration)
      var(--mini-product-tile-drawer-easing);
    width: min(343px, 100%);
  }

  .mini-product-tile__dialog--active .mini-product-tile__panel {
    transform: translateX(0);
  }

  .mini-product-tile__close {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    inset-block-start: var(--spacing--2xs);
    inset-inline-end: var(--spacing--2xs);
    justify-content: center;
    padding: var(--spacing--4xs);
    position: absolute;
    width: 24px;
    z-index: 1;
  }

  .mini-product-tile__close-icon {
    --icon-size: 14px;
  }

  .mini-product-tile-drawer-open {
    overflow: hidden;
  }

  .mini-product-tile__list {
    display: flex;
    flex-direction: column;
    gap: var(--mini-product-tile-card-gap, var(--spacing--sm));
    width: 100%;
  }

  .mini-product-tile__item {
    display: flex;
    flex-direction: column;
    gap: var(--mini-product-tile-card-gap, var(--spacing--sm));
    width: 100%;
  }

  .mini-product-tile--empty {
    backdrop-filter: blur(10px);
    background-color: rgb(236 236 236 / 60%);
    border-radius: var(--radius--sm);
    padding: var(--spacing--xs) var(--spacing--sm);
  }

  .mini-product-tile__empty-text {
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size);
    margin: 0;
  }

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

  .mini-product-tile-product--details {
    align-items: center;
    min-width: 0;
    padding-inline: var(--spacing--3xs);
  }

  .mini-product-tile-product--details
    .mini-product-tile-product__title--preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .mini-product-tile-product {
    align-items: center;
    color: inherit;
    display: flex;
    gap: var(--spacing--xs);
    text-decoration: none;
    width: 100%;
  }

  .mini-product-tile-product__media {
    border-radius: var(--radius--sm);
    display: block;
    flex-shrink: 0;
    height: 96px;
    overflow: hidden;
    width: 80px;
  }

  .mini-product-tile-product__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .mini-product-tile-product__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mini-product-tile-product__title {
    color: var(--color-text--primary);
  }

  .mini-product-tile-product__title--preview {
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size);
    font-weight: var(--body-sm--weight-bold);
    line-height: var(--body-sm--line-height);
  }

  .mini-product-tile-product__price {
    color: var(--color-text--primary);
  }

  .mini-product-tile-product__price--preview {
    font-family: var(--font-body--family);
    font-size: var(--body-xs--size);
    font-weight: var(--body-sm--weight-bold);
    line-height: 1.4;
  }

  .mini-product-tile-product__colours {
    color: var(--color-text--secondary);
    font-family: var(--font-body--family);
    font-size: var(--mini-product-tile-colour-count-size);
    font-weight: var(--body-xs--weight);
    line-height: 1.4;
  }

  .mini-product-tile-product__divider {
    border: 0;
    border-top: 1px solid var(--color-border--secondary);
    margin: 0;
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .mini-product-tile__surface {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  @media screen and (min-width: 768px) {
    .mini-product-tile__panel {
      padding: var(--spacing--xl);
      width: 400px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mini-product-tile {
      --mini-product-tile-expand-duration: 0.01ms;
      --mini-product-tile-drawer-duration: 0.01ms;
    }
  }
/* END_SNIPPET:mini-product-tile */

/* START_SNIPPET:model-card (INDEX:159) */
.model-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    position: relative;
    width: 100%;
  }

  /* Local media wrapper, not `media-block`: that snippet hides
     `.media-block__desktop` below 768px and picks up the section's inherited
     `--padding-*-mobile` vars, which killed the image on mobile. */
  .model-card__media {
    aspect-ratio: var(--model-card-media-ratio, 2 / 3);
    border-radius: var(--radius--sm);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .model-card__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .model-card__badge {
    background-color: var(--color-surface--secondary);
    border-radius: 0 var(--radius--sm) 0 var(--radius--sm);
    color: var(--color-text--primary);
    left: var(--spacing--2xs, 12px);
    padding-block: var(--spacing--3xs);
    padding-inline: var(--spacing--3xs);
    position: absolute;
    text-transform: uppercase;
    top: var(--spacing--2xs, 12px);
    z-index: 1;
  }

  @media screen and (min-width: 768px) {
    .model-card__badge {
      left: var(--spacing--sm, 20px);
      top: 18px;
    }
  }

  .model-info {
    color: var(--model-info-color, var(--color-text--primary));
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: var(--model-info-align, center);
    width: 100%;
  }

  .model-info__field {
    margin: 0;
  }

  .model-info__label {
    font-weight: var(--body-sm--weight-bold, 600);
  }
/* END_SNIPPET:model-card */

/* START_SNIPPET:product-badge (INDEX:160) */
/*
   * 24px tall. The design trims the label to its cap height, which CSS cannot
   * do portably yet (text-box-trim is Chrome-only), so the full line box plus
   * 8px of padding would render ~31px. Centring inside a fixed minimum gets
   * the same result and still grows if a label ever wraps.
   */
  .product-badge {
    align-items: center;
    background-color: var(--product-badge-background, var(--color-brand--blue));
    border-end-start-radius: var(--radius--sm);
    border-start-end-radius: var(--radius--sm);
    color: var(--product-badge-color, var(--color-text--invert));
    display: inline-flex;
    min-height: 24px;
    padding-block: 0;
    padding-inline: var(--spacing--3xs);
    text-transform: uppercase;
    width: fit-content;
  }
/* END_SNIPPET:product-badge */

/* START_SNIPPET:product-badges (INDEX:161) */
.product-badges {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xs);
    pointer-events: none;
  }

  .product-badges--overlay {
    inset-block-start: var(--spacing--3xs);
    inset-inline-start: var(--spacing--3xs);
    position: absolute;
    z-index: 2;
  }

  .product-badges--inline {
    flex-direction: row;
    flex-wrap: wrap;
    pointer-events: auto;
  }

  .product-badges__dynamic[hidden] {
    display: none;
  }
/* END_SNIPPET:product-badges */

/* START_SNIPPET:product-buy-buttons (INDEX:162) */
/* 8px between the buy row and the Klarna line on mobile, 12px on desktop. */
  .product-buy-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  @media screen and (min-width: 1024px) {
    .product-buy-buttons {
      gap: var(--spacing--2xs);
    }
  }

  .product-buy-buttons__stock {
    align-items: center;
    color: var(--color-text--secondary);
    display: flex;
    font-size: var(--body-xs--size);
    gap: 6px;
    line-height: normal;
    margin: 0;
    position: relative;
  }

  /* Red dot with a soft halo, 12px overall. */
  .product-buy-buttons__stock::before {
    background-color: var(--color-brand--red);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px
      color-mix(in srgb, var(--color-brand--red) 30%, transparent);
    content: '';
    display: inline-block;
    flex-shrink: 0;
    height: 9px;
    margin-inline: 1.5px;
    width: 9px;
  }

  /* Ring pulsing out of the dot to draw the eye to low stock. It has to be a
     pseudo-element rather than markup: the variant handler rewrites the
     message with textContent, which would delete any child node. Sits on the
     dot's own centre — 1.5px inline margin plus half of its 9px. */
  .product-buy-buttons__stock::after {
    animation: product-stock-pulse 2s ease-out infinite;
    border: 1.5px solid var(--color-brand--red);
    border-radius: 50%;
    box-sizing: border-box;
    content: '';
    height: 9px;
    inset-block-start: 50%;
    inset-inline-start: 1.5px;
    pointer-events: none;
    position: absolute;
    width: 9px;
  }

  @keyframes product-stock-pulse {
    0% {
      opacity: 0.5;
      transform: translateY(-50%) scale(1);
    }
    70% {
      opacity: 0;
      transform: translateY(-50%) scale(2.4);
    }
    100% {
      opacity: 0;
      transform: translateY(-50%) scale(2.4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-buy-buttons__stock::after {
      animation: none;
      opacity: 0;
    }
  }

  .product-buy-buttons__stock--hidden {
    display: none;
  }

  .product-buy-buttons__row {
    display: flex;
    gap: var(--spacing--3xs);
    width: 100%;
  }

  /* 112px selector + 8px gap; add to bag takes the rest. */
  .product-buy-buttons__quantity {
    align-items: center;
    border: 0.8px solid var(--color-border--secondary);
    border-radius: var(--radius--pill);
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--spacing--3xs);
    height: 40px;
    /* space-between + 16px inset puts the marks at 16 and 96 inside the 112px
       pill, which is where the design has them, and still leaves the value room
       to grow past one digit. */
    justify-content: space-between;
    padding-inline: var(--spacing--xs);
    width: 112px;
  }

  /* Sits after the base rule: same specificity, so source order decides which
     display wins. */
  .product-buy-buttons__quantity--hidden {
    display: none;
  }

  /* Pre-order is a delivery note, not a stock warning, so it keeps the marker
     but drops the red alert colour and the pulse that goes with it. */
  .product-buy-buttons__stock--preorder::before {
    background-color: var(--color-text--secondary);
    box-shadow: none;
  }

  .product-buy-buttons__stock--preorder::after {
    animation: none;
    opacity: 0;
  }

  .product-buy-buttons__quantity-button {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 12px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 12px;
  }

  /* Keep the 12px mark from the design but give it a real tap target. */
  .product-buy-buttons__quantity-button::after {
    content: '';
    inset: -10px;
    position: absolute;
  }

  .product-buy-buttons__quantity-icon {
    --icon-size: 12px;
  }

  .product-buy-buttons__quantity-input {
    appearance: textfield;
    background: transparent;
    border: none;
    color: var(--color-text--primary);
    max-width: 2.5rem;
    min-width: 1.5rem;
    padding: 0;
    text-align: center;
    width: 2rem;
  }

  .product-buy-buttons__quantity-input::-webkit-outer-spin-button,
  .product-buy-buttons__quantity-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  /* .btn sets display:inline-flex, which outranks the hidden attribute. */
  .product-buy-buttons__submit[hidden] {
    display: none;
  }

  /* Out of stock with no notify form: white, bordered, inert. */
  .product-buy-buttons__submit--oos:disabled {
    background-color: var(--color-surface--primary);
    border: 0.8px solid var(--color-border--secondary);
    color: var(--color-text--primary);
    opacity: 1;
  }

  .product-buy-buttons__submit {
    flex: 1 1 auto;
    /* Button/xs (13px, no tracking) — .btn--secondary defaults to Button/sm,
       which resolves to 14px above the md breakpoint. */
    font-size: var(--button-xs--size);
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    min-width: 0;
    text-transform: capitalize;
    width: 100%;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-buy-buttons {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-buy-buttons */

/* START_SNIPPET:product-card-compact (INDEX:163) */
/* Declared per file, as elsewhere in the theme — there is no global
     definition to rely on. */
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .product-card-compact {
    align-items: stretch;
    display: flex;
    gap: var(--spacing--2xs);
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  .product-card-compact__media {
    background-color: var(--color-brand--off-white);
    border-radius: var(--radius--sm, 4px);
    flex: 0 0 96px;
    height: 120px;
    overflow: hidden;
    width: 96px;
  }

  .product-card-compact__image,
  .product-card-compact__placeholder {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  /*
   * The quick-add row sits on the same baseline on every card. The design flows
   * it 12px under the price and assumes a two-line title, so the title reserves
   * two lines rather than the row being pushed to the bottom — that keeps the
   * row aligned across the set and still lands where the design puts it when a
   * title only runs to one line.
   */
  .product-card-compact__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--2xs);
    justify-content: flex-start;
    min-width: 0;
    padding-block: var(--spacing--2xs);
  }

  .product-card-compact__add--link {
    align-self: flex-start;
  }

  .product-card-compact__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .product-card-compact__title {
    color: var(--color-text--primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Two lines at 1.5, reserved whether or not the title fills them. */
    min-height: 3em;
    overflow: hidden;
    text-decoration: none;
  }

  .product-card-compact__price {
    color: var(--color-text--primary);
  }

  .product-card-compact__price-compare {
    color: var(--color-text--sale);
    margin-inline-start: var(--spacing--4xs);
  }

  .product-card-compact__add {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    gap: var(--spacing--4xs);
    padding: 0;
    text-decoration: none;
  }

  .product-card-compact__add:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .product-card-compact__add-label {
    text-transform: uppercase;
  }
/* END_SNIPPET:product-card-compact */

/* START_SNIPPET:product-card-styles (INDEX:167) */
.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    position: relative;
    width: 100%;
  }

  .product-card__media-link {
    color: inherit;
    display: block;
    height: 100%;
    position: relative;
    text-decoration: none;
    width: 100%;
  }

  /* Kill the browser's native image/link drag ghost — it hijacks the pointer
     and fights the Swiper drag. -webkit-user-drag covers Chrome/Safari; the
     draggable="false" attributes in the markup cover Firefox. */
  .product-card__media-link,
  .product-card img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .product-card__media-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-card__details-link {
    color: inherit;
    text-decoration: none;
  }

  .product-card__details-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-card__media {
    aspect-ratio: var(--product-card-media-ratio);
    border-radius: var(--radius--sm);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .product-card__swiper {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    height: 100%;
    position: relative;
    width: 100%;
  }

  /* Filmstrip fallback so the card still shows one image if Swiper never boots.
     Dropped once Swiper adds .swiper-initialized, so it never fights its sizing. */
  .product-card__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    height: 100%;
  }

  .product-card__swiper:not(.swiper-initialized) .product-card__slide {
    flex: 0 0 100%;
  }

  .product-card__slide {
    background-color: var(--color-surface--brand);
    display: block;
    height: 100%;
    width: 100%;
  }

  .product-card__slide--placeholder,
  .product-card__stack--placeholder {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  /* Hover mode: both images occupy the same box, the second fades over. */
  .product-card__stack {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    height: 100%;
    position: relative;
    width: 100%;
  }

  .product-card__image--hover {
    inset: 0;
    opacity: 0;
    position: absolute;
  }

  @media (hover: hover) and (pointer: fine) {
    .product-card__stack .product-card__image {
      transition: opacity var(--product-card-hover-fade, 0.4s) ease;
    }

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

    /* The lead image goes with it. Product cutouts are transparent PNGs, so
       leaving it at full opacity underneath showed it through everything the
       hover image is not — the card read as two products at once. Only when
       there is a hover image to fade to, or a one-image product would hover
       to an empty card. */
    .product-card:hover
      .product-card__stack--hover
      .product-card__image:not(.product-card__image--hover),
    .product-card:focus-within
      .product-card__stack--hover
      .product-card__image:not(.product-card__image--hover) {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-card__stack .product-card__image {
      transition: none;
    }
  }

  .product-card__image {
    height: 100%;
    object-fit: var(--product-card-image-fit, cover);
    width: 100%;
  }

  /* Video slides share .product-card__image for sizing and object-fit; this
     only kills the inline baseline gap a bare <video> would leave. */
  .product-card__video {
    display: block;
  }

  .product-card__placeholder {
    height: 60%;
    opacity: 0.35;
    width: 60%;
  }

  .product-card__nav {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .product-card__nav {
      align-items: center;
      display: flex;
      inset-block-start: 50%;
      inset-inline: var(--spacing--3xs);
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transform: translateY(-50%);
      transition: opacity 0.2s ease;
      z-index: 3;
    }

    /* :focus-visible, not :focus-within — a clicked arrow keeps focus and would
       otherwise pin the nav open after the pointer leaves. */
    .product-card:hover .product-card__nav,
    .product-card__nav:has(:focus-visible) {
      opacity: 1;
    }

    /* The nav strip spans the card, so it stays click-through and only the
       buttons take pointer events — otherwise it masks the product link. */
    .product-card:hover .product-card__nav-button,
    .product-card__nav:has(:focus-visible) .product-card__nav-button {
      pointer-events: auto;
    }
  }

  .product-card__nav-button {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
    width: 24px;
  }

  .product-card__nav-button[disabled],
  .product-card__nav-button--disabled {
    cursor: default;
    opacity: 0.6;
  }

  .product-card__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-card__nav-icon {
    --icon-size: 32px;
    color: var(--color-text--primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-card__swiper .swiper-wrapper {
      transition-duration: 0ms !important;
    }
  }

  /* Lipscore's widget only needs to be in the DOM to hydrate — never seen. */
  .product-card__reviews-source {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
  }

  /* Sits over the image, which can be any colour, so the pill carries its own
     surface to keep the star and score legible against dark photography. */
  .product-card__reviews {
    align-items: center;
    background-color: var(--color-surface--primary);
    border-radius: var(--radius--pill);
    bottom: var(--spacing--2xs);
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    display: inline-flex;
    gap: var(--spacing--4xs);
    padding: var(--spacing--4xs) var(--spacing--2xs);
    position: absolute;
    right: var(--spacing--2xs);
    z-index: 2;
  }

  /* Beats the inline-flex above, which would otherwise defeat [hidden]. */
  .product-card__reviews[hidden] {
    display: none;
  }

  /* The trim below cuts the text box at the cap edge, but the score is digits,
     and Poppins' lining figures stand ~0.1em taller than its caps — so the
     trimmed box still sits ~0.5px under the digits' ink centre and flex-centring
     leaves the star that much low. An end margin inside the centring flex lifts
     the star by half its value, which is the 1px-for-0.5px the gap needs. */
  .product-card__review-star {
    --icon-size: 12px;
    color: var(--color-text--primary);
    margin-block-end: 1px;
  }

  /* Poppins has a much larger ascent than descent, so the line box sits ~1px
     below the digits' optical centre and flex-centring leaves the star low.
     Trimming the box to the cap/baseline edges makes it hug the glyphs, so
     centring aligns optically. Figma's own text nodes use the same trim.
     Unsupported browsers keep the untrimmed box — off by ~1px, not broken. */
  .product-card__review-text,
  .product-card__review-count {
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    font-size: var(--review--size);
    font-weight: var(--review--weight);
    line-height: var(--review--line-height);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  /* Mobile swaps the two media overlays: Figma puts the review score at the
     top of the image and the wishlist heart at the bottom, the reverse of
     desktop. The score also drops its pill there and sits on the photography
     directly, at the 4px inset the design's badge row uses. */
  @media screen and (max-width: 767px) {
    .product-card__reviews {
      background-color: transparent;
      border-radius: 0;
      bottom: auto;
      box-shadow: none;
      gap: 2px;
      padding: 2px;
      right: var(--spacing--4xs);
      top: var(--spacing--4xs);
    }

    /* Figma's mobile card shows the score alone — the vote count is desktop
       only, so it is a separate element rather than part of one string. */
    .product-card__review-count {
      display: none;
    }

    /* Swish injects the heart and places it with Floating UI, which writes
       `top`/`left` plus a transform inline and rewrites them on every resize,
       so only `!important` outranks it. Just the block axis is flipped — the
       inline transform still carries the end-alignment on the inline axis. */
    .product-card__media wk-button.wk-floating {
      bottom: 0 !important;
      top: auto !important;
    }
  }

  .product-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
  }

  /* The block-composed card orders subtitle, title, price and swatches as one
     merchant-sorted stack, so it cannot nest the text in .product-card__details
     to get the tighter rhythm. Tighten the whole stack instead and let the
     swatch block's own padding-block-start restore the wider gap above it. */
  .product-card__content:has(.product-card__overlay-link) {
    gap: var(--spacing--4xs);
    position: relative;
  }

  /* Merchant-ordered content cannot be wrapped in a single anchor, so the link
     is stretched instead. It covers the content area only, not the whole card:
     over the media it would swallow the touch drags Swiper needs to change
     image, and the media carries its own link already. z-index 1 keeps it under
     the swatches, which sit at 2. */
  .product-card__overlay-link {
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  .product-card__overlay-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* The theme editor wraps every static block in `.shopify-block`, which would
     otherwise become the flex item and take the gap instead of the real
     element. `display: contents` drops the wrapper out of layout. */
  .product-card__content > .shopify-block,
  .product-card__details > .shopify-block {
    display: contents;
  }

  .product-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xs);
  }

  .product-card__subtitle {
    line-height: 1.2;
  }

  .product-card__title {
    margin: 0;
  }

  .product-card__price {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

  .product-card__price-compare {
    text-decoration: line-through;
  }

  .product-card__colours {
    align-items: center;
    display: flex;
    gap: var(--spacing--none);
    position: relative;
    z-index: 2;
  }

  .product-card__swatch {
    background-clip: content-box;
    background-color: var(
      --product-card-swatch-fill,
      var(--color-surface--secondary)
    );
    border: none;
    border-radius: var(--radius--pill);
    display: inline-flex;
    flex-shrink: 0;
    height: 19px;
    overflow: hidden;
    padding: 3px;
    position: relative;
    width: 19px;
  }

  .product-card__swatch--current {
    box-shadow: inset 0 0 0 1px var(--color-text--primary);
  }

  .product-card__swatch-image {
    border-radius: var(--radius--pill);
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .product-card__swatch {
      height: var(--product-card-swatch-size);
      width: var(--product-card-swatch-size);
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-colour-drawer (INDEX:174) */
html.colour-drawer-open {
    overflow: hidden;
  }

  .product-colour-drawer {
    --product-colour-drawer-duration: 0.35s;
    --product-colour-drawer-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --product-colour-drawer-overlay: rgb(0 0 0 / 60%);
    /* The design's sheet is 343 wide on a 375 device — a 32px strip of page
       stays visible beside it — so the width follows the viewport rather than
       stopping at 343 and leaving a wider strip on larger phones. The desktop
       sheet is 557; there is no tablet frame, so the cap simply takes over
       once the strip rule would exceed it. */
    --product-colour-drawer-width: min(calc(100% - 32px), 557px);
    /* Keep the host out of parent flex/grid gaps while the dialog is fixed. */
    display: contents;
  }

  .product-colour-drawer__dialog {
    background: transparent;
    border: none;
    height: 100%;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 0;
    position: fixed;
    width: 100%;
  }

  .product-colour-drawer__dialog::backdrop {
    background-color: var(--product-colour-drawer-overlay);
    opacity: 0;
    transition: opacity var(--product-colour-drawer-duration)
      var(--product-colour-drawer-easing);
  }

  .product-colour-drawer__dialog--active::backdrop {
    opacity: 1;
  }

  .product-colour-drawer__panel {
    background-color: var(--color-surface--primary);
    /* The design frame carries radius/sm on every corner; the right pair sits
       on the viewport edge, so only the left pair is drawn — a radius there
       would open a sliver of backdrop. overflow keeps the scrolling grid inside
       the rounded bottom corner. */
    border-radius: var(--radius--sm) 0 0 var(--radius--sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-inline-start: auto;
    max-width: var(--product-colour-drawer-width);
    overflow: hidden;
    transform: translateX(100%);
    transition: transform var(--product-colour-drawer-duration)
      var(--product-colour-drawer-easing);
    width: var(--product-colour-drawer-width);
  }

  .product-colour-drawer__dialog--active .product-colour-drawer__panel {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-colour-drawer__dialog::backdrop,
    .product-colour-drawer__panel {
      transition: none;
    }
  }

  .product-colour-drawer__header {
    align-items: center;
    display: flex;
    /* The grid is taller than the panel on a long colour group, and a flex
       item shrinks by default — without this the header and filters give up
       height to it and the 48px bar collapses. */
    flex-shrink: 0;
    justify-content: space-between;
    min-height: 48px;
    padding-block: var(--spacing--2xs);
    padding-inline: var(--spacing--sm);
  }

  .product-colour-drawer__title {
    color: var(--color-text--primary);
    margin: 0;
  }

  /* The padding is hit area only. Pulled back out again so the button measures
     as the bare 24px icon: it neither pushes the header past 48px nor insets
     the glyph from the 20px gutter the design pins it to. */
  .product-colour-drawer__close {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    margin: calc(var(--spacing--4xs) * -1);
    padding: var(--spacing--4xs);
  }

  .product-colour-drawer__close:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  /* The design's close is a light X: two 16-long, 1.65-thick bars at 45°, so
     the glyph's axis-aligned extent is 16·cos45 = 11.31 inside a 24 box. The
     shared icon-close.svg draws its X across 12 of a 14 viewBox, so a box of
     11.31 / 12 × 14 = 13.2 gives the same extent and a 1.70 stroke against the
     design's 1.65. The 24 box stays for layout and hit area, and the glyph is
     centred in it. Two class levels so the size beats .svg-icon on
     specificity rather than file order. */
  .product-colour-drawer__close .product-colour-drawer__close-icon {
    --icon-size: 13.2px;

    align-items: center;
    height: 24px;
    justify-content: center;
    width: 24px;
  }

  .product-colour-drawer__filters {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    padding-inline: var(--spacing--sm);
  }

  .product-colour-drawer__filters-label {
    color: var(--color-text--primary);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .product-colour-drawer__filter-scroller {
    display: flex;
    gap: var(--spacing--2xs);
    max-width: 100%;
    overflow-x: auto;
    padding-block: var(--spacing--3xs);
    scrollbar-width: none;
  }

  .product-colour-drawer__filter-scroller::-webkit-scrollbar {
    display: none;
  }

  .product-colour-drawer__filter {
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    color: var(--color-text--secondary);
    cursor: pointer;
    flex-shrink: 0;
    padding-block: var(--spacing--3xs);
    padding-inline: var(--spacing--2xs);
    white-space: nowrap;
  }

  .product-colour-drawer__filter.is-active {
    border-color: var(--color-border--primary);
  }

  .product-colour-drawer__filter:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-colour-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing--sm);
  }

  .product-colour-drawer__grid {
    display: grid;
    gap: var(--spacing--3xs);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-colour-drawer__card {
    align-items: center;
    background-color: var(--color-surface--brand);
    border: 1px solid transparent;
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    overflow: hidden;
    padding-block-end: var(--spacing--4xs);
    position: relative;
    text-decoration: none;
  }

  .product-colour-drawer__card--selected {
    border-color: var(--color-border--primary);
  }

  .product-colour-drawer__card[hidden] {
    display: none;
  }

  .product-colour-drawer__media {
    border-radius: var(--radius--sm);
    display: block;
    height: 98px;
    overflow: hidden;
    position: relative;
    width: 80px;
  }

  .product-colour-drawer__card:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-colour-drawer__image {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  .product-colour-drawer__card--unavailable .product-colour-drawer__media,
  .product-colour-drawer__card--unavailable .product-colour-drawer__name {
    opacity: 0.5;
  }

  /* Rule struck across the whole tile, not just the thumb. A gradient band
     tracks the tile's own diagonal at any track width. */
  .product-colour-drawer__unavailable-mark {
    background-image: linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      var(--color-brand--charcoal) calc(50% - 0.5px),
      var(--color-brand--charcoal) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
    inset: 0;
    position: absolute;
  }

  .product-colour-drawer__name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding-inline: var(--spacing--4xs);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media screen and (min-width: 1024px) {
    /* Desktop keeps the label inline. The chips stay on one row and scroll
       once they outgrow it, rather than wrapping under the label. */
    .product-colour-drawer__filters {
      align-items: center;
      column-gap: var(--spacing--2xs);
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .product-colour-drawer__filter-scroller {
      flex: 1 1 auto;
      /* A flex item floors at its content width without this, so the row
         would push the panel wider instead of scrolling. */
      min-width: 0;
    }

    .product-colour-drawer__grid {
      gap: var(--spacing--2xs);
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* END_SNIPPET:product-colour-drawer */

/* START_SNIPPET:product-colour-gallery-preload (INDEX:175) */
[data-gallery-preload] {
    display: none;
  }
/* END_SNIPPET:product-colour-gallery-preload */

/* START_SNIPPET:product-complementary (INDEX:176) */
.product-complementary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    padding-block: var(--padding-block-start-mobile, 12px)
      var(--padding-block-end-mobile, 12px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-complementary__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--sm);
    justify-content: flex-start;
  }

  .product-complementary__heading {
    margin: 0;
    text-transform: var(--typo-transform, none);
  }

  .product-complementary__empty {
    color: var(--color-text--secondary);
    margin: 0;
  }

  .product-complementary__colours {
    display: flex;
    gap: var(--spacing--3xs);
  }

  .product-complementary:not([data-perfect-hue-ready='true'])
    .product-complementary__colours {
    opacity: 0;
    pointer-events: none;
  }

  .product-complementary__colour {
    align-items: center;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    width: 24px;
  }

  .product-complementary__colour--button {
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  .product-complementary__colour-fill,
  .product-complementary__colour-image {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    height: 16px;
    object-fit: cover;
    width: 16px;
  }

  /* Active fill 12px + 2.4px white ring + 1.2px black ring. */
  .product-complementary__colour--button.product-complementary__colour--active
    .product-complementary__colour-fill,
  .product-complementary__colour--button.product-complementary__colour--active
    .product-complementary__colour-image {
    box-shadow:
      0 0 0 2.4px var(--color-brand--white),
      0 0 0 3.6px var(--color-text--primary);
    height: 12px;
    width: 12px;
  }

  .product-complementary__panels {
    width: 100%;
  }

  .product-complementary__panel[hidden] {
    display: none;
  }

  .product-complementary__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
    transition: opacity 0.35s ease;
  }

  .product-complementary__list--fade {
    opacity: 0;
  }

  .product-complementary__pagination {
    display: none;
    gap: var(--spacing--4xs);
    justify-content: center;
    padding-block: var(--spacing--3xs);
  }

  /* Mobile: a swipeable row of 256px cards with a pagination indicator, and
     the hue swatches stacked under the heading rather than beside it. */
  @media screen and (max-width: 767px) {
    .product-complementary {
      gap: var(--spacing--xs);
    }

    .product-complementary__header {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--spacing--3xs);
    }

    .product-complementary__heading {
      font-size: var(--body-md--size);
    }

    .product-complementary__list {
      flex-direction: row;
      gap: var(--spacing--sm);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .product-complementary__list::-webkit-scrollbar {
      display: none;
    }

    .product-complementary__item {
      flex: 0 0 256px;
      max-width: 256px;
      scroll-snap-align: start;
    }

    .product-complementary__pagination:not(:empty) {
      display: flex;
    }
  }

  @media screen and (min-width: 768px) {
    .product-complementary {
      padding-block: var(--padding-block-start, 20px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }

    .product-complementary__list {
      flex-direction: row;
      gap: var(--spacing--xl);
    }

    .product-complementary__item {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-complementary__list {
      transition: none;
    }
  }
/* END_SNIPPET:product-complementary */

/* START_SNIPPET:product-description (INDEX:177) */
.product-description {
    margin: 0;
    text-transform: var(--typo-transform, none);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-description {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-description */

/* START_SNIPPET:product-details-cards (INDEX:178) */
.product-details-card-slide .mini-doorway {
    align-items: var(--mini-doorway-content-align, flex-start);
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--doorways-content-gap, 8px);
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    text-align: var(--mini-doorway-text-align, left);
    width: var(--mini-doorway-width, 100%);
  }

  .product-details-card-slide .media-block {
    box-sizing: border-box;
    overflow: hidden;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: relative;
    width: 100%;
  }

  .product-details-card-slide .media-block,
  .product-details-card-slide .media-block__image,
  .product-details-card-slide .media-block__placeholder {
    border-radius: var(--radius--sm);
  }

  .product-details-card-slide .media-block__desktop {
    display: none;
  }

  .product-details-card-slide .media-block__mobile {
    aspect-ratio: var(--media-ratio-mobile, 253 / 378);
    display: block;
  }

  .product-details-card-slide .media-block__image,
  .product-details-card-slide .media-block__placeholder {
    display: block;
    height: 100%;
    object-fit: var(--media-object-fit, var(--doorway-media-object-fit, cover));
    transform: scale(1);
    transition: transform 0.35s ease;
    width: 100%;
  }

  .product-details-card-slide .media-block__placeholder {
    background-color: var(--color-surface--secondary);
  }

  .product-details-card-slide .media-block:hover .media-block__image,
  .product-details-card-slide .media-block:hover .media-block__placeholder {
    transform: scale(1.1);
  }

  .product-details-card-slide .typography-block {
    color: var(--typography-color, var(--color-text--primary));
    margin-block: 0;
    margin-inline: var(--typography-margin-inline, 0);
    max-width: min(100%, var(--typography-max-width-value, 100%));
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    text-align: var(--typography-text-align, start);
    text-transform: var(--typography-text-transform);
    text-wrap: var(--typography-text-wrap);
    width: var(--size-style-width-mobile, var(--size-style-width, fit-content));
  }

  @media (prefers-reduced-motion: reduce) {
    .product-details-card-slide .media-block__image,
    .product-details-card-slide .media-block__placeholder {
      transition: none;
    }
  }

  @media screen and (min-width: 768px) {
    .product-details-card-slide .mini-doorway,
    .product-details-card-slide .media-block,
    .product-details-card-slide .typography-block {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }

    .product-details-card-slide .typography-block {
      width: var(--size-style-width, fit-content);
    }

    .product-details-card-slide .media-block__desktop {
      aspect-ratio: var(--media-ratio-desktop, 253 / 378);
      display: block;
    }

    .product-details-card-slide .media-block__mobile {
      display: none;
    }
  }
/* END_SNIPPET:product-details-cards */

/* START_SNIPPET:product-gallery (INDEX:179) */
.product-gallery {
    --product-gallery-ratio: 1 / 1;
    display: block;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: relative;
    width: 100%;
  }

  .product-gallery__size-badge {
    align-items: center;
    background-color: var(--color-surface--primary);
    border: 0;
    border-bottom-left-radius: var(--radius--sm);
    border-top-right-radius: var(--radius--sm);
    bottom: var(--spacing--xs);
    color: var(--color-text--primary);
    cursor: default;
    display: inline-flex;
    gap: 4px;
    justify-content: center;
    left: 23px;
    padding: var(--spacing--3xs) var(--spacing--3xs);
    position: absolute;
    text-decoration: none;
    z-index: 2;
  }

  a.product-gallery__size-badge,
  button.product-gallery__size-badge {
    cursor: pointer;
  }

  .product-gallery__badges {
    inset-block-start: 22px;
    inset-inline-start: 23px;
    position: absolute;
    z-index: 2;
  }

  .product-gallery__badges .product-badges--overlay {
    inset: auto;
    position: static;
  }

  .product-gallery__size-badge-icon {
    display: block;
    flex-shrink: 0;
    height: 7px;
    width: 16px;
  }

  .product-gallery__size-badge-icon svg {
    display: block;
    height: 100%;
    width: 100%;
  }

  .product-gallery__swiper {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .product-gallery__slide {
    height: auto;
  }

  /*
   * Pre-Swiper skeleton — match product-gallery.js (1-up mobile / 2-up desktop,
   * spaceBetween: 8) so the first paint isn’t a full-column image that jumps
   * when Swiper initializes and adds .swiper-initialized.
   */
  .product-gallery__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
  }

  .product-gallery__swiper:not(.swiper-initialized) .product-gallery__slide {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .product-gallery__swiper:not(.swiper-initialized)
    .product-gallery__slide:not(.product-gallery__slide--initial) {
    display: none;
  }

  .product-gallery__media-frame {
    aspect-ratio: var(--product-gallery-ratio);
    background-color: var(
      --product-gallery-bg,
      var(--color-surface--secondary)
    );
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .product-gallery__image,
  .product-gallery__video,
  .product-gallery__model {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .product-gallery__controls {
    display: none;
    padding-block-end: var(--spacing--3xs);
    padding-block-start: var(--spacing--xs);
    padding-inline: 0;
  }

  .product-gallery__pagination {
    /* Override Swiper’s default 4px side margins so flex gap alone = 4px. */
    --swiper-pagination-bullet-horizontal-gap: 0;
  }

  .product-gallery__nav {
    bottom: var(--spacing--xs);
    display: none;
    gap: var(--spacing--2xs);
    position: absolute;
    right: var(--spacing--xs);
    z-index: 2;
  }

  .product-gallery__nav-button {
    align-items: center;
    backdrop-filter: blur(13px);
    background-color: rgb(255 255 255 / 80%);
    border: 0;
    border-radius: 50%;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 26px;
  }

  .product-gallery__nav-button.swiper-button-disabled {
    cursor: default;
    opacity: 0.4;
  }

  .product-gallery__nav-button:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-gallery__nav-icon {
    --icon-size: 13px;
  }

  .product-gallery__thumbnails {
    display: flex;
    gap: var(--spacing--4xs);
    overflow-x: auto;
    padding-block: var(--spacing--4xs) 0;
    padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product-gallery__thumbnails::-webkit-scrollbar {
    display: none;
  }

  .product-gallery__thumbnail {
    background: none;
    border: 0;
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    position: relative;
    width: 64px;
  }

  .product-gallery__thumbnail.is-hidden,
  .product-gallery__thumbnail[hidden] {
    display: none;
  }

  /* The selected underline overlays the bottom edge of the thumbnail rather
     than sitting in a gap beneath it. */
  .product-gallery__thumbnail::after {
    background-color: transparent;
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transition: background-color 0.25s ease;
  }

  .product-gallery__thumbnail.is-active::after {
    background-color: var(--color-brand--charcoal);
  }

  .product-gallery__thumbnail:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-gallery__thumbnail-image {
    aspect-ratio: var(--product-gallery-ratio);
    background-color: var(
      --product-gallery-bg,
      var(--color-surface--secondary)
    );
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
  }

  .product-gallery__placeholder {
    aspect-ratio: var(--product-gallery-ratio);
    background-color: var(
      --product-gallery-bg,
      var(--color-surface--secondary)
    );
    display: flex;
    width: 100%;
  }

  .product-gallery__placeholder-svg {
    height: 100%;
    width: 100%;
  }

  @media screen and (min-width: 1024px) {
    /* Desktop slides are rounded (radius/sm in the design); mobile runs the
       image to the screen edges square, so the radius is desktop-only. The
       frame already clips, so the media inside follows the corners. */
    .product-gallery__media-frame,
    .product-gallery__placeholder {
      border-radius: var(--radius--sm);
    }

    .product-gallery__size-badge {
      bottom: auto;
      left: 23px;
      top: 17px;
    }

    .product-gallery__badges {
      display: none;
    }

    .product-gallery__controls {
      display: block;
    }

    .product-gallery__nav {
      display: flex;
    }

    .product-gallery__thumbnails {
      display: none;
    }

    /* Desktop Swiper: slidesPerView 2, spaceBetween 8 */
    .product-gallery__swiper:not(.swiper-initialized):has(
        .product-gallery__slide:nth-child(2)
      )
      .swiper-wrapper {
      gap: 8px;
    }

    .product-gallery__swiper:not(.swiper-initialized):has(
        .product-gallery__slide:nth-child(2)
      )
      .product-gallery__slide {
      flex: 0 0 calc((100% - 8px) / 2);
      max-width: calc((100% - 8px) / 2);
      width: calc((100% - 8px) / 2);
    }

    .product-gallery__swiper:not(.swiper-initialized)
      .product-gallery__slide--initial
      + .product-gallery__slide {
      display: block;
    }
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-gallery {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-gallery */

/* START_SNIPPET:product-payment-terms (INDEX:181) */
.product-payment-terms {
    color: var(--color-text--primary);
    padding-block: var(--padding-block-start-mobile, 8px)
      var(--padding-block-end-mobile, 8px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
  }

  .product-payment-terms shopify-payment-terms {
    font-family: var(--font-body--family);
    font-size: var(--body-xs--size, 11px);
    line-height: 1.5;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-payment-terms {
      padding-block: var(--padding-block-start, 8px)
        var(--padding-block-end, 8px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-payment-terms */

/* START_SNIPPET:product-promo-banner (INDEX:182) */
.product-promo-banner {
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-promo-banner[hidden] {
    display: none;
  }

  /* Keep layout space while hiding unstyled GoCertify content. */
  .product-promo-banner:not(.product-promo-banner--ready) {
    min-height: calc(16px + 1.5 * 11px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .product-promo-banner--ready {
    min-height: calc(16px + 1.5 * 11px);
  }

  .product-promo-banner gocertify-placement {
    display: block;
    min-height: inherit;
    width: 100%;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-promo-banner {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-promo-banner */

/* START_SNIPPET:product-size-fit (INDEX:184) */
.product-size-fit {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
  }

  .product-size-fit__size {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    width: 100%;
    margin: 0;
  }

  .product-size-fit__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    width: 100%;
  }

  .product-size-fit__title {
    margin: 0;
    color: var(--color-text--secondary);
  }

  .product-size-fit__copy {
    margin: 0;
    color: var(--color-text--primary);
  }

  .product-size-fit__copy .metafield-rich_text_field {
    display: contents;
  }

  .product-size-fit__copy > *:first-child {
    margin-block-start: 0;
  }

  .product-size-fit__copy > *:last-child {
    margin-block-end: 0;
  }

  .product-size-fit__specs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    margin: 0;
  }

  .product-size-fit__spec {
    display: flex;
    align-items: center;
    gap: var(--spacing--xl);
    margin: 0;
  }

  .product-size-fit__spec-label {
    flex: 0 0 100px;
    width: 100px;
    margin: 0;
    color: var(--color-text--secondary);
  }

  .product-size-fit__spec-value {
    margin: 0;
    color: var(--color-text--primary);
  }

  .product-size-fit__divider {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--color-border--secondary);
  }
/* END_SNIPPET:product-size-fit */

/* START_SNIPPET:product-social-gallery (INDEX:185) */
.product-social-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--spacing--xs));
    padding-block: var(--padding-block-start-mobile, 8px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-social-gallery[data-social-gallery-pending] {
    display: none;
  }

  .product-social-gallery__heading {
    color: var(--color-text--primary);
    text-transform: var(--typo-transform, none);
    margin: 0;
    width: 100%;
  }

  .product-social-gallery__embed {
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  /*
   * Videowise hydrates into a closed shadow root — light DOM stays empty.
   * Reserve the portrait height (~195px) so the column does not jump.
   */
  .product-social-gallery__embed .reeview-app-widget:empty {
    min-height: 195px;
  }

  .product-social-gallery__placeholder {
    color: var(--color-text--secondary);
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size);
    line-height: 1.5;
    margin: 0;
    text-align: center;
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-social-gallery {
      padding-block: var(--padding-block-start, 8px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-social-gallery */

/* START_SNIPPET:product-sticky-atc (INDEX:186) */
.product-sticky-atc {
    background-color: var(--color-surface--primary);
    bottom: 0;
    box-shadow: 0 -1px 0 var(--color-border--secondary);
    display: block;
    inset-inline: 0;
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    position: fixed;
    z-index: 20;
  }

  .product-sticky-atc[hidden] {
    display: none;
  }

  /* Mobile: title and size stack above a full-width button. */
  .product-sticky-atc__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xs);
    margin-inline: auto;
    max-width: var(--page-width);
    padding-block: var(--spacing--3xs);
    padding-inline: var(--page-margin);
    width: 100%;
  }

  .product-sticky-atc__details {
    align-items: center;
    display: flex;
    gap: var(--spacing--xs);
    min-width: 0;
    width: 100%;
  }

  /* The thumbnail is desktop only. */
  .product-sticky-atc__media {
    display: none;
  }

  .product-sticky-atc__image {
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    display: block;
    height: 70px;
    object-fit: contain;
    width: 57px;
  }

  .product-sticky-atc__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xs);
    justify-content: center;
    min-width: 0;
  }

  .product-sticky-atc__title {
    color: var(--color-text--primary);
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size);
    font-weight: var(--body-sm--weight-bold);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-sticky-atc__meta {
    color: var(--color-text--secondary);
    display: flex;
    font-family: var(--font-body--family);
    font-size: var(--body-sm--size);
    gap: var(--spacing--3xs);
    line-height: 1.5;
  }

  .product-sticky-atc__edit {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .product-sticky-atc__edit:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-sticky-atc__submit {
    flex-shrink: 0;
    font-size: var(--button-xs--size);
    height: 34px;
    letter-spacing: 0;
    line-height: var(--button-xs--line-height);
    text-transform: capitalize;
    width: 100%;
  }

  @media screen and (min-width: 1024px) {
    .product-sticky-atc__inner {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }

    .product-sticky-atc__details {
      width: auto;
    }

    .product-sticky-atc__media {
      display: block;
      flex-shrink: 0;
    }

    .product-sticky-atc__title {
      font-size: var(--body-lg--size);
      font-weight: var(--body-lg--weight-bold);
    }

    .product-sticky-atc__meta {
      font-size: var(--body-md--size);
    }

    .product-sticky-atc__submit {
      height: 40px;
      width: 309px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .product-sticky-atc {
      transition: transform 0.25s ease;
    }

    .product-sticky-atc[data-sticky-atc-entering] {
      transform: translateY(100%);
    }
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-sticky-atc {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-sticky-atc */

/* START_SNIPPET:product-testimonial (INDEX:187) */
.product-designer-notes {
    /* Headshot sits against the top of the quote. Reads as centred on desktop
       where a two-line quote is the same height as the avatar, but the mobile
       panel runs the quote to four lines and the avatar stays put. */
    align-items: flex-start;
    background-color: color-mix(
      in srgb,
      var(--designer-notes-bg, #fde47e) var(--designer-notes-bg-opacity, 50%),
      transparent
    );
    border: 0;
    border-radius: var(--radius--sm);
    display: flex;
    gap: var(--spacing--2xs);
    margin: 0;
    /* Ranges default to the design's 20/12; the merchant edits them directly
       rather than stacking on top of a hardcoded base. */
    padding-block: var(--padding-block-start-mobile, 20px)
      var(--padding-block-end-mobile, 20px);
    padding-inline: var(--padding-inline-start-mobile, 12px)
      var(--padding-inline-end-mobile, 12px);
    width: 100%;}

  .product-designer-notes__image {
    border-radius: 50%;
    flex-shrink: 0;
    height: 64px;
    object-fit: cover;
    width: 64px;
  }

  .product-designer-notes__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing--4xs);
    min-width: 0;
  }

  .product-designer-notes__quote {
    color: var(--designer-notes-quote-color, var(--color-text--primary));
    font-style: normal;
    margin: 0;
    text-transform: var(--designer-notes-quote-transform, none);
  }

  .product-designer-notes__attribution {
    color: var(--designer-notes-attribution-color, var(--color-text--primary));
    font-style: normal;
  }

  .product-designer-notes__empty {
    color: var(--color-text--secondary);
    margin: 0;
  }


  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-designer-notes {
      the merchant edits them directly rather than stacking on top of a hardcoded base. */ padding-block: var(--padding-block-start, 20px) var(--padding-block-end, 20px);
      padding-inline: var(--padding-inline-start, 12px) var(--padding-inline-end, 12px);
    }
  }
/* END_SNIPPET:product-testimonial */

/* START_SNIPPET:product-usps (INDEX:188) */
.product-usps {
    display: grid;
    gap: var(--spacing--xs);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    /* `padding-block` alone leaves the UA's 40px list indent in place, which
       pushed the whole row off the form's left edge. */
    padding-block: var(--padding-block-start-mobile, 0px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-usps__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--3xs);
    text-align: center;
  }

  .product-usps__icon {
    --icon-size: 32px;
    align-items: center;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
  }

  .product-usps__icon-image {
    height: 32px;
    object-fit: contain;
    width: 32px;
  }

  .product-usps__icon-svg {
    --icon-size: 32px;
  }

  .product-usps__text {
    margin: 0;
    text-transform: var(--typo-transform, none);
  }

  /* Mobile: one per row, icon left of the label. */
  @media screen and (min-width: 768px) {
    .product-usps {
      padding-block: var(--padding-block-start, 0px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }

  @media screen and (max-width: 1023px) {
    .product-usps {
      gap: var(--spacing--3xs);
      grid-template-columns: minmax(0, 1fr);
    }

    .product-usps__item {
      align-items: center;
      flex-direction: row;
      gap: var(--spacing--3xs);
      text-align: start;
    }
  }
/* END_SNIPPET:product-usps */

/* START_SNIPPET:product-variant-picker (INDEX:189) */
.product-variant-picker {
    border-block-start: 1px solid var(--color-border--secondary);
    display: flex;
    flex-direction: column;
    /* 32px between the colour and size groups on mobile, 40px on desktop. */
    gap: var(--spacing--lg);
    padding-block: var(--padding-block-start-mobile, 20px)
      var(--padding-block-end-mobile, 0px);
    padding-inline: var(--padding-inline-start-mobile, 0px)
      var(--padding-inline-end-mobile, 0px);
    width: 100%;
  }

  .product-variant-picker__group {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing--xs);
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .product-variant-picker__group--size {
    gap: var(--spacing--2xs);
  }

  /* A <legend> sits outside the fieldset's flex flow, so the group gap never
     reaches it. Give it the size group's 12px and drop the UA side padding so
     it starts on the same line as the other labels. */
  .product-variant-picker__group > legend {
    margin-block-end: var(--spacing--2xs);
    padding-inline: 0;
  }

  .product-variant-picker__label-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--2xs);
    justify-content: space-between;
    width: 100%;
  }

  .product-variant-picker__label-value {
    font-weight: 400;
  }

  .product-variant-picker__material {
    align-items: center;
    display: inline-flex;
    gap: var(--spacing--4xs);
  }

  .product-variant-picker__material-details {
    position: relative;
  }

  .product-variant-picker__material-info {
    align-items: center;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    list-style: none;
    padding: 0;
  }

  .product-variant-picker__material-info::-webkit-details-marker {
    display: none;
  }

  .product-variant-picker__material-info:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-variant-picker__material-info-icon {
    --icon-size: 16px;
  }

  /* The containing block is the 16px <details> around the icon, so without an
     explicit width the absolutely positioned box shrink-wraps to min-content
     and renders one word per line. Cap against the viewport for small screens. */
  .product-variant-picker__material-tooltip {
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
    color: var(--color-text--primary);
    max-width: calc(100vw - 2 * var(--spacing--sm));
    padding: var(--spacing--xs);
    position: absolute;
    right: 0;
    top: calc(100% + var(--spacing--4xs));
    width: 240px;
    z-index: 2;
  }

  .product-variant-picker__size-link {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-text--primary);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--body-sm--size);
    font-weight: 500;
    gap: var(--spacing--4xs);
    line-height: normal;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-underline-position: from-font;
  }

  .product-variant-picker__size-link:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-variant-picker__size-link-icon {
    /* The chevron glyph fills a quarter of its viewBox width, so the box has to
       run larger than the 5 × 8 mark it draws. */
    --icon-size: 16px;
  }

  .product-variant-picker__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--4xs);
  }

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

  /* 52 × 63 mobile (6 per row in 335px), 56 × 69 desktop (7 per row in the
     429px form column, matching the design). */
  .product-variant-picker__swatch {
    background-color: var(--color-surface--brand);
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    height: 63px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: 52px;
  }

  .product-variant-picker__swatch--selected {
    border-color: var(--color-border--primary);
  }

  .product-variant-picker__swatch:focus-visible {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-variant-picker__swatch-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .product-variant-picker__swatch--unavailable::after {
    background-color: rgb(255 255 255 / 45%);
    content: '';
    inset: 0;
    position: absolute;
  }

  .product-variant-picker__swatch-unavailable-mark {
    background-color: var(--color-brand--charcoal);
    height: 1px;
    left: 10%;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 80%;
    z-index: 1;
  }

  .product-variant-picker__swatch--more {
    align-items: center;
    background-color: var(--color-surface--brand);
    color: var(--color-text--primary);
    display: inline-flex;
    font-size: var(--body-xs--size);
    font-weight: 500;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .product-variant-picker__swatch--desktop-only {
    display: none;
  }

  .product-variant-picker__sizes {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing--3xs);
    width: 100%;
  }

  .product-variant-picker__size {
    align-items: center;
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 0;
    padding-block: var(--spacing--3xs);
    padding-inline: var(--spacing--xs);
    text-align: center;
  }

  .product-variant-picker__size:has(input:checked) {
    background-color: var(--color-surface--brand);
    border-color: var(--color-border--primary);
  }

  .product-variant-picker__size:focus-within {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-variant-picker__size-name {
    color: var(--color-text--primary);
  }

  .product-variant-picker__size-meta {
    color: var(--color-text--secondary);
    font-size: var(--body-xs--size);
    line-height: normal;
  }

  .product-variant-picker__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
    width: 100%;
  }

  /* Every text-based option (pack size, and colour when there are no swatch
     images) uses the size tile so the form reads as one control set. Tiles
     grow to fill the row and wrap once they hit the min width. */
  .product-variant-picker__option {
    align-items: center;
    background-color: var(--color-surface--primary);
    border: 1px solid var(--color-border--secondary);
    border-radius: var(--radius--sm);
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 96px;
    padding-block: var(--spacing--3xs);
    padding-inline: var(--spacing--xs);
    text-align: center;
  }

  .product-variant-picker__option:has(input:checked) {
    background-color: var(--color-surface--brand);
    border-color: var(--color-border--primary);
  }

  .product-variant-picker__option:focus-within {
    outline: 2px solid var(--color-border--primary);
    outline-offset: 2px;
  }

  .product-variant-picker__option-name {
    color: var(--color-text--primary);
  }

  /* Out of stock for the current combination of the other options. Same
     language as the colourway swatches — faded, with a diagonal strike.
     Drawn as an SVG line rather than a CSS gradient because gradients do not
     antialias their colour stops, so a diagonal across the tile stair-steps.
     preserveAspectRatio="none" stretches the line corner to corner whatever
     the tile's proportions are, and non-scaling-stroke keeps it 1px while
     that stretch happens. The mark is always in the DOM so availability
     changes are a single attribute toggle rather than a DOM rewrite.
     Tiles stay selectable, so the buy button can explain why. */
  .product-variant-picker__strike {
    display: none;
  }

  .product-variant-picker__size[data-unavailable],
  .product-variant-picker__option[data-unavailable] {
    border-color: var(--color-border--secondary);
    position: relative;
  }

  .product-variant-picker__size[data-unavailable]
    .product-variant-picker__size-name,
  .product-variant-picker__size[data-unavailable]
    .product-variant-picker__size-meta,
  .product-variant-picker__option[data-unavailable]
    .product-variant-picker__option-name {
    opacity: 0.45;
  }

  .product-variant-picker__size[data-unavailable]
    .product-variant-picker__strike,
  .product-variant-picker__option[data-unavailable]
    .product-variant-picker__strike {
    display: block;
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  .product-variant-picker__strike-line {
    display: block;
    height: 100%;
    opacity: 0.55;
    width: 100%;
  }

  .product-variant-picker__strike-line line {
    stroke: var(--color-border--primary);
    stroke-width: 1;
  }

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

  @media screen and (min-width: 1024px) {
    .product-variant-picker {
      gap: var(--spacing--xl);
    }

    .product-variant-picker__swatch {
      height: 69px;
      width: 56px;
    }

    .product-variant-picker__swatch--desktop-only {
      display: block;
    }

    .product-variant-picker__swatch--more-mobile-only {
      display: none;
    }
  }

  /* Desktop padding; the base rules above carry the mobile values. */
  @media screen and (min-width: 768px) {
    .product-variant-picker {
      padding-block: var(--padding-block-start, 20px)
        var(--padding-block-end, 0px);
      padding-inline: var(--padding-inline-start, 0px)
        var(--padding-inline-end, 0px);
    }
  }
/* END_SNIPPET:product-variant-picker */

/* START_SNIPPET:promo-countdown (INDEX:190) */
/* Figma sets the countdown's copy a step above a plain message on mobile —
     Button/2xs against Eyebrow/xs — so it holds its own beside the chips.
     Redefining the size var beats fighting .promo-bar-text on specificity. */
  .promo-countdown {
    --promo-bar-text-size: var(--promo-bar-countdown-size);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--3xs);
    justify-content: center;
  }

  .promo-countdown__heading,
  .promo-countdown__text-after {
    white-space: nowrap;
  }

  .promo-countdown__timer {
    align-items: center;
    display: flex;
    gap: var(--spacing--4xs);
  }

  /* The chip inverts the bar: its fill is the bar's text colour and its text is
     the bar's background, so a merchant recolouring the bar gets a legible chip
     for free. */
  .promo-countdown__chip {
    align-items: center;
    background-color: var(--promo-bar-text, var(--color-surface--primary));
    border-radius: var(--radius--md);
    color: var(--promo-bar-bg, var(--color-brand--blue));
    display: inline-flex;
    font-family: var(--font-body--family);
    font-size: var(--promo-bar-value-size, 13px);
    font-weight: 600;
    justify-content: center;
    line-height: 1.4;
    padding-block: var(--spacing--4xs);
    padding-inline: var(--spacing--3xs);
    white-space: nowrap;
  }

  /* Chips size to their content, so a single digit gives a narrower chip — as
     Figma draws it. Tabular figures keep same-length values from shifting; the
     row does step once a minute as the seconds cross 10 to 9, which is the
     trade the design asks for. */
  .promo-countdown__value {
    font-variant-numeric: tabular-nums;
  }

  @media screen and (min-width: 768px) {
    .promo-countdown__chip {
      padding-inline: var(--spacing--2xs);
    }
  }
/* END_SNIPPET:promo-countdown */

/* START_SNIPPET:promo-message (INDEX:191) */
.promo-message__text {
    text-wrap: balance;
  }
/* END_SNIPPET:promo-message */

/* START_SNIPPET:quick-filter-item (INDEX:192) */
.quick-filter-item {
    flex-shrink: 0;
    text-decoration: none;
  }

  /* Width comes from the parent section's card_size setting. */
  .quick-filter-item--lifestyle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: var(--quick-filter-card-width, 160px);
  }

  .quick-filter-item__media {
    aspect-ratio: 1 / 1;
    background-color: var(--color-surface--secondary);
    border-radius: var(--radius--sm);
    overflow: hidden;
    width: 100%;
  }

  .quick-filter-item__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  /* Block, not flex: the arrow has to trail the last word of a wrapped label
     rather than being laid out as its own flex item at the end of the row. */
  .quick-filter-item__label {
    color: var(--color-text--primary);
    display: block;
    text-transform: capitalize;
  }

  .quick-filter-item__icon {
    --icon-size: 24px;

    vertical-align: middle;
  }

  /* Capitalisation comes from .font-button-xs. */
  .quick-filter-item--tag {
    align-items: center;
    background-color: var(--color-surface--brand);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    display: inline-flex;
    padding: var(--spacing--3xs) var(--spacing--2xs);
    white-space: nowrap;
  }

  /* No border to darken any more, so the tint carries the hover instead. */
  .quick-filter-item--tag:hover {
    background-color: color-mix(
      in srgb,
      var(--color-surface--brand) 94%,
      var(--color-brand--charcoal)
    );
  }

  /* Horizontal product card: portrait cut-out, then the label and its arrow.
     The tint is not a theme surface token — it is the Figma value, exposed as a
     variable so a section can retint the row without touching this snippet. */
  .quick-filter-item--product {
    align-items: center;
    background-color: var(--quick-filter-product-background, #e7edf5);
    border-radius: var(--radius--sm);
    color: var(--color-text--primary);
    display: inline-flex;
    gap: var(--spacing--xs);
    padding-inline: var(--spacing--3xs) var(--spacing--sm);
    white-space: nowrap;
  }

  .quick-filter-item--product:hover {
    background-color: color-mix(
      in srgb,
      var(--quick-filter-product-background, #e7edf5) 94%,
      var(--color-brand--charcoal)
    );
  }

  /* Portrait, and the card takes its height from it — no padding-block. */
  .quick-filter-item__media--product {
    aspect-ratio: auto;
    background-color: transparent;
    flex-shrink: 0;
    height: 64px;
    width: 56px;
  }

  /* Cut-outs, so fit the whole product in the box rather than cropping it. */
  .quick-filter-item__image--product {
    object-fit: contain;
  }

  @media screen and (max-width: 767px) {
    .quick-filter-item--lifestyle {
      width: var(--quick-filter-card-width, 140px);
    }
  }
/* END_SNIPPET:quick-filter-item */

/* START_SNIPPET:rich-text-block (INDEX:193) */
.rich-text-block {
    box-sizing: border-box;
    color: var(--color-text--primary);
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    .rich-text-block {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
    }
  }

  .rich-text-block--max-width-narrow {
    max-width: 36rem;
  }

  .rich-text-block--max-width-normal {
    max-width: 48rem;
  }

  .rich-text-block--max-width-none {
    max-width: none;
  }

  .rich-text-block :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text--primary);
    font-family: var(--font-heading--family);
    font-weight: var(--title-md--weight);
    line-height: var(--title-md--line-height);
    margin-block: var(--spacing--md) var(--spacing--xs);
  }

  .rich-text-block h1 {
    font-size: var(--title-xl--size);
  }

  .rich-text-block h2 {
    font-size: var(--title-lg--size);
  }

  .rich-text-block h3 {
    font-size: var(--title-md--size);
  }

  .rich-text-block h4,
  .rich-text-block h5,
  .rich-text-block h6 {
    font-size: var(--title-sm--size);
  }

  .rich-text-block :is(p, ul, ol, blockquote) {
    margin-block: 0 var(--spacing--sm);
  }

  .rich-text-block :is(ul, ol) {
    padding-inline-start: var(--spacing--md);
  }

  .rich-text-block li {
    margin-block-end: var(--spacing--3xs);
  }

  .rich-text-block a {
    color: var(--color-brand--blue);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .rich-text-block a:hover {
    text-decoration-thickness: 2px;
  }

  .rich-text-block :is(strong, b) {
    font-weight: var(--body-md--weight-bold);
  }

  .rich-text-block blockquote {
    border-inline-start: 2px solid var(--color-border--secondary);
    color: var(--color-text--secondary);
    padding-inline-start: var(--spacing--sm);
  }

  .rich-text-block :is(img, video, iframe) {
    display: block;
    height: auto;
    max-width: 100%;
  }

  .rich-text-block iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    width: 100%;
  }

  .rich-text-block table {
    border-collapse: collapse;
    margin-block: var(--spacing--sm);
    width: 100%;
  }

  .rich-text-block :is(th, td) {
    border: 1px solid var(--color-border--secondary);
    padding: var(--spacing--3xs) var(--spacing--2xs);
    text-align: start;
  }

  .rich-text-block > :first-child {
    margin-block-start: 0;
  }

  .rich-text-block > :last-child {
    margin-block-end: 0;
  }
/* END_SNIPPET:rich-text-block */

/* START_SNIPPET:scrolling-usp-item (INDEX:194) */
.scrolling-usp-item {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--scrolling-usp-item-gap, var(--spacing--2xs));
    text-decoration: none;
    text-transform: var(--scrolling-usp-item-text-transform, none);
    white-space: nowrap;
  }

  .scrolling-usp-item__icon {
    flex-shrink: 0;
    height: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
    width: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
  }

  .scrolling-usp-item__icon--asset {
    display: inline-flex;
    line-height: 0;
  }

  .scrolling-usp-item__icon--asset svg {
    height: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
    width: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
  }

  .scrolling-usp-item__icon-badge {
    align-items: center;
    background-color: var(--color-brand--charcoal);
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    height: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
    justify-content: center;
    width: var(
      --scrolling-usp-item-icon-width-mobile,
      var(--scrolling-usp-item-icon-width, 32px)
    );
  }

  .scrolling-usp-item__icon-svg {
    --icon-size: calc(
      var(
          --scrolling-usp-item-icon-width-mobile,
          var(--scrolling-usp-item-icon-width, 32px)
        ) *
        0.5
    );
    color: var(--color-text--invert);
  }

  @media screen and (min-width: 768px) {
    .scrolling-usp-item__icon,
    .scrolling-usp-item__icon--asset svg,
    .scrolling-usp-item__icon-badge {
      height: var(--scrolling-usp-item-icon-width, 32px);
      width: var(--scrolling-usp-item-icon-width, 32px);
    }

    .scrolling-usp-item__icon-svg {
      --icon-size: calc(var(--scrolling-usp-item-icon-width, 32px) * 0.5);
    }
  }
/* END_SNIPPET:scrolling-usp-item */

/* START_SNIPPET:typography-block (INDEX:211) */
.typography-block {
    box-sizing: border-box;
    color: var(--typography-color);
    margin-block: 0;
    margin-inline: var(--typography-margin-inline, 0);
    max-width: min(100%, var(--typography-max-width-value, 100%));
    padding-block: var(--padding-block-start, 0px) var(--padding-block-end, 0px);
    padding-inline: var(--padding-inline-start, 0px)
      var(--padding-inline-end, 0px);
    text-align: var(--typography-text-align, start);
    text-transform: var(--typography-text-transform);
    text-wrap: var(--typography-text-wrap);
    width: var(--size-style-width, fit-content);
  }

  @media screen and (max-width: 767px) {
    .typography-block {
      padding-block: var(--padding-block-start-mobile, 0px)
        var(--padding-block-end-mobile, 0px);
      padding-inline: var(--padding-inline-start-mobile, 0px)
        var(--padding-inline-end-mobile, 0px);
      width: var(
        --size-style-width-mobile,
        var(--size-style-width, fit-content)
      );
    }
  }

  .typography-block :is(p, h1, h2, h3, h4, h5, h6, li, span, strong, em) {
    color: inherit;
  }

  /* Rich text supplies its own p/h1-h6, so those elements take the block's type
     styles rather than the browser's heading sizes */
  .typography-block > :is(p, h1, h2, h3, h4, h5, h6) {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  .typography-block > * + * {
    margin-block-start: 1em;
  }

  .typography-block > :first-child {
    margin-block-start: 0;
  }

  .typography-block > :last-child {
    margin-block-end: 0;
  }

  .typography-block--max-width-narrow {
    --typography-max-width-value: 36rem;
  }

  .typography-block--max-width-normal {
    --typography-max-width-value: 48rem;
  }

  .typography-block--max-width-none {
    --typography-max-width-value: 100%;
  }

  .typography-block--wrap-pretty {
    text-wrap: pretty;
  }

  .typography-block--wrap-balance {
    text-wrap: balance;
  }

  .typography-block--wrap-nowrap {
    text-wrap: nowrap;
  }

  /* Lock to the mobile (base) token size across breakpoints. Points at the
     --size-mobile tokens rather than repeating their values: the literals
     that used to live here silently went stale whenever the scale moved. */
  .typography-block--same-size.font-title-display {
    --title-display--size: var(--title-display--size-mobile);
  }

  .typography-block--same-size.font-title-xxl {
    --title-xxl--size: var(--title-xxl--size-mobile);
  }

  .typography-block--same-size.font-title-xl {
    --title-xl--size: var(--title-xl--size-mobile);
  }

  .typography-block--same-size.font-title-lg {
    --title-lg--size: var(--title-lg--size-mobile);
  }

  .typography-block--same-size.font-title-md {
    --title-md--size: var(--title-md--size-mobile);
  }

  .typography-block--same-size.font-title-sm {
    --title-sm--size: var(--title-sm--size-mobile);
  }

  .typography-block--same-size.font-body-xl {
    --body-xl--size: 18px;
  }

  .typography-block--same-size.font-body-lg {
    --body-lg--size: 16px;
  }

  .typography-block--same-size.font-body-md {
    --body-md--size: 14px;
  }

  .typography-block--same-size.font-body-sm {
    --body-sm--size: 12px;
  }

  .typography-block--same-size.font-body-xs {
    --body-xs--size: 11px;
  }
/* END_SNIPPET:typography-block */