/* ===========================================================================
   transplant.css — the theme-owned layer, loaded last.

   reference.css is the reference's own stylesheet and styles every lifted surface.
   This file covers what the reference never had to: the platform surfaces (cart
   page + drawer, quickview, filters, account, search, blog) arrive in the base
   theme's class vocabulary, the platform's JS toggles state classes (.hidden,
   .loading, .transparent, .price--on-sale, .disabled) that need a visible half, and
   a merchant's data brings shapes the reference's demo never had (four menu levels,
   an uploaded logo, a long menu). Every rule is written in the reference's tokens
   (--c-*, --fs-*, --tracking-*), so a colour change in the theme editor reaches
   these surfaces too.

    1. Platform utilities + base-theme variable bridge
    2. Header additions (wrapper, logo sizes, dropdowns, nav overflow)
    3. Drawers (menu accordions, search, filters, cart)
    4. Homepage additions (hero, ribbon speed, rail arrows)
    5. Product card (quick-view contract, grid items, states)
    6. Product page (gallery track, price states, size chips, quantity, loading)
    7. Collection (toolbar, filter chips, empty state, pagination)
    8. Cart (page + drawer skin of the base cart template)
    9. Quickview modal
   10. Content pages (rte, page, blog, article, search, 404, list-collections, stores)
   11. Platform-rendered controls (.btn aliases, promo UI, challenge, currency)
   12. Footer additions
   13. Motion kill-switch + reduced motion
   =========================================================================== */

/* ── 1. Platform utilities + base-theme variable bridge ─────────────────────
   The base component sheets (cart, price, quickview, account) paint from the base
   theme's comma-triplet variables. Mapped here to this theme's ivory and cocoa so
   those surfaces sit on the same paper as everything else. */
:root {
  --color-foreground: 43, 32, 28;
  --color-background: 251, 248, 243;
  --color-base-text: 43, 32, 28;
  --color-base-background-1: 251, 248, 243;
  --color-base-background-2: 255, 255, 255;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 43, 32, 28;
  --color-base-accent-1: 103, 66, 56;
  --color-base-accent-2: 103, 66, 56;
  --color-button: 103, 66, 56;
  --color-button-text: 255, 255, 255;
  --color-link: 103, 66, 56;
  --color-card-hover: 43, 32, 28;
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
  --page-width: var(--container);
}

/* author display rules (.btn, .sizes …) would otherwise beat the attribute */
[hidden] { display: none !important; }
.hidden { display: none !important; }
.hide { display: none !important; }
.visibility-hidden { visibility: hidden; }
html.no-js .no-js-hidden { display: none !important; }
.list-unstyled { margin: 0; padding: 0; list-style: none; }
.break { word-break: break-word; }
.right { text-align: right; }
.visually-hidden--inline { margin: 0; height: 1em; }
@media (max-width: 749px) { .small-hide { display: none !important; } }
@media (min-width: 750px) and (max-width: 989px) { .medium-hide { display: none !important; } }
@media (min-width: 990px) { .large-up-hide { display: none !important; } }

html.dres-locked { overflow: hidden; }
body { background-color: var(--c-bg); }

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  padding: 0.75rem 1.25rem; background-color: var(--c-ink); color: var(--c-bg);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.skip-link:focus { top: 0.75rem; }
main:focus { outline: none; }

/* The reference's phone layouts collapse to one bare column, and a bare 1fr is
   minmax(auto, 1fr): the column grows to its widest child. Platform widgets injected
   after load (the promotion app's tag strip on the product page is ~825px) would then
   widen the whole page — the tracks are pinned to minmax(0, 1fr) in reference.css;
   the platform's own blocks are held to their column here. */
.pdp__info, .feature__info, .band__copy, .qv__info { min-width: 0; }
.pdp__info > *, .feature__info > * { max-width: 100%; }

.wrap--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
@media (min-width: 900px) { .wrap--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter-lg)); } }

/* ── 2. Header additions ───────────────────────────────────────────────────── */
/* the section wrapper holds the announcement, the header and its drawers; it must
   not box them, or the sticky header could only stick inside this wrapper */
.header-section { display: contents; }
.announce__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.header[data-sticky="none"] { position: relative; }

/* the built-in mark reads at 0.75 of the logo_height setting (30px by default),
   0.6 once stuck and on phones — the reference's 30 / 24 / 24 */
.header { --mark-h: calc(var(--logo-h, 40px) * 0.75); }
.header.is-stuck { --mark-h: calc(var(--logo-h, 40px) * 0.6); }
@media (max-width: 899px) { .header { --mark-h: calc(var(--logo-h, 40px) * 0.6); } }

/* an uploaded logo is drawn whole at logo_height, capped by the same setting */
.logo--image { display: flex; align-items: center; justify-content: center; min-width: 0; }
.logo--image img {
  height: var(--logo-h, 40px); max-height: var(--logo-max-height, 48px); width: auto;
  max-width: min(52vw, 20rem); object-fit: contain;
  transition: height var(--dur) var(--ease);
}
.header.is-stuck .logo--image img { height: calc(var(--logo-h, 40px) * 0.8); }
@media (max-width: 899px) { .header .logo--image img { height: min(var(--logo-h, 40px), 2.25rem); } }

.cart-count .js-content-cart-count { display: block; }

/* the nav row: the list lays its items straight into the reference's centred flex row */
.header__navlist { display: contents; }
.header__navitem { position: relative; }
.header__nav .header__navitem > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.header__nav .header__navitem > a .icon { width: 0.7rem; height: 0.7rem; transition: transform var(--dur) var(--ease); }
.header__navitem.has-dropdown:hover > a .icon,
.header__navitem.has-dropdown:focus-within > a .icon { transform: rotate(180deg); }

/* dropdowns — the reference's nav is flat; a menu with children opens an ivory panel */
.navdrop {
  position: absolute; top: calc(100% + 0.55rem); left: 50%; z-index: 5;
  min-width: 15rem; padding: 1rem 1.5rem 1.15rem;
  background-color: var(--c-bg); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); box-shadow: var(--shadow-pop);
  text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* the hover bridge across the gap under the link */
.navdrop::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
.header__navitem:hover > .navdrop,
.header__navitem:focus-within > .navdrop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
/* reference.css sets every `.header__nav a` as a tracked caps link with an underline
   on hover — the panels restate their own list type */
