/* ============================================================
   Plants Whisperer — R2B customer layer
   The approved Greenfield customer experience (previews/greenfield-final,
   customer screens 5–13 + system 35–40) implemented over the REAL storefront
   DOM. Same ids, same hooks, same generator anchors, same guards: this file
   re-composes what the engine already emits and changes no contract.

   It REPLACES assets/storefront-p5.css (the previous visual generation) on
   every customer page — index.html and, through the generators, catalog.html,
   policy.html and plants/** — and on order-success.html. One visual layer at a
   time: identity-v2.css, card.css, catalog.css, product.css and policy.css stay
   as the structural base and are recoloured through the token cutover in §0.

   Language of the layer (FINAL-BRAND-FREEZE + Greenfield):
     · light above, shade below: mist ground, white surfaces, a shade tab bar
       with Sun on the selected tab; Sun otherwise only on the ONE decisive
       commerce action of a surface (add to cart / checkout / place order);
     · the leaf-tip corner (4px bottom-start) on every rectangle;
     · no shadows, no blur, no glass, no pills — depth is shade against mist;
     · ledgers: white blocks, 56px rows, hairline separators;
     · running text stays in the four loaded families. The frozen brand
       families are NOT loaded (.claude/rules/arabic-rtl.md: no new font
       without its own owner gate) — the wordmark ships as outlines
       (assets/brand/pw-wordmark.svg, pw-hams.svg), everything else is the
       brand sans role from pw-brand-tokens.css.

   `body.p5` is the layer's scope hook. The class predates this file (Phase 5)
   and is read by the generators, the QA harnesses and the generated pages, so
   it stays as a hook name; nothing of Phase 5's material remains here.
   ============================================================ */

/* ============================================================
   0 · tokens + the cutover
   The structural sheets read --archive-*. Redefining those names inside the
   customer scope recolours every base rule at once, so no cream, terracotta
   or serif can survive underneath this layer.
   ============================================================ */
