/**
 * store-desktop-v2.css — WO-STORE-SB-REDESIGN-V2 · S2 (2026-07-06).
 *
 * The v2 wide desktop layout for the public store page (giobiz.app/s/<slug>).
 *
 * TWO GUARANTEES that keep Henry's rule #1 ("phone view stays as-is, do NOT break it"):
 *   1. EVERY rule is inside `@media (min-width:1024px)` → nothing applies below 1024px, so the
 *      phone/tablet view is byte-identical whether or not this file loads.
 *   2. EVERY selector is scoped under `html.store-desktop-v2` → the class is added ONLY when the
 *      `store_desktop_v2` feature flag is ON (store.boot.js reads /api/config/flags on boot). Flag
 *      OFF → class absent → not one rule here matches → the old layout serves at ALL widths.
 * So: flag OFF = old view everywhere; flag ON + phone = old phone view; flag ON + PC = this v2 layout.
 *
 * This is additive (a separate stylesheet, linked after store.css) — it overrides only within its
 * doubly-gated scope and deletes nothing. The 480px phone frame is the base; here it opens to a
 * centred 1200px marketplace-style page with a 5-column product grid, per the design handoff
 * (design_handoff_marketplace_v2/README-CLAUDE-CODE.md, desktop ≥1024px section).
 *
 * History:
 *   2026-07-06 — S2. One feature, one file (BOMSHELL Rule 1.2).
 *   2026-07-06 — DV1 (v2 full-fidelity design pass): Henry ruled the v2 "market" look must apply at
 *     ALL widths incl phone ("design is cold, not done") — my S2 phone-byte-identical ruling is
 *     SUPERSEDED (chief). DV1 re-themes the whole store to the v2 tokens (design_handoff_marketplace_v2/
 *     Henmack Store Live.html) by OVERRIDING store.css's CSS variables under html.store-desktop-v2 — one
 *     variable block cascades to every element, no markup change, fully reversible (flag OFF = old theme).
 *     The wide LAYOUT stays width-gated below; DV1 is COLOUR/theme only (card anatomy = DV2, grid = DV4).
 */

/* ── DV1: v2 THEME at ALL widths (colour tokens only) ───────────────────────────────────────────
   Redefining store.css's variables on html.store-desktop-v2 (specificity 0,1,1 > :root's 0,1,0) swaps
   the whole palette from the old dark-forest green (#0A3D2E) to the v2 market green (#14855a) + light
   page bg (#f2f4f3), with zero changes to store.css or the store markup. Flag OFF → class absent →
   these never apply → the old theme serves. */
html.store-desktop-v2 {
  /* greens: old dark-forest → v2 brand */
  --g900: #0d6b47;   /* darkest accent → brand-deep */
  --g800: #14855a;   /* PRIMARY (header, buttons, prices) → v2 brand */
  --g700: #0d6b47;   /* → brand-deep */
  --g600: #14855a;
  --g500: #1a9e6d;
  /* light green fills → v2 brand-tint */
  --lite:  #e6f4ee;
  --lite2: #e6f4ee;
  /* neutrals → v2 ink / muted / faint / line */
  --ink:  #16211b;
  --ink2: #6b7a72;
  --mute: #9aa8a0;
  --mute2: #e5e9e7;
  /* page background → v2 light */
  --bg: #f2f4f3;
  /* v2 deal accent (orange) — NEW tokens the DV2 card anatomy (discount badges / struck prices) reads.
     Additive: store.css has no --deal, so nothing else is affected until DV2 uses them. */
  --deal: #e8541e;
  --deal-tint: #fdeee7;
  --star: #f5a623;
}
/* The green page gutter around the phone frame (store.css sets body bg to --g800 at >520px, and #shell
   sits on --g800) reads too dark against the v2 light theme — soften the desktop gutter to the v2 bg so
   the whole viewport feels like the market page, not a dark frame. Phone (<=520px) already uses --bg. */
@media (min-width: 521px) {
  html.store-desktop-v2 body { background: var(--bg); }
}