.navdrop__list, .navdrop__sub { display: grid; }
.header__nav .navdrop a {
  display: block; padding: 0.4rem 0; border-bottom: 0;
  font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.02em; text-transform: none;
  line-height: 1.4; color: var(--c-ink-muted); transition: color var(--dur) var(--ease);
}
.header__nav .navdrop a:hover { color: var(--c-accent); border-bottom-color: transparent; }
.header__nav .navdrop [lang="zh"] { margin-left: 0.3rem; font-size: 0.9em; color: var(--c-ink-subtle); }
.header__nav .navdrop .navdrop__link--head {
  margin-bottom: 0.35rem; padding-bottom: 0.6rem; border-bottom: var(--border-width) solid var(--c-line);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink);
}
.navdrop__sub--deep { margin: 0 0 0.3rem 0.1rem; padding-left: 0.8rem; border-left: var(--border-width) solid var(--c-line); }
.navdrop--cols { min-width: 28rem; }
.header__nav .navdrop--cols .navdrop__list, .header__nav .navdrop--mega .navdrop__list { display: block; column-gap: 2.5rem; }
.header__nav .navdrop--cols .navdrop__list { columns: 2; }
.header__nav .navdrop--mega .navdrop__list { columns: 12rem 5; }
.navdrop--cols .navdrop__item, .navdrop--mega .navdrop__item { break-inside: avoid; }
.navdrop--mega .navdrop__item:has(.navdrop__sub) { margin-bottom: 1rem; }
/* a menu with grandchildren opens as a full-width panel of columns under the header */
.header__nav { position: static; }
.header__navitem:has(> .navdrop--mega) { position: static; }
.navdrop--mega { left: var(--gutter-lg); right: var(--gutter-lg); top: 100%; min-width: 0; padding: 1.75rem 2rem 2rem; transform: translate(0, 6px); }
.header__navitem:hover > .navdrop--mega, .header__navitem:focus-within > .navdrop--mega { transform: none; }

/* a menu too long for one line collapses to the menu button + drawer */
@media (min-width: 900px) {
  .header-section.nav-overflow .header__nav { display: none; }
  .header-section.nav-overflow .header__menu { display: grid; }
}

/* ── 3. Drawers ─────────────────────────────────────────────────────────────── */
.drawer__panel { overscroll-behavior: contain; }

/* menu drawer — the reference's serif rows; a menu with children is a native accordion */
.drawer__nav > li > a, .drawer__group > summary { color: var(--c-ink); }
.drawer__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.95rem; border-bottom: var(--border-width) solid var(--c-line);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 500;
  cursor: pointer; list-style: none;
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary > span { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 1rem; }
.drawer__group > summary [lang="zh"] { font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-ink-muted); }
.drawer__group > summary .icon { flex: none; transition: transform var(--dur) var(--ease); }
.drawer__group[open] > summary .icon { transform: rotate(180deg); }
.drawer__nav a:hover, .drawer__group > summary:hover { color: var(--c-accent); }
.drawer__nav .drawer__children { padding: 0.35rem 0 0.8rem 0.9rem; border-bottom: var(--border-width) solid var(--c-line); }
.drawer__nav .drawer__children a {
  padding-block: 0.45rem; border-bottom: 0;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--c-ink-muted);
}
.drawer__nav .drawer__grandchildren { padding-left: 0.9rem; }
.drawer__utility { display: grid; gap: 0.1rem; padding: 0.75rem var(--gutter) 0; }
.drawer__utility a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-ink-muted);
}
.drawer__utility a:hover { color: var(--c-accent); }
.drawer__currency { padding: 1rem var(--gutter) 0; }
.drawer--left .drawer__foot { margin-top: auto; }
.drawer--left .drawer__foot .eyebrow { margin-bottom: 0.25rem; }
.drawer--left .drawer__foot p:not(.eyebrow) { color: var(--c-ink-muted); }

/* search drawer — a real form; hits are the search page's own cards */
.drawer--top form.drawer__head { margin: 0; }
.search input::-webkit-search-cancel-button { opacity: 0.45; }
.search-hits[aria-busy="true"] { opacity: 0.5; transition: opacity var(--dur) var(--ease); }
.search-hit__title { line-height: 1.35; }
.search-hit__price .money { white-space: nowrap; }
.search-all { padding: 0 var(--gutter) var(--gutter); }

/* filter drawer (snippets/collection-filters) — open accordions of square chips */
.drawer--filter .drawer__body { overflow-y: auto; padding-block: 0.25rem 1rem; }
.facet summary .facet__count {
  min-width: 1.15rem; height: 1.15rem; margin-left: auto; margin-right: 0.75rem; padding: 0 0.3rem;
  display: inline-grid; place-items: center; background-color: var(--c-ink); color: var(--c-bg);
  font-size: 0.625rem; letter-spacing: 0;
}
.facet summary .facet__count[hidden] { display: none; }
.facet__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.facet__chip { position: relative; display: inline-flex; cursor: pointer; }
.facet__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.facet__chip .size { gap: 0.4rem; grid-auto-flow: column; }
.facet__n { color: var(--c-ink-subtle); font-size: 0.85em; letter-spacing: 0; }
.facet__checkbox:checked + .size { border-color: var(--c-ink); background-color: var(--c-ink); color: var(--c-bg); }
.facet__checkbox:checked + .size .facet__n { color: inherit; opacity: 0.7; }
.facet__checkbox:focus-visible + .size { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.facet__price { display: flex; align-items: flex-end; gap: 0.75rem; }
.facet__price label { display: grid; gap: 0.35rem; flex: 1; min-width: 0; }
.facet__price label > span { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.facet__price > span { padding-bottom: 0.85rem; color: var(--c-ink-subtle); }
.facet__price input {
  width: 100%; min-height: 2.75rem; padding: 0 0.8rem; border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius-input); background-color: var(--c-surface); color: var(--c-ink); font-size: var(--fs-small);
  -moz-appearance: textfield; appearance: textfield;
}
.facet__price input::-webkit-outer-spin-button, .facet__price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.facet__price input:focus { outline: none; border-color: var(--c-ink); }
.facets__foot { display: flex; align-items: center; gap: 1.25rem; }
.facets__foot .btn { flex: 1; }

/* cart drawer — the shared cart template, in the reference's right-hand drawer */
.drawer--cart .drawer__panel { overflow: hidden; }
.drawer--cart .drawer__head { position: relative; z-index: 4; }
.drawer__count { font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-ink-muted); }
.drawer--cart .drawer__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.drawer--cart .drawer__body > #cart-template { flex: 1; display: flex; flex-direction: column; }
.drawer--cart .drawer__body #cart-form { flex: 1; display: flex; flex-direction: column; }
/* the head (title + close) stays above the loading wash — a slow /new_cart must never
   trap the shopper in the drawer */
.drawer__loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background-color: var(--c-veil-soft);
}
.drawer__loading.hidden { display: none !important; }
.drawer__loading .spinner { width: 2.5rem; height: 2.5rem; }
.drawer__loading .path { stroke: var(--c-accent); }

