/* ===========================================================================
   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 header's
   two looks on real section order, the platform surfaces (cart page + drawer,
   quickview, filters, account, search, blog) that arrive in the base theme's class
   vocabulary, and the platform's JS state classes (.hidden, .loading, .transparent,
   .price--on-sale) that need a visible half. Every rule 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 (sticky, floating over a first hero, brand marks, dropdowns, overflow)
    3. Drawers (menu accordions, search panel, cart drawer)
    4. Homepage (the panel rising over the hero, row counts, rails)
    5. Product card (add button contract, badges, grid cells)
    6. Product page (gallery, price states, option pills, quantity, add button, tabs)
    7. Collection (filter bar, filter drawer, empty + sample states, pagination)
    8. Cart (page + drawer skin of the base cart template)
    9. Quickview modal
   10. Content pages (rte, page head, blog, article, search, 404, tiles, stores)
   11. Platform-rendered controls (.btn aliases, promo UI, challenge page, 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 palette so
   those surfaces sit on the same lilac-cream page as everything else. */
:root {
  --color-foreground: 36, 16, 51;
  --color-background: 250, 246, 243;
  --color-base-text: 36, 16, 51;
  --color-base-background-1: 250, 246, 243;
  --color-base-background-2: 255, 255, 255;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 36, 16, 51;
  --color-base-accent-1: 91, 15, 168;
  --color-base-accent-2: 91, 15, 168;
  --color-button: 91, 15, 168;
  --color-button-text: 255, 255, 255;
  --color-link: 91, 15, 168;
  --color-card-hover: 36, 16, 51;
  --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);
  --c-footer-line: var(--c-capsule-line);
}

/* author display rules (.link-arrow, .btn, .tabpanel …) 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; } }
/* a <form> keeps the UA's margin-block-end: 1em — never wanted in this layout */
form { margin: 0; }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 200;
  padding: 0.75rem 1.25rem; background: var(--c-ink); color: var(--c-surface);
  border-radius: var(--radius-button); font-weight: var(--fw-bold); font-size: var(--fs-small);
}
.skip-link:focus { top: 0.75rem; }
main:focus { outline: none; }

/* The reference's phone layouts collapse to one track, 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) then widen the whole page and it scrolls sideways — pin those columns
   to minmax(0, 1fr) so the widget scrolls inside its own box instead. */
