/* ===========================================================================
   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's own wrappers around each homepage section, the platform surfaces
   (cart page + drawer, quick view, option radios, filters, account, search,
   blog) that arrive in the base theme's class vocabulary, and the state classes
   the platform's JS toggles (.hidden, .loading, .transparent, .price--on-sale),
   each of which needs 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. The sidebar grid over the platform's section wrappers
    3. Header additions (logo cap, no-tab-bar fallback)
    4. Search panel (form, suggestions, live hits)
    5. Drawers (category drawer utilities, cart drawer body)
    6. Homepage additions (benefit columns, section tools)
    7. Product card (add button contract, loading, samples, markdowns)
    8. Product page (price states, swatches, quantity, loading, description)
    9. Collection (filter pills, empty state, pagination, category grid)
   10. Cart (page + drawer skin of the base cart template)
   11. Quick view modal
   12. Content pages (rte, page, blog, article, search, 404, store locator)
   13. Platform-rendered controls (.btn aliases, currency picker)
   14. Footer additions
   15. Motion kill-switch
   =========================================================================== */

/* ── 1. Platform utilities + base-theme variable bridge ─────────────────────
   The base component sheets (cart, price, quick view, account) paint from the
   base theme's comma-triplet variables; mapped here onto this palette. */
:root {
  --color-foreground: 22, 33, 15;
  --color-background: 255, 255, 255;
  --color-base-text: 22, 33, 15;
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 242, 243, 241;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 40, 76, 34;
  --color-base-accent-1: 40, 76, 34;
  --color-base-accent-2: 40, 76, 34;
  --color-button: 40, 76, 34;
  --color-button-text: 255, 255, 255;
  --color-link: 40, 76, 34;
  --color-card-hover: 22, 33, 15;
  --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 (.section__all, .cbar__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; } }
body.overflow-hidden { overflow: hidden; }
main:focus { outline: none; }
::selection { background: var(--c-accent-soft); color: var(--c-ink); }

.wrap--narrow { max-width: calc(var(--container-narrow) + 4rem); }

/* ── 2. The sidebar grid over the platform's section wrappers ────────────────
   The reference lays the homepage out as [lead | sidebar | main] on one grid.
   Here the sections come from the editor: the platform wraps them in
   #content_for_index > #easystore-section-<key>, one wrapper per section. The
   template's .page__main and that list step out of the box model (display:
   contents), so each wrapper is a cell of the reference's grid: every section
   sits in the column beside the sidebar, and a hero that is FIRST spans the
   full width on phones — the reference's full-bleed band above the category
   rail — and heads the column on desktop. The sidebar spans every row after it
   so its sticky list travels the whole page. */