body.p5 {
  --r2-shade: var(--pw-shade, #10312B);
  --r2-shade2: #1B443C;
  --r2-shade3: #27564C;
  --r2-mist: var(--pw-mist, #EDEFEA);
  --r2-mist2: #E3E7E1;
  --r2-white: #FFFFFF;
  --r2-ink: #0E1A17;
  --r2-ink2: var(--pw-text-secondary, #4C625C);
  --r2-ink3: #6F7D78;
  --r2-line: #DCE1DC;
  --r2-line2: #E8ECE7;
  --r2-sun: var(--pw-sun, #F4C95D);
  --r2-sun2: #E3AE2C;
  --r2-bloom: #D9707C;                         /* favourites — customer only */
  --r2-ok: var(--pw-brand-success, #2F6847);
  --r2-wn: var(--pw-brand-warning, #9A6B18);
  --r2-dg: var(--pw-brand-danger, #963F49);
  --r2-nf: var(--pw-info, #1F5E70);
  --r2-r: 16px;
  --r2-rb: 12px;
  --r2-rs: 8px;
  --r2-tip: 4px;
  --r2-plate: linear-gradient(180deg, #E9ECE6 0%, #D4DBD3 100%);
  --r2-font: var(--pw-brand-sans, 'IBM Plex Sans Arabic', system-ui, sans-serif);
  --r2-ease: var(--pw-brand-ease, cubic-bezier(0.22, 0.9, 0.24, 1));
  --r2-hdr: 52px;
  --r2-pad: 16px;
  --r2-safe-b: env(safe-area-inset-bottom, 0px);
  --r2-safe-t: env(safe-area-inset-top, 0px);
  --r2-dirx: -1;

  /* names the Phase 5 hooks in the pages still read (p5-eyebrow, p5-surf …) */
  --p5-r-touch: var(--r2-rb);
  --p5-r-sheet: 20px;
  --p5-r-pill: var(--r2-rb);
  --p5-ease: var(--r2-ease);
  --p5-hdr: var(--r2-hdr);
  --p5-pad: var(--r2-pad);
  --p5-safe: var(--r2-safe-b);
  --p5-dirx: var(--r2-dirx);

  /* ── the cutover: the structural sheets now read the brand ── */
  --archive-paper: var(--r2-mist);
  --archive-paper-deep: var(--r2-mist2);
  --archive-white: var(--r2-white);
  --archive-ink: var(--r2-ink);
  --archive-ink-soft: var(--r2-ink2);
  --archive-muted: var(--r2-ink2);
  --archive-moss: var(--r2-ok);
  --archive-sage: var(--r2-ink3);
  --archive-clay: var(--r2-shade);
  --archive-clay-deep: var(--r2-shade);
  --archive-clay-light: var(--r2-shade3);
  --archive-clay-pale: var(--r2-mist2);
  --archive-fog: var(--r2-line);
  --archive-line: var(--r2-line);
  --archive-line-strong: rgba(16, 49, 43, .32);
  --archive-line-soft: var(--r2-line2);
  --archive-danger: var(--r2-dg);
  --archive-badge: var(--r2-shade);
  --archive-display-ar: var(--r2-font);
  --archive-display-en: var(--r2-font);
  --archive-body: var(--r2-font);
  --wine: var(--r2-shade);
  --pw-fog: var(--r2-line);
  --radius-card: var(--r2-rb);
  --radius-pill: var(--r2-rb);

  background: var(--r2-mist);
  color: var(--r2-ink);
  font-family: var(--r2-font);
  -webkit-tap-highlight-color: transparent;
}
html[dir='ltr'] body.p5 { --r2-dirx: 1; }
@media (min-width: 768px)  { body.p5 { --r2-pad: 24px; } }
@media (min-width: 1024px) { body.p5 { --r2-pad: 48px; --r2-hdr: 64px; } }

/* identity-v2 rules the page ground on 48px lines; the brand ground is plain */
html:has(body.p5) { background: var(--pw-mist, #EDEFEA); }
body.p5 { background-image: none; }
body.p5 h1, body.p5 h2, body.p5 h3, body.p5 .display { font-family: var(--r2-font); font-weight: 700; letter-spacing: 0; }
html[dir='ltr'] body.p5 h1, html[dir='ltr'] body.p5 h2, html[dir='ltr'] body.p5 h3 { font-family: var(--r2-font); }

/* iOS zooms the page when a focused field is under 16px. Not a style choice —
   the floor for every customer field, guarded by customer-field-size-guard. */
body.p5 input, body.p5 select, body.p5 textarea { font-size: 16px; }

/* shared primitives, applied to the DOM the engine already emits */
body.p5 .p5-eyebrow {
  display: block;
  font-family: var(--archive-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--r2-ink2);
  letter-spacing: 0;
  text-transform: none;
}
body.p5 .p5-surf, body.p5 .hero-band {
  background: var(--r2-white);
  border: 0;
  border-radius: var(--r2-r);
  border-end-start-radius: var(--r2-tip);
  box-shadow: none;
}
body.p5 :focus-visible { outline: 2px solid var(--pw-focus-brand, #10312B); outline-offset: 2px; }
body.p5 .pw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   1 · masthead — mist, one hairline, the symbol + the frozen wordmark
   ============================================================ */
body.p5 .nav-sentinel { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
body.p5 header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--r2-safe-t) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: var(--r2-mist);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  transition: box-shadow 200ms var(--r2-ease);
}
body.p5 header.nav.is-scrolled { box-shadow: inset 0 -1px 0 var(--r2-line); }
body.p5 .nav-inner {
  max-width: 1360px;
  height: var(--r2-hdr);
  min-height: var(--r2-hdr);
  margin: 0 auto;
  padding: 0 var(--r2-pad);
  display: flex;
  align-items: center;
  gap: 12px;
}
body.p5 .nav-inner .brand { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--r2-shade); }
body.p5 .nav-inner .brand .brand-mark { display: block; block-size: 28px; inline-size: auto; flex: none; }
/* the frozen type: outlines, never live text (no new font family) */
body.p5 .brand-wm { display: block; block-size: 16px; inline-size: auto; flex: none; }
body.p5 .brand-hams { display: none; block-size: 13px; inline-size: auto; flex: none; margin-inline-start: 2px; }
body.p5 .nav-inner .nav-spacer { display: none; }
body.p5 .nav-inner nav.links { display: none; }
body.p5 .nav-toggles { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
body.p5 .icon-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r2-rb);
  background: none;
  color: var(--r2-ink);
  cursor: pointer;
  transition: background 160ms var(--r2-ease);
}
body.p5 .icon-toggle::before { content: none; }
body.p5 .icon-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: round; }
@media (hover: hover) { body.p5 .icon-toggle:hover { background: var(--r2-mist2); } }
body.p5 .icon-toggle:active { background: var(--r2-mist2); }
body.p5 .lang-toggle-desktop {
  position: relative;
  height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r2-rs);
  background: none;
  color: var(--r2-shade);
  font-family: var(--r2-font);
  font-size: 13px;
  font-weight: 600;
  isolation: auto;
  cursor: pointer;
}
body.p5 .lang-toggle-desktop::before { content: ''; position: absolute; inset: 7px 0; z-index: -1; width: auto; height: auto; min-width: 0; transform: none; border: 0; border-radius: var(--r2-rs); background: var(--r2-mist2); }
body.p5 .lang-toggle-desktop { isolation: isolate; }
body.p5 .cart-toggle-header { position: relative; }
body.p5 .cart-badge-header,
body.p5 .cart-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--r2-shade);
  color: var(--r2-white);
  font: 600 10px/17px var(--r2-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  display: none;
}
body.p5 .cart-badge-header.show,
body.p5 .cart-badge.show { display: block; }
/* the open search field takes the brand's slot: white, 16px, a shade ring */
body.p5 .search-box {
  height: 44px;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-white);
  border: 0;
  box-shadow: 0 0 0 1px var(--r2-line);
  padding: 0 12px;
  align-items: center;
  gap: 8px;
}
body.p5 .search-box:focus-within { box-shadow: 0 0 0 2px var(--r2-shade); }
body.p5 .search-box svg { width: 20px; height: 20px; color: var(--r2-ink2); }
body.p5 .search-box input { border: 0; background: none; font-size: 16px; font-family: var(--r2-font); color: var(--r2-ink); outline: none; }
body.p5 .search-results {
  top: calc(100% + 6px);
  border: 0;
  border-radius: var(--r2-r);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-white);
  box-shadow: 0 0 0 1px var(--r2-line);
  padding: 4px 0;
}
body.p5 .search-result-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--r2-line2);
  background: none;
  color: var(--r2-ink);
  font-family: var(--r2-font);
  text-align: start;
  cursor: pointer;
}
body.p5 .search-result-item:last-child { border-bottom: 0; }
body.p5 .search-result-index, body.p5 .search-result-arrow { display: none; }
body.p5 .search-result-thumb { width: 56px; height: 56px; border-radius: 10px; border-end-start-radius: 3px; object-fit: cover; background: var(--r2-plate); display: grid; place-items: center; font: 600 12px var(--r2-font); color: var(--r2-shade); }
body.p5 .search-result-info { min-width: 0; }
body.p5 .search-result-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .search-result-latin { display: block; font-size: 12.5px; color: var(--r2-ink2); direction: ltr; unicode-bidi: isolate; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; text-transform: none; }
body.p5 .search-result-price { font-family: var(--archive-mono); font-size: 14px; font-weight: 500; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body.p5 .search-result-empty { padding: 20px 16px; color: var(--r2-ink2); font-size: 14px; }
body.p5 .search-result-empty span { display: none; }
/* the close control exists only while the field is open — the base hides it, and
   the icon rule above must not undo that */
body.p5 .close-search-mobile { display: none; font-size: 0; }
body.p5 .nav-inner.search-open .close-search-mobile { display: inline-grid; }
body.p5 .close-search-mobile::after { content: '✕'; font-size: 15px; }
@media (min-width: 768px) {
  body.p5 .brand-hams { display: block; }
  body.p5 .nav-inner .brand .brand-mark { block-size: 32px; }
  body.p5 .brand-wm { block-size: 18px; }
  body.p5 .brand-hams { block-size: 14px; }
}
@media (min-width: 1024px) {
  body.p5 .nav-inner .brand { flex: 0 0 auto; }
  body.p5 .nav-inner nav.links { display: flex; gap: 26px; margin-inline-start: 36px; flex: 1 1 auto; font-size: 14.5px; font-weight: 500; }
  body.p5 nav.links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--r2-shade); padding: 0 4px; border-bottom: 0; text-decoration: none; transition: color 160ms var(--r2-ease); }
  body.p5 nav.links a:hover, body.p5 nav.links a.is-active { color: var(--r2-ink); border-bottom: 0; font-weight: 600; }
  body.p5 .nav-toggles { gap: 4px; }
}

/* ============================================================
   2 · hero — the lifestyle plate, the specimen tag, the thesis
   ============================================================ */
body.p5 .hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 1360px;
  min-height: 0;
  margin: 0 auto;
  padding: 4px var(--r2-pad) 0;
  isolation: auto;
  background: transparent;
}
body.p5 .hero::before, body.p5 .hero::after,
body.p5 .hero-visual::before, body.p5 .hero-visual::after { content: none; display: none; }
body.p5 .hero, body.p5 .hero-content { direction: inherit; text-align: start; }
body.p5 .hero > .hero-visual { order: -1; }
body.p5 .hero > .hero-content { order: 1; }
body.p5 .hero-visual {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r2-r);
  border-end-start-radius: var(--r2-tip);
  box-shadow: none;
  background: var(--r2-plate);
}
body.p5 .hero-visual picture, body.p5 .hero-visual img {
  display: block; width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal;
}
/* the specimen tag: mono, on shade, at the plate's bottom-start (the leaf tip) */
body.p5 .hero-visual-meta {
  position: absolute;
  top: auto;
  bottom: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
  z-index: 2;
  display: inline-block;
  width: auto;
  padding: 5px 9px;
  border-radius: 6px;
  border-end-start-radius: 2px;
  background: var(--r2-shade);
  color: var(--r2-white);
  font: 500 11.5px/1.3 var(--archive-mono);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  writing-mode: horizontal-tb;
  transform: none;
  direction: ltr;
  unicode-bidi: isolate;
}
body.p5 .hero-content {
  position: static;
  grid-column: auto;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: none;
  padding: 0 2px;
  text-align: start;
  background: transparent;
}
body.p5 .hero-eyebrow { margin: 0 0 8px; font-family: var(--r2-font); font-size: 12.5px; font-weight: 500; color: var(--r2-shade); }
body.p5 .hero h1 { max-width: none; margin: 0; font-family: var(--r2-font); font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: 0; text-wrap: balance; color: var(--r2-ink); }
body.p5 .hero p.sub { max-width: 52ch; margin: 10px 0 0; color: var(--r2-ink2); font-size: 14.5px; line-height: 1.6; }
/* the live featured specimen: a white ledger row under the thesis */
body.p5 .hero-band { display: block; min-height: 64px; margin-top: 14px; box-shadow: none; }
body.p5 .hero-band[hidden] { display: block; visibility: hidden; }
body.p5 .hero-band-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; color: inherit; text-decoration: none; }
body.p5 .hero-band-txt { min-width: 0; }
body.p5 .hero-band-txt b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .hero-band-txt small { display: block; font-size: 12.5px; color: var(--r2-ink2); margin-top: 2px; }
body.p5 .hero-band-txt small .is-pickup { color: var(--r2-wn); }
body.p5 .hero-band-price { font-family: var(--archive-mono); font-size: 15px; font-weight: 500; color: var(--r2-ink); white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body.p5 .hero-band-price .price-original { display: none; }
body.p5 .hero-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
body.p5 .hero .btn-primary,
body.p5 .hero .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 160ms var(--r2-ease), background 160ms var(--r2-ease);
}
body.p5 .hero .btn-primary { flex: 1 1 100%; background: var(--r2-shade); color: var(--r2-white); border: 0; box-shadow: none; }
body.p5 .hero .btn-primary::after { content: none; display: none; }
body.p5 .hero .btn-primary svg { display: none; }
body.p5 .hero .btn-ghost { background: transparent; color: var(--r2-shade); border: 0; min-height: 44px; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.p5 .hero .btn-primary:active, body.p5 .hero .btn-ghost:active { filter: brightness(.88); transform: none; }
@media (hover: hover) {
  body.p5 .hero .btn-primary:hover { background: var(--r2-shade2); transform: none; }
  body.p5 .hero .btn-ghost:hover { background: var(--r2-mist2); border-color: transparent; }
}
body.p5 .hero-content > * { animation: none; opacity: 1; transform: none; }
@media (min-width: 768px) {
  body.p5 .hero { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding-top: 16px; }
  body.p5 .hero-visual { grid-column: 1; grid-row: 1; aspect-ratio: 5 / 4; }
  body.p5 .hero-content { grid-column: 2; grid-row: 1; padding: 0; }
  body.p5 .hero h1 { font-size: 40px; }
  body.p5 .hero .btn-primary { flex: 0 0 auto; }
  body.p5 .hero-actions { margin-top: 18px; }
}
@media (min-width: 1024px) {
  body.p5 .hero { gap: 48px; padding-top: 28px; }
  body.p5 .hero h1 { font-size: 48px; }
  body.p5 .hero p.sub { font-size: 15.5px; margin-top: 14px; }
  body.p5 .hero-band { max-width: 460px; }
  body.p5 .hero-visual { max-height: 620px; }
}

/* ============================================================
   3 · collection — section heads, discovery, plates
   ============================================================ */
body.p5 .shop { padding: 36px 0 0; background: transparent; }
body.p5 .shop::before { content: none; display: none; }
body.p5 .shop > .wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--r2-pad); }
/* the Greenfield section head: a 22px title, the count as a quiet label */
body.p5 .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; padding: 0; border: 0; }
body.p5 .section-head h2 { margin: 0; font-family: var(--r2-font); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--r2-ink); }
body.p5 .section-head h2::after { content: none; }
body.p5 .section-meta { padding: 0; border: 0; background: none; font: 500 12.5px var(--r2-font); color: var(--r2-ink2); letter-spacing: 0; }