@media (max-width: 959px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) { .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (max-width: 859px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }

/* ── 2. Header ────────────────────────────────────────────────────────────────
   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; }
.announce__item { margin: 0; }
/* a message change is a hand-over (init.js §3): the one on show lifts out, the next rises in */
.announce__item.is-leaving { animation: announce-out var(--dur) var(--ease) both; }
.announce__item.is-entering { animation: announce-in 420ms var(--ease); }
@keyframes announce-out { to { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes announce-in { from { opacity: 0; transform: translateY(0.5rem); } }
@media (prefers-reduced-motion: reduce) {
  .announce__item.is-leaving, .announce__item.is-entering { animation: none; }
}

/* SOLID (every page by default): the reference's .header--solid — a white capsule on
   the page ground — pinned under the top edge while scrolling. */
.header { position: sticky; top: 0; }
.header[data-sticky="none"] { position: relative; }
.header__capsule { position: relative; }
.header.is-stuck { padding-block: 0.6rem; transition: padding var(--dur) var(--ease); }
.header.is-stuck .header__capsule { box-shadow: 0 1px 0 var(--c-line), 0 14px 32px var(--c-shadow-soft); }

/* FLOATING: when the homepage opens on a hero ([data-header-overlay] in the first
   section, nothing rendered above it), the reference's .header--float — the dark
   translucent capsule floats ON the photograph, inset from the edges. The header
   keeps its sticky place in the flow; its negative bottom margin pulls the hero
   up under it, so the capsule sits over the picture without the header leaving
   the flow (and stays pinned while scrolling). Only the capsule takes clicks. */
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header {
  background: transparent; padding-block: 0.9rem 0;
  margin-bottom: calc(-0.9rem - var(--header-h));
  pointer-events: none;
}
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .wrap { padding-inline: clamp(0.75rem, 2vw, 2.5rem); }
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .header__capsule {
  pointer-events: auto;
  background: var(--c-capsule-bg); color: var(--c-capsule-ink);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 34px var(--c-shadow);
}
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .header__navlink::after { background: currentColor; }
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .iconbtn:hover { background: var(--c-capsule-line); color: var(--c-capsule-ink); }
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .header__mark--float { display: flex; }
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header .header__mark--solid { display: none; }
/* the floating capsule keeps its air when stuck (the solid one tightens) */
body:has(main > #content_for_index:first-child > :first-child [data-header-overlay]) .header.is-stuck { padding-block: 0.9rem 0; }
/* phones: the hero keeps its ground for the capsule's strip (reference.css), so the
   capsule's shadow would fall on the ground colour — keep it */

/* brand: the solid capsule shows the logo, the floating one the light mark */
.header__brand { display: flex; align-items: center; justify-content: center; min-width: 0; }
.header__mark { display: flex; align-items: center; justify-content: center; min-width: 0; }
.header__mark--float { display: none; }
/* a merchant logo is capped by the header's logo_height setting (default 56px, the
   reference's own size; 44px under 1000px) */
.header__brand img.header__logo, .header__logo img {
  height: var(--logo-h, 56px); max-height: var(--logo-max-height, 56px);
  width: auto; max-width: min(40vw, 240px); object-fit: contain;
}
@media (max-width: 999px) {
  .header__brand img.header__logo { height: min(var(--logo-h, 56px), 44px); }
}
.wordmark b { font-weight: 500; }

/* the cart count is the platform's .cart-count-bubble (hidden at zero) */
.cart-count.hidden, .cart-count-bubble.hidden { display: none !important; }
.cart-count .js-content-cart-count { display: block; }

/* the nav: a flat row of links; a link with a sub-menu opens a white panel */
.header__navlist { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.header__navitem { position: relative; }
.header__navlink { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.header__navlink .icon { width: 0.85rem; height: 0.85rem; transition: transform var(--dur) var(--ease); }
.header__navitem.has-dropdown:hover > .header__navlink .icon,
.header__navitem.has-dropdown:focus-within > .header__navlink .icon { transform: rotate(180deg); }
.navdrop {
  position: absolute; top: calc(100% + 0.9rem); left: -1.25rem; z-index: 5;
  min-width: 14rem; padding: 0.9rem 1.25rem 1rem;
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* the hover bridge across the gap between the capsule and the panel */
.navdrop::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
.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;
}
.navdrop__list, .navdrop__sub { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.navdrop a {
  display: block; padding-block: 0.4rem; font-size: var(--fs-small); font-weight: var(--fw-body);
  letter-spacing: 0; color: var(--c-ink-muted); line-height: 1.35; white-space: normal;
}
.navdrop a:hover { color: var(--c-accent); }
.navdrop .navdrop__link--head {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-ink); padding-bottom: 0.55rem;
  border-bottom: var(--border-width) solid var(--c-line); margin-bottom: 0.3rem;
}
/* the fourth level (the navigation editor's cap) steps in under its grandchild */
.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 */
.navdrop--cols .navdrop__list, .navdrop--mega .navdrop__list { display: block; column-gap: 2.25rem; }
.navdrop--cols .navdrop__list { columns: 2; }
.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-width panel under the capsule */
.header__navitem:has(> .navdrop--mega) { position: static; }
.navdrop--mega { left: 0; right: 0; min-width: 0; padding: 1.5rem 1.75rem 1.75rem; }

/* a menu too long for the capsule's nav column collapses to the menu button + drawer */
@media (min-width: 1000px) {
  .header-section.nav-overflow .header__nav { display: none; }
  .header-section.nav-overflow .header__burger { display: inline-flex; }
}
/* the nav column is the capsule's left third: never let a long menu push the brand */
.header__nav { min-width: 0; overflow: visible; }
.header__tools { min-width: 0; }

/* below the desktop nav the capsule is burger · brand · icons: the side columns keep
   their buttons whole and the BRAND column gives way, so a wide merchant logo shrinks
   instead of pushing the icons off a phone screen */
@media (max-width: 999px) {
  .header__capsule { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
  .header__brand img.header__logo { max-width: 100%; }
}
/* phones under 360px: three 40px icons, a centred brand and the capsule's padding no
   longer fit (the reference ran 44px past a 320px screen) — the capsule tightens and
   the account icon moves into the menu drawer's utility links */
.header__burger { flex: none; }
@media (max-width: 359px) {
  .header__capsule { gap: 0.4rem; padding-inline: 0.55rem; }
  .header__tools { gap: 0; }
  .header__tools .iconbtn, .header__burger { width: 36px; height: 36px; }
  .header__account { display: none; }
  .wordmark { font-size: 1.2rem; }
}

/* ── 3. Drawers ─────────────────────────────────────────────────────────────── */
.drawer__panel { max-width: 100vw; }
.drawer__title { margin: 0; }
.drawer__foot { flex: none; }
/* the menu: the reference's big serif rows; a row with a sub-menu is a native
   <details> accordion holding its children, grandchildren and a fourth level */
.navlist > a, .navlist__group > summary { display: block; }
.navlist__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.375rem; color: var(--c-ink);
  border-bottom: var(--border-width) solid var(--c-line);
}
.navlist__group > summary::-webkit-details-marker { display: none; }
.navlist__group > summary:hover { color: var(--c-accent); }
.navlist__group > summary .icon { transition: transform var(--dur) var(--ease); }
.navlist__group[open] > summary .icon { transform: rotate(180deg); }
.navlist__children, .navlist__grandchildren { margin: 0; padding: 0.35rem 0 0.75rem 0.9rem; list-style: none; }
.navlist__children { border-bottom: var(--border-width) solid var(--c-line); }
.navlist__grandchildren { padding-block: 0 0.25rem; }
.navlist .navlist__children a {
  padding: 0.45rem 0; border-bottom: 0; font-family: var(--font-body); font-size: var(--fs-small);
  color: var(--c-ink-muted);
}
.navlist .navlist__children a:hover { color: var(--c-accent); }
.drawer__utility { display: grid; gap: 0.1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.drawer__utility a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-ink-muted);
}
.drawer__utility a:hover { color: var(--c-accent); }
.drawer__currency { margin-top: 1.25rem; }

/* search: the panel drops from the top; the form is the reference's pill field */
.drawer--search .drawer__panel { max-height: min(85vh, 44rem); }
.drawer--search .drawer__body { padding-inline: 0; }
.searchpanel { display: grid; gap: 1.25rem; padding-bottom: 0.5rem; }
.searchfield input[type="search"]::-webkit-search-cancel-button { opacity: 0.5; }
.searchfield input { min-width: 0; font-size: var(--fs-body); }
.searchfield__go {
  flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-accent-ink);
}
.searchfield__go:hover { background: var(--c-ink); }
.searchfield .searchfield__go .icon { color: inherit; }
.searchpanel__empty { margin: 0; color: var(--c-ink-muted); font-size: var(--fs-small); }
.searchpanel__results { display: grid; margin: 0; padding: 0; list-style: none; }
.searchpanel__results .search-hit { align-items: center; }
.searchpanel__results .search-hit:hover .search-hit__title { color: var(--c-accent); }
.search-hit__title { display: block; }
.search-hit__price { white-space: nowrap; }
.searchpanel__results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.searchpanel__all { justify-self: start; }
.searchpanel__suggest .eyebrow { margin-bottom: 0.6rem; }
.searchpanel__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.searchpanel__chips .tab { display: inline-block; }

/* cart drawer — the shared cart template in the reference's right-hand drawer */
.drawer--cart .drawer__panel { overflow: hidden; }
.drawer__count { color: var(--c-ink-subtle); font-weight: var(--fw-body); }
.drawer--cart .drawer__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-top: 0; }
.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; }
.drawer__loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
}
/* 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: var(--c-bg); }
.drawer__loading.hidden { display: none !important; }
.drawer__loading .spinner { width: 2.75rem; height: 2.75rem; }
.drawer__loading .path { stroke: var(--c-accent); }

/* ── 4. Homepage ───────────────────────────────────────────────────────────── */
/* the page rises over the hero's foot on a rounded panel — the reference's .panel,
   carried by whichever section comes right after a hero */
#content_for_index > :has(> .hero) + * {
  position: relative; z-index: 5;
  margin-top: calc(var(--hero-overlap) * -1);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--c-bg);
}
.hero__link { display: block; height: 100%; }
.hero__slide picture img { display: block; }
.hero__arrow { cursor: pointer; }
.hero__arrow:disabled { opacity: 0.4; cursor: default; }