/* ── 4. Homepage additions ─────────────────────────────────────────────────── */
/* one photograph fills the whole fold */
@media (min-width: 900px) {
  .hero--single .hero__track { grid-auto-columns: 100%; }
}
.hero__frame { margin: 0; }
.hero__frame img { display: block; }
.hero__lockup h1 { margin: 0; }
/* the ribbon's speed is a section setting */
.ribbon__track[style*="--ribbon-dur"] { animation-duration: var(--ribbon-dur); }
/* rail arrows rest at their ends */
.roundbtn:disabled { opacity: 0.35; cursor: default; }
.roundbtn:disabled:hover { border-color: var(--c-line); }
.statement__text em, .hero__title em { font-style: italic; }
.feature__title a, .band__title a { color: inherit; transition: color var(--dur) var(--ease); }
.feature__title a:hover, .band__title a:hover { color: var(--c-accent); }
.feature__info .buy, .band__copy .buy { max-width: 26rem; }

/* the homepage app slots (templates/home): clipped sideways — the star-rating app's
   carousel otherwise widened the page by 20px — and gone when no app renders */
.home-apps { overflow-x: clip; }
.home-apps:not(:has(*)) { display: none; }
.home-apps:has(*) { padding-block: var(--section-y-tight); }

/* ── 5. Product card ───────────────────────────────────────────────────────── */
/* <add-to-cart-button> is layout-neutral; its button keeps the reference's round + */
.card__quickwrap { display: contents; }
.card__quick { z-index: 2; cursor: pointer; }
/* while the quick view loads, the + holds its place and a spinner turns in it (a
   click does not focus a button in every browser, so :hover alone cannot hold it) */
.card__quick.transparent { opacity: 1 !important; }
.card__quick.transparent .icon { opacity: 0; }
.card__quickwrap .loading-overlay {
  position: absolute; top: auto; left: auto; right: 0.9rem; bottom: 0.9rem; z-index: 3;
  width: 2.5rem; height: 2.5rem; min-height: 0; transform: none;
  display: grid; place-items: center; pointer-events: none;
}
.card__quickwrap .loading-overlay__spinner { width: 1.1rem; display: block; }
.card__quickwrap .loading-overlay .path { stroke: var(--c-ink); }
/* the spinner takes the icon's place, so it takes the icon's colour in each state —
   an ink spinner vanished into the ink :hover fill */
.card__quick:hover + .loading-overlay .path { stroke: var(--c-bg); }
.card__price .money { white-space: nowrap; }
.card__from { margin-right: 0.2rem; color: var(--c-ink-muted); }
.card--sample .card__quick { color: var(--c-ink); }
.grid__item { min-width: 0; display: flex; flex-direction: column; }
.grid__item > .card { flex: 1; }
.grid.is-loading { opacity: 0.4; pointer-events: none; transition: opacity var(--dur) var(--ease); }
/* the platform's no-matches line lands inside the grid when a filter empties it */
.grid > p { grid-column: 1 / -1; color: var(--c-ink-muted); }
/* the platform wishlist heart (collection/product_top) sits on the photograph's corner */
.card > .wishlist-icon-btn {
  position: absolute !important; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 2.4rem !important; height: 2.4rem; background-color: var(--c-veil); box-shadow: none;
}

/* ── 6. Product page ───────────────────────────────────────────────────────── */
/* the gallery is one scroll-snap track of every photograph (init.js §6): swipe on
   touch, drag with a mouse; reference.css still styles each picture */
.gallery__main { position: relative; min-width: 0; }
.gallery__track {
  position: relative; display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab; outline: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gallery__track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.gallery__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__slide img { display: block; -webkit-user-drag: none; }
.gallery__track:has(> .gallery__slide:only-child) { cursor: auto; }
/* phones: a small "2 / 5" plate says there is more to swipe */
.gallery__count {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 1; display: none;
  padding: 0.25rem 0.6rem; background-color: var(--c-veil); color: var(--c-ink);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (max-width: 899px) { .gallery__count { display: block; } }
/* desktop: prev / next arrows fade in while the pointer is over the photograph
   (scoped under .gallery__main so the rail arrows' disabled dimming never shows them) */
.gallery__main .gallery__arrow {
  position: absolute; top: 50%; z-index: 2; display: none; translate: 0 -50%;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gallery__arrow--prev { left: 1rem; }
.gallery__arrow--next { right: 1rem; }
@media (hover: hover) and (min-width: 900px) {
  .gallery__main .gallery__arrow { display: grid; }
  .gallery__main:hover .gallery__arrow:not(:disabled),
  .gallery__main:focus-within .gallery__arrow:not(:disabled) { opacity: 1; pointer-events: auto; }
}
/* the thumbnail strip: a column at the photograph's left on the product page
   (reference.css), a row under it elsewhere and on phones; it scrolls on its own
   when there are more thumbnails than room */
.thumbs { scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; cursor: pointer; }
@media (max-width: 899px) { .pdp__media .thumbs, .feature__media .thumbs { overflow-x: auto; } .thumb { width: 3.25rem; } }
@media (min-width: 900px) {
  .pdp__media .gallery__main { grid-column: 2; grid-row: 1; }
  .pdp__media .thumbs { height: 0; min-height: 100%; overflow-y: auto; }
  .feature__media .thumbs { overflow-x: auto; }
}

/* the buy box (snippets/buy-box) is one wrapper inside the details column; it keeps
   the column's own rhythm between the price and the form */
.buybox { display: grid; gap: 1.25rem; min-width: 0; }
/* price states: global.js toggles .price--on-sale / .price--sold-out from the variant.
   The base price sheet loads after reference.css and restyles .price — restate it */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.65rem; margin: 0; font-size: var(--fs-h3); letter-spacing: 0.04em; line-height: 1.35; color: var(--c-ink); }
.price .price__was { margin-left: 0; }
.price:not(.price--on-sale) > .price__was { display: none; }
.price--on-sale > .price-item { color: var(--c-sale); }

/* variant options — EasyStore.OptionSelectors output, dressed by init.js as the
   reference's size chips. The base product sheet's `.product-form__input
   input[type=radio] + label` (rounded, 2px, tracked) out-ranks a bare .size — so
   the reference's square chip is restated at a higher specificity */
.options.product-form__input { display: grid; gap: 1.25rem; flex: none; min-width: 0; max-width: none; margin: 0 0 0.25rem; }
.options .selector-wrapper, .options .sizes { margin: 0; padding: 0; border: 0; min-width: 0; }
.sizes fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sizes .sizes__label, .sizes legend { display: block; margin: 0 0 0.7rem; padding: 0; }
/* the wrapper's own label sits in the .sizes grid, whose gap (0.7rem, the draft's) already
   spaces it from the chips — its margin doubled that to 22px */
.sizes > .sizes__label { margin-bottom: 0; }
.sizes .sizes__label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.sizes input.sizes__radio, .sizes .sizes__row input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip-path: inset(50%);
}
.sizes .sizes__row input[type="radio"] + label.size {
  min-width: 3.25rem; height: 2.75rem; margin: 0; padding: 0 0.9rem;
  display: inline-grid; place-items: center; cursor: pointer; line-height: 1;
  border: var(--border-width) solid var(--c-line); border-radius: 0; background-color: var(--c-bg); color: var(--c-ink);
  font-size: var(--fs-small); letter-spacing: 0.06em; text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sizes .sizes__row input[type="radio"] + label.size:hover { border-color: var(--c-ink-muted); }
.sizes .sizes__row input[type="radio"]:checked + label.size { border-color: var(--c-ink); background-color: var(--c-ink); color: var(--c-bg); }
/* sold out with the current selection: the draft's struck chip, faded — the strike is
   the chip's background, which a variant picture covers, so the fade carries it */
.sizes .sizes__row input[type="radio"].disabled + label.size {
  opacity: 0.45; border-color: var(--c-line); background-color: var(--c-bg); color: var(--c-ink-muted);
  background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--c-line) 50%, transparent calc(50% + 0.5px));
}
.sizes .sizes__row input[type="radio"].disabled:checked + label.size { border-color: var(--c-ink); background-color: var(--c-bg); color: var(--c-ink-muted); }
/* "Buttons with variant image" (radio-img): OptionSelectors puts the variant's picture
   in the label (img.variant-img-label) beside the value as span.label__text. A value
   with a picture is a square tile (square, like the size chips), its name stays for
   screen readers, and the chosen one is ringed OUTSIDE the picture — the checked fill is
   hidden under it. Pictureless values in the same row stay buttons, tile-tall. */
