/**
 * store-sb-skin.css — WO-STORE-SB-UNIFIED-DESIGN (Henry 2026-07-10).
 *
 * WHAT (in 3 lines): dresses the public customer store (giobiz.app/s/<slug>) in the SAME design
 * language as Smart Business (the .mk-* market look) — green pill header, rounded category chips,
 * market-style product cards, deal-orange bulk badge. A SKIN: colours + component look, no re-layout.
 *
 * WHY: Henry (07-10) — "current store design is poor; give it THE SAME CSS DESIGN as Smart Business",
 * on phone AND desktop. The purchase flow (cart / checkout / pricing math) is byte-untouched.
 *
 * TWO GUARANTEES that keep the store safe (mirror store-desktop-v2.css's discipline):
 *   1. EVERY selector is scoped under `html.store-sb-skin` — the class is added ONLY when the
 *      `store_sb_skin` feature flag is ON (store.boot.js reads /api/config/flags on boot). Flag OFF →
 *      class absent → not one rule here matches → the store serves exactly as it does today.
 *   2. It is a separate additive stylesheet, linked AFTER store.css AND store-desktop-v2.css, so where
 *      it overlaps store-desktop-v2 (both use the SAME v2 green palette) it wins on equal specificity
 *      by source order — the two compose: this = the SB *look* (all widths); store_desktop_v2 = the
 *      wide ≥1024px column grid. Either flag alone works; both together = wide SB market page.
 *
 * NOT a width gate (unlike store-desktop-v2.css): a look, not a layout — it applies at ALL widths.
 * The SB pixel source is public/smartbusiness.html's html.sb-v2-full .mk-* block (tokens copied to match).
 *
 * SLICES (chief-approved §5 of JASON_DESIGNMAP_STORE_SB_07102026.md):
 *   S1 — tokens + header (green gradient hero + white pill search)
 *   S2 — card grid (.pc → the .mk-card look)
 *   S3 — chips (.sf-cat-chip → the SB rounded chip)
 *   S4 — price / sold / MOQ (ink price, deal-orange bulk badge)
 *
 * History:
 *   2026-07-10 — S1 tokens + header. One feature, one file (BOMSHELL Rule 1.2).
 *   2026-07-10 — S2 card grid (.pc → the .mk-card look).
 *   2026-07-10 — S3 chips (.sf-cat-chip → the SB rounded chip).
 *   2026-07-10 — S4 price / sold / MOQ (ink price, deal-orange bulk badge).
 */

/* ── S1a: v2 TOKENS at ALL widths (colour only) ─────────────────────────────────────────────────
   Redefining store.css's CSS variables on html.store-sb-skin (specificity 0,1,1 > :root's 0,1,0)
   swaps the whole palette from the old dark-forest green (#0A3D2E) to the Smart-Business market
   green (#14855a) + light page bg (#f2f4f3), with zero changes to store.css or the store markup.
   Every variable-driven surface (cards, text, chips, buttons, prices, cart/checkout) recolours from
   this ONE block. Values are the SB html.sb-v2-full tokens (smartbusiness.html) verbatim. Flag OFF →
   class absent → these never apply → the old theme serves. */
html.store-sb-skin {
  /* greens: old dark-forest → SB market brand */
  --g900: #0d6b47;   /* darkest accent → brand-deep */
  --g800: #14855a;   /* PRIMARY (header, buttons, prices) → SB brand green */
  --g700: #0d6b47;   /* → brand-deep */
  --g600: #14855a;
  --g500: #1a9e6d;
  /* light green fills → SB brand-tint */
  --lite:  #e6f4ee;
  --lite2: #e6f4ee;
  /* neutrals → SB ink / muted / faint / line */
  --ink:  #16211b;
  --ink2: #6b7a72;
  --mute: #9aa8a0;
  --mute2: #e5e9e7;
  /* page background → SB light */
  --bg: #f2f4f3;
  /* SB deal accent (orange) — the S4 bulk/MOQ badge reads these. Additive: store.css has no --deal. */
  --deal: #e8541e;
  --deal-tint: #fdeee7;
  --star: #f5a623;
}
/* The green page gutter around the 480px phone frame (store.css sets body bg to --g800 above 520px,
   and #shell sits on --g800) reads too dark against the SB light theme — soften the desktop gutter to
   the SB light bg. Phone (≤520px) already uses --bg (store.css @media), so it is unaffected. */