/* merchant-set counts: a row with fewer or more items than the reference's fills
   its row instead of leaving empty columns */
@media (min-width: 760px) {
  .badges[style*="--badge-cols"] { grid-template-columns: repeat(var(--badge-cols), minmax(0, 1fr)); }
}
.badges--plain { border-bottom: 0; }
.badges { margin: 0; }
@media (min-width: 800px) {
  .steps[style*="--steps-cols"] { grid-template-columns: repeat(var(--steps-cols), minmax(0, 1fr)); }
}
.steps { margin: 0; padding: 0; list-style: none; }
.stats[style*="--stats-cols"] { grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr)); }
.stats { margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .promos[style*="--promo-cols"] { grid-template-columns: repeat(min(var(--promo-cols), 4), minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .social-band[style*="--social-cols"] { grid-template-columns: repeat(min(var(--social-cols), 4), minmax(0, 1fr)); }
}
/* two cards a row cannot shrink below their longest handle ("@lumi22supreme"): under
   400px the row pushed a 320px page 44px wide — stack them there, and let a long
   handle wrap inside its card at any width */
.social-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 399px) { .social-band { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 800px) { .social-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.social-card__t, .social-card__s { overflow-wrap: anywhere; }
.clinical__cta { margin-bottom: 0; }

/* a rail head holds a section head beside the arrows */
.railhead .sec-head { margin-bottom: 0; }
/* the arrows say where the rail can go: dimmed at an end, gone when everything fits */
.railnav .iconbtn:disabled { opacity: 0.35; cursor: default; background: transparent; color: inherit; }
.railnav:has(.iconbtn.is-idle) { visibility: hidden; }
.rail { scroll-padding-inline: 0; }
/* a tab with one product lines it up with the others instead of stretching */
.tabpanel { min-width: 0; }
.tabbar { margin-top: 0; }
.tab { cursor: pointer; }
.quote__text { margin: 0; }
.quote { margin: 0; }

/* ── 5. Product card ───────────────────────────────────────────────────────── */
/* <add-to-cart-button> wraps the round add button and its loading overlay: a grid
   cell the size of the button, so the spinner lands on the button */
.card__addwrap { position: relative; display: grid; flex: none; }
.card__addwrap > * { grid-area: 1 / 1; }
.card__add.addToClassList { cursor: pointer; }
a.card__add { color: var(--c-accent-ink); }
/* while the add is in flight the plus goes invisible under the spinner */
.card__add.transparent { color: transparent; }
.card__addwrap .loading-overlay {
  position: absolute; inset: 0; top: 0; right: 0; z-index: 3; width: auto; min-height: 0;
  display: grid; place-items: center; pointer-events: none; transform: none;
}
.card__addwrap .loading-overlay.hidden { display: none !important; }
.card__addwrap .loading-overlay__spinner { width: 1.15rem; display: block; }
.card__addwrap .loading-overlay .spinner { width: 1.15rem; height: 1.15rem; }
.card__addwrap .loading-overlay .path { stroke: var(--c-accent-ink); }
/* sold out: the badge in the picture's corner says it once, in ink */
.card__badge--out { background: var(--c-ink); color: var(--c-surface); }
/* real product titles run long (keyword-rich store titles): two lines, then an ellipsis */
.card__title a {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card__title a:hover { color: var(--c-accent); }
.card__eyebrow, .card__title, .card__pack { margin: 0; }
.card__price .money, .card__was .money { white-space: nowrap; }
.card__from { font-weight: var(--fw-body); color: var(--c-ink-subtle); font-size: var(--fs-small); }
.card__media > a { display: block; height: 100%; }
/* collection / search grids: each card sits in an li.grid__item (the platform's
   filter render and the Infinite Scrolling app both use that wrapper) and fills it */
.grid--cards { margin: 0; padding: 0; list-style: none; }
.grid--cards > .grid__item { display: grid; min-width: 0; }
.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); }
/* rails hold bare cards */
.rail > .card { min-width: 0; }
/* the platform wishlist heart (collection/product_top) sits on the tile'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: rgb(255 255 255 / 0.9); box-shadow: none;
}
.card > .wishlist-icon-btn .wishlist-love-icon { font-size: 1rem; }

/* ── 6. Product page ───────────────────────────────────────────────────────── */
.product-page { padding-bottom: var(--section-y-tight); }
.product-page > .wrap > .crumbs { padding-top: 1.5rem; }
/* the gallery is one scroll-snap track of every product image (init.js §6):
   swipe on touch, drag with a mouse; reference.css's .gallery__main is the frame */
.gallery { min-width: 0; }
.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.25rem 0.6rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent); color: var(--c-ink);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (max-width: 959px) { .gallery__count { display: block; } }
/* desktop: prev / next arrows fade in while the pointer is over the image — the
   hero's round capsule arrow at gallery scale; touch screens swipe */
.gallery__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: none;
  width: 2.75rem; height: 2.75rem; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gallery__arrow--prev { left: 1rem; }
.gallery__arrow--next { right: 1rem; }
.gallery__arrow:hover { background: var(--c-accent); color: var(--c-accent-ink); }
@media (hover: hover) and (min-width: 960px) {
  .gallery__arrow { display: inline-flex; }
  .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; }
}
/* thumbnails: a row of small rounded squares, scrolling when there are many */
.gallery__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 4.5rem; grid-template-columns: none;
  overflow-x: auto; scrollbar-width: none; position: relative;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (max-width: 959px) { .gallery__thumbs { grid-auto-columns: 3.5rem; gap: 0.45rem; } }
