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

   reference.css is the reference storefront'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, and the platform's JS toggles state classes
   (.hidden, .loading, .transparent, .price--on-sale) that need a visible half.
   Every rule below is written in the reference's tokens (--c-*, --fs-*, --radius-*),
   so a colour change in the theme editor reaches these surfaces too.

    1. Platform utilities + base-theme variable bridge
    2. Header additions (wrapper, logo, dropdowns, nav overflow)
    3. Drawers (menu accordions, search, cart drawer)
    4. Homepage additions (ribbon speed, rails, counts)
    5. Product card (add pill contract, samples, wishlist)
    6. Product page (gallery track, price states, option chips, quantity, loading)
    7. Collection (bar, filter drawer, 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 picker)
   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 palette —
   the blush ground and near-black ink — so those surfaces sit on the same page. */
:root {
  --color-foreground: 18, 18, 18;
  --color-background: 255, 243, 243;
  --color-base-text: 18, 18, 18;
  --color-base-background-1: 255, 243, 243;
  --color-base-background-2: 255, 255, 255;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 18, 18, 18;
  --color-base-accent-1: 122, 74, 106;
  --color-base-accent-2: 122, 74, 106;
  --color-button: 122, 74, 106;
  --color-button-text: 255, 255, 255;
  --color-link: 122, 74, 106;
  --color-card-hover: 18, 18, 18;
  --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, .textlink …) 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.womeeme-locked { overflow: hidden; }
body { background-color: var(--c-bg); }
main:focus { outline: none; }
/* storefront apps render their own blocks straight into the page body in the base
   theme's layout vocabulary — the reviews carousel is a .page-width.spaced-section
   whose swiper has -20px side margins that the base page gutter absorbs. Give those
   blocks the reference's container and gutter (cart-template's own .page-width sits
   deeper and is left alone), and clip anything an app still pushes sideways —
   `clip` is not a scroll container, so the sticky header and columns still stick. */
#MainContent { overflow-x: clip; }
#MainContent > .page-width { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter-lg)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { #MainContent > .page-width { padding-inline: var(--gutter-lg); } }
#MainContent > .spaced-section { margin-block: var(--section-y-tight); }

/* The reference's phone layouts collapse to one column, and a bare 1fr track is
   minmax(auto, 1fr): it grows to its widest child. Platform widgets injected after
   load (the promotion app's tag strip on the product page is ~825px) then widen the
   whole page and it scrolls sideways — pin those tracks to minmax(0, 1fr). */
@media (max-width: 899px) {
  .pdp__grid, .bundle, .duo { grid-template-columns: minmax(0, 1fr); }
}

/* The vendored component-price.css loads after reference.css and redeclares .price
   (centred, 14px, the base foreground) — the reference's own price line comes back
   here: baseline-aligned, its small size, its gap, its ink. */
.price { align-items: baseline; gap: 0 0.5rem; font-size: var(--fs-small); line-height: var(--lh-body); letter-spacing: 0; color: var(--c-ink); }
.price--lg { font-size: 1.375rem; }
.price .money { white-space: nowrap; }
/* .price-item / .price__compare are global.js's handles on the product page's price */
.price-item, .price__compare { font-variant-numeric: lining-nums; }

/* ── 2. Header additions ───────────────────────────────────────────────────── */
/* the section wrapper holds the bar, 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 mark's height follows the header's logo_height setting (--logo-h-set, 56px
   by default like the reference): the draft's cloud logo keeps its sprite crop and
   scales with it, 72% of it once stuck, capped at 44 / 36px on phones. */
.header { --logo-h: var(--logo-h-set, 56px); }
.header.is-stuck { --logo-h: calc(var(--logo-h-set, 56px) * 0.72); }
@media (max-width: 899px) {
  .header { --logo-h: min(var(--logo-h-set, 56px), 44px); }
  .header.is-stuck { --logo-h: min(calc(var(--logo-h-set, 56px) * 0.72), 36px); }
}
/* a merchant's own logo is placed whole: no crop, no multiply, capped by the setting */
.logo--custom { width: auto; overflow: visible; display: flex; align-items: center; }
.logo--custom .logo__img {
  position: static; left: auto; top: auto; width: auto; height: var(--logo-h);
  max-height: var(--logo-max-height, 56px); max-width: min(46vw, 260px);
  object-fit: contain; mix-blend-mode: normal;
}
.tool__count.hidden, .cart-count-bubble.hidden { display: none !important; }
.tool__count .js-content-cart-count { display: inline; }
a.tool { text-decoration: none; }