@media (min-width: 521px) {
  html.store-sb-skin body { background: var(--bg); }
}

/* ── S1b: HEADER — the SB green pill header on the store's REAL header (#sf-hero) ─────────────────
   NOTE (source-verified): the store's visible header is #sf-hero (store-hero.js mounts it above
   .storefront-hdr and HIDES the latter). So the skin dresses #sf-hero, NOT the hidden .storefront-hdr.
   The hero already puts the VENDOR identity first (logo + name + meta) — chief Q7: vendor identity
   stays PRIMARY; the skin only brightens the gradient to the SB brand one (was the darker forest
   #14563c→#0f3d2e→#0c2f23) and tidies the action buttons. store-hero.js is untouched (CSS-only). */
html.store-sb-skin #sf-hero {
  background: linear-gradient(160deg, #14855a, #0d6b47);
}
/* The translucent-white hero action buttons (Chat / Share) already read correctly on the brand
   gradient; only nudge their radius to the SB 12px pill-ish shape for consistency. */
html.store-sb-skin .sf-hero__btn { border-radius: 12px; }

/* ── S1c: SEARCH — the SB white pill search ──────────────────────────────────────────────────────
   The store's #sf-search-input sits in the light .cat-body (an in-store search, below the header —
   restyle in place, no markup move). SB's .mk-search is a white rounded pill; give the input the same
   pill shape + a little more breathing room, then send focus to the SB brand green.

   WHY !important: the input carries an INLINE style attribute in store.html
   (style="…border-radius:var(--r-sm);…padding:0 14px;border:1.5px solid var(--mute2);…"). An inline
   style outranks any class-scoped rule, so the skin's pill/padding is only applied with !important —
   the same justified pattern used for the inline-styled -N% badge in S4. (The white background + the
   SB-line border colour need no override: the inline values are var(--white)/var(--mute2), which the
   S1 token block already resolves to the SB white + line, so they're correct as-is.) */
html.store-sb-skin #sf-search-input {
  border-radius: 999px !important;   /* pill — beats the inline border-radius:var(--r-sm) */
  padding: 0 18px !important;        /* a touch more room for the pill shape */
}
html.store-sb-skin #sf-search-input:focus {
  border-color: #14855a !important;  /* SB brand focus — beats the inline border shorthand */
}

/* ── S2: PRODUCT CARD GRID — the store's .pc card → the SB .mk-card look ──────────────────────────
   Restyle the EXISTING .pc card (store.boot.js renderProductCard) to the market-style .mk-card
   (smartbusiness.html): tighter rounded white card on a soft line, dense 2-col grid, square image
   tile on a light tint, a 2-line clamped name. CSS-only — same DOM roles, no markup change — so the
   flag OFF is byte-identical. The dense-market look hides the on-card description + spec (the full
   description stays on the product tap), matching the SB tile; reversible with the flag. Price / sold
   / MOQ are the S4 slice. This mirrors the SB .mk-card anatomy (smartbusiness.html .mk-card block). */