.page--home > .page__main,
.page--home #content_for_index { display: contents; }
.page--home.page--sidebar [id^="easystore-section-"] { grid-column: 2; min-width: 0; }
.page--home.page--sidebar #content_for_index > :first-child:has(.hero) { grid-column: 1 / -1; grid-row: 1; }
.page--home.page--sidebar > .sidenav { grid-column: 1; grid-row: 1 / span 99; }
.page--home.page--sidebar:has(#content_for_index > :first-child .hero) > .sidenav { grid-row: 2 / span 99; }
@media (min-width: 1024px) {
  .page--home.page--sidebar #content_for_index > :first-child:has(.hero) { grid-column: 2; }
  .page--home.page--sidebar > .sidenav,
  .page--home.page--sidebar:has(#content_for_index > :first-child .hero) > .sidenav { grid-row: 1 / span 99; }
}
/* each section is the only child of its own wrapper, so the reference's
   first/last-of-type spacing would match EVERY section — re-anchored to the
   platform's list: the section after a leading hero sits tight under it, and
   only the last section closes the page with a full step */
.page--home [id^="easystore-section-"] .section:last-of-type { padding-bottom: 0; }
.page--home #content_for_index > :last-child .section { padding-bottom: var(--section-y); }
.page--home #content_for_index > :first-child:has(.hero) + * .section { padding-top: var(--section-y-tight); }
/* a hero band without its benefit strip keeps all four corners on desktop */
@media (min-width: 1024px) {
  .page--sidebar .page__lead > .hero:last-child { border-radius: var(--radius-card); }
}

/* ── 3. Header additions ───────────────────────────────────────────────────── */
/* The header section renders the announcement strip, the header and the drawers
   inside one wrapper, and a sticky element cannot travel outside its parent — the
   wrapper is only as tall as strip + header, so the header scrolled away with it.
   display: contents lets the header stick against the page, as the reference's
   header (a direct child of <body>) does. The drawers and tab bar are fixed, so
   losing the wrapper's box changes nothing else. */
.header-section { display: contents; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.header[data-sticky="none"] { position: relative; }
/* the logo height setting (default 44px) sets the rest height; the stuck and
   phone heights keep the reference's ratios (34 / 30 / 24 of 44) */
.header .header__logo { display: inline-flex; align-items: center; }
.header .header__logo img {
  height: var(--logo-max-height, 44px); max-height: var(--logo-max-height, 44px);
  width: auto; max-width: min(46vw, 280px); object-fit: contain;
}
.header.is-stuck .header__logo img { height: calc(var(--logo-max-height, 44px) * 0.773); }
/* the platform's count hooks sit on the reference's badges (.tool__count,
   .tabbar__count); cart-drawer.js / cart-notification.js toggle .hidden at zero */
.cart-count-bubble { pointer-events: none; }
.tool__count .js-content-cart-count, .tabbar__count .js-content-cart-count { line-height: 1; }
@media (max-width: 767px) {
  .header .header__logo img { height: calc(var(--logo-max-height, 44px) * 0.682); }
  .header.is-stuck .header__logo img { height: calc(var(--logo-max-height, 44px) * 0.545); }
  /* no tab bar (switched off in the header): the header keeps its own account,
     cart and categories controls, and the page needs no room at its foot */
  .header-section:not(:has(.tabbar)) .header__tools { display: flex; }
  .header-section:not(:has(.tabbar)) .header__cats { display: inline-flex; width: 38px; height: 38px; padding: 0; justify-content: center; }
  .header-section:not(:has(.tabbar)) .header__cats-label { display: none; }
  body:not(:has(.tabbar)) { padding-bottom: 0; }
  .tool { width: 38px; height: 38px; }
}

/* ── 4. Search panel ─────────────────────────────────────────────────────── */
.searchpanel__field::-webkit-search-cancel-button { cursor: pointer; }
.searchpanel__results:empty { display: none; }
.searchpanel__results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.search-hit__img { display: block; }
.search-hit__price { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.search-hit__price .card__from, .search-hit__price .card__was { font-size: var(--fs-micro); font-weight: var(--fw-body); color: var(--c-ink-muted); }
.searchpanel__all {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent);
}
.searchpanel__all:hover { background: var(--c-mint-2); }
.searchpanel__suggest { padding: 0.875rem 1rem 1.125rem; }
.searchpanel__hint { margin-bottom: 0.5rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); color: var(--c-ink-muted); }
.searchpanel__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.searchpanel__chip {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 0.875rem;
  border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-ink);
  font-size: var(--fs-small);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.searchpanel__chip:hover { background: var(--c-accent-soft); color: var(--c-accent); }

/* ── 5. Drawers ─────────────────────────────────────────────────────────────── */
.navdrawer__utility {
  display: grid; gap: 0.125rem;
  padding: 0.75rem 1.125rem 0.5rem;
  border-top: var(--border-width) solid var(--c-line);
}
.navdrawer__list { padding-bottom: 0.75rem; }
.navdrawer__utility a {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-muted);
}
.navdrawer__utility a:hover { color: var(--c-accent); }
.navdrawer__currency { padding: 0.5rem 1.125rem 1.5rem; }

/* cart drawer — the shared base cart template inside the reference's drawer */
.cart .cart__panel { position: relative; width: min(420px, 92vw); overflow: hidden; }
.cart__count { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-subtle); }
.cart__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem 1.125rem 1.25rem; display: flex; flex-direction: column; }
.cart__body > #cart-template { flex: 1; display: flex; flex-direction: column; }
.cart__body #cart-form { flex: 1; display: flex; flex-direction: column; }
.cart__loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.6);
}
.cart__loading.hidden { display: none !important; }
/* the top bar stays above the loading veil, so the drawer can be closed mid-request */
.cart__top { position: relative; z-index: 4; background: var(--c-surface); }
/* the sales-pop app's toast floats at z-index 99998 over the top of a phone screen —
   right on the drawers' close buttons. It stands down while a drawer (html lock from
   init.js) or the quick view (body lock from product-quickview.js) is open. */
html.dinomart-locked [id$="sales_pop__apps"], body.overflow-hidden [id$="sales_pop__apps"] { display: none; }
.cart__loading .spinner { width: 2.75rem; height: 2.75rem; }
.cart__loading .path { stroke: var(--c-accent); }