/* dropdowns — the reference nav is flat; a link with children opens a white panel.
   reference.css lays out every `.header__nav ul` as the centred link row and every
   `.header__nav a` as an underlined nav link, and both reach into the panels, so
   the panels re-assert their own list layout and link type. */
.header__navitem { position: relative; }
.header__nav a[aria-haspopup] { display: inline-flex; align-items: center; gap: 0.3rem; }
.header__nav a[aria-haspopup] .icon { width: 0.85rem; height: 0.85rem; transition: transform var(--dur) var(--ease); }
.header__navitem.has-dropdown:hover > a .icon,
.header__navitem.has-dropdown:focus-within > a .icon { transform: rotate(180deg); }
.navdrop {
  position: absolute; top: 100%; left: -1.25rem; z-index: 5;
  min-width: 14rem; padding: 0.9rem 1.25rem 1rem;
  background-color: var(--c-surface); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px); text-align: left;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.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: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.header__nav .navdrop ul { display: grid; gap: 0; justify-content: stretch; flex-wrap: nowrap; padding-inline: 0; }
.header__nav .navdrop a {
  display: block; padding: 0.4rem 0; border-bottom: 0; font-size: var(--fs-small);
  letter-spacing: 0; line-height: 1.35; color: var(--c-ink-muted);
}
.header__nav .navdrop a:hover { color: var(--c-accent); }
.header__nav .navdrop .navdrop__link--head {
  font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-ink); padding-bottom: 0.55rem; margin-bottom: 0.3rem;
  border-bottom: var(--border-width) solid var(--c-line);
}
.header__nav .navdrop__sub--deep { padding-left: 0.75rem; margin: 0.1rem 0 0.45rem; border-left: var(--border-width) solid var(--c-line); }
.navdrop--cols { min-width: 26rem; }
/* long or nested menus flow as tight vertical lists across columns — never one grid
   cell per link, which spreads a flat menu into rows with big gaps */
.header__nav .navdrop--cols .navdrop__list,
.header__nav .navdrop--mega .navdrop__list { display: block; column-gap: 2.25rem; }
.header__nav .navdrop--cols .navdrop__list { columns: 2; }
.header__nav .navdrop--mega .navdrop__list { columns: 11rem 5; }
.navdrop--cols .navdrop__item, .navdrop--mega .navdrop__item { break-inside: avoid; }
.navdrop--mega .navdrop__item:has(.navdrop__sub) { margin-block: 0.35rem 0.9rem; }
/* a menu with grandchildren opens as a full-row panel of columns under the nav row */
.header__nav { position: relative; }
.header__navitem:has(> .navdrop--mega) { position: static; }
.navdrop--mega { left: var(--pad-x); right: var(--pad-x); min-width: 0; padding: 1.5rem 1.75rem 1.75rem; }

/* a menu too long for one row collapses to the menu button + drawer (init.js adds
   .nav-overflow); the search pill makes way for the search icon, as on phones */
@media (min-width: 900px) {
  .header-section.nav-overflow .header__nav { display: none; }
  .header-section.nav-overflow .header__burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; }
  .header-section.nav-overflow .header__search { display: none; }
  .header-section.nav-overflow .tool--search { display: grid; }
}