.gallery__thumb { padding: 0; }

/* the buy box sticks beside the gallery, clear of the pinned header; a buy box
   taller than the screen sticks by its foot (--buybox-h, init.js) */
@media (min-width: 960px) {
  .buybox { top: min(calc(var(--belltree-header-h, 0px) + 1.5rem), calc(100vh - var(--buybox-h, 0px) - 1.5rem)); }
}
.buybox { min-width: 0; }
.buybox h1 { overflow-wrap: anywhere; }
/* price states: global.js toggles .price--on-sale from the selected variant */
.buybox__prices.price { font-size: inherit; line-height: 1.2; color: var(--c-ink); }
.buybox__prices:not(.price--on-sale) .buybox__was,
.buybox__prices:not(.price--on-sale) .buybox__save { display: none; }
.buybox__save:empty { display: none; }
.price-item .money, .buybox__was .money { white-space: nowrap; }
.buybox__intro { margin: 0 0 1.5rem; }

/* variant options — EasyStore.OptionSelectors output, dressed by init.js as pills */
.options.product-form__input { display: grid; gap: 1.25rem; max-width: none; margin: 0 0 1.5rem; }
.options .selector-wrapper, .options .options__axis { margin: 0; padding: 0; border: 0; min-width: 0; display: block; }
.options fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.options .picklabel, .options legend, .options .selector-wrapper > label { padding: 0; }
.options .picklist { margin-bottom: 0; }
.options input.options__radio, .options .picklist 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 .pick — restate the reference's pill */
.options .picklist input[type="radio"] + label.pick,
.product-quickview .picklist input[type="radio"] + label.pick {
  display: inline-flex; align-items: center; margin: 0; padding: 0.7rem 1.15rem; cursor: pointer; line-height: 1.3;
  border: 0; border-radius: var(--radius-pill); background: var(--c-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  color: var(--c-ink); font-size: var(--fs-small); letter-spacing: 0; text-align: center;
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.options .picklist input[type="radio"] + label.pick:hover,
.product-quickview .picklist input[type="radio"] + label.pick:hover { box-shadow: inset 0 0 0 2px var(--c-accent); }
.options .picklist input[type="radio"]:checked + label.pick,
.product-quickview .picklist input[type="radio"]:checked + label.pick { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); }
.options .picklist input[type="radio"]:focus-visible + label.pick,
.product-quickview .picklist input[type="radio"]:focus-visible + label.pick { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.options .picklist input[type="radio"].disabled + label.pick,
.options .picklist input[type="radio"]:disabled + label.pick,
.product-quickview .picklist input[type="radio"].disabled + label.pick { opacity: 0.5; text-decoration: line-through; }
/* "Pills 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 pills, tile-tall. */
.options .picklist input[type="radio"] + label.pick.variant-img-label-wrapper,
.product-quickview .picklist input[type="radio"] + label.pick.variant-img-label-wrapper { min-height: 3.75rem; }
.options .picklist input[type="radio"] + label.pick:has(.variant-img-label),
.product-quickview .picklist input[type="radio"] + label.pick:has(.variant-img-label) {
  position: relative; width: 3.75rem; min-width: 0; height: 3.75rem; padding: 0; overflow: hidden;
}
.options .picklist label.pick .variant-img-label,
.product-quickview .picklist label.pick .variant-img-label { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.options .picklist label.pick .variant-img-label + .label__text,
.product-quickview .picklist label.pick .variant-img-label + .label__text {
  display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.options .picklist input[type="radio"]:checked:not(:focus-visible) + label.pick:has(.variant-img-label),
.product-quickview .picklist input[type="radio"]:checked:not(:focus-visible) + label.pick:has(.variant-img-label) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.options select, .options .options__select, .product-quickview select.single-option-selector {
  width: 100%; max-width: 22rem; padding: 0.8rem 2.6rem 0.8rem 1.15rem;
  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='%23241033' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
  border: 0; box-shadow: inset 0 0 0 var(--border-width) 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> */
.product-form__quantity { display: flex; }
.qty { height: 3.2rem; }
.qty input { font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; outline: none; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty button .icon { pointer-events: none; }
.buyrow .buybox__add { flex: 1; margin: 0; min-width: 0; }
.buybox__addprice { font-weight: var(--fw-body); opacity: 0.85; white-space: nowrap; }

/* 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 .buybox__addprice, .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--primary .loading-spinner .path { stroke: var(--c-accent-ink); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.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; }
.assure { margin-block: 1.4rem 0; padding-inline: 0; list-style: none; }
.buybox__share { margin-top: 1.5rem; }
/* 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-band[hidden] { display: none; }
.related-band { padding-top: var(--section-y-tight); }

/* detail tabs: the description is the store's own rich text */
.pdp-tabs .tabbar { margin-bottom: 1.5rem; }
.pdp-tabs .prose { max-width: 70ch; }
.prose ul { margin: 0; padding: 0; list-style: none; }
.prose .rte ul { display: block; margin-top: 0.9rem; padding-left: 1.25rem; list-style: disc; }
.prose .rte li { display: list-item; }

/* share (snippets/social-sharing) — 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: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-subtle); }
.share__link {
  position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--c-surface); color: var(--c-ink);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.share__link:hover { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: none; }
.share__copied {
  position: absolute; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%);
  padding: 0.3rem 0.6rem; white-space: nowrap; border-radius: 6px; background: var(--c-ink); color: var(--c-surface);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.share__copy.is-copied .share__copied { opacity: 1; }

/* ── 7. Collection ────────────────────────────────────────────────────────── */
.collection-page { padding-bottom: var(--section-y-tight); }
.pagehead .crumbs { margin-bottom: 1rem; }
.pagehead h1 { margin: 0; }
.pagehead .lede.rte { margin-top: 0.8rem; max-width: 46rem; }
.pagehead .lede.rte > * + * { margin-top: 0.6rem; }
/* the reference's sticky pill bar, clear of the pinned header */
.filterbar { top: var(--belltree-header-h, 0px); gap: 0.6rem 1rem; justify-content: space-between; }
.filterbar__pills { display: flex; gap: 0.4rem; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.filterbar__pills::-webkit-scrollbar { display: none; }
.filterbar__pills .tab { flex: none; white-space: nowrap; }
.filterbar__tools { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.filterbar__count { margin: 0; white-space: nowrap; }
.filterbar__filter { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; }
.filterbar__badge {
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 0.625rem; letter-spacing: 0;
}
.filterbar__sort { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.filterbar__sort select {
  min-width: 0; max-width: 13rem; padding: 0.6rem 2.2rem 0.6rem 1.1rem; cursor: pointer;
  border: 0; border-radius: var(--radius-pill); background: var(--c-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.03em; color: var(--c-ink);
  text-overflow: ellipsis; appearance: none; -webkit-appearance: none;
}
.filterbar__sort select:hover { box-shadow: inset 0 0 0 var(--border-width) var(--c-accent); }
.filterbar__sort .icon { position: absolute; right: 0.85rem; pointer-events: none; color: var(--c-ink-subtle); }
@media (max-width: 699px) {
  /* nowrap is load-bearing: the reference's bar wraps, and a WRAPPING column sizes each
     line to its widest item — the pill row's full scroll width (2,700px at 375) */
  .filterbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .filterbar__tools { margin-left: 0; justify-content: space-between; }
  .filterbar__count { order: -1; margin-right: auto; font-size: var(--fs-micro); }
  .filterbar__sort select { max-width: 11rem; }
}
/* the filter drawer (snippets/collection-filters): groups of pill chips */
.facet { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.facet__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.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 input:checked + .tab { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: none; }
.facet__chip input:focus-visible + .tab { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.facet__price { display: flex; align-items: center; gap: 0.5rem; color: var(--c-ink-subtle); }
.facet__price .searchfield { flex: 1; min-width: 0; padding: 0.6rem 1rem; }
.facet__price input { width: 100%; border: 0; background: transparent; outline: none; -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__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.facet__clear { background: none; padding: 0; }
.facet__apply { flex: 1; max-width: 14rem; margin-left: auto; }

.collection-empty { display: grid; justify-items: start; gap: 1.25rem; padding-block: 1rem 2rem; color: var(--c-ink-muted); }
.collection-sample .linehead:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.linehead .lede { margin: 0; }

/* pagination (base snippet, reference look: round pills) */
.pagination-wrapper { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination .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.6rem; height: 2.6rem; padding: 0 0.6rem;
  border-radius: var(--radius-pill); background: var(--c-surface); box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  color: var(--c-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none;
}
.pagination .pagination__item:hover { box-shadow: inset 0 0 0 var(--border-width) var(--c-accent); color: var(--c-accent); }
.pagination .pagination__item--current { background: var(--c-accent); box-shadow: none; color: var(--c-accent-ink); }
.pagination .pagination__item .icon { width: 0.7rem; height: 0.7rem; fill: currentColor; stroke: none; }
.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-block: 0 var(--section-y); }
.pagehead--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
#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; }
/* each row already draws its own rule — drop the base list's second one */
#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); letter-spacing: var(--tracking-display); color: var(--c-ink); }
/* base icons are FILLED drawings; the reference's .icon is a stroke icon */
#cart-template .icon, .cart-notification .icon, vouchers-modal .icon { fill: currentColor; stroke: none; }

/* base .button family -> the reference's pill .btn--primary / ghost */
#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 1.6rem; border: 0;
  border-radius: var(--radius-button); background: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: 0.02em; text-transform: none; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow 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: var(--c-ink); color: var(--c-surface); }
#cart-template .button--secondary, .vouchers-modal .button--secondary { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 var(--border-width) var(--c-line); }
#cart-template .button--secondary:hover, .vouchers-modal .button--secondary:hover { background: var(--c-surface); 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: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-ink-subtle); 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: var(--c-surface); border-radius: var(--radius-media); overflow: hidden; }
.cart-item__image { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.cart-item__details { padding-right: 1rem; font-size: var(--fs-small); }
.cart-item__name { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.4; 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: 2.6rem; padding-inline: 0.25rem;
  border: 0; border-radius: var(--radius-pill); background: var(--c-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
}
#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-muted); cursor: pointer;
}
#cart-template .quantity__button:hover { color: var(--c-accent); }
#cart-template .quantity__button .icon { width: 0.7rem; height: 0.7rem; 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); font-weight: var(--fw-bold); 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-subtle); box-shadow: none;
}
#cart-template .cart-action-icon .button:hover { background: var(--c-accent-soft); color: var(--c-accent); }
#cart-template .cart-action-icon .button svg { width: 1rem; height: 1rem; }
#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); font-weight: var(--fw-bold); }
.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); font-weight: var(--fw-body); }
.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-success); }
.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-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); }
.totals__subtotal-value { margin: 0; font-weight: var(--fw-bold); font-size: 1.2rem; 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-radius: var(--radius-card); background: var(--c-surface); box-shadow: inset 0 0 0 var(--border-width) var(--c-line); }
.voucher-toggle-content { display: grid; gap: 0.1rem; }
.voucher-toggle-title { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.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.8rem 1.15rem; background: var(--c-surface); color: var(--c-ink);
  border: 0; box-shadow: inset 0 0 0 var(--border-width) var(--c-line); border-radius: var(--radius-input); font: inherit; font-size: var(--fs-small);
}
discount-input .field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-accent); }
discount-input .field__label { display: none; }
discount-input .button { padding-inline: 1.25rem; }
.subtotal-discount-label, .remove_voucher_btn { color: var(--c-success); }
.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: var(--radius-card); 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; fill: none; }

/* 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 (#F8F9FA panel, Inter) 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: 36, 16, 51;
  --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: var(--c-surface); color: var(--c-ink);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop); font-family: var(--font-body); overflow: hidden;
}
vouchers-modal #vouchers-modal-backdrop.active { background-color: var(--c-scrim); }
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: 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: var(--c-bg); color: var(--c-ink);
  border: 0; box-shadow: inset 0 0 0 var(--border-width) var(--c-line); border-radius: var(--radius-input); 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 { box-shadow: inset 0 0 0 2px var(--c-accent); 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); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-subtle);
}
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: 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: var(--fw-bold); letter-spacing: 0.02em; font-size: 0.8em;
  color: var(--c-accent); border-color: var(--c-accent); border-radius: var(--radius-pill);
}
vouchers-modal .voucher-widget-button:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
/* a voucher the cart does not qualify for: dimmed, but the reason stays legible */
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.3rem; }
.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: 36, 16, 51;
  --color-background: 255, 255, 255;
  background: var(--c-bg); color: var(--c-ink);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-pop);
  max-height: 92vh; overflow-y: auto; width: min(950px, 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); 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-radius: var(--radius-panel) var(--radius-panel) 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: var(--c-surface); border-radius: var(--radius-card); overflow: hidden; }