/* ── 6. Homepage additions ─────────────────────────────────────────────────── */
.benefit__link { display: flex; align-items: center; gap: 0.625rem; min-width: 0; color: inherit; }
.benefit__link:hover strong { color: var(--c-accent); }
@media (min-width: 768px) {
  .benefits__list[style*="--benefit-count"] { grid-template-columns: repeat(var(--benefit-count), minmax(0, 1fr)); }
}
.section__tools { flex: none; display: flex; align-items: center; gap: 0.75rem; }
.section__head--stack { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.section__lede { font-size: var(--fs-small); color: var(--c-ink-muted); max-width: var(--container-narrow); }
.raildots:empty { display: none; }
/* the promo band's chat tile as a link, and a pop tile with no picture panel */
a.promo__tile--chat { transition: background var(--dur) var(--ease); }
a.promo__tile--chat:hover { background: var(--c-accent-hover); }
.promo__tile--box { transition: translate var(--dur) var(--ease); }
.promo__tile--box:hover { translate: 0 -2px; }

/* ── 7. Product card ───────────────────────────────────────────────────────── */
/* The button's row at the foot of the tile: <add-to-cart-button>, or a plain div
   for a sold-out or sample card. margin-top: auto pins it down the card's column;
   the button and its loading overlay share the one grid cell, so the spinner
   lands on the button. */
.card__addwrap { display: grid; margin-top: auto; padding-top: 0.625rem; container-type: inline-size; }
.card__addwrap > * { grid-area: 1 / 1; }
.card__add.addToClassList { cursor: pointer; }
a.card__add { color: var(--c-accent-ink); }
.card__add.transparent { color: transparent; }
/* the button shows a spinner while it adds, or while the quick view is fetched */
.card__addwrap .loading-overlay {
  position: relative; inset: auto; z-index: 1; width: auto;
  display: grid; place-items: center; pointer-events: none;
}
.card__addwrap .loading-overlay.hidden { display: none !important; }
.card__addwrap .loading-overlay__spinner { width: 1.25rem; display: block; }
.card__addwrap .loading-overlay .path { stroke: var(--c-accent-ink); }
.card__addwrap:has(.loading-overlay:not(.hidden)) .card__add .icon { visibility: hidden; }
/* a narrow tile (three across on a small phone) keeps the words, drops the icon */
@container (width < 7.25rem) { .card__add .icon { display: none; } }
.card__badge { z-index: 1; }
/* phones: a sold-out card drops its (disabled) button — the "Sold out" bar says it all */
@media (max-width: 767px) { .card.is-sold .card__addwrap { display: none; } }
.card__was { margin-left: 0.375rem; font-size: var(--fs-micro); font-weight: var(--fw-body); color: var(--c-ink-subtle); }
.card__price .card__was { text-decoration: line-through; }
.card--sample .card__media img { mix-blend-mode: normal; object-fit: cover; padding: 0; }
.grid.is-loading { opacity: 0.4; pointer-events: none; transition: opacity var(--dur) var(--ease); }
/* Every collection card sits in the platform's li.grid__item wrapper — the
   section renders it, /filtered_section_html returns it, and the Infinite
   Scrolling app appends by it. A grid itself, so the card stretches to the row's
   height and its add button lines up with the neighbours'. */
.grid > .grid__item { display: grid; min-width: 0; list-style: none; }
/* the platform wishlist heart (collection/product_top) takes the packshot's top-left corner */
.card > .wishlist-icon-btn {
  position: absolute !important; top: 0.4375rem; left: 0.4375rem; z-index: 2;
  width: 2.25rem !important; height: 2.25rem; background: rgb(255 255 255 / 0.92); box-shadow: var(--shadow-card);
}
.card > .wishlist-icon-btn .wishlist-love-icon { font-size: 1rem; }
@media (max-width: 767px) {
  .card > .wishlist-icon-btn { top: 0.3125rem; left: 0.3125rem; width: 1.875rem !important; height: 1.875rem; }
  .card > .wishlist-icon-btn .wishlist-love-icon { font-size: 0.875rem; }
}

/* ── 8. Product page ───────────────────────────────────────────────────────── */
/* gallery: the grey stage is a scroll-snap track of full-width slides (init.js
   §5) — swiped natively on touch, dragged with a mouse, stepped by the thumbs */
.pdp__stage {
  display: flex; place-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom;
}
.pdp__stage::-webkit-scrollbar { display: none; }
.pdp__stage:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pdp__stage.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.pdp__stage.is-dragging * { user-select: none; }
.pdp__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.pdp__stage:has(.pdp__slide + .pdp__slide) { cursor: grab; }
/* smaller thumbs than the reference's 64/72px squares */
.pdp__thumbs { gap: 0.375rem; margin-top: 0.5rem; }
.pdp__thumb { width: 52px; border-radius: 8px; }
@media (min-width: 1024px) { .pdp__thumb { width: 56px; } }
/* prev/next over the stage: hidden until the pointer is over it, and only on
   screens that hover — touch swipes. The end arrow is disabled, so it stays hidden. */
.pdp__viewer { position: relative; }
.pdp__arrow {
  position: absolute; top: 50%; z-index: 2;
  width: 42px; height: 42px; display: none; place-items: center;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.94); color: var(--c-ink); box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(-50%) scale(0.92);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pdp__arrow--prev { left: 0.75rem; }
.pdp__arrow--next { right: 0.75rem; }
.pdp__arrow:hover { background: var(--c-accent); color: var(--c-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .pdp__arrow { display: grid; }
  .pdp__viewer:hover .pdp__arrow:not(:disabled),
  .pdp__arrow:focus-visible:not(:disabled) { opacity: 1; transform: translateY(-50%); }
  .pdp__arrow:disabled { pointer-events: none; }
}
/* two columns from 768: the gallery sticks under the header while the buy column
   scrolls past. Its width is capped by the screen height so the stage and the
   thumbs always fit below the header (a short laptop gets a smaller square). */
@media (min-width: 768px) {
  .pdp__media {
    --pdp-stick: calc(var(--h-header-stuck) + 1.5rem);
    position: sticky; top: var(--pdp-stick); align-self: start;
    width: 100%; max-width: calc(100dvh - var(--pdp-stick) - 5.5rem);
  }
}
/* price states: global.js toggles .price--on-sale from the selected variant */
.pdp__price.price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.625rem;
  margin-top: 0.875rem;
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display); line-height: 1.2; color: var(--c-ink);
}
.pdp__price .price-item { display: inline; }
.pdp__price:not(.price--on-sale) .pdp__was,
.pdp__price:not(.price--on-sale) .pdp__save { display: none; }
.pdp__save:empty { display: none; }
.pdp__was { font-family: var(--font-body); }