/* ── 3. Drawers ─────────────────────────────────────────────────────────────── */
.drawer__head .tool { flex: none; }
.drawer__nav li:last-child > a { border-bottom: 0; }
.drawer__nav > li { border-bottom: 1px solid var(--c-line); }
.drawer__nav > li > a { border-bottom: 0; }
.drawer__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; color: var(--c-ink);
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary .icon { transition: transform var(--dur) var(--ease); }
.drawer__group[open] > summary .icon { transform: rotate(180deg); }
.drawer__group > summary:hover, .drawer__nav a:hover { color: var(--c-accent); }
.drawer__children { padding: 0 0 0.75rem 0.9rem; }
.drawer__nav .drawer__children a { padding: 0.45rem 0; border-bottom: 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.drawer__nav .drawer__grandchildren { padding-left: 0.9rem; }
.drawer__utility { display: grid; gap: 0.1rem; padding: 0.5rem 1.5rem 1.5rem; }
.drawer__utility a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.drawer__utility a:hover { color: var(--c-accent); }
.drawer__currency { padding: 0 1.5rem 1.5rem; }

/* search drawer — a real form; popular searches as pill chips before any typing */
.drawer--search .drawer__head { gap: 0.75rem; }
.searchfield input::-webkit-search-cancel-button { opacity: 0.5; }
.search-suggest { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.75rem; }
.search-suggest__label { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.search-suggest__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-suggest__list a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 1rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  background-color: var(--c-surface); color: var(--c-ink); font-size: var(--fs-small);
  transition: border-color var(--dur) var(--ease);
}
.search-suggest__list a:hover { border-color: var(--c-ink); }
.search-results[aria-busy="true"] { opacity: 0.55; }
.search-results > li { min-width: 0; }
.search-hit__img { background-color: var(--c-surface-2); }
.search-hit__price .price__was { margin-left: 0.35rem; }
.search-all { display: inline-block; margin: 0 1.5rem 1.5rem; }

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

/* ── 4. Homepage additions ─────────────────────────────────────────────────── */
.hero__frame img { display: block; }
/* the ribbon's lap time is a section setting */
.ribbon[style*="--ribbon-dur"] .ribbon__track { animation-duration: var(--ribbon-dur); }
/* rail arrows rest at their ends and step aside when every card already fits */
.arrow:disabled { opacity: 0.35; cursor: default; }
.arrow:disabled:hover { border-color: var(--c-line); }
.rail-fits .arrow { display: none; }
.shelf__ctl .textlink { white-space: nowrap; }
/* a merchant-set count: fewer tiles or looks than the reference's fill their row */
@media (min-width: 900px) {
  .best__grid[style*="--best-cols"] { grid-template-columns: repeat(var(--best-cols), minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
  .looks__row[style*="--looks-cols"] { grid-template-columns: repeat(var(--looks-cols), minmax(0, 1fr)); }
}
/* more than two category tiles run as a row of three or four on desktop */
@media (min-width: 900px) {
  .duo:has(> .duo__tile:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo:has(> .duo__tile:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.duo__meta { display: block; }
.chosen__panel .grid { min-height: 1px; }
.best__price .money, .look__price .money { white-space: nowrap; }

/* ── 5. Product card ───────────────────────────────────────────────────────── */
/* <add-to-cart-button> is layout-neutral; its button keeps the reference's pill */
.card__addwrap { display: contents; }
.card__add.addToClassList { cursor: pointer; }
a.card__add { display: flex; align-items: center; justify-content: center; }
.card__add .btn__text { overflow: hidden; text-overflow: ellipsis; }
/* while the add is in flight the pill's own label goes invisible and the spinner
   takes its place, so the pill has to stay up even when the pointer has left the
   card (a click does not focus a button in every browser) */
.card__add.transparent { color: transparent; opacity: 1; translate: 0 0; }
/* the overlay is laid out against .card__media (the addwrap is display:contents), so
   it repeats the pill's own anchors to sit exactly on it and centres the spinner.
   `top: auto` is load-bearing: the vendored component-loading-overlay.css sets
   `top: 0` under 750px, which — with a height here — would pin it to the tile's top. */
.card__addwrap .loading-overlay {
  position: absolute; top: auto; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 3; width: auto; height: 44px; transform: none;
  display: grid; place-items: center; pointer-events: none;
}
.card__addwrap .loading-overlay__spinner { width: 1.35rem; display: block; }
.card__addwrap .loading-overlay .path { stroke: var(--c-ink); }
/* the spinner takes the label's place, so it takes the label's colour in each state —
   an ink spinner vanished into the ink :hover fill */
.card__add:hover + .loading-overlay .path { stroke: var(--c-surface); }
/* on touch the pill is an outlined button under the picture (reference.css) — the
   overlay follows it there */
@media (hover: none) {
  .card__addwrap .loading-overlay { left: 0; right: 0; bottom: 0; height: 40px; }
}
.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 picture's corner */
.card { position: relative; }
.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: rgb(255 255 255 / 0.9); box-shadow: none;
}
.card > .wishlist-icon-btn .wishlist-love-icon { font-size: 1rem; }
/* the reference's white Sale pill vanishes on white packshots — a hairline keeps its edge */
.card__badge { box-shadow: 0 0 0 1px rgb(18 18 18 / 0.08); }

/* ── 6. Product page ───────────────────────────────────────────────────────── */
/* the gallery is one scroll-snap track of every product image inside the
   reference's 3:4 frame (init.js §6): swipe on touch, drag with a mouse */
.gallery__main { position: relative; }
.gallery__track {
  position: relative; display: flex; height: 100%; 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; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.gallery__track:has(> .gallery__slide:only-child) { cursor: auto; }
/* phones: a small "2 / 5" pill says there is more to swipe */
.gallery__count {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 1; display: none;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.88); color: var(--c-ink);
  font-size: var(--fs-micro); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; pointer-events: none;
}
@media (max-width: 899px) { .gallery__count { display: block; } }
/* desktop: the reference's round arrow buttons fade in over the picture on hover
   (scoped under .gallery__main so the carousel's `.arrow:disabled` dimming, which
   is for always-visible rail arrows, never shows a resting gallery arrow) */
.gallery__main .gallery__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: none;
  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, .gallery__main:focus-within .gallery__arrow { opacity: 1; pointer-events: auto; }
  .gallery__main:hover .gallery__arrow:disabled, .gallery__main:focus-within .gallery__arrow:disabled { opacity: 0.35; pointer-events: none; }
}
.gallery__thumbs { scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs > li { flex: none; }
.gallery__thumb { cursor: pointer; padding: 0; background: none; }
@media (max-width: 899px) { .gallery__thumb { width: 56px; } }
/* both columns can stick: whichever is shorter holds its place under the header
   while the other scrolls (a long description, or a tall gallery) */
@media (min-width: 900px) {
  .gallery { position: sticky; top: calc(var(--womeeme-header-h, 126px) + 1.5rem); align-self: start; }
  .buy { top: calc(var(--womeeme-header-h, 126px) + 1.5rem); }
}

/* price states: global.js toggles .price--on-sale from the selected variant, which
   shows the struck-through was price and the save tag */
[id^="price-"]:not(.price--on-sale) .price__was,
[id^="price-"]:not(.price--on-sale) .price__save { display: none; }
[id^="price-"].price--on-sale .price__now { color: var(--c-sale); }
.price__save:empty { display: none; }
.price--sold-out .price__now { color: var(--c-ink-muted); }

/* variant options — EasyStore.OptionSelectors output, dressed by init.js as the
   reference's .opt group / .opt__name caption / .opt__vals row / .opt__val pills */
.opts.product-form__input { display: grid; gap: 1.1rem; margin: 0; min-width: 0; }
.opts .selector-wrapper, .opts .opt { margin: 0; padding: 0; border: 0; min-width: 0; display: block; }
.opts fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.opts .opt__name, .opts legend, .opts .selector-wrapper > label {
  display: block; padding: 0; margin: 0 0 0.55rem; font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted);
}
.opts input.opt__radio, .opts .opt__vals input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip-path: inset(50%);
}
/* the base product sheet's `.product-form__input input[type=radio] + label` (square,
   2px, tracked) out-ranks the reference's .opt__val — restate the reference's pill */
.opts .opt__vals input[type="radio"] + label.opt__val,
.product-quickview .opt__vals input[type="radio"] + label.opt__val {
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  min-height: 40px; padding: 0 1rem; cursor: pointer; line-height: 1.2;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); background-color: var(--c-surface);
  color: var(--c-ink); font-size: var(--fs-small); letter-spacing: 0; text-align: center; opacity: 1;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.opts .opt__vals input[type="radio"] + label.opt__val:hover,
.product-quickview .opt__vals input[type="radio"] + label.opt__val:hover { border-color: var(--c-ink); }
.opts .opt__vals, .product-quickview .opt__vals { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* the checked chip is the reference's .opt__val.is-selected: ink fill, white label */
.opts .opt__vals input[type="radio"]:checked + label.opt__val,
.product-quickview .opt__vals input[type="radio"]:checked + label.opt__val { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.opts .opt__vals input[type="radio"]:focus-visible + label.opt__val,
.product-quickview .opt__vals input[type="radio"]:focus-visible + label.opt__val { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; }
.opts .opt__vals input[type="radio"].disabled + label.opt__val,
.opts .opt__vals input[type="radio"]:disabled + label.opt__val,
.product-quickview .opt__vals input[type="radio"].disabled + label.opt__val {
  opacity: 0.5; text-decoration: line-through; background-color: var(--c-surface); color: var(--c-ink-muted); border-color: var(--c-line);
}
/* "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 (the pill radius makes it a disc), 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. */
.opts .opt__vals input[type="radio"] + label.opt__val.variant-img-label-wrapper,
.product-quickview .opt__vals input[type="radio"] + label.opt__val.variant-img-label-wrapper { min-height: 3.75rem; }
.opts .opt__vals input[type="radio"] + label.opt__val:has(.variant-img-label),
.product-quickview .opt__vals input[type="radio"] + label.opt__val:has(.variant-img-label) {
  position: relative; width: 3.75rem; min-width: 0; height: 3.75rem; padding: 0; overflow: hidden;
}
.opts .opt__vals label.opt__val .variant-img-label,
.product-quickview .opt__vals label.opt__val .variant-img-label { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opts .opt__vals label.opt__val .variant-img-label + .label__text,
.product-quickview .opt__vals label.opt__val .variant-img-label + .label__text {
  display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.opts .opt__vals input[type="radio"]:checked:not(:focus-visible) + label.opt__val:has(.variant-img-label),
.product-quickview .opt__vals input[type="radio"]:checked:not(:focus-visible) + label.opt__val:has(.variant-img-label) { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.opts select, .opts .opt__select, .product-quickview select.opt__select {
  width: 100%; max-width: 22rem; min-height: 44px; padding: 0 2.5rem 0 1.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='%23121212' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-input);
  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; }

/* quantity — the reference's pill .qty stepper, driven by <quantity-input> */
quantity-input.qty { display: flex; }
.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 draft's options and buy row are both children of the .buy grid (gap 1.15rem);
   here both sit inside the add-to-cart <form>, a plain block, so the gap is restated */
.buy__row { margin-top: 1.15rem; }
.buy__row .product-form__quantity { display: flex; }
.buy__row .buy__add { margin: 0; }
.buy__row > .product-form__quantity + * { flex: 1; }

/* 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, .btn.loading > svg.icon { visibility: hidden; }
.btn.loading .loading-spinner { display: grid; place-items: center; position: absolute; inset: 0; }
.btn .loading-spinner .spinner { width: 1.35rem; height: 1.35rem; }
.btn--accent .loading-spinner .path, .btn--ink .loading-spinner .path { stroke: var(--c-accent-ink); }
.btn--light .loading-spinner .path { stroke: var(--c-ink); }
/* product-form.js also disables the button for the round trip, and
   `.btn--accent:disabled` is the sold-out look (line fill, muted label) — a button
   that is only busy keeps its accent fill, or the white spinner is 1.3:1 */
.btn--accent.product-form__submit.loading:disabled { background-color: var(--c-accent); color: var(--c-accent-ink); cursor: progress; }

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

/* the merchant's description, in the reference's accordion body */
.acc__body.rte { font-size: var(--fs-small); line-height: 1.7; color: var(--c-ink-muted); }
.acc__body.rte ul { list-style: none; padding: 0; display: grid; gap: 0.3rem; }
.acc__body.rte ul li { position: relative; padding-left: 1rem; margin: 0; }
.acc__body.rte ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background-color: var(--c-accent); }
.acc__body.rte table { width: 100%; }
/* the accordion body is a grid whose gap already spaces its blocks */
.acc__body.rte > * + * { margin-top: 0; }
.acc:empty { display: none; }
.buy__share { padding-top: 0.25rem; }
/* the platform's full-width app hook below the product grid (reviews and the like):
   clearance from the grid, and no box of its own when no app renders into it */
.pdp__apps:not(:empty) { margin-top: clamp(2rem, 5vw, 3.5rem); }
.related[hidden] { display: none; }

/* share (snippets/social-sharing) — the reference's round .arrow buttons, smaller */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.share__label { margin-right: 0.35rem; font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.share__link { position: relative; width: 36px; height: 36px; }
.share__copied {
  position: absolute; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%);
  padding: 0.3rem 0.6rem; white-space: nowrap; border-radius: 4px; background-color: var(--c-ink); color: var(--c-surface);
  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 ────────────────────────────────────────────────────────── */
.plp-head__lede.rte > * + * { margin-top: 0.5rem; }
.plp__tools { display: flex; align-items: center; gap: 1rem; }
.plp__filter {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); background-color: var(--c-surface);
  color: var(--c-ink); font-size: var(--fs-small); transition: border-color var(--dur) var(--ease);
}
.plp__filter:hover { border-color: var(--c-ink); }
.plp__filter-count {
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill); background-color: var(--c-accent); color: var(--c-accent-ink);
  font-size: 0.6875rem; line-height: 1;
}
.plp__sort { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); color: var(--c-ink-muted); }
.plp__sort select {
  min-height: 40px; padding: 0 2.4rem 0 1rem; min-width: 0;
  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='%23121212' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 0.95rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  color: var(--c-ink); font-size: var(--fs-small); appearance: none; -webkit-appearance: none;
}
.plp__sort select:hover { border-color: var(--c-ink); }
@media (max-width: 899px) {
  .plp__bar { gap: 0.75rem; }
  .plp__note { order: 3; flex: 1 0 100%; }
  .plp__sort > span { display: none; }
  /* a small basis lets the sort select share the Filter + count row, then grow */
  .plp__sort { flex: 1 1 7.5rem; max-width: 12rem; min-width: 0; margin-left: auto; }
  .plp__sort select { width: 100%; text-overflow: ellipsis; }
  .plp__count { white-space: nowrap; }
}
.plp__empty { display: grid; justify-items: start; gap: 1.25rem; padding-block: 1rem 2rem; color: var(--c-ink-muted); }

/* the filter drawer: the reference's left drawer, its groups captioned in small
   caps over pill chips; the checked chip takes the selected-option look */
.drawer--filter .drawer__panel { overflow: hidden; }
.facets { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; display: grid; align-content: start; gap: 1.5rem; }
.facet { margin: 0; padding: 0; border: 0; min-width: 0; }
.facet .opt__name { display: block; }
.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 .opt__val { display: inline-flex; align-items: center; pointer-events: none; }
.facet__chip input:checked + .opt__val { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.facet__chip input:focus-visible + .opt__val { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.facet__chip:hover .opt__val { border-color: var(--c-ink); }
.facet__price { display: flex; align-items: center; gap: 0.5rem; color: var(--c-ink-muted); }
.facet__price label { flex: 1; min-width: 0; }
.facet__price input {
  width: 100%; min-height: 40px; padding: 0 1rem; background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-input); 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; justify-content: space-between; gap: 1rem; margin-top: 0; }
.facets__clear { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 1px; cursor: pointer; }
.facets__apply { flex: 1; max-width: 16rem; margin-left: auto; }

/* pagination (base snippet, reference look: round pills) */
.pagination-wrapper { margin-top: clamp(2rem, 4vw, 3rem); }
.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: 1px solid var(--c-line); border-radius: var(--radius-pill); background-color: var(--c-surface);
  color: var(--c-ink-muted); font-size: var(--fs-small); text-decoration: none;
}
.pagination .pagination__item:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pagination .pagination__item--current { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.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: 0; }
#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); color: var(--c-ink); }

/* base .button family -> the reference's pill .btn--accent (primary) / outline */
#cart-template .button, .vouchers-modal .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.75rem; border: 1px 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-body); letter-spacing: 0.02em; line-height: 1;
  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-deep); border-color: var(--c-accent-deep); 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: 1px solid var(--c-line);
  font-size: var(--fs-micro); font-weight: var(--fw-body); 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: 1px 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; }
.cart-item__details { padding-right: 1rem; font-size: var(--fs-small); }
.cart-item__name { display: block; font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.35; 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); color: var(--c-ink-muted); line-height: 1.5; }
.cart-item__quantity { white-space: nowrap; }

/* quantity stepper: the base <quantity-input class="quantity"> as the reference's pill .qty */
#cart-template .quantity {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  width: auto; min-height: 0; height: 40px; padding-inline: 0.2rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); background-color: var(--c-surface);
}
#cart-template .quantity::before, #cart-template .quantity::after { display: none; }
#cart-template .quantity__button {
  display: grid; place-items: center; width: 2.1rem; 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.7rem; height: 0.7rem; stroke: none; pointer-events: none; }