/* --- discovery: the field is an input, the two controls are quiet chips --- */
body.p5 .disco { margin: 2px 0 18px; }
body.p5 .disco[hidden] { display: none; }
body.p5 .disco-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
body.p5 .disco-search {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-white);
  box-shadow: 0 0 0 1px var(--r2-line);
  transition: box-shadow 160ms var(--r2-ease);
}
body.p5 .disco-search:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--r2-shade); }
body.p5 .disco-search > svg { flex: none; width: 20px; height: 20px; color: var(--r2-ink2); stroke-width: 1.75; }
body.p5 .disco-search input { flex: 1; min-width: 0; height: 100%; min-height: 48px; border: 0; background: none; color: var(--r2-ink); font: inherit; font-family: var(--r2-font); font-size: 16px; outline: none; }
body.p5 .disco-search input::placeholder { color: var(--r2-ink3); }
body.p5 .disco-search input::-webkit-search-cancel-button { display: none; }
body.p5 .disco-x { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; margin-inline-end: -8px; border: 0; border-radius: 50%; background: none; color: var(--r2-ink2); font-size: 13px; line-height: 1; cursor: pointer; }
body.p5 .disco-x[hidden] { display: none; }
body.p5 .disco-x::before { content: ''; position: absolute; inset: -4px; }
@media (hover: hover) { body.p5 .disco-x:hover { color: var(--r2-ink); } }
body.p5 .disco-btn,
body.p5 .disco-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r2-rs);
  border-end-start-radius: 3px;
  background: var(--r2-mist2);
  color: var(--r2-shade);
  font-family: var(--r2-font);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
body.p5 .disco-btn[hidden] { display: none; }
body.p5 .disco-btn > svg, body.p5 .disco-sort > svg { flex: none; width: 18px; height: 18px; color: var(--r2-shade); stroke-width: 1.75; }
body.p5 .disco-sort:focus-within { outline: 2px solid var(--r2-shade); outline-offset: 2px; }
@media (hover: hover) { body.p5 .disco-btn:hover, body.p5 .disco-sort:hover { background: #D9DED8; } }
body.p5 .disco-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--r2-shade); color: var(--r2-white); font-family: var(--archive-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.p5 .disco-badge[hidden] { display: none; }
/* a real <select>: the OS picker on a phone — at 16px so iOS never zooms (the
   R2A carry-over: this control sat at 13.5px) */
body.p5 .disco-sort { padding-inline-end: 12px; }
body.p5 .disco-sort select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none;
  color: inherit; font: inherit; font-weight: 600;
  font-size: 16px;
  padding: 0; margin: 0;
  outline: none;
  max-width: 42vw;
  text-overflow: ellipsis;
  cursor: pointer;
}
@media (min-width: 768px) { body.p5 .disco-sort select { max-width: none; } }
body.p5 .disco-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.p5 .disco-active[hidden] { display: none; }
body.p5 .disco-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r2-rs);
  border-end-start-radius: 3px;
  background: var(--r2-white);
  box-shadow: 0 0 0 1px var(--r2-line);
  color: var(--r2-ink);
  font-family: var(--r2-font);
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  cursor: pointer;
}
body.p5 .disco-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.p5 .disco-chip-x { flex: none; font-size: 10px; color: var(--r2-ink2); }
body.p5 .disco-chip--clear { background: none; box-shadow: none; color: var(--r2-shade); font-weight: 600; }
@media (hover: hover) { body.p5 .disco-chip:hover { box-shadow: 0 0 0 1px var(--r2-shade); } }
body.p5 .disco-none { grid-column: 1 / -1; padding: 40px 8px; text-align: center; }
body.p5 .disco-none-t { margin: 0; font-family: var(--r2-font); font-size: 19px; font-weight: 700; color: var(--r2-ink); }
body.p5 .disco-none-p { margin: 8px auto 0; max-width: 42ch; font-size: 14px; line-height: 1.6; color: var(--r2-ink2); }
body.p5 .disco-none-btn { margin-top: 16px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-mist2); color: var(--r2-shade); font-family: var(--r2-font); font-size: 14px; font-weight: 600; cursor: pointer; }
@media (min-width: 768px) {
  body.p5 .disco-bar { grid-template-columns: minmax(0, 1fr) auto auto; }
  body.p5 .disco-search { grid-column: auto; max-width: 440px; }
  body.p5 .disco { margin-bottom: 22px; }
}

/* --- the grid: plates in 2 / 3 / 4 tracks, by container width, not viewport ---
   Every card grid on the customer surfaces (home, a shelf, the plant page's
   related rows, the saved list inside the account sheet) reads its own width,
   so the same card is right inside a 520px sheet and a 1360px page. */
body.p5 .grid.pw-cards, body.p5 .coll-row, body.p5 .account-fav-grid { container-type: inline-size; }
body.p5 .grid.pw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
body.p5 .grid.pw-cards.has-featured { grid-template-columns: 1fr; }
@container (min-width: 620px)  { body.p5 .grid.pw-cards:not(.has-featured) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } }
@container (min-width: 960px)  { body.p5 .grid.pw-cards:not(.has-featured) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; } }
body.p5 .grid .loading { grid-column: 1 / -1; color: var(--r2-ink2); }
body.p5 .grid .grid-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 20px; text-align: center; }
body.p5 .grid .grid-state-text { margin: 0; color: var(--r2-ink2); font-size: 14px; }
body.p5 .grid .grid-state-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border: 0; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-mist2); color: var(--r2-shade); font: inherit; font-family: var(--r2-font); font-size: 14px; font-weight: 600; cursor: pointer; }
@media (min-width: 768px)  { body.p5 .shop { padding-top: 44px; } body.p5 .section-head h2 { font-size: 24px; } }
@media (min-width: 1024px) {
  body.p5 .shop { padding-top: 56px; }
  body.p5 .section-head h2 { font-size: 26px; }
  /* the flat view keeps its editorial first row: one large plate, then rhythm */
  body.p5 #coll #grid.pw-cards:not(.has-featured) { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px 20px; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card { grid-column: span 3; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1) { grid-column: span 5; grid-row: span 2; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(2) { grid-column: span 4; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-next { grid-column: span 3; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-story { grid-column: span 7; align-self: end; }
  body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1) .name-ar { font-size: 17px; }
}

/* --- the card: a plate, the specimen tag at the leaf tip, the heart --- */
body.p5 .card.cat-card { position: relative; container-type: inline-size; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.p5 .card .cat-link { display: block; text-decoration: none; color: inherit; }
body.p5 .card .card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-plate);
  box-shadow: none;
  transition: none;
}
body.p5 .card .card-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 260ms var(--r2-ease); }
body.p5 .card:hover .card-media { transform: none; box-shadow: none; }
body.p5 .card:hover .card-img { transform: none; }
body.p5 .card .badge-seal { display: none; }
/* the tag is emitted inside the caption, so it is placed against the card
   (position: relative) by the plate's own 4:5 height — the same arithmetic
   .cat-add uses — rather than by the caption's flow */
