/* ══════════════════════════════════════════════════════════════════════════
   STOREFRONT (Store S1) — FIX_STOREFRONT_S1_2026_07_06
   Customer-facing shoppable storefront DISPLAY route. Built section-by-section
   TO design_samples/store/storefront_shoppable_v1.html (the SPEC). ALL catalogue/
   category/stock data is READ from the shipped inventory engine (DAL.getItems /
   DAL.deriveOnHand / DAL.getItem) — the sample's mock PRODUCTS/CATS are NOT ported.
   HARD GUARDRAIL: the sample uses generic class names (.header/.hero/.btn/.view/
   .toast/.pcard/.wrap/.trust/...) that WOULD collide with app chrome, so EVERY rule
   below is descendant-scoped under `#page-storefront ` and the sample's :root design
   tokens are converted to `--sf-*` scoped on #page-storefront (no bare :root leak).
   S1 = home + PLP + PDP + client-side cart accumulation. Cart-view render + checkout
   are S2 (NOT built here). No writes; read-only consumer of the inventory engine.
   ══════════════════════════════════════════════════════════════════════════ */
#page-storefront{
  --sf-brand:#0d7a8f; --sf-brand-dark:#0a5e6e; --sf-brand-deep:#083f4a;
  --sf-brand-light:#e6f4f7; --sf-brand-tint:#f3fafb; --sf-accent:#14b8a6;
  --sf-accent-2:#2563eb; --sf-ink:#0f2730; --sf-ink-2:#3d5560; --sf-muted:#6b8189;
  --sf-line:#e2eaed; --sf-line-2:#eef3f5; --sf-bg:#f5f8f9; --sf-white:#ffffff;
  /* FIX_MENUS_READABLE_EVERY_SURFACE_2026_09_20 -- a SECOND light-theme surface, found
     during render-verify, not by the brief's own census (which checked .plan-viewer-export-host,
     @media print, and staff-app, but not this page). The sibling FIX_DISABLED_LEGIBILITY_LIGHTSCOPE_2026_07_26
     comment immediately below already independently confirms this page's surfaces are white/near-white
     and that :root's DARK-theme tokens inheriting in here was ALREADY a known hazard for a different
     property (disabled-control fill/label). The identical hazard applies to color-scheme: the app-wide
     `color-scheme: dark;` added at :root above (FIX_MENUS_READABLE_EVERY_SURFACE_2026_09_20) would
     otherwise inherit here too, painting native <select> popups DARK against this page's light closed
     faces (measured: #page-storefront .sort-select select has its own scoped background:#fff / color:
     var(--sf-ink) for the CLOSED face, at (1,1,1) specificity, but no scoped `option` rule of its own --
     so the new base fallback rule (0,0,2) would apply DARK styling to just the OPEN popup, a jarring
     light-face/dark-popup mismatch this page never had before). Same remedy as
     .plan-viewer-export-host: counter-declare color-scheme: light on this page's own wrapper. */
  color-scheme: light;
  /* FIX_DISABLED_LEGIBILITY_LIGHTSCOPE_2026_07_26 (F-1) — light-surface override of the
     global disabled-control tokens. The :root pair is a DARK-theme pair and inherits into
     every scope; on this page's white/near-white surfaces it rendered at ~1.4:1. Local
     rule: the flattened fill is this scope's line neutral, the label is its secondary ink.
     Asserted by tools/disabled_contrast_scan.js, not by eye. */
  --disabled-ink:var(--sf-ink-2); --disabled-surface:var(--sf-line);
  --sf-ok:#16a34a; --sf-ok-bg:#e7f6ec; --sf-warn:#d97706; --sf-warn-bg:#fdf2e2;
  --sf-danger:#dc2626; --sf-danger-bg:#fdeaea; --sf-price:#0a5e6e; --sf-retail:#9aabb1;
  --sf-shadow-sm:0 1px 2px rgba(8,63,74,.06),0 1px 3px rgba(8,63,74,.05);
  --sf-shadow-md:0 4px 14px rgba(8,63,74,.08),0 2px 6px rgba(8,63,74,.05);
  --sf-shadow-lg:0 14px 40px rgba(8,63,74,.12);
  --sf-radius:14px; --sf-radius-sm:10px;
  /* FIX_P2A2TYPE_2026_07_06 — body type rewired to var() with shipped literal as fallback (parity-safe). */
  font-family:var(--sf-font-body,'Inter',system-ui,-apple-system,sans-serif);
  color:var(--sf-ink); background:var(--sf-bg); line-height:var(--sf-line-height,1.5);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
#page-storefront *{box-sizing:border-box}
#page-storefront .wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 32px}
#page-storefront .hidden{display:none!important}

/* ============ TOP UTILITY BAR ============ */
#page-storefront .utilbar{background:var(--sf-brand-deep);color:#cfe7ec;font-size:12.5px}
#page-storefront .utilbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
#page-storefront .utilbar .u-left{display:flex;gap:22px;align-items:center}
#page-storefront .utilbar .u-left span{display:flex;align-items:center;gap:6px}
#page-storefront .utilbar .u-right{display:flex;gap:20px;align-items:center}
#page-storefront .utilbar a:hover{color:#fff}
#page-storefront .util-ico{width:14px;height:14px;opacity:.85}

/* ============ HEADER ============ */
#page-storefront .header{background:var(--sf-white);border-bottom:1px solid var(--sf-line);position:sticky;top:0;z-index:60;box-shadow:var(--sf-shadow-sm)}
#page-storefront .header-main{display:flex;align-items:center;gap:28px;height:78px}
#page-storefront .logo{display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0}
#page-storefront .logo-mark{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,var(--sf-brand) 0%,var(--sf-accent) 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(13,122,143,.3)}
#page-storefront .logo-text{line-height:1.05}
/* FIX_P2A2TYPE_2026_07_06 — display font rewired to var() with shipped 'Manrope' fallback (parity-safe). */
#page-storefront .logo-text .lt-1{font-family:var(--sf-font-display,'Manrope');font-weight:800;font-size:20px;color:var(--sf-brand-deep);letter-spacing:-.02em}
#page-storefront .logo-text .lt-2{font-size:10.5px;font-weight:600;color:var(--sf-muted);letter-spacing:.14em;text-transform:uppercase}
#page-storefront .searchbar{flex:1;max-width:640px;position:relative}
#page-storefront .searchbar input{width:100%;height:48px;border:1.5px solid var(--sf-line);border-radius:26px;padding:0 52px 0 22px;font-size:14.5px;background:var(--sf-bg);transition:.15s;color:var(--sf-ink)}
#page-storefront .searchbar input:focus{outline:none;border-color:var(--sf-brand);background:#fff;box-shadow:0 0 0 4px rgba(13,122,143,.1)}
#page-storefront .searchbar .s-btn{position:absolute;right:5px;top:5px;width:38px;height:38px;border-radius:50%;background:var(--sf-brand);display:flex;align-items:center;justify-content:center;transition:.15s}
#page-storefront .searchbar .s-btn:hover{background:var(--sf-brand-dark)}
#page-storefront .searchbar .s-btn svg{width:18px;height:18px}
#page-storefront .header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#page-storefront .hact{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 14px;border-radius:10px;transition:.15s;position:relative;color:var(--sf-ink-2)}
#page-storefront .hact .hact-lbl{font-size:11.5px;font-weight:600}
#page-storefront .cart-count{position:absolute;top:2px;right:6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--sf-accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(20,184,166,.4)}

/* ============ ACCOUNT PILL ============ */
#page-storefront .acct-pill{display:flex;align-items:center;gap:11px;padding:7px 15px 7px 9px;border-radius:12px;background:var(--sf-brand-light);border:1px solid #cfe7ec;cursor:pointer;transition:.15s}
#page-storefront .acct-av{width:34px;height:34px;border-radius:9px;background:var(--sf-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
#page-storefront .acct-info{line-height:1.15}
#page-storefront .acct-info .a-1{font-size:12.5px;font-weight:700;color:var(--sf-brand-deep)}
#page-storefront .acct-info .a-2{font-size:10.5px;font-weight:600;color:var(--sf-brand-dark);display:flex;align-items:center;gap:5px}
#page-storefront .trade-dot{width:6px;height:6px;border-radius:50%;background:var(--sf-accent)}

/* ============ CATEGORY NAV ============ */
#page-storefront .catnav{background:var(--sf-white);border-bottom:1px solid var(--sf-line);position:sticky;top:78px;z-index:55}
#page-storefront .catnav .wrap{display:flex;align-items:center;gap:2px;height:52px;overflow-x:auto}
#page-storefront .catnav-item{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--sf-ink-2);white-space:nowrap;transition:.15s;cursor:pointer}
#page-storefront .catnav-item.all{background:var(--sf-brand);color:#fff;font-weight:700}
#page-storefront .catnav-item.all:hover{background:var(--sf-brand-dark);color:#fff}
#page-storefront .catnav-spacer{flex:1}
#page-storefront .catnav-promo{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sf-accent);white-space:nowrap}

/* ============ BREADCRUMB ============ */
#page-storefront .breadcrumb{padding:16px 0 4px;font-size:13px;color:var(--sf-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#page-storefront .breadcrumb a{color:var(--sf-brand);font-weight:500;cursor:pointer}
#page-storefront .breadcrumb .sep{opacity:.5}

/* ============ VIEW SYSTEM (sub-view switcher INSIDE the one app page) ============ */
#page-storefront .view{display:none;padding-bottom:60px}

/* ============ HERO ============ */
#page-storefront .hero{background:linear-gradient(115deg,var(--sf-brand-deep) 0%,var(--sf-brand) 55%,var(--sf-accent) 130%);color:#fff;position:relative;overflow:hidden;margin-top:0}
#page-storefront .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.14),transparent 42%),radial-gradient(circle at 12% 90%,rgba(20,184,166,.3),transparent 50%);}
#page-storefront .hero-bubbles{position:absolute;inset:0;opacity:.5}
#page-storefront .hero-bubbles span{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.14)}
#page-storefront .hero-bubbles span:nth-child(1){width:220px;height:220px;right:8%;top:-40px}
#page-storefront .hero-bubbles span:nth-child(2){width:120px;height:120px;right:20%;bottom:-30px}
#page-storefront .hero-bubbles span:nth-child(3){width:80px;height:80px;left:40%;top:30px;background:rgba(255,255,255,.05)}
#page-storefront .hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
#page-storefront .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:30px;font-size:12.5px;font-weight:600;letter-spacing:.03em;margin-bottom:20px;backdrop-filter:blur(4px)}
#page-storefront .hero-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 0 rgba(94,234,212,.6);animation:sfPulse 2s infinite}
#page-storefront .hero h1{font-size:var(--sf-fs-hero,46px);font-weight:800;letter-spacing:-.025em;margin-bottom:16px}
#page-storefront .hero h1 .em{color:#7dd3d8;background:linear-gradient(90deg,#5eead4,#7dd3fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#page-storefront .hero p{font-size:17px;color:rgba(255,255,255,.9);max-width:520px;margin-bottom:28px;line-height:1.55}
#page-storefront .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
#page-storefront .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;border-radius:11px;padding:14px 26px;transition:.16s;white-space:nowrap}
#page-storefront .btn-white{background:#fff;color:var(--sf-brand-deep);box-shadow:var(--sf-shadow-md)}
#page-storefront .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.3)}
#page-storefront .hero-stats{display:flex;gap:32px;margin-top:36px}
#page-storefront .hero-stat .hs-n{font-family:var(--sf-font-display,'Manrope');font-size:26px;font-weight:800;color:#fff}
#page-storefront .hero-stat .hs-l{font-size:12.5px;color:rgba(255,255,255,.75);font-weight:500}
#page-storefront .hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:24px;backdrop-filter:blur(10px);box-shadow:var(--sf-shadow-lg)}
#page-storefront .hero-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
#page-storefront .hero-card-top .hct-1{font-size:13px;font-weight:700;color:#fff}
#page-storefront .hero-card-top .hct-badge{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;background:#5eead4;color:var(--sf-brand-deep)}
#page-storefront .hero-mini{display:flex;align-items:center;gap:13px;padding:13px;background:rgba(255,255,255,.1);border-radius:12px;margin-bottom:10px}
#page-storefront .hero-mini-img{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
#page-storefront .hero-mini-info{flex:1;line-height:1.25}
#page-storefront .hero-mini-info .hm-1{font-size:13px;font-weight:600;color:#fff}
#page-storefront .hero-mini-info .hm-2{font-size:11px;color:rgba(255,255,255,.7)}
#page-storefront .hero-mini-price{text-align:right;line-height:1.2}
#page-storefront .hero-mini-price .hmp-r{font-size:11px;color:rgba(255,255,255,.55);text-decoration:line-through}
#page-storefront .hero-mini-price .hmp-t{font-size:15px;font-weight:800;color:#7dd3d8}

/* ============ TRUST STRIP ============ */
#page-storefront .trust{background:var(--sf-white);border-bottom:1px solid var(--sf-line)}
#page-storefront .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
#page-storefront .trust-item{display:flex;align-items:center;gap:14px;padding:22px 24px;border-right:1px solid var(--sf-line-2)}
#page-storefront .trust-item:last-child{border-right:none}
#page-storefront .trust-ico{width:44px;height:44px;border-radius:11px;background:var(--sf-brand-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-storefront .trust-txt .tt-1{font-size:14px;font-weight:700;color:var(--sf-ink)}
#page-storefront .trust-txt .tt-2{font-size:12.5px;color:var(--sf-muted)}

/* ============ TRADE WELCOME STRIP ============ */
#page-storefront .trade-strip{background:linear-gradient(100deg,var(--sf-brand-light),#f0fbfc);border:1px solid #cfe7ec;border-radius:16px;padding:20px 26px;display:flex;align-items:center;gap:22px;margin:32px 0}
#page-storefront .trade-strip-ico{width:52px;height:52px;border-radius:13px;background:var(--sf-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(13,122,143,.3)}
#page-storefront .trade-strip-txt{flex:1}
#page-storefront .trade-strip-txt .ts-1{font-size:16px;font-weight:800;color:var(--sf-brand-deep);margin-bottom:3px}
#page-storefront .trade-strip-txt .ts-2{font-size:13.5px;color:var(--sf-ink-2)}
#page-storefront .trade-strip-txt .ts-2 b{color:var(--sf-brand-dark)}
#page-storefront .trade-badge-lg{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-left:22px;border-left:1px solid #cfe7ec}
#page-storefront .trade-badge-lg .tbl-1{font-size:11px;font-weight:600;color:var(--sf-muted);text-transform:uppercase;letter-spacing:.06em}
#page-storefront .trade-badge-lg .tbl-2{font-size:var(--sf-fs-price,20px);font-weight:800;color:var(--sf-brand);font-family:var(--sf-font-display,'Manrope')}

/* ============ SECTION HEADING ============ */
#page-storefront .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin:44px 0 22px}
#page-storefront .sec-head .sh-l .shl-eyebrow{font-size:12.5px;font-weight:700;color:var(--sf-accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
#page-storefront .sec-head .sh-l h2{font-size:var(--sf-fs-h2,28px);font-weight:800;color:var(--sf-ink)}
#page-storefront .sec-head .sh-l p{font-size:14px;color:var(--sf-muted);margin-top:5px}
#page-storefront .sec-link{font-size:13.5px;font-weight:700;color:var(--sf-brand);display:flex;align-items:center;gap:6px;cursor:pointer}