.product-quickview__content-wrapper { color: var(--c-ink); }
.product-quickview .quickview-title { display: block; color: var(--c-ink); text-decoration: none; }
.product-quickview .quickview__name {
  margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-display);
}
.product-quickview .quickview-title:hover .quickview__name { color: var(--c-accent); }
.product-quickview .price { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--c-ink); margin-bottom: 1.25rem; }
.product-quickview .price .badge { display: none !important; }
.product-quickview .price .price-item--regular { color: var(--c-ink); }
.product-quickview .price__sale .price-item--regular { color: var(--c-ink-subtle); font-size: 1rem; font-weight: var(--fw-body); }
.product-quickview .product-form__input { margin-bottom: 1.25rem; }
.product-quickview .picklabel, .product-quickview .product-form__input > label, .product-quickview legend { padding: 0; }
.product-quickview fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.product-quickview .picklist input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); }
.product-quickview .product-form__quantity { display: block; margin: 1.25rem 0; 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: var(--c-bg); box-shadow: 0 -1.25rem 1.5rem var(--c-bg); padding-bottom: 1.25rem; }
.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); border-radius: 50%; }
.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 ─────────────────────────────────────────────────────── */
.content-page { padding-bottom: var(--section-y); }
.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: var(--fs-h3); }
.rte h3, .rte h4 { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-bold); 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%; border-radius: var(--radius-media); }
.rte strong, .rte b { color: var(--c-ink); font-weight: var(--fw-bold); }
.rte blockquote { margin-inline: 0; border-left: 2px solid var(--c-accent); padding-left: 1.25rem; color: var(--c-ink); font-family: var(--font-display); }
.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-subtle); font-weight: var(--fw-bold); }
.table-wrapper { overflow-x: auto; }
.rte iframe, .rte video { max-width: 100%; }
.page-body { padding-top: 0.5rem; }
.related-inline { margin-top: var(--section-y-tight); }