body.p5 .card .cat-sp {
  position: absolute;
  top: calc(125cqw - 34px);
  bottom: auto;
  inset-inline-start: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  border-end-start-radius: 2px;
  background: var(--r2-white);
  color: var(--r2-shade);
  font: 500 11.5px/1.3 var(--archive-mono);
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
}
body.p5 .card .cat-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 0 0; }
body.p5 .card .cat-caption > .name-ar {
  flex: 0 0 100%;
  display: block;
  -webkit-line-clamp: unset;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--r2-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[dir='ltr'] body.p5 .card .cat-caption > .name-ar { font-family: var(--r2-font); font-size: 15px; line-height: 1.35; }
/* the binomial: one line, LTR-isolated, quiet */
body.p5 .card .cat-caption > .name-en { flex: 0 0 100%; display: block; margin: 0; font-family: var(--r2-font); font-size: 12.5px; font-weight: 400; color: var(--r2-ink2); direction: ltr; unicode-bidi: isolate; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; text-transform: none; }
html[dir='rtl'] body.p5 .card .cat-caption > .name-en { text-align: right; }
body.p5 .card .cat-caption > .cat-meta { flex: 0 0 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 3px 0 0; }
body.p5 .card .cat-meta .cat-price { font-family: var(--r2-font); font-size: 15px; font-weight: 600; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body.p5 .card .cat-meta .cat-tier { font-size: 12px; color: var(--r2-ink2); letter-spacing: 0; }
body.p5 .card .cat-meta .cat-tier::before { content: none; }
/* status is a diamond + a word, never colour alone */
body.p5 .card .cat-caption > .cat-avail { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--r2-ok); }
body.p5 .card .cat-caption > .cat-avail::before { content: ''; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: currentColor; flex: none; }
body.p5 .card .cat-caption > .cat-avail.out { color: var(--r2-ink2); }
body.p5 .card .cat-caption > .fulfill-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--r2-wn); }
body.p5 .card .cat-caption > .fulfill-chip::before { content: ''; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: currentColor; flex: none; }
/* quick add: a white disc at the plate's bottom-end, 44px */
body.p5 .card .cat-add {
  position: absolute;
  inset-inline-end: 8px;
  bottom: auto;
  top: calc(125cqw - 52px);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--r2-white);
  color: var(--r2-shade);
  box-shadow: none;
  font: 400 22px/1 var(--r2-font);
  isolation: auto;
  z-index: 2;
  transition: background 160ms var(--r2-ease), color 160ms var(--r2-ease);
  cursor: pointer;
}
body.p5 .card .cat-add::before { content: none; }
body.p5 .card .cat-add.added { background: var(--r2-shade); color: var(--r2-white); }
body.p5 .card .cat-add:active { background: var(--r2-mist2); }
body.p5 .card.is-sold .card-img { opacity: .55; }
body.p5 .cat-link:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 3px; border-radius: 14px; }

/* the saved control: a white disc on the plate's top-end; saved = bloom, filled */
body.p5 .card { position: relative; }
body.p5 .cat-fav {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--r2-ink);
  cursor: pointer;
  isolation: auto;
  -webkit-tap-highlight-color: transparent;
}
body.p5 .cat-fav::before { content: none; }
body.p5 .cat-fav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: round; transition: fill 160ms var(--r2-ease), transform 160ms var(--r2-ease); }
body.p5 .cat-fav[aria-pressed='true'] { color: var(--r2-bloom); }
body.p5 .cat-fav[aria-pressed='true'] svg { fill: currentColor; stroke: currentColor; }
body.p5 .cat-fav:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: -2px; }
body.p5 .cat-fav:active svg { transform: scale(.9); }
@media (hover: hover) { body.p5 .cat-fav:hover { background: var(--r2-white); } body.p5 .cat-fav:hover svg { stroke: var(--r2-bloom); } }
body.p5 .cat-fav.fs-fav { position: static; inset: auto; background: var(--r2-mist2); }

/* --- the two composition tiles the home grid draws (index.html only) --- */
body.p5 .p5-next { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 16px; border: 1px dashed var(--r2-line); border-radius: 14px; border-end-start-radius: var(--r2-tip); background: none; color: var(--r2-ink2); font-size: 13px; text-align: center; }
body.p5 .p5-next::before { content: none; }
body.p5 .p5-next small { display: block; font-size: 12px; margin-top: 2px; }
/* the archive note is the shade story block */
body.p5 .p5-story { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--r2-shade); border: 0; border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); box-shadow: none; color: var(--r2-white); text-decoration: none; }
body.p5 .p5-story .p5-eyebrow { color: rgba(255, 255, 255, .72); }
body.p5 .p5-story blockquote { margin: 0; font-family: var(--r2-font); font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--r2-white); }
body.p5 .p5-story cite { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .72); }
@media (min-width: 1024px) { body.p5 .p5-story { padding: 24px; } body.p5 .p5-story blockquote { font-size: 22px; } }

/* --- the shelves (default home view): the owner's categories as sections --- */
body.p5 #grid.is-grouped { display: block; }
body.p5 .coll-group + .coll-group { margin-top: 32px; }
body.p5 .coll-head { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; border-bottom: 0; }
body.p5 .coll-head h3 { margin: 0; font-family: var(--r2-font); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--r2-ink); }
body.p5 .coll-meta { font-family: var(--r2-font); font-size: 12.5px; font-weight: 500; color: var(--r2-ink2); letter-spacing: 0; }
body.p5 .coll-see { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--r2-shade); font: inherit; font-family: var(--r2-font); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
@media (hover: hover) { body.p5 .coll-see:hover { color: var(--r2-ink); } }
body.p5 .coll-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@container (min-width: 620px) { body.p5 .coll-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } }
@container (min-width: 960px) { body.p5 .coll-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; } }
@media (min-width: 768px)  { body.p5 .coll-head h3 { font-size: 22px; } }
@media (min-width: 1024px) { body.p5 .coll-group + .coll-group { margin-top: 44px; } body.p5 .coll-head h3 { font-size: 24px; } }

/* ============================================================
   4 · ordering facts (the story on shade) · care (a ledger) · colophon
   ============================================================ */
body.p5 .order-facts { width: 100%; max-width: 1360px; margin: 0 auto; padding: 32px var(--r2-pad) 0; }
body.p5 .order-facts::before { content: none; display: none; }
body.p5 .order-facts > .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px 20px;
  border: 0;
  border-radius: var(--r2-r);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-shade);
  color: var(--r2-white);
}
/* the kicker: mono, Latin, on the block's first line */
body.p5 .order-facts > .wrap::before { content: 'PLANTS WHISPERER · KUWAIT'; grid-column: 1 / -1; font: 500 11.5px/1 var(--archive-mono); color: rgba(255, 255, 255, .72); direction: ltr; text-align: start; letter-spacing: 0; }
html[dir='rtl'] body.p5 .order-facts > .wrap::before { text-align: right; }
body.p5 .order-fact { padding: 0; margin: 0; border: 0; }
body.p5 .order-fact + .order-fact { border-inline-start: 0; padding-inline-start: 0; }
body.p5 .order-facts .order-fact h3, html[lang='ar'] body.p5 .order-facts .order-fact h3 { margin: 0; font-family: var(--r2-font); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--r2-white); }
body.p5 .order-facts .order-fact p { margin: 4px 0 0; max-width: none; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
@media (min-width: 768px) {
  body.p5 .order-facts > .wrap { grid-template-columns: repeat(3, 1fr); gap: 18px 24px; padding: 26px 26px 24px; }
}

body.p5 .care { padding: 40px var(--r2-pad) 0; background: transparent; color: var(--r2-ink); }
body.p5 .care::before { content: none; display: none; }
body.p5 .care > .wrap { max-width: 1360px; margin: 0 auto; padding: 0; }
body.p5 .care-head { margin: 0 0 12px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; }
body.p5 .care-head h2 { margin: 0; font-family: var(--r2-font); font-size: 22px; font-weight: 700; line-height: 1.2; }
body.p5 .care-head h2::after { content: none; }
body.p5 .care-head p { margin: 0; color: var(--r2-ink2); font-size: 14px; }
/* six folds as one white ledger */
body.p5 .care-grid { display: block; border: 0; background: var(--r2-white); border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); overflow: hidden; }
body.p5 .care-card { background: none; border: 0; border-bottom: 1px solid var(--r2-line2); border-radius: 0; box-shadow: none; padding: 0 16px; }
body.p5 .care-card:last-child { border-bottom: 0; }
body.p5 .care-fold-h { margin: 0; }
body.p5 .care-fold {
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--r2-ink);
  font-family: var(--r2-font);
  font-size: 15.5px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
body.p5 .care-fold[aria-expanded='true'] { border-bottom: 0; }
body.p5 .care-fold-sign { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--r2-shade); font-family: var(--r2-font); font-size: 20px; font-weight: 400; line-height: 1; }
body.p5 .care-fold-sign::after { content: '+'; }
body.p5 .care-fold[aria-expanded='true'] .care-fold-sign::after { content: '−'; }
body.p5 .care-body { padding: 0 0 16px; }
body.p5 .care-art { display: none; }
body.p5 .care-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--r2-ink2); }
@media (min-width: 768px) { body.p5 .care { padding-top: 52px; } body.p5 .care-head h2 { font-size: 24px; } }
@media (min-width: 1024px) {
  body.p5 .care { padding-top: 64px; }
  body.p5 .care-head h2 { font-size: 26px; }
  body.p5 .care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; padding: 6px 28px; }
  body.p5 .care-card { padding: 0; }
  body.p5 .care-card:nth-last-child(-n+3) { border-bottom: 0; }
}

