/* ============================================================================
   Nouri Narie 2.0 — shop index and product detail

   Loads after components.css on shop.html and the three PDPs, and holds only
   what those four pages need that the shared vocabulary does not already give
   them. Everything with a card, a sticker, a buy box, a stepper, an accordion,
   a marquee or an assurance strip in it is components.css's, untouched.

   No value below is new. Every colour, radius, spacing step and duration is a
   custom property from tokens.css, and the four breakpoints are the system's
   480 / 768 / 1024 / 1280.

   Two constraints this file is written against:

     --shadow-3 is already spent. The PDP buy box carries Rhode's one
     rose-tinted float (components.css), so nothing here may float as well —
     a second instance turns a signature into a haze.

     Disabled is never opacity. js/stock.js sets `disabled` and
     `aria-disabled="true"` on any sold-out add button, and base.css already
     paints that state with --ink-disabled and a not-allowed cursor. Nothing
     here may override it back to a faded live control.
   ========================================================================= */

/* ── shop: bundle band ──────────────────────────────────────────────────────
   Kylie's promo band. The one --ember on the page is the sticker; the band
   itself stays on --mist so the badge is the loudest thing in it. */

.bundle {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  background: var(--shell);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.bundle-copy { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.bundle-copy p { max-width: 56ch; }
.bundle-act { display: flex; }

@media (min-width: 1024px) {
  .bundle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-16);
    padding: var(--s-10) var(--s-12);
  }
  .bundle-act { flex: none; }
}

/* ── shop: FAQ close ────────────────────────────────────────────────────── */

.faq-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  margin-top: var(--s-10);
}
.faq-foot p { max-width: 56ch; color: var(--ink-soft); }

/* ── PDP: breadcrumb ────────────────────────────────────────────────────────
   Rhode's restraint: a plain trail, no chevron glyph font, no separator that
   a screen reader has to read as a word. The slash is decorative. */

.crumbs { padding-block: var(--s-6) 0; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.crumbs li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--rule-soft);
}

.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current='page'] { color: var(--ink); }

/* ── PDP: media column ──────────────────────────────────────────────────────
   The same 1px rule the cards carry, for the same reason: a visible border is
   what keeps this from reading as a generic floating product tile. No shadow
   at rest, and no shadow on hover either — this one is not a link. */

.pdp-media {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--mist);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.pdp-media img { width: 100%; }

/* Decoration only, and only when the file exists — see _ambient() in
   build/pages_shop.py. Never carries a product claim. */
.pdp-ambient {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-top: 1px solid var(--rule-hair);
}

/* ── PDP: buy box interior ──────────────────────────────────────────────────
   .buybox itself is components.css — the sticky offset, the blush ground and
   the one --shadow-3 all live there. These are the rows inside it. */

.buybox h1 { font-size: var(--t-h3); }

.buybox-qty {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.buybox-qty label { color: var(--ink-muted); }

/* The confirmation slot js/cart.js writes into. It ships empty and keeps its
   height so the button does not jump when the first message lands; cart.js
   swaps the class to `pdp-added is-err` when localStorage refuses a write. */
.pdp-added {
  min-height: 1.25rem;
  margin: 0;
  font-size: var(--t-caption);
  line-height: 1.25;
  color: var(--ink-soft);
}
.pdp-added.is-err { color: var(--danger); }

.buybox-assure {
  list-style: none;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-hair);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--ink-muted);
}

/* ── PDP: actives ───────────────────────────────────────────────────────────
   These reuse .card for its border and its body rhythm, but nothing in them is
   a link. The lift-and-float hover .card carries in a product grid would be an
   affordance pointing at nothing, so it is dropped here — the border stays. */

.actives-grid .card:hover {
  transform: none;
  box-shadow: var(--shadow-0);
}

/* ── PDP: how to use ────────────────────────────────────────────────────────
   Rhode's reading rhythm rather than Kylie's three-across ladder: these are
   three consecutive instructions, not three parallel options, so they run down
   the page in order. The mono index is the same one .step-index uses. */

.use-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 68ch;
  border-top: 1px solid var(--rule-soft);
}

.use-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}

.use-step-n { flex: none; color: var(--sage-deep); }
.use-steps p { color: var(--ink-soft); }

/* ── PDP: cross-sell ──────────────────────────────────────────────────────── */

.cross-all { margin-top: var(--s-8); }

/* ── PDP: sticky add-to-cart ────────────────────────────────────────────────
   .atc-bar is components.css, including the 1024 cut-off and the transform it
   rests at. These are the two lines of copy inside it. */

.atc-copy { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.atc-copy p { margin: 0; }
.atc-copy .t-sm {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}