/* the variant picker — EasyStore.OptionSelectors' output, dressed by init.js */
.pdp__variants, .qv__variants { display: grid; gap: 1rem; margin-top: 1.25rem; }
.pdp__variants:not(:has(.selector-wrapper, fieldset, select:not(.hide))) { display: none; }
.pdp__variants .selector-wrapper, .qv__variants .selector-wrapper,
.pdp__option { margin: 0; padding: 0; border: 0; min-width: 0; display: block; }
.pdp__option legend { padding: 0; }
.pdp__variants .selector-wrapper::after, .qv__variants .selector-wrapper::after { display: none; }
.swatch__radio {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
  clip-path: inset(50%); pointer-events: none;
}
.swatches--text { display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: none; overflow: visible; }
.swatches--text .swatch { min-width: 3.25rem; padding: 0.5rem 0.875rem; }
.swatches--text .swatch__label { font-size: var(--fs-small); -webkit-line-clamp: 1; }
.swatch { cursor: pointer; margin: 0; }
.swatch__radio:checked + .swatch { box-shadow: inset 0 0 0 2px var(--c-accent); background: var(--c-mint-2); }
.swatch__radio:checked + .swatch .swatch__label { color: var(--c-ink); font-weight: var(--fw-bold); }
.swatch__radio:focus-visible + .swatch { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.swatch__radio.disabled + .swatch, .swatch__radio:disabled + .swatch { opacity: 0.42; }
.swatch__radio.disabled + .swatch .swatch__img, .swatch__radio:disabled + .swatch .swatch__img { filter: grayscale(1); }
.pdp__select {
  width: 100%; max-width: 22rem; height: 44px; padding: 0 2.5rem 0 1rem;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6455' 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: var(--border-width) solid var(--c-line); border-radius: var(--radius-input);
  color: var(--c-ink); appearance: none; -webkit-appearance: none;
}

/* quantity — the reference's .qty pill, driven by <quantity-input> */
quantity-input.qty { display: flex; }
.qty__input { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pdp__buy .product-form__quantity, .qv__buy .product-form__quantity { display: flex; flex: none; }
/* app controls the platform inserts after the buy row (product/button app snippet —
   the wishlist's `a.btn.wishlist`) sit a clear step below it, full width at the
   add-to-cart button's height, instead of touching it */
.pdp__buy ~ .btn { display: flex; width: 100%; min-height: 50px; margin-top: 1rem; }
/* the wishlist is a secondary action: the reference's ghost button (white, accent
   ink and edge), so the add-to-cart pill stays the one filled button */
.pdp__buy ~ .btn.wishlist {
  background: var(--c-surface); color: var(--c-accent);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-accent);
}
.pdp__buy ~ .btn.wishlist:hover { background: var(--c-mint-2); color: var(--c-accent); }


/* the add button's in-flight state (product-form.js adds .loading) */
.btn .loading-spinner { display: none; }
.btn.loading { position: relative; pointer-events: none; }
.btn.loading .btn__text { visibility: hidden; }
.btn.loading .loading-spinner { display: grid; place-items: center; position: absolute; inset: 0; }
.btn .loading-spinner .spinner { width: 1.35rem; height: 1.35rem; }
.btn .loading-spinner .path { stroke: var(--c-accent-ink); }
.btn[disabled], .btn:disabled { background: var(--c-ink-subtle); color: var(--c-surface); cursor: not-allowed; }

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

.pdp__desc { margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--border-width) solid var(--c-line); }
.pdp__share { margin-top: 1.25rem; }
.pdp-desc__body { max-width: 52rem; }
.related-band[hidden] { display: none; }
.related-band:has(#recommend-products-content:empty) { padding: 0; }

/* share (snippets/social-sharing) — round icon buttons */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.share__label { margin-right: 0.25rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); color: var(--c-ink-muted); }
.share__link {
  position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-ink);
}
.share__link:hover { background: 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.55rem; 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; }

/* ── 9. Collection ────────────────────────────────────────────────────────── */
.chead__blurb.rte p { margin: 0 0 0.5rem; }
.chead__blurb.rte > :last-child { margin-bottom: 0; }
/* the filter bar — ONE set of controls, two presentations (snippets/collection-filters):
   desktop drops each facet's panel from its pill; phones put a Filter button in one
   row with the sort select and open every facet, expanded, in a slide-in panel */
.cbar .facets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.facets__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.facets__label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-muted); }
.facet { position: relative; }
.facet__trigger { cursor: pointer; user-select: none; }
.facet.is-open > .facet__trigger { background: var(--c-accent-soft); color: var(--c-accent); }
.facet__caret { transition: rotate var(--dur) var(--ease); }
.facet.is-open .facet__caret { rotate: 180deg; }
.facet__count {
  min-width: 1.125rem; padding: 0 0.3rem; line-height: 1.125rem; text-align: center;
  border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 0.625rem;
}
.facet__panel {
  display: none;
  position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 20;
  min-width: 15rem; max-height: 22rem; overflow-y: auto; padding: 0.5rem;
  background: var(--c-surface); border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
.facet.is-open > .facet__panel { display: block; }
.facet__option { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem; border-radius: 8px; cursor: pointer; font-size: var(--fs-small); color: var(--c-ink); }
.facet__option:hover { background: var(--c-mint-2); }
.facet__option input, .facet--toggle input { accent-color: var(--c-accent); width: 1rem; height: 1rem; margin: 0; }
.facet__name { flex: 1; }
.facet__n { font-size: var(--fs-micro); color: var(--c-ink-subtle); }
.facet.is-open > .facet__panel--price { display: flex; }
.facet__panel--price { gap: 0.625rem; padding: 0.875rem; }
.facet__price { display: grid; gap: 0.3rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-muted); }
.facet__price input {
  width: 6.5rem; height: 38px; padding: 0 0.75rem; background: var(--c-surface-2); color: var(--c-ink);
  border: var(--border-width) solid transparent; border-radius: var(--radius-input);
}
.facet__price input:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface); }
.facet--toggle { cursor: pointer; }
.facets__clear { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.facets__sort { display: flex; align-items: center; }
.facets__select { position: relative; padding-right: 0.5rem; }
.facets__select select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0 1.25rem 0 0; background: transparent; border: 0; outline: none;
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink);
}
.facets__select select option { background: var(--c-surface); color: var(--c-ink); font-weight: var(--fw-body); }
.facets__select > .icon:last-child { position: absolute; right: 0.625rem; pointer-events: none; }
.facets__select:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.facets__toggle { position: relative; }
.facets__toggle .facet__count { margin-left: 0.125rem; }