/* ============ CATEGORY TILES ============ */
#page-storefront .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#page-storefront .cat-tile{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:22px;cursor:pointer;transition:.18s;position:relative;overflow:hidden}
#page-storefront .cat-tile-ico{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
#page-storefront .cat-tile h3{font-size:var(--sf-fs-h3,15.5px);font-weight:700;color:var(--sf-ink);margin-bottom:5px}
#page-storefront .cat-tile .ct-count{font-size:12.5px;color:var(--sf-muted);font-weight:500}
#page-storefront .cat-tile .ct-arrow{position:absolute;top:22px;right:22px;opacity:0;transition:.18s;color:var(--sf-brand);transform:translateX(-6px)}
#page-storefront .cat-tile:hover .ct-arrow{opacity:1;transform:translateX(0)}
/* FIX_POS_UNPRICED_2026_09_08 — the "Uncategorised" gap-to-fill note (§3.4) + the unpriced-item
   honesty badge (§3.3). Reuses the shipped warn tokens (var(--sf-warn)/--sf-warn-bg, already the
   stock-low badge colour) rather than a new one. No conditional-class rules here — the tile/chip/
   filter-row wrapper classes stay unconditional; see the FIX_POS_UNPRICED comments at each render
   site for why. */
#page-storefront .cat-gap-note{color:var(--sf-warn);font-weight:600;font-size:11px}
#page-storefront .unpriced-note{color:var(--sf-warn);font-weight:600}

/* ============ PRODUCT GRID / CARD ============ */
#page-storefront .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
#page-storefront .prod-grid.wide{grid-template-columns:repeat(5,1fr)}
/* FIX_STOREFRONT_EASY_2026_07_15 — real list-view layout (view-toggle 2nd button). Single-column
   rows with the card laid out horizontally (image rail + body). CSS-class mode over the SAME cards
   so no forked list renderer is needed. */
#page-storefront .prod-grid.list-view{grid-template-columns:1fr;gap:12px}
#page-storefront .prod-grid.list-view .pcard{flex-direction:row;align-items:stretch}
#page-storefront .prod-grid.list-view .pcard-img{width:150px;flex-shrink:0;aspect-ratio:1/1}
#page-storefront .prod-grid.list-view .pcard-body{flex:1}
#page-storefront .prod-grid.list-view .pcard-name{min-height:0}
#page-storefront .pcard{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column;position:relative}
#page-storefront .pcard-img{aspect-ratio:1.15/1;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
#page-storefront .pcard-img .prodtile{width:100%;height:100%}
#page-storefront .pcard-tag{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.02em;z-index:2}
#page-storefront .tag-best{background:#fef3c7;color:#92600e}
#page-storefront .tag-new{background:#dcfce7;color:#166534}
#page-storefront .tag-sale{background:#fee2e2;color:#991b1b}
#page-storefront .pcard-fav{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s;box-shadow:var(--sf-shadow-sm)}
#page-storefront .pcard-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
#page-storefront .pcard-cat{font-size:11px;font-weight:600;color:var(--sf-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
#page-storefront .pcard-name{font-size:14.5px;font-weight:700;color:var(--sf-ink);line-height:1.3;margin-bottom:4px;cursor:pointer;min-height:38px}
#page-storefront .pcard-meta{font-size:12px;color:var(--sf-muted);margin-bottom:11px}
#page-storefront .pcard-sku{font-size:var(--sf-fs-sku,11px);color:#a8bcc2;font-family:var(--sf-font-numeric,var(--sf-font-body,'Inter'));letter-spacing:.02em}
#page-storefront .stock-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;margin-bottom:11px;width:fit-content}
#page-storefront .stock-in{background:var(--sf-ok-bg);color:var(--sf-ok)}
#page-storefront .stock-low{background:var(--sf-warn-bg);color:var(--sf-warn)}
#page-storefront .stock-out{background:#f1f5f6;color:var(--sf-muted)}
#page-storefront .stock-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
#page-storefront .pcard-pricing{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
#page-storefront .price-block{line-height:1.15}
#page-storefront .price-retail{font-size:12.5px;color:var(--sf-retail);text-decoration:line-through;font-weight:500}
#page-storefront .price-trade{font-size:var(--sf-fs-price,20px);font-weight:800;color:var(--sf-price);font-family:var(--sf-font-display,'Manrope')}
#page-storefront .price-trade .unit{font-size:11.5px;font-weight:600;color:var(--sf-muted);-webkit-text-fill-color:var(--sf-muted)}
#page-storefront .price-tradelbl{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--sf-accent);background:#e6f7f4;padding:2px 7px;border-radius:5px;margin-top:3px;letter-spacing:.03em}
#page-storefront .pcard-add{width:40px;height:40px;border-radius:11px;background:var(--sf-brand);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
#page-storefront .pcard.out .pcard-img{opacity:.55;filter:grayscale(.4)}
#page-storefront .prodtile{display:flex;align-items:center;justify-content:center;position:relative}
#page-storefront .pt-icon{width:40%;height:40%;opacity:.9}

/* ============ PLP LAYOUT ============ */
#page-storefront .plp-layout{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:start;margin-top:12px}
#page-storefront .filters{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:6px 0;position:sticky;top:148px}
#page-storefront .filter-group{padding:18px 20px;border-bottom:1px solid var(--sf-line-2)}
#page-storefront .filter-group:last-child{border-bottom:none}
#page-storefront .filter-group h4{font-size:13.5px;font-weight:700;color:var(--sf-ink);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
#page-storefront .filter-opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px;color:var(--sf-ink-2)}
#page-storefront .fcheck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--sf-line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.12s}
#page-storefront .filter-opt.on .fcheck{background:var(--sf-brand);border-color:var(--sf-brand)}
#page-storefront .filter-opt.on .fcheck svg{opacity:1}
#page-storefront .filter-opt .fcount{margin-left:auto;font-size:11.5px;color:var(--sf-muted);font-weight:500}
#page-storefront .filter-opt.inert{opacity:.55;cursor:default}
#page-storefront .price-range{display:flex;align-items:center;gap:10px;margin-top:6px}
#page-storefront .price-range input{width:100%;height:38px;border:1.5px solid var(--sf-line);border-radius:9px;padding:0 12px;font-size:13px;color:var(--sf-ink)}
#page-storefront .price-range input:focus{outline:none;border-color:var(--sf-brand)}
#page-storefront .price-range .pr-dash{color:var(--sf-muted)}
#page-storefront .filter-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
#page-storefront .filter-chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;background:var(--sf-brand-light);color:var(--sf-brand-dark);cursor:pointer;transition:.12s}
#page-storefront .filter-clear{font-size:12.5px;font-weight:600;color:var(--sf-brand);cursor:pointer}
#page-storefront .plp-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;background:var(--sf-white);border:1px solid var(--sf-line);border-radius:12px;padding:12px 18px}
#page-storefront .plp-toolbar .pt-count{font-size:14px;color:var(--sf-ink-2)}
#page-storefront .plp-toolbar .pt-count b{color:var(--sf-ink);font-weight:700}
#page-storefront .plp-tools{display:flex;align-items:center;gap:14px}
#page-storefront .sort-select{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sf-ink-2);font-weight:500}
#page-storefront .sort-select select{border:1.5px solid var(--sf-line);border-radius:9px;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--sf-ink);background:#fff;cursor:pointer}
#page-storefront .sort-select select:focus{outline:none;border-color:var(--sf-brand)}
#page-storefront .view-toggle{display:flex;gap:2px;background:var(--sf-bg);border-radius:9px;padding:3px}
#page-storefront .view-toggle button{width:34px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--sf-muted)}
#page-storefront .view-toggle button.on{background:#fff;color:var(--sf-brand);box-shadow:var(--sf-shadow-sm)}

/* ============ PDP LAYOUT ============ */
#page-storefront .pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;margin-top:12px}
#page-storefront .pdp-main-img{aspect-ratio:1.1/1;border:1px solid var(--sf-line);border-radius:18px;overflow:hidden;position:relative;background:var(--sf-white)}
#page-storefront .pdp-main-img .pcard-tag{top:18px;left:18px}
#page-storefront .pdp-thumbs{display:flex;gap:12px;margin-top:14px}
#page-storefront .pdp-thumb{width:84px;height:84px;border:2px solid var(--sf-line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s}
#page-storefront .pdp-brand{font-size:12.5px;font-weight:700;color:var(--sf-accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
#page-storefront .pdp-info h1{font-size:var(--sf-fs-h1,30px);font-weight:800;color:var(--sf-ink);line-height:1.2;margin-bottom:12px}
#page-storefront .pdp-subrow{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
#page-storefront .pdp-sku{font-size:13px;color:var(--sf-muted);font-weight:500}
#page-storefront .pdp-rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sf-ink-2)}
#page-storefront .stars{display:flex;gap:1px;color:#f59e0b}
#page-storefront .pdp-desc{font-size:14.5px;color:var(--sf-ink-2);line-height:1.65;margin-bottom:22px}
#page-storefront .pdp-desc .draft-note{font-size:11.5px;color:var(--sf-muted);font-style:italic;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;background:var(--sf-brand-tint);border-radius:6px}
#page-storefront .pdp-desc .draft-note svg{width:13px;height:13px;color:var(--sf-brand)}
#page-storefront .pdp-price-card{background:var(--sf-brand-tint);border:1px solid var(--sf-line);border-radius:16px;padding:22px;margin-bottom:22px}
#page-storefront .pdp-price-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:6px}
#page-storefront .pdp-price-trade{font-size:var(--sf-fs-price-lg,36px);font-weight:800;color:var(--sf-price);font-family:var(--sf-font-display,'Manrope');line-height:1}
#page-storefront .pdp-price-trade .unit{font-size:15px;font-weight:600;color:var(--sf-muted)}
#page-storefront .pdp-price-retail{font-size:17px;color:var(--sf-retail);text-decoration:line-through;font-weight:500;padding-bottom:4px}
#page-storefront .pdp-save{font-size:12.5px;font-weight:700;color:var(--sf-ok);background:var(--sf-ok-bg);padding:4px 11px;border-radius:20px;margin-bottom:5px}
#page-storefront .pdp-trade-note{font-size:12.5px;color:var(--sf-brand-dark);display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:12px;border-top:1px dashed #cfe7ec}
#page-storefront .variant-group{margin-bottom:22px}
#page-storefront .variant-group .vg-label{font-size:13px;font-weight:700;color:var(--sf-ink);margin-bottom:10px}
#page-storefront .variant-opts{display:flex;gap:10px;flex-wrap:wrap}
#page-storefront .variant-opt{padding:11px 18px;border:1.5px solid var(--sf-line);border-radius:11px;font-size:13.5px;font-weight:600;color:var(--sf-ink-2);cursor:pointer;transition:.15s;background:#fff;line-height:1.2;text-align:center}
#page-storefront .variant-opt .vo-price{display:block;font-size:11.5px;color:var(--sf-muted);font-weight:500;margin-top:2px}
#page-storefront .variant-opt.on{border-color:var(--sf-brand);background:var(--sf-brand-light);color:var(--sf-brand-deep)}
#page-storefront .variant-opt:hover:not(.on){border-color:#cfe7ec}
#page-storefront .pdp-buy{display:flex;gap:14px;align-items:stretch;margin-bottom:20px}
#page-storefront .qty-stepper{display:flex;align-items:center;border:1.5px solid var(--sf-line);border-radius:12px;overflow:hidden;background:#fff}
#page-storefront .qty-stepper button{width:48px;height:100%;font-size:20px;font-weight:600;color:var(--sf-brand);display:flex;align-items:center;justify-content:center;transition:.12s}
#page-storefront .qty-stepper button:hover{background:var(--sf-brand-tint)}
#page-storefront .qty-stepper input{width:56px;text-align:center;border:none;font-size:16px;font-weight:700;color:var(--sf-ink)}
#page-storefront .qty-stepper input:focus{outline:none}
#page-storefront .btn-buy{flex:1;background:var(--sf-brand);color:#fff;box-shadow:0 6px 16px rgba(13,122,143,.3)}
#page-storefront .pdp-buy-2{display:flex;gap:14px;margin-bottom:26px}
#page-storefront .btn-outline{flex:1;background:#fff;color:var(--sf-brand);border:1.5px solid var(--sf-line)}
#page-storefront .btn-outline.inert{opacity:.6;cursor:default}
#page-storefront .btn-outline.inert:hover{border-color:var(--sf-line);background:#fff}
#page-storefront .bulk-note{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:13px;margin-bottom:26px}
#page-storefront .bulk-note-ico{width:38px;height:38px;border-radius:10px;background:#fef3c7;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-storefront .bulk-note-txt .bn-1{font-size:13.5px;font-weight:700;color:#92600e}
#page-storefront .bulk-note-txt .bn-2{font-size:12.5px;color:#a16207}
#page-storefront .specs-table{border:1px solid var(--sf-line);border-radius:14px;overflow:hidden}
#page-storefront .specs-table .st-head{background:var(--sf-brand-tint);padding:13px 18px;font-size:14px;font-weight:700;color:var(--sf-ink);border-bottom:1px solid var(--sf-line)}
#page-storefront .spec-row{display:grid;grid-template-columns:200px 1fr;padding:11px 18px;font-size:13.5px;border-bottom:1px solid var(--sf-line-2)}
#page-storefront .spec-row:last-child{border-bottom:none}
#page-storefront .spec-row .sr-k{color:var(--sf-muted);font-weight:600}
#page-storefront .spec-row .sr-v{color:var(--sf-ink);font-weight:500}
#page-storefront .related-sec{margin-top:52px}

/* ============ TOAST ============ */
#page-storefront .toast{position:fixed;bottom:28px;right:28px;background:var(--sf-ink);color:#fff;padding:15px 20px;border-radius:13px;display:flex;align-items:center;gap:13px;box-shadow:var(--sf-shadow-lg);transform:translateY(120px);opacity:0;transition:.35s cubic-bezier(.2,1.2,.4,1);z-index:200;max-width:340px;pointer-events:none}
#page-storefront .toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
#page-storefront .toast-ico{width:38px;height:38px;border-radius:10px;background:var(--sf-ok);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-storefront .toast-txt .tt-1{font-size:14px;font-weight:700}
#page-storefront .toast-txt .tt-2{font-size:12.5px;color:rgba(255,255,255,.7)}
#page-storefront .toast-view{margin-left:8px;font-size:12.5px;font-weight:700;color:#7dd3d8;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.1)}

/* ============ EMPTY STATE ============ */
#page-storefront .empty-cart{text-align:center;padding:70px 20px}
#page-storefront .empty-cart-ico{width:90px;height:90px;border-radius:50%;background:var(--sf-brand-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
#page-storefront .empty-cart h3{font-size:20px;font-weight:800;color:var(--sf-ink);margin-bottom:8px}
#page-storefront .empty-cart p{font-size:14px;color:var(--sf-muted);margin-bottom:22px}

