/* ===========================================================================
   CySuperStore — "Soft Pastel" storefront design language
   ---------------------------------------------------------------------------
   ONE token sheet (--ps-*) + one applied layer, for EVERY store: house-01 …
   house-15. Loaded last (file name sorts after every other stylesheet) so its
   component rules win on equal specificity without touching the files other
   workstreams own.

   WHY THIS FILE EXISTS (root cause of the "invisible text on the cart" report):
     storefront.css line 24 read  `body.cy-storefront a { color: var(--sf-accent-dark) }`
     → specificity (0,1,2). Every component rule that sets a link colour is a
     single class — `.sf-top__link`, `.sf-strip__item`, `.sf-footer__list a`,
     `.sf-top__brand` — i.e. (0,1,0)/(0,1,1). The generic rule therefore WON, and
     the store name, header links, section strip and every footer link were painted
     in the theme's dark accent while sitting on the theme's dark header/footer
     band (gifts-festive: #9a3412 on #7f1d1d = 1.37:1). The same inversion exists
     on the apex as `.cy-body a { color: var(--cy-link) }`.
     The fix is at the source (a `:where()` wrapper in those two files); this sheet
     then repaints the chrome with tokens that are readable by construction.

   CONTRAST CONTRACT (verified by tools/audit.py, WCAG 2.1 AA):
     body text  >= 4.5:1 · large text (>=24px, or >=18.66px bold) >= 3:1.
     Every surface below is a light pastel and every ink is a dark warm neutral,
     so the pairs clear AA with a wide margin instead of scraping past it.
   =========================================================================== */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  /* --- surfaces: warm cream, never pure white as a page ------------------ */
  --ps-bg: #fdf9f6;
  --ps-bg-2: #f7efe9;
  --ps-surface: #ffffff;
  --ps-surface-2: #faf4ef;
  --ps-surface-3: #f3ebe4;
  --ps-surface-sunken: #f5ede7;

  /* --- ink: dark warm neutrals (AA on every surface above) --------------- */
  --ps-text: #2f2a27;         /* 12.9:1 on --ps-bg */
  --ps-text-strong: #221e1c;
  --ps-muted: #6a615a;        /*  6.2:1 on --ps-bg, 5.6:1 on --ps-surface-2 */
  --ps-muted-2: #756b64;

  /* --- hairlines --------------------------------------------------------- */
  --ps-border: #efe4dc;
  --ps-border-strong: #dccbc0;
  --ps-hairline: rgba(47, 42, 39, .08);

  /* --- accent family: pastel by default, re-derived per store below ------- */
  --ps-accent: #e7d3c4;         /* pastel fill (buttons, chips)            */
  --ps-accent-line: #d8bfab;    /* border of the pastel fill               */
  --ps-accent-soft: #f6ece4;    /* section / card wash                     */
  --ps-accent-softer: #fbf5f0;  /* page band wash                          */
  --ps-accent-ink: #2f2a27;     /* ink ON the pastel fill                  */
  --ps-accent-deep: #5f4a3a;    /* small accent text on light surfaces     */
  --ps-header-bg: #f6ece4;
  --ps-header-line: #eaddd1;
  --ps-footer-bg: #f4ece6;
  --ps-hero-from: #f8efe8;
  --ps-hero-to: #f1e0d3;

  /* --- status pastels (dark ink on light pastel) ------------------------- */
  --ps-ok-soft: #e9f4ee;  --ps-ok-ink: #24563a;
  --ps-warn-soft: #fbf1dd; --ps-warn-ink: #6f4711;
  --ps-bad-soft: #fbeae7;  --ps-bad-ink: #8c2f22;
  --ps-info-soft: #eaf0f6; --ps-info-ink: #2c4a68;

  /* --- shape: generous, gentle ------------------------------------------ */
  --ps-radius-xs: 10px;
  --ps-radius-sm: 14px;
  --ps-radius: 18px;
  --ps-radius-lg: 26px;
  --ps-radius-xl: 34px;
  --ps-pill: 999px;

  /* --- shadows: warm, low-opacity, no hard edges ------------------------- */
  --ps-shadow-xs: 0 1px 2px rgba(96, 74, 58, .05);
  --ps-shadow-sm: 0 1px 2px rgba(96, 74, 58, .05), 0 4px 12px rgba(96, 74, 58, .05);
  --ps-shadow: 0 2px 4px rgba(96, 74, 58, .05), 0 10px 26px rgba(96, 74, 58, .07);
  --ps-shadow-lg: 0 4px 10px rgba(96, 74, 58, .06), 0 22px 46px rgba(96, 74, 58, .09);

  /* --- spacing scale ----------------------------------------------------- */
  --ps-1: 4px;  --ps-2: 8px;  --ps-3: 12px; --ps-4: 16px;
  --ps-5: 20px; --ps-6: 24px; --ps-7: 32px; --ps-8: 44px;

  /* --- type: comfortable, calm ------------------------------------------ */
  --ps-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ps-fs-body: 16px;
  --ps-fs-small: 14px;
  --ps-fs-tiny: 13px;
  --ps-lh: 1.65;

  /* --- focus ------------------------------------------------------------- */
  --ps-focus: #8a6f5c;
  --ps-focus-halo: rgba(138, 111, 92, .28);

  /* Legibility floor for any muted secondary text outside the pastel plane.
     marketplace.css ships --cy-muted-2: #767676, which measures 3.86:1 on the
     apex page grey #eaeded (below AA for 11-12px meta lines). This sheet loads
     last, so this wins; it only ever makes muted text DARKER. */
  --cy-muted-2: #5f5f5f;
}