@media (min-width: 768px) {
  /* the panel shell steps out of the box model: its groups sit in the bar as pills.
     [hidden] is the drawer's closed state from a phone-width session — restated so
     rotating back to a wide screen never hides the filters */
  .facets__drawer, .facets__drawer[hidden], .facets__panel, .facets__foot { display: contents !important; }
  .facets__toggle, .facets__head, .facets__done { display: none; }
}

@media (max-width: 767px) {
  .cbar .facets { align-self: stretch; flex-wrap: nowrap; }
  .facets__sort { margin-left: auto; min-width: 0; }
  .facets__select { max-width: 100%; }
  /* min-width: 0 — a select is as wide as its longest option ("Alphabetically,
     A-Z") and will not shrink below that on its own: beside the 92px rail on a
     360px phone it ran 14px past the screen's edge */
  .facets__select select { min-width: 0; max-width: 7.5rem; text-overflow: ellipsis; }
  .facets__label { display: none; }

  /* the panel: the category drawer's shell (scrim, slide from the left) */
  .facets__drawer {
    position: fixed; inset: 0; z-index: 120;
    display: flex; justify-content: flex-start;
    background: transparent; visibility: hidden; pointer-events: none;
    transition: background var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .facets__drawer.is-open { background: var(--c-scrim); visibility: visible; pointer-events: auto; }
  .facets__panel {
    width: min(380px, 88vw); height: 100%;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
  }
  .facets__drawer.is-open .facets__panel { transform: none; }
  .facets__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.125rem; border-bottom: var(--border-width) solid var(--c-line);
  }
  .facets__title { font-weight: var(--fw-display); font-size: var(--fs-h3); }
  .facets__close { display: grid; place-items: center; width: 36px; height: 36px; color: var(--c-ink); }

  /* every group expanded under its heading, values as chips */
  .facets__group { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: block; padding: 0.25rem 1.125rem 1.25rem; }
  .facet { position: static; padding-block: 1rem; border-bottom: var(--border-width) solid var(--c-line); }
  .facet__trigger {
    height: auto; padding: 0; margin-bottom: 0.75rem; background: none; pointer-events: none;
    font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink);
  }
  .facet.is-open > .facet__trigger { background: none; color: var(--c-ink); }
  .facet__caret { display: none; }
  .facet__panel, .facet.is-open > .facet__panel {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    position: static; min-width: 0; max-height: none; overflow: visible; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .facet__option {
    display: inline-flex; gap: 0.375rem; padding: 0.4375rem 0.875rem;
    border-radius: var(--radius-pill); background: var(--c-surface-2);
    box-shadow: inset 0 0 0 var(--border-width) transparent;
  }
  .facet__option:hover { background: var(--c-surface-2); }
  .facet__option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .facet__option:has(input:checked) { background: var(--c-mint-2); color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); font-weight: var(--fw-bold); }
  .facet__option:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .facet__name { flex: none; }
  .facet__panel--price { flex-wrap: nowrap; }
  .facet__price { flex: 1 1 0; }
  .facet__price input { width: 100%; }
  .facet--toggle { margin-top: 1rem; }

  .facets__foot {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.875rem 1.125rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    border-top: var(--border-width) solid var(--c-line);
  }
  .facets__done { flex: 1 1 auto; height: 48px; }
}

.clist { padding-bottom: var(--section-y); }
.clist__empty { display: grid; justify-items: start; gap: 1rem; padding-block: 0.5rem 2rem; color: var(--c-ink-muted); font-size: var(--fs-small); }

/* pagination (base snippet, reference look) */
.pagination-wrapper { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.pagination__item {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.625rem;
  border-radius: var(--radius-pill); background: var(--c-surface-2);
  color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none;
}
.pagination__item:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.pagination__item--current { background: 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; }

/* list-collections: the category tiles in a wrapping grid, not a rail */
.catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 1.5rem 1rem; padding-block: 0.5rem 1rem;
}
.catgrid .cat { width: auto; }
.cat__count { font-size: var(--fs-micro); color: var(--c-ink-subtle); }

/* ── 10. 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*), so the skin reads the base vocabulary
   (.quantity, .button, .title-wrapper-with-link …) in the reference's tokens. */
.cart-page { padding-block: 1rem var(--section-y); }
.cart-page .section__head { margin-top: 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: 1rem; padding-block: 1rem 2rem; }
cart-items.is-empty .cart__items, #main-cart-footer.is-empty { display: none; }
#cart-template .cart__items { padding-bottom: 0; border-bottom: 0; }
.cart__empty-text { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); }

/* base .button family -> the reference's pill .btn (accent / ghost) */
#cart-template .button, .vouchers-modal .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 0; padding: 0.8125rem 1.375rem; border: 0;
  border-radius: var(--radius-button); background: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-small);
  letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background 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-accent-hover); }
#cart-template .button--secondary, .vouchers-modal .button--secondary { background: var(--c-surface); color: var(--c-accent); box-shadow: inset 0 0 0 var(--border-width) var(--c-accent); }
#cart-template .button--secondary:hover, .vouchers-modal .button--secondary:hover { background: var(--c-mint-2); }
#cart-template .button.loading { opacity: 0.6; pointer-events: none; }
/* Checkout / Express checkout while the cart form posts to /cart (cart.js flags the
   pressed submit .loading): a ring in the button's own label colour instead of the fade.
   The label is hidden with the text fill, not `color`, so currentColor still names it —
   under the hover fill too, which outlives the click until the pointer moves. (1,3,1)
   beats the `display: none` this sheet puts on every cart button's pseudo-elements. */