#cart-template .quantity__input {
  width: 2.2rem; 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-subtle); }
.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-body); font-weight: var(--fw-body); color: var(--c-ink); }
.totals__subtotal-value { margin: 0; font-family: var(--font-display); font-size: 1.25rem; 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: 1px solid var(--c-line); background-color: var(--c-surface); }
.voucher-toggle-content { display: grid; gap: 0.1rem; }
.voucher-toggle-title { font-size: var(--fs-small); }
.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; min-height: 44px; padding: 0 1.1rem; background-color: var(--c-surface); color: var(--c-ink);
  border: 1px 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; }

/* 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 here at the
   theme tokens — and its notch circles use rgb(--color-background), so that is set
   to the panel ground. */
vouchers-modal #vouchers-modal {
  --color-background: 255, 255, 255;
  --color-foreground: 18, 18, 18;
  --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-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); box-shadow: var(--shadow-pop); font-family: var(--font-body); overflow: hidden;
}
vouchers-modal #vouchers-modal-backdrop.active { background-color: var(--c-scrim-2); }
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); }
vouchers-modal .vouchers-modal__close.link { text-decoration: none; }
/* 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 1.1rem; background-color: var(--c-bg); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-input); box-shadow: none; font-size: var(--fs-small);
}
vouchers-modal #vouchers-modal discount-input .field__input::placeholder { color: var(--c-ink-subtle); }
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 discount-input .button.loading { opacity: 0.6; pointer-events: none; }
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); 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); 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 { color: var(--c-accent); border-color: var(--c-accent); border-radius: var(--radius-pill); }
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: 1px 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 ~440px 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: 1px 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: 36px; }
.drawer--cart #cart-template .quantity__button { width: 1.9rem; }
.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: 18, 18, 18;
  --color-background: 255, 255, 255;
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); box-shadow: var(--shadow-pop);
  max-height: 92vh; overflow-y: auto; width: min(900px, 94vw);
  /* keep a real box while the platform renders the body (it can take seconds):
     with no height the open modal is a 2px 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-scrim-2); 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;
    border: 0; border-top: 1px solid var(--c-line); border-radius: 18px 18px 0 0;
    animation: qv-sheet 380ms var(--ease) both;
  }
}
@keyframes qv-sheet { from { translate: 0 100%; } }
.product-quickview-modal-wrapper > .loading-overlay { width: 2.75rem; z-index: 2; }
.product-quickview-modal-wrapper > .loading-overlay .loading-overlay__spinner { width: 2.75rem; }
.product-quickview .product-quickview__img-wrapper { background-color: var(--c-surface-2); overflow: hidden; }
/* desktop: the reference's 3:4 portrait frame instead of the base square, and the
   content column as tall as the picture (the base caps it at 500px, so a product
   with three options scrolled most of its form under the pinned Add button) */