/* the colophon: the bilingual lockup, the register lines, the links */
body.p5 .colophon { background: transparent; color: var(--r2-ink); padding: 48px var(--r2-pad) calc(24px + 12px + var(--r2-safe-b)); border-top: 0; }
body.p5 .colophon .wrap { max-width: 1360px; margin: 0 auto; padding: 0; }
body.p5 .col-head, body.p5 .col-cta { display: none; }
body.p5 .col-mark { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; padding: 26px 0; border-top: 1px solid var(--r2-line); border-bottom: 1px solid var(--r2-line); }
body.p5 .col-mark .brand-name { display: none; }
body.p5 .col-lockup { display: none; block-size: 64px; inline-size: auto; }
html[dir='ltr'] body.p5 .col-lockup--b1 { display: block; }
html[dir='rtl'] body.p5 .col-lockup--b3 { display: block; }
body.p5 .col-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; color: var(--r2-ink2); }
body.p5 .col-meta dt { font-family: var(--archive-mono); font-size: 11.5px; font-weight: 500; color: var(--r2-ink2); direction: ltr; text-align: start; }
body.p5 .col-meta dd { margin: 0; color: var(--r2-ink); font-family: var(--archive-mono); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; text-align: start; }
body.p5 .col-meta dd .ar { font-family: var(--r2-font); direction: inherit; unicode-bidi: normal; }
body.p5 .col-tail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; margin: 0; padding: 20px 0 0; border-top: 0; }
body.p5 .colophon .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
body.p5 .colophon .foot-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--r2-shade); font-size: 13px; font-weight: 500; text-decoration: none; padding: 0; }
body.p5 .colophon .foot-social { display: flex; gap: 6px; }
body.p5 .colophon .foot-ic { position: relative; width: 44px; height: 44px; border-radius: var(--r2-rb); border: 0; color: var(--r2-shade); display: grid; place-items: center; background: var(--r2-white); isolation: auto; }
body.p5 .colophon .foot-ic::before { content: none; }
body.p5 .colophon .foot-ic svg { width: 18px; height: 18px; }
body.p5 .colophon .copy { flex-basis: 100%; font-size: 12.5px; color: var(--r2-ink2); }
@media (min-width: 768px) { body.p5 .col-lockup { block-size: 72px; } }
@media (min-width: 1024px) { body.p5 .colophon { padding-bottom: 48px; } body.p5 .colophon .copy { flex-basis: auto; order: -1; } }

/* ============================================================
   5 · sheets — bottom sheet under 1024 (grabber, 20px top radius), a dialog
   or a drawer from 1024. The page dims to shade at 50%; no blur.
   ============================================================ */
body.p5 .overlay { z-index: 115; background: rgba(14, 26, 23, .5); -webkit-backdrop-filter: none; backdrop-filter: none; align-items: flex-end; justify-content: center; padding: 0; }
body.p5 .sheet {
  width: 100%;
  max-width: none;
  max-height: 88dvh;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--r2-white);
  background-image: none;
  color: var(--r2-ink);
  transform: translateY(102%);
  transition: transform 300ms var(--r2-ease);
}
body.p5 .overlay.open .sheet { transform: none; }
body.p5 .sheet-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r2-rb);
  background: none;
  color: var(--r2-ink);
  font-size: 14px;
  line-height: 1;
  isolation: auto;
  cursor: pointer;
}
body.p5 .sheet-close::before { content: none; }
@media (hover: hover) { body.p5 .sheet-close:hover { background: var(--r2-mist2); } }
body.p5 .sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--r2-line); margin: 8px auto 0; }

/* --- cart: a ledger of rows, then the decision on shade --- */
body.p5 .cart-overlay { align-items: flex-end; justify-content: center; padding: 0; }
body.p5 .cart-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 88dvh;
  padding: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--r2-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body.p5 .cart-sheet::before { content: ''; display: block; flex: none; width: 36px; height: 5px; border-radius: 3px; background: var(--r2-line); margin: 8px auto 0; }