.sizes .sizes__row input[type="radio"] + label.size.variant-img-label-wrapper { min-height: 3.75rem; }
.sizes .sizes__row input[type="radio"] + label.size:has(.variant-img-label) {
  position: relative; width: 3.75rem; min-width: 0; height: 3.75rem; padding: 0; overflow: hidden;
}
.sizes .sizes__row label.size .variant-img-label { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sizes .sizes__row label.size .variant-img-label + .label__text {
  display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sizes .sizes__row input[type="radio"]:checked:not(:focus-visible) + label.size:has(.variant-img-label) { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.sizes .sizes__row input[type="radio"]:focus-visible + label.size { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sizes .sizes__select {
  width: 100%; max-width: 22rem; min-height: 2.75rem; padding: 0 2.5rem 0 0.9rem;
  border: var(--border-width) solid var(--c-line); border-radius: var(--radius-input);
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b201c' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1rem;
  color: var(--c-ink); font-size: var(--fs-small); appearance: none; -webkit-appearance: none;
}
.variants-selector-wrapper > div.product-form__input::after,
.selector-wrapper.product-form__input::after { display: none; }

/* the buy row — the quantity wrapper and the base submit margin step aside. The draft's
   sizes and buy row are both children of the .pdp__sticky grid (gap 1.25rem); here both
   sit inside the add-to-cart <form>, a plain block, so the gap is restated (the band and
   the quick view set their own, later) */
.buybox .buy { margin-top: 1.25rem; }
.buy .product-form__quantity { display: flex; }
.buy .product-form__submit, .buy .buy__add { margin: 0; }
.product-form__input.product-form__quantity { flex: none; margin: 0; min-width: 0; }
.qty input { font-variant-numeric: tabular-nums; outline: none; }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty button .icon { pointer-events: none; }

/* the add button's in-flight state (product-form.js adds .loading) */
.btn .loading-spinner { display: none; }
.btn.loading { position: relative; pointer-events: none; }
.btn.loading .btn__text { visibility: hidden; }
.btn.loading .loading-spinner { display: grid; place-items: center; position: absolute; inset: 0; }
.btn .loading-spinner .spinner { width: 1.25rem; height: 1.25rem; }
.btn .loading-spinner .path { stroke: currentColor; }

.form__message { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--c-sale); font-size: var(--fs-small); }
.form__message.hidden { display: none !important; }

/* the merchant's description in the Details accordion */
.acc__body { font-size: var(--fs-small); line-height: 1.75; color: var(--c-ink-muted); }
.acc__body > * + * { margin-top: 0.75em; }
.acc__body ul { display: grid; gap: 0.45rem; padding: 0; list-style: none; }
.acc__body ul li { position: relative; padding-left: 1.1rem; }
.acc__body ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 1px; background-color: var(--c-accent); }
.acc__body img { height: auto; }
/* the wishlist app's button (product/button hook) sits under the buy row as the
   reference's secondary: a hairline square, full width */
.product-form .btn.wishlist {
  width: 100%; margin-top: 0.625rem; background-color: transparent; border-color: var(--c-line); color: var(--c-ink);
}
.product-form .btn.wishlist:hover { background-color: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.product-form .btn.wishlist .fa { font-size: 0.95em; }
/* the platform's full-width app hook below the product grid (reviews and the like) */
.pdp__apps:not(:empty) { margin-top: clamp(2rem, 5vw, 3.5rem); }
.pdp__sticky > [id^="sf_promo"], .pdp__sticky > #promotion-section { max-width: 100%; overflow-x: auto; }
.pdp__title { margin-top: -0.35rem; }
.band .buy { margin-top: 0.25rem; }
.related-band .rail__track:empty { display: none; }

/* share (snippets/social-sharing) — the reference's round icon buttons */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.share__label { margin-right: 0.35rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.share__link {
  position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: var(--border-width) solid var(--c-line); border-radius: 50%; background-color: var(--c-bg); color: var(--c-ink);
  transition: border-color var(--dur) var(--ease);
}
.share__link:hover { border-color: var(--c-ink); }
.share__copied {
  position: absolute; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%);
  padding: 0.3rem 0.6rem; white-space: nowrap; background-color: var(--c-ink); color: var(--c-bg);
  font-size: var(--fs-micro); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.share__copy.is-copied .share__copied { opacity: 1; }

/* ── 7. Collection ────────────────────────────────────────────────────────── */
.chead__lede.rte { max-width: 60ch; }
.chead__lede.rte > * + * { margin-top: 0.5em; }
.toolbar { align-items: center; }
.toolbar > p { margin: 0; }
.toolbar__note { flex: 1; }
.toolbar__tools { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.toolbar__btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.2rem;
  color: var(--c-ink); font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
  border-bottom: var(--border-width) solid transparent; transition: border-color var(--dur) var(--ease);
}
.toolbar__btn:hover { border-bottom-color: currentColor; }
.toolbar__badge {
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
  background-color: var(--c-ink); color: var(--c-bg); font-size: 0.625rem; letter-spacing: 0;
}
.toolbar__badge[hidden] { display: none; }
.toolbar__sort { position: relative; display: inline-flex; align-items: center; color: var(--c-ink); }
.toolbar__sort select {
  min-width: 0; padding: 0.2rem 1.4rem 0.2rem 0; border: 0; background: transparent; color: inherit;
  font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
  appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
}
.toolbar__sort select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.toolbar__sort .icon { position: absolute; right: 0; pointer-events: none; }
.toolbar__sort option { text-transform: none; letter-spacing: 0; }
@media (max-width: 699px) {
  .toolbar { column-gap: 1rem; letter-spacing: 0.12em; }
  .toolbar__note { order: 3; flex-basis: 100%; }
  .toolbar__tools { gap: 1rem; }
  .toolbar__sort { max-width: 9.5rem; }
}
.catalog__empty { display: grid; justify-items: start; gap: 1.25rem; padding-block: 1rem 2rem; color: var(--c-ink-muted); }

/* pagination (base snippet, reference look: square, hairline) */
.pagination-wrapper { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pagination .pagination__item {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.6rem;
  border: var(--border-width) solid var(--c-line); background-color: var(--c-bg); color: var(--c-ink-muted);
  font-size: var(--fs-small); letter-spacing: 0.06em; text-decoration: none;
}
.pagination .pagination__item:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pagination .pagination__item--current { border-color: var(--c-ink); background-color: var(--c-ink); color: var(--c-bg); }
.pagination .pagination__item .icon { width: 0.7rem; height: 0.7rem; }
.pagination .pagination__item--next .icon { transform: rotate(90deg); }
.pagination .pagination__item--prev .icon { transform: rotate(-90deg); }
.pagination .pagination__item::after { display: none; }

/* ── 8. Cart — the base cart template in the reference's look ──────────────
   snippets/cart-template + cart-item keep the base theme's markup ON PURPOSE:
   the platform re-renders cart-template server-side after every add / quantity /
   remove / voucher change (/new_cart*), and during local preview that response can
   come from another Dawn-family theme — the drawer must look the same either way.
   So nothing here depends on renamed classes: it skins the base vocabulary
   (.quantity, .button, .title-wrapper-with-link …) in the reference's tokens. */
.cart-page { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.chead .link { margin-top: 0.25rem; }
#cart-template, #cart-form { color: var(--c-ink); }
cart-items { display: block; }
/* the cart page and the drawer each carry their own heading */
#cart-template .title-wrapper-with-link { display: none; }
.cart__warnings { display: none; }
cart-items.is-empty .cart__warnings { display: grid; justify-items: start; gap: 1.25rem; padding-block: 1rem 2rem; }
cart-items.is-empty .cart__items, #main-cart-footer.is-empty { display: none; }
#cart-template .cart__items { padding-bottom: 0; border-bottom: 0; }
.cart__empty-text { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--c-ink); }

/* base .button family -> the reference's square small-caps .btn (primary) / hairline */
#cart-template .button, .vouchers-modal .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.9rem 2rem; border: var(--border-width) solid var(--c-accent);
  border-radius: var(--radius-button); background-color: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#cart-template .button::before, #cart-template .button::after,
.vouchers-modal .button::before, .vouchers-modal .button::after { display: none; }
#cart-template .button:hover, .vouchers-modal .button:hover { background-color: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-accent-ink); }
#cart-template .button--secondary, .vouchers-modal .button--secondary { background-color: transparent; color: var(--c-ink); border-color: var(--c-line); }
#cart-template .button--secondary:hover, .vouchers-modal .button--secondary:hover { background-color: transparent; border-color: var(--c-ink); color: var(--c-ink); }
#cart-template .button.loading { opacity: 0.6; pointer-events: none; }

.cart-items { width: 100%; border-collapse: collapse; border-spacing: 0; }
.cart-items thead th {
  padding: 0 0 0.9rem; text-align: left; border-bottom: var(--border-width) solid var(--c-line);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-ink-muted); opacity: 1;
}
.cart-items thead th.right { text-align: right; }
.cart-item td { padding-block: 1.25rem; vertical-align: top; border-bottom: var(--border-width) solid var(--c-line); }
.cart-item__media { width: 6rem; padding-right: 1.25rem; }
.cart-item__media a { display: block; background-color: var(--c-surface-2); overflow: hidden; }
.cart-item__image { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 16%; }
.cart-item__details { padding-right: 1rem; font-size: var(--fs-small); }
.cart-item__name { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--c-ink); text-decoration: none; }
.cart-item__name:hover { color: var(--c-accent); }
.cart-item__details dl { margin: 0.35rem 0 0; }
.cart-item__details dd { margin: 0; }
.product-option { font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--c-ink-muted); line-height: 1.6; }
.cart-item__quantity { white-space: nowrap; }

/* quantity stepper: the base <quantity-input class="quantity"> as the reference's .qty */
#cart-template .quantity {
  position: relative; display: inline-flex; align-items: stretch; vertical-align: middle;
  width: auto; min-height: 0; height: 2.75rem; padding: 0;
  border: var(--border-width) solid var(--c-line); border-radius: 0; background-color: var(--c-bg);
}
#cart-template .quantity::before, #cart-template .quantity::after { display: none; }
#cart-template .quantity__button {
  display: grid; place-items: center; width: 2.4rem; height: 100%; padding: 0;
  border: 0; background: none; color: var(--c-ink); cursor: pointer;
}
#cart-template .quantity__button:hover { color: var(--c-accent); }
#cart-template .quantity__button .icon { width: 0.65rem; height: 0.65rem; stroke: none; pointer-events: none; }
#cart-template .quantity__input {
  width: 2.3rem; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--c-ink);
  font: inherit; font-size: var(--fs-small); text-align: center; font-variant-numeric: tabular-nums;
  outline: none; -moz-appearance: textfield; appearance: textfield;
}
#cart-template .quantity__input::-webkit-outer-spin-button,
#cart-template .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#cart-template .quantity__input[readonly] { width: 3rem; }