#cart-template .cart__ctas .button.loading { position: relative; opacity: 1; -webkit-text-fill-color: transparent; }
#cart-template .cart__ctas .button.loading::after {
  content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  box-sizing: border-box; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: cart-submit-spin 0.8s linear infinite;
}
@keyframes cart-submit-spin { to { transform: rotate(360deg); } }

.cart-items { width: 100%; border-collapse: collapse; border-spacing: 0; }
.cart-items thead th {
  padding: 0 0 0.75rem; 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);
  color: var(--c-ink-muted); opacity: 1;
}
.cart-items thead th.right { text-align: right; }
.cart-item td { padding-block: 1rem; vertical-align: top; border-bottom: var(--border-width) solid var(--c-line); }
.cart-item__media { width: 5rem; padding-right: 1rem; }
.cart-item__media a { display: block; background: var(--c-surface-2); border-radius: 10px; overflow: hidden; }
.cart-item__image { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cart-item__details { padding-right: 1rem; font-size: var(--fs-small); }
.cart-item__name { display: block; 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.25rem 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 .qty pill */
#cart-template .quantity {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  width: auto; min-height: 0; height: 2.5rem; padding: 0.25rem;
  border: 0; border-radius: var(--radius-pill); background: var(--c-surface-2);
}
#cart-template .quantity::before, #cart-template .quantity::after { display: none; }
#cart-template .quantity__button {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-ink); cursor: pointer;
}
#cart-template .quantity__button:hover { background: var(--c-surface); }
#cart-template .quantity__button .icon { width: 0.7rem; height: 0.7rem; stroke: none; pointer-events: none; }
#cart-template .quantity__input {
  width: 2.1rem; 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 icon buttons beside the stepper */
.cart-action-icon { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; }
.cart-action-icon.hide { display: none; }
#cart-template .cart-action-icon .button {
  width: 2.25rem; height: 2.25rem; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--c-ink-subtle); box-shadow: none;
}
#cart-template .cart-action-icon .button:hover { background: var(--c-surface-2); color: var(--c-accent); }
#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: 1rem; width: 1.5rem; }
.cart-item .loading-overlay__spinner { width: 1.5rem; }
.cart__items--disabled { pointer-events: none; opacity: 0.6; }
.discounts { margin: 0.375rem 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.5rem; }
.cart__blocks { width: 100%; max-width: 26rem; display: grid; gap: 0.875rem; }
.totals { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; position: relative; }
.totals__subtotal { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.totals__subtotal-value { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; }
.totals .loading-overlay { position: absolute; right: 0; top: 0; width: 1.5rem; }
.tax-note { display: block; margin-top: 0.375rem; 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.5rem; }
.cart__ctas > * + * { margin-top: 0 !important; }
#cart-template .cart__checkout-button { width: 100%; max-width: none; height: 50px; font-size: var(--fs-body); }
.voucher-toggle-wrapper { border-radius: var(--radius-card); background: var(--c-surface-2); }
.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, .vouchers-modal .search__input {
  flex: 1; min-width: 0; height: 44px; padding: 0 1rem; background: var(--c-surface-2); color: var(--c-ink);
  border: var(--border-width) solid transparent; border-radius: var(--radius-input); font: inherit; font-size: var(--fs-small);
}
discount-input .field__input:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface); }
discount-input .field__label { display: none; }
discount-input .button { padding-inline: 1.125rem; }
.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.25rem; }
}
.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 — 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.75rem 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); }
.cart #cart-promotion-top { margin-bottom: 0.75rem; }
.cart #cart-promotion-section { margin-top: 0.75rem; }

/* the vouchers modal (snippets/voucher-modal + the platform voucher widget),
   scoped under the element + id to out-rank the platform sheets that load later */
vouchers-modal #vouchers-modal {
  --voucher-widget-font-family: var(--font-body);
  --voucher-widget-theme-color: var(--c-accent);
  --voucher-widget-border: var(--border-width) solid var(--c-line);
  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__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 { color: var(--c-ink); }
vouchers-modal #vouchers-modal discount-input .button { flex: none; min-height: 44px; }
vouchers-modal .voucher-widget-button { color: var(--c-accent); border-color: var(--c-accent); }
vouchers-modal .voucher-widget-button:hover { background: var(--c-accent); color: var(--c-accent-ink); }
vouchers-modal .voucher-widget-list__item.disabled { opacity: 0.55; }