/* blog + article */
.blog-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); 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: flex; flex-direction: column; background: var(--c-surface-2); border-radius: var(--radius-card); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; padding: 1.1rem 1.2rem 1.3rem; }
.post-card__body .link-arrow { margin-top: auto; padding-top: 0.4rem; }
.post-card__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); 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 { margin: 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.article-hero { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-card); background: 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; margin-top: 1rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-subtle); }
.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: center; gap: 0.75rem; max-width: var(--container-narrow); margin-bottom: clamp(2rem, 4vw, 3rem); }
.searchpage-form .searchfield { flex: 1; min-width: 0; }
.searchpage-form .btn { flex: none; }
.notfound__code { margin-top: clamp(1.5rem, 4vw, 3rem); font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--c-accent); letter-spacing: -0.02em; }
.notfound .pagehead { padding-top: 1rem; }
.collection-tiles { margin-top: 0.5rem; }

/* store locator (base template, reference look) */
.store-locator { padding-block: clamp(1.75rem, 3vw, 3rem) var(--section-y); }
.store-locator-heading { display: grid; gap: 1rem; margin-bottom: 2rem; }
.store-locator-heading h1 { font-size: var(--fs-h1); }
.store-locator .select { position: relative; display: inline-flex; }
.store-locator .select__select {
  appearance: none; -webkit-appearance: none; min-width: 16rem; padding: 0.75rem 2.6rem 0.75rem 1.15rem;
  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='%23241033' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
  color: var(--c-ink); border: 0; box-shadow: inset 0 0 0 var(--border-width) var(--c-line); border-radius: var(--radius-input);
}
.store-selector-item { height: 100%; padding: 1.25rem; background: var(--c-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--c-ink-muted); font-size: var(--fs-small); }
.store-selector-item strong { display: block; margin-bottom: 0.5rem; color: var(--c-ink); font-weight: var(--fw-bold); }
.store-selector-item a:not(.link-arrow) { color: var(--c-accent); }
.store-selector-item address { font-style: normal; margin-top: 0.5rem; }
.store-locator__empty { font-size: var(--fs-h3); color: var(--c-ink); }