@media (min-width: 999px) {
  .product-quickview .product-quickview__img-wrapper { max-width: 450px; }
  .product-quickview .product-quickview__img-wrapper img { aspect-ratio: 3 / 4; object-fit: cover; }
  .product-quickview .product-quickview__content-wrapper { max-height: 600px; }
}
.product-quickview__content-wrapper { color: var(--c-ink); display: grid; gap: 1rem; align-content: start; }
.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 .product-form__input { margin-bottom: 1rem; }
.product-quickview .opt__name, .product-quickview .product-form__input > label, .product-quickview legend {
  display: block; margin: 0 0 0.55rem; padding: 0; font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted);
}
.product-quickview fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.product-quickview .opt__vals input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); }
.product-quickview .product-form__quantity { display: block; height: auto; }
.product-quickview .product-form__quantity .qty { display: inline-flex; }
/* the base sticky action bar is painted with a glow — use the panel ground */
.product-quickview .quickview-sticky-actions { background-color: var(--c-surface); box-shadow: 0 -1.25rem 1.5rem var(--c-surface); padding-bottom: 1rem; }
.product-quickview .quickview-sticky-actions .btn { margin-top: 0; }
.product-quickview-modal__close { color: var(--c-ink); }
.product-quickview-modal-wrapper .product-quickview-modal__close { z-index: 3; background-color: var(--c-surface); }
.product-quickview-modal__close svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 749px) {
  .product-quickview { flex-direction: column; }
  .product-quickview .product-quickview__img-wrapper { max-width: none; }
}