/* on phones the cart table re-flows into rows */
@media (max-width: 749px) {
  .cart-items thead { display: none; }
  .cart-items, .cart-items tbody { display: block; }
  .cart-item {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 0.875rem; row-gap: 0.5rem;
    padding-block: 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 */
.cart .cart-items thead { display: none; }
.cart .cart-items, .cart .cart-items tbody { display: block; }
.cart .cart-item {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.5rem;
  padding-block: 0.875rem; border-bottom: var(--border-width) solid var(--c-line);
}
.cart .cart-item td { display: block; padding: 0; border: 0; width: auto; min-width: 0; max-width: 100%; }
.cart .cart-item__media { grid-row: span 2; }
.cart .cart-item__details { grid-column: 2; padding-right: 0; }
.cart .cart-item__totals.small-hide { display: none !important; }
.cart .cart-item__totals.medium-hide { display: block !important; grid-column: 3; grid-row: 1; }
.cart .cart-item__quantity { display: flex; align-items: center; gap: 0.25rem; grid-column: 2 / -1; padding: 0; }
.cart #cart-template .quantity { height: 2.25rem; }
.cart #cart-template .quantity__button { width: 1.75rem; height: 1.75rem; }
.cart #cart-template .quantity__input { width: 2rem; }
.cart #main-cart-footer { margin-top: auto; }
.cart .cart__footer { padding-top: 1.125rem; }
.cart .cart__blocks { max-width: none; }
.cart cart-items.is-empty .cart__warnings { padding-block: 0.5rem 1rem; }
#main-cart-footer, .cart__footer { border-top: 0; }

/* ── 11. Quick view modal ─────────────────────────────────────────────────────
   The platform's modal dressed as the reference's quick view: a centred rounded
   dialog on desktop (packshot beside the buy box), a bottom sheet on phones with
   the quantity + add row sticky at its foot. */
.product-quickview-modal-backdrop { transition: opacity var(--dur) var(--ease); }
#product-quickview-modal[open] + .product-quickview-modal-backdrop { background-color: var(--c-scrim); }
#product-quickview-modal[open] {
  --color-foreground: 22, 33, 15;
  --color-background: 255, 255, 255;
  /* centred on every screen from 768px — the base sheet turns it into a bottom sheet up
     to 998px, which left a half-positioned dialog on tablets */
  top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%);
  width: min(880px, calc(100% - 2rem)); max-width: none;
  max-height: min(90vh, 720px); min-height: min(26rem, 80vh);
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
#product-quickview-modal .product-quickview-modal__body { min-height: 0; overflow-y: auto; }
.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-modal-wrapper .loading-overlay .path { stroke: var(--c-accent); }
.product-quickview-modal-wrapper .product-quickview-modal__close {
  top: 0.625rem; right: 0.625rem; z-index: 3; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card);
}
.product-quickview-modal-wrapper .product-quickview-modal__close:hover { background: var(--c-mint-2); }
.product-quickview-modal__close svg { width: 1rem; height: 1rem; }
.product-quickview.qv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.product-quickview .product-quickview__img-wrapper.qv__media { max-width: none; background: var(--c-surface-2); }
.product-quickview .product-quickview__img-wrapper.qv__media img { padding: 8%; mix-blend-mode: multiply; }
.product-quickview .product-quickview__content-wrapper.qv__info { max-width: none; max-height: none; overflow: visible; padding: 1.75rem 1.75rem 1.25rem; }
.product-quickview .quickview-title { display: block; color: var(--c-ink); text-decoration: none; }
.product-quickview h2.qv__title { margin: 0.25rem 0 0; padding-right: 2.5rem; }
.qv__price .price { margin-top: 0.5rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); letter-spacing: var(--tracking-display); color: var(--c-ink); }
.qv__price .price .badge, .qv__price .price__badge-sale, .qv__price .price__badge-sold-out { display: none !important; }
.product-quickview #price { margin-bottom: 0; }
.product-quickview .product-form { margin-top: 0; }
.product-quickview .pdp__axis { margin-top: 1.125rem; }
.qv__variants .swatches { max-height: 13.5rem; }
.product-quickview .quickview-sticky-actions.qv__buy {
  position: sticky; bottom: 0; display: flex; gap: 0.625rem;
  padding: 0.125rem 0 0.75rem; background: var(--c-surface); box-shadow: none;
}
.product-quickview .quickview-sticky-actions .btn { margin: 0; }
.quickview_promo-tag-wrapper:has(#quickview_promo-tag:empty) { display: none; }
/* opening motion — the reference's quick view: the dialog fades in and rises into
   place (a bottom sheet slides up on phones), the scrim fades in with it, and the
   product fades in once the platform has rendered it into the modal. Reduced motion
   and ?ts-anim=off flatten it (reference-head.css / §15). */
@keyframes dinomart-qv-rise {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes dinomart-qv-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes dinomart-qv-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
#product-quickview-modal[open] { animation: dinomart-qv-rise 260ms var(--ease) both; }
#product-quickview-modal[open] + .product-quickview-modal-backdrop { animation: dinomart-qv-fade 260ms var(--ease) both; }
#product-quickview-modal .product-quickview { animation: dinomart-qv-fade 220ms var(--ease) both; }
/* the base sheet fixes the product at 80dvh up to 998px; a centred dialog fits its content */
@media (min-width: 768px) { .product-quickview.qv { height: auto; } }
@media (max-width: 767px) {
  #product-quickview-modal[open] {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 92vh; min-height: 18rem;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    animation: dinomart-qv-sheet 300ms var(--ease) both;
  }
  .product-quickview.qv { grid-template-columns: minmax(0, 1fr); }
  .product-quickview .product-quickview__img-wrapper.qv__media { display: flex; justify-content: center; align-items: center; height: clamp(160px, 44vw, 220px); }
  .product-quickview .product-quickview__img-wrapper.qv__media img { width: auto; height: 100%; max-height: 100%; padding: 6%; }
  .product-quickview .product-quickview__content-wrapper.qv__info { padding: 1.125rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); }
  .product-quickview h2.qv__title { padding-right: 0; }
}