/* ── 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 only its --primary / --ghost / --light colourways, so the platform
   variants alias onto those. */
.btn.btn-primary, .btn.button--full-width:not(.btn--light):not(.btn--ghost), button.btn:not([class*="btn--"]) { background: var(--c-accent); color: var(--c-accent-ink); }
.btn.btn-primary:hover, .btn.button--full-width:not(.btn--light):not(.btn--ghost):hover, button.btn:not([class*="btn--"]):hover { background: var(--c-ink); color: var(--c-surface); }
.btn.button--secondary, .btn.btn--secondary { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 var(--border-width) var(--c-line); }
.btn.button--secondary:hover, .btn.btn--secondary:hover { background: var(--c-surface); color: var(--c-ink); }
.btn.button--full-width { width: 100%; }
/* the platform's account/vouchers/vouchers.css — linked on every page by the cart
   drawer, and loaded AFTER this file — styles two generic class names this theme
   also uses: `.tab { margin: 30px 0 20px; padding-right: 3px }` (every pill tab
   stood 50px taller, the product tabs, filter pills and search chips alike) and,
   under 700px, `.btn { padding: 10px 20px }` (every pill button shrank). Restate
   the reference's own, one class stronger, on the theme's surfaces only. */
.tabbar .tab, .filterbar .tab, .searchpanel__chips .tab, .facet__chip .tab { margin: 0; padding: 0.6rem 1.1rem; row-gap: 0; flex-wrap: nowrap; white-space: nowrap; }
.btn.btn--primary, .btn.btn--ghost, .btn.btn--light { padding: 0.9rem 1.6rem; }
.btn.btn--lg { padding: 1.05rem 2rem; }
#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; }
/* the price snippet's badges (quickview) are base vocabulary; the reference's .badge
   is the homepage claim strip — keep them apart */