/* ============ FOOTER ============ */
#page-storefront .footer{background:var(--sf-brand-deep);color:#a9cdd5;margin-top:40px}
#page-storefront .footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:40px;padding:52px 0 40px}
#page-storefront .footer-brand .fb-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
#page-storefront .footer-brand .fb-logo .logo-mark{width:40px;height:40px}
#page-storefront .footer-brand .fb-logo .lt-1{color:#fff;font-size:18px;font-family:var(--sf-font-display,'Manrope');font-weight:800}
#page-storefront .footer-brand p{font-size:13px;line-height:1.6;color:#8fbac4;margin-bottom:18px;max-width:280px}
#page-storefront .footer-social{display:flex;gap:10px}
#page-storefront .footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:.15s}
#page-storefront .footer-social a:hover{background:var(--sf-brand)}
#page-storefront .footer-col h4{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:16px}
#page-storefront .footer-col a{display:block;font-size:13px;color:#8fbac4;padding:6px 0;transition:.12s;cursor:pointer}
#page-storefront .footer-col a:hover{color:#fff;padding-left:3px}
#page-storefront .footer-newsletter p{font-size:13px;color:#8fbac4;margin-bottom:14px;line-height:1.5}
#page-storefront .footer-input{display:flex;gap:8px}
#page-storefront .footer-input input{flex:1;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);padding:0 14px;font-size:13px;color:#fff}
#page-storefront .footer-input input::placeholder{color:#7ba3ac}
#page-storefront .footer-input input:focus{outline:none;border-color:var(--sf-accent)}
#page-storefront .footer-input button{width:48px;height:44px;border-radius:10px;background:var(--sf-accent);display:flex;align-items:center;justify-content:center}
#page-storefront .footer-input button svg{width:20px;height:20px;color:#fff}
#page-storefront .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
#page-storefront .footer-bottom .fb-copy{font-size:12.5px;color:#7ba3ac}
#page-storefront .footer-bottom .fb-copy b{color:#a9cdd5}
#page-storefront .footer-powered{font-size:11.5px;color:#5f8a94;display:flex;align-items:center;gap:7px}
#page-storefront .footer-powered .fp-dot{width:5px;height:5px;border-radius:50%;background:var(--sf-accent)}

/* ═══════════ FIX_P2A2LAYOUT_2026_07_06 — CSS-ARCHETYPE LAYOUT DIVERSITY (Axis A / mechanism (c) / DP-4-CLEAN) ═══════════
   Per-archetype scoped override blocks keyed off #page-storefront[data-archetype="…"], set by
   applyRender from render()'s pure plan (the archetype NAME flows through render as a deterministic
   function of the direction; the DOM attribute-set is the ONLY new impurity, confined to applyRender).
   Each block overrides ONLY the CSS-achievable layout properties over the SAME shipped DOM — NO new DOM,
   NO renderer bodies touched (CSS-over-shipped-DOM only). The UNPREFIXED base rules above ARE the teal /
   'stacked-centred' DEFAULT and are LEFT UNCHANGED → teal stays byte-identical (no override for teal, so
   the shipped values win untouched; parity-safe). Genuinely-different DOM (utility's data-table terminal,
   editorial's new ethos/category-index sections) is FENCED to A2-structural — not reachable by CSS here.
   COORDINATION PIN: grid-density overrides that would fight the responsive @media collapse (L34957+) are
   guarded inside @media(min-width:1301px) so below 1300px the shipped responsive rules win unopposed and
   the mobile collapse is preserved per archetype. Hero/card/margin overrides do not conflict with the
   collapse-to-1-column and are unguarded. Base --sf-radius/--sf-line are NEVER clobbered; archetype radius
   is applied via the [data-archetype] selector only (teal untouched). Archetype CSS reads var(--sf-*)
   including brand slots so applyChrome's inline brand override (L225796) still cascades correctly (A3-safe). */

/* ── (b) full-bleed-dense (bold) — wider dark-split hero, hard-0px block-shadow cards, tighter grid ── */
#page-storefront[data-archetype="full-bleed-dense"] .wrap{max-width:1400px}
#page-storefront[data-archetype="full-bleed-dense"] .hero .wrap{gap:32px}
#page-storefront[data-archetype="full-bleed-dense"] .hero h1{letter-spacing:-.03em}
#page-storefront[data-archetype="full-bleed-dense"] .hero-card{border-radius:0}
#page-storefront[data-archetype="full-bleed-dense"] .cat-tile{border:3px solid var(--sf-ink);border-radius:0;box-shadow:4px 4px 0 var(--sf-ink)}
#page-storefront[data-archetype="full-bleed-dense"] .cat-tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sf-ink);border-color:var(--sf-ink)}
#page-storefront[data-archetype="full-bleed-dense"] .pcard{border:4px solid var(--sf-ink);border-radius:0;box-shadow:4px 4px 0 var(--sf-ink);transition:transform .16s,box-shadow .16s}
#page-storefront[data-archetype="full-bleed-dense"] .pcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sf-ink);border-color:var(--sf-ink)}
#page-storefront[data-archetype="full-bleed-dense"] .sec-head{margin:36px 0 18px}
@media(min-width:1301px){
  /* hero-split + density overrides guarded so the responsive collapse below 1300px wins unopposed
     (the attribute selector's higher specificity would otherwise beat the max-width:1300px 1fr collapse). */
  #page-storefront[data-archetype="full-bleed-dense"] .hero .wrap{grid-template-columns:1.3fr 1fr}
  #page-storefront[data-archetype="full-bleed-dense"] .prod-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  #page-storefront[data-archetype="full-bleed-dense"] .prod-grid.wide{grid-template-columns:repeat(5,1fr);gap:14px}
  #page-storefront[data-archetype="full-bleed-dense"] .cat-grid{gap:14px}
}

/* ── (c) asymmetric-magazine (editorial CSS-REACHABLE SUBSET) — asymmetric hero, hairlines, big margins ──
   OUT of this slice → A2-structural: editorial's DIFFERENT SECTION SET (ethos + category-index that
   REPLACE trust-strip/trade-strip) — that DOM does not exist in the shipped skeleton. Here we ship
   editorial's hero proportions / hairline borders / generous margins over the EXISTING section set only. */
#page-storefront[data-archetype="asymmetric-magazine"] .wrap{max-width:1240px;padding:0 48px}
#page-storefront[data-archetype="asymmetric-magazine"] .hero .wrap{gap:80px}
#page-storefront[data-archetype="asymmetric-magazine"] .hero h1{letter-spacing:-.02em}
#page-storefront[data-archetype="asymmetric-magazine"] .hero-card{border-radius:0;box-shadow:none}
#page-storefront[data-archetype="asymmetric-magazine"] .cat-tile{border:1px solid var(--sf-line);border-radius:0;box-shadow:none}
#page-storefront[data-archetype="asymmetric-magazine"] .cat-tile:hover{transform:none;box-shadow:none;border-color:var(--sf-ink)}
#page-storefront[data-archetype="asymmetric-magazine"] .pcard{border:1px solid var(--sf-line);border-radius:0;box-shadow:none}
#page-storefront[data-archetype="asymmetric-magazine"] .pcard:hover{transform:none;box-shadow:none;border-color:var(--sf-ink)}
#page-storefront[data-archetype="asymmetric-magazine"] .sec-head{margin:72px 0 34px}
#page-storefront[data-archetype="asymmetric-magazine"] .trade-strip{border-radius:0}
@media(min-width:1301px){
  /* hero-split guarded (specificity beats the max-width:1300px 1fr collapse); density gaps guarded for parity. */
  #page-storefront[data-archetype="asymmetric-magazine"] .hero .wrap{grid-template-columns:1.15fr .85fr}
  #page-storefront[data-archetype="asymmetric-magazine"] .prod-grid{gap:34px}
  #page-storefront[data-archetype="asymmetric-magazine"] .prod-grid.wide{gap:34px}
  #page-storefront[data-archetype="asymmetric-magazine"] .cat-grid{gap:28px}
}

/* ── (a) stacked-centred / warm variant — centred hero, 24px rounded cards, circular category tiles, cozy ──
   teal ALSO maps to 'stacked-centred' but ships NO override block (the shipped base rules ARE teal → parity).
   warm shares the archetype NAME but carries its own soft-rounded density/radius/tile treatment. */
#page-storefront[data-archetype="stacked-centred-warm"] .wrap{max-width:1200px}
#page-storefront[data-archetype="stacked-centred-warm"] .hero .wrap{grid-template-columns:1fr;text-align:center;justify-items:center;gap:28px}
#page-storefront[data-archetype="stacked-centred-warm"] .hero p{max-width:600px;margin-left:auto;margin-right:auto}
#page-storefront[data-archetype="stacked-centred-warm"] .hero-cta{justify-content:center}
#page-storefront[data-archetype="stacked-centred-warm"] .hero-stats{justify-content:center}
#page-storefront[data-archetype="stacked-centred-warm"] .hero-card{border-radius:24px;max-width:520px}
#page-storefront[data-archetype="stacked-centred-warm"] .cat-tile{border-radius:24px}
#page-storefront[data-archetype="stacked-centred-warm"] .cat-tile-ico{border-radius:50%}
#page-storefront[data-archetype="stacked-centred-warm"] .pcard{border-radius:24px}
#page-storefront[data-archetype="stacked-centred-warm"] .sec-head{margin:48px 0 24px;justify-content:center;text-align:center}
@media(min-width:1301px){
  #page-storefront[data-archetype="stacked-centred-warm"] .prod-grid{gap:24px}
  #page-storefront[data-archetype="stacked-centred-warm"] .prod-grid.wide{gap:24px}
  #page-storefront[data-archetype="stacked-centred-warm"] .cat-grid{gap:22px}
}
/* ═══════════ end FIX_P2A2LAYOUT_2026_07_06 archetype CSS ═══════════ */

/* ═══════════ FIX_P3V1_RESTAURANT_2026_07_08 — RESTAURANT ARCHETYPE CSS (P3-V1) ═══════════
   4 [data-archetype="restaurant-*"] scoped blocks. Each styles the SHAPE_restaurant menu DOM
   (.sf-menu-hero / .sf-menu-secnav .msn-chip / .sf-dishcard / .sf-menu-sec-hd / .sf-dish-detail —
   the classes renderMenuHome/renderMenuSection/renderDishDetail emit, L232547-region) so the
   layout STRUCTURE differs per direction beyond what the --sf-* tokens (palette/type/shape/depth,
   emitted via emitTokenCss) already carry. CSS-over-shipped-DOM ONLY: NO renderer body touched, NO
   new DOM (the promo coupon strip is the one exception — a mergeRenderers view_renderers override,
   NOT an engine edit). Each block reads var(--sf-*) so applyChrome's brand override still cascades.
   The retail archetype blocks above are UNTOUCHED → retail parity preserved. ══════════════════════ */

/* ── restaurant-editorial — fine-dining: near-monochrome, hairline rules, NO cards/radius/shadow,
     luxurious sparse spacing (editorial sample: hairline .plates grid, .mdish index rows). ── */
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-hero{background:var(--sf-bg);border-bottom:1px solid var(--sf-line)}
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-hero h1{letter-spacing:-.02em;font-style:normal}
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-secnav{border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);gap:0;padding:0}
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-secnav .msn-chip{flex:1;justify-content:center;border:none;border-right:1px solid var(--sf-line-2);border-radius:0;background:transparent;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:20px 0}
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-secnav .msn-chip:hover,#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-secnav .msn-chip.on{background:var(--sf-ink);color:var(--sf-bg)}
#page-storefront[data-archetype="restaurant-editorial"] .sf-dish-grid{gap:1px;background:var(--sf-line-2);border:1px solid var(--sf-line-2)}
#page-storefront[data-archetype="restaurant-editorial"] .sf-dishcard{border:none;border-radius:0;box-shadow:none;background:var(--sf-bg)}
#page-storefront[data-archetype="restaurant-editorial"] .sf-dishcard:hover{transform:none;box-shadow:none;background:var(--sf-brand-light)}
#page-storefront[data-archetype="restaurant-editorial"] .sf-dishcard .dc-name{font-family:var(--sf-font-display);font-weight:400}
#page-storefront[data-archetype="restaurant-editorial"] .sf-menu-sec-hd h2{font-style:italic;font-weight:400}
#page-storefront[data-archetype="restaurant-editorial"] .sf-dish-detail .dd-img{border-radius:0}

/* ── restaurant-promo — loud fast-casual: full-bleed dense, hard 0px corners, thick ink borders,
     chunky block shadows, snappy hover-pop (promo sample: .fcard block-shadow cards + coupon strip). ── */
#page-storefront[data-archetype="restaurant-promo"] .wrap{max-width:1280px}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-hero{background:var(--sf-ink);border-bottom:5px solid var(--sf-accent);color:#fff}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-hero h1{color:#fff;letter-spacing:-.01em}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-hero .mh-sub{color:#d6d1c8}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-hero .mh-eyebrow{color:var(--sf-accent)}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-stats .mst-n{color:var(--sf-accent)}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-secnav .msn-chip{border:3px solid var(--sf-ink);border-radius:0;box-shadow:3px 3px 0 var(--sf-ink);text-transform:uppercase;font-weight:900}
#page-storefront[data-archetype="restaurant-promo"] .sf-menu-secnav .msn-chip:hover,#page-storefront[data-archetype="restaurant-promo"] .sf-menu-secnav .msn-chip.on{background:var(--sf-accent);color:var(--sf-ink)}
#page-storefront[data-archetype="restaurant-promo"] .sf-dishcard{border:4px solid var(--sf-ink);border-radius:0;box-shadow:6px 6px 0 var(--sf-ink);transition:transform .16s,box-shadow .16s}
#page-storefront[data-archetype="restaurant-promo"] .sf-dishcard:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sf-brand)}
#page-storefront[data-archetype="restaurant-promo"] .sf-dishcard .dc-name{font-family:var(--sf-font-display);text-transform:uppercase}
#page-storefront[data-archetype="restaurant-promo"] .sf-dishcard .dc-add{border-radius:0;border:3px solid var(--sf-ink);background:var(--sf-accent);color:var(--sf-ink)}
#page-storefront[data-archetype="restaurant-promo"] .sf-dishcard .dc-add:hover{background:var(--sf-ink);color:var(--sf-accent)}
/* the mergeRenderers-injected coupon/announcement strip (renderPromoMenuHome). */
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip{background:var(--sf-brand);border-bottom:3px solid var(--sf-ink)}
#page-storefront .sf-promo-strip{display:none}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip{display:block}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-deal{display:flex;align-items:center;gap:12px;color:#fff}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-tag{background:var(--sf-accent);color:var(--sf-ink);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-txt{font-weight:700;font-size:14px}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-cta{background:var(--sf-ink);color:#fff;border:3px solid var(--sf-ink);box-shadow:4px 4px 0 var(--sf-accent);font-weight:900;text-transform:uppercase;font-size:13px;padding:11px 20px;cursor:pointer}
#page-storefront[data-archetype="restaurant-promo"] .sf-promo-strip .sps-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sf-accent)}

/* ── restaurant-cafe — cozy: big pill radius, soft blurry shadows, airy friendly spacing, no hard
     borders (cafe sample: pill .menu-nav chips, rounded 28px .feat cards, soft shadows). ── */
#page-storefront[data-archetype="restaurant-cafe"] .wrap{max-width:1080px}
#page-storefront[data-archetype="restaurant-cafe"] .sf-menu-hero{background:var(--sf-brand-light);border-bottom:none}
#page-storefront[data-archetype="restaurant-cafe"] .sf-menu-secnav .msn-chip{border:none;border-radius:24px;background:var(--sf-white);box-shadow:0 6px 14px rgba(120,110,95,.08);font-weight:700;padding:11px 22px}
#page-storefront[data-archetype="restaurant-cafe"] .sf-menu-secnav .msn-chip:hover,#page-storefront[data-archetype="restaurant-cafe"] .sf-menu-secnav .msn-chip.on{background:var(--sf-brand);color:#fff}
#page-storefront[data-archetype="restaurant-cafe"] .sf-dishcard{border:none;border-radius:28px;box-shadow:0 10px 28px rgba(120,110,95,.10)}
#page-storefront[data-archetype="restaurant-cafe"] .sf-dishcard:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(120,110,95,.16)}
#page-storefront[data-archetype="restaurant-cafe"] .sf-dishcard .dc-price{color:var(--sf-brand)}
#page-storefront[data-archetype="restaurant-cafe"] .sf-dishcard .dc-add{border-radius:50%;background:var(--sf-brand)}
#page-storefront[data-archetype="restaurant-cafe"] .sf-diet-tag{border-radius:16px}
#page-storefront[data-archetype="restaurant-cafe"] .sf-menu-sec-hd{justify-content:center;text-align:center}
#page-storefront[data-archetype="restaurant-cafe"] .sf-dish-detail .dd-img{border-radius:36px}

