/* ===========================================================================
   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 cap, wordmark, dropdowns, nav overflow)
    3. Drawers (menu accordions, search form, cart drawer)
    4. Homepage additions (hero, strip / tile / mark counts, marquee speed, offer)
    5. Product card (add button contract, samples, wishlist)
    6. Product page (price states, option chips, quantity, loading, description, share)
    7. Collection (filter chips, empty state, pagination)
    8. Cart (page + drawer skin of the base cart template)
    9. Quickview modal
   10. Content pages (rte, page, blog, article, search, 404, list-collections, stores)
   11. Platform-rendered controls (.btn aliases, promo UI, 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 warm palette
   so those surfaces sit on the same paper as everything else. */
:root {
  --color-foreground: 43, 31, 25;
  --color-background: 245, 241, 234;
  --color-base-text: 43, 31, 25;
  --color-base-background-1: 245, 241, 234;
  --color-base-background-2: 255, 255, 255;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 43, 31, 25;
  --color-base-accent-1: 96, 59, 46;
  --color-base-accent-2: 96, 59, 46;
  --color-button: 96, 59, 46;
  --color-button-text: 255, 255, 255;
  --color-link: 96, 59, 46;
  --color-card-hover: 43, 31, 25;
  --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 (.link-arrow, .btn …) 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.popneutral-locked { overflow: hidden; }
body { background: var(--c-bg); }

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  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 `grid-template-columns: 1fr`, 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: 899px) {
  .pdp__grid, .coll__layout, .story__inner, .offer__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

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

/* ── 2. Header additions ───────────────────────────────────────────────────── */
/* the section wrapper holds the strip, 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; }

/* a merchant logo is capped by the header's logo_height setting (default 44px);
   the reference places its own file by height, 44px at rest and 36px stuck */
.header__logo { flex: none; min-width: 0; }
.header__logo img { max-height: var(--logo-max-height, 48px); width: auto; max-width: min(46vw, 260px); object-fit: contain; }
@media (max-width: 1023px) {
  .header .header__img { height: min(var(--logo-h), 40px); }
  .header.is-stuck .header__img { height: min(var(--logo-h-stuck), 34px); }
}
.header__wordmark {
  display: block; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.15rem; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; color: var(--c-header-ink);
}
@media (min-width: 1024px) { .header__wordmark { font-size: 1.3rem; } }

.header__count.hidden, .cart-count-bubble.hidden { display: none !important; }

/* dropdowns — the reference nav is flat; a menu with children opens a white panel */
.header__navitem { position: relative; }
.navdrop {
  position: absolute; top: 100%; left: -1.25rem; z-index: 5;
  min-width: 14rem; padding: 0.9rem 1.25rem 1rem;
  background: var(--c-surface); color: var(--c-ink);
  border: var(--border-width) solid var(--c-line); 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 under the link */
.navdrop::before { content: ""; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem; }
.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;
}
/* reference.css lays out `.header__nav ul` as its flat caps row and styles every
   `.header__nav a` as a caps link with a growing underline — both reach the
   dropdowns, so the panels re-assert their own list layout and link type */
.header__nav .navdrop__list, .header__nav .navdrop__sub { display: grid; gap: 0; }
.header__nav .navdrop a {
  display: block; padding-block: 0.4rem; font-size: var(--fs-small); font-weight: var(--fw-body);
  letter-spacing: 0; text-transform: none; color: var(--c-ink-muted); line-height: 1.35;
}
.header__nav .navdrop a::after { display: none; }
.header__nav .navdrop a:hover { color: var(--c-accent); }
.header__nav .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;
}
.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 header */
.header__bar { position: relative; }
.header__navitem:has(> .navdrop--mega) { position: static; }
.navdrop--mega { left: var(--gutter); right: var(--gutter); min-width: 0; padding: 1.5rem 1.75rem 1.75rem; }
@media (min-width: 900px) { .navdrop--mega { left: var(--gutter-lg); right: var(--gutter-lg); } }

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