body.p5 .cart-sheet > .sheet-close { top: 10px; }
body.p5 .cart-sheet-head { display: flex; align-items: baseline; gap: 10px; flex: none; padding: 10px 20px 6px; border: 0; background: none; }
body.p5 .cart-folio, body.p5 .cart-sheet-head p { display: none; }
body.p5 .cart-sheet-head h2 { margin: 0; color: var(--r2-ink); font-family: var(--r2-font); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
html[dir='ltr'] body.p5 .cart-sheet-head h2 { font-family: var(--r2-font); }
body.p5 .cart-sheet-head > div { display: block; }
body.p5 .cart-count-summary { margin-inline-start: 2px; font: 500 13px var(--r2-font); color: var(--r2-ink2); background: none; border: 0; padding: 0; }
body.p5 .cart-sheet-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0; }
body.p5 .cart-sheet-body:has(.cart-empty) { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
body.p5 .cart-sheet .cart-list { min-height: auto; margin: 0; padding: 0 20px; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* the row: 56px plate · name + stepper · price. Two rows on the phone (the
   controls under the name), the thumb track equal to the thumb's own width —
   the geometry cart-layout-guard protects in the base sheet. */
body.p5 .cart-sheet .cart-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: 'thumb info' 'thumb ctl';
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--r2-line2);
}
body.p5 .cart-sheet .cart-item:last-child { border-bottom: 1px solid var(--r2-line2); }
body.p5 .cart-item-index { display: none; }
body.p5 .cart-sheet .cart-thumb { grid-area: thumb; width: 56px; height: 56px; border-radius: 10px; border-end-start-radius: 3px; overflow: hidden; background: var(--r2-plate); border: 0; display: grid; place-items: center; }
body.p5 .cart-sheet .cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.p5 .cart-sheet .cart-info { grid-area: info; min-width: 0; }
body.p5 .cart-sheet .cart-info .code { font: 500 11px var(--archive-mono); color: var(--r2-ink2); letter-spacing: 0; direction: ltr; unicode-bidi: isolate; text-align: start; }
body.p5 .cart-sheet .cart-info .n { font-size: 15px; font-weight: 600; color: var(--r2-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .cart-sheet .cart-info .p { margin-top: 2px; font-family: var(--archive-mono); font-size: 14px; font-weight: 500; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; text-align: start; font-variant-numeric: tabular-nums; }
html[dir='rtl'] body.p5 .cart-sheet .cart-info .p { text-align: right; }
body.p5 .cart-sheet .cart-info .fulfill-chip { display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; letter-spacing: 0; color: var(--r2-wn); }
body.p5 .cart-sheet .cart-item .qty {
  grid-area: ctl;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r2-rs);
  background: var(--r2-mist2);
}
body.p5 .cart-sheet .qty button { position: relative; width: 44px; height: 40px; border: 0; border-radius: var(--r2-rs); background: none; color: var(--r2-ink); font-size: 18px; font-family: var(--r2-font); cursor: pointer; }
body.p5 .cart-sheet .qty button::after { content: none; }
body.p5 .cart-sheet .qty button:disabled { color: var(--r2-ink3); cursor: default; }
body.p5 .cart-sheet .qty .q { min-width: 24px; text-align: center; font: 600 15px var(--archive-mono); font-variant-numeric: tabular-nums; }
body.p5 .cart-sheet .cart-remove {
  grid-area: ctl;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 44px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--r2-dg);
  font-family: var(--r2-font);
  font-size: 0;
  white-space: nowrap;
  cursor: pointer;
}
body.p5 .cart-sheet .cart-remove::after { content: attr(aria-label); position: static; inset: auto; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; }
body.p5 .cart-sheet .cart-remove:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 2px; border-radius: 6px; }
/* the decision block: shade, the total in white, ONE Sun action */
body.p5 .cart-footer { margin: 12px 0 0; padding: 4px 20px calc(18px + var(--r2-safe-b)); background: var(--r2-shade); color: var(--r2-white); }
body.p5 .cart-sheet .cart-grand-total,
body.p5 .cart-sheet .cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 14px 0 12px;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  font-weight: 500;
}
body.p5 .cart-sheet .cart-grand-total .amount { font-family: var(--archive-mono); font-size: 22px; font-weight: 600; color: var(--r2-white); letter-spacing: 0; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body.p5 .cart-sheet .checkout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin: 0;
  padding: 0 20px;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--pw-accent-brand, #F4C95D);
  background-image: none;
  color: var(--pw-accent-brand-ink, #10312B);
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  text-decoration: none;
  transition: filter 160ms var(--r2-ease);
}
body.p5 .cart-sheet .checkout-btn:hover { transform: none; box-shadow: none; filter: brightness(.96); }
body.p5 .cart-sheet .checkout-btn:active { transform: none; filter: brightness(.88); }
body.p5 .cart-sheet .checkout-btn:focus-visible { outline: 2px solid var(--pw-focus-brand-on-dark, #F4C95D); outline-offset: 3px; }
body.p5 .cart-sheet .cart-whatsapp-alt { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin: 6px 0 0; padding: 0; text-align: center; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); background: none; border: 0; }
body.p5 .cart-sheet .cart-whatsapp-alt:focus-visible { outline: 2px solid var(--pw-focus-brand-on-dark, #F4C95D); outline-offset: 2px; border-radius: 6px; }
body.p5 .cart-sheet .promo-row { display: flex; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
body.p5 .cart-sheet .promo-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: var(--r2-rs); border-end-start-radius: 3px; background: var(--r2-white); color: var(--r2-ink); font-family: var(--archive-mono); font-size: 16px; }
body.p5 .cart-sheet .promo-row input::placeholder { font-family: var(--r2-font); text-transform: none; color: var(--r2-ink3); }
body.p5 .cart-sheet .promo-row input:focus-visible { outline: 2px solid var(--pw-focus-brand-on-dark, #F4C95D); outline-offset: 2px; }
body.p5 .cart-sheet .promo-btn { height: 44px; padding: 0 16px; border: 0; border-radius: var(--r2-rs); border-end-start-radius: 3px; background: rgba(255, 255, 255, .14); color: var(--r2-white); font-family: var(--r2-font); font-size: 13.5px; font-weight: 600; cursor: pointer; }
body.p5 .cart-sheet .promo-btn:focus-visible { outline: 2px solid var(--pw-focus-brand-on-dark, #F4C95D); outline-offset: 2px; }
body.p5 .cart-sheet .promo-msg { min-height: 0; margin: 6px 0 0; padding: 0; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
body.p5 .cart-sheet .promo-msg.ok { color: var(--r2-white); }
body.p5 .cart-sheet .cart-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); opacity: 1; text-align: start; }
body.p5 .cart-sheet .cart-empty { padding: 44px 20px 36px; text-align: center; color: var(--r2-ink); opacity: 1; font-size: 15px; line-height: 1.7; }
body.p5 .cart-sheet .cart-empty span { display: none; }
body.p5 .cart-overlay.open ~ .pw-toast { opacity: 0; pointer-events: none; }
@media (min-width: 768px) {
  body.p5 .cart-overlay { justify-content: center; }
  body.p5 .cart-sheet { width: calc(100% - 128px); max-width: 640px; max-height: 80dvh; }
}
@media (min-width: 1024px) {
  body.p5 .cart-overlay { align-items: stretch; justify-content: flex-end; }
  body.p5 .cart-sheet {
    width: 440px;
    max-width: 440px;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border-radius: 0;
    transform: translateX(calc(var(--r2-dirx) * 102%));
  }
  body.p5 .cart-overlay.open .cart-sheet { transform: none; }
  body.p5 .cart-sheet::before { display: none; }
  body.p5 .cart-sheet-head { padding: 22px 28px 8px; }
  body.p5 .cart-sheet-head h2 { font-size: 26px; }
  body.p5 .cart-sheet > .sheet-close { top: 18px; inset-inline-end: 20px; }
  body.p5 .cart-sheet-body { display: flex; flex-direction: column; }
  body.p5 .cart-sheet .cart-list { flex: 0 1 auto; overflow-y: auto; padding: 0 28px; }
  body.p5 .cart-footer { margin-top: auto; padding: 6px 28px 24px; }
}

/* --- the filter sheet: segments in a white sheet, "done" is shade --- */
body.p5 .disco-sheet .sheet-body { padding: 4px 20px calc(20px + var(--r2-safe-b)); }
body.p5 .disco-sheet h2 { margin: 0 0 4px; font-family: var(--r2-font); font-size: 20px; font-weight: 700; }
body.p5 .disco-group { padding: 14px 0; border-bottom: 0; }
body.p5 .disco-group h3 { margin: 0 0 8px; font-family: var(--r2-font); font-size: 13px; font-weight: 600; color: var(--r2-ink2); text-transform: none; }
html[dir='ltr'] body.p5 .disco-group h3 { text-transform: none; }
body.p5 .disco-opts { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--r2-rs); background: var(--r2-mist2); }
body.p5 .disco-opt {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--r2-ink2);
  font-family: var(--r2-font);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--r2-ease), color 160ms var(--r2-ease);
}
body.p5 .disco-opt[aria-checked='true'] { background: var(--r2-shade); border-color: transparent; color: var(--r2-white); font-weight: 600; }
body.p5 .disco-opt:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 1px; }
@media (hover: hover) { body.p5 .disco-opt:not([aria-checked='true']):hover { color: var(--r2-ink); background: rgba(255, 255, 255, .6); } }
body.p5 .disco-sheet-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding-top: 14px; border-top: 0; }
body.p5 .disco-clear { min-height: 50px; padding: 0 18px; border: 0; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-mist2); color: var(--r2-shade); font-family: var(--r2-font); font-size: 14px; font-weight: 600; cursor: pointer; }
body.p5 .disco-done { min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-shade); color: var(--r2-white); font-family: var(--r2-font); font-size: 15px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { body.p5 .disco-done:hover { background: var(--r2-shade2); } }
@media (min-width: 1024px) {
  body.p5 .disco-overlay { align-items: center; justify-content: center; padding: 30px; }
  body.p5 .disco-sheet { width: 100%; max-width: 440px; height: auto; max-height: 80dvh; border-radius: 20px; border-end-start-radius: var(--r2-tip); transform: translateY(24px); }
  body.p5 .disco-overlay.open .disco-sheet { transform: none; }
  body.p5 .disco-sheet .sheet-grab { display: none; }
}

/* --- account: the name, the rows, the saved plates, the two actions --- */
body.p5 .account-sheet { padding-top: 6px; display: flex; flex-direction: column; }
body.p5 .account-sheet-head { flex: none; padding: 16px 20px 6px; }
body.p5 .account-name { margin: 0; font-family: var(--r2-font); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--r2-ink); }
body.p5 .account-since { margin: 2px 0 0; font-size: 12.5px; color: var(--r2-ink2); }
body.p5 .account-sheet-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px calc(20px + var(--r2-safe-b)); }
body.p5 .account-rows { display: block; margin: 0; padding: 0; border: 0; background: var(--r2-mist); border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); overflow: hidden; }
body.p5 .account-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--r2-line2);
  background: none;
  color: var(--r2-ink);
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
body.p5 .account-row:last-child { border-bottom: 0; }
body.p5 .account-row svg { width: 22px; height: 22px; color: var(--r2-shade); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: round; }
body.p5 .account-row-label { min-width: 0; }
body.p5 .account-row-value { font-size: 13px; font-weight: 500; color: var(--r2-ink2); white-space: nowrap; }
body.p5 .account-row-go { width: 20px; height: 20px; color: var(--r2-ink3); }
html[dir='rtl'] body.p5 .account-row-go { transform: scaleX(-1); }
body.p5 .account-section { margin-top: 18px; }
body.p5 .account-saved-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; padding: 0; border: 0; }
body.p5 .account-saved-cap { font-family: var(--r2-font); font-size: 15px; font-weight: 700; color: var(--r2-ink); letter-spacing: 0; text-transform: none; }
body.p5 .account-saved-count { font: 500 12.5px var(--r2-font); color: var(--r2-ink2); background: none; border: 0; padding: 0; }
body.p5 .account-fav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@container (min-width: 560px) { body.p5 .account-fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.p5 .account-fav-item { display: block; text-decoration: none; color: inherit; }
body.p5 .account-fav-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border-end-start-radius: var(--r2-tip); background: var(--r2-plate); }
body.p5 .account-fav-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.p5 .account-fav-heart { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--r2-bloom); cursor: pointer; }
body.p5 .account-fav-heart svg { width: 20px; height: 20px; }
body.p5 .account-fav-caption { display: block; padding: 8px 0 0; }
body.p5 .account-fav-name { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .account-fav-price { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] body.p5 .account-fav-price { text-align: right; }
body.p5 .account-empty-note { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-mist); color: var(--r2-ink2); font-size: 14px; line-height: 1.6; }
body.p5 .account-empty-cta { display: inline-flex; align-items: center; min-height: 44px; color: var(--r2-shade); font-size: 14px; font-weight: 600; text-decoration: none; }
body.p5 .account-retry { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
body.p5 .account-actions { display: grid; gap: 8px; margin-top: 22px; padding: 0; border: 0; }
body.p5 .account-settings-btn, body.p5 .account-signout-btn {
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
body.p5 .account-settings-btn { background: var(--r2-mist2); color: var(--r2-shade); }
body.p5 .account-signout-btn { background: var(--r2-mist2); color: var(--r2-dg); }
@media (min-width: 768px) {
  body.p5 .account-overlay, body.p5 .product-overlay, body.p5 #policyOverlay { align-items: center; padding: 30px; }
  body.p5 .account-overlay .sheet, body.p5 .product-overlay .sheet, body.p5 #policyOverlay .sheet { max-width: 480px; border-radius: 20px; border-end-start-radius: var(--r2-tip); transform: translateY(24px); }
  body.p5 .overlay.open .sheet { transform: none; }
  body.p5 .account-sheet { height: auto; max-height: 86dvh; }
  body.p5 .account-sheet-content { padding: 6px 24px 24px; }
  body.p5 .account-sheet-head { padding: 22px 24px 6px; }
}

/* --- the toast: shade, a Sun check, one action --- */
body.p5 .pw-toast {
  bottom: calc(var(--pw-tabbar-h, 66px) + 16px + var(--r2-safe-b));
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-shade);
  color: var(--r2-white);
  font-family: var(--r2-font);
}
body.p5 .pw-toast svg { stroke: var(--r2-sun); }
body.p5 .pw-toast-action { color: var(--r2-sun); font-weight: 600; }
@media (min-width: 1024px) { body.p5 .pw-toast { bottom: 24px; } }

/* ============================================================
   6 · plant page — the navbar, the plate, the decision, the ledger,
   ONE Sun action on a shade bar
   ============================================================ */
body.p5 .pdnav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--r2-hdr);
  padding: 0 8px 0 var(--r2-pad);
  gap: 8px;
  background: var(--r2-mist);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  transition: box-shadow 200ms var(--r2-ease);
}
body.p5 .pdnav { padding: 0; padding-inline: var(--r2-pad) 8px; overflow: hidden; }
body.p5 .pdnav > * { min-width: 0; }
body.p5 .pdnav.is-scrolled, body.p5 .pdnav.is-condensed { background: var(--r2-mist); box-shadow: inset 0 -1px 0 var(--r2-line); }
body.p5 .pdnav-mark { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; width: auto; max-width: none; min-width: 44px; min-height: 44px; font-size: 0; white-space: nowrap; text-decoration: none; color: var(--r2-shade); }
body.p5 .pdnav-mark span, body.p5 .pdnav-mark em { display: none; }
body.p5 .pdnav-mark .brand-mark { display: block; block-size: 26px; inline-size: auto; }
body.p5 .pdnav-mark .brand-wm { display: none; }
body.p5 main.pd ~ .tabbar { display: none; }
body.p5 .pdnav-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--r2-font); font-size: 15px; font-weight: 600; color: var(--r2-ink); }
body.p5 .pdnav-back { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; border-radius: var(--r2-rs); background: none; border: 0; font-family: var(--r2-font); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--r2-shade); isolation: auto; }
body.p5 .pdnav-back::before { content: none; }
body.p5 .pdnav-back > span:first-child { font-size: 18px; line-height: 1; }
html[dir='rtl'] body.p5 .pdnav-back > span:first-child { transform: scaleX(-1); }
@media (hover: hover) { body.p5 .pdnav-back:hover { background: var(--r2-mist2); } }
body.p5 .pdnav-lang { position: relative; height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--r2-rs); background: var(--r2-mist2); color: var(--r2-shade); font-family: var(--r2-font); font-size: 13px; font-weight: 600; isolation: auto; cursor: pointer; }
body.p5 .pdnav-lang::before { content: none; }
body.p5 .pdnav-cart { position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--r2-rb); background: none; color: var(--r2-ink); display: grid; place-items: center; cursor: pointer; }
body.p5 .pdnav-cart::before { content: none; }
body.p5 .pdnav-cart svg { width: 24px; height: 24px; stroke-width: 1.75; stroke-linecap: square; }
@media (hover: hover) { body.p5 .pdnav-cart:hover { background: var(--r2-mist2); } }