/* remove / edit: small round icon buttons beside the stepper */
.cart-action-icon { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; }
.cart-action-icon.hide { display: none; }
#cart-template .cart-action-icon .button {
  width: 2.25rem; height: 2.25rem; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--c-ink-muted); box-shadow: none;
}
#cart-template .cart-action-icon .button:hover { background-color: var(--c-accent-soft); color: var(--c-ink); }
#cart-template .cart-action-icon .button svg { width: 1rem; height: 1rem; }
#cart-template .cart-action-icon .icon-remove { stroke: none; }
#cart-template .cart-action-icon .button .icon:not(.icon-remove) { fill: none; stroke: currentColor; }

.cart-item__totals { text-align: right; position: relative; font-size: var(--fs-small); }
.cart-item__price-wrapper .price { display: block; font-size: var(--fs-small); color: var(--c-ink); }
.cart-item__old-price { color: var(--c-ink-muted); }
.cart-item .loading-overlay { position: absolute; right: 0; top: 1.25rem; width: 1.5rem; }
.cart-item .loading-overlay__spinner { width: 1.5rem; }
.cart__items--disabled { pointer-events: none; opacity: 0.6; }
.discounts { margin: 0.4rem 0 0; font-size: var(--fs-micro); color: var(--c-accent); }
.discounts__discount { display: flex; align-items: center; gap: 0.35rem; }
.discounts__discount svg { width: 0.9rem; height: 0.9rem; fill: currentColor; stroke: none; }
.cart_form__error { margin-top: 1rem; }
.note.errors, .errors { color: var(--c-sale); font-size: var(--fs-small); }