/* ── restaurant-warm — rustic farm-table: soft-rounded cards, hairline earth borders, no hard
     shadow, cozy generous spacing (warm sample: 20px .feat cards, dotted .dish rules, terra rules). ── */
#page-storefront[data-archetype="restaurant-warm"] .wrap{max-width:1060px}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-hero{background:linear-gradient(180deg,var(--sf-brand-light),var(--sf-bg));border-bottom:1px solid var(--sf-line);text-align:center}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-hero .wrap{align-items:center}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-stats{justify-content:center}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-secnav{justify-content:center}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-secnav .msn-chip{border:1.5px solid var(--sf-line);border-radius:26px;background:transparent}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-secnav .msn-chip:hover,#page-storefront[data-archetype="restaurant-warm"] .sf-menu-secnav .msn-chip.on{background:var(--sf-brand);color:var(--sf-white);border-color:var(--sf-brand)}
#page-storefront[data-archetype="restaurant-warm"] .sf-dishcard{border:1px solid var(--sf-line-2);border-radius:20px;box-shadow:none}
#page-storefront[data-archetype="restaurant-warm"] .sf-dishcard:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(58,47,38,.10);border-color:var(--sf-line)}
#page-storefront[data-archetype="restaurant-warm"] .sf-dishcard .dc-name{font-family:var(--sf-font-display)}
#page-storefront[data-archetype="restaurant-warm"] .sf-menu-sec-hd h2{color:var(--sf-brand)}
#page-storefront[data-archetype="restaurant-warm"] .sf-dish-detail .dd-img{border-radius:20px}
/* ═══════════ end FIX_P3V1_RESTAURANT_2026_07_08 restaurant archetype CSS ═══════════ */

/* ============ RESPONSIVE ============ */
@media(max-width:1300px){
  #page-storefront .prod-grid,#page-storefront .prod-grid.wide{grid-template-columns:repeat(3,1fr)}
  #page-storefront .cat-grid{grid-template-columns:repeat(2,1fr)}
  #page-storefront .hero .wrap{grid-template-columns:1fr}
  #page-storefront .hero-card{max-width:460px}
}
@media(max-width:1050px){
  #page-storefront .plp-layout,#page-storefront .pdp{grid-template-columns:1fr}
  #page-storefront .filters{position:static}
  #page-storefront .trust .wrap{grid-template-columns:repeat(2,1fr)}
  #page-storefront .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  #page-storefront .prod-grid,#page-storefront .prod-grid.wide,#page-storefront .cat-grid{grid-template-columns:repeat(2,1fr)}
  #page-storefront .searchbar{display:none}
  #page-storefront .header-main{gap:14px}
  #page-storefront .trust .wrap{grid-template-columns:1fr}
}
/* ═══════════ FIX_STORE_S2_2026_07_06 — CART / CHECKOUT / CONFIRM (Store P1-S2). Ported
   from design_samples/store/storefront_shoppable_v1.html CSS blocks (cart L348-393,
   checkout L394-452, confirm L453-497). EVERY rule scope-prefixed #page-storefront (mission
   §3.2 — the sample's generic class names collide with app chrome) + the sample's raw
   var(--white)/var(--brand)/var(--line) tokens translated to the S1 --sf-* token map
   (L34607-34616). .empty-cart / .sum-* not re-ported where S1 already ships them. ═══════════ */
/* ── CART ── */
#page-storefront .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start;margin-top:12px}
#page-storefront .cart-items{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);overflow:hidden}
#page-storefront .cart-items-head{padding:18px 24px;border-bottom:1px solid var(--sf-line);display:flex;align-items:center;justify-content:space-between}
#page-storefront .cart-items-head h3{font-size:17px;font-weight:800;color:var(--sf-ink)}
#page-storefront .cart-items-head .cih-count{font-size:13px;color:var(--sf-muted);font-weight:500}
#page-storefront .cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:20px;padding:20px 24px;border-bottom:1px solid var(--sf-line-2);align-items:center}
#page-storefront .cart-row:last-child{border-bottom:none}
#page-storefront .cart-row-img{width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--sf-line)}
#page-storefront .cart-row-info .cri-cat{font-size:11px;font-weight:600;color:var(--sf-accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
#page-storefront .cart-row-info .cri-name{font-size:15px;font-weight:700;color:var(--sf-ink);margin-bottom:4px}
#page-storefront .cart-row-info .cri-meta{font-size:12.5px;color:var(--sf-muted);margin-bottom:10px}
#page-storefront .cart-row-info .cri-price{font-size:13px;color:var(--sf-ink-2)}
#page-storefront .cart-row-info .cri-price b{color:var(--sf-price);font-weight:700}
#page-storefront .cart-row-info .cri-price .rt{color:var(--sf-retail);text-decoration:line-through;font-size:12px;margin-left:6px}
#page-storefront .cart-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
#page-storefront .cart-line-total{font-size:19px;font-weight:800;color:var(--sf-ink);font-family:var(--sf-font-display,'Manrope')}
#page-storefront .qty-stepper.sm{border-radius:10px}
#page-storefront .qty-stepper.sm button{width:34px;height:36px;font-size:16px}
#page-storefront .qty-stepper.sm input{width:40px;height:36px;font-size:14px}
#page-storefront .cart-remove{font-size:12.5px;color:var(--sf-muted);font-weight:600;display:flex;align-items:center;gap:5px;cursor:pointer}
#page-storefront .cart-continue{display:flex;align-items:center;gap:8px;padding:18px 24px;font-size:13.5px;font-weight:700;color:var(--sf-brand);cursor:pointer}
#page-storefront .order-summary{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:24px;position:sticky;top:148px}
#page-storefront .order-summary h3{font-size:17px;font-weight:800;color:var(--sf-ink);margin-bottom:18px}
#page-storefront .sum-row{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;color:var(--sf-ink-2)}
#page-storefront .sum-row .sr-v{font-weight:600;color:var(--sf-ink)}
#page-storefront .sum-row.disc .sr-v{color:var(--sf-ok)}
#page-storefront .sum-divider{height:1px;background:var(--sf-line);margin:12px 0}
#page-storefront .sum-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 4px}
#page-storefront .sum-total .st-l{font-size:15px;font-weight:700;color:var(--sf-ink)}
#page-storefront .sum-total .st-v{font-size:26px;font-weight:800;color:var(--sf-price);font-family:var(--sf-font-display,'Manrope')}
#page-storefront .sum-tax-note{font-size:11.5px;color:var(--sf-muted);margin-bottom:18px}
#page-storefront .net30-note{background:var(--sf-brand-light);border:1px solid #cfe7ec;border-radius:11px;padding:13px 15px;display:flex;gap:11px;margin-bottom:18px}
#page-storefront .net30-note .nn-txt{font-size:12.5px;color:var(--sf-brand-dark);line-height:1.45}
#page-storefront .net30-note .nn-txt b{color:var(--sf-brand-deep)}
#page-storefront .btn-checkout{width:100%;background:var(--sf-brand);color:#fff;padding:16px;font-size:15px;box-shadow:0 6px 16px rgba(13,122,143,.3)}
#page-storefront .sum-trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:12px;color:var(--sf-muted)}
/* ── CHECKOUT ── */
#page-storefront .checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:30px;align-items:start;margin-top:12px}
#page-storefront .checkout-main{display:flex;flex-direction:column;gap:22px}
#page-storefront .co-card{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);overflow:hidden}
#page-storefront .co-card-head{padding:18px 24px;border-bottom:1px solid var(--sf-line);display:flex;align-items:center;gap:13px}
#page-storefront .co-step-num{width:30px;height:30px;border-radius:9px;background:var(--sf-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:var(--sf-font-display,'Manrope');flex-shrink:0}
#page-storefront .co-card-head h3{font-size:16px;font-weight:800;color:var(--sf-ink)}
#page-storefront .co-card-head .co-edit{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--sf-brand)}
#page-storefront .co-card-body{padding:22px 24px}
#page-storefront .shipto-card{display:flex;align-items:flex-start;gap:16px;padding:18px;background:var(--sf-brand-tint);border:1px solid var(--sf-line);border-radius:12px}
#page-storefront .shipto-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--sf-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
#page-storefront .shipto-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--sf-brand)}
#page-storefront .shipto-info .si-name{font-size:14.5px;font-weight:700;color:var(--sf-ink);margin-bottom:3px;display:flex;align-items:center;gap:9px}
#page-storefront .shipto-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--sf-brand-light);color:var(--sf-brand-dark)}
#page-storefront .shipto-info .si-addr{font-size:13.5px;color:var(--sf-ink-2);line-height:1.55}
#page-storefront .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#page-storefront .form-field{display:flex;flex-direction:column;gap:7px}
#page-storefront .form-field.full{grid-column:1/-1}
#page-storefront .form-field label{font-size:13px;font-weight:700;color:var(--sf-ink)}
#page-storefront .form-field label .opt{font-weight:500;color:var(--sf-muted);font-size:12px}
#page-storefront .form-field input,#page-storefront .form-field textarea{border:1.5px solid var(--sf-line);border-radius:10px;padding:12px 14px;font-size:14px;font-family:inherit;color:var(--sf-ink);transition:.12s;background:#fff}
#page-storefront .form-field input:focus,#page-storefront .form-field textarea:focus{outline:none;border-color:var(--sf-brand);box-shadow:0 0 0 3px rgba(13,122,143,.1)}
#page-storefront .form-field textarea{resize:vertical;min-height:80px}
#page-storefront .pay-option{display:flex;align-items:center;gap:16px;padding:18px;border:2px solid var(--sf-brand);border-radius:13px;background:var(--sf-brand-light);margin-bottom:14px;position:relative}
#page-storefront .pay-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--sf-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-storefront .pay-radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--sf-brand)}
#page-storefront .pay-option.disabled{border-color:var(--sf-line);background:var(--sf-bg);opacity:.75}
#page-storefront .pay-option.disabled .pay-radio{border-color:var(--sf-muted)}
#page-storefront .pay-info{flex:1}
#page-storefront .pay-info .pi-1{font-size:15px;font-weight:800;color:var(--sf-ink);display:flex;align-items:center;gap:10px}
#page-storefront .pay-info .pi-2{font-size:13px;color:var(--sf-ink-2);margin-top:3px}
#page-storefront .pay-ico{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--sf-line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-storefront .coming-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;background:#f1f5f6;color:var(--sf-muted);text-transform:uppercase;letter-spacing:.04em}
#page-storefront .terms-line{display:flex;align-items:center;gap:11px;padding:16px 18px;background:var(--sf-brand-deep);border-radius:12px;color:#cfe7ec;margin-top:6px}
#page-storefront .terms-line .tl-txt{font-size:13.5px;line-height:1.4}
#page-storefront .terms-line .tl-txt b{color:#fff}
#page-storefront .co-summary{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);position:sticky;top:148px;overflow:hidden}
#page-storefront .co-sum-head{padding:18px 22px;border-bottom:1px solid var(--sf-line);font-size:16px;font-weight:800;color:var(--sf-ink)}
#page-storefront .co-sum-items{padding:8px 22px;max-height:280px;overflow-y:auto}
#page-storefront .co-sum-item{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--sf-line-2);align-items:center}
#page-storefront .co-sum-item:last-child{border-bottom:none}
#page-storefront .co-sum-img{width:52px;height:52px;border-radius:9px;overflow:hidden;border:1px solid var(--sf-line);flex-shrink:0;position:relative}
#page-storefront .co-sum-qty{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--sf-brand);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
#page-storefront .co-sum-info{flex:1;line-height:1.3}
#page-storefront .co-sum-info .csi-name{font-size:13px;font-weight:600;color:var(--sf-ink)}
#page-storefront .co-sum-info .csi-meta{font-size:11.5px;color:var(--sf-muted)}
#page-storefront .co-sum-price{font-size:13.5px;font-weight:700;color:var(--sf-ink)}
#page-storefront .co-sum-totals{padding:18px 22px;border-top:1px solid var(--sf-line)}
#page-storefront .btn-place{width:100%;background:var(--sf-brand);color:#fff;padding:17px;font-size:15.5px;box-shadow:0 8px 20px rgba(13,122,143,.35);margin-top:6px}
#page-storefront .co-oversell-warn{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--sf-warn-bg);border:1px solid #f0d4a8;border-radius:11px;margin-top:12px;font-size:12.5px;color:#8a5a12;line-height:1.45}
#page-storefront .co-refuse{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;background:var(--sf-danger-bg);border:1px solid #f2c4c4;border-radius:11px;margin-top:12px;font-size:12.5px;color:#8f2b2b;line-height:1.45}
/* ── ORDER CONFIRMATION ── */
#page-storefront .confirm-wrap{max-width:820px;margin:0 auto;padding-top:20px}
#page-storefront .confirm-hero{text-align:center;padding:44px 0 32px}
#page-storefront .confirm-check{width:88px;height:88px;border-radius:50%;background:var(--sf-ok-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;animation:sfConfirmPop .5s cubic-bezier(.2,1.4,.5,1)}
#page-storefront .confirm-hero h1{font-size:32px;font-weight:800;color:var(--sf-ink);margin-bottom:10px}
#page-storefront .confirm-hero p{font-size:15.5px;color:var(--sf-ink-2);max-width:520px;margin:0 auto}
#page-storefront .confirm-hero .co-num{font-weight:800;color:var(--sf-brand)}
#page-storefront .confirm-card{background:var(--sf-white);border:1px solid var(--sf-line);border-radius:var(--sf-radius);overflow:hidden;margin-bottom:22px}
#page-storefront .confirm-card-head{padding:20px 26px;border-bottom:1px solid var(--sf-line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#page-storefront .cch-l .cchl-1{font-size:12px;font-weight:600;color:var(--sf-muted);text-transform:uppercase;letter-spacing:.05em}
#page-storefront .cch-l .cchl-2{font-size:19px;font-weight:800;color:var(--sf-ink);font-family:var(--sf-font-display,'Manrope')}
#page-storefront .cch-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--sf-brand-dark);background:var(--sf-brand-light);padding:8px 16px;border-radius:22px}
#page-storefront .cch-status .cs-dot{width:8px;height:8px;border-radius:50%;background:var(--sf-accent)}
#page-storefront .confirm-meta{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--sf-line)}
#page-storefront .cmeta{padding:20px 26px;border-right:1px solid var(--sf-line-2)}
#page-storefront .cmeta:last-child{border-right:none}
#page-storefront .cmeta .cm-l{font-size:11.5px;font-weight:600;color:var(--sf-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;display:flex;align-items:center;gap:6px}
#page-storefront .cmeta .cm-l svg{width:14px;height:14px;color:var(--sf-brand)}
#page-storefront .cmeta .cm-v{font-size:14.5px;font-weight:700;color:var(--sf-ink)}
#page-storefront .cmeta .cm-v2{font-size:12.5px;color:var(--sf-ink-2);margin-top:2px}
#page-storefront .confirm-items{padding:8px 26px}
#page-storefront .confirm-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--sf-line-2);align-items:center}
#page-storefront .confirm-item:last-child{border-bottom:none}
#page-storefront .ci-img{width:60px;height:60px;border-radius:10px;overflow:hidden;border:1px solid var(--sf-line);flex-shrink:0}
#page-storefront .ci-info{flex:1}
#page-storefront .ci-info .cii-name{font-size:14.5px;font-weight:700;color:var(--sf-ink)}
#page-storefront .ci-info .cii-meta{font-size:12.5px;color:var(--sf-muted)}
#page-storefront .ci-qty{font-size:13.5px;color:var(--sf-ink-2);font-weight:600}
#page-storefront .ci-total{font-size:15.5px;font-weight:800;color:var(--sf-ink);font-family:var(--sf-font-display,'Manrope');min-width:80px;text-align:right}
#page-storefront .confirm-totals{padding:20px 26px;background:var(--sf-brand-tint);border-top:1px solid var(--sf-line)}
#page-storefront .fulfill-card{background:linear-gradient(105deg,var(--sf-brand-deep),var(--sf-brand));border-radius:16px;padding:26px 28px;color:#fff;display:flex;align-items:center;gap:22px;box-shadow:var(--sf-shadow-lg);position:relative;overflow:hidden;margin-bottom:22px}
#page-storefront .fulfill-card::before{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06)}
#page-storefront .fulfill-ico{width:66px;height:66px;border-radius:16px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
#page-storefront .fulfill-txt{flex:1;position:relative}
#page-storefront .fulfill-txt .ft-eyebrow{font-size:11.5px;font-weight:700;color:#7dd3d8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:flex;align-items:center;gap:7px}
#page-storefront .fulfill-txt .ft-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:#5eead4}
#page-storefront .fulfill-txt h3{font-size:19px;font-weight:800;color:#fff;margin-bottom:6px}
#page-storefront .fulfill-txt p{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.55;max-width:560px}
#page-storefront .fulfill-txt p b{color:#7dd3d8}
#page-storefront .confirm-actions{display:flex;gap:14px;justify-content:center;margin-top:8px}

