/* ============================================================================
   Plants Whisperer — CUSTOMER · FINAL VISUAL SYSTEM (CVE-2 synthesis)      C1
   ----------------------------------------------------------------------------
   The owner-approved, frozen Customer visual system implemented as ONE scoped
   layer over the real storefront DOM. Authority, in order:
     1  previews/customer-visual-evolution/synthesis-v1/19-DESIGN-FREEZE.md
     2  previews/customer-visual-evolution/synthesis-v1/20-IMPLEMENTATION-HANDOFF.md
     3  previews/customer-visual-evolution/synthesis-v1/app.html  (the frozen prototype)
     4  R5.3b technical / accessibility requirements
     5  the M3 technical baseline (assets/customer-r4.css and the R2B sheets)

   THE SYSTEM (A — Product Calm; C / D / E lend structure and interaction only)
     · white page; hairlines instead of plates; Mist only as a control track,
       the one Home band and the picture ground
     · Shade is the ink and the secondary action; Sun is ONE commerce action
       per surface + the active tab wedge + the eyebrow square — never text
     · radii 12 / 10 / 16 with the corner rule (kept from M3); Readex 300 / 500,
       Noto Naskh / Newsreader in their locked specimen roles only (kept from M3)
     · a 48px white masthead, mark only on phones; NAV-A: the four-item white
       tab bar, Shade label + Sun wedge when selected; NO fifth Search tab
     · motion LOW: 200ms; LOW/MEDIUM only where the freeze says so (the two
       empty states, the success acknowledgement, the filter track); reduced
       motion is complete

   WHAT THIS FILE DOES NOT DO
     No business logic. No backend authority: the checkout login gate,
     create_order_v2, the order RLS, Clerk and the favourites persistence are
     untouched (docs/ux/CUSTOMER_C1_BACKEND_GATED.md). No new colour.
     Scope hook: html.c-cve2 (index.html and its generated pages, checkout,
     order-success, order-tracking). Loads LAST.
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   0 · TOKENS — the R2 names the two Greenfield sheets read, re-pointed
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2, html.c-cve2 body.p5 {
  --r2-ink: var(--r2-shade, #10312B);       /* Shade is the ink */
  --r2-ink2: #5B6B66;                        /* support text · 5.1:1 on white, 4.85:1 on Mist */
  --r2-ink3: #69726E;                        /* OD-05 B placeholder */
  --r2-line: #D9DED9;                        /* the one hairline */
  --r2-line2: #E4E8E3;                       /* the soft hairline (row separators) */
  --r2-mist2: var(--r2-mist, #EDEFEA);       /* one Mist, not two */
  --r2-plate: var(--r2-mist, #EDEFEA);       /* the picture ground is flat Mist */
  --r2-r: 16px; --r2-rb: 12px; --r2-rs: 10px;
  --c-ease: cubic-bezier(.22, .9, .24, 1);
  --c-d1: 200ms; --c-d2: 340ms; --c-d3: 480ms;
  --c-hdr: 48px;
}
@media (min-width: 1024px) { html.c-cve2, html.c-cve2 body.p5 { --c-hdr: 52px; } }
html.c-cve2 body.p5, html.c-cve2:has(body.p5) { background: #fff; }
html.c-cve2 body.p5 { color: var(--r2-ink); }
html.c-cve2 body.p5 :focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 2px; }

/* the A type scale: display 26 → 20 → 15, weights 500 / 300 only */
html.c-cve2 body.p5 h1, html.c-cve2 body.p5 h2, html.c-cve2 body.p5 h3 { font-weight: 500; letter-spacing: 0; }
html.c-cve2 body.p5 .section-head h2, html.c-cve2 body.p5 .care-head h2, html.c-cve2 body.p5 .cart-sheet-head h2,
html.c-cve2 body.p5 .account-name, html.c-cve2 body.p5 .disco-sheet h2, html.c-cve2 body.p5 .pd-related-title,
html.c-cve2 body.p5 .coll-head h3 { font-family: var(--r2-font); font-size: 20px; font-weight: 500; line-height: 1.3; }
@media (min-width: 768px)  { html.c-cve2 body.p5 .section-head h2, html.c-cve2 body.p5 .care-head h2, html.c-cve2 body.p5 .coll-head h3 { font-size: 20px; } }
@media (min-width: 1024px) { html.c-cve2 body.p5 .section-head h2, html.c-cve2 body.p5 .care-head h2, html.c-cve2 body.p5 .coll-head h3 { font-size: 22px; } }

/* the eyebrow: the 7px Sun square + 12px support text (the ONE non-action Sun) */
html.c-cve2 body.p5 .p5-eyebrow,
html.c-cve2 body.p5 .hero-eyebrow,
html.c-cve2 body.p5 .pd-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--r2-font); font-size: 12px; font-weight: 300; color: var(--r2-ink2);
  letter-spacing: 0; direction: inherit; text-align: start;
}
html.c-cve2 body.p5 :is(.p5-eyebrow, .hero-eyebrow, .pd-eyebrow)::before { content: ''; width: 7px; height: 7px; background: var(--r2-sun); flex: none; }
/* the story block's eyebrow sits on white now — no square twice on one page */
html.c-cve2 body.p5 .p5-story .p5-eyebrow::before { content: none; }