/* footer block: vouchers, totals, checkout */
.cart__footer { display: flex; justify-content: flex-end; padding-top: 1.75rem; }
.cart__blocks { width: 100%; max-width: 26rem; display: grid; gap: 1rem; }
.totals { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; position: relative; }
.totals__subtotal { margin: 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); }
.totals__subtotal-value { margin: 0; font-size: var(--fs-h3); letter-spacing: 0.04em; color: var(--c-ink); }
.totals .loading-overlay { position: absolute; right: 0; top: 0; width: 1.5rem; }
.tax-note { display: block; margin-top: 0.4rem; font-size: var(--fs-micro); color: var(--c-ink-muted); }
.cart__ctas { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0.6rem; }
.cart__ctas > * + * { margin-top: 0 !important; }
#cart-template .cart__checkout-button { width: 100%; max-width: none; }
.voucher-toggle-wrapper { border: var(--border-width) solid var(--c-line); background-color: var(--c-surface); }
.voucher-toggle-content { display: grid; gap: 0.1rem; }
.voucher-toggle-title { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; }
.voucher-toggle .text-muted { color: var(--c-ink-muted); font-size: var(--fs-micro); }
discount-input .field, .vouchers-modal discount-input .field { display: flex; gap: 0.5rem; position: relative; }
discount-input .field__input, .field__input {
  flex: 1; min-width: 0; padding: 0.75rem 1rem; background-color: var(--c-surface); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); border-radius: var(--radius-input); font: inherit; font-size: var(--fs-small);
}
discount-input .field__input:focus { outline: none; border-color: var(--c-ink); }
discount-input .field__label { display: none; }
discount-input .button { padding-inline: 1.25rem; }
.subtotal-discount-label, .remove_voucher_btn { color: var(--c-accent); }
.remove_voucher_btn svg { width: 0.85rem; height: 0.85rem; fill: currentColor; vertical-align: middle; cursor: pointer; }

/* the base sheet makes the quantity cell a flex box, which pulls it out of the
   table row (cells stop sharing a height and the row rules misalign) */
@media (min-width: 750px) {
  .cart-page .cart-item td.cart-item__quantity { display: table-cell; padding-left: 1.5rem; }
}
.cart-item__quantity > quantity-input, .cart-item__quantity > .cart-action-icon { vertical-align: middle; }
.cart-item__totals, .cart-item__price-wrapper { white-space: nowrap; }

/* the platform voucher sheet loads after this one (grey pill) — out-rank it */
#cart-template .voucher-toggle-wrapper { display: block; line-height: normal; }
#cart-template .voucher-toggle {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0; padding: 0.85rem 1.1rem;
  border-radius: 0; background: transparent; color: var(--c-ink); cursor: pointer;
}
#cart-template .voucher-toggle:hover { color: var(--c-accent); }
#cart-template .voucher-toggle-content .text-muted { color: var(--c-ink-muted); }
#cart-template .voucher-toggle .icon-chevron-right { width: 1.1rem; height: 1.1rem; margin: 0 0 0 auto; stroke: currentColor; }
#cart-template .voucher-toggle-title { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); }
#cart-template .voucher-toggle .text-muted { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.02em; }
/* the base totals are headings, which reference.css sets in the display serif */
#cart-template .totals__subtotal { font-family: var(--font-body); font-weight: 500; }
#cart-template .tax-note { margin: 0.35rem 0 0; font-size: var(--fs-micro); line-height: 1.6; text-align: left; color: var(--c-ink-muted); }

/* the platform promotion widgets (cart/content_top + content_bottom app snippets) */
#cart-promotion-top:empty, #cart-promotion-section:empty { display: none; }
#cart-promotion-top, #cart-promotion-section { color: var(--c-ink); font-size: var(--fs-small); }
.drawer--cart #cart-promotion-top { margin-bottom: 1rem; }
.drawer--cart #cart-promotion-section { margin-top: 1rem; }

/* the vouchers modal (snippets/voucher-modal + the platform voucher widget). The
   platform sheets paint it and load after this file, so every rule is scoped under
   the vouchers-modal element + the #vouchers-modal id to out-rank them. The ticket
   widget is driven by --voucher-widget-* variables, re-pointed at the theme tokens. */
vouchers-modal #vouchers-modal {
  --color-background: 255, 255, 255;
  --color-foreground: 43, 32, 28;
  --voucher-widget-font-family: var(--font-body);
  --voucher-widget-theme-color: var(--c-accent);
  --voucher-widget-border: 1px solid var(--c-line);
  --voucher-widget-black: var(--c-ink);
  --voucher-widget-dark-500: var(--c-ink);
  --voucher-widget-dark-400: var(--c-ink-muted);
  --voucher-widget-dark-300: var(--c-ink-muted);
  --voucher-widget-dark-200: var(--c-ink-subtle);
  --voucher-widget-dark-100: var(--c-surface-2);
  --voucher-widget-danger: var(--c-sale);
  background-color: var(--c-bg); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); border-radius: 0;
  box-shadow: var(--shadow-pop); font-family: var(--font-body); overflow: hidden;
}
vouchers-modal #vouchers-modal-backdrop.active { background-color: var(--c-backdrop); }
vouchers-modal .vouchers-modal__header { align-items: center; padding: 1.5rem 1.75rem 0.25rem; }
vouchers-modal .vouchers-modal__heading { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); color: var(--c-ink); }
/* the close BUTTON only (`button.`) — the platform's full-screen backdrop is
   `<div id="vouchers-modal-backdrop" class="vouchers-modal__close">` (a click on it
   closes the modal), and this size on the bare class shrank it to a 40px dot */
