/* store.html — extracted CSS (sprint 14 ship 37 2026-05-30). Was inline <style> in store.html. Non-functional move. */

:root {
      --g900:#071F17; --g800:#0A3D2E; --g700:#0F5A43; --g600:#1A7A5E; --g500:#26A07A;
      --acc:#00E5A0; --acc2:#00C896;
      --lite:#F0FBF6; --lite2:#E3F7EE;
      --white:#FFFFFF; --ink:#0A1F16; --ink2:#2E5045; --mute:#7A9E8E; --mute2:#B0CCBF;
      --bg:#F2F8F5; --warn:#F59E0B; --danger:#EF4444; --info:#3B82F6;
      --shadow:0 1px 12px rgba(10,61,46,0.08);
      --shadow-md:0 4px 24px rgba(10,61,46,0.12);
      --r:16px; --r-sm:10px; --r-lg:24px;
      --font:'Plus Jakarta Sans',sans-serif; --mono:'DM Mono',monospace;
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{height:100%;background:var(--g800);font-family:var(--font);color:var(--ink)}
    #shell{position:relative;width:480px;max-width:100%;min-height:100dvh;margin:0 auto;background:var(--bg);overflow:hidden}
    @media(max-width:520px){body{background:var(--bg)}}

    .scr{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
    .scr.on{display:flex}

    /* header */
    .storefront-hdr{background:var(--g800);padding:20px 16px;flex-shrink:0;color:var(--white)}
    .sf-biz-name{font-size:22px;font-weight:900;letter-spacing:-0.5px}
    .sf-biz-sub{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px;font-weight:500}

    /* catalog */
    .cat-body{flex:1;padding:16px;overflow-y:auto}
    .grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}
    .pc{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .1s;border:none;font-family:var(--font);text-align:left;display:flex;flex-direction:column;min-width:0}
    .pc:active{transform:translateY(0);box-shadow:var(--shadow)}
    .pc:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
    .pc .img{aspect-ratio:1/1;background:var(--lite2);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:42px;color:var(--mute2)}
    .pc .info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
    .pc .name{font-size:13px;font-weight:700;color:var(--g800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .pc .prod-desc{font-size:11px;color:var(--mute);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .pc .prod-spec{font-size:11px;color:var(--g600);font-weight:600;font-family:var(--mono);letter-spacing:0.2px}
    .pc .row{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
    .pc .price{font-family:var(--mono);color:var(--g700);font-weight:700;font-size:13px}
    .pc .stock{font-size:11px;color:var(--mute)}
    .pc .stock.out{color:var(--danger);font-weight:700}
    .pc .stock.low{color:var(--warn);font-weight:600}

    /* loading / empty */
    .loading,.empty{padding:48px 20px;text-align:center;color:var(--mute);font-size:13px}
    .empty .icon{font-size:42px;opacity:.5;margin-bottom:8px}

    /* cart fab — STORE-1/2 (2026-06-26): bottom-LEFT on ALL widths; WhatsApp FAB owns bottom-right.
       Was right:50%+translateX(246px) (brittle PC offset, mis-placed on wide screens) + a mobile @media
       that forced right:20px → it overlapped the WhatsApp button (STORE-1). One clean left:20px;bottom:20px
       fixes phone AND PC consistently; the @media override is removed (no longer needed). */
    .cart-fab{position:fixed;left:20px;right:auto;bottom:20px;transform:none;background:var(--g800);color:var(--white);border:none;width:56px;height:56px;border-radius:50%;box-shadow:var(--shadow-lg, var(--shadow-md));cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:50}
    .cart-fab:hover{background:var(--g700)}
    .cart-fab .count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--acc2);color:var(--g900);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
    .cart-fab .count:empty{display:none}

    /* cart modal */
    .modal{position:fixed;inset:0;background:rgba(7,31,23,0.5);display:none;align-items:flex-end;justify-content:center;z-index:100}
    .modal.on{display:flex}
    .sheet{background:var(--bg);width:100%;max-width:480px;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;flex-direction:column;overflow:hidden;animation:slideup .2s ease-out}
    @keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
    .sheet-hdr{padding:16px;background:var(--white);border-bottom:1px solid var(--lite2);display:flex;align-items:center;gap:12px}
    .sheet-hdr h2{flex:1;font-size:16px;font-weight:800;color:var(--g800)}
    .sheet-body{flex:1;overflow-y:auto;padding:16px}
    .sheet-footer{padding:16px;background:var(--white);border-top:1px solid var(--lite2);display:flex;flex-direction:column;gap:8px}
    .tb-back{width:36px;height:36px;border-radius:8px;background:var(--lite);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--g800)}

    /* cart items */
    .ci{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--lite2)}
    .ci:last-child{border-bottom:none}
    .ci .img{width:56px;height:56px;border-radius:var(--r-sm);background:var(--lite2) center/cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--mute2)}
    .ci .body{flex:1;min-width:0}
    .ci .name{font-size:13px;font-weight:700;color:var(--g800);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ci .subtotal{font-family:var(--mono);color:var(--g700);font-weight:700;font-size:12px}
    .qty-ctl{display:flex;align-items:center;gap:8px;margin-top:4px}
    .qty-ctl button{width:28px;height:28px;border:1px solid var(--mute2);background:var(--white);border-radius:6px;cursor:pointer;font-size:14px;color:var(--g800);display:flex;align-items:center;justify-content:center;font-family:var(--font)}
    .qty-ctl button:hover{background:var(--lite)}
    .qty-ctl .qty{min-width:24px;text-align:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--g800)}
    .ci .rm{background:transparent;border:none;color:var(--danger);font-size:11px;font-weight:700;cursor:pointer;padding:4px 0}

    .total-row{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:800;color:var(--g800);padding:4px 0}
    .total-row .amt{font-family:var(--mono)}

    /* form (reuse index.html tokens) */
    .fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
    label{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:0.4px;text-transform:uppercase}
    input[type=tel],input[type=text],input[type=email],textarea{width:100%;min-height:48px;border-radius:var(--r-sm);border:1.5px solid var(--mute2);background:var(--bg);font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);padding:12px 14px;outline:none;transition:border-color .15s;resize:vertical;box-sizing:border-box}
    input:focus,textarea:focus{border-color:var(--acc2);background:var(--white)}
    input.err,textarea.err{border-color:var(--danger)}
    .ferr{font-size:12px;color:var(--danger);font-weight:600;min-height:0}
    textarea{font-family:var(--font);min-height:72px}

    /* buttons */
    .btn{width:100%;height:52px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:800;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}
    .btn-p{background:var(--g800);color:var(--white)}
    .btn-p:hover{background:var(--g700)}
    .btn-p:disabled{background:var(--mute2);cursor:not-allowed}
    .btn-g{background:transparent;color:var(--g700);font-weight:600}

    /* toast */
    #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center}
    .t{background:var(--g900);color:var(--white);font-size:13px;font-weight:600;padding:12px 20px;border-radius:var(--r);box-shadow:var(--shadow-md);white-space:nowrap}
    .t.danger{background:var(--danger)}
    .t.ok{background:var(--g700)}

    /* confirmation */
    .conf-body{padding:40px 20px;text-align:center}
    .conf-icon{font-size:54px;margin-bottom:16px}
    .conf-num{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--g800);background:var(--lite2);padding:10px 18px;border-radius:var(--r);display:inline-block;margin:12px 0;letter-spacing:1px}
    .conf-hint{font-size:13px;color:var(--mute);line-height:1.6;margin-bottom:20px}
    .bank-card{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);text-align:left;margin-top:18px}
    .bank-card h3{font-size:13px;font-weight:700;color:var(--g800);margin-bottom:8px}
    .bank-card .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
    .bank-card .row .k{color:var(--mute);font-weight:500}
    .bank-card .row .v{font-family:var(--mono);color:var(--ink);font-weight:700}
    .rcpt-actions{display:flex;flex-direction:column;gap:8px;padding:16px 0 4px;max-width:360px;margin:0 auto}
    .btn{width:100%;height:48px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
    .btn-p{background:#0A3D2E;color:#FFFFFF}
    .btn-p:hover{background:#0F5A43}
    .btn-g{background:transparent;color:#0F5A43;font-weight:600}

    /* error page */
    .err-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}
    .err-wrap .icon{font-size:54px;opacity:.5}
    .err-wrap h2{font-size:18px;color:var(--g800);font-weight:800}
    .err-wrap p{font-size:13px;color:var(--mute);line-height:1.6}

    /* Phase 4 M3 — Store pack modal */
    .spm-chip-group{margin-bottom:14px}
    .spm-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
    .spm-chip{padding:12px 16px;border-radius:var(--r);border:1.5px solid var(--mute2);background:var(--bg);font-family:var(--font);font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px}
    .spm-chip .chip-label{font-weight:800;color:var(--ink)}
    .spm-chip .chip-price{font-family:var(--mono);font-size:12px;color:var(--g700)}
    .spm-chip:hover{border-color:var(--acc2)}

    /* Phase 4 M2 — Store variant modal */
    .svm-attr-group{margin-bottom:14px}
    .svm-attr-name{font-size:11px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px}
    .svm-chips{display:flex;flex-wrap:wrap;gap:8px}
    .svm-chip{padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--mute2);background:var(--bg);font-family:var(--font);font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;border:none}
    .svm-chip.on{border:1.5px solid var(--acc2);background:var(--lite2);color:var(--g800)}
    .svm-matched{padding:10px 14px;background:var(--lite2);border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--g700);margin-top:10px;display:none}
    .svm-matched.on{display:block}
    .svm-add-btn{width:100%;height:52px;border-radius:var(--r);background:var(--g800);color:var(--white);border:none;font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;margin-top:12px;display:none}
    .svm-add-btn.on{display:flex;align-items:center;justify-content:center}
    .svm-add-btn:hover{background:var(--g700)}
    .pc.has-variants::after{content:'OPTIONS';position:absolute;top:6px;left:6px;font-size:9px;font-weight:800;color:var(--acc2);background:var(--g900);padding:2px 5px;border-radius:6px}
    .pc{position:relative}

    /* Phase 4 M4 — category badge on storefront card */
    .sf-cat-badge{position:absolute;bottom:6px;right:6px;font-size:9px;font-weight:700;color:var(--g700);background:var(--lite);padding:2px 6px;border-radius:6px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* Phase 4 M4 — storefront category chip */
    .sf-cat-chip{display:inline-block;padding:6px 14px;border-radius:20px;border:1.5px solid var(--mute2);background:var(--bg);font-family:var(--font);font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;margin-right:6px;white-space:nowrap}
    .sf-cat-chip.on{border-color:var(--acc2);background:var(--lite2);color:var(--g800)}
    /* P3 (done-bar c571 diff #5): the horizontal-scroll chips row (#sf-cat-filter, overflow-x:auto) showed a
       visible scrollbar TRACK at 390 — hide it while keeping the scroll (same trick as the SB mk-tabs/mk-cats). */
    #sf-cat-filter{scrollbar-width:none}
    #sf-cat-filter::-webkit-scrollbar{display:none}
    #sf-search-input:focus{border-color:var(--acc2);background:var(--white)}
    /* Phase 4 M6 — product type badge on storefront card */
    .sf-type-badge{position:absolute;top:6px;right:6px;font-size:11px;line-height:1;padding:3px 5px;border-radius:5px;background:rgba(7,31,23,.55);color:#fff}
    /* Phase 5 M4 — product image gallery in variant modal */
    .sf-gallery{margin-bottom:12px}
    .sf-gallery-main{width:100%;aspect-ratio:1/1;background:var(--lite2);background-size:cover;background-position:center;border-radius:var(--r-sm)}
    .sf-gallery-thumbs{display:flex;gap:6px;margin-top:8px}
    .sf-gallery-thumb{width:48px;height:48px;border-radius:6px;background:var(--lite2);background-size:cover;background-position:center;border:2px solid transparent;cursor:pointer;flex-shrink:0}
    .sf-gallery-thumb.on{border-color:var(--acc2)}

/* chief c671 — hide the floating "Chat with seller" WhatsApp FAB while any store modal (e.g. the read-first
   product-detail sheet) is open, so it never overlaps the sheet's own "Add to cart" primary CTA. The sheet
   carries its own actions; the browse-page FAB reappears on close. */
body.gb-modal-open .gb-wa-fab { display: none !important; }