/* ── 3. Drawers ─────────────────────────────────────────────────────────────── */
.drawer__nav a, .drawer__group > summary { color: var(--c-ink); }
.drawer__nav a:hover, .drawer__group > summary:hover { color: var(--c-accent); }
.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: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-line);
}
.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__children { padding: 0.35rem 0 0.75rem 0.9rem; border-bottom: 1px solid var(--c-line); }
.drawer__nav .drawer__children a {
  font-weight: var(--fw-body); letter-spacing: 0; text-transform: none;
  padding: 0.45rem 0; border-bottom: 0; color: var(--c-ink-muted);
}
.drawer__nav .drawer__grandchildren { padding-left: 0.9rem; }
.drawer__utility { display: grid; gap: 0.1rem; margin-top: 1.5rem; }
.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: 0.14em;
  text-transform: uppercase; color: var(--c-ink-muted);
}
.drawer__utility a:hover { color: var(--c-accent); }
.drawer__currency { margin-top: 1.25rem; }

/* search drawer — a real form; its suggestions are the reference's pill chips */
.drawer--search .drawer__head { margin-bottom: 1.5rem; }
.search__input::-webkit-search-cancel-button { opacity: 0.5; }
.search__suggest { gap: 0.75rem; }
.search__suggest .drawer__label { margin: 0; }
.search__suggest .side__list { margin-bottom: 0; }

/* cart drawer — the shared cart template, in the reference's right-hand drawer */
.drawer--cart .drawer__panel { padding: 0; overflow: hidden; }
.drawer--cart .drawer__head { padding: 1.25rem 1.25rem 0; margin-bottom: 1rem; }
.drawer__count { color: var(--c-ink-subtle); font-weight: var(--fw-body); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem 1.25rem; 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: 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; }
.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__slide picture img { display: block; }

/* merchant-set counts: a strip, tile row or mark row with fewer items than the
   reference's fills its row instead of leaving empty columns */