.price .badge { display: none; }

/* 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) and its .customer-scoped
   .text-center never reach it, and its submit is an `input.btn`, which the
   `button.btn` alias above misses. 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: calc(2rem + clamp(2rem, 5vw, 4rem)) auto var(--section-y);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  background: var(--c-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  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); letter-spacing: var(--tracking-display);
}
#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; padding-block: 0.95rem;
  border: 0; background: var(--c-accent); color: var(--c-accent-ink);
  font-size: var(--fs-small); cursor: pointer; appearance: none; -webkit-appearance: none;
}
#MainContent form[action$="challenge"] .btn:hover { background: var(--c-ink); color: var(--c-surface); }
/* 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='%236f5c7c' 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: var(--border-width) solid var(--c-line); border-radius: var(--radius-pill);
  color: inherit; font-size: var(--fs-micro); letter-spacing: 0.06em;
}
.footer .currency-picker { border-color: var(--c-footer-line); }
.currency-picker option { background: var(--c-surface); color: var(--c-ink); }

/* ── 12. Footer additions ──────────────────────────────────────────────────── */
.footer__brand { min-width: 0; }
.footer__home { display: inline-block; }
.footer__logo { display: block; max-height: 4rem; max-width: 14rem; width: auto; object-fit: contain; }
.footer__blurb { margin-bottom: 0; }
.footer__col h3 { margin-top: 0; }
.footer__list { margin: 0; padding: 0; list-style: none; }
/* merchant menu titles can be one long unbreakable word ("Eggs/Noodles/Rice");
   `anywhere` lets them wrap inside the column instead of widening the page */
.footer__list a, .footer__list li { overflow-wrap: anywhere; }
@media (min-width: 860px) {
  .footer__top[style*="--footer-cols"] { grid-template-columns: 1.4fr repeat(var(--footer-cols), minmax(0, 1fr)); }
}
.footer__social a { transition: background-color var(--dur) var(--ease); background: var(--c-footer-line); }
.footer__bar { border-top-color: var(--c-footer-line); }
.footer__copy { opacity: 0.85; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer__legal a { opacity: 0.8; }
.footer__legal a:hover { opacity: 1; text-decoration: underline; }
/* the payment marks ship on light artboards — each rides a small light plate */
.footer__pay { flex-wrap: wrap; margin: 0 0 0 auto; padding: 0; list-style: none; opacity: 1; }
.footer__pay li { display: inline-flex; align-items: center; height: 1.6rem; padding: 0.15rem 0.35rem; border-radius: 4px; background: #fff; }
.footer__pay img { height: 100%; width: auto; max-width: 3.5rem; object-fit: contain; }
.footer__bar > :last-child { margin-left: auto; }
.footer__bar > .footer__legal { margin-left: 0; }
@media (max-width: 699px) {
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .footer__bar > :last-child, .footer__pay { margin-left: 0; }
}

/* ── 13. Motion kill-switch + reduced motion ─────────────────────────────────
   ?ts-anim=off (animations.js) flattens every effect to its end state for
   deterministic screenshots; [data-reveal] sections show at once. */
html[data-anim-off] *, html[data-anim-off] *::before, html[data-anim-off] *::after { transition: none !important; animation: none !important; }
html[data-anim-off] [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .navdrop { transition: none; }
}