/* ── 10. Content pages ─────────────────────────────────────────────────────── */
.rte { color: var(--c-ink-muted); 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: var(--fs-h3); }
.rte h3, .rte h4 { font-size: var(--fs-body); }
.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: var(--fw-bold); }
.rte blockquote { border-left: 2px solid var(--c-accent); padding-left: 1.25rem; color: var(--c-ink); }
.rte table, .table-wrapper table { width: 100%; border-top: 1px solid var(--c-line); }
.rte td, .rte th { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px 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: var(--fw-body); }
.table-wrapper { overflow-x: auto; }
.rte iframe, .rte video { max-width: 100%; }

.page-head { padding-bottom: 0; }
.page-body { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) var(--section-y); }
.page-body--wide { max-width: none; padding-inline: var(--pad-x); }
.page-body > .best__head { margin-top: var(--section-y-tight); }
@media (min-width: 900px) { .page-head { padding-inline: max(var(--gutter), calc((100% - var(--container-narrow)) / 2)); } }

/* blog + article */
.blog-grid { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem) 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; gap: 0.7rem; 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 900ms var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }
.post-card__title { font-size: var(--fs-h3); line-height: 1.3; color: var(--c-ink); }
.post-card__title a:hover { color: var(--c-accent); }
.post-card__excerpt { font-size: var(--fs-small); color: var(--c-ink-muted); }
.article-hero { aspect-ratio: 16 / 9; overflow: hidden; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); background-color: var(--c-surface-2); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--fs-micro); 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: 1px solid var(--c-line); }