@media (min-width: 900px) {
  .values__list[style*="--values-cols"] { grid-template-columns: repeat(var(--values-cols), minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .tiles__grid[style*="--tiles-cols"] { grid-template-columns: repeat(var(--tiles-cols), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .marks[style*="--marks-cols"] { grid-template-columns: repeat(var(--marks-cols), minmax(0, 1fr)); }
  .tiles__grid:has(> .tile:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* phones: the tile row snaps to the gutter, not to the screen edge (the reference's
   scroll-snap row has no scroll-padding, so its first tile snapped flush left) */
@media (max-width: 699px) {
  .tiles__grid { scroll-padding-inline: var(--gutter); }
}
/* the reading column is narrow — its product rows run three across */
@media (min-width: 700px) {
  .wrap--narrow .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* a stockist without a logo: its name set in the display face on the plate */
.mark__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mark__name {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 0.95rem; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--c-ink);
}

/* the review marquee's speed is a section setting */
.reviews__track[style*="--marquee-dur"] { animation-duration: var(--marquee-dur); }
.review__who { min-width: 0; }

/* the centred grid's optional link sits under the cards */
.grid__more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* offer form — a required email field that the browser validates */
.offer__input:invalid:not(:placeholder-shown) { outline: 2px solid var(--c-cream); outline-offset: 2px; }

/* ── 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 { color: var(--c-accent-ink); }
/* 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, so :focus-within is not
   enough to hold it) */
.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 button's own anchors to sit exactly on the pill and centres
   the spinner inside that box. `top: auto` is load-bearing: the vendored
   component-loading-overlay.css sets `top: 0` under 750px, which — with a height
   here — would win over `bottom` and pin the spinner to the top of the tile. */
.card__addwrap .loading-overlay {
  position: absolute; top: auto; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 3; width: auto; min-height: 2.75rem; transform: none;
  display: grid; place-items: center; pointer-events: none;
}
.card__addwrap .loading-overlay__spinner { width: 1.4rem; display: block; }
.card__addwrap .loading-overlay .path { stroke: var(--c-accent-ink); }
/* on touch the add control is a round button in the tile's corner */
@media (hover: none) {
  .card__addwrap .loading-overlay { left: auto; width: 2.75rem; }
}
.card__price .money { white-space: nowrap; }
.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 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 ───────────────────────────────────────────────────────── */
/* the gallery is one scroll-snap track of every product image (init.js §4):
   swipe on touch, drag with a mouse; reference.css still styles each image */
.gallery__main { position: relative; }
.gallery__track {
  position: relative; display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab; outline: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gallery__track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.gallery__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__slide img { -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: rgb(255 255 255 / 0.85); 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: 899px) { .gallery__count { display: block; } }
/* desktop: prev / next arrows fade in while the pointer is over the image — the
   hero's round arrow (reference .hero__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-arrow-bg); 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-surface); color: var(--c-accent); }
@media (hover: hover) and (min-width: 900px) {
  .gallery__arrow { display: inline-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; }
}
/* thumbnails: a fixed small size instead of a sixth of the gallery (~100px on desktop) */
.gallery__thumbs { position: relative; grid-auto-columns: 4rem; gap: 0.5rem; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .gallery__thumbs { grid-auto-columns: 3rem; gap: 0.4rem; margin-top: 0.6rem; } }
.thumb { cursor: pointer; border-radius: 6px; }
.thumb.is-active:hover { border-color: var(--c-accent); }

/* price states: global.js toggles .price--on-sale from the selected variant */
.buy__price.price { display: flex; font-size: var(--fs-h3); letter-spacing: 0; line-height: 1.35; color: var(--c-ink); }
.buy__price:not(.price--on-sale) .buy__was,
.buy__price:not(.price--on-sale) .tag--sale { display: none; }
.buy__price .tag--sale:empty { display: none; }
.buy__price .tag--sale { align-self: center; }

/* variant options — EasyStore.OptionSelectors output, dressed by init.js */
.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 .options__label, .options legend, .options .selector-wrapper > label {
  display: block; padding: 0; margin: 0 0 0.6rem;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-subtle);
}
.options input.options__radio, .options .swatches 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 .swatch — restate the reference's pill */
.options .swatches input[type="radio"] + label.swatch,
.product-quickview .swatches input[type="radio"] + label.swatch {
  display: inline-block; margin: 0; padding: 0.6rem 1rem; cursor: pointer; line-height: 1.3;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface);
  color: var(--c-ink); font-size: var(--fs-small); letter-spacing: 0; text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.options .swatches input[type="radio"] + label.swatch:hover,
.product-quickview .swatches input[type="radio"] + label.swatch:hover { border-color: var(--c-accent); }
.options .swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.options .swatches input[type="radio"]:checked + label.swatch { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.options .swatches input[type="radio"]:focus-visible + label.swatch { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.options .swatches input[type="radio"].disabled + label.swatch,
.options .swatches input[type="radio"]:disabled + label.swatch { opacity: 0.5; text-decoration: line-through; background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); }
.options select, .options .options__select {
  width: 100%; max-width: 22rem; padding: 0.75rem 2.5rem 0.75rem 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='%232b1f19' 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> */
.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; }
.buy__row .product-form__quantity { display: flex; }
.buy__row .buy__add { margin: 0; }

/* 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--solid .loading-spinner .path { stroke: var(--c-accent-ink); }

.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 .desc type */
.desc.rte { font-size: var(--fs-small); line-height: 1.7; color: var(--c-ink-muted); }
.desc.rte h1, .desc.rte h2 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3);
  line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--c-ink); margin: 0 0 0.75rem;
}
.desc.rte h3, .desc.rte h4 {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-ink); margin: 1.5rem 0 0.6rem;
}
.desc.rte ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.desc.rte ul li { position: relative; padding-left: 1.1rem; margin: 0; }
.desc.rte ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.buy__share { margin-top: 1.75rem; }
/* 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; }

/* share (snippets/social-sharing) — the reference's round icon buttons */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.share__label { margin-right: 0.35rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; 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: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.share__link:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.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: 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 ────────────────────────────────────────────────────────── */
/* the description is the store's own rich text — long copy, images, tables, embeds — so
   it spans the container. Only the collection head opts in (--wide): the blog, page,
   search, 404 and list-collections heads share .coll__head and keep the 52ch measure,
   which here moves to .coll__headtext so it still resolves against the body font. */
.coll__head--wide { max-width: none; }
.coll__headtext { max-width: 52ch; }
.coll__head .lede.rte p { margin: 0; }
.coll__head .lede.rte > * + * { margin-top: 0.5rem; }
.coll__layout--full { grid-template-columns: minmax(0, 1fr); }
/* a store with many filter values makes the sticky sidebar taller than the screen —
   let it scroll on its own instead of hiding its foot until the grid ends */
@media (min-width: 900px) {
  .side { max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 0.5rem; }
}
.coll__main { min-width: 0; }
.toolbar:has(> span:first-child:empty) { justify-content: flex-end; }

/* filter chips: the reference's pill links, as checkbox labels */
.side__filters .side__list--chips { margin-bottom: 1.75rem; }
.side__chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem;
  font-size: var(--fs-micro); color: var(--c-ink-muted); background: transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.side__chip:hover { border-color: var(--c-accent); color: var(--c-ink); }
.side__chip:has(input:checked) { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.side__chip:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.side__price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; color: var(--c-ink-subtle); }
.side__price label { flex: 1; min-width: 0; }
.side__price input {
  width: 100%; padding: 0.5rem 0.8rem; background: 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;
}
.side__price input::-webkit-outer-spin-button, .side__price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.side__price input:focus { outline: none; border-color: var(--c-accent); }
.side__clear { background: none; padding: 0; }
/* The filter groups live in a .drawer--filter (snippets/collection-filters).
   Desktop flattens it back into the sidebar — the reference's inline chip groups;
   the [hidden] arm out-ranks the global [hidden] rule, which init.js sets on a
   drawer after it closes. */
@media (min-width: 900px) {
  .drawer--filter, .drawer--filter[hidden] {
    position: static; display: block !important; z-index: auto;
    visibility: visible; opacity: 1; pointer-events: auto; background: none; transition: none;
  }
  .drawer--filter .drawer__panel { position: static; translate: none; width: auto; padding: 0; overflow: visible; background: none; color: inherit; transition: none; }
  .drawer--filter .drawer__head, .drawer--filter .side__apply { display: none; }
  .drawer--filter .drawer__foot { padding: 0; }
}
/* phones: the reference's slide-in drawer, its actions pinned to the foot */
@media (max-width: 899px) {
  .drawer--filter .drawer__panel { display: flex; flex-direction: column; width: min(92vw, 400px); }
  .drawer--filter .drawer__foot {
    position: sticky; bottom: -1.25rem; z-index: 1; margin: auto -1.25rem -1.25rem; padding: 1rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--c-surface); border-top: 1px solid var(--c-line);
  }
  .drawer--filter .side__apply { flex: 1; max-width: 14rem; margin-left: auto; }
  .drawer--filter .side__title:first-of-type { margin-top: 0.25rem; }
}

/* the toolbar's Filter button — phones only; its count follows the active filters */
.toolbar__filter { display: none; }
@media (max-width: 899px) {
  .toolbar__filter {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    height: 2.4rem; padding: 0 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill);
    background: var(--c-surface); color: var(--c-ink);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase;
  }
  .toolbar__filter:hover { border-color: var(--c-accent); }
  .toolbar__filter-count {
    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;
  }
  .toolbar { gap: 0.6rem; }
  .toolbar:has(.toolbar__filter) .toolbar__count { margin-right: auto; }
  .toolbar__count { white-space: nowrap; font-size: var(--fs-micro); }
  /* the select sizes to its longest option; let it shrink and truncate instead */
  .toolbar__sort { flex: 0 1 10rem; min-width: 0; }
  .toolbar__sort > span { display: none; }
  .toolbar__sort select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  /* categories as chips only when the section asks for them on phones */
  .side__cats--desktop { display: none; }
  .coll__layout--cats-desktop { gap: 0; }
}
@media (max-width: 899px) {
  .side__filters .side__list--chips, .side__price { margin-bottom: 1.25rem; }
  .side__price { max-width: 20rem; }
}

.coll__empty { display: grid; justify-items: start; gap: 1.25rem; padding-block: 1rem 2rem; color: var(--c-ink-muted); }

/* 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__item {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.6rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface);
  color: var(--c-ink-muted); font-size: var(--fs-small); text-decoration: none;
}
.pagination__item:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination__item--current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.pagination__item .icon { width: 0.7rem; height: 0.7rem; }
.pagination__item--next .icon { transform: rotate(90deg); }
.pagination__item--prev .icon { transform: rotate(-90deg); }
.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: 1.25rem var(--section-y); }
.cart-page .edit-head { margin-top: clamp(1.5rem, 4vw, 3rem); }
#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 .button family -> the reference's pill .btn--solid (primary) / outline */
#cart-template .button, .vouchers-modal .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.8rem 1.75rem; border: 1px solid var(--c-accent);
  border-radius: var(--radius-button); background: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#cart-template .button::before, #cart-template .button::after,
.vouchers-modal .button::before, .vouchers-modal .button::after { display: none; }
#cart-template .button:hover, .vouchers-modal .button:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
#cart-template .button--secondary, .vouchers-modal .button--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
#cart-template .button--secondary:hover, .vouchers-modal .button--secondary:hover { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
#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-bold); letter-spacing: 0.14em;
  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: 1px solid var(--c-line); }
.cart-item__media { width: 6rem; padding-right: 1.25rem; }
.cart-item__media a { display: block; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; }
.cart-item__image { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.04); }
.cart-item__details { padding-right: 1rem; font-size: var(--fs-small); }
.cart-item__name { display: block; font-size: 0.78rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; 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: 1px solid var(--c-line); border-radius: var(--radius-pill); background: 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); 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-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); 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-accent); }
.discounts__discount { display: flex; align-items: center; gap: 0.35rem; }
.discounts__discount svg { width: 0.9rem; height: 0.9rem; fill: currentColor; stroke: none; }
.cart_form__error { margin-top: 1rem; }
.note.errors, .errors { color: var(--c-sale); font-size: var(--fs-small); }