/* ── DV2: v2 CARD ANATOMY at ALL widths ─────────────────────────────────────────────────────────
   Restyle the store's existing .pc product card to the design's .p-card (Henmack Store Live.html
   lines 149-193) — CSS only, no markup change, so flag OFF is byte-identical. Headline (chief's note):
   the PRICE is INK, not green. The design's extra rows (struck old-price, ★rating·sold, deal -NN%
   badge, VERIFIED pill) need fields the public store feed does NOT expose (no old_price/rating/sold/
   verified — same gap store-hero.js documents) → omitted honestly here; they light up on the SB
   marketplace (S6) once that data surface exists. The on-card description/spec are hidden for the
   dense market look (the full description stays on the product-detail tap); reversible with the flag. */
html.store-desktop-v2 .pc { border-radius: 10px; }
html.store-desktop-v2 .pc:hover { box-shadow: 0 8px 24px -8px rgba(22,33,27,.25); transform: translateY(-2px); }
html.store-desktop-v2 .pc .img { font-size: 48px; }   /* emoji placeholder size per the design */
html.store-desktop-v2 .pc .info { padding: 7px 9px 9px; gap: 3px; }
html.store-desktop-v2 .pc .name {
  font-size: 11.5px; font-weight: 500; line-height: 1.35; color: #37423c;
  white-space: normal;                                  /* was nowrap/ellipsis → the design clamps to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 31px;
}
html.store-desktop-v2 .pc .price {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  color: var(--ink);                                    /* chief: INK, not green (the DV1 theme left it green) */
  font-family: inherit;                                 /* the design price is sans, not the mono the store used */
}
/* Dense market card — hide the on-card description + spec (not present on the design tile); the full
   description is still on the product detail. Reversible: flag OFF → these show again. */
html.store-desktop-v2 .pc .prod-desc,
html.store-desktop-v2 .pc .prod-spec { display: none; }

/* ── DV4: DENSE responsive grid (design 2/3/5-col) ──────────────────────────────────────────────
   The design grid is 2-col with an 8px gap on phone (denser than store.css's 12px), 3-col ≥768, 5-col
   ≥1024 (the 5-col already lands in the ≥1024 block below). Henry's "v2 at all widths" supersedes the
   S2 byte-identical-<1024 ruling, so the phone density + the 768 band are now in scope. Flag-gated. */
html.store-desktop-v2 .grid { gap: 8px; }
html.store-desktop-v2 .cat-body { padding: 8px; }   /* design phone page padding is 8px (was 16px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  html.store-desktop-v2 .grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  html.store-desktop-v2 .cat-body { padding: 16px 20px; }
  /* S-G5 (WO-STORE-DESKTOP-V2-FINISH, chief c565/c566 order): DV4 goes 3-col ≥768, but #shell stayed the
     480 phone frame until ≥1024 — so the 3-col grid was crammed into 480 at 800. Open #shell in the tablet
     band too (bounded 900, same green gutter as the ≥1024 desktop) so the 3 columns have room. The ≥1024
     rule (max-width 1200) overrides this at desktop; phone (<768) is untouched. */
  html.store-desktop-v2 #shell {
    width: 100%; max-width: 900px;
    box-shadow: 0 0 0 100vmax var(--g800);
    clip-path: inset(0 -100vmax);
  }
}

/* ── DV3: HERO to v2 gradient ────────────────────────────────────────────────────────────────────
   store-hero.js (SB5b) hardcodes a DARKER forest gradient (#14563c→#0f3d2e→#0c2f23) that reads cold
   against the v2 light theme (chief note). Override #sf-hero to the design's exact brand gradient
   (Henmack Store Live.html .st-header: linear-gradient(160deg,#14855a,#0d6b47)). CSS-only + flag-gated
   → store-hero.js untouched, flag OFF = the original hero. The translucent-white hero buttons + green
   badge read correctly on both gradients, so only the background changes. (Chat/Follow/Share button
   ORDER — the design's sequence — only matters once store_follow flips ON; it's currently OFF, so the
   live hero is Chat·Share; folded into the follow-button insert position when that flag goes live.) */
html.store-desktop-v2 #sf-hero {
  background: linear-gradient(160deg, #14855a, #0d6b47);
}

@media (min-width: 1024px) {
  /* DV2 desktop bumps (design: .p-name 12.5px/min-h 34, .p-price 16px, .p-card radius 12). */
  html.store-desktop-v2 .pc { border-radius: 12px; }
  html.store-desktop-v2 .pc .info { padding: 9px 11px 11px; }
  html.store-desktop-v2 .pc .name { font-size: 12.5px; min-height: 34px; }
}