/* search + 404: the reference's pill field beside an accent pill button */
.searchpage { display: flex; align-items: center; gap: 0.75rem; max-width: var(--container-narrow); margin-top: 0.5rem; }
.searchpage__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; height: 48px; padding: 0 1.1rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-input); background-color: var(--c-surface); color: var(--c-ink);
}
.searchpage__field:focus-within { border-color: var(--c-ink); }
.searchpage__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: var(--fs-body); }
.searchpage .btn { flex: none; }
.notfound__code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--c-accent); letter-spacing: -0.02em; }

/* list-collections: the reference's category tiles, three across */
.collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 899px) { .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
@media (max-width: 480px) { .collections-grid { grid-template-columns: minmax(0, 1fr); } }
.collections-grid .duo__tile { height: 100%; }
.collections-grid .duo__name { font-size: var(--fs-h3); }

/* store locator (base template, reference look) */
.store-locator { padding: clamp(1.75rem, 3vw, 3rem) var(--pad-x) 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: 44px; padding: 0 2.4rem 0 1.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='%23121212' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem;
  color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--radius-input);
}
.store-selector-item { height: 100%; padding: 1.25rem; background-color: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-muted); font-size: var(--fs-small); }
.store-selector-item strong { display: block; margin-bottom: 0.5rem; color: var(--c-ink); }
.store-selector-item a { color: var(--c-accent); }
.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 defines .btn's pill
   shape and its --accent / --light / --ink colourways, so the platform variants
   alias onto those. */