/* footer block: vouchers, totals, checkout */
.cart__footer { display: flex; justify-content: flex-end; padding-top: 1.75rem; }
.cart__blocks { width: 100%; max-width: 26rem; display: grid; gap: 1rem; }
.totals { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; position: relative; }
.totals__subtotal { margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink); }
.totals__subtotal-value { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem; 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); border-radius: var(--radius-card); background: var(--c-surface); }
.voucher-toggle-content { display: grid; gap: 0.1rem; }
.voucher-toggle-title { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; 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.75rem 1.1rem; background: 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-accent); }
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: 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; }

/* 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: 43, 31, 25;
  --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: 1px solid var(--c-line); 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-veil); }
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 { margin: 0 -0.5rem 0 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--c-ink); }
vouchers-modal .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: 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-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: 0.14em; 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); font-weight: var(--fw-bold); 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.1em; text-transform: uppercase; font-size: 0.75em;
  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: 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 ~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: 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: 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: 43, 31, 25;
  --color-background: 255, 255, 255;
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-card); 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-veil); 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 — the 94vw desktop width left a gap on the right */
@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: var(--c-surface-2); border-radius: var(--radius-card); overflow: hidden; }
.product-quickview .product-quickview__img-wrapper img { mix-blend-mode: multiply; filter: brightness(1.04); }
.product-quickview__content-wrapper { color: var(--c-ink); }
.product-quickview .quickview-title { display: block; color: var(--c-ink); text-decoration: none; }
.product-quickview .buy__title { margin-bottom: 0.75rem; }
.product-quickview .price { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); margin-bottom: 1.25rem; }
.product-quickview .price .badge { display: none !important; }
.product-quickview .product-form__input { margin-bottom: 1.25rem; }
.product-quickview .options__label, .product-quickview .product-form__input > label, .product-quickview legend {
  display: block; margin: 0 0 0.6rem; padding: 0;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-subtle);
}
.product-quickview fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.product-quickview .swatches input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); }
.product-quickview .swatches input[type="radio"]:checked + label.swatch { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.product-quickview .swatches input[type="radio"].disabled + label.swatch { opacity: 0.5; text-decoration: line-through; }
.product-quickview .swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.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-surface); box-shadow: 0 -1.25rem 1.5rem var(--c-surface); 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); }
.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); font-size: var(--fs-small); 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: 0.14em; 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-card); }
.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.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.rte th { font-size: var(--fs-micro); letter-spacing: 0.14em; 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-head { padding-bottom: 0; }
.page-head .coll__head { padding-bottom: 0; }
.page-body { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--section-y); }
.page-body .rte { font-size: var(--fs-body); }
.page-body > .wrap > .edit-head { margin-top: var(--section-y-tight); }