@media (min-width: 1024px) {
  /* Open the phone frame to a centred wide page. #shell is the 480px column in store.css;
     here it becomes the 1200px marketplace wrapper. overflow stays hidden so the absolute
     .scr screens still fill it; min-height:100dvh (store.css) keeps it full-height. */
  html.store-desktop-v2 #shell {
    width: 100%;
    max-width: 1200px;
    box-shadow: 0 0 0 100vmax var(--g800);   /* the green gutter the phone frame used to imply */
    clip-path: inset(0 -100vmax);
  }

  /* Header spans the wider shell with roomier padding + a slightly larger business name. */
  html.store-desktop-v2 .storefront-hdr {
    padding: 28px 32px;
  }
  html.store-desktop-v2 .sf-biz-name { font-size: 26px; }
  html.store-desktop-v2 .sf-biz-sub  { font-size: 13px; }

  /* Catalog body: more breathing room, content capped so cards don't stretch edge-to-edge. */
  html.store-desktop-v2 .cat-body {
    padding: 24px 32px 40px;
  }

  /* The product grid goes 2-col → 5-col (design's desktop density). Gap grows to match. */
  html.store-desktop-v2 .grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  /* Cards read a touch larger on desktop; the hover lift already lives in store.css (.pc:hover). */
  html.store-desktop-v2 .pc { border-radius: 18px; }
  html.store-desktop-v2 .pc .name  { font-size: 14px; }
  html.store-desktop-v2 .pc .price { font-size: 14px; }

  /* Search/category filter bar aligns to the wider content width. */
  html.store-desktop-v2 .cat-body > div:first-child { max-width: 1136px; margin-left: auto; margin-right: auto; }
}

/* NOTE: no rule below 1024px, on purpose. Chief ruling (07-06) draws the line at 1024px: the
   existing store page stays BYTE-IDENTICAL below 1024px (Henry rule #1). The design's 768px
   3-col tablet band is deliberately NOT adopted here so no sub-1024 pixel ever shifts. */

/* ── DV5: CART / CHECKOUT / RECEIVED panels to v2 (buttons·fields·steppers·pills) ─────────────────
   The cart/checkout/confirmation surfaces are variable-driven, so DV1's token override ALREADY recolors
   most of them (headings, text, backgrounds). Two things the cascade CANNOT reach, fixed here:
   (1) store.css redeclares .btn-p/.btn-g LATER with HARDCODED old-forest hex (#0A3D2E/#0F5A43) — an
       unscoped rule that beats DV1's --g800 var for EVERY store button (cart, checkout, confirmation).
       These flag-scoped rules (higher specificity) reclaim the v2 brand green.
   (2) input focus uses --acc2 (old teal, not in the DV1 override) → point it at the brand.
   Plus the v2 shape language: pill buttons + pill order-number + pill qty stepper + flat 12px fields.
   Colour/shape only; the bottom-sheet→slide-over structural change is DV5b (parked, bigger risk). */
html.store-desktop-v2 .btn-p { background: var(--g800); color: var(--white); }
html.store-desktop-v2 .btn-p:hover { background: var(--g700); }
html.store-desktop-v2 .btn-g { color: var(--g700); }
html.store-desktop-v2 .btn-p, html.store-desktop-v2 .btn-g { border-radius: 999px; }
html.store-desktop-v2 #btn-conf-share-wa { background: #1fae54; color: #fff; }   /* v2 WhatsApp-brand green */
html.store-desktop-v2 input:focus,
html.store-desktop-v2 textarea:focus { border-color: var(--g800); }
html.store-desktop-v2 input[type=tel], html.store-desktop-v2 input[type=text],
html.store-desktop-v2 input[type=email], html.store-desktop-v2 textarea { border-radius: 12px; }
html.store-desktop-v2 .conf-num { border-radius: 999px; }
html.store-desktop-v2 .qty-ctl button { border-radius: 999px; border: none; background: var(--lite2); }

/* ── S-G1 (WO-STORE-DESKTOP-V2-FINISH, chief c564 — reuse of the SB G1 drawer pattern, commit 41f6a414):
   on desktop the CART + CHECKOUT modals become a 420px RIGHT-SIDE slide-over DRAWER (README: the
   cart/checkout slide-over is a "420px right drawer with shadow" over the scrim ≥1024). The base
   `.modal` (fixed dim scrim) + `.sheet` (bottom-sheet, slides up) already exist — here they anchor to
   the right, full-height, slide in FROM THE RIGHT. Flag(html.store-desktop-v2)+width(≥1024) gated, so
   the phone bottom-sheet is byte-identical. Scoped to #cart-modal/#checkout-modal only — the pack /
   variant pickers keep their bottom-sheet look. #id selectors out-specify the base `.modal`/`.sheet`. ── */