vouchers-modal button.vouchers-modal__close { margin: 0 -0.5rem 0 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--c-ink); }
vouchers-modal button.vouchers-modal__close:hover { background-color: var(--c-accent-soft); }
vouchers-modal .vouchers-modal__close .icon { width: 1.1rem; height: 1.1rem; color: currentColor; }
vouchers-modal #vouchers-modal discount-input { padding: 1rem 1.75rem 0; }
vouchers-modal #vouchers-modal discount-input .field { align-items: stretch; gap: 0.5rem; }
vouchers-modal #vouchers-modal discount-input .field__input,
vouchers-modal #vouchers-modal .search__input {
  flex: 1; height: auto; min-height: 3rem; padding: 0.75rem 1rem; background-color: var(--c-surface); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); border-radius: 0; box-shadow: none; font-size: var(--fs-small);
}
vouchers-modal #vouchers-modal discount-input .field__input:focus { border-color: var(--c-ink); outline: none; }
vouchers-modal #vouchers-modal discount-input .button { flex: none; min-height: 3rem; padding: 0 1.5rem; }
vouchers-modal #vouchers-modal .form__message { color: var(--c-sale); font-size: var(--fs-small); }
vouchers-modal #vouchers-modal > br { display: none; }
vouchers-modal .vouchers-list-heading {
  padding: 1.5rem 1.75rem 0; font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted);
}
vouchers-modal .vouchers-list-wrapper { padding: 0 1.75rem 1.5rem; margin: 0.9rem 0 0; row-gap: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; }
vouchers-modal .empty-vouchers_placeholder { min-height: 12rem; padding: 0 1.75rem 1.5rem; color: var(--c-ink-muted); font-size: var(--fs-small); }
vouchers-modal .voucher-widget { color: var(--c-ink); }
vouchers-modal .voucher-widget-mask, vouchers-modal .voucher-widget-body-frame { background-color: var(--c-bg); }
vouchers-modal .voucher-widget-icon { color: var(--c-accent-ink); }
vouchers-modal .voucher-widget-header { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--c-ink); }
vouchers-modal .voucher-widget-text-muted { color: var(--c-ink-muted); }
vouchers-modal .voucher-widget-badge { background-color: var(--c-surface); color: var(--c-ink-muted); border: 1px solid var(--c-line); }
vouchers-modal .voucher-widget-counter { color: var(--c-accent-ink); }
vouchers-modal .voucher-widget-button {
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75em;
  color: var(--c-accent); border-color: var(--c-accent); border-radius: 0;
}
vouchers-modal .voucher-widget-button:hover { background-color: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
vouchers-modal .voucher-widget-list__item.disabled { opacity: 0.55; }

/* on phones the cart table re-flows into rows */
@media (max-width: 749px) {
  .cart-items thead { display: none; }
  .cart-items, .cart-items tbody { display: block; }
  .cart-item {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.6rem;
    padding-block: 1.1rem; border-bottom: var(--border-width) solid var(--c-line);
  }
  .cart-item td { display: block; padding: 0; border: 0; }
  .cart-item__media { width: auto; grid-row: span 2; padding: 0; }
  .cart-item__details { padding: 0; }
  .cart-item__quantity { grid-column: 2 / -1; }
  .cart__blocks { max-width: none; }
}

/* inside the ~420px drawer the page layout folds into compact rows */
.drawer--cart .cart-items thead { display: none; }
.drawer--cart .cart-items, .drawer--cart .cart-items tbody { display: block; }
.drawer--cart .cart-item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 0.9rem; row-gap: 0.55rem;
  padding-block: 1rem; border-bottom: var(--border-width) solid var(--c-line);
}
.drawer--cart .cart-item td { display: block; padding: 0; border: 0; width: auto; min-width: 0; max-width: 100%; }
.drawer--cart .cart-item__media { grid-row: span 2; }
.drawer--cart .cart-item__details { grid-column: 2; padding-right: 0; }
.drawer--cart .cart-item__totals.small-hide { display: none !important; }
.drawer--cart .cart-item__totals.medium-hide { display: block !important; grid-column: 3; grid-row: 1; }
.drawer--cart .cart-item__quantity { display: flex; align-items: center; gap: 0.25rem; grid-column: 2 / -1; padding: 0; }
.drawer--cart #cart-template .quantity { height: 2.4rem; }
.drawer--cart #cart-template .quantity__button { width: 2rem; }
.drawer--cart #cart-template .quantity__input { width: 2rem; }
.drawer--cart #main-cart-footer { margin-top: auto; }
.drawer--cart .cart__footer { padding-top: 1.25rem; }
.drawer--cart .cart__blocks { max-width: none; }
.drawer--cart cart-items.is-empty .cart__warnings { padding-block: 0.5rem 1rem; }
.drawer--cart .cart__empty-text { font-size: var(--fs-h3); }
#main-cart-footer, .cart__footer { border-top: 0; }

/* ── 9. Quickview modal ────────────────────────────────────────────────────── */
#product-quickview-modal[open] {
  --color-foreground: 43, 32, 28;
  --color-background: 251, 248, 243;
  background-color: var(--c-bg); color: var(--c-ink);
  border: 0; border-radius: 0; box-shadow: var(--shadow-pop);
  width: min(56rem, calc(100% - 2rem)); max-width: none; max-height: calc(100vh - 2rem); overflow-y: auto;
  top: 50%;
  /* keep a real box while the platform renders the body (it can take seconds):
     with no height the open modal is a thin line and reads as "nothing happened" */
  min-height: min(30rem, 80vh);
  animation: qv-rise var(--dur) var(--ease) both;
}
/* product-quickview.js only toggles [open] (display none → block), so the entrance is
   a keyframe animation, which starts every time the element appears; it moves the
   independent `translate` property, leaving the base sheet's centring transform alone */