/* ── 12. 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 { color: var(--c-ink); font-family: var(--font-display); line-height: var(--lh-heading); margin-top: 1.5em; }
.rte h1 { font-size: var(--fs-h2); }
.rte h2 { font-size: var(--fs-h3); }
.rte h3, .rte h4 { font-size: var(--fs-body); }
.rte > :first-child { margin-top: 0; }
.rte a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.rte ul, .rte ol { padding-left: 1.25rem; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li + li { margin-top: 0.35em; }
.rte img { height: auto; max-width: 100%; border-radius: var(--radius-card); }
.rte strong, .rte b { color: var(--c-ink); font-weight: var(--fw-bold); }
.rte blockquote { border-left: 3px solid var(--c-accent); padding-left: 1.125rem; color: var(--c-ink); }
.rte table, .table-wrapper table { width: 100%; border-top: var(--border-width) solid var(--c-line); }
.rte td, .rte th { padding: 0.625rem 1rem 0.625rem 0; border-bottom: var(--border-width) solid var(--c-line); text-align: left; vertical-align: top; }
.rte th { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-muted); }
.table-wrapper { overflow-x: auto; }
.rte iframe, .rte video { max-width: 100%; }

.page-head { padding-block: 0.5rem 0; }
.page-body { padding-block: 1rem var(--section-y); }
.page-body .rte { font-size: var(--fs-body); }

/* blog + article */
.blog-grid { display: grid; gap: 1.75rem var(--gutter-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; gap: 0.625rem; align-content: start; }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-2); border-radius: var(--radius-card); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 620ms var(--ease); }
.post-card:hover .post-card__media img { scale: 1.04; }
.post-card__meta { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); color: var(--c-accent); }
.post-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: var(--lh-heading); }
.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: 1.75rem; background: var(--c-surface-2); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.625rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-muted); }
.article-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: var(--border-width) solid var(--c-line); }
.tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* search page + 404: the header's search pill as a real field */
.searchpage-form { display: flex; gap: 0.5rem; max-width: 40rem; margin-top: 1rem; }
.searchpage-field {
  flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center;
  height: 46px; padding: 0 1rem 0 2.75rem;
  background: var(--c-surface-2); border: var(--border-width) solid transparent; border-radius: var(--radius-input);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.searchpage-field .icon { position: absolute; left: 0.9375rem; color: var(--c-ink-subtle); pointer-events: none; }
.searchpage-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--fs-body); color: var(--c-ink); }
.searchpage-field:focus-within { border-color: var(--c-accent); background: var(--c-surface); }
.searchpage-form .btn { flex: none; height: 46px; }
.page--search { padding-bottom: var(--section-y); }
.page--search .grid { margin-bottom: 0.5rem; }
.notfound { padding-block: var(--section-y) 0; }
.notfound__code { 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.03em; margin-bottom: 0.75rem; }

/* store locator (base template, reference look) */
.store-locator { padding-block: 1.5rem var(--section-y); }
.store-locator-heading { display: grid; gap: 0.875rem; margin-bottom: 1.75rem; }
.store-locator .select { position: relative; display: inline-flex; }
.store-locator .select__select {
  appearance: none; -webkit-appearance: none; min-width: 16rem; height: 44px; padding: 0 2.5rem 0 1rem;
  background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6455' 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: 0; border-radius: var(--radius-input);
}
.store-selector-item { height: 100%; padding: 1.25rem; background: var(--c-surface); border: var(--border-width) 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-family: var(--font-display); font-weight: var(--fw-display); }
.store-selector-item a:not(.section__all) { color: var(--c-accent); }
.store-selector-item address { font-style: normal; margin-top: 0.5rem; }

/* ── 13. Platform-rendered controls ─────────────────────────────────────────
   The promotion app renders `btn btn-primary`, the sf auth views `btn
   button--full-width` / `button--secondary`; reference.css's .btn is already the
   accent pill, so only the secondary variants need aliasing. */
.btn.button--secondary, .btn.btn--secondary { background: var(--c-surface); color: var(--c-accent); box-shadow: inset 0 0 0 var(--border-width) var(--c-accent); }
.btn.button--secondary:hover, .btn.btn--secondary:hover { background: var(--c-mint-2); }
.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` — reference.css's
   .btn paints the accent pill, but the browser's 2px outset input border survives
   (the login button's `border: 0` is .customer-scoped too). 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-lg));
  margin: calc(3.75rem + clamp(2rem, 5vw, 3.5rem)) auto calc(5.625rem + var(--section-y));
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  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);
}
#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%; min-height: 46px; margin-top: 1.5rem; border: 0;
  background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-body);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
#MainContent form[action$="challenge"] .btn:hover { background: var(--c-accent-hover); }
/* 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; height: 34px; padding: 0 2rem 0 0.875rem;
  background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6455' stroke-width='1.5'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.85rem;
  border: 0; border-radius: var(--radius-pill);
  color: var(--c-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.currency-picker option { background: var(--c-surface); color: var(--c-ink); }

/* ── 14. Footer additions ──────────────────────────────────────────────────── */
/* the link columns are plain grid cells of .footer__top; min-width lets a long
   bilingual link wrap instead of widening its column. A word the footer's <wbr>s
   cannot split (one long name with no slash) breaks inside the column too, so
   the list never outgrows it and pushes the page past the screen's edge. */
.footer__col { min-width: 0; }
.footer__list a { overflow-wrap: anywhere; }
.footer__logo { max-width: 16rem; object-fit: contain; object-position: left center; }
.footer__extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.footer__chat { margin-top: 0.875rem; }
.footer .currency-picker { background-color: rgb(255 255 255 / 0.1); color: var(--c-footer-ink); }
.footer .currency-picker option { color: var(--c-ink); }

/* ── 15. Motion kill-switch ──────────────────────────────────────────────────
   ?ts-anim=off (animations.js) flattens every transition to its end state for
   deterministic screenshots; html.no-js never hides anything. */
html[data-anim-off] [data-reveal] { opacity: 1 !important; translate: none !important; }
html[data-anim-off] *, html[data-anim-off] *::before, html[data-anim-off] *::after { transition: none !important; animation: none !important; }