/* blog + article */
.blog-grid { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); 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.75rem; align-content: start; justify-items: start; }
.post-card__media { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__meta { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); }
.post-card__title { 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 { font-size: var(--fs-small); color: var(--c-ink-muted); }
.article-hero { aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-card); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); 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; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-subtle); margin-top: 1rem; }
.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, list-collections */
.searchpage-form { display: flex; align-items: center; gap: 1rem; max-width: var(--container-narrow); margin-bottom: clamp(2rem, 4vw, 3rem); }
.searchpage-form .search { margin-inline: 0; }
.searchpage-form .btn { flex: none; }
.search-grid { margin-top: 0.5rem; }
.notfound { padding-bottom: var(--section-y); }
.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 .coll__head { padding-top: 1rem; }
@media (min-width: 1100px) { .coll-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 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 .select { position: relative; display: inline-flex; }
.store-locator .select__select {
  appearance: none; -webkit-appearance: none; min-width: 16rem; padding: 0.7rem 2.4rem 0.7rem 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='%232b1f19' 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: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-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; }

/* ── 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 --solid / --paper colourways, so the platform variants alias
   onto those. */
.btn.btn-primary, .btn.button--full-width:not(.btn--paper), button.btn:not([class*="btn--"]) { background: var(--c-accent); color: var(--c-accent-ink); }
.btn.btn-primary:hover, .btn.button--full-width:not(.btn--paper):hover, button.btn:not([class*="btn--"]):hover { background: var(--c-ink); color: var(--c-surface); }
.btn.button--secondary, .btn.btn--secondary { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); }
.btn.button--secondary:hover, .btn.btn--secondary:hover { border-color: var(--c-accent); color: var(--c-accent); }
.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) 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,
   at the same offset (customer.css's shell margin + the .customer.login padding). */
#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: var(--c-surface); border: var(--border-width) solid var(--c-line); border-radius: var(--radius-card);
  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); letter-spacing: var(--tracking-display); text-transform: uppercase;
}
#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: var(--border-width) solid transparent; background: var(--c-accent); color: var(--c-accent-ink);
  font-size: var(--fs-small); letter-spacing: 0.07em; 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='%23705b4f' 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 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-ring); }
.currency-picker option { background: var(--c-surface); color: var(--c-ink); }

/* ── 12. Footer additions ──────────────────────────────────────────────────── */
.footer__wordmark {
  display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.1rem; line-height: 1.1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink); white-space: nowrap;
}
.footer__plate img { max-width: 12rem; object-fit: contain; }
.footer__col h4 + ul { margin-bottom: 0; }
.footer__follow .social + .footer__note + h4, .footer__follow .footer__note + h4 { margin-top: 0; }
.footer__copy { display: grid; gap: 0.25rem; }
.footer__bottom { align-items: center; }
.pay img { max-width: 4.5rem; }

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