/* the A control set */
html.c-cve2 body.p5 .icon-toggle,
html.c-cve2 body.p5 .sheet-close,
html.c-cve2 body.p5 .pdnav-cart,
html.c-cve2 body.p5 .cat-fav,
html.c-cve2 body.p5 .account-fav-heart { border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 body.p5 .icon-toggle svg, html.c-cve2 body.p5 .tabbar .tab svg, html.c-cve2 body.p5 .pdnav-cart svg,
html.c-cve2 body.p5 .account-row svg, html.c-cve2 body.p5 .cat-fav svg, html.c-cve2 body.p5 .search-box svg,
html.c-cve2 body.p5 .disco-search > svg, html.c-cve2 body.p5 .disco-btn > svg, html.c-cve2 body.p5 .disco-sort > svg {
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}


/* ════════════════════════════════════════════════════════════════════════════
   1 · MASTHEAD — 48px, white, mark only on phones; thin text nav on desktop
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 header.nav { background: #fff; }
html.c-cve2 body.p5 header.nav.is-scrolled { box-shadow: inset 0 -1px 0 var(--r2-line); }
html.c-cve2 body.p5 .nav-inner { height: var(--c-hdr); min-height: var(--c-hdr); max-width: 1120px; gap: 4px; }
html.c-cve2 body.p5 .nav-inner .brand .brand-mark { block-size: 24px; }
html.c-cve2 body.p5 .brand-wm, html.c-cve2 body.p5 .brand-hams { display: none; }
html.c-cve2 body.p5 .icon-toggle { color: var(--r2-shade); }
html.c-cve2 body.p5 .icon-toggle::before { content: none; }
@media (hover: hover) { html.c-cve2 body.p5 .icon-toggle:hover { background: var(--r2-mist); } }
html.c-cve2 body.p5 .lang-toggle-desktop { font-weight: 500; font-size: 13px; border-radius: var(--r2-rs); border-start-start-radius: 0; }
html.c-cve2 body.p5 .lang-toggle-desktop::before { background: transparent; }
@media (hover: hover) { html.c-cve2 body.p5 .lang-toggle-desktop:hover::before { background: var(--r2-mist); } }
/* the badge — the locked icon system's Sun counter, on both bars */
html.c-cve2 body.p5 .cart-badge-header,
html.c-cve2 body.p5 .cart-badge,
html.c-cve2 .tabbar .tab .cart-badge {
  background: var(--r2-sun, #F4C95D); color: var(--r2-shade, #10312B);
  font-family: var(--r2-font); font-weight: 500;
  box-shadow: 0 0 0 2px #fff;
}
/* the open search field: A's underlined field, 16px */
html.c-cve2 body.p5 .search-box { background: #fff; box-shadow: 0 0 0 1px var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 body.p5 .search-box:focus-within { box-shadow: 0 0 0 2px var(--r2-shade); }
html.c-cve2 body.p5 .search-results { border-radius: var(--r2-rb); border-start-start-radius: 0; box-shadow: none; border: 1px solid var(--r2-line); padding: 0; }
html.c-cve2 body.p5 .search-result-item { min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--r2-line2); }
html.c-cve2 body.p5 .search-result-thumb { width: 48px; height: 48px; border-radius: var(--r2-rs); border-start-start-radius: 0; }
html.c-cve2 body.p5 .search-result-name { font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .search-result-latin { font-size: 12px; }
html.c-cve2 body.p5 .search-result-price { font-family: var(--r2-font); font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .search-result-empty { font-size: 14px; padding: 16px 14px; }
/* S-08: on the phone the open field is ~150px between the toggles, and the results took its width
   (names cut to «Monst…», the price on two lines). They hang from the masthead instead, inside the gutters. */
@media (max-width: 767px) {
  html.c-cve2 body.p5 .nav-inner.search-open .search-box { position: static; }
  html.c-cve2 body.p5 .nav-inner.search-open .search-results { inset-inline: var(--r2-pad, 16px); width: auto; top: calc(100% + 6px); }
}
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .nav-inner .brand .brand-mark { block-size: 26px; }
  html.c-cve2[lang="ar"] body.p5 .brand-hams { display: block; block-size: 13px; }
  html.c-cve2[lang="en"] body.p5 .brand-wm { display: block; block-size: 14px; }
  html.c-cve2 body.p5 .nav-inner nav.links { justify-content: center; gap: 34px; margin-inline-start: 0; font-size: 13px; font-weight: 300; }
  html.c-cve2 body.p5 nav.links a { color: var(--r2-ink2); padding: 0; }
  html.c-cve2 body.p5 nav.links a:hover, html.c-cve2 body.p5 nav.links a.is-active { color: var(--r2-shade); font-weight: 500; }
}


/* ════════════════════════════════════════════════════════════════════════════
   2 · NAVIGATION A — the four-item white bar. Shade label + Sun wedge when
       selected. Loaded by index.html (and its generated pages), the receipt
       and tracking. No fifth Search item: Search stays in the masthead.
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 .tabbar {
  background: #fff;
  border-top: 1px solid var(--r2-line, #D9DED9);
  color: var(--r2-ink2, #5B6B66);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
html.c-cve2 .tabbar .tab { color: var(--r2-ink2, #5B6B66); font-family: var(--r2-font, 'Readex Pro', sans-serif); font-size: 11px; font-weight: 300; gap: 3px; border-radius: 0; }
html.c-cve2 .tabbar .tab svg { width: 24px; height: 24px; }
html.c-cve2 :is(.tabbar .tab.active, .tabbar .tab[aria-current='page'], .tabbar .tab[aria-current='true']) {
  color: var(--r2-shade, #10312B); font-weight: 500;
}
/* the wedge rides the bar's top hairline: -1px so it sits ON the edge */
html.c-cve2 :is(.tabbar .tab.active, .tabbar .tab[aria-current='page'], .tabbar .tab[aria-current='true'])::after { top: -5px; }
html.c-cve2 .tabbar .tab:focus-visible { outline: 2px solid var(--r2-shade, #10312B); outline-offset: -2px; }
html.c-cve2 .tabbar .tab:active { opacity: 1; background: var(--r2-mist, #EDEFEA); border-radius: var(--r2-rs, 10px); border-start-start-radius: 0; }
html.c-cve2 .tabbar .tab .cart-badge { font-size: 10px; }
@media (prefers-contrast: more) { html.c-cve2 .tabbar { border-top: 1.5px solid var(--r2-shade, #10312B); } }


/* ════════════════════════════════════════════════════════════════════════════
   3 · HOME — A. Centred product isolation, the note, one Mist band
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .hero { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 1120px; padding: 12px var(--r2-pad) 0; }
html.c-cve2 body.p5 .hero > .hero-visual { order: 0; width: 100%; max-width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r2-r); border-start-start-radius: 0; flex: none; } /* S-08: identity-v2 gives it flex:1 1 0 at ≤760px, which collapsed the 4/5 box in this column */
html.c-cve2 body.p5 .hero-visual-meta { display: none; }
html.c-cve2 body.p5 .hero > .hero-content { order: 1; width: 100%; max-width: 560px; align-items: center; text-align: center; padding: 22px 8px 0; }
html.c-cve2 body.p5 .hero-eyebrow { margin: 0 0 8px; justify-content: center; }
html.c-cve2 body.p5 .hero h1 { font-size: 26px; font-weight: 500; line-height: 1.2; max-width: 22ch; margin-inline: auto; }
html.c-cve2 body.p5 .hero h1 .accent-rare { color: inherit; font-weight: inherit; font-style: normal; background: none; }
html.c-cve2 body.p5 .hero p.sub { font-size: 13px; line-height: 1.7; color: var(--r2-ink2); max-width: 42ch; margin: 12px auto 0; }
/* the featured specimen: a hairline row, not a plate */
html.c-cve2 body.p5 .hero-band { width: 100%; max-width: 520px; margin: 22px auto 0; background: none; border: 0; border-top: 1px solid var(--r2-line); border-bottom: 1px solid var(--r2-line); border-radius: 0; }
html.c-cve2 body.p5 .hero-band-link { min-height: 60px; padding: 10px 4px; }
html.c-cve2 body.p5 .hero-band-txt b { font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .hero-band-txt small { font-size: 12px; }
html.c-cve2 body.p5 .hero-band-txt small .is-pickup { color: var(--r2-ink2); }
html.c-cve2 body.p5 .hero-band-price { font-family: var(--r2-font); font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .hero-actions { justify-content: center; margin-top: 18px; gap: 8px 16px; }
html.c-cve2 body.p5 .hero .btn-primary, html.c-cve2 body.p5 .hero .btn-ghost { min-height: 48px; padding: 0 22px; border-radius: var(--r2-rb); border-start-start-radius: 0; font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .hero .btn-primary { flex: 0 0 auto; background: var(--r2-shade); color: var(--r2-mist); }
html.c-cve2 body.p5 .hero .btn-ghost { border: 1px solid var(--r2-line); background: #fff; color: var(--r2-shade); min-height: 48px; }
@media (hover: hover) { html.c-cve2 body.p5 .hero .btn-ghost:hover { background: var(--r2-mist); border-color: var(--r2-line); } }
@media (min-width: 700px) { html.c-cve2 body.p5 .hero > .hero-visual { max-width: 520px; } }
@media (min-width: 768px) {
  html.c-cve2 body.p5 .hero { display: flex; padding-top: 16px; }
  html.c-cve2 body.p5 .hero > .hero-visual { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  html.c-cve2 body.p5 .hero > .hero-content { grid-column: auto; grid-row: auto; padding-top: 24px; }
  html.c-cve2 body.p5 .hero h1 { font-size: 32px; }
}
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .hero { padding-top: 40px; gap: 0; }
  html.c-cve2 body.p5 .hero > .hero-visual { max-width: 560px; max-height: none; }
  html.c-cve2 body.p5 .hero > .hero-content { padding-top: 28px; }
  html.c-cve2 body.p5 .hero h1 { font-size: 40px; }
  html.c-cve2 body.p5 .hero p.sub { font-size: 14px; margin-top: 14px; }
  html.c-cve2 body.p5 .hero-band { max-width: 520px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   4 · SHOP — A's catalogue backbone; discovery tools on hairlines;
       the selected-filter chips (E) in A's hairline language
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .shop { padding-top: 40px; }
html.c-cve2 body.p5 .shop > .wrap, html.c-cve2 body.p5 .order-facts, html.c-cve2 body.p5 .care > .wrap, html.c-cve2 body.p5 .colophon .wrap { max-width: 1120px; }
html.c-cve2 body.p5 .section-head { margin-bottom: 16px; }
html.c-cve2 body.p5 .section-meta { font-weight: 300; font-size: 13px; }
/* the search field: white, 48px, one hairline ring */
html.c-cve2 body.p5 .disco { margin: 0 0 20px; }
html.c-cve2 body.p5 .disco-search { min-height: 48px; padding: 0 14px; border-radius: var(--r2-rb); border-start-start-radius: 0; box-shadow: 0 0 0 1px var(--r2-line); }
html.c-cve2 body.p5 .disco-search input { font-weight: 300; }
html.c-cve2 body.p5 .disco-x { border-radius: var(--r2-rs); border-start-start-radius: 0; }
/* the tools: text controls, not chips */
html.c-cve2 body.p5 .disco-btn, html.c-cve2 body.p5 .disco-sort {
  background: none; color: var(--r2-shade); font-size: 14px; font-weight: 300; padding: 0 6px; border-radius: var(--r2-rs); border-start-start-radius: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--r2-line);
}
html.c-cve2 body.p5 .disco-sort { text-decoration: none; }
html.c-cve2 body.p5 .disco-sort select { font-weight: 300; }
@media (hover: hover) { html.c-cve2 body.p5 .disco-btn:hover, html.c-cve2 body.p5 .disco-sort:hover { background: var(--r2-mist); } }
html.c-cve2 body.p5 .disco-badge { background: var(--r2-shade); color: var(--r2-mist); font-family: var(--r2-font); font-weight: 500; border-radius: 6px; border-start-start-radius: 0; }
/* selected-filter summary — E's idea, A's hairline chips, 44 effective */
html.c-cve2 body.p5 .disco-active { gap: 8px; margin-top: 12px; }
html.c-cve2 body.p5 .disco-chip {
  position: relative; min-height: 36px; padding: 0 10px 0 12px; gap: 6px;
  background: #fff; box-shadow: none; border: 1px solid var(--r2-line); border-radius: var(--r2-rs); border-start-start-radius: 0;
  color: var(--r2-shade); font-size: 13px; font-weight: 300;
}
html.c-cve2 body.p5 .disco-chip::before { content: ''; position: absolute; inset: -4px 0; }
html.c-cve2 body.p5 .disco-chip-x { font-size: 11px; color: var(--r2-ink2); }
html.c-cve2 body.p5 .disco-chip--clear { border-color: transparent; color: var(--r2-ink2); text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; font-weight: 300; }
@media (hover: hover) { html.c-cve2 body.p5 .disco-chip:hover { box-shadow: none; border-color: var(--r2-shade); } html.c-cve2 body.p5 .disco-chip--clear:hover { border-color: transparent; color: var(--r2-shade); } }

/* the grid: A's rhythm — 2 / 3 / 4 tracks, 24·16 → 28·20 → 36·28 */
html.c-cve2 body.p5 .grid.pw-cards, html.c-cve2 body.p5 .coll-row { gap: 24px 16px; }
@container (min-width: 620px) { html.c-cve2 body.p5 .grid.pw-cards:not(.has-featured), html.c-cve2 body.p5 .coll-row { gap: 28px 20px; } }
@container (min-width: 960px) { html.c-cve2 body.p5 .grid.pw-cards:not(.has-featured), html.c-cve2 body.p5 .coll-row { gap: 36px 28px; } }
@media (min-width: 1024px) {
  /* A's catalogue is a uniform four-up: the R2B editorial first row stands down */
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .card,
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1),
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(2) { grid-column: auto; grid-row: auto; }
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .card:nth-child(1) .name-ar { font-size: 14px; }
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-next { grid-column: auto; }
  html.c-cve2 body.p5 #coll #grid.pw-cards:not(.has-featured) > .p5-story { grid-column: 1 / -1; align-self: auto; }
}
html.c-cve2 body.p5 .grid .grid-state-btn, html.c-cve2 body.p5 .disco-none-btn {
  min-height: 48px; padding: 0 22px; border-radius: var(--r2-rb); border-start-start-radius: 0; background: var(--r2-shade); color: var(--r2-mist); font-size: 15px; font-weight: 500;
}
/* the shelves */
html.c-cve2 body.p5 .coll-group + .coll-group { margin-top: 40px; }
html.c-cve2 body.p5 .coll-head { margin-bottom: 16px; }
html.c-cve2 body.p5 .coll-meta { font-weight: 300; }
html.c-cve2 body.p5 .coll-see { position: relative; font-size: 13px; font-weight: 300; color: var(--r2-ink2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--r2-line); }
@media (hover: hover) { html.c-cve2 body.p5 .coll-see:hover { color: var(--r2-shade); } }
/* the two composition tiles: the empty slot keeps its dashed hairline; the
   archive note becomes a quiet quote on white, not a Shade block */
html.c-cve2 body.p5 .p5-next { border-radius: var(--r2-rs); border-start-start-radius: 0; color: var(--r2-ink2); }
html.c-cve2 body.p5 .p5-story { background: none; color: var(--r2-ink); padding: 20px 0; border: 0; border-top: 1px solid var(--r2-line); border-bottom: 1px solid var(--r2-line); border-radius: 0; }
html.c-cve2 body.p5 .p5-story .p5-eyebrow { color: var(--r2-ink2); }
html.c-cve2 body.p5 .p5-story blockquote { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--r2-ink); max-width: 58ch; }
html.c-cve2 body.p5 .p5-story cite { color: var(--r2-ink2); font-size: 13px; }
@media (min-width: 1024px) { html.c-cve2 body.p5 .p5-story { padding: 24px 0; } html.c-cve2 body.p5 .p5-story blockquote { font-size: 20px; } }


/* ════════════════════════════════════════════════════════════════════════════
   5 · THE CARD — A, authoritative. Image 4/5 with the corner rule · name
       14/500 · Latin 12 italic · price 14 · tier as a word ONLY when rare or
       collector · the heart on hover/focus (pointer) or always (touch) ·
       the existing quick-add kept, made quiet, same reveal rule.
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .card .card-media { border-radius: var(--r2-rs); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 body.p5 .card .cat-caption {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tier" "name" "latin" "price" "avail" "chip";
  row-gap: 0; column-gap: 0; padding: 10px 0 0; margin: 0; border: 0; align-items: start;
}
html.c-cve2 body.p5 .card .cat-caption:not(:has(.cat-avail.out)) { grid-template-areas: "tier" "name" "latin" "price" "chip"; }
html.c-cve2 body.p5 .card .cat-caption > .cat-sp { display: none; }
html.c-cve2 body.p5 .card .cat-caption > .cat-meta { display: contents; }
html.c-cve2 body.p5 .card .cat-caption > .name-ar { grid-area: name; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: normal; min-height: 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
html.c-cve2 body.p5 .card .cat-caption > .name-en { grid-area: latin; margin: 1px 0 0; font-size: 12px; font-weight: 300; color: var(--r2-ink2); }
/* in the English interface the second line IS the binomial: the locked Latin role */
html.c-cve2[lang="en"] body.p5 .card .cat-caption > .name-en { font-family: var(--c-spec-en, Newsreader, serif); font-style: italic; font-weight: 400; }
html.c-cve2 body.p5 .card .cat-caption .cat-price { grid-area: price; margin: 4px 0 0; padding: 0; justify-self: start; font-family: var(--r2-font); font-size: 14px; font-weight: 500; color: var(--r2-ink); }
html.c-cve2 body.p5 .card .cat-price .price-original { font-size: 12px; color: var(--r2-ink2); font-weight: 300; }
/* the tier: a word above the name, only for the two scarce tiers (data-tier from pwBuildCard) */
html.c-cve2 body.p5 .card .cat-caption .cat-tier { grid-area: tier; }
html.c-cve2 body.p5 .card[data-tier="rare"] .cat-tier,
html.c-cve2 body.p5 .card[data-tier="collector"] .cat-tier,
html.c-cve2 body.p5 .card[data-tier="grail"] .cat-tier {
  position: static; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip-path: none; white-space: normal;
  font-size: 11px; font-weight: 300; color: var(--r2-ink2); letter-spacing: 0; justify-self: start;
}
html.c-cve2 body.p5 .card .cat-tier::before { content: none; }
/* S-08: in a shelf that holds a scarce card, every card keeps the tier line (11px × 1.7 + 2px), so names
   start on one line across the row; shelves without one keep the frozen anatomy untouched. */
html.c-cve2 body.p5 :is(.pw-cards, .cat-grid):has(> .card:is([data-tier="rare"], [data-tier="collector"], [data-tier="grail"])) > .card .cat-caption { grid-template-rows: minmax(calc(11px * 1.7 + 2px), auto); }
html.c-cve2 body.p5 .card .cat-caption > .cat-avail { grid-area: avail; margin: 4px 0 0; font-family: var(--r2-font); font-size: 13px; font-weight: 300; color: var(--r2-ink2); letter-spacing: 0; }
html.c-cve2 body.p5 .card .cat-caption > .cat-avail::before { content: none; }
html.c-cve2 body.p5 .card .cat-caption > .fulfill-chip { grid-area: chip; margin: 4px 0 0; font-size: 12px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 body.p5 .card .cat-caption > .fulfill-chip::before { content: none; }
html.c-cve2 body.p5 .card.is-sold .card-img { opacity: .55; filter: none; }
/* the heart: 44 at the plate's top-end, quiet until wanted on a pointer device */
html.c-cve2 body.p5 .cat-fav { top: 4px; inset-inline-end: 4px; background: rgba(255, 255, 255, .92); color: var(--r2-shade); transition: opacity var(--c-d1) var(--c-ease); }
html.c-cve2 body.p5 .cat-fav svg { width: 20px; height: 20px; }
html.c-cve2 body.p5 .cat-fav[aria-pressed='true'] { color: var(--r2-shade); }
@media (hover: hover) {
  html.c-cve2 body.p5 .cat-fav:hover svg { stroke: var(--r2-shade); }
  html.c-cve2 body.p5 .card .cat-fav:not([aria-pressed='true']) { opacity: 0; }
  html.c-cve2 body.p5 .card:hover .cat-fav, html.c-cve2 body.p5 .card:focus-within .cat-fav, html.c-cve2 body.p5 .cat-fav:focus-visible { opacity: 1; }
}
/* the quick add: kept (an existing commerce function), made quiet — the same
   white 44 as the heart, at the plate's bottom-end, same reveal rule */
html.c-cve2 body.p5 .card .cat-add {
  top: calc(125cqw - 48px); inset-inline-end: 4px; width: 44px; height: 44px;
  border-radius: var(--r2-rb); border-start-start-radius: 0; background: rgba(255, 255, 255, .92); color: var(--r2-shade);
  font-family: var(--r2-font); font-size: 22px; font-weight: 300; transition: opacity var(--c-d1) var(--c-ease), background var(--c-d1) var(--c-ease), color var(--c-d1) var(--c-ease);
}
html.c-cve2 body.p5 .card .cat-add.added { background: var(--r2-shade); color: var(--r2-mist); }
html.c-cve2 body.p5 .card .cat-add:active { background: var(--r2-shade); color: var(--r2-mist); }
@media (hover: hover) {
  html.c-cve2 body.p5 .card .cat-add { opacity: 0; }
  html.c-cve2 body.p5 .card:hover .cat-add, html.c-cve2 body.p5 .card:focus-within .cat-add, html.c-cve2 body.p5 .card .cat-add:focus-visible, html.c-cve2 body.p5 .card .cat-add.added { opacity: 1; }
}
html.c-cve2 body.p5 .cat-link:focus-visible { border-radius: var(--r2-rs); }
/* KD-01 (M3's known defect, closed here): the retired catalog's wide spread
   card draws its picture at 7/5 (3/2 on phones), not 4/5, so an add control
   placed by the 4/5 arithmetic landed below its own card, unreachable. The
   control follows the picture it belongs to. */
html.c-cve2 body.p5 .plate-spread .cat-add { top: calc(100cqw * 5 / 7 - 48px); }
@media (max-width: 760px) { html.c-cve2 body.p5 .plate-spread .cat-add { top: calc(100cqw * 2 / 3 - 48px); } }
/* the featured-specimen card (one specimen in the registry): same language */
html.c-cve2 body.p5 .featured-specimen .fs-cta { background: var(--r2-sun); color: var(--r2-shade); border-radius: var(--r2-rb); border-start-start-radius: 0; min-height: 48px; font-weight: 500; }


/* ════════════════════════════════════════════════════════════════════════════
   6 · FILTERS — E's interaction model in A's skin: a white sheet / popover,
       segmented groups on the one Mist track (the selected segment is Shade,
       200ms), a text Clear and a Shade Apply carrying the live count.
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .overlay { background: rgba(16, 49, 43, .18); }
html.c-cve2 body.p5 .sheet { transition: transform 240ms var(--c-ease); }
html.c-cve2 body.p5 .sheet-close { border-radius: var(--r2-rb); border-start-start-radius: 0; color: var(--r2-shade); }
html.c-cve2 body.p5 .disco-sheet .sheet-body { padding: 4px 20px calc(16px + var(--r2-safe-b)); }
html.c-cve2 body.p5 .disco-sheet h2 { font-size: 17px; font-weight: 500; min-height: 44px; display: flex; align-items: center; margin: 0; }
html.c-cve2 body.p5 .disco-group { padding: 14px 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .disco-group h3 { font-size: 13px; font-weight: 300; color: var(--r2-ink2); margin: 0 0 10px; }
html.c-cve2 body.p5 .disco-opts { gap: 2px; padding: 3px; border-radius: var(--r2-rb); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 body.p5 .disco-opt {
  position: relative; flex: 1 1 auto; min-height: 40px; padding: 0 10px; border-radius: 9px; border-start-start-radius: 0;
  color: var(--r2-ink2); font-size: 13px; font-weight: 300; transition: background var(--c-d1) var(--c-ease), color var(--c-d1) var(--c-ease);
}
html.c-cve2 body.p5 .disco-opt::before { content: ''; position: absolute; inset: -3px -1px; }
html.c-cve2 body.p5 .disco-opt[aria-checked='true'] { background: var(--r2-shade); color: var(--r2-mist); font-weight: 500; }
@media (hover: hover) { html.c-cve2 body.p5 .disco-opt:not([aria-checked='true']):hover { color: var(--r2-shade); background: #fff; } }
html.c-cve2 body.p5 .disco-sheet-acts { grid-template-columns: auto 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--r2-line); position: sticky; bottom: 0; background: #fff; }
html.c-cve2 body.p5 .disco-clear { min-height: 48px; padding: 0 6px; background: none; color: var(--r2-shade); font-size: 14px; font-weight: 300; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--r2-line); border-radius: var(--r2-rs); border-start-start-radius: 0; }
html.c-cve2 body.p5 .disco-done { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; background: var(--r2-shade); color: var(--r2-mist); font-size: 15px; font-weight: 500; }
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .disco-sheet { max-width: 460px; border-radius: var(--r2-r); border-start-start-radius: 0; border: 1px solid var(--r2-line); }
}


/* ════════════════════════════════════════════════════════════════════════════
   7 · EMPTY STATES — D's settle-in in A's frame: the glyph draws (480ms),
       heading / copy / paths rise (340ms, staggered), ONE Shade action.
       Reduced motion: everything is present and still.
       (index.html's render() draws .disco-none; renderAccountSheet draws
        .account-empty-note.is-empty — both with an inline SVG glyph.)
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .disco-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px 24px; }
html.c-cve2 body.p5 .disco-none-glyph,
html.c-cve2 body.p5 .acct-empty-glyph {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 10px;
  border: 1px solid var(--r2-line); border-radius: var(--r2-r); border-start-start-radius: 0; color: var(--r2-shade);
}
html.c-cve2 body.p5 .disco-none-glyph svg, html.c-cve2 body.p5 .acct-empty-glyph svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html.c-cve2 body.p5 .disco-none-glyph path, html.c-cve2 body.p5 .acct-empty-glyph path { stroke-dasharray: 64; stroke-dashoffset: 64; animation: c-draw var(--c-d3) var(--c-ease) forwards; animation-delay: 120ms; }
html.c-cve2 body.p5 .disco-none-t { font-size: 20px; font-weight: 500; }
html.c-cve2 body.p5 .disco-none-p { font-size: 14px; font-weight: 300; }
html.c-cve2 body.p5 .disco-none-sug { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
html.c-cve2 body.p5 .disco-none-sug .disco-chip { padding: 0 12px; }
html.c-cve2 body.p5 .disco-none-btn { margin-top: 14px; }
html.c-cve2 body.p5 .disco-none > * { animation: c-rise var(--c-d2) var(--c-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
html.c-cve2 body.p5 .disco-none > :nth-child(2) { --i: 1; } html.c-cve2 body.p5 .disco-none > :nth-child(3) { --i: 2; }
html.c-cve2 body.p5 .disco-none > :nth-child(4) { --i: 3; } html.c-cve2 body.p5 .disco-none > :nth-child(5) { --i: 4; }
html.c-cve2 body.p5 .disco-none-sug .disco-chip { animation: c-rise var(--c-d2) var(--c-ease) both; animation-delay: calc(280ms + var(--j, 0) * 40ms); }
/* the saved list, empty (inside the account sheet) */
html.c-cve2 body.p5 .account-empty-note.is-empty { display: flex; flex-direction: column; align-items: center; justify-items: center; text-align: center; gap: 8px; padding: 32px 16px 24px; background: none; border: 0; border-radius: 0; color: var(--r2-ink2); }
html.c-cve2 body.p5 .account-empty-note.is-empty p { margin: 0; max-width: 36ch; line-height: 1.7; }
html.c-cve2 body.p5 .account-empty-note.is-empty .account-empty-cta { min-height: 48px; padding: 0 22px; margin-top: 10px; border-radius: var(--r2-rb); border-start-start-radius: 0; background: var(--r2-shade); color: var(--r2-mist); font-weight: 500; text-decoration: none; }
html.c-cve2 body.p5 .account-empty-note.is-empty > * { animation: c-rise var(--c-d2) var(--c-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
html.c-cve2 body.p5 .account-empty-note.is-empty > :nth-child(2) { --i: 1; } html.c-cve2 body.p5 .account-empty-note.is-empty > :nth-child(3) { --i: 2; }
@keyframes c-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes c-draw { to { stroke-dashoffset: 0; } }
@keyframes c-settle { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }


/* ════════════════════════════════════════════════════════════════════════════
   8 · ORDERING FACTS · CARE · COLOPHON — the one Mist band, then hairlines
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .order-facts { max-width: none; padding: 0; margin-top: 44px; background: var(--r2-mist); }
html.c-cve2 body.p5 .order-facts > .wrap { max-width: 1120px; margin: 0 auto; padding: 32px var(--r2-pad); gap: 0; background: none; color: var(--r2-ink); border-radius: 0; }
html.c-cve2 body.p5 .order-facts > .wrap::before { content: none; }
html.c-cve2 body.p5 .order-fact { padding: 14px 0; border-top: 1px solid rgba(16, 49, 43, .10); }
html.c-cve2 body.p5 .order-fact:last-child { border-bottom: 1px solid rgba(16, 49, 43, .10); }
html.c-cve2 body.p5 .order-facts .order-fact h3, html.c-cve2[lang='ar'] body.p5 .order-facts .order-fact h3 { font-size: 15px; font-weight: 500; color: var(--r2-ink); }
html.c-cve2 body.p5 .order-facts .order-fact p { font-size: 13px; color: var(--r2-ink2); }
@media (min-width: 768px) {
  html.c-cve2 body.p5 .order-facts > .wrap { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 44px var(--r2-pad); }
  html.c-cve2 body.p5 .order-fact, html.c-cve2 body.p5 .order-fact:last-child { border: 0; padding: 0; }
}
html.c-cve2 body.p5 .care { padding-top: 44px; }
html.c-cve2 body.p5 .care-head p { font-size: 13px; }
html.c-cve2 body.p5 .care-grid { background: none; border-radius: 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .care-card { padding: 0; border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .care-fold { font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .care-fold-sign { color: var(--r2-ink2); font-weight: 300; }
html.c-cve2 body.p5 .care-card p { font-size: 14px; font-weight: 300; }
@media (min-width: 1024px) { html.c-cve2 body.p5 .care-grid { padding: 0; gap: 0 32px; } html.c-cve2 body.p5 .care-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--r2-line); } }
html.c-cve2 body.p5 .colophon { padding-top: 44px; }
html.c-cve2 body.p5 .col-meta dt, html.c-cve2 body.p5 .col-meta dd { font-family: var(--r2-font); font-weight: 300; }
html.c-cve2 body.p5 .col-meta dt .ar { letter-spacing: 0; text-transform: none; }   /* S-08: «توصيل» — Arabic is never tracked */
html.c-cve2 body.p5 .colophon .foot-links a { font-weight: 300; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--r2-line); }
html.c-cve2 body.p5 .colophon .foot-ic { background: #fff; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 body.p5 .colophon .copy { font-weight: 300; }


/* ════════════════════════════════════════════════════════════════════════════
   9 · SHEETS — white, 20px top radius on phones; a dialog with a hairline
       (no shadow, no blur) from 768; the cart as a 440px panel from 1024
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html.c-cve2 body.p5 .account-overlay .sheet, html.c-cve2 body.p5 .product-overlay .sheet, html.c-cve2 body.p5 #policyOverlay .sheet,
  html.c-cve2 body.p5 .cart-sheet { border: 1px solid var(--r2-line); border-radius: var(--r2-r); border-start-start-radius: 0; }
}
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .cart-sheet { border: 0; border-inline-start: 1px solid var(--r2-line); border-radius: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════
   10 · CART — C's architecture in A's rows: hairline rows, a 72×90 picture,
        quantity + remove, the summary on a hairline, the ONE Sun action
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .cart-sheet-head { padding: 12px 20px 4px; }
html.c-cve2 body.p5 .cart-sheet .cart-list { border-top: 1px solid var(--r2-line); margin-top: 8px; }
html.c-cve2 body.p5 .cart-sheet .cart-item { grid-template-columns: 72px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .cart-sheet .cart-item:last-child { border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .cart-sheet .cart-thumb { width: 72px; height: 90px; border-radius: var(--r2-rs); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 body.p5 .cart-sheet .cart-info .code { display: none; }
html.c-cve2 body.p5 .cart-sheet .cart-info .n { font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .cart-info .p { font-family: var(--r2-font); font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .cart-info .fulfill-chip { color: var(--r2-ink2); font-size: 12px; }
/* the stepper: two 28px hairline squares, each with a transparent 44 hit; the
   18px gap keeps the two hits from overlapping (they may touch, never overlap) */
html.c-cve2 body.p5 .cart-sheet .cart-item .qty { height: auto; gap: 18px; padding: 8px 0 0; background: none; border-radius: 0; }
html.c-cve2 body.p5 .cart-sheet .qty button { position: relative; width: 28px; height: 28px; border: 1px solid var(--r2-line); border-radius: 8px; border-start-start-radius: 0; color: var(--r2-shade); font-size: 16px; font-weight: 300; line-height: 1; }
html.c-cve2 body.p5 .cart-sheet .qty button::before { content: ''; position: absolute; inset: -8px; }
html.c-cve2 body.p5 .cart-sheet .qty button:disabled { color: var(--r2-ink2); border-color: var(--r2-line2); }
html.c-cve2 body.p5 .cart-sheet .qty .q { min-width: 16px; font-family: var(--r2-font); font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .cart-remove { padding: 8px 0 0; min-height: 44px; color: var(--r2-ink2); }
html.c-cve2 body.p5 .cart-sheet .cart-remove::after { font-size: 12px; font-weight: 300; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--r2-line); }
@media (hover: hover) { html.c-cve2 body.p5 .cart-sheet .cart-remove:hover::after { color: var(--r2-shade); } }
/* the decision: a summary on a hairline, white, ONE Sun action */
html.c-cve2 body.p5 .cart-footer { margin: 0; padding: 6px 20px calc(18px + var(--r2-safe-b)); background: #fff; color: var(--r2-ink); }
html.c-cve2 body.p5 .cart-sheet .cart-grand-total, html.c-cve2 body.p5 .cart-sheet .cart-total { padding: 14px 0 12px; color: var(--r2-ink); font-size: 17px; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .cart-grand-total .amount { font-family: var(--r2-font); font-size: 17px; font-weight: 500; color: var(--r2-ink); }
html.c-cve2 body.p5 .cart-sheet .checkout-btn { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .cart-whatsapp-alt { min-height: 44px; margin-top: 4px; color: var(--r2-ink2); font-weight: 300; text-decoration-color: var(--r2-line); }
html.c-cve2 body.p5 .cart-sheet .promo-row { border-top: 1px solid var(--r2-line); margin-top: 14px; padding-top: 14px; }
html.c-cve2 body.p5 .cart-sheet .promo-row input { background: #fff; border: 1px solid var(--r2-line); border-radius: var(--r2-rs); border-start-start-radius: 0; font-family: var(--r2-font); color: var(--r2-ink); }
html.c-cve2 body.p5 .cart-sheet .promo-row input:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 1px; }
html.c-cve2 body.p5 .cart-sheet .promo-btn { background: none; color: var(--r2-shade); border: 1px solid var(--r2-line); border-radius: var(--r2-rs); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 body.p5 .cart-sheet .promo-btn:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 2px; }
html.c-cve2 body.p5 .cart-sheet .promo-msg { color: var(--r2-ink2); }
html.c-cve2 body.p5 .cart-sheet .promo-msg.ok { color: var(--r2-ink); }
html.c-cve2 body.p5 .cart-sheet .cart-note { color: var(--r2-ink2); font-weight: 300; }
html.c-cve2 body.p5 .cart-sheet .cart-empty { padding: 44px 20px 36px; font-weight: 300; }
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .cart-sheet-head { padding: 24px 28px 6px; }
  html.c-cve2 body.p5 .cart-sheet-head h2 { font-size: 22px; }
  html.c-cve2 body.p5 .cart-footer { padding: 6px 28px 24px; border-top: 1px solid var(--r2-line); }
}


/* ════════════════════════════════════════════════════════════════════════════
   11 · ACCOUNT / FAVOURITES — A: title + count + the bare card; the rows on
        hairlines; two quiet actions
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .account-name { font-size: 20px; font-weight: 500; }
html.c-cve2 body.p5 .account-since { font-weight: 300; }
html.c-cve2 body.p5 .account-rows { background: none; border-radius: 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .account-row { padding: 8px 2px; min-height: 56px; border-bottom: 1px solid var(--r2-line); font-weight: 500; font-size: 15px; }
html.c-cve2 body.p5 .account-row-value { font-weight: 300; }
html.c-cve2 body.p5 .account-row-go { color: var(--r2-ink2); }
html.c-cve2 body.p5 .account-saved-cap { font-size: 15px; font-weight: 500; }
html.c-cve2 body.p5 .account-saved-count { font-weight: 300; }
html.c-cve2 body.p5 .account-fav-grid { gap: 24px 16px; }
html.c-cve2 body.p5 .account-fav-media { border-radius: var(--r2-rs); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 body.p5 .account-fav-heart { background: rgba(255, 255, 255, .92); color: var(--r2-shade); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 body.p5 .account-fav-name { font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .account-fav-price { font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .account-empty-note { background: none; border-radius: 0; padding: 12px 0; color: var(--r2-ink2); font-weight: 300; }
html.c-cve2 body.p5 .account-empty-cta { font-weight: 500; }
html.c-cve2 body.p5 .account-actions { background: none; }
html.c-cve2 body.p5 .account-settings-btn, html.c-cve2 body.p5 .account-signout-btn { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; background: #fff; border: 1px solid var(--r2-line); color: var(--r2-shade); font-weight: 500; }


/* ════════════════════════════════════════════════════════════════════════════
   12 · THE TOAST — Shade, and its action is never Sun-as-text
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .pw-toast { border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 body.p5 .pw-toast-action { color: var(--r2-mist); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }


/* ════════════════════════════════════════════════════════════════════════════
   13 · PDP — C's purchase architecture inside A: the picture within the
        gutters, the eyebrow, the specimen title (M3 roles), a hairline buy
        group (price · availability · the actions), hairline facts, the folds
        as an accordion, related as A cards; the phone bar is A's white bar.
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2 body.p5 .pdnav { height: var(--c-hdr); background: #fff; padding-inline: 8px; gap: 2px; }
html.c-cve2 body.p5 .pdnav.is-scrolled, html.c-cve2 body.p5 .pdnav.is-condensed { background: #fff; box-shadow: inset 0 -1px 0 var(--r2-line); }
html.c-cve2 body.p5 .pdnav-back { width: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: var(--r2-rb); border-start-start-radius: 0; color: var(--r2-shade); }
html.c-cve2 body.p5 .pdnav-back > span:first-child { font-size: 20px; }
/* the label stays for assistive tech; the bar shows the chevron alone on phones */
html.c-cve2 body.p5 .pdnav-back-sm, html.c-cve2 body.p5 .pdnav-back-lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline; }
html.c-cve2 body.p5 .pdnav-name { font-weight: 500; font-size: 15px; }
html.c-cve2 body.p5 .pdnav-mark .brand-mark { block-size: 24px; }
html.c-cve2 body.p5 .pdnav-lang { font-weight: 500; background: none; border-radius: var(--r2-rs); border-start-start-radius: 0; }
html.c-cve2 body.p5 .pdnav-cart { color: var(--r2-shade); }
html.c-cve2 body.p5 .pd-gal { margin: 12px var(--r2-pad) 0; border-radius: var(--r2-r); border-start-start-radius: 0; background: var(--r2-mist); max-height: none; }
html.c-cve2 body.p5 .pd-stamp--sm { display: none; }
html.c-cve2 body.p5 .pd-gal-bar { border-radius: 2px; background: rgba(255, 255, 255, .6); }
html.c-cve2 body.p5 .pd-gal-bar.is-on { background: #fff; }
html.c-cve2 body.p5 .pd-decide { padding: 22px var(--r2-pad) 0; gap: 0; }
html.c-cve2 body.p5 .pd-eyebrow { order: 1; margin: 0 0 6px; }
html.c-cve2 body.p5 .pd-name { order: 2; }
html.c-cve2[lang="ar"] body.p5 .pd-name { font-size: 30px; }
html.c-cve2[lang="en"] body.p5 .pd-name { font-size: 34px; }
html.c-cve2 body.p5 .pd-latin { order: 3; margin-top: 4px; font-size: 14px; }
html.c-cve2 body.p5 .pd-latin[hidden] { display: none; }
/* the buy group: one hairline box — money on top, the actions inside it on desktop */
html.c-cve2 body.p5 .pd-money { order: 4; margin-top: 16px; padding: 14px 16px 12px; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; gap: 8px 12px; }
html.c-cve2 body.p5 .pd-price { font-family: var(--r2-font); font-size: 22px; font-weight: 500; }
html.c-cve2 body.p5 .pd-price-was { font-weight: 300; }
html.c-cve2 body.p5 .pd-savings { font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 body.p5 .pd-avail { font-size: 13px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 body.p5 .pd-avail::before { width: 7px; height: 7px; }
html.c-cve2 body.p5 .pd-avail.is-sold, html.c-cve2 body.p5 .pd-avail.is-exception { color: var(--r2-ink); }
html.c-cve2 body.p5 .pd-avail.is-exception::before { background: #8A6A11; }
html.c-cve2 body.p5 .pd-desc { order: 6; margin-top: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--r2-ink); }
/* the facts: hairline cells, two or three across */
html.c-cve2 body.p5 .pd-facts { order: 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; margin-top: 22px; }
@media (min-width: 768px) { html.c-cve2 body.p5 .pd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.c-cve2 body.p5 .pd-facts[hidden] { display: none; }
html.c-cve2 body.p5 .pd-fact, html.c-cve2 body.p5 .pd-fact + .pd-fact { padding: 12px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--r2-line); border-radius: 0; }
html.c-cve2 body.p5 .pd-fact-l { font-size: 12px; font-weight: 300; }
html.c-cve2 body.p5 .pd-fact-v { font-size: 14px; font-weight: 500; white-space: normal; overflow: visible; text-overflow: clip; }   /* S-08: the size fact read «14 cm p…» */
html.c-cve2 body.p5 .pd-fact-v.is-mono { font-family: var(--r2-font); font-size: 14px; }
/* the folds: an accordion on hairlines */
html.c-cve2 body.p5 .pd-folds { order: 8; margin-top: 18px; padding: 0; background: none; border: 0; border-top: 1px solid var(--r2-line); border-radius: 0; }
html.c-cve2 body.p5 .pd-fold { min-height: 52px; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .pd-fold[aria-expanded='true'] { border-bottom-color: transparent; }
html.c-cve2 body.p5 .pd-fold-sign { color: var(--r2-ink2); font-weight: 300; }
html.c-cve2 body.p5 .pd-panel { border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .pd-fold-h:last-of-type .pd-fold, html.c-cve2 body.p5 .pd-panel:last-of-type { border-bottom: 1px solid var(--r2-line); }
html.c-cve2 body.p5 .pd-row { border-bottom: 1px solid var(--r2-line2); }
html.c-cve2 body.p5 .pd-row dt { font-size: 13px; font-weight: 300; }
html.c-cve2 body.p5 .pd-row dd { font-size: 14px; font-weight: 500; }
html.c-cve2 body.p5 .pd-row dd bdi { font-weight: inherit; }   /* S-08: the isolated binomial keeps its row's weight (M3's `body.p5 *` would set 300) */
html.c-cve2 body.p5 .pd-mark.is-on { background: var(--r2-shade); }
html.c-cve2 body.p5 .pd-panel-note { font-weight: 300; }
html.c-cve2 body.p5 .pd-secondary { order: 9; margin-top: 14px; }
html.c-cve2 body.p5 .pd-save, html.c-cve2 body.p5 .pd-share { font-weight: 300; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--r2-line); }
/* related: A's section head and the A card */
html.c-cve2 body.p5 .pd-related { margin-top: 40px; }
html.c-cve2 body.p5 .pd-related-title { margin-bottom: 16px; }
html.c-cve2 body.p5 .pd-related-note { font-weight: 300; }
html.c-cve2 body.p5 .pd-related .cat-grid { gap: 24px 16px; }
/* the phone bar: A's white action bar, one Sun action, a hairline second */
html.c-cve2 body.p5 .pd-buybar { background: #fff; border-top: 1px solid var(--r2-line); padding: 10px var(--r2-pad) calc(10px + var(--r2-safe-b)); }
html.c-cve2 body.p5 .pd-bar-add, html.c-cve2 body.p5 .pd-btn-add { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; font-size: 15px; }
html.c-cve2 body.p5 .pd-bar-add.is-added, html.c-cve2 body.p5 .pd-btn-add.is-added { background: var(--r2-shade); color: var(--r2-mist); }
html.c-cve2 body.p5 .pd-bar-add.is-added .pd-btn-price, html.c-cve2 body.p5 .pd-btn-add.is-added .pd-btn-price { color: var(--r2-mist); }
html.c-cve2 body.p5 .pd-btn-price { font-family: var(--r2-font); font-weight: 500; opacity: 1; }
html.c-cve2 body.p5 .pd-bar-wa, html.c-cve2 body.p5 .pd-btn-wa { height: 48px; min-width: 48px; background: #fff; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; color: var(--r2-shade); font-weight: 500; }
@media (hover: hover) { html.c-cve2 body.p5 .pd-bar-wa:hover, html.c-cve2 body.p5 .pd-btn-wa:hover { background: var(--r2-mist); border-color: var(--r2-line); } }
html.c-cve2 body.p5 .pd-bar-sold, html.c-cve2 body.p5 .pd-btn-sold { min-height: 48px; background: var(--r2-mist); color: var(--r2-ink2); border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 body.p5 .pd-btn-add:focus-visible, html.c-cve2 body.p5 .pd-bar-add:focus-visible, html.c-cve2 body.p5 .pd-btn-wa:focus-visible, html.c-cve2 body.p5 .pd-bar-wa:focus-visible { outline: 2px solid var(--r2-shade); outline-offset: 3px; }
@media (min-width: 768px) {
  html.c-cve2 body.p5 .pd-gal { aspect-ratio: 4 / 5; max-height: 70dvh; margin: 16px auto 0; max-width: 520px; width: calc(100% - 2 * var(--r2-pad)); }
  html.c-cve2 body.p5 .pd-decide { max-width: 640px; margin: 22px auto 0; }
  html.c-cve2[lang="ar"] body.p5 .pd-name { font-size: 34px; }
  html.c-cve2[lang="en"] body.p5 .pd-name { font-size: 38px; }
}
@media (min-width: 1024px) {
  html.c-cve2 body.p5 .pd-screen { grid-template-columns: 1.1fr 1fr; gap: 56px; max-width: 1120px; padding-top: 24px; }
  html.c-cve2 body.p5 .pd-gal { width: auto; max-width: none; margin: 0; top: calc(var(--c-hdr) + 24px); max-height: calc(100dvh - var(--c-hdr) - 48px); border-radius: var(--r2-r); border-start-start-radius: 0; }
  html.c-cve2 body.p5 .pd-decide { max-width: none; margin: 0; padding: 8px 0 0; border-inline-start: 0; }   /* S-08: product.css's legacy column rule sat on the text; the frozen PDP has none */
  html.c-cve2[lang="ar"] body.p5 .pd-name { font-size: 40px; }
  html.c-cve2[lang="en"] body.p5 .pd-name { font-size: 46px; }
  html.c-cve2 body.p5 .pd-latin { font-size: 15px; }
  html.c-cve2 body.p5 .pd-money { margin-top: 18px; border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; padding-bottom: 4px; }
  html.c-cve2 body.p5 .pd-buy { order: 5; display: flex; gap: 8px; margin: 0; max-width: none; padding: 12px 16px 16px; border: 1px solid var(--r2-line); border-top: 0; border-radius: 0 0 var(--r2-rb) var(--r2-rb); }
  html.c-cve2 body.p5 .pd-price { font-size: 24px; }
  html.c-cve2 body.p5 .pd-desc { max-width: 58ch; }
  html.c-cve2 body.p5 .pd-related { max-width: 1120px; margin: 56px auto 0; }
  html.c-cve2 body.p5 .pd-related .cat-grid { gap: 36px 28px; }
  html.c-cve2 body.p5 .pdnav { padding-inline: var(--r2-pad); }
  html.c-cve2 body.p5 .pdnav-back { width: auto; padding: 0 10px; }
  html.c-cve2 body.p5 .pdnav-back-lg { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 13px; font-weight: 300; }
  html.c-cve2 body.p5 .pdnav-mark .brand-mark { block-size: 26px; }
  html.c-cve2 body.p5 .pdnav-mark .brand-wm { display: none; }
  html.c-cve2[lang="en"] body.p5 .pdnav-mark .brand-wm { display: block; block-size: 14px; }
}
@media (min-width: 1440px) { html.c-cve2 body.p5 .pd-screen { gap: 64px; } html.c-cve2[lang="ar"] body.p5 .pd-name { font-size: 40px; } html.c-cve2[lang="en"] body.p5 .pd-name { font-size: 46px; } }


/* ════════════════════════════════════════════════════════════════════════════
   14 · CHECKOUT · RECEIPT · TRACKING — the R2B order pages (no body.p5).
        ONE shell (A): white, section heads on hairlines, white fields with a
        hairline ring, Shade primaries, the ONE Sun action = the confirm inside
        the review. Contact = A. Delivery rows and the payment options borrow
        D / C interaction only. The login gate is NOT touched (G2).
   ══════════════════════════════════════════════════════════════════════════ */
html.c-cve2, html.c-cve2 body { background: #fff; }
html.c-cve2 body { color: var(--r2-ink); font-weight: 300; }
html.c-cve2 h1, html.c-cve2 h2, html.c-cve2 h3 { font-weight: 500; }
html.c-cve2 .surf { background: none; border: 0; border-radius: 0; box-shadow: none; }
html.c-cve2 .eyebrow { font-size: 20px; font-weight: 500; color: var(--r2-ink); line-height: 1.3; }
html.c-cve2 .r2-hdr { height: calc(var(--c-hdr) + var(--r2-safe-t)); background: #fff; }
html.c-cve2 .r2-brand { min-width: 44px; justify-content: center; }   /* the mark alone is 23px wide; the link keeps the 44 floor */
html.c-cve2 .r2-brand .brand-mark { block-size: 24px; }
html.c-cve2 .r2-brand .brand-wm { display: none; }
html.c-cve2 .r2-hdr .chip { font-weight: 300; border-radius: var(--r2-rs); border-start-start-radius: 0; }
html.c-cve2 .r2-hdr .chip.lang { background: none; font-weight: 500; }
@media (hover: hover) { html.c-cve2 .r2-hdr .chip:hover { background: var(--r2-mist); } }
html.c-cve2 .co { max-width: 1120px; padding-top: 16px; }
html.c-cve2 .co-head h1 { font-size: 26px; }
html.c-cve2 .step { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--r2-line); }
html.c-cve2 .step .eyebrow { margin: 0 0 14px; }
/* gates and states: a hairline block */
html.c-cve2 .state { margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--r2-line); border-bottom: 1px solid var(--r2-line); gap: 6px; }
html.c-cve2 .state .eyebrow { font-size: 12px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 .state h2 { font-size: 20px; }
html.c-cve2 .state p { font-weight: 300; }
/* fields: white, a hairline ring, 48px, the corner rule (kept) */
html.c-cve2 .f label, html.c-cve2 .f .k { font-weight: 300; }
html.c-cve2 .f input, html.c-cve2 .f textarea { min-height: 48px; box-shadow: 0 0 0 1px var(--r2-line); font-weight: 300; }
html.c-cve2 .f input:focus, html.c-cve2 .f textarea:focus { box-shadow: 0 0 0 2px var(--r2-shade); }
html.c-cve2 #fulfillRows { padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 #fulfillRows .f { border-bottom: 1px solid var(--r2-line); }
html.c-cve2 #fulfillRows .f .k { font-weight: 300; }
html.c-cve2 #fulfillRows .f .v { font-weight: 500; }
html.c-cve2 .draft-note { font-weight: 300; }
html.c-cve2 .draft-note button { font-weight: 500; }
/* payment: A's option rows — a dot with a Sun ring when chosen (C's confidence, A's skin) */
html.c-cve2 .seg { display: block; padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 .seg label { display: block; border-bottom: 1px solid var(--r2-line); }
html.c-cve2 .seg span {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; justify-content: start;
  min-height: 56px; padding: 8px 2px; border-radius: 0; text-align: start; color: var(--r2-ink); font-size: 15px; font-weight: 300; transition: none;
}
html.c-cve2 .seg span::before { content: ''; grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--r2-line); box-sizing: border-box; transition: border var(--c-d1) var(--c-ease); }
html.c-cve2 .seg span strong { font-weight: 500; }
html.c-cve2 .seg span small { grid-column: 2; font-size: 12.5px; color: var(--r2-ink2); opacity: 1; }
html.c-cve2 .seg input:checked + span { background: none; color: var(--r2-ink); font-weight: 300; }
html.c-cve2 .seg input:checked + span::before { border: 5px solid var(--r2-sun); background: var(--r2-shade); }
html.c-cve2 .seg input:focus-visible + span { outline: 2px solid var(--r2-shade); outline-offset: 0; }
/* actions */
html.c-cve2 .cta { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 .cta .mono { font-family: var(--r2-font); font-weight: 500; opacity: 1; }
html.c-cve2 .ghost { min-height: 48px; background: #fff; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 .sticky { background: #fff; border-top: 1px solid var(--r2-line); }
html.c-cve2 .sticky .cta { background: var(--r2-shade); color: var(--r2-mist); }
html.c-cve2 .sticky .cta .mono { color: var(--r2-mist); }
html.c-cve2 .sticky .bag-gate { color: var(--r2-dg); }
html.c-cve2 .kbbar .kb-next { border-radius: var(--r2-rs); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 #msg { background: none; padding: 12px 0; border-top: 1px solid var(--r2-line); border-radius: 0; }
html.c-cve2 #msg.err { background: none; }
html.c-cve2 .note { font-weight: 300; }
html.c-cve2 .note a { font-weight: 500; }
/* the summary — C's order summary on A's hairlines */
html.c-cve2 .summary { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 .summary h2 { font-size: 20px; }
html.c-cve2 .li { border-bottom: 1px solid var(--r2-line); }
html.c-cve2 .li .im { border-radius: var(--r2-rs); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 .li b { font-weight: 500; font-size: 14px; }
html.c-cve2 .li small { font-weight: 300; }
html.c-cve2 .li .price { font-weight: 500; }
html.c-cve2 .qty { height: auto; gap: 18px; background: none; border-radius: 0; }
html.c-cve2 .qty button { position: relative; width: 28px; height: 28px; border: 1px solid var(--r2-line); border-radius: 8px; border-start-start-radius: 0; color: var(--r2-shade); font-size: 16px; font-weight: 300; }
html.c-cve2 .qty button::before { content: ''; position: absolute; inset: -8px; }
html.c-cve2 .qty button:disabled { color: var(--r2-ink2); border-color: var(--r2-line2); }
html.c-cve2 .qty .q { font-family: var(--r2-font); font-weight: 500; }
html.c-cve2 .li-rm { color: var(--r2-ink2); min-height: 44px; }
html.c-cve2 .li-rm span { font-weight: 300; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--r2-line); }
html.c-cve2 .promo { border-top: 1px solid var(--r2-line); }
html.c-cve2 .promo input { background: #fff; box-shadow: 0 0 0 1px var(--r2-line); border-radius: var(--r2-rs); border-start-start-radius: 0; font-family: var(--r2-font); font-weight: 300; }
html.c-cve2 .promo button { background: #fff; border: 1px solid var(--r2-line); color: var(--r2-shade); border-radius: var(--r2-rs); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 .tot { font-weight: 300; }
html.c-cve2 .tot .mono { font-family: var(--r2-font); }
html.c-cve2 .tot.grand { font-weight: 500; border-top: 1px solid var(--r2-line); }
html.c-cve2 .tot.grand b { font-family: var(--r2-font); font-size: 17px; font-weight: 500; }
html.c-cve2 .fulfill-notice { color: var(--r2-ink); font-weight: 300; }
html.c-cve2 .bag-review { padding: 18px 0; border-top: 1px solid var(--r2-line); }
html.c-cve2 .bag-review h2 { font-size: 20px; }
html.c-cve2 .bag-lede, html.c-cve2 .bag-what, html.c-cve2 .bag-act { font-weight: 300; }
html.c-cve2 .bag-name { font-weight: 500; }
/* the review: white, the ONE Sun action on a white foot with a hairline */
html.c-cve2 .rev { border-radius: 20px 20px 0 0; }
html.c-cve2 .rev::backdrop { background: rgba(16, 49, 43, .18); }
html.c-cve2 .rev-head .eyebrow { font-size: 12px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 .rev-head h2 { font-size: 20px; }
html.c-cve2 .rev-lede { font-weight: 300; }
html.c-cve2 .rev-sec { border-top: 1px solid var(--r2-line); }
html.c-cve2 .rev-sec-h .eyebrow { font-size: 13px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 .rev-li-n { font-weight: 500; }
html.c-cve2 .rev-qty { font-weight: 300; }
html.c-cve2 .rev-f { border-bottom: 1px solid var(--r2-line2); }
html.c-cve2 .rev-k { font-weight: 300; }
html.c-cve2 .rev-v { font-weight: 300; }
html.c-cve2 .rev-edit { font-weight: 300; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--r2-line); }
html.c-cve2 .rev-foot { background: #fff; color: var(--r2-ink); border-top: 1px solid var(--r2-line); }
html.c-cve2 .rev-foot .note { color: var(--r2-ink2); }
html.c-cve2 .rev-foot .note a { color: var(--r2-shade); }
html.c-cve2 .rev-foot .cta { background: var(--r2-sun); color: var(--r2-shade); }
html.c-cve2 .rev-foot .cta .mono { color: var(--r2-shade); }
html.c-cve2 .rev-foot .cta:focus-visible { outline-color: var(--r2-shade); }
html.c-cve2 .rev-foot .ghost { color: var(--r2-shade); background: #fff; border: 1px solid var(--r2-line); }
html.c-cve2 .rev-foot .ghost:focus-visible { outline-color: var(--r2-shade); }
@media (min-width: 768px) { html.c-cve2 .rev { border: 1px solid var(--r2-line); border-radius: var(--r2-r); border-start-start-radius: 0; } html.c-cve2 .co-head h1 { font-size: 30px; } }
@media (min-width: 1024px) {
  html.c-cve2 .co { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; padding-bottom: 64px; }
  html.c-cve2 .co-head h1 { font-size: 32px; }
  html.c-cve2 .summary { top: calc(var(--c-hdr) + 24px); padding: 0; border-top: 0; }
  html.c-cve2 .summary h2 { padding-bottom: 12px; border-bottom: 1px solid var(--r2-line); }
}

/* ── the receipt (order-success): A — calm, white, one acknowledgement ──── */
html.c-cve2 body.success-page, html.c-cve2:has(body.success-page) { background: #fff; color: var(--r2-ink); }
html.c-cve2 body.success-page .r2-hdr { background: #fff; }
html.c-cve2 body.success-page .r2-brand { color: var(--r2-shade); }
html.c-cve2 body.success-page .r2-hdr .chip { color: var(--r2-shade); }
html.c-cve2 body.success-page .r2-hdr .chip.lang { background: none; }
@media (hover: hover) { html.c-cve2 body.success-page .r2-hdr .chip:hover { background: var(--r2-mist); } }
html.c-cve2 .conf { max-width: 520px; padding-top: 36px; }
/* the mark on white; it settles once (480ms) — the only motion on the page */
html.c-cve2 .conf .ring { width: 64px; height: 64px; background-image: url('/assets/brand/pw-mark.svg'); animation: c-settle var(--c-d3) var(--c-ease) both; }
html.c-cve2 .conf h1 { font-size: 26px; margin-top: 18px; color: var(--r2-ink); }
html.c-cve2 .conf .no { font-family: var(--r2-font); font-size: 17px; font-weight: 500; color: var(--r2-ink); font-variant-numeric: tabular-nums; }
html.c-cve2 .conf .state { color: var(--r2-ink); }
html.c-cve2 .conf .loading { color: var(--r2-ink2); }
html.c-cve2 .conf .loading .skel { background: linear-gradient(90deg, var(--r2-mist), #F6F7F4, var(--r2-mist)); background-size: 200% 100%; }
html.c-cve2 .conf .rcpt { margin-top: 26px; background: none; color: var(--r2-ink); border-top: 1px solid var(--r2-line); padding: 6px 0 0; }
html.c-cve2 .conf .rcpt .li { border-bottom-color: var(--r2-line); }
html.c-cve2 .conf .rcpt .li .im { background: var(--r2-mist); color: var(--r2-shade); }
html.c-cve2 .conf .rcpt .li small { color: var(--r2-ink2); }
html.c-cve2 .conf .rcpt .li .price { color: var(--r2-ink); }
html.c-cve2 .conf .rcpt .tot { color: var(--r2-ink2); }
html.c-cve2 .conf .rcpt .tot .mono, html.c-cve2 .conf .rcpt .tot.disc .mono { color: var(--r2-ink); }
html.c-cve2 .conf .rcpt .tot.grand { border-top-color: var(--r2-line); color: var(--r2-ink); }
html.c-cve2 .conf .rcpt .tot.grand b { color: var(--r2-ink); }
html.c-cve2 .conf .meta { border-top: 1px solid var(--r2-line) !important; padding-inline: 0; }
html.c-cve2 .conf .meta .f .k { color: var(--r2-ink2); }
html.c-cve2 .conf .meta .f .v { color: var(--r2-ink); font-weight: 500; }
html.c-cve2 .conf .meta .f .v.is-pickup { color: var(--r2-ink); }
html.c-cve2 .conf p.next { font-size: 14px; color: var(--r2-ink2); }
html.c-cve2 .conf .acts { gap: 10px; margin-top: 22px; }
html.c-cve2 .conf .acts .ghost:first-child { background: var(--r2-shade); color: var(--r2-mist); border-color: var(--r2-shade); }
html.c-cve2 .conf .acts .ghost + .ghost { background: #fff; color: var(--r2-shade); border: 1px solid var(--r2-line); min-height: 48px; }
html.c-cve2 .conf .acts .ghost:focus-visible { outline-color: var(--r2-shade); }
html.c-cve2 .conf .help { font-size: 13px; color: var(--r2-ink2); }
html.c-cve2 .conf .help a { color: var(--r2-shade); font-weight: 500; }
@media (min-width: 768px) { html.c-cve2 .conf { padding-top: 48px; } html.c-cve2 .conf h1 { font-size: 30px; } html.c-cve2 .conf .acts .ghost + .ghost { background: #fff; } }

/* ── post-purchase account (E → A): the presentation contract, PREPARED.
      Nothing on the receipt renders it: attaching a guest order to an account
      needs the guest backend authority (G2/G3). The classes are the frozen
      row → sheet/panel; a future gate binds them to markup. ─────────────── */
html.c-cve2 .acct-row { width: 100%; display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 18px 0; border: 0; border-top: 1px solid var(--r2-line); background: none; color: var(--r2-ink); text-align: start; font: inherit; cursor: pointer; }
html.c-cve2 .acct-row b { font-weight: 500; }
html.c-cve2 .acct-row p { margin: 3px 0 0; color: var(--r2-ink2); font-size: 13px; line-height: 1.6; }
html.c-cve2 .acct-panel { position: fixed; z-index: 30; inset: auto 0 0 0; background: #fff; border-radius: 20px 20px 0 0; padding: 12px var(--r2-pad) calc(16px + var(--r2-safe-b)); }
@media (min-width: 1024px) { html.c-cve2 .acct-panel { inset: 0 0 0 auto; width: 420px; border-radius: 0; border-inline-start: 1px solid var(--r2-line); padding: 16px 24px; } }

/* ── tracking: white ground, records on hairlines ─────────────────────── */
html.c-cve2 .tracking-intro h1 { font-size: 26px; }
html.c-cve2 .tracking-intro p { font-weight: 300; }
html.c-cve2 .status-panel { background: none; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 .status-panel .section-kicker { font-size: 12px; font-weight: 300; color: var(--r2-ink2); }
html.c-cve2 .status-panel h2 { font-size: 20px; }
html.c-cve2 .status-panel p { font-weight: 300; }
html.c-cve2 .status-panel button, html.c-cve2 .status-panel .status-action { min-height: 48px; border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 .order-record { background: none; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 .order-record.is-requested { box-shadow: none; border-color: var(--r2-shade); }
html.c-cve2 .order-ref { font-family: var(--r2-font); font-weight: 500; background: var(--r2-mist); border-radius: 6px; border-start-start-radius: 0; }
html.c-cve2 .order-state { font-size: 20px; }
html.c-cve2 .order-line, html.c-cve2 .tl-title, html.c-cve2 .tl-meta, html.c-cve2 .order-item-qty, html.c-cve2 .order-record-help { font-weight: 300; }
html.c-cve2 .tl-meta, html.c-cve2 .order-item-price, html.c-cve2 .order-grand-total strong { font-family: var(--r2-font); }
html.c-cve2 .tl-step.is-current .tl-dot { background: var(--r2-sun); box-shadow: 0 0 0 3px rgba(244, 201, 93, .28); }
html.c-cve2 .order-item-thumb { border-radius: var(--r2-rs); border-start-start-radius: 0; background: var(--r2-mist); }
html.c-cve2 .order-help-link, html.c-cve2 .order-cancel-btn, html.c-cve2 .order-again-link { font-weight: 500; }
html.c-cve2 .order-cancel-confirm { background: none; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; }
html.c-cve2 .order-cancel-yes, html.c-cve2 .order-again-btn { min-height: 44px; background: #fff; border: 1px solid var(--r2-line); border-radius: var(--r2-rb); border-start-start-radius: 0; font-weight: 500; }
html.c-cve2 .order-grand-total strong { font-weight: 500; }
html.c-cve2 .status-panel .status-mark { display: none; }


/* ════════════════════════════════════════════════════════════════════════════
   15 · PREFERENCES — placed last so nothing outranks them
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.c-cve2 body.p5 .disco-none > *, html.c-cve2 body.p5 .disco-none-sug .disco-chip, html.c-cve2 body.p5 .account-empty-note.is-empty > *, html.c-cve2 .conf .ring { animation: none !important; opacity: 1; transform: none; }
  html.c-cve2 body.p5 .disco-none-glyph path, html.c-cve2 body.p5 .acct-empty-glyph path { stroke-dashoffset: 0; animation: none !important; }
}
@media (prefers-contrast: more) {
  html.c-cve2 :is(.disco-chip, .qty button, .ghost, .pd-btn-wa, .pd-bar-wa, .promo button, .account-settings-btn, .account-signout-btn) { border: 1.5px solid var(--r2-shade); }
  html.c-cve2 :is(.hero-band, .care-grid, .cart-list, .account-rows, .pd-folds, .step, .summary) { border-color: var(--r2-shade); }
}

/* S-08 · focus and in-page jumps stay clear of the fixed tab bar (WCAG 2.4.11): a control that receives focus
   or is scrolled to lands above the bar. This does not move anything at rest — the frozen C1 composition puts
   the hero CTA at or under the bar's edge on first load (partly visible at 430–440px); a tap on its visible part
   reaches it. The receipt keeps checkout-r2.css's own 120px. */
html.c-cve2:has(> body.p5:not(.success-page)) { scroll-padding-bottom: calc(var(--pw-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); }