#product-quickview-modal[open] + .product-quickview-modal-backdrop { background-color: var(--c-backdrop); animation: qv-fade var(--dur) var(--ease) both; }
@keyframes qv-rise { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes qv-fade { from { opacity: 0; } }
/* phones and tablets (the base sheet's own 998px breakpoint pins it to the foot):
   an edge-to-edge bottom sheet sliding up */
@media (max-width: 998px) {
  #product-quickview-modal[open] {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 92dvh; transform: none;
    animation: qv-sheet 380ms var(--ease) both;
  }
}
@keyframes qv-sheet { from { translate: 0 100%; } }
.product-quickview-modal-wrapper > .loading-overlay { width: 2.5rem; z-index: 2; }
.product-quickview-modal-wrapper > .loading-overlay .loading-overlay__spinner { width: 2.5rem; }
.product-quickview-modal-wrapper .loading-overlay .path { stroke: var(--c-accent); }
.product-quickview.qv { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .product-quickview.qv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-quickview .product-quickview__img-wrapper { width: auto; max-width: none; background-color: var(--c-surface-2); }
.product-quickview .product-quickview__img-wrapper img { width: 100%; height: 100%; max-height: 70vh; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 16%; }
@media (max-width: 699px) { .product-quickview .product-quickview__img-wrapper img { max-height: 42vh; } }
.product-quickview .product-quickview__content-wrapper { max-width: none; max-height: none; padding: clamp(1.5rem, 4vw, 3rem); overflow: visible; }
.product-quickview .quickview-title { display: block; color: var(--c-ink); text-decoration: none; }
.product-quickview .quickview-title:hover .qv__title { color: var(--c-accent); }
.product-quickview h2.qv__title { margin: 0; transition: color var(--dur) var(--ease); }
.product-quickview #price { margin: 0; }
.product-quickview .price { font-size: var(--fs-h3); }
.product-quickview .price .badge { display: none !important; }
.product-quickview .price__regular, .product-quickview .price__sale { font-size: inherit; }
.product-quickview .product-form { margin: 0; }
.product-quickview .product-form .sizes { margin-bottom: 1.25rem; }
.product-quickview .buy { margin-top: 0.25rem; }
.product-quickview .product-form__quantity { margin: 0; height: auto; }
.product-quickview-modal-wrapper .product-quickview-modal__close {
  z-index: 3; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem;
  background-color: var(--c-bg); color: var(--c-ink); border-radius: 50%;
}
.product-quickview-modal-wrapper .product-quickview-modal__close svg { width: 1rem; height: 1rem; }
.quickview_promo-tag-wrapper:has(#quickview_promo-tag:empty) { display: none; }

/* ── 10. Content pages ─────────────────────────────────────────────────────── */
.rte { color: var(--c-ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.rte > * + * { margin-top: 1em; }
.rte h1, .rte h2, .rte h3, .rte h4 {
  font-family: var(--font-display); font-weight: var(--fw-display); color: var(--c-ink);
  line-height: var(--lh-heading); margin-top: 1.6em;
}
.rte h1 { font-size: var(--fs-h2); }
.rte h2 { font-size: calc(var(--fs-h3) * 1.2); }
.rte h3, .rte h4 { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.rte > :first-child { margin-top: 0; }
.rte a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.rte ul, .rte ol { padding-left: 1.25rem; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li + li { margin-top: 0.35em; }
.rte img { height: auto; max-width: 100%; }
.rte strong, .rte b { color: var(--c-ink); font-weight: 500; }
.rte blockquote { border-left: var(--border-width) solid var(--c-accent); padding-left: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--c-ink); }
.rte table, .table-wrapper table { width: 100%; border-top: var(--border-width) solid var(--c-line); }
.rte td, .rte th { padding: 0.7rem 1rem 0.7rem 0; border-bottom: var(--border-width) solid var(--c-line); text-align: left; vertical-align: top; }
.rte th { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); font-weight: 500; }
.table-wrapper { overflow-x: auto; }
.rte iframe, .rte video { max-width: 100%; }
.page-body .section__head { margin-top: var(--section-y-tight); }

/* blog + article */
.blog-grid { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
.post-card__media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--c-surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta { margin-top: 0.4rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.post-card__title { font-size: var(--fs-h3); line-height: 1.25; }
.post-card__title a { transition: color var(--dur) var(--ease); }
.post-card__title a:hover { color: var(--c-accent); }
.post-card__excerpt { font-size: var(--fs-small); color: var(--c-ink-muted); }
.chead__title--article { font-size: var(--fs-h1); max-width: 24ch; }
.article-hero { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--c-surface-2); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.article-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--border-width) solid var(--c-line); }

/* search, 404, list-collections */
.searchpage-form { display: flex; align-items: stretch; gap: 0.6rem; width: min(100%, 36rem); margin-top: 0.75rem; }
.searchpage-form .search { min-height: 3.25rem; }
.searchpage-form .btn { flex: none; }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 9rem); font-weight: 500; line-height: 0.9; color: var(--c-accent); }
.tiles--list { padding-top: clamp(2rem, 4vw, 3rem); }

/* store locator (base template, reference look) */
.store-locator { padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-y); }
.store-locator-heading { display: grid; gap: 1rem; margin-bottom: 2rem; }
.store-locator .select { position: relative; display: inline-flex; }
.store-locator .select__select {
  appearance: none; -webkit-appearance: none; min-width: 16rem; min-height: 2.75rem; padding: 0 2.4rem 0 1rem;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b201c' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1rem;
  color: var(--c-ink); border: var(--border-width) solid var(--c-line); border-radius: 0;
}
.store-selector-item { height: 100%; padding: 1.25rem; background-color: var(--c-surface); border: var(--border-width) solid var(--c-line); color: var(--c-ink-muted); font-size: var(--fs-small); }
.store-selector-item strong { display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--c-ink); }
.store-selector-item address { font-style: normal; margin-top: 0.5rem; }

/* ── 11. Platform-rendered controls ─────────────────────────────────────────
   The promotion app renders `btn btn-primary`, the sf auth views `btn
   button--full-width` / `button--secondary`; reference.css's .btn is already the
   solid cocoa square, so the platform variants only need their own colourways. */
.btn.button--secondary, .btn.btn--secondary { background-color: transparent; border-color: var(--c-line); color: var(--c-ink); }
.btn.button--secondary:hover, .btn.btn--secondary:hover { background-color: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.btn.button--full-width { width: 100%; }
#promotion-section, [id^="sf_promo-"], [class^="sf_promo-"] { color: var(--c-ink); }
#get-more-promotion, #view-more-promotion, #sf_promo-view-more-tag { color: var(--c-accent) !important; }
.flex-container { scrollbar-width: thin; }

/* sf's /account/challenge — the manual reCAPTCHA step after a low invisible score.
   sf renders it with template 'app' and a bare <form class="text-center">: there is
   no .customer wrapper, so customer.css (not loaded) never reaches it, and its submit
   is an `input.btn`. The form itself becomes the login page's card. */
#MainContent form[action$="challenge"] {
  container-type: inline-size;
  width: min(27.5rem, 100% - 2 * var(--gutter));
  margin: clamp(3rem, 6vw, 5rem) auto var(--section-y);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  background-color: var(--c-surface); border: var(--border-width) solid var(--c-line);
  text-align: center;
}
#MainContent form[action$="challenge"] h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-heading); }
#MainContent form[action$="challenge"] p { margin-bottom: 1.5rem; color: var(--c-ink-muted); }
/* the widget's own 304×78 box, held before its async script paints, so the button doesn't jump */
#MainContent form[action$="challenge"] .g-recaptcha { min-height: 78px; }
#MainContent form[action$="challenge"] > br { display: none; }
#MainContent form[action$="challenge"] .btn { width: 100%; margin-top: 1.5rem; cursor: pointer; appearance: none; -webkit-appearance: none; }
/* the widget is a fixed 304px iframe: step it down when the card is narrower (phones) */
@container (width < 304px) { #MainContent form[action$="challenge"] .g-recaptcha { scale: 0.9; } }
@container (width < 274px) { #MainContent form[action$="challenge"] .g-recaptcha { scale: 0.8; } }

/* currency picker (snippets/currency-picker) */
.currency-picker-block .select { position: relative; display: inline-flex; }
.currency-picker {
  appearance: none; -webkit-appearance: none; padding: 0.35rem 1.9rem 0.35rem 0.8rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7c75' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.8rem;
  border: var(--border-width) solid var(--c-line); border-radius: 0;
  color: inherit; font-size: var(--fs-micro); letter-spacing: 0.1em;
}
.footer .currency-picker { border-color: var(--c-footer-line); }
.currency-picker option { background-color: var(--c-surface); color: var(--c-ink); }

/* ── 12. Footer additions ──────────────────────────────────────────────────── */
.footer__social { list-style: none; }
.footer__social li { display: flex; }
.footer__social .iconbtn { color: var(--c-footer-ink); }
.logo--footer.logo--image img { height: 3rem; max-height: 3.5rem; max-width: 14rem; }
.footer__baseend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.footer__base p { margin: 0; }

/* ── 13. Motion kill-switch + reduced motion ─────────────────────────────────
   ?ts-anim=off (animations.js) flattens every effect to its end state for
   deterministic screenshots; nothing in this theme is hidden waiting for JS. */
html[data-anim-off] *, html[data-anim-off] *::before, html[data-anim-off] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .navdrop { transition: none; }
}