body.p5 .pd { padding: 0 0 calc(96px + var(--r2-safe-b)); }
body.p5 .pd-screen { display: block; max-width: none; }
body.p5 .pd-loading, body.p5 .pd-error { padding: 40px var(--r2-pad); color: var(--r2-ink2); }
body.p5 .pd-loading-mono { display: none; }
body.p5 .pd-error-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--r2-shade); font-weight: 600; }
/* the plate: full width on the phone, 4:5, the tier tag at the leaf tip */
body.p5 .pd-gal { position: relative; height: auto; aspect-ratio: 4 / 5; max-height: 72dvh; margin: 0; overflow: hidden; border-radius: 0; background: var(--r2-plate); }
body.p5 .pd-gal::after { content: none; }
body.p5 .pd-gal-stage { position: absolute; inset: 0; }
body.p5 .pd-gal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.p5 .pd-stamp--sm {
  position: absolute;
  top: auto;
  bottom: 12px;
  inset-inline-end: auto;
  inset-inline-start: 12px;
  z-index: 2;
  width: auto;
  height: auto;
  min-width: 36px;
  display: inline-grid;
  place-items: center;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  border-end-start-radius: 2px;
  background: var(--r2-white);
  color: var(--r2-shade);
  font: 500 12px/1.3 var(--archive-mono);
  box-shadow: none;
  letter-spacing: 0;
}
body.p5 .pd-gal-bars { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 6px; }
body.p5 .pd-gal-bars[hidden] { display: none; }
body.p5 .pd-gal-bar { position: relative; width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .55); }
body.p5 .pd-gal-bar::after { content: none; }
body.p5 .pd-gal-bar::before { content: ''; position: absolute; inset: -20px -4px; }
body.p5 .pd-gal-bar.is-on { background: var(--r2-white); }
body.p5 .pd-gal-thumbs { display: none; }
/* the decision */
body.p5 .pd-decide { position: relative; display: flex; flex-direction: column; margin: 0; padding: 16px var(--r2-pad) 0; border-radius: 0; background: transparent; }
body.p5 .pd-decide::before { content: none; }
body.p5 .pd-stamp-row { display: none; }
body.p5 .pd-eyebrow { order: 1; margin: 0 0 8px; font-family: var(--archive-mono); font-size: 11.5px; font-weight: 500; color: var(--r2-ink2); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] body.p5 .pd-eyebrow { text-align: right; }
body.p5 .pd-name { order: 2; margin: 0; font-family: var(--r2-font); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-wrap: balance; color: var(--r2-ink); }
body.p5 .pd-latin { order: 3; margin: 3px 0 0; font-family: var(--r2-font); font-style: normal; font-size: 13.5px; color: var(--r2-ink2); text-align: start; direction: ltr; unicode-bidi: isolate; }
html[dir='rtl'] body.p5 .pd-latin { text-align: right; }
body.p5 .pd-money { order: 4; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-top: 12px; padding: 0; border-top: 0; }
body.p5 .pd-priceline { margin: 0; }
body.p5 .pd-price { font-family: var(--r2-font); font-size: 24px; font-weight: 600; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body.p5 .pd-price-was { font-family: var(--r2-font); font-size: 13px; color: var(--r2-ink2); text-decoration: line-through; margin-inline-start: 8px; }
body.p5 .pd-savings { order: 0; margin: 0; flex-basis: 100%; font-size: 12.5px; font-weight: 500; color: var(--r2-ok); }
body.p5 .pd-avail { display: inline-flex; align-items: center; gap: 6px; max-width: 44ch; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--r2-ok); text-align: start; }
body.p5 .pd-avail::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
body.p5 .pd-avail.is-exception { color: var(--r2-wn); }
body.p5 .pd-avail.is-sold { color: var(--r2-ink2); }
body.p5 .pd-buy { order: 5; display: none; }
body.p5 .pd-desc { order: 6; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--r2-ink2); }
/* three facts as three white cards */
body.p5 .pd-facts { order: 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.p5 .pd-facts[hidden] { display: none; }
body.p5 .pd-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 0; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: var(--r2-white); font-size: 14px; }
body.p5 .pd-fact + .pd-fact { border-inline-start: 0; padding-inline-start: 12px; margin: 0; }
body.p5 .pd-fact-l { flex: none; font-family: var(--r2-font); font-size: 12px; font-weight: 500; color: var(--r2-ink2); letter-spacing: 0; text-transform: none; }
html[dir='ltr'] body.p5 .pd-fact-l { text-transform: none; }
body.p5 .pd-fact-v { text-align: start; color: var(--r2-ink); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .pd-fact-v.is-clay { color: var(--r2-shade); }
body.p5 .pd-fact-v.is-mono { font-family: var(--archive-mono); font-size: 13px; color: var(--r2-ink); direction: ltr; unicode-bidi: isolate; }
/* the folds: one white ledger, 56px rows */
body.p5 .pd-folds { order: 8; display: flex; flex-direction: column; gap: 0; margin-top: 18px; padding: 0 16px; border: 0; border-top: 0; background: var(--r2-white); border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); }
body.p5 .pd-fold-h { margin: 0; }
body.p5 .pd-fold {
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--r2-line2);
  border-radius: 0;
  background: transparent;
  color: var(--r2-ink);
  font-family: var(--r2-font);
  font-size: 15.5px;
  font-weight: 600;
  text-align: start;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