.btn.btn-primary, .btn.button--full-width:not(.btn--light):not(.button--secondary), button.btn:not([class*="btn--"]) { background-color: var(--c-accent); color: var(--c-accent-ink); }
.btn.btn-primary:hover, .btn.button--full-width:not(.btn--light):not(.button--secondary):hover, button.btn:not([class*="btn--"]):hover { background-color: var(--c-accent-deep); color: var(--c-accent-ink); }
.btn.button--secondary, .btn.btn--secondary { background-color: transparent; border: 1px solid var(--c-line); color: var(--c-ink); }
.btn.button--secondary:hover, .btn.btn--secondary:hover { 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`, which the `button.btn` alias above misses. The form itself
   becomes a centred white card. */
#MainContent form[action$="challenge"] {
  container-type: inline-size;
  width: min(27.5rem, 100% - 2 * var(--gutter));
  margin: calc(3.75rem + clamp(2rem, 5vw, 4rem)) auto calc(5.625rem + 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-h1); 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; min-height: 48px;
  border: var(--border-width) solid transparent; background-color: var(--c-accent); color: var(--c-accent-ink);
  font-size: var(--fs-body); cursor: pointer; appearance: none; -webkit-appearance: none;
}
#MainContent form[action$="challenge"] .btn:hover { background-color: var(--c-accent-deep); }
/* 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.4rem 2rem 0.4rem 0.85rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfb8' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 0.85rem;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  color: inherit; font-size: var(--fs-micro); letter-spacing: 0.06em;
}
.currency-picker option { background-color: var(--c-surface); color: var(--c-ink); }

/* ── 12. Footer additions ──────────────────────────────────────────────────── */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.footer__social a:hover { color: var(--c-accent-soft); }
.footer__social .icon { flex: none; }
/* the store's payment marks (payment_type_image_url) on the reference's white plates */
.footer__pay img { height: 22px; width: auto; }
/* the WhatsApp button app injects a bare <li> into the Help list (global/quick_link) */
.footer__col li > a:not([href]) { cursor: pointer; }
.footer__col ul:empty { display: none; }

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