/* Per-store pastel accent, DERIVED from the store's own theme accent, so all
   fifteen shops keep a distinct identity without a per-store stylesheet and
   without hard-coding theme keys (the five new stores inherit this for free). */
@supports (color: color-mix(in srgb, red, blue)) {
  body.cy-storefront {
    --ps-accent:        color-mix(in srgb, var(--sf-accent, #b9a48f) 30%, #ffffff);
    --ps-accent-line:   color-mix(in srgb, var(--sf-accent, #b9a48f) 42%, #ffffff);
    --ps-accent-soft:   color-mix(in srgb, var(--sf-accent, #b9a48f) 16%, #ffffff);
    --ps-accent-softer: color-mix(in srgb, var(--sf-accent, #b9a48f) 8%,  #ffffff);
    --ps-accent-deep:   color-mix(in srgb, var(--sf-accent, #b9a48f) 55%, #2f2a27);
    --ps-header-bg:     color-mix(in srgb, var(--sf-accent, #b9a48f) 13%, #ffffff);
    --ps-header-line:   color-mix(in srgb, var(--sf-accent, #b9a48f) 22%, #ffffff);
    --ps-footer-bg:     color-mix(in srgb, var(--sf-accent, #b9a48f) 10%, #fdf9f6);
    --ps-hero-from:     color-mix(in srgb, var(--sf-accent, #b9a48f) 11%, #ffffff);
    --ps-hero-to:       color-mix(in srgb, var(--sf-accent, #b9a48f) 25%, #ffffff);
  }
}

/* ------------------------------------------------------- 2 base typography */
body.cy-storefront {
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: var(--ps-font);
  font-size: var(--ps-fs-body);
  line-height: var(--ps-lh);
}
body.cy-storefront h1,
body.cy-storefront h2,
body.cy-storefront h3 { color: var(--ps-text-strong); }

/* The generic link colour must stay below every component rule. `:where()`
   contributes no specificity, so this is only an `a` selector — the fix that
   makes `.sf-top__link` / `.sf-strip__item` / `.sf-footer__list a` win again. */
:where(body.cy-storefront) a { color: var(--ps-accent-deep); }

body.cy-storefront :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ps-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ps-focus-halo);
}

/* --------------------------------------------------------------- 3 header */
body.cy-storefront .sf-top {
  background: var(--ps-header-bg);
  color: var(--ps-text);
  border-bottom: 1px solid var(--ps-header-line);
  box-shadow: var(--ps-shadow-xs);
}
body.cy-storefront .sf-top__row { padding: 14px 18px; gap: 12px; }
body.cy-storefront .sf-top__brand,
body.cy-storefront .sf-top__name { color: var(--ps-text-strong); }
body.cy-storefront .sf-top__name { font-size: 18px; }
body.cy-storefront .sf-top__mark { font-size: 24px; }
body.cy-storefront .sf-top__cat {
  color: var(--ps-muted);
  font-size: 11px;
  letter-spacing: .12em;
}
body.cy-storefront .sf-top__input {
  background: var(--ps-surface);
  color: var(--ps-text);
  border: 1px solid var(--ps-border-strong);
  border-right: 0;
  border-radius: var(--ps-pill) 0 0 var(--ps-pill);
  min-height: 44px;
  padding: 10px 16px;
}
body.cy-storefront .sf-top__submit {
  background: var(--ps-accent);
  color: var(--ps-accent-ink);
  border-radius: 0 var(--ps-pill) var(--ps-pill) 0;
  min-height: 44px;
  padding: 10px 18px;
}
body.cy-storefront .sf-top__link {
  color: var(--ps-text);
  font-size: 14px;
  padding: 8px 4px;
}
body.cy-storefront .sf-top__link:hover { color: var(--ps-accent-deep); }
body.cy-storefront .sf-top__cart {
  background: var(--ps-accent-soft);
  color: var(--ps-text-strong);
  border: 1px solid var(--ps-accent-line);
  border-radius: var(--ps-pill);
  padding: 10px 16px;
  font-size: 14px;
  min-height: 44px;
}
body.cy-storefront .sf-top__cart:hover { background: var(--ps-accent); }
body.cy-storefront .sf-cart-count {
  background: var(--ps-surface);
  color: var(--ps-text-strong);
  border: 1px solid var(--ps-accent-line);
  min-width: 22px;
  padding: 1px 7px;
  font-size: 12px;
}
body.cy-storefront .sf-strip { padding: 2px 14px 12px; gap: 6px; }
body.cy-storefront .sf-strip__item {
  color: var(--ps-text);
  background: var(--ps-surface);
  border: 1px solid var(--ps-header-line);
  border-radius: var(--ps-pill);
  padding: 8px 14px;
  font-size: 13px;
  opacity: 1;
}
body.cy-storefront .sf-strip__item:hover { background: var(--ps-accent-soft); opacity: 1; }
body.cy-storefront .sf-strip__item--mp {
  border-color: var(--ps-accent-line);
  color: var(--ps-accent-deep);
}

/* ----------------------------------------------------------------- 4 hero */
body.cy-storefront .sf-hero {
  background-image: linear-gradient(135deg, var(--ps-hero-from) 0%, var(--ps-hero-to) 100%);
  color: var(--ps-text);
  border: 1px solid var(--ps-header-line);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-sm);
  padding: 26px 22px;
}
body.cy-storefront .sf-hero__eyebrow {
  color: var(--ps-accent-deep);
  letter-spacing: .14em;
}
body.cy-storefront .sf-hero__title {
  color: var(--ps-text-strong);
  font-size: calc(30px * var(--sf-title-scale, 1));
  line-height: 1.18;
}
body.cy-storefront .sf-hero__sub,
body.cy-storefront .sf-hero__count { color: var(--ps-muted); }
body.cy-storefront .sf-hero__art {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--ps-header-line);
  border-radius: var(--ps-radius);
  color: var(--ps-text);
}
body.cy-storefront .sf-hero__art-label { color: var(--ps-muted); }

/* ------------------------------------------------- 5 sections + page heads */
body.cy-storefront .sf-section__title { color: var(--ps-text-strong); }
body.cy-storefront .sf-section__link,
body.cy-storefront .sf-breadcrumb a { color: var(--ps-accent-deep); }
body.cy-storefront .sf-page-title { color: var(--ps-text-strong); }
body.cy-storefront .sf-page-sub,
body.cy-storefront .sf-page-meta,
body.cy-storefront .cy-note { color: var(--ps-muted); }
body.cy-storefront .sf-breadcrumb { color: var(--ps-muted); }

/* --------------------------------------------------------------- 6 buttons */
body.cy-storefront .sf-btn,
.fn-btn {
  border-radius: var(--ps-radius-sm);
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--ps-fs-small);
  font-weight: 700;
  box-shadow: var(--ps-shadow-xs);
}
body.cy-storefront .sf-btn--primary,
.fn-btn--primary {
  background: var(--ps-accent);
  border-color: var(--ps-accent-line);
  color: var(--ps-accent-ink);
}
body.cy-storefront .sf-btn--primary:hover,
.fn-btn--primary:hover { background: var(--ps-accent-soft); border-color: var(--ps-accent-line); }
body.cy-storefront .sf-btn--ghost,
.fn-btn--ghost {
  background: var(--ps-surface);
  border-color: var(--ps-border-strong);
  color: var(--ps-text);
}
body.cy-storefront .sf-btn--ghost:hover,
.fn-btn--ghost:hover { background: var(--ps-surface-2); }
body.cy-storefront .sf-btn--sm,
.fn-btn--sm { min-height: 36px; padding: 7px 13px; font-size: var(--ps-fs-tiny); }
.fn-btn--cta { border-radius: var(--ps-radius); min-height: 56px; }
.fn-btn--link { background: transparent; color: var(--ps-accent-deep); box-shadow: none; }
.fn-btn--link:hover { color: var(--ps-text-strong); }
.fn-btn[disabled], .fn-btn--cta[disabled] {
  background: var(--ps-surface-3);
  color: var(--ps-muted);
  border-color: var(--ps-border);
  box-shadow: none;
}

/* --------------------------------------------------------- 7 cards / grids */
body.cy-storefront .sf-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  padding: 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}
body.cy-storefront .sf-card:hover {
  box-shadow: var(--ps-shadow);
  transform: translateY(-2px);
}
body.cy-storefront .sf-card__title { font-size: 15px; line-height: 1.4; }
body.cy-storefront .sf-card__title a { color: var(--ps-text-strong); }
body.cy-storefront .sf-card__title a:hover { color: var(--ps-accent-deep); }
body.cy-storefront .sf-card__price {
  color: var(--ps-text-strong);
  font-size: 18px;
  font-weight: 800;
}
body.cy-storefront .sf-card__was { color: var(--ps-muted); }
body.cy-storefront .sf-card__desc { color: var(--ps-muted); font-size: var(--ps-fs-tiny); }
body.cy-storefront .sf-card__meta { color: var(--ps-muted); font-size: var(--ps-fs-tiny); }
body.cy-storefront .sf-card__stock { color: var(--ps-ok-ink); font-weight: 700; }
body.cy-storefront .sf-card__actions { border-top: 1px solid var(--ps-border); padding-top: 12px; }
body.cy-storefront .sf-badge {
  background: var(--ps-surface-2);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-pill);
  padding: 4px 11px;
  font-size: 12px;
}
body.cy-storefront .sf-badge--cat {
  background: var(--ps-accent-soft);
  color: var(--ps-text-strong);
  border-color: var(--ps-accent-line);
}
body.cy-storefront .sf-card__art-link--photo,
body.cy-storefront .sf-card__art {
  border-radius: var(--ps-radius-sm);
  background: var(--ps-surface-2);
}

/* ------------------------------------------------------ 8 promos / editorial */
body.cy-storefront .sf-promo {
  background: var(--ps-surface);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
  border-left: 5px solid var(--ps-accent-line);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  padding: 16px;
}
body.cy-storefront .sf-promo--hot { border-left-color: #e0a08c; }
body.cy-storefront .sf-promo--warm { border-left-color: #e5c48d; }
body.cy-storefront .sf-promo--cool { border-left-color: #a8c3d6; }
body.cy-storefront .sf-promo__tag {
  background: var(--ps-accent-soft);
  color: var(--ps-text-strong);
  border: 1px solid var(--ps-accent-line);
}
body.cy-storefront .sf-promo__title { color: var(--ps-text-strong); }
body.cy-storefront .sf-promo__body { color: var(--ps-muted); font-size: var(--ps-fs-tiny); }
body.cy-storefront .sf-promo__cta { color: var(--ps-accent-deep); }
/* The zero-product / no-results panels the views already render (".cy-empty").
   A brand-new store with nothing published shows these; they must read as an
   intentional, cozy "we are opening" state, never as a broken empty grid. */
body.cy-storefront .cy-empty {
  background: linear-gradient(160deg, var(--ps-accent-softer) 0%, var(--ps-surface) 70%);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  color: var(--ps-text);
  padding: 22px 20px;
  font-size: 15px;
  line-height: 1.6;
}
body.cy-storefront .cy-empty a { color: var(--ps-accent-deep); font-weight: 700; }
body.cy-storefront .cy-note { color: var(--ps-muted); font-size: 14px; }
body.cy-storefront .cy-note a { color: var(--ps-accent-deep); }
body.cy-storefront .sf-trust,
body.cy-storefront .sf-editorial__inner {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
}
body.cy-storefront .sf-trust__list { color: var(--ps-muted); font-size: var(--ps-fs-small); }
body.cy-storefront .sf-editorial__eyebrow { color: var(--ps-accent-deep); }
body.cy-storefront .sf-editorial__title { color: var(--ps-text-strong); }
body.cy-storefront .sf-editorial__body { color: var(--ps-text); font-size: 15px; }
body.cy-storefront .sf-editorial__meta { color: var(--ps-muted); }

/* --------------------------------------------------------- 9 product detail */
body.cy-storefront .sf-detail__price,
body.cy-storefront .fn-price { color: var(--ps-text-strong); }
body.cy-storefront .sf-detail__art-label { color: var(--ps-muted); }
body.cy-storefront .sf-buy {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
}
body.cy-storefront .sf-buy__title { color: var(--ps-muted); }
body.cy-storefront .sf-content__heading { color: var(--ps-text-strong); }
body.cy-storefront .sf-content__body { color: var(--ps-text); font-size: 15px; line-height: 1.7; }
body.cy-storefront .sf-content__note,
body.cy-storefront .sf-content__specs caption { color: var(--ps-muted); }
body.cy-storefront .sf-content__specs th {
  background: var(--ps-surface-2);
  color: var(--ps-muted);
}

/* ---------------------------------------------------------------- 10 footer */
body.cy-storefront .sf-footer {
  background: var(--ps-footer-bg);
  color: var(--ps-text);
  border-top: 1px solid var(--ps-header-line);
  border-radius: var(--ps-radius-lg) var(--ps-radius-lg) 0 0;
  padding: 34px 18px 30px;
  margin-top: 40px;
}
body.cy-storefront .sf-footer__brand { color: var(--ps-text-strong); font-size: 17px; }
body.cy-storefront .sf-footer__cat,
body.cy-storefront .sf-footer__meta { color: var(--ps-muted); opacity: 1; }
body.cy-storefront .sf-footer__title { color: var(--ps-muted); opacity: 1; }
body.cy-storefront .sf-footer__list { font-size: var(--ps-fs-small); }
body.cy-storefront .sf-footer__list a { color: var(--ps-text); opacity: 1; }
body.cy-storefront .sf-footer__list a:hover { color: var(--ps-accent-deep); opacity: 1; }
body.cy-storefront .sf-footer__legal {
  color: var(--ps-muted);
  border-top: 1px solid var(--ps-header-line);
  opacity: 1;
}
body.cy-storefront .sf-footer .cy-muted { color: var(--ps-muted); opacity: 1; }

/* ===========================================================================
   11 THE FUNNEL — cart, empty cart, checkout, confirmation, mini cart, mobile bar
   The funnel pages carry their own --fn-* tokens. Re-declared here (same
   selector list, later source order) as pastel, so cart/checkout/confirmation
   are cozy on a shop host AND on the apex funnel.
   =========================================================================== */
.fn-body,
.fn-cart,
.fn-checkout,
.fn-confirm,
.fn-order,
.fn-fail,
.fn-pdp {
  --fn-bg: var(--ps-bg);
  --fn-surface: var(--ps-surface);
  --fn-surface-2: var(--ps-surface-2);
  --fn-border: var(--ps-border);
  --fn-border-strong: var(--ps-border-strong);
  --fn-text: var(--ps-text);
  --fn-muted: var(--ps-muted);
  --fn-navy: var(--ps-text-strong);
  --fn-navy-2: var(--ps-text);
  --fn-amber: var(--ps-accent);
  --fn-amber-dark: var(--ps-accent-line);
  --fn-amber-soft: var(--ps-accent-soft);
  --fn-success: var(--ps-ok-ink);
  --fn-success-soft: var(--ps-ok-soft);
  --fn-error: var(--ps-bad-ink);
  --fn-error-soft: var(--ps-bad-soft);
  --fn-warn: var(--ps-warn-ink);
  --fn-warn-soft: var(--ps-warn-soft);
  --fn-radius-sm: var(--ps-radius-xs);
  --fn-radius: var(--ps-radius-sm);
  --fn-radius-lg: var(--ps-radius);
  --fn-shadow: var(--ps-shadow-sm);
  --fn-shadow-drawer: -8px 0 30px rgba(96, 74, 58, .18);
}

body.fn-body,
body.cy-storefront { background: var(--ps-bg); }

.fn-main { padding: 18px 16px 72px; }
/* The funnel plane inherits cysuperstore.css's 14px admin base; the checkout is a
   customer-facing page, so it reads at the same comfortable size as the shops. */
body.fn-body { font-size: 15px; line-height: 1.6; }
.fn-page-title { font-size: 28px; color: var(--ps-text-strong); }
.fn-page-sub { color: var(--ps-muted); font-size: 15px; }
.fn-subhead { color: var(--ps-text-strong); font-size: 16px; }
.fn-muted { color: var(--ps-muted); }
.fn-link { color: var(--ps-accent-deep); }
.fn-notice { border-radius: var(--ps-radius-sm); box-shadow: var(--ps-shadow-xs); }
.fn-price { color: var(--ps-text-strong); }
.fn-badge { border-radius: var(--ps-pill); }

/* --- cart ----------------------------------------------------------------- */
.fn-cart__head { margin-bottom: 16px; }
.fn-cart__list { display: grid; gap: 14px; }
.fn-line {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  padding: 16px;
  grid-template-columns: 84px 1fr;
  gap: 16px;
}
.fn-line__art { border-radius: var(--ps-radius-sm); width: 84px; height: 84px; }
.fn-line__title { font-size: 16.5px; }
.fn-line__title a { color: var(--ps-text-strong); }
.fn-line__meta { color: var(--ps-text); }
.fn-line__stock--in { color: var(--ps-ok-ink); }
.fn-line__stock--out { color: var(--ps-bad-ink); }
.fn-line__pricechange { color: var(--ps-warn-ink); }
.fn-line__problem { color: var(--ps-bad-ink); }
.fn-line__unit strong, .fn-line__total strong { color: var(--ps-text-strong); font-size: 16px; }
.fn-line__actions { margin-top: 4px; }
.fn-cart__continue { margin-top: 18px; }
.fn-cart__cross { border-top: 1px solid var(--ps-border); }

.fn-qty__btn {
  background: var(--ps-surface-2);
  border-color: var(--ps-border-strong);
  color: var(--ps-text);
  border-radius: var(--ps-radius-xs);
}
.fn-qty__btn:first-child { border-radius: var(--ps-radius-xs) 0 0 var(--ps-radius-xs); }
.fn-qty__btn:last-child { border-radius: 0 var(--ps-radius-xs) var(--ps-radius-xs) 0; }
.fn-qty__input { border-color: var(--ps-border-strong); border-radius: 0; }
.fn-qty__input:focus { border-color: var(--ps-accent-line); }

.fn-summary {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
  padding: 18px;
}
.fn-summary__title { color: var(--ps-text-strong); font-size: 18px; }
.fn-summary__row { font-size: 15px; }
.fn-summary__row dt { color: var(--ps-text); }
.fn-summary__row dd { color: var(--ps-text-strong); }
.fn-summary__row--total { border-top: 1px solid var(--ps-border); font-size: 17px; }
.fn-summary__row--total dd strong { color: var(--ps-text-strong); font-size: 21px; }
.fn-summary__note { color: var(--ps-muted); }
.fn-summary__item-meta { color: var(--ps-muted); }
.fn-summary__art { border-radius: var(--ps-radius-xs); }

/* --- cart empty state: intentional, cozy, never "broken" ------------------ */
.fn-empty {
  background: linear-gradient(160deg, var(--ps-accent-softer) 0%, var(--ps-surface) 62%);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-sm);
  padding: 34px 24px 30px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.fn-empty::before {
  content: "🧺";
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
  width: 74px; height: 74px;
  border-radius: var(--ps-radius);
  background: var(--ps-accent-soft);
  border: 1px solid var(--ps-accent-line);
  display: grid; place-items: center;
}
.fn-empty .fn-page-title { font-size: 27px; }
.fn-empty .fn-page-sub { max-width: 62ch; margin-top: 8px; }
.fn-empty__actions { margin: 20px 0 26px; gap: 12px; }
.fn-empty .fn-subhead {
  border-top: 1px solid var(--ps-border);
  padding-top: 22px;
  margin-top: 4px;
}

/* --- checkout ------------------------------------------------------------- */
.fn-checkout-header {
  background: var(--ps-header-bg);
  color: var(--ps-text);
  border-bottom: 1px solid var(--ps-header-line);
}
.fn-checkout-header__brand { color: var(--ps-text-strong); }
.fn-checkout-header__name { color: var(--ps-text-strong); }
.fn-checkout-header__sub { color: var(--ps-muted); }
.fn-checkout-header__secure { color: var(--ps-accent-deep); }
.fn-checkout-header__cart { color: var(--ps-text); }
.fn-checkout-footer { color: var(--ps-muted); border-top: 1px solid var(--ps-border); }
.fn-checkout-footer a { color: var(--ps-accent-deep); }

.fn-steps__step {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  color: var(--ps-muted);
  border-radius: var(--ps-pill);
  padding: 6px 13px;
}
.fn-steps__step.is-done { border-color: #a9cdb8; color: var(--ps-ok-ink); }
.fn-steps__step.is-current {
  border-color: var(--ps-accent-line);
  color: var(--ps-text-strong);
  background: var(--ps-accent-soft);
}
.fn-step {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  padding: 18px;
}
.fn-step__num { background: var(--ps-accent); color: var(--ps-accent-ink); }
.fn-step__hint { color: var(--ps-muted); }
.fn-methods__label { border-radius: var(--ps-radius-sm); background: var(--ps-surface); }
.fn-methods__label:has(input:checked) {
  border-color: var(--ps-accent-line);
  box-shadow: 0 0 0 2px var(--ps-accent-soft);
}
.fn-methods__price { color: var(--ps-text-strong); }
.fn-methods__note { color: var(--ps-muted); }
.fn-field__label, .fn-field__static-label { color: var(--ps-text); }
.fn-field__static { color: var(--ps-muted); }
.fn-field__input {
  border-radius: var(--ps-radius-xs);
  border-color: var(--ps-border-strong);
  background: var(--ps-surface);
  color: var(--ps-text);
}
.fn-field__input:focus { outline: 3px solid var(--ps-focus-halo); border-color: var(--ps-focus); }
.fn-field__hint { color: var(--ps-muted); }
.fn-field__error { color: var(--ps-bad-ink); }
.fn-field--invalid .fn-field__input { border-color: var(--ps-bad-ink); background: var(--ps-bad-soft); }
.fn-review dt { color: var(--ps-muted); }
.fn-review dd { color: var(--ps-text); }
.fn-legal { color: var(--ps-muted); }
.fn-check { color: var(--ps-text); }

/* --- confirmation / order / failure --------------------------------------- */
.fn-confirm__eyebrow { color: var(--ps-ok-ink); }
.fn-confirm__title, .fn-order__title { color: var(--ps-text-strong); }
.fn-confirm__number, .fn-confirm__status { color: var(--ps-text); }
.fn-confirm__item-title { color: var(--ps-text-strong); }
.fn-confirm__item-meta { color: var(--ps-muted); }
.fn-confirm__item-price { color: var(--ps-text-strong); }
.fn-confirm__aside, .fn-order__aside, .fn-fail__aside {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
}
.fn-address { border-left: 3px solid var(--ps-accent-line); }
.fn-timeline__dot { background: var(--ps-accent); }
.fn-timeline__label { color: var(--ps-text); }
.fn-timeline__when { color: var(--ps-muted); }
.fn-fail__lead { color: var(--ps-text-strong); }

/* --- product detail (funnel plane) ---------------------------------------- */
.fn-pdp__title { color: var(--ps-text-strong); }
.fn-pdp__seller, .fn-pdp__shop { color: var(--ps-accent-deep); }
.fn-pdp__hook { color: var(--ps-text); }
.fn-buy {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
}
.fn-buy__was, .fn-buy__price-note { color: var(--ps-muted); }
.fn-buy__facts li { border-bottom: 1px solid var(--ps-border); }
.fn-stock--in { color: var(--ps-ok-ink); }
.fn-stock--in .fn-stock__dot { background: var(--ps-ok-ink); }
.fn-stock--low { color: var(--ps-warn-ink); }
.fn-stock--out { color: var(--ps-bad-ink); }
.fn-stock__qty { color: var(--ps-muted); }
.fn-details dt { color: var(--ps-muted); }
.fn-details dd { color: var(--ps-text); }
.fn-facts__item { border-bottom: 1px solid var(--ps-border); color: var(--ps-text); }
.fn-facts--compact .fn-facts__item { color: var(--ps-muted); }
.fn-prose { color: var(--ps-text); }
.fn-trust li { border-top: 1px solid var(--ps-border); color: var(--ps-text); }
.fn-trust--compact li { color: var(--ps-muted); }
.fn-rail__head { border-bottom: 1px solid var(--ps-border); }
.fn-rail__link { color: var(--ps-accent-deep); }
.fn-variants__option { border-radius: var(--ps-radius-sm); }
.fn-variants__option:has(input:checked) {
  border-color: var(--ps-accent-line);
  box-shadow: 0 0 0 2px var(--ps-accent-soft);
}
.fn-variants__price { color: var(--ps-muted); }
.fn-gallery__frame, .fn-gallery__thumb {
  border-radius: var(--ps-radius);
  border-color: var(--ps-border);
  background: var(--ps-surface);
}
.fn-gallery__thumb.is-active { border-color: var(--ps-accent-line); box-shadow: 0 0 0 2px var(--ps-accent-soft); }
.fn-gallery__counter { background: rgba(34, 30, 28, .78); color: #fff; border-radius: var(--ps-pill); }
.fn-gallery__note { color: var(--ps-muted); }
.fn-gallery__dot { background: var(--ps-border-strong); }
.fn-gallery__dot.is-active { background: var(--ps-accent-line); }
.fn-pdp__section { border-top: 1px solid var(--ps-border); }

/* --- mini cart drawer ------------------------------------------------------ */
.fn-drawer__scrim { background: rgba(47, 42, 39, .38); }
.fn-drawer__panel {
  background: var(--ps-surface);
  border-left: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg) 0 0 var(--ps-radius-lg);
}
.fn-drawer__head { background: var(--ps-surface-2); border-bottom: 1px solid var(--ps-border); }
.fn-drawer__title { color: var(--ps-text-strong); }
.fn-drawer__tick { color: var(--ps-ok-ink); }
.fn-drawer__close {
  border-radius: var(--ps-radius-xs);
  background: var(--ps-surface);
  color: var(--ps-text);
  border-color: var(--ps-border-strong);
}
.fn-drawer__item { border-bottom: 1px solid var(--ps-border); }
.fn-drawer__item-title { color: var(--ps-text-strong); }
.fn-drawer__item-meta { color: var(--ps-muted); }
.fn-drawer__item-price { color: var(--ps-text-strong); }
.fn-drawer__empty { color: var(--ps-muted); }
.fn-drawer__foot { background: var(--ps-surface-2); border-top: 1px solid var(--ps-border); }
.fn-drawer__total { color: var(--ps-text-strong); }

/* --- mobile sticky purchase bar ------------------------------------------- */
.fn-stickybuy {
  background: var(--ps-surface);
  border-top: 1px solid var(--ps-border);
  border-radius: var(--ps-radius) var(--ps-radius) 0 0;
  box-shadow: 0 -6px 22px rgba(96, 74, 58, .10);
}
.fn-stickybuy__stock { color: var(--ps-muted); }

/* ===========================================================================
   12 Shared commerce components on the apex (marketplace plane)
   The apex keeps its own chrome, but the sf-*/fn-* components it embeds read
   --sf-* which does not exist there. Fallbacks make them readable instead of
   white-on-transparent (measured 1.18:1 before this block).
   =========================================================================== */
.sf-btn--primary {
  background: var(--sf-accent, var(--ps-accent));
  border-color: var(--sf-accent, var(--ps-accent-line));
  color: var(--sf-on-accent, var(--ps-accent-ink));
}
.sf-btn--primary:hover { background: var(--sf-accent-dark, var(--ps-accent-soft)); }
.sf-btn {
  background: var(--sf-surface, var(--ps-surface));
  border-color: var(--sf-border, var(--ps-border));
  color: var(--sf-text, var(--ps-text));
}
.sf-btn--ghost { background: transparent; }
.sf-card {
  background: var(--sf-surface, var(--ps-surface));
  color: var(--sf-text, var(--ps-text));
  border-color: var(--sf-border, var(--ps-border));
}
.sf-card__title a { color: var(--sf-text, var(--ps-text-strong)); }
.sf-card__price { color: var(--sf-text, var(--ps-text-strong)); }
.sf-card__desc { color: var(--sf-muted, var(--ps-muted)); }
.sf-card__meta { color: var(--sf-muted, var(--ps-muted)); }
.sf-card__stock { color: var(--sf-ok, var(--ps-ok-ink)); }
.sf-badge { background: var(--sf-surface-2, var(--ps-surface-2)); color: var(--sf-muted, var(--ps-text)); }
.sf-badge--cat { background: var(--sf-tag-bg, var(--ps-accent-soft)); color: var(--sf-tag-text, var(--ps-text-strong)); }

/* The apex's generic anchor rule has the same specificity inversion as the
   storefront's: `.cy-body a` (0,1,1) outranks `.mp-util-link`, `.mp-cart-link`
   and `.mp-nav-link` (0,1,0). It is fixed at the source in marketplace.css with
   `:where(.cy-body) a`, but marketplace.css is owned by another workstream and
   WAS reverted once during this change (measured again afterwards: 45 elements
   back to 2.42:1 on the dark navy chrome). So the guarantee lives HERE, in a file
   this change owns, at a specificity (0,2,0) that beats a bare `.cy-body a`
   whatever marketplace.css does. Measured after: 0 failures on /, /cart,
   /search, /stores at 1440 and 390. */
.cy-body .mp-util-link,
.cy-body .mp-util-link__value,
.cy-body .mp-cart-link,
.cy-body .mp-cart-link__label,
.cy-body .mp-nav-link,
.cy-body .mp-nav-all { color: var(--cy-header-text); }
.cy-body .mp-nav-link--strong { color: var(--cy-accent); }
/* Legibility floor for the chrome that stays dark on the apex: measured 3.9:1
   for the footer fine print and counts. */
.cy-body .mp-footer__legal,
.cy-body .mp-footer__legal span,
.cy-body .mp-footer__count,
.cy-body .mp-footer__fine,
.cy-body .mp-footer__fine span { color: #b9c2cc; }
/* Breadcrumb separators were --cy-muted-2 (#767676): 3.86:1 on the apex page
   grey and 4.34:1 on the pastel cream. */
.cyc-crumbs__sep { color: var(--ps-muted); }

/* The apex store card's artwork fallback — the state every NEW store shows until it
   has photographs. The 9px label sat directly on the theme's light gradient stop
   (measured 1.04:1 against the white base and ~3.6:1 against the lightest stop of
   the desk-focus gradient), so it gets its own soft chip: white on a translucent
   warm-dark pill is 8.7:1 even over the lightest stop. The 26px glyph is large text
   and clears 3:1 on its own, but the chip keeps the pair honest. */
.mp-store__art-label {
  color: #fff;
  background: rgba(34, 30, 28, .72);
  border-radius: var(--ps-pill);
  padding: 2px 9px;
  justify-self: center;
  align-self: center;
}
.mp-store__art .mp-store__glyph { color: var(--sf-hero-text, #fff); }

/* ------------------------------------------------- 13 small-screen comfort */
@media (max-width: 700px) {
  body.cy-storefront { font-size: 16px; }
  body.cy-storefront .sf-top__row { padding: 12px 14px; }
  body.cy-storefront .sf-main { padding: 16px 14px 72px; }
  .fn-main { padding: 16px 14px 80px; }
  .fn-page-title { font-size: 24px; }
  .fn-empty { padding: 26px 18px 24px; border-radius: var(--ps-radius); }
  .fn-empty .fn-page-title { font-size: 23px; }
  .fn-line { grid-template-columns: 84px 1fr; padding: 14px; }
  .fn-line__art { width: 84px; height: 84px; }
  .fn-empty__actions .fn-btn,
  .fn-empty__actions .sf-btn { width: 100%; }
}

/* Desktop refinements — re-stated here because a later same-specificity base
   rule would otherwise win over the original media-query rules. */
@media (min-width: 760px) {
  .fn-line { grid-template-columns: 96px 1fr auto; align-items: start; }
  .fn-line__art { width: 96px; height: 96px; }
  .fn-line__actions { grid-column: auto; }
}
@media (min-width: 820px) {
  body.cy-storefront .sf-hero { padding: 34px 32px; }
  body.cy-storefront .sf-footer__cols { grid-template-columns: 1.7fr repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .fn-summary--checkout { padding: 0; }
}
@media (max-width: 480px) {
  .fn-line { grid-template-columns: 72px 1fr; }
  .fn-line__art { width: 72px; height: 72px; }
  .fn-page-title { font-size: 22px; }
}

/* Never let a pastel page grow a horizontal scrollbar. Deliberately NOT
   `overflow-x: clip` on <body> — that would risk clipping the fixed mini-cart
   drawer and the mobile sticky buy bar; the bounded frames below are enough. */
body.cy-storefront .sf-main, body.cy-storefront .sf-top__row,
body.cy-storefront .sf-footer__cols, body.cy-storefront .sf-grid,
body.cy-storefront .sf-hero, .fn-cart, .fn-checkout, .fn-pdp, .fn-line { min-width: 0; }
body.cy-storefront img, .fn-body img { max-width: 100%; height: auto; }

/* Grid blowout guard — MEASURED 2026-09-30: at a 390px viewport the storefront
   home scrolled 400px wide (10px of document overflow) because `repeat(auto-fill,
   minmax(<theme grid-min>, 1fr))` uses `1fr` = `minmax(auto, 1fr)`, so a card whose
   content cannot shrink (a long product title / description) widened its track past
   the container. `minmax(min(<grid-min>, 100%), 1fr)` collapses to one column when
   the container is narrower than the track, and `min-width: 0` on the items stops
   content from driving the track width at any size. Desktop column counts are
   unchanged because the `min()` branch only binds on narrow screens. */
body.cy-storefront .sf-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--sf-grid-min, 190px), 100%), 1fr));
}
body.cy-storefront .sf-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr));
}
body.cy-storefront .sf-grid > *,
body.cy-storefront .sf-spotlight > *,
body.cy-storefront .sf-promos > *,
body.cy-storefront .fn-rail__list > * { min-width: 0; }
body.cy-storefront .sf-card__title,
body.cy-storefront .sf-card__desc,
body.cy-storefront .sf-card__meta { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  body.cy-storefront .sf-card { transition: none; }
  body.cy-storefront .sf-card:hover { transform: none; }
}