body.p5 .pd-fold[aria-expanded='true'] { border-radius: 0; border-bottom-color: transparent; box-shadow: none; }
body.p5 .pd-fold:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: -2px; border-radius: 6px; }
body.p5 .pd-fold-sign { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 0; color: var(--r2-shade); font-size: 20px; }
body.p5 .pd-panel { margin: 0; padding: 0 0 8px; background: transparent; border: 0; border-bottom: 1px solid var(--r2-line2); border-radius: 0; }
body.p5 .pd-fold-h:last-of-type .pd-fold, body.p5 .pd-panel:last-of-type { border-bottom: 0; }
body.p5 .pd-panel > * { padding-top: 0; }
body.p5 .pd-rows { margin: 0; }
body.p5 .pd-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--r2-line2); font-size: 14px; }
body.p5 .pd-row:last-child { border-bottom: 0; }
body.p5 .pd-row dt { margin: 0; padding-top: 1px; font-family: var(--r2-font); font-size: 13px; color: var(--r2-ink2); text-transform: none; }
html[dir='ltr'] body.p5 .pd-row dt { text-transform: none; }
body.p5 .pd-row dd { margin: 0; line-height: 1.6; text-align: start; font-size: 14px; font-weight: 500; color: var(--r2-ink); }
body.p5 .pd-panel-note { margin: 0; padding: 8px 0 10px; font-size: 12.5px; color: var(--r2-ink2); }
/* the two quiet secondaries under the ledger */
body.p5 .pd-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; order: 9; margin-top: 14px; }
body.p5 .pd-secondary .pd-save { order: 0; margin-top: 0; }
body.p5 .pd-save, body.p5 .pd-share { min-height: 44px; padding: 0; border: 0; background: none; color: var(--r2-shade); font: inherit; font-family: var(--r2-font); font-size: 14px; font-weight: 600; text-align: start; text-decoration: none; cursor: pointer; }
body.p5 .pd-share[hidden] { display: none; }
body.p5 .pd-save:focus-visible, body.p5 .pd-share:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { body.p5 .pd-save:hover, body.p5 .pd-share:hover { color: var(--r2-ink); } }
/* related: section heads + the plate grid */
body.p5 .pd-related { margin: 36px 0 0; padding: 0 var(--r2-pad); }
body.p5 .pd-related-group + .pd-related-group { margin-top: 28px; }
body.p5 .pd-related-title { margin: 0 0 12px; font-family: var(--r2-font); font-size: 22px; font-weight: 700; }
body.p5 .pd-related-note { margin: -6px 0 12px; font-size: 13.5px; color: var(--r2-ink2); }
body.p5 .pd-related .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }

/* the purchase bar: shade, edge to edge, the ONE Sun action + a white second */
body.p5 .pd-buybar {
  position: fixed;
  z-index: 60;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 10px var(--r2-pad) calc(10px + var(--r2-safe-b));
  background: var(--r2-shade);
  border: 0;
  box-shadow: none;
  transform: none;
}
body.p5 .pd-buybar::before { content: none; }
body.p5 .pd-buybar[hidden] { display: none; }
body.p5 .pd-buybar-price { display: none; }
body.p5 .pd-buybar-actions { display: contents; }
body.p5 .pd-bar-btn { margin: 0; }
body.p5 .pd-bar-add,
body.p5 .pd-btn-add {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--pw-accent-brand, #F4C95D);
  color: var(--pw-accent-brand-ink, #10312B);
  font-family: var(--r2-font);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: filter 160ms var(--r2-ease), background 160ms var(--r2-ease);
}
body.p5 .pd-bar-add:active, body.p5 .pd-btn-add:active { transform: none; filter: brightness(.88); }
body.p5 .pd-bar-add:hover, body.p5 .pd-btn-add:hover { background: var(--pw-accent-brand, #F4C95D); transform: none; filter: brightness(.96); }
body.p5 .pd-bar-add.is-added, body.p5 .pd-btn-add.is-added { background: var(--r2-white); color: var(--r2-shade); box-shadow: none; }
body.p5 .pd-btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p5 .pd-btn-price { font-family: var(--archive-mono); font-size: 13.5px; font-weight: 500; color: var(--r2-shade); opacity: .8; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
body.p5 .pd-bar-wa,
body.p5 .pd-btn-wa {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 50px;
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r2-rb);
  border-end-start-radius: var(--r2-tip);
  background: var(--r2-white);
  color: var(--r2-shade);
  font-family: var(--r2-font);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.p5 .pd-bar-wa:hover, body.p5 .pd-btn-wa:hover { border-color: transparent; background: var(--r2-mist); }
body.p5 .pd-bar-sold, body.p5 .pd-btn-sold { flex: 1; display: grid; place-items: center; min-height: 50px; border-radius: var(--r2-rb); border-end-start-radius: var(--r2-tip); background: rgba(255, 255, 255, .14); color: var(--r2-white); font-family: var(--r2-font); font-weight: 600; }
body.p5 .pd-btn-add:focus-visible, body.p5 .pd-bar-add:focus-visible, body.p5 .pd-btn-wa:focus-visible, body.p5 .pd-bar-wa:focus-visible { outline: 2px solid var(--pw-focus-brand-on-dark, #F4C95D); outline-offset: 3px; }
body.p5 .pd-only-lg { display: none; }
@media (min-width: 768px) {
  body.p5 .pd-gal { aspect-ratio: 16 / 10; max-height: 62dvh; margin: 16px var(--r2-pad) 0; border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); }
  body.p5 .pd-decide { margin: 18px 0 0; padding: 0 var(--r2-pad); }
  body.p5 .pd-name { font-size: 34px; }
  body.p5 .pd-related .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
}
@media (min-width: 1024px) {
  body.p5 .pd { padding-bottom: 64px; }
  body.p5 .pd-screen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; max-width: 1360px; margin: 0 auto; padding: 24px var(--r2-pad) 0; }
  body.p5 .pd-gal { position: sticky; top: calc(var(--r2-hdr) + 24px); aspect-ratio: 4 / 5; height: auto; max-height: calc(100dvh - var(--r2-hdr) - 48px); margin: 0; border-radius: var(--r2-r); border-end-start-radius: var(--r2-tip); }
  body.p5 .pd-decide { margin: 0; padding: 0; }
  html[dir='ltr'] body.p5 .pd-decide { padding: 0; }
  body.p5 .pd-name { font-size: 40px; }
  body.p5 .pd-latin { font-size: 15px; }
  body.p5 .pd-money { margin-top: 16px; }
  body.p5 .pd-price { font-size: 28px; }
  /* desktop: the Sun action sits in the column, the bar stands down */
  body.p5 .pd-buy { display: flex; gap: 8px; margin: 18px 0 4px; max-width: 460px; }
  body.p5 .pd-btn-add { flex: 1 1 auto; }
  body.p5 .pd-btn-wa { width: auto; }
  body.p5 .pd-only-sm { display: none; }
  body.p5 .pd-only-lg { display: inline; }
  body.p5 .pd-buybar { display: none; }
  body.p5 .pd-desc { font-size: 15px; max-width: 56ch; }
  body.p5 .pd-related { max-width: 1360px; margin: 56px auto 0; }
  body.p5 .pd-related .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
  body.p5 .pdnav { padding-inline: var(--r2-pad); }
  body.p5 .pdnav-mark .brand-wm { display: block; block-size: 16px; inline-size: auto; }
  body.p5 .pdnav-mark .brand-mark { block-size: 30px; }
}
@media (min-width: 1440px) { body.p5 .pd-screen { gap: 64px; } body.p5 .pd-name { font-size: 44px; } }

/* ============================================================
   7 · policy + the retired catalogue page (generated, guarded, 301'd)
   Both inherit the cutover; only their own heads are restated so nothing
   reads as an island.
   ============================================================ */
body.p5 .policy-page h1, body.p5 .cat-masthead h1 { font-family: var(--r2-font); font-weight: 700; letter-spacing: 0; }
body.p5 .mast-eyebrow, body.p5 .rail-num { font-family: var(--archive-mono); letter-spacing: 0; color: var(--r2-ink2); }
/* the policy ledger's stamp was a PW in a circle — a form the freeze rules out;
   it is the locked symbol now, the text kept for nothing but its box */
body.p5 .policy-seal { width: 28px; height: 30px; border: 0; border-radius: 0; color: transparent; font-size: 0; background: url('/assets/brand/pw-mark.svg') center / contain no-repeat; }

/* ============================================================
   8 · motion is optional
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.p5 .sheet, body.p5 .cart-sheet, body.p5 .card .card-img, body.p5 .pd-bar-add, body.p5 .pd-btn-add,
  body.p5 .hero .btn-primary, body.p5 .hero .btn-ghost, body.p5 header.nav, body.p5 .pdnav, body.p5 .icon-toggle,
  body.p5 .cat-fav svg, body.p5 .disco-opt, body.p5 .disco-search, body.p5 .cart-sheet .checkout-btn, body.p5 .card .cat-add { transition: none !important; animation: none !important; }
  body.p5 .cat-fav:active svg { transform: none; }
}
/* the base's scroll reveal (.reveal, added by index.html on intersection) is
   kept — it is the one orchestrated moment on the page — but it is instant
   when the visitor asked for less motion */
@media (prefers-reduced-motion: reduce) {
  body.p5 .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}