/* ══════════════════════════════════════════════════════════════════════════
   FIX_P3C_S1_2026_07_06 — RESTAURANT MENU SHAPE CSS (P3C-S1). Scope-prefixed
   #page-storefront + token-consuming ONLY (var(--sf-brand)/--sf-font-display/
   --sf-radius/--sf-muted/--sf-line etc.) — NO hardcoded fonts/colours — so the
   4 restaurant directions (teal/bold/editorial/warm) restyle the menu FOR FREE
   (mirrors how the shipped retail CSS was made token-consuming). This is what
   lets SHAPE_restaurant × DIRECTION_bold look distinct from × DIRECTION_editorial.
   ══════════════════════════════════════════════════════════════════════════ */
#page-storefront .sf-menu-hero{background:linear-gradient(135deg,var(--sf-brand-tint,#f3fafb),var(--sf-white,#fff));border-bottom:1px solid var(--sf-line,#e6ecee);padding:56px 0 44px}
#page-storefront .sf-menu-hero .wrap{display:flex;flex-direction:column;gap:14px}
#page-storefront .sf-menu-hero .mh-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-brand)}
#page-storefront .sf-menu-hero h1{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(30px,5vw,52px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);letter-spacing:var(--sf-letter-spacing,-.02em)}
#page-storefront .sf-menu-hero .mh-sub{font-size:15.5px;color:var(--sf-muted,#6b8189);max-width:640px;line-height:1.5}
#page-storefront .sf-menu-hero .mh-cta{display:flex;gap:12px;margin-top:8px}
#page-storefront .sf-menu-hero .mh-cta .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--sf-radius,14px);font-size:14px;font-weight:700}
#page-storefront .sf-menu-hero .mh-cta .btn-primary{background:var(--sf-brand);color:#fff}
#page-storefront .sf-menu-hero .mh-cta .btn-primary:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-menu-hero .mh-cta .btn-ghost{background:transparent;border:1.5px solid var(--sf-line,#e6ecee);color:var(--sf-ink,#0f2730)}
#page-storefront .sf-menu-stats{display:flex;gap:28px;margin-top:6px}
#page-storefront .sf-menu-stats .mst{display:flex;flex-direction:column}
#page-storefront .sf-menu-stats .mst-n{font-size:22px;font-weight:800;color:var(--sf-brand)}
#page-storefront .sf-menu-stats .mst-l{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-menu-secnav{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0 6px}
#page-storefront .sf-menu-secnav .msn-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--sf-line,#e6ecee);background:var(--sf-white,#fff);font-size:13.5px;font-weight:600;color:var(--sf-ink,#0f2730);cursor:pointer;transition:.15s}
#page-storefront .sf-menu-secnav .msn-chip:hover{border-color:var(--sf-brand);color:var(--sf-brand)}
#page-storefront .sf-menu-secnav .msn-chip .msn-ct{font-size:11.5px;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-menu-sec{padding:34px 0}
#page-storefront .sf-menu-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px}
#page-storefront .sf-menu-sec-hd .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-brand)}
#page-storefront .sf-menu-sec-hd h2{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(22px,3vw,32px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none)}
#page-storefront .sf-dish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
#page-storefront .sf-dishcard{display:flex;flex-direction:column;background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);overflow:hidden;transition:transform .16s,box-shadow .16s;cursor:pointer}
#page-storefront .sf-dishcard:hover{transform:translateY(-3px);box-shadow:var(--sf-shadow-md,0 12px 28px rgba(15,39,48,.12))}
#page-storefront .sf-dishcard .dc-img{height:158px;position:relative}
#page-storefront .sf-dishcard .dc-img .prodtile{width:100%;height:100%;border-radius:0}
#page-storefront .sf-dishcard .dc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
#page-storefront .sf-dishcard .dc-name{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:17.5px;font-weight:700;color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none)}
#page-storefront .sf-dishcard .dc-desc{font-size:13px;color:var(--sf-muted,#6b8189);line-height:1.5;flex:1}
#page-storefront .sf-diet-tags{display:flex;flex-wrap:wrap;gap:6px}
#page-storefront .sf-diet-tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--sf-brand-light,#e6f4f7);color:var(--sf-brand-dark,#0a5e6e);font-size:11px;font-weight:600;letter-spacing:.02em}
#page-storefront .sf-dishcard .dc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
#page-storefront .sf-dishcard .dc-price{font-size:18px;font-weight:800;color:var(--sf-brand)}
#page-storefront .sf-dishcard .dc-price .unit{font-size:11.5px;font-weight:600;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-dishcard .dc-add{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--sf-brand);color:#fff;transition:.15s}
#page-storefront .sf-dishcard .dc-add:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-dishcard .dc-add.added{background:var(--sf-accent,#14b8a6)}
#page-storefront .sf-dishcard .dc-add svg{width:20px;height:20px}
#page-storefront .sf-dishcard.out{opacity:.55}
#page-storefront .sf-dishcard .dc-soldout{font-size:12px;font-weight:700;color:var(--sf-danger,#b0413e)}
#page-storefront .sf-dish-detail{max-width:1560px;margin:0 auto;padding:34px 32px 60px}
#page-storefront .sf-dish-detail .dd-crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--sf-muted,#6b8189);margin-bottom:22px}
#page-storefront .sf-dish-detail .dd-crumb a{color:var(--sf-brand);cursor:pointer}
#page-storefront .sf-dish-detail .dd-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px}
#page-storefront .sf-dish-detail .dd-img{height:380px;border-radius:var(--sf-radius,14px);overflow:hidden}
#page-storefront .sf-dish-detail .dd-img .prodtile{width:100%;height:100%;border-radius:0}
#page-storefront .sf-dish-detail .dd-cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sf-brand)}
#page-storefront .sf-dish-detail h1{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(26px,3.4vw,40px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);margin:8px 0 14px;text-transform:var(--sf-case,none)}
#page-storefront .sf-dish-detail .dd-desc{font-size:15px;color:var(--sf-ink-2,#3d5560);line-height:1.65;margin-bottom:18px}
#page-storefront .sf-dish-detail .dd-price{font-size:30px;font-weight:800;color:var(--sf-brand);margin:14px 0 20px}
#page-storefront .sf-dish-detail .dd-buy{display:flex;gap:12px;align-items:center}
#page-storefront .sf-dish-detail .dd-buy .btn-order{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:var(--sf-radius,14px);background:var(--sf-brand);color:#fff;font-size:15px;font-weight:700}
#page-storefront .sf-dish-detail .dd-buy .btn-order:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-dish-detail .dd-buy .btn-order:disabled{background:var(--disabled-surface);color:var(--disabled-ink);border:1px solid var(--border,rgba(255,255,255,0.12));box-shadow:none;filter:none;opacity:1;cursor:not-allowed;transform:none}
#page-storefront .sf-dish-detail .dd-buy .btn-order svg{width:19px;height:19px}
@media(max-width:820px){#page-storefront .sf-dish-detail .dd-grid{grid-template-columns:1fr}#page-storefront .sf-dish-detail .dd-img{height:260px}}

/* ══════════════════════════════════════════════════════════════════════════
   FIX_P3V2_GYM_2026_07_08 — BASE GYM SHAPE CSS (P3-V2). The token-consuming base
   stylesheet for the SHAPE_gym DOM (.sf-gym-hero / .sf-gym-facs / .sf-plan / .sf-acct*
   / .sf-gym-proof / .sf-gym-joincta) that renderGymHome / renderGymPlans / renderGymAccount
   emit (SF IIFE L232640-region). Mirrors the base .sf-menu-* block above: every rule reads
   var(--sf-*) (palette/type/shape/depth) — NO hardcoded fonts/colours — so all 4 gym
   directions restyle the surface FOR FREE via emitTokenCss + the [data-archetype="gym-*"]
   blocks below. This is what lets SHAPE_gym × DIRECTION_gym_bold look distinct from
   × DIRECTION_gym_editorial. ADDITIVE: retail + restaurant CSS untouched → parity preserved.
   ══════════════════════════════════════════════════════════════════════════ */
/* hero */
#page-storefront .sf-gym-hero{background:linear-gradient(135deg,var(--sf-brand-tint,#f3fafb),var(--sf-white,#fff));border-bottom:1px solid var(--sf-line,#e6ecee);padding:56px 0 48px}
#page-storefront .sf-gym-hero .wrap{display:flex;flex-direction:column;gap:14px}
#page-storefront .sf-gym-hero .gh-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-brand)}
#page-storefront .sf-gym-hero h1{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(34px,6vw,64px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);letter-spacing:var(--sf-letter-spacing,-.02em);line-height:var(--sf-line-height-display,1.02)}
#page-storefront .sf-gym-hero .gh-sub{font-size:16.5px;color:var(--sf-muted,#6b8189);max-width:560px;line-height:1.5}
#page-storefront .sf-gym-hero .gh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
#page-storefront .sf-gym-hero .gh-cta .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:var(--sf-radius,14px);font-size:15px;font-weight:700;cursor:pointer;border:none}
#page-storefront .sf-gym-hero .gh-cta .btn-primary{background:var(--sf-brand);color:#fff}
#page-storefront .sf-gym-hero .gh-cta .btn-primary:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-gym-hero .gh-cta .btn-ghost{background:transparent;border:1.5px solid var(--sf-line,#e6ecee);color:var(--sf-ink,#0f2730)}
#page-storefront .sf-gym-stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:10px}
#page-storefront .sf-gym-stats .gst{display:flex;flex-direction:column}
#page-storefront .sf-gym-stats .gst-n{font-family:var(--sf-font-numeric,var(--sf-font-display,inherit));font-size:26px;font-weight:800;color:var(--sf-brand)}
#page-storefront .sf-gym-stats .gst-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted,#6b8189)}
/* generic section head */
#page-storefront .sf-gym-sec{padding:44px 0}
#page-storefront .sf-gym-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}
#page-storefront .sf-gym-sec-hd .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-brand)}
#page-storefront .sf-gym-sec-hd h2{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(24px,3.4vw,40px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none)}
/* facility tiles (the floor) */
#page-storefront .sf-gym-facs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
#page-storefront .sf-fac{background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);padding:24px 22px;box-shadow:var(--sf-card-shadow,none);transition:transform .18s}
#page-storefront .sf-fac:hover{transform:translateY(-4px)}
#page-storefront .sf-fac-ic{width:52px;height:52px;border-radius:var(--sf-radius-sm,12px);background:var(--sf-brand-light,#e6f4f7);color:var(--sf-brand,#0d7a8f);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
#page-storefront .sf-fac h3{font-family:var(--sf-font-display,inherit);font-size:18px;font-weight:var(--sf-weight-display,700);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none)}
#page-storefront .sf-fac .sf-fac-ds{font-size:13px;color:var(--sf-muted,#6b8189);margin-top:6px}
/* MEMBERSHIP PLANS */
#page-storefront .sf-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:stretch}
#page-storefront .sf-plan{background:var(--sf-white,#fff);border:var(--sf-card-border,1px solid var(--sf-line,#e6ecee));border-radius:var(--sf-card-radius,var(--sf-radius,14px));box-shadow:var(--sf-card-shadow,none);display:flex;flex-direction:column;position:relative;transition:transform .18s,box-shadow .18s}
#page-storefront .sf-plan:hover{transform:translateY(-4px)}
#page-storefront .sf-plan.feat{border-color:var(--sf-brand)}
#page-storefront .sf-plan-tag{position:absolute;top:-11px;left:20px;background:var(--sf-brand);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:5px 12px;border-radius:var(--sf-radius-sm,8px);z-index:2}
#page-storefront .sf-plan-hd{padding:24px 22px 16px;border-bottom:1px solid var(--sf-line-2,#eef2f3)}
#page-storefront .sf-plan-name{font-family:var(--sf-font-display,inherit);font-size:22px;font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);line-height:1.05}
#page-storefront .sf-plan-tier{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted,#6b8189);margin-top:6px}
#page-storefront .sf-plan-body{padding:22px;display:flex;flex-direction:column;gap:16px;flex:1}
#page-storefront .sf-plan-price{display:flex;align-items:flex-end;gap:5px}
#page-storefront .sf-plan-price .amt{font-family:var(--sf-font-numeric,var(--sf-font-display,inherit));font-size:44px;font-weight:800;color:var(--sf-price,var(--sf-brand));line-height:.9}
#page-storefront .sf-plan-price .cad{font-size:13px;font-weight:600;text-transform:uppercase;color:var(--sf-muted,#6b8189);padding-bottom:5px}
#page-storefront .sf-plan-perks{display:flex;flex-direction:column;gap:9px}
#page-storefront .sf-perk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--sf-ink-2,#3d5560);line-height:1.35}
#page-storefront .sf-perk .ck{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:var(--sf-brand-light,#e6f4f7);color:var(--sf-brand,#0d7a8f);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
#page-storefront .sf-plan-meta{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--sf-muted,#6b8189);border-top:1px solid var(--sf-line-2,#eef2f3);padding-top:12px}
#page-storefront .sf-plan-meta .pm-row{display:flex;justify-content:space-between}
#page-storefront .sf-plan-meta .pm-row .pm-v{font-weight:700;color:var(--sf-ink-2,#3d5560)}
#page-storefront .sf-plan-join{margin-top:auto;background:var(--sf-brand);color:#fff;border:none;padding:15px;border-radius:var(--sf-radius,12px);font-size:15px;font-weight:800;text-transform:var(--sf-case,none);letter-spacing:.01em;cursor:pointer;transition:.15s}
#page-storefront .sf-plan-join:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-plan.feat .sf-plan-join{box-shadow:var(--sf-shadow-sm,none)}
#page-storefront .sf-plans-empty{padding:40px;text-align:center;color:var(--sf-muted,#6b8189);border:1px dashed var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);font-size:14px}
/* MEMBER ACCOUNT */
#page-storefront .sf-acct{background:var(--sf-brand-tint,#f3fafb);border-top:1px solid var(--sf-line,#e6ecee);border-bottom:1px solid var(--sf-line,#e6ecee)}
#page-storefront .sf-acct-in{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:start;padding:52px 0}
#page-storefront .sf-acct-l .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-brand);margin-bottom:12px}
#page-storefront .sf-acct-l h2{font-family:var(--sf-font-display,inherit);font-size:clamp(26px,3.4vw,40px);font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);margin-bottom:12px;line-height:1.05}
#page-storefront .sf-acct-l p{font-size:15px;color:var(--sf-ink-2,#3d5560);line-height:1.5;max-width:400px;margin-bottom:22px}
#page-storefront .sf-acct-status{background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);padding:6px 18px;margin-bottom:18px}
#page-storefront .sf-acct-status .row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--sf-line-2,#eef2f3);font-size:13.5px}
#page-storefront .sf-acct-status .row:last-child{border-bottom:none}
#page-storefront .sf-acct-status .row .k{color:var(--sf-muted,#6b8189);font-weight:600}
#page-storefront .sf-acct-status .row .v{color:var(--sf-ink,#0f2730);font-weight:700}
#page-storefront .sf-acct-status .row .v.hi{color:var(--sf-brand)}
#page-storefront .sf-acct-cta{display:inline-flex;align-items:center;gap:8px;background:var(--sf-brand);color:#fff;border:none;padding:14px 24px;border-radius:var(--sf-radius,12px);font-size:14.5px;font-weight:800;cursor:pointer}
#page-storefront .sf-acct-cta:hover{background:var(--sf-brand-dark,#0a5e6e)}
#page-storefront .sf-acct-r{background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);padding:26px}
#page-storefront .sf-acct-r h3{font-family:var(--sf-font-display,inherit);font-size:20px;font-weight:var(--sf-weight-display,700);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);margin-bottom:16px}
#page-storefront .sf-acct-empty{color:var(--sf-muted,#6b8189);font-size:14px;line-height:1.55}
#page-storefront .sf-acct-benefits{display:flex;flex-direction:column;gap:12px;margin-top:4px}
#page-storefront .sf-acct-benefit{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--sf-ink-2,#3d5560);line-height:1.4}
#page-storefront .sf-acct-benefit .bi{flex-shrink:0;width:34px;height:34px;border-radius:var(--sf-radius-sm,10px);background:var(--sf-brand-light,#e6f4f7);color:var(--sf-brand,#0d7a8f);display:flex;align-items:center;justify-content:center;font-size:16px}
#page-storefront .sf-acct-benefit b{display:block;color:var(--sf-ink,#0f2730);font-size:14px}
/* social proof */
#page-storefront .sf-gym-proof{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#page-storefront .sf-quote{background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);box-shadow:var(--sf-card-shadow,none);padding:28px}
#page-storefront .sf-quote .qm{font-family:var(--sf-font-display,inherit);font-size:40px;line-height:.4;height:22px;color:var(--sf-brand)}
#page-storefront .sf-quote p{font-size:16px;color:var(--sf-ink,#0f2730);line-height:1.4;margin:14px 0 16px}
#page-storefront .sf-quote .who{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--sf-ink,#0f2730)}
#page-storefront .sf-quote .who span{color:var(--sf-muted,#6b8189);font-weight:600}
/* join CTA band */
#page-storefront .sf-gym-joincta{background:var(--sf-brand);border-radius:var(--sf-radius,14px);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin:8px 0 40px}
#page-storefront .sf-gym-joincta h2{font-family:var(--sf-font-display,inherit);font-size:clamp(24px,3vw,40px);font-weight:var(--sf-weight-display,800);color:#fff;text-transform:var(--sf-case,none);line-height:1.05}
#page-storefront .sf-gym-joincta p{color:rgba(255,255,255,.9);font-size:15px;max-width:520px;margin-top:8px}
#page-storefront .sf-gym-joincta .btn-cta{background:#fff;color:var(--sf-brand);border:none;padding:16px 28px;border-radius:var(--sf-radius,12px);font-size:15px;font-weight:800;white-space:nowrap;cursor:pointer;text-transform:var(--sf-case,none)}
@media(max-width:900px){#page-storefront .sf-acct-in{grid-template-columns:1fr}#page-storefront .sf-gym-proof{grid-template-columns:1fr}}

/* ═══════════ FIX_P3V2_GYM_2026_07_08 — GYM ARCHETYPE CSS (P3-V2) ═══════════
   4 [data-archetype="gym-*"] scoped blocks styling the SHAPE_gym DOM beyond what the
   --sf-* tokens already carry, so each direction's LAYOUT STRUCTURE differs (NOT a recolour).
   CSS-over-shipped-DOM ONLY: NO renderer body touched, NO new DOM. Each reads var(--sf-*) so
   applyChrome's brand override still cascades. Retail + restaurant archetype blocks untouched. ══ */

/* ── gym-bold — volt-on-black high-energy: hard 0px corners, thick borders, block/offset
     shadows, snappy hover-translate, condensed ALL-CAPS (bold sample: .plan block-shadow slabs). ── */
#page-storefront[data-archetype="gym-bold"] .sf-gym-hero{background:var(--sf-ink);border-bottom:5px solid var(--sf-brand);color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-gym-hero h1{color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-gym-hero .gh-sub{color:#c9ccc2}
#page-storefront[data-archetype="gym-bold"] .sf-gym-hero .gh-eyebrow{background:var(--sf-accent,#ff3d2e);color:#fff;display:inline-block;align-self:flex-start;padding:6px 14px}
#page-storefront[data-archetype="gym-bold"] .sf-gym-stats .gst-n{color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-gym-sec-hd{border-bottom:5px solid var(--sf-ink);padding-bottom:14px}
#page-storefront[data-archetype="gym-bold"] .sf-fac{border:3px solid var(--sf-ink);border-radius:0;box-shadow:none}
#page-storefront[data-archetype="gym-bold"] .sf-fac:hover{background:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-fac-ic{border-radius:0;background:var(--sf-ink);color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-plan{border:4px solid var(--sf-ink);border-radius:0;box-shadow:6px 6px 0 var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-plan:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sf-accent,#ff3d2e)}
#page-storefront[data-archetype="gym-bold"] .sf-plan.feat{border-color:var(--sf-accent,#ff3d2e);box-shadow:6px 6px 0 var(--sf-accent,#ff3d2e)}
#page-storefront[data-archetype="gym-bold"] .sf-plan-hd{background:var(--sf-ink);border-bottom:none}
#page-storefront[data-archetype="gym-bold"] .sf-plan.feat .sf-plan-hd{background:var(--sf-accent,#ff3d2e)}
#page-storefront[data-archetype="gym-bold"] .sf-plan-name{color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-plan.feat .sf-plan-name{color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-plan-tier{color:#c9ccc2}
#page-storefront[data-archetype="gym-bold"] .sf-plan-tag{border-radius:0;background:var(--sf-accent,#ff3d2e)}
#page-storefront[data-archetype="gym-bold"] .sf-perk .ck{border-radius:0;background:var(--sf-brand);color:var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-plan-join{border-radius:0;background:var(--sf-brand);color:var(--sf-ink);border:3px solid var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-plan-join:hover{background:var(--sf-ink);color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-acct{background:var(--sf-ink);border-top:5px solid var(--sf-brand);border-bottom:5px solid var(--sf-brand);color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-acct-l h2{color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-acct-l p{color:#c9ccc2}
#page-storefront[data-archetype="gym-bold"] .sf-acct-status{background:var(--sf-ink-2,#161a12);border:3px solid #333;border-radius:0}
#page-storefront[data-archetype="gym-bold"] .sf-acct-status .row .v{color:#fff}
#page-storefront[data-archetype="gym-bold"] .sf-acct-status .row .v.hi{color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-acct-cta{border-radius:0;background:var(--sf-brand);color:var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-acct-r{border-radius:0;border:3px solid var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-acct-benefit .bi{border-radius:0;background:var(--sf-ink);color:var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-quote{border:4px solid var(--sf-ink);border-radius:0;box-shadow:6px 6px 0 var(--sf-brand)}
#page-storefront[data-archetype="gym-bold"] .sf-gym-joincta{border-radius:0;border-top:5px solid var(--sf-ink);border-bottom:5px solid var(--sf-ink)}
#page-storefront[data-archetype="gym-bold"] .sf-gym-joincta .btn-cta{border-radius:0}

/* ── gym-editorial — boutique magazine: hairline rules, NO radius/shadow, luxurious sparse
     spacing, italic serif accents (editorial sample: .faclist index rows, hairline .plans grid). ── */
#page-storefront[data-archetype="gym-editorial"] .sf-gym-hero{background:var(--sf-bg);border-bottom:1px solid var(--sf-line);padding:88px 0 72px}
#page-storefront[data-archetype="gym-editorial"] .sf-gym-hero h1{font-weight:300}
#page-storefront[data-archetype="gym-editorial"] .sf-gym-sec-hd h2{font-weight:300}
#page-storefront[data-archetype="gym-editorial"] .sf-gym-facs{grid-template-columns:1fr;gap:0;border-top:1px solid var(--sf-line)}
#page-storefront[data-archetype="gym-editorial"] .sf-fac{display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:28px;border:none;border-bottom:1px solid var(--sf-line-2);border-radius:0;box-shadow:none;background:transparent;padding:26px 4px}
#page-storefront[data-archetype="gym-editorial"] .sf-fac:hover{transform:none;background:var(--sf-white)}
#page-storefront[data-archetype="gym-editorial"] .sf-fac-ic{background:transparent;color:var(--sf-muted);font-family:var(--sf-font-display);font-size:16px;width:auto;height:auto;margin:0}
#page-storefront[data-archetype="gym-editorial"] .sf-fac h3{font-weight:300}
#page-storefront[data-archetype="gym-editorial"] .sf-plans{gap:1px;background:var(--sf-line-2);border:1px solid var(--sf-line-2)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan{border:none;border-radius:0;box-shadow:none;background:var(--sf-bg)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan:hover{transform:none;background:var(--sf-white)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan.feat{background:var(--sf-white)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan-hd{border-bottom:1px solid var(--sf-line-2)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan-name{font-weight:300}
#page-storefront[data-archetype="gym-editorial"] .sf-plan-tag{background:transparent;color:var(--sf-accent);letter-spacing:.2em;padding:0;top:24px;left:auto;right:22px}
#page-storefront[data-archetype="gym-editorial"] .sf-perk .ck{background:transparent;color:var(--sf-accent);border-radius:0}
#page-storefront[data-archetype="gym-editorial"] .sf-plan-join{background:transparent;color:var(--sf-ink);border:1px solid var(--sf-ink);border-radius:0;font-weight:400;letter-spacing:.05em}
#page-storefront[data-archetype="gym-editorial"] .sf-plan-join:hover{background:var(--sf-ink);color:var(--sf-bg)}
#page-storefront[data-archetype="gym-editorial"] .sf-plan.feat .sf-plan-join{background:var(--sf-ink);color:var(--sf-bg)}
#page-storefront[data-archetype="gym-editorial"] .sf-acct{background:var(--sf-brand-light);border-top:1px solid var(--sf-line)}
#page-storefront[data-archetype="gym-editorial"] .sf-acct-status{border:none;border-top:1px solid var(--sf-line);border-radius:0;background:transparent;padding:0}
#page-storefront[data-archetype="gym-editorial"] .sf-acct-r{border-radius:0}
#page-storefront[data-archetype="gym-editorial"] .sf-acct-benefit .bi{border-radius:0;background:transparent;color:var(--sf-accent)}
#page-storefront[data-archetype="gym-editorial"] .sf-acct-cta{background:transparent;color:var(--sf-ink);border-bottom:1px solid var(--sf-ink);border-radius:0;padding:6px 0}
#page-storefront[data-archetype="gym-editorial"] .sf-quote{border:none;border-radius:0;box-shadow:none;padding:0}
#page-storefront[data-archetype="gym-editorial"] .sf-quote p{font-family:var(--sf-font-display);font-style:italic;font-weight:300;font-size:22px}
#page-storefront[data-archetype="gym-editorial"] .sf-gym-joincta{background:var(--sf-ink);border-radius:0;flex-direction:column;text-align:center;padding:80px 40px}
#page-storefront[data-archetype="gym-editorial"] .sf-gym-joincta .btn-cta{background:var(--sf-bg);color:var(--sf-ink);border-radius:0}

/* ── gym-warm — friendly community: big pill radius, soft layered shadows, rounded blobs,
     gentle lift-on-hover, centred cards (warm sample: .wc soft cards, .acct-card blob). ── */
#page-storefront[data-archetype="gym-warm"] .sf-gym-hero{background:var(--sf-brand-tint);border-bottom:none;padding:60px 0 52px}
#page-storefront[data-archetype="gym-warm"] .sf-gym-sec-hd{flex-direction:column;align-items:center;text-align:center}
#page-storefront[data-archetype="gym-warm"] .sf-fac{border:none;border-radius:22px;box-shadow:var(--sf-shadow-sm,0 8px 22px rgba(58,49,40,.06));text-align:center}
#page-storefront[data-archetype="gym-warm"] .sf-fac-ic{margin-left:auto;margin-right:auto;border-radius:18px}
#page-storefront[data-archetype="gym-warm"] .sf-plan{border:none;border-radius:24px;box-shadow:var(--sf-shadow-md,0 10px 26px rgba(58,49,40,.07))}
#page-storefront[data-archetype="gym-warm"] .sf-plan:hover{transform:translateY(-6px);box-shadow:var(--sf-shadow-lg,0 20px 40px rgba(58,49,40,.12))}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat{background:var(--sf-brand);color:#fff}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-plan-hd{border-bottom-color:rgba(255,255,255,.2)}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-plan-name,#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-plan-price .amt,#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-perk{color:#fff}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-plan-tier{color:rgba(255,255,255,.8)}
#page-storefront[data-archetype="gym-warm"] .sf-plan-tag{border-radius:12px;left:50%;transform:translateX(-50%);background:var(--sf-accent,var(--sf-brand))}
#page-storefront[data-archetype="gym-warm"] .sf-perk .ck{border-radius:8px}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-perk .ck{background:rgba(255,255,255,.22);color:#fff}
#page-storefront[data-archetype="gym-warm"] .sf-plan-join{border-radius:16px;box-shadow:var(--sf-shadow-sm,0 8px 18px rgba(200,98,45,.26))}
#page-storefront[data-archetype="gym-warm"] .sf-plan.feat .sf-plan-join{background:#fff;color:var(--sf-brand)}
#page-storefront[data-archetype="gym-warm"] .sf-acct{background:transparent;border:none}
#page-storefront[data-archetype="gym-warm"] .sf-acct-in{background:var(--sf-white);border-radius:30px;box-shadow:var(--sf-shadow-lg,0 20px 46px rgba(58,49,40,.09));padding:40px;margin:20px 0}
#page-storefront[data-archetype="gym-warm"] .sf-acct-status{border:none;border-radius:0;background:transparent;padding:0}
#page-storefront[data-archetype="gym-warm"] .sf-acct-status .row{border:none;background:var(--sf-brand-tint);border-radius:16px;padding:12px 16px;margin-bottom:10px}
#page-storefront[data-archetype="gym-warm"] .sf-acct-r{border:none;border-radius:24px;box-shadow:var(--sf-shadow-sm,0 8px 22px rgba(58,49,40,.06))}
#page-storefront[data-archetype="gym-warm"] .sf-acct-benefit .bi{border-radius:14px}
#page-storefront[data-archetype="gym-warm"] .sf-acct-cta{border-radius:16px}
#page-storefront[data-archetype="gym-warm"] .sf-quote{border:none;border-radius:24px;box-shadow:var(--sf-shadow-md,0 10px 26px rgba(58,49,40,.07))}
#page-storefront[data-archetype="gym-warm"] .sf-gym-joincta{border-radius:30px;flex-direction:column;text-align:center;padding:52px}
#page-storefront[data-archetype="gym-warm"] .sf-gym-joincta .btn-cta{border-radius:20px}

/* ── gym-utility — data-forward dashboard: 2px radius, 1px gridlines, dense metric tiles, mono
     numerics, hard state flip, tight gutters (utility sample: .mtiles, .plantable, .statgrid). ── */
#page-storefront[data-archetype="gym-utility"] .sf-gym-hero{background:var(--sf-white);border-bottom:1px solid var(--sf-line);padding:32px 0}
#page-storefront[data-archetype="gym-utility"] .sf-gym-stats{gap:1px;background:var(--sf-line);border:1px solid var(--sf-line);border-radius:2px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#page-storefront[data-archetype="gym-utility"] .sf-gym-stats .gst{background:var(--sf-white);padding:14px 16px}
#page-storefront[data-archetype="gym-utility"] .sf-gym-stats .gst-n{font-family:var(--sf-font-numeric);font-size:26px}
#page-storefront[data-archetype="gym-utility"] .sf-gym-sec-hd{border-bottom:2px solid var(--sf-ink);padding-bottom:10px}
#page-storefront[data-archetype="gym-utility"] .sf-gym-sec-hd h2{text-transform:uppercase;letter-spacing:.02em}
#page-storefront[data-archetype="gym-utility"] .sf-fac{border:1px solid var(--sf-line);border-radius:2px;box-shadow:none;padding:16px}
#page-storefront[data-archetype="gym-utility"] .sf-fac:hover{transform:none;border-color:var(--sf-brand)}
#page-storefront[data-archetype="gym-utility"] .sf-fac-ic{border-radius:2px;width:38px;height:38px;font-size:18px;margin-bottom:10px}
#page-storefront[data-archetype="gym-utility"] .sf-plans{gap:1px;background:var(--sf-line);border:1px solid var(--sf-line);border-radius:2px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
#page-storefront[data-archetype="gym-utility"] .sf-plan{border:none;border-radius:0;box-shadow:none;background:var(--sf-white)}
#page-storefront[data-archetype="gym-utility"] .sf-plan:hover{transform:none}
#page-storefront[data-archetype="gym-utility"] .sf-plan.feat{background:var(--sf-brand-light)}
#page-storefront[data-archetype="gym-utility"] .sf-plan-hd{background:var(--sf-slate,var(--sf-ink));padding:14px 16px}
#page-storefront[data-archetype="gym-utility"] .sf-plan-name{color:#fff;font-size:16px}
#page-storefront[data-archetype="gym-utility"] .sf-plan.feat .sf-plan-hd{background:var(--sf-brand)}
#page-storefront[data-archetype="gym-utility"] .sf-plan-tier{color:#8aa}
#page-storefront[data-archetype="gym-utility"] .sf-plan-body{padding:16px;gap:12px}
#page-storefront[data-archetype="gym-utility"] .sf-plan-price .amt{font-family:var(--sf-font-numeric);font-size:30px}
#page-storefront[data-archetype="gym-utility"] .sf-plan-tag{border-radius:2px;top:0;left:0;font-size:9px;padding:3px 7px}
#page-storefront[data-archetype="gym-utility"] .sf-perk{font-size:12.5px}
#page-storefront[data-archetype="gym-utility"] .sf-perk .ck{border-radius:2px;width:16px;height:16px;font-size:10px}
#page-storefront[data-archetype="gym-utility"] .sf-plan-join{border-radius:2px;background:var(--sf-slate,var(--sf-ink));font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.03em}
#page-storefront[data-archetype="gym-utility"] .sf-plan.feat .sf-plan-join{background:var(--sf-brand)}
#page-storefront[data-archetype="gym-utility"] .sf-acct{background:var(--sf-white)}
#page-storefront[data-archetype="gym-utility"] .sf-acct-status{border-radius:2px}
#page-storefront[data-archetype="gym-utility"] .sf-acct-status .row .v{font-family:var(--sf-font-numeric)}
#page-storefront[data-archetype="gym-utility"] .sf-acct-r{border-radius:2px}
#page-storefront[data-archetype="gym-utility"] .sf-acct-cta{border-radius:2px;text-transform:uppercase;font-size:12px}
#page-storefront[data-archetype="gym-utility"] .sf-quote{border-radius:2px;box-shadow:none}
#page-storefront[data-archetype="gym-utility"] .sf-quote .qm{font-family:var(--sf-font-numeric)}
#page-storefront[data-archetype="gym-utility"] .sf-gym-joincta{border-radius:2px;background:var(--sf-slate,var(--sf-ink))}
#page-storefront[data-archetype="gym-utility"] .sf-gym-joincta .btn-cta{border-radius:2px;background:var(--sf-brand);color:#fff}
/* ═══════════ end FIX_P3V2_GYM_2026_07_08 gym archetype CSS ═══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   FIX_P3V3_SERVICES_2026_07_08 — BASE SERVICES SHAPE CSS (P3-V3). The token-consuming base
   stylesheet for the SHAPE_services DOM (.sf-svc-hero / .sf-svc-ethos / .sf-svc-row / .sf-svc-
   tgrid / .sf-svc-about / .sf-svc-quote) that renderServicesHome / renderServicesIndex emit
   (SF IIFE L233340-region). Mirrors the base .sf-gym-* / .sf-menu-* blocks: every rule reads
   var(--sf-*) (palette/type/shape/depth) — NO hardcoded fonts/colours — so all 4 services
   directions restyle the surface FOR FREE via emitTokenCss + the [data-archetype="services-*"]
   blocks below. This is what lets SHAPE_services × DIRECTION_services_bold look distinct from
   × DIRECTION_services_editorial. ADDITIVE: retail + restaurant + gym CSS untouched → parity
   preserved. ══════════════════════════════════════════════════════════════════════════════ */
/* hero */
#page-storefront .sf-svc-hero{background:linear-gradient(135deg,var(--sf-brand-tint,#f3fafb),var(--sf-white,#fff));border-bottom:1px solid var(--sf-line,#e6ecee);padding:72px 0 60px}
#page-storefront .sf-svc-hero-grid{display:grid;grid-template-columns:var(--sf-hero-cols,1.15fr .85fr);gap:var(--sf-hero-gap,56px);align-items:center}
#page-storefront .sf-svc-hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sf-muted,#6b8189);margin-bottom:22px}
#page-storefront .sf-svc-hero h1{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(34px,6vw,var(--sf-fs-hero,60px));font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);letter-spacing:var(--sf-letter-spacing,-.02em);line-height:var(--sf-line-height-display,1.02);margin-bottom:24px}
#page-storefront .sf-svc-hero .svc-hero-l p{font-size:17px;color:var(--sf-ink-2,#3d5560);max-width:470px;line-height:1.55;margin-bottom:32px}
#page-storefront .sf-svc-hero .svc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#page-storefront .sf-svc-hero .btn-solid{background:var(--sf-ink,#0f2730);color:var(--sf-bg,#fff);padding:15px 30px;border-radius:var(--sf-radius,12px);font-size:15px;font-weight:700;cursor:pointer;border:none;text-transform:var(--sf-case,none)}
#page-storefront .sf-svc-hero .btn-solid:hover{background:var(--sf-brand,#0d7a8f)}
#page-storefront .sf-svc-hero .btn-line{background:transparent;color:var(--sf-ink,#0f2730);padding:15px 18px;border:none;border-bottom:1px solid var(--sf-ink,#0f2730);font-size:15px;font-weight:600;cursor:pointer}
#page-storefront .sf-svc-hero .svc-hero-r{aspect-ratio:4/5;background:var(--sf-brand-light,#e6f4f7);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);display:flex;align-items:flex-end;padding:32px}
#page-storefront .sf-svc-hero .svc-hero-cap{font-family:var(--sf-font-display,inherit);font-size:21px;font-weight:var(--sf-weight-display,600);line-height:1.25;color:var(--sf-ink-2,#3d5560)}
/* ethos strip */
#page-storefront .sf-svc-ethos{padding:56px 0;border-bottom:1px solid var(--sf-line-2,#eef2f3)}
#page-storefront .sf-svc-ethos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
#page-storefront .svc-ethos-item .svc-ethos-num{font-family:var(--sf-font-display,inherit);font-size:15px;color:var(--sf-brand);font-weight:700;margin-bottom:14px}
#page-storefront .svc-ethos-item h4{font-family:var(--sf-font-display,inherit);font-size:20px;font-weight:var(--sf-weight-display,700);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);margin-bottom:10px}
#page-storefront .svc-ethos-item p{font-size:14.5px;color:var(--sf-muted,#6b8189);line-height:1.5}
/* generic section head (shared) */
#page-storefront .sf-svc-sec{padding:56px 0}
#page-storefront .sf-svc-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px}
#page-storefront .sf-svc-sec-hd .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-svc-sec-hd h2{font-family:var(--sf-font-display,'Manrope','Inter',sans-serif);font-size:clamp(24px,3.6vw,var(--sf-fs-h2,42px));font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);letter-spacing:var(--sf-letter-spacing,-.01em)}
/* services index (editorial index rows) */
#page-storefront .sf-svc-list{border-top:1px solid var(--sf-line,#e6ecee)}
#page-storefront .sf-svc-row{display:grid;grid-template-columns:60px 1.1fr 1.4fr auto auto;gap:32px;align-items:center;padding:30px 4px;border-bottom:1px solid var(--sf-line-2,#eef2f3);transition:.25s ease;cursor:pointer}
#page-storefront .sf-svc-row:hover{background:var(--sf-white,#fff);padding-left:18px;padding-right:18px}
#page-storefront .sf-svc-row .svc-idx{font-family:var(--sf-font-numeric,var(--sf-font-display,inherit));font-size:16px;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-svc-row .svc-nm{font-family:var(--sf-font-display,inherit);font-size:24px;font-weight:var(--sf-weight-display,700);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);line-height:1.1}
#page-storefront .sf-svc-row .svc-nm .svc-cat{display:block;font-family:var(--sf-font-body,inherit);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-muted,#6b8189);margin-bottom:7px;font-weight:600}
#page-storefront .sf-svc-row .svc-ds{font-size:14px;color:var(--sf-muted,#6b8189);line-height:1.5}
#page-storefront .sf-svc-row .svc-pr{text-align:right}
#page-storefront .sf-svc-row .svc-pr .svc-pr-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted,#6b8189)}
#page-storefront .sf-svc-row .svc-pr .svc-pr-val{font-family:var(--sf-font-numeric,var(--sf-font-display,inherit));font-size:22px;font-weight:800;color:var(--sf-price,var(--sf-brand))}
#page-storefront .sf-svc-row .svc-pr .svc-pr-quote{font-family:var(--sf-font-display,inherit);font-style:italic;font-size:19px;color:var(--sf-brand)}
#page-storefront .sf-svc-row .svc-arw{font-size:18px;color:var(--sf-ink-2,#3d5560);transition:transform .25s ease}
#page-storefront .sf-svc-row:hover .svc-arw{transform:translateX(7px)}
#page-storefront .sf-svc-empty{padding:40px;text-align:center;color:var(--sf-muted,#6b8189);border:1px dashed var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);font-size:14px}
#page-storefront .sf-svc-stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:28px}
#page-storefront .sf-svc-stats .svc-st{display:flex;flex-direction:column}
#page-storefront .sf-svc-stats .svc-st-n{font-family:var(--sf-font-numeric,var(--sf-font-display,inherit));font-size:26px;font-weight:800;color:var(--sf-brand)}
#page-storefront .sf-svc-stats .svc-st-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted,#6b8189)}
/* testimonials */
#page-storefront .sf-svc-tsec{padding:56px 0;border-top:1px solid var(--sf-line-2,#eef2f3)}
#page-storefront .sf-svc-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#page-storefront .svc-tcard{background:var(--sf-white,#fff);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);box-shadow:var(--sf-card-shadow,none);padding:36px 30px;display:flex;flex-direction:column;transition:.25s ease}
#page-storefront .svc-tcard:hover{transform:translateY(-4px)}
#page-storefront .svc-tcard .svc-mk{font-family:var(--sf-font-display,inherit);font-size:44px;color:var(--sf-brand);line-height:.5;height:24px;margin-bottom:16px}
#page-storefront .svc-tcard .svc-tq{font-family:var(--sf-font-display,inherit);font-size:18px;font-weight:var(--sf-weight-body,400);line-height:1.4;color:var(--sf-ink,#0f2730);margin-bottom:24px}
#page-storefront .svc-tcard .svc-who{margin-top:auto;padding-top:18px;border-top:1px solid var(--sf-line-2,#eef2f3)}
#page-storefront .svc-tcard .svc-who b{display:block;font-size:14px;font-weight:700;color:var(--sf-ink,#0f2730)}
#page-storefront .svc-tcard .svc-who span{font-size:12.5px;color:var(--sf-muted,#6b8189)}
/* about */
#page-storefront .sf-svc-about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;padding:56px 0}
#page-storefront .sf-svc-about .svc-about-l{aspect-ratio:5/4;background:var(--sf-brand-light,#e6f4f7);border:1px solid var(--sf-line,#e6ecee);border-radius:var(--sf-radius,14px);display:flex;align-items:flex-end;padding:32px}
#page-storefront .sf-svc-about .svc-about-cap{font-family:var(--sf-font-display,inherit);font-size:20px;font-weight:var(--sf-weight-body,400);color:var(--sf-ink-2,#3d5560);line-height:1.3}
#page-storefront .sf-svc-about .svc-about-r .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-muted,#6b8189);margin-bottom:18px}
#page-storefront .sf-svc-about .svc-about-r h2{font-family:var(--sf-font-display,inherit);font-size:clamp(26px,3.4vw,var(--sf-fs-h2,40px));font-weight:var(--sf-weight-display,800);color:var(--sf-ink,#0f2730);text-transform:var(--sf-case,none);margin-bottom:22px;letter-spacing:var(--sf-letter-spacing,-.02em)}
#page-storefront .sf-svc-about .svc-about-r p{font-size:15.5px;color:var(--sf-ink-2,#3d5560);line-height:1.55;margin-bottom:16px;max-width:520px}
/* quote (DP-3 forward-promise placeholder — NON-transactional) */
#page-storefront .sf-svc-quote{background:var(--sf-ink,#0f2730);color:var(--sf-bg,#f3fafb);padding:80px 0}
#page-storefront .sf-svc-quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
#page-storefront .sf-svc-quote .eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-brand);opacity:.85;margin-bottom:24px}
#page-storefront .sf-svc-quote .svc-quote-l h2{font-family:var(--sf-font-display,inherit);font-size:clamp(28px,3.6vw,44px);font-weight:var(--sf-weight-display,800);color:#fff;line-height:1.1;margin-bottom:22px;text-transform:var(--sf-case,none)}
#page-storefront .sf-svc-quote .svc-quote-l p{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.55;max-width:440px;margin-bottom:28px}
#page-storefront .sf-svc-quote .svc-quote-line{font-size:14.5px;color:rgba(255,255,255,.72);margin-bottom:12px}
#page-storefront .sf-svc-quote .svc-quote-line b{color:#fff;font-weight:700}
#page-storefront .sf-svc-quote .svc-quote-r{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--sf-radius,14px);padding:32px}
#page-storefront .sf-svc-quote .svc-quote-r h3{font-family:var(--sf-font-display,inherit);font-size:22px;font-weight:var(--sf-weight-display,700);color:#fff;margin-bottom:14px;text-transform:var(--sf-case,none)}
#page-storefront .sf-svc-quote .svc-quote-note{font-size:14px;color:rgba(255,255,255,.66);line-height:1.55;margin-bottom:24px}
#page-storefront .sf-svc-quote .btn-solid{background:var(--sf-brand);color:var(--sf-ink,#0f2730);padding:15px 28px;border-radius:var(--sf-radius,12px);font-size:15px;font-weight:800;cursor:pointer;border:none;text-transform:var(--sf-case,none)}
#page-storefront .sf-svc-quote .btn-solid:hover{background:var(--sf-brand-dark)}
@media(max-width:900px){#page-storefront .sf-svc-hero-grid,#page-storefront .sf-svc-ethos-grid,#page-storefront .sf-svc-tgrid,#page-storefront .sf-svc-about,#page-storefront .sf-svc-quote-grid{grid-template-columns:1fr;gap:40px}#page-storefront .sf-svc-row{grid-template-columns:1fr;gap:10px}#page-storefront .sf-svc-row .svc-pr{text-align:left}}

/* ═══════════ FIX_P3V3_SERVICES_2026_07_08 — SERVICES ARCHETYPE CSS (P3-V3) ═══════════
   4 [data-archetype="services-*"] scoped blocks styling the SHAPE_services DOM beyond what the
   --sf-* tokens already carry, so each direction's LAYOUT STRUCTURE differs (NOT a recolour).
   CSS-over-shipped-DOM ONLY: NO renderer body touched, NO new DOM. Each reads var(--sf-*) so
   applyChrome's brand override still cascades. Retail + restaurant + gym archetype blocks untouched. ══ */

/* ── services-bold — volt-on-black high-energy: hard 0px corners, thick borders, block/offset
     shadows, snappy hover-translate, condensed ALL-CAPS (bold sample: .hero ink slab, block shadows). ── */
#page-storefront[data-archetype="services-bold"] .sf-svc-hero{background:var(--sf-ink);border-bottom:5px solid var(--sf-brand);color:#fff}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero h1{color:#fff}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero h1 em{color:var(--sf-brand);font-style:normal}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .svc-hero-l p{color:#c9c9c4;font-weight:700}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .eyebrow{background:var(--sf-accent,#ff3b1d);color:#fff;display:inline-block;padding:6px 14px;letter-spacing:.05em}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .btn-solid{background:var(--sf-brand);color:var(--sf-ink);border:3px solid var(--sf-brand);box-shadow:6px 6px 0 var(--sf-accent);font-weight:900}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .btn-solid:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sf-accent)}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .btn-line{color:var(--sf-brand);border-bottom:3px solid var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .svc-hero-r{background:var(--sf-brand);border:4px solid #fff;border-radius:0}
#page-storefront[data-archetype="services-bold"] .sf-svc-hero .svc-hero-cap{color:var(--sf-ink);font-weight:800}
#page-storefront[data-archetype="services-bold"] .sf-svc-ethos{border-bottom:5px solid var(--sf-ink)}
#page-storefront[data-archetype="services-bold"] .svc-ethos-item{border:3px solid var(--sf-ink);padding:24px;background:var(--sf-white)}
#page-storefront[data-archetype="services-bold"] .svc-ethos-item .svc-ethos-num{color:var(--sf-accent)}
#page-storefront[data-archetype="services-bold"] .sf-svc-sec-hd{border-bottom:5px solid var(--sf-ink);padding-bottom:14px}
#page-storefront[data-archetype="services-bold"] .sf-svc-list{border-top:5px solid var(--sf-ink)}
#page-storefront[data-archetype="services-bold"] .sf-svc-row{border-bottom:3px solid var(--sf-ink)}
#page-storefront[data-archetype="services-bold"] .sf-svc-row:hover{background:var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .sf-svc-row .svc-pr-quote{font-style:normal;font-weight:900;text-transform:uppercase}
#page-storefront[data-archetype="services-bold"] .sf-svc-stats .svc-st-n{color:var(--sf-ink)}
#page-storefront[data-archetype="services-bold"] .svc-tcard{border:4px solid var(--sf-ink);border-radius:0;box-shadow:6px 6px 0 var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .svc-tcard:hover{transform:translate(-2px,-2px)}
#page-storefront[data-archetype="services-bold"] .sf-svc-about .svc-about-l{border:4px solid var(--sf-ink);border-radius:0;background:var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .sf-svc-quote{border-top:5px solid var(--sf-brand);border-bottom:5px solid var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .sf-svc-quote .svc-quote-r{border-radius:0;border:3px solid var(--sf-brand)}
#page-storefront[data-archetype="services-bold"] .sf-svc-quote .btn-solid{border-radius:0;box-shadow:5px 5px 0 var(--sf-accent)}

/* ── services-editorial — asymmetric magazine: hairline rules, NO radius/shadow, luxurious sparse
     spacing, light serif, huge margins (editorial sample: .slist index rows, hairline .srow). ── */
#page-storefront[data-archetype="services-editorial"] .sf-svc-hero{background:var(--sf-bg);border-bottom:1px solid var(--sf-line-2);padding:100px 0 84px}
#page-storefront[data-archetype="services-editorial"] .sf-svc-hero h1{font-weight:300}
#page-storefront[data-archetype="services-editorial"] .sf-svc-hero .svc-hero-r{border-radius:0;background:var(--sf-brand-light)}
#page-storefront[data-archetype="services-editorial"] .sf-svc-hero .btn-solid{border-radius:0}
#page-storefront[data-archetype="services-editorial"] .sf-svc-sec-hd h2{font-weight:300}
#page-storefront[data-archetype="services-editorial"] .svc-ethos-item .svc-ethos-num{font-family:var(--sf-font-display);font-style:italic}
#page-storefront[data-archetype="services-editorial"] .svc-ethos-item h4{font-weight:400}
#page-storefront[data-archetype="services-editorial"] .sf-svc-row .svc-nm{font-weight:300}
#page-storefront[data-archetype="services-editorial"] .sf-svc-row .svc-pr-val{font-weight:400}
#page-storefront[data-archetype="services-editorial"] .sf-svc-tgrid{gap:1px;background:var(--sf-line-2);border:1px solid var(--sf-line-2)}
#page-storefront[data-archetype="services-editorial"] .svc-tcard{border:none;border-radius:0;box-shadow:none;background:var(--sf-bg)}
#page-storefront[data-archetype="services-editorial"] .svc-tcard:hover{transform:none;background:var(--sf-white)}
#page-storefront[data-archetype="services-editorial"] .svc-tcard .svc-tq{font-style:italic;font-weight:300}
#page-storefront[data-archetype="services-editorial"] .sf-svc-about .svc-about-l{border-radius:0}
#page-storefront[data-archetype="services-editorial"] .sf-svc-about .svc-about-r h2{font-weight:300}
#page-storefront[data-archetype="services-editorial"] .sf-svc-quote{padding:100px 0}
#page-storefront[data-archetype="services-editorial"] .sf-svc-quote .svc-quote-l h2{font-family:var(--sf-font-display);font-weight:300}
#page-storefront[data-archetype="services-editorial"] .sf-svc-quote .svc-quote-r{border-radius:0;background:transparent;border:none;border-top:1px solid rgba(255,255,255,.2);padding:28px 0 0}
#page-storefront[data-archetype="services-editorial"] .sf-svc-quote .btn-solid{border-radius:0}

/* ── services-warm — friendly community: big pill radius, soft layered shadows, rounded blobs,
     gentle lift-on-hover, centred hero card (warm sample: .hero-card blob, soft .feat cards). ── */
#page-storefront[data-archetype="services-warm"] .sf-svc-hero{background:transparent;border-bottom:none;padding:36px 0 20px}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero-grid{grid-template-columns:1fr}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .svc-hero-l{background:linear-gradient(135deg,var(--sf-brand-light),var(--sf-brand-tint));border-radius:36px;padding:56px 48px;text-align:center;position:relative;overflow:hidden}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .svc-hero-l p{margin-left:auto;margin-right:auto}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .svc-hero-cta{justify-content:center}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .btn-solid{background:var(--sf-brand);border-radius:26px;box-shadow:var(--sf-shadow-md)}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .btn-line{background:var(--sf-white);color:var(--sf-accent);border-radius:26px;border-bottom:none;box-shadow:var(--sf-shadow-sm)}
#page-storefront[data-archetype="services-warm"] .sf-svc-hero .svc-hero-r{display:none}
#page-storefront[data-archetype="services-warm"] .sf-svc-sec-hd{flex-direction:column;align-items:center;text-align:center}
#page-storefront[data-archetype="services-warm"] .svc-ethos-item{background:var(--sf-white);border-radius:24px;padding:28px;box-shadow:var(--sf-shadow-sm);text-align:center}
#page-storefront[data-archetype="services-warm"] .sf-svc-list{border-top:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
#page-storefront[data-archetype="services-warm"] .sf-svc-row{border-bottom:none;background:var(--sf-white);border-radius:24px;box-shadow:var(--sf-shadow-sm);grid-template-columns:auto 1fr;gap:14px;padding:24px}
#page-storefront[data-archetype="services-warm"] .sf-svc-row:hover{padding:24px;transform:translateY(-4px);box-shadow:var(--sf-shadow-lg)}
#page-storefront[data-archetype="services-warm"] .sf-svc-row .svc-ds,#page-storefront[data-archetype="services-warm"] .sf-svc-row .svc-arw{display:none}
#page-storefront[data-archetype="services-warm"] .sf-svc-row .svc-idx{background:var(--sf-brand-light);color:var(--sf-brand);border-radius:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
#page-storefront[data-archetype="services-warm"] .sf-svc-row .svc-pr{text-align:left;grid-column:2}
#page-storefront[data-archetype="services-warm"] .svc-tcard{border:none;border-radius:24px;box-shadow:var(--sf-shadow-md)}
#page-storefront[data-archetype="services-warm"] .sf-svc-about .svc-about-l{border:none;border-radius:30px;box-shadow:var(--sf-shadow-md)}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote{background:var(--sf-brand);border-radius:36px;margin:20px 32px 40px}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote .eyebrow{color:#fff;opacity:.85}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote .svc-quote-r{background:var(--sf-white);border:none;border-radius:24px}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote .svc-quote-r h3{color:var(--sf-ink)}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote .svc-quote-note{color:var(--sf-ink-2)}
#page-storefront[data-archetype="services-warm"] .sf-svc-quote .btn-solid{background:var(--sf-brand);color:#fff;border-radius:26px}

/* ── services-utility — data-forward table: 2-3px radius, 1px gridlines, dense table rows, mono
     numerics, hard state flip, slate header, tight gutters (utility sample: .stbl table, .hero slate). ── */
#page-storefront[data-archetype="services-utility"] .sf-svc-hero{background:var(--sf-slate,var(--sf-ink));border-bottom:2px solid var(--sf-accent);padding:36px 0;color:#fff}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero h1{color:#fff}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .eyebrow{font-family:var(--sf-font-numeric);color:var(--sf-accent)}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .svc-hero-l p{color:#94a3b8}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .btn-solid{border-radius:3px;background:var(--sf-accent);color:#fff}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .btn-line{color:var(--sf-accent);border-bottom:1px solid var(--sf-accent)}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .svc-hero-r{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:3px;aspect-ratio:16/10}
#page-storefront[data-archetype="services-utility"] .sf-svc-hero .svc-hero-cap{color:#cbd5e1;font-size:15px}
#page-storefront[data-archetype="services-utility"] .sf-svc-ethos-grid{gap:1px;background:var(--sf-line);border:1px solid var(--sf-line)}
#page-storefront[data-archetype="services-utility"] .svc-ethos-item{background:var(--sf-white);padding:22px}
#page-storefront[data-archetype="services-utility"] .sf-svc-sec-hd{border-bottom:2px solid var(--sf-slate,var(--sf-ink));padding-bottom:10px}
#page-storefront[data-archetype="services-utility"] .sf-svc-sec-hd h2{text-transform:uppercase;letter-spacing:.02em}
#page-storefront[data-archetype="services-utility"] .sf-svc-list{border:1px solid var(--sf-line);border-radius:3px;overflow:hidden}
#page-storefront[data-archetype="services-utility"] .sf-svc-row{border-bottom:1px solid var(--sf-line);padding:14px 16px;gap:20px;background:var(--sf-white)}
#page-storefront[data-archetype="services-utility"] .sf-svc-row:nth-child(even){background:var(--sf-bg)}
#page-storefront[data-archetype="services-utility"] .sf-svc-row:hover{background:var(--sf-brand-light);padding-left:16px;padding-right:16px}
#page-storefront[data-archetype="services-utility"] .sf-svc-row .svc-idx{font-family:var(--sf-font-numeric);font-size:13px}
#page-storefront[data-archetype="services-utility"] .sf-svc-row .svc-nm{font-size:16px;font-weight:600}
#page-storefront[data-archetype="services-utility"] .sf-svc-row .svc-pr-val{font-family:var(--sf-font-numeric);font-size:18px}
#page-storefront[data-archetype="services-utility"] .sf-svc-row .svc-pr-quote{font-family:var(--sf-font-numeric);font-style:normal;font-size:14px;text-transform:uppercase}
#page-storefront[data-archetype="services-utility"] .sf-svc-stats{gap:1px;background:var(--sf-line);border:1px solid var(--sf-line);border-radius:3px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:20px}
#page-storefront[data-archetype="services-utility"] .sf-svc-stats .svc-st{background:var(--sf-white);padding:14px 16px}
#page-storefront[data-archetype="services-utility"] .sf-svc-stats .svc-st-n{font-family:var(--sf-font-numeric)}
#page-storefront[data-archetype="services-utility"] .svc-tcard{border:1px solid var(--sf-line);border-radius:3px;box-shadow:none}
#page-storefront[data-archetype="services-utility"] .svc-tcard:hover{transform:none;border-color:var(--sf-brand)}
#page-storefront[data-archetype="services-utility"] .sf-svc-about .svc-about-l{border-radius:3px}
#page-storefront[data-archetype="services-utility"] .sf-svc-quote{background:var(--sf-slate,var(--sf-ink));padding:56px 0}
#page-storefront[data-archetype="services-utility"] .sf-svc-quote .svc-quote-r{border-radius:3px}
#page-storefront[data-archetype="services-utility"] .sf-svc-quote .btn-solid{border-radius:3px}
/* S3.6 -- storefront category tile. Scoped per the storefront's own established convention
   (#page-storefront .breadcrumb a, .footer-col a, .cart-continue all page-ID-scoped). Zero
   CSS rules targeted this class before this fix. */
#page-storefront .catrow { cursor: pointer; }