@keyframes sd-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (min-width: 1024px) {
  html.store-desktop-v2 #cart-modal.modal,
  html.store-desktop-v2 #checkout-modal.modal { align-items: stretch; justify-content: flex-end; }
  html.store-desktop-v2 #cart-modal .sheet,
  html.store-desktop-v2 #checkout-modal .sheet {
    width: 420px; max-width: 420px; height: 100dvh; max-height: 100dvh;
    border-radius: 0; box-shadow: -16px 0 48px -12px rgba(3,12,8,.45);
    animation: sd-drawer-in .24s ease-out;
  }
}

/* ── S-G2 (WO-STORE-DESKTOP-V2-FINISH, chief c562/c565): desktop-polish the STORE HERO. The frame-05
   hero (sf-hero, store-hero.js) SUPERSEDES .storefront-hdr, but the earlier DV desktop bumps targeted the
   now-hidden .sf-biz-name — so on PC the hero rendered at phone scale. Bump it per Henmack Store Live:
   bounded content in the 1200 wrap (24px gutters), a 64→72px logo, larger name, and Chat/Share actions
   that don't stretch edge-to-edge.
   NOTE on the rest of S-G2 (already handled honestly, no new markup — chief c565(c) honest-omit + "no
   hollow placeholders"): CART = the existing #cart-fab (S-G4 gives it the desktop pill); STATS = the
   product-count is already in the hero meta line and rating/orders/%-positive are honest-omitted (no feed
   data) — a 1-stat "stats bar" would be a hollow placeholder, so none is added; VERIFIED = renders
   honest-omit today via store-hero.js _isVerified (lights up when the backend exposes verified/kyc). ── */
@media (min-width: 1024px) {
  html.store-desktop-v2 #sf-hero { padding: 24px 32px 26px; }
  html.store-desktop-v2 .sf-hero__id { max-width: 1136px; margin: 0 auto; }
  html.store-desktop-v2 .sf-hero__logo { width: 72px; height: 72px; font-size: 28px; }
  html.store-desktop-v2 .sf-hero__name { font-size: 24px; }
  html.store-desktop-v2 .sf-hero__meta { font-size: 13px; }
  html.store-desktop-v2 .sf-hero__actions {
    max-width: 1136px; margin-left: auto; margin-right: auto; justify-content: flex-start;
  }
  html.store-desktop-v2 .sf-hero__btn { flex: 0 0 auto; min-width: 150px; }
}

/* ── S-G4 (WO-STORE-DESKTOP-V2-FINISH, chief c565(b)): desktop CORNER-SWAP + the cart becomes a floating
   PILL. The cart FAB (a bottom-LEFT circle on phone, store.css) moves bottom-RIGHT and widens to a
   labelled "View cart" pill (README: floating cart pill bottom-right on desktop); the seller WhatsApp
   button (bottom-RIGHT on phone, mounted by whatsapp-support-button.js with inline right:16) moves
   bottom-LEFT — so the two never collide on desktop. Phone (<1024) is byte-identical: cart circle left +
   WhatsApp right already coexist. CSS-only (no markup/JS); the label is a ::after so nothing shows on
   phone/flag-off; the WhatsApp override needs !important to beat the lib's inline right:16px. ── */
@media (min-width: 1024px) {
  html.store-desktop-v2 .cart-fab {
    left: auto; right: 24px; bottom: 24px;
    width: auto; height: auto; min-height: 52px; padding: 0 22px 0 20px;
    border-radius: 999px; gap: 9px; font-size: 15px; font-weight: 800;
    box-shadow: 0 10px 30px -6px rgba(3,12,8,.45);
  }
  html.store-desktop-v2 .cart-fab::after { content: 'View cart'; font-size: 14px; font-weight: 800; }
  /* seller WhatsApp FAB -> bottom-left (lib sets inline right:16px, so override with !important) */
  html.store-desktop-v2 a[aria-label="Chat with seller"] { left: 20px !important; right: auto !important; }
}