html.store-sb-skin .cat-body { padding: 12px; }
html.store-sb-skin .grid { gap: 8px; }                       /* SB .mk-grid density (was 12px) */
html.store-sb-skin .pc {
  border-radius: 10px;
  border: 1px solid #e5e9e7;
  box-shadow: 0 1px 3px rgba(22, 33, 27, .06);
}
html.store-sb-skin .pc:hover {
  box-shadow: 0 8px 24px -8px rgba(22, 33, 27, .22);
  transform: translateY(-2px);
}
html.store-sb-skin .pc .img {
  aspect-ratio: 1 / 1;                                       /* fixed 1:1 tile — matches SB .mk-card__img; no tall-image blow-up */
  background-color: #eef4f1;                                 /* SB .mk-card__img tint (longhand — do NOT use the `background:`
                                                                shorthand here: it would RESET background-size/position and
                                                                drop the base .pc .img cover fill, rendering a native top-left crop) */
  background-size: cover;                                    /* re-assert cover fill (the skin rule out-specifies base .pc .img) */
  background-position: center;                               /* centre the crop like the marketplace tile */
  overflow: hidden;                                          /* clip any child (type badge) to the square, mirror mk-card__img */
  font-size: 46px;                                           /* emoji placeholder per the design */
}
html.store-sb-skin .pc .info { padding: 7px 9px 9px; gap: 2px; }
html.store-sb-skin .pc .name {
  font-size: 11.5px; font-weight: 500; line-height: 1.35; color: #37423c;
  white-space: normal;                                       /* was nowrap/ellipsis → SB clamps to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 31px;
}
/* Dense market card — hide the on-card description + spec (not on the SB tile); the full description
   is still on the product tap. Reversible: flag OFF → these show again. */
html.store-sb-skin .pc .prod-desc,
html.store-sb-skin .pc .prod-spec { display: none; }

/* ── S3: CATEGORY CHIPS — the store's .sf-cat-chip → the SB rounded chip ──────────────────────────
   Chief Q1 ruling: RESTYLE the store's existing category filter as SB-style chips — NO fake segment
   tabs (a single store has only its own categories, not the cross-vendor segments SB shows). So this
   dresses .sf-cat-chip (rendered by store-filter.js into #sf-cat-filter) to the SB .mk-chip look:
   a fully-rounded pill, white surface on a soft line, muted label; the active chip fills SB brand
   green with white text. Layout (the horizontal scroller, the JS show/hide of #sf-cat-filter) is left
   alone — appearance only — so nothing about the filter's behaviour changes. */
html.store-sb-skin .sf-cat-chip {
  border-radius: 999px;
  border: 1px solid #e5e9e7;
  background: #ffffff;
  padding: 8px 16px;
  color: #6b7a72;
  font-weight: 600;
}
html.store-sb-skin .sf-cat-chip.on {
  border-color: #14855a;
  background: #14855a;
  color: #ffffff;
  font-weight: 700;
}

/* ── S4: PRICE / SOLD / MOQ — the SB .mk-card price row + deal-orange bulk badge ──────────────────
   The store's .pc card ALREADY builds the same data the SB card shows — price, struck anchor price,
   -N% deal badge, "N sold" (store.boot.js renderProductCard) — so S4 is a RESTYLE, not new data.

   Price → the SB .mk-card__price: INK (not the store's green var(--g700)) + sans (not the store's
   mono) + bolder. The struck old-price <s> is inline-styled with color:var(--mute), which the S1
   token block already resolves to the SB faint #9aa8a0 — so it needs no override here. */
html.store-sb-skin .pc .price {
  color: var(--ink);          /* SB: INK, not green */
  font-family: var(--font);   /* SB price is sans, not the store's mono */
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
}
/* The -N% deal badge is an inline-styled <b> inside .price (renderProductCard hardcodes a red
   #dc2626 pill). SB uses the deal-orange accent — recolour it (inline style → needs !important).
   White text is already inline; only the fill + radius move to the SB deal look. */
html.store-sb-skin .pc .price b {
  background: #e8541e !important;   /* SB --deal */
  border-radius: 4px !important;
}

/* MOQ / bulk badge → the SB deal-orange. store-segment-chips.js styles the card's bulk badge
   (.sf-seg-flag--bulk, the "MIN.ORDER N" corner pill) amber #f0b43c. Chief Q3: the store feed DOES
   carry min_order + segment (backend/src/store-public-routes.js emits segment + minOrder), so the
   pill genuinely renders on bulk_sales products — hang it in the SB deal-orange (matches .mk-card__moq
   / .mk-off). Absent segment/min_order → the badge simply isn't built (honest-omit, unchanged). */
html.store-sb-skin .sf-seg-flag--bulk {
  background: #e8541e;
  color: #ffffff;
}