/* ============ ATOZ FRESH — PROFESSIONAL B2B THEME ============ */ :root{ /* surfaces */ --bg:#f4f7f5; --bg-2:#0f1e18; /* footer */ --surface:#ffffff; --surface-2:#f3f6f4; --surface-3:#eaefec; --border:#e2e8e4; --border-strong:#cbd6d0; /* text */ --text:#0f1c16; --text-2:#33453d; --muted:#667870; /* brand */ --brand:#047857; --brand-2:#059669; --brand-3:#065f46; --brand-tint:#ecfdf5; --brand-tint-2:#d1fae5; /* tiers */ --tierA:#4338ca; --tierA-bg:#eef2ff; --tierB:#b45309; --tierB-bg:#fffbeb; --tierC:#475569; --tierC-bg:#f1f5f9; /* status */ --amber:#b45309; --amber-bg:#fffbeb; --red:#b91c1c; --red-bg:#fef2f2; --blue:#0369a1; --blue-bg:#f0f9ff; /* elevation */ --sh-sm:0 1px 2px rgba(15,32,24,.06); --sh:0 1px 3px rgba(15,32,24,.08),0 1px 2px rgba(15,32,24,.04); --sh-md:0 4px 14px rgba(15,32,24,.08); --sh-lg:0 14px 38px rgba(15,32,24,.12); --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --r:12px; --r-lg:16px; } /* ============ DARK THEME ============ Same variable names, so every component follows automatically. Set on by the bootstrap script in each page. */ :root[data-theme="dark"]{ --bg:#0e1613; --bg-2:#080d0b; --surface:#151f1a; --surface-2:#1b2721; --surface-3:#243228; --border:#26332c; --border-strong:#38493f; --text:#e9f1ec; --text-2:#bdcdc4; --muted:#8ba095; --brand:#34d399; --brand-2:#10b981; --brand-3:#6ee7b7; --brand-tint:rgba(52,211,153,.12); --brand-tint-2:rgba(52,211,153,.28); --tierA:#a5b4fc; --tierA-bg:rgba(129,140,248,.14); --tierB:#fbbf24; --tierB-bg:rgba(251,191,36,.14); --tierC:#cbd5e1; --tierC-bg:rgba(148,163,184,.14); --amber:#fbbf24; --amber-bg:rgba(251,191,36,.11); --red:#f87171; --red-bg:rgba(248,113,113,.11); --blue:#7dd3fc; --blue-bg:rgba(125,211,252,.11); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --sh-md:0 4px 14px rgba(0,0,0,.45); --sh-lg:0 14px 38px rgba(0,0,0,.55); } /* Components that hard-code light values need a dark counterpart. */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .p-add, :root[data-theme="dark"] .chip.active, :root[data-theme="dark"] .badge.accent, :root[data-theme="dark"] .tier-mine, :root[data-theme="dark"] .pill{color:#06231a} :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .p-add:hover{background:var(--brand-3)} :root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .field input, :root[data-theme="dark"] .search-field, :root[data-theme="dark"] .co-fields input, :root[data-theme="dark"] .co-fields select, :root[data-theme="dark"] .tier-select, :root[data-theme="dark"] .status-select, :root[data-theme="dark"] .mini-num, :root[data-theme="dark"] .pad-input, :root[data-theme="dark"] .pad-qty, :root[data-theme="dark"] .scan-input, :root[data-theme="dark"] .break-row input, :root[data-theme="dark"] .range-val, :root[data-theme="dark"] .note-field{background:var(--surface-2);color:var(--text)} :root[data-theme="dark"] .nav{background:rgba(14,22,19,.9)} :root[data-theme="dark"] .app-bar, :root[data-theme="dark"] .side-nav, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .app-card, :root[data-theme="dark"] .wh-card, :root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .drawer, :root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .search-suggest, :root[data-theme="dark"] .pad-suggest, :root[data-theme="dark"] .tier-card, :root[data-theme="dark"] .cat-card, :root[data-theme="dark"] .p-card, :root[data-theme="dark"] .trust-item, :root[data-theme="dark"] .hero-card, :root[data-theme="dark"] .apply-wrap, :root[data-theme="dark"] .banner, :root[data-theme="dark"] .back-top, :root[data-theme="dark"] .seg-btn.on{background:var(--surface)} :root[data-theme="dark"] .apply-form, :root[data-theme="dark"] .p-media, :root[data-theme="dark"] .qv-media, :root[data-theme="dark"] .ci-thumb{background:var(--surface-2)} :root[data-theme="dark"] .p-media, :root[data-theme="dark"] .qv-media{background:linear-gradient(160deg,#1b2721,#141d19)} :root[data-theme="dark"] .hero{background:linear-gradient(180deg,#0e1613,#111c17)} :root[data-theme="dark"] .auth-page{background:linear-gradient(180deg,#0e1613,#111c17)} :root[data-theme="dark"] .footer{background:var(--bg-2)} :root[data-theme="dark"] .toast{background:var(--surface-3);color:var(--text);border:1px solid var(--border-strong)} :root[data-theme="dark"] .grid-overlay{ background-image:linear-gradient(rgba(120,220,180,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,220,180,.05) 1px,transparent 1px)} :root[data-theme="dark"] .orb-1{background:radial-gradient(circle,rgba(16,185,129,.2),transparent 70%)} :root[data-theme="dark"] .orb-2{background:radial-gradient(circle,rgba(129,140,248,.13),transparent 70%)} :root[data-theme="dark"] .orb-3{background:radial-gradient(circle,rgba(251,191,36,.09),transparent 70%)} :root[data-theme="dark"] .hero-ring{border-color:#22332b} :root[data-theme="dark"] .hero-ring.r2{border-color:#1c2a23} /* Product photos sit directly on the tile — a white plate behind them washed out the badges layered on top. */ :root[data-theme="dark"] .t-img{background:var(--surface-3)} :root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#31423a;border-color:var(--surface-2)} :root[data-theme="dark"] .pw, :root[data-theme="dark"] .demo-hint code, :root[data-theme="dark"] .cred-box code, :root[data-theme="dark"] .import-help code{color:var(--brand-3)} :root[data-theme="dark"] kbd{background:var(--surface-3)} /* elements that hard-code white in the light theme */ :root[data-theme="dark"] .announce{background:#0a2a1e;border-bottom:1px solid var(--border)} :root[data-theme="dark"] .announce-track{color:#8fe3bb} :root[data-theme="dark"] .hero-tag, :root[data-theme="dark"] .p-quick, :root[data-theme="dark"] .tier-btn, :root[data-theme="dark"] .nav-search input:focus{background:var(--surface-2)} :root[data-theme="dark"] .badge{border-color:var(--surface)} /* Badges sit on top of product photos, so they need solid fills, not tints. */ :root[data-theme="dark"] .flag.best{background:#3a2d0a;border-color:#6b5310} :root[data-theme="dark"] .flag.new{background:#0d3527;border-color:#1d5e44} :root[data-theme="dark"] .flag.oos{background:#242f29;border-color:var(--border-strong)} :root[data-theme="dark"] .seg{background:var(--surface-2)} /* theme toggle button */ .theme-btn{font-size:1rem;line-height:1;flex-shrink:0} .theme-btn.floating{position:fixed;top:1.1rem;right:1.1rem;z-index:20;background:var(--surface);box-shadow:var(--sh-sm)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);letter-spacing:-.01em} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--brand-tint-2);color:var(--brand-3)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--surface-2)} ::-webkit-scrollbar-thumb{background:#c3d0c9;border-radius:6px;border:3px solid var(--surface-2)} ::-webkit-scrollbar-thumb:hover{background:#a9bab1} .grad-text{color:var(--brand)} .eyebrow{font-family:var(--font-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:.6rem;font-weight:600} .arrow{display:inline-block;transition:transform .2s} .btn:hover .arrow{transform:translateX(3px)} .muted{color:var(--muted)} .muted.sm,.sm{font-size:.82rem} /* ---- logo ---- */ .logo{display:inline-flex;align-items:center;color:var(--text)} .logo-svg{height:42px;width:auto;display:block} .app-logo .logo-svg,.auth-logo .logo-svg{height:44px} .footer-brand .logo-svg{height:44px;color:#fff} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;border-radius:8px; font-weight:600;font-size:.9rem;border:1px solid transparent;transition:.18s;white-space:nowrap;line-height:1.3} .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-sm)} .btn-primary:hover{background:var(--brand-3);box-shadow:var(--sh-md)} .btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text-2)} .btn-ghost:hover{background:var(--surface-2);border-color:#b4c3bb;color:var(--text)} .btn-ghost.danger:hover{border-color:#e3b4b4;color:var(--red);background:var(--red-bg)} .btn-lg{padding:.82rem 1.6rem;font-size:.98rem} .btn.sm{padding:.36rem .78rem;font-size:.78rem} .btn.full{width:100%} /* ---- announcement ---- */ .announce{background:var(--brand-3);overflow:hidden;height:36px;display:flex;align-items:center} .announce-track{display:flex;gap:2.5rem;white-space:nowrap;animation:marquee 38s linear infinite; font-size:.75rem;letter-spacing:.08em;font-weight:500;color:#d6f5e6} @keyframes marquee{to{transform:translateX(-50%)}} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:.2s} .nav.scrolled{box-shadow:var(--sh)} .nav-inner{max-width:1360px;margin:auto;display:flex;align-items:center;gap:1.1rem;padding:.65rem 2rem} .nav-links{display:flex;gap:1.35rem;font-size:.9rem;color:var(--muted);font-weight:500} .nav-links a{position:relative;padding:.3rem 0;transition:.18s} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--brand);border-radius:2px} .nav-search{position:relative;flex:1;max-width:300px;margin-left:auto} .nav-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)} .nav-search input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px; padding:.55rem .9rem .55rem 2.3rem;color:var(--text);font-size:.88rem;outline:none;transition:.18s} .nav-search input::placeholder{color:#8b9d94} .nav-search input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border); border-radius:10px;overflow:hidden;display:none;box-shadow:var(--sh-lg);z-index:50} .search-suggest.open{display:block} .search-suggest button{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem .9rem;background:none; border:none;color:var(--text);font-size:.85rem;text-align:left;transition:.12s} .search-suggest button:hover{background:var(--surface-2)} .search-suggest small{color:var(--brand);margin-left:auto;white-space:nowrap;font-weight:600} .nav-actions{display:flex;align-items:center;gap:.55rem} .icon-btn{position:relative;width:38px;height:38px;border-radius:8px;background:var(--surface);border:1px solid var(--border-strong); color:var(--text-2);display:grid;place-items:center;transition:.18s} .icon-btn svg{width:18px;height:18px} .icon-btn:hover{background:var(--surface-2);color:var(--text)} .badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;font-size:.66rem; font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid #fff} .badge.accent{background:var(--brand);color:#fff} .hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:6px} .hamburger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s} /* ---- tier chips ---- */ .tier-chip{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.28rem .6rem; border-radius:5px;white-space:nowrap;border:1px solid transparent;display:inline-block} .tier-chip.tier-A{background:var(--tierA-bg);color:var(--tierA);border-color:#c9cffb} .tier-chip.tier-B{background:var(--tierB-bg);color:var(--tierB);border-color:#f2ddb0} .tier-chip.tier-C{background:var(--tierC-bg);color:var(--tierC);border-color:#d3dbe3} .tier-chip.none{background:var(--surface-2);color:var(--muted);border-color:var(--border)} /* ---- hero ---- */ .hero{position:relative;background:linear-gradient(180deg,#fff 0%,#eef4f0 100%);border-bottom:1px solid var(--border);overflow:hidden} .hero-bg,.auth-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5} .orb-1{width:460px;height:460px;background:radial-gradient(circle,rgba(5,150,105,.16),transparent 70%);top:-160px;left:-100px} .orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(67,56,202,.08),transparent 70%);bottom:-140px;right:4%} .orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(180,83,9,.06),transparent 70%);top:24%;left:52%} .grid-overlay{position:absolute;inset:0; background-image:linear-gradient(rgba(15,60,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,60,42,.045) 1px,transparent 1px); background-size:52px 52px;mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,black,transparent)} .hero-inner{position:relative;z-index:1;max-width:1360px;margin:auto;padding:4.5rem 2rem 4rem;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center} .hero-tag{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--border-strong); border-radius:999px;padding:.4rem 1rem;font-size:.78rem;color:var(--text-2);margin-bottom:1.4rem;font-weight:500;box-shadow:var(--sh-sm)} .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-2);animation:pulse 2s infinite} @keyframes pulse{50%{opacity:.35}} .hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:1.1rem} .hero p{color:var(--text-2);max-width:540px;font-size:1.03rem;margin-bottom:1.9rem} .hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2.6rem} .hero-stats{display:flex;gap:2.6rem;flex-wrap:wrap} .hero-stats div{display:flex;flex-direction:column} .hero-stats strong{font-family:var(--font-display);font-size:1.7rem;color:var(--brand);line-height:1.2} .hero-stats span{font-size:.74rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;font-weight:500} .hero-visual{position:relative;height:420px} .hero-ring{position:absolute;inset:12% 8%;border:1px dashed #c8d8ce;border-radius:50%;animation:spin 60s linear infinite} .hero-ring.r2{inset:26% 20%;animation-duration:44s;animation-direction:reverse;border-color:#d8e3dc} @keyframes spin{to{transform:rotate(360deg)}} .hero-card{position:absolute;display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--border); border-radius:10px;padding:.75rem 1rem;box-shadow:var(--sh-md)} .hero-card b{font-size:.88rem;display:block;color:var(--text)} .hero-card small{color:var(--muted);font-size:.74rem} .hc-emoji{font-size:1.5rem} .hc-tag{font-size:.64rem;font-weight:700;letter-spacing:.05em;background:var(--brand-tint);color:var(--brand);padding:.22rem .55rem;border-radius:5px} .float-1{top:6%;right:4%;animation:floaty 7s ease-in-out infinite} .float-2{top:42%;left:0;animation:floaty 8s ease-in-out -2.5s infinite} .float-3{bottom:6%;right:12%;animation:floaty 7.5s ease-in-out -5s infinite} @keyframes floaty{50%{transform:translateY(-10px)}} /* ---- trust ---- */ .trust{max-width:1360px;margin:0 auto;padding:2rem 2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .trust-item{display:flex;flex-direction:column;gap:.25rem;background:var(--surface);border:1px solid var(--border); border-radius:var(--r);padding:1.15rem 1.3rem;box-shadow:var(--sh-sm)} .trust-item strong{font-family:var(--font-display);font-size:1.85rem;line-height:1.1;color:var(--brand)} .trust-item small{color:var(--muted);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500} /* ---- sections ---- */ .section{max-width:1360px;margin:auto;padding:3.5rem 2rem 1rem} /* The catalogue sits directly under the bar for a signed-in customer, so it does not need a full section's lead-in above it. */ .section-tight{padding-top:1.5rem} section.section[hidden]{display:none} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:1.8rem;flex-wrap:wrap} .section-head.center{flex-direction:column;align-items:center;text-align:center} .section-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem)} .section-sub{color:var(--muted);max-width:620px;margin-top:.5rem;font-size:.95rem} /* ---- status banner ---- */ .banner{display:flex;align-items:center;gap:1rem;border-radius:var(--r);padding:1.1rem 1.4rem; border:1px solid var(--border);background:var(--surface);flex-wrap:wrap;box-shadow:var(--sh-sm)} .banner.lock{border-left:3px solid var(--amber);background:var(--amber-bg)} .banner.ok{border-left:3px solid var(--brand);background:var(--brand-tint)} .banner-ico{font-size:1.4rem} .banner div b{display:block;font-family:var(--font-display);font-size:1rem} .banner div small{color:var(--text-2);font-size:.86rem} .banner-actions{display:flex;gap:.55rem;margin-left:auto} .banner>.btn{margin-left:auto} /* ---- categories ---- */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem} .cat-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:1.4rem 1.2rem;transition:.18s;text-align:left;color:var(--text);box-shadow:var(--sh-sm)} .cat-card:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-2px)} .cat-emoji{font-size:1.9rem;display:block;margin-bottom:.7rem} .cat-card h3{font-size:1rem;margin-bottom:.15rem} .cat-card small{color:var(--muted);font-size:.8rem} .cat-go{position:absolute;top:1rem;right:1rem;color:var(--brand);opacity:0;transition:.18s} .cat-card:hover .cat-go{opacity:1} /* ---- filters / products ---- */ .select{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);border-radius:8px; padding:.5rem .9rem;font-size:.85rem;outline:none;cursor:pointer;font-family:inherit} .select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem} .chip{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);border-radius:999px; padding:.45rem 1rem;font-size:.82rem;font-weight:500;transition:.18s} .chip:hover{border-color:var(--brand);color:var(--brand)} .chip.active{background:var(--brand);color:#fff;border-color:var(--brand)} .products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem} .p-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r); overflow:hidden;transition:.18s;display:flex;flex-direction:column;box-shadow:var(--sh-sm)} .p-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-md);transform:translateY(-3px)} /* Every pack shot sits in an identical frame. The shots arrive on white backgrounds at wildly different crops, so without a fixed box and a tinted ground they read as bleeding into the card. */ .p-media{position:relative;height:200px;display:grid;place-items:center;font-size:3.4rem; background:#fff;border-bottom:1px solid var(--border);overflow:hidden} .p-media::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 -18px 22px -18px rgba(15,28,22,.10)} .p-media span{transition:.25s} .p-card:hover .p-media span{transform:scale(1.08)} .p-flags{position:absolute;top:.7rem;left:.7rem;display:flex;flex-direction:column;gap:.3rem;z-index:1} .flag{font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:.22rem .55rem;border-radius:4px} .flag.best{background:var(--tierB-bg);color:var(--tierB);border:1px solid #f2ddb0} .flag.new{background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-tint-2)} .p-quick{position:absolute;bottom:.6rem;left:50%;transform:translate(-50%,8px);opacity:0;background:#fff; border:1px solid var(--border-strong);color:var(--text-2);border-radius:6px;padding:.35rem .8rem; font-size:.74rem;font-weight:600;transition:.18s;white-space:nowrap;box-shadow:var(--sh-sm)} .p-card:hover .p-quick{opacity:1;transform:translate(-50%,0)} .p-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1} .p-brand{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:600} .p-name{font-size:.92rem;font-weight:600;line-height:1.35} .p-meta{font-size:.76rem;color:var(--muted)} .stock-bar{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-top:.2rem} .stock-fill{height:100%;background:var(--amber);border-radius:2px} .stock-low{font-size:.72rem;color:var(--amber);font-weight:500} .stock-ok{font-size:.72rem;color:var(--brand);font-weight:500} .p-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;padding-top:.7rem} .p-price{display:flex;flex-direction:column;line-height:1.25} .p-price b{font-family:var(--font-display);font-size:1.15rem;color:var(--text)} .p-list{font-size:.7rem;color:var(--muted);text-decoration:line-through} .p-save{font-size:.68rem;color:var(--brand);font-weight:600} /* Case price divided by the units inside it, so buyers can compare lines. */ .p-each{font-size:.68rem;color:var(--muted);font-weight:500} .qv-price .p-each{font-size:.8rem} .p-locked{display:flex;align-items:center;gap:.5rem} .p-locked .lock-ico{font-size:1rem;opacity:.5} .p-locked b{display:block;font-size:.82rem;color:var(--text-2)} .p-locked small{font-size:.7rem;color:var(--muted)} .p-add{background:var(--brand);color:#fff;border:none;border-radius:7px;padding:.5rem .85rem;font-weight:600; font-size:.8rem;display:inline-flex;align-items:center;gap:.35rem;transition:.18s;white-space:nowrap} .p-add:hover{background:var(--brand-3)} .p-add.added{background:var(--brand-tint);color:var(--brand)} .p-add.ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2)} .p-add.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)} .empty-state{text-align:center;padding:3.5rem 1rem;color:var(--muted)} .empty-state span{font-size:2.5rem;display:block;margin-bottom:.8rem} .empty-state h3{color:var(--text);margin-bottom:.3rem} .empty-state .btn{margin-top:1rem} /* ---- tier cards (public) ---- */ .tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.1rem} .tier-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;transition:.18s;overflow:hidden;box-shadow:var(--sh-sm)} .tier-card::after{content:'';position:absolute;inset:0 0 auto;height:3px} .tier-card.tier-A::after{background:var(--tierA)} .tier-card.tier-B::after{background:var(--tierB)} .tier-card.tier-C::after{background:var(--tierC)} .tier-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)} .tier-card.mine{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .tier-mine{position:absolute;top:.9rem;right:.9rem;font-size:.6rem;font-weight:700;letter-spacing:.1em; background:var(--brand);color:#fff;padding:.25rem .6rem;border-radius:4px} .tier-letter{font-family:var(--font-display);font-size:2.2rem;font-weight:700;line-height:1;color:var(--text)} .tier-card.tier-A .tier-letter{color:var(--tierA)} .tier-card.tier-B .tier-letter{color:var(--tierB)} .tier-card.tier-C .tier-letter{color:var(--tierC)} .tier-card h3{font-size:1.05rem} .tier-pct{font-family:var(--font-display);font-size:2.6rem;font-weight:700;line-height:1;color:var(--text)} .tier-pct small{font-size:.85rem;color:var(--muted);font-weight:500} .tier-card p{color:var(--muted);font-size:.86rem} .checklist{list-style:none;display:grid;gap:.55rem;margin-bottom:1.5rem} .checklist.sm{gap:.4rem;margin-bottom:1rem} .checklist li{padding-left:1.7rem;position:relative;color:var(--text-2);font-size:.9rem} .checklist.sm li{font-size:.83rem} .checklist li::before{content:'✓';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:4px; background:var(--brand-tint);color:var(--brand);font-size:.7rem;display:grid;place-items:center;font-weight:700} /* ---- apply ---- */ .apply-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-lg);padding:2.6rem;box-shadow:var(--sh)} .apply-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.8rem} .apply-copy p{color:var(--text-2);margin-bottom:1.3rem} .apply-note{font-size:.83rem;color:var(--brand-3);background:var(--brand-tint);border:1px solid var(--brand-tint-2); border-radius:8px;padding:.65rem .9rem} .apply-form{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem} .apply-form h3{font-size:1.15rem;margin-bottom:1.1rem} .field{margin-bottom:.9rem} .field label{display:block;font-size:.74rem;font-weight:600;color:var(--text-2);margin-bottom:.3rem} .field input,.search-field,.note-field{width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:8px; padding:.65rem .85rem;color:var(--text);font-size:.9rem;outline:none;font-family:inherit;transition:.15s} .field input::placeholder,.search-field::placeholder{color:#9aaaa2} .field input:focus,.search-field:focus,.note-field:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .field input.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)} .form-foot{font-size:.84rem;color:var(--muted);text-align:center;margin-top:.9rem} .form-foot a{color:var(--brand);font-weight:600} /* ---- footer ---- */ .footer{margin-top:4rem;background:var(--bg-2);color:#c7d6ce} .footer-grid{max-width:1360px;margin:auto;padding:3rem 2rem 1.8rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.5rem} .footer-grid h4{margin-bottom:.9rem;font-size:.88rem;color:#fff} .footer-grid a,.footer-note{display:block;color:#9fb3aa;font-size:.86rem;margin-bottom:.5rem;transition:.15s} .footer-grid a:hover{color:#fff} .footer-brand p{color:#9fb3aa;font-size:.86rem;margin:.9rem 0 1.1rem;max-width:280px} .socials{display:flex;gap:.5rem} .socials a{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:.95rem;margin:0} .socials a:hover{background:rgba(255,255,255,.14)} .admin-link{margin-top:.7rem!important;font-size:.78rem!important;opacity:.6} .footer-bottom{max-width:1360px;margin:auto;padding:1.1rem 2rem;border-top:1px solid rgba(255,255,255,.08); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8fa49b;font-size:.79rem} /* ---- drawers ---- */ .drawer-overlay{position:fixed;inset:0;background:rgba(15,32,24,.35);opacity:0;pointer-events:none;transition:.25s;z-index:200} .drawer-overlay.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;border-left:1px solid var(--border); z-index:210;transform:translateX(103%);transition:transform .28s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column;box-shadow:var(--sh-lg)} .drawer.open{transform:none} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--border)} .drawer-head h3{font-size:1.1rem} .drawer-head span{color:var(--muted);font-size:.84rem;font-weight:400} .close-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);width:32px;height:32px; border-radius:7px;font-size:.85rem;transition:.15s} .close-btn:hover{background:var(--surface-3)} .drawer-body{flex:1;overflow-y:auto;padding:.8rem 1.4rem} .cart-empty{text-align:center;color:var(--muted);padding:3rem 1rem} .cart-empty span{font-size:2.5rem;display:block;margin-bottom:.7rem} .cart-item{display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--border)} .ci-thumb{width:54px;height:54px;border-radius:8px;display:grid;place-items:center;font-size:1.5rem; background:linear-gradient(160deg,#f8faf9,#eef3f0);border:1px solid var(--border);flex-shrink:0} .ci-info{flex:1;min-width:0} .ci-info b{font-size:.85rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ci-info small{color:var(--muted);font-size:.74rem} .ci-price{font-family:var(--font-display);font-weight:700;font-size:.9rem;margin-top:.15rem;display:block} .ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem} .qty{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:7px} .qty button{background:none;border:none;color:var(--text-2);width:26px;height:26px;font-size:.95rem} .qty button:hover{color:var(--brand)} .qty b{font-size:.82rem;min-width:22px;text-align:center} .ci-remove{background:none;border:none;color:var(--muted);font-size:.72rem;text-decoration:underline} .ci-remove:hover{color:var(--red)} .drawer-foot{padding:1.1rem 1.4rem;border-top:1px solid var(--border);background:var(--surface-2)} .drawer-foot .row{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.45rem;color:var(--muted)} .drawer-foot .row b{color:var(--text)} .drawer-foot .deal-row,.drawer-foot .deal-row b{color:var(--brand)} .drawer-foot .total{font-size:1rem;color:var(--text);padding-top:.5rem;border-top:1px solid var(--border);margin-bottom:.9rem} .drawer-foot .total b{font-family:var(--font-display);font-size:1.25rem} /* ---- modals ---- */ .modal-overlay{position:fixed;inset:0;background:rgba(15,32,24,.42);display:grid;place-items:center;padding:1.2rem; opacity:0;pointer-events:none;transition:.2s;z-index:300} .modal-overlay.open{opacity:1;pointer-events:auto} .modal{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);max-width:740px;width:100%; max-height:88vh;overflow-y:auto;transform:scale(.97);transition:.2s;box-shadow:var(--sh-lg)} .modal-overlay.open .modal{transform:none} .msg-modal{max-width:500px} .qv{display:grid;grid-template-columns:1fr 1.1fr} .qv-media{display:grid;place-items:center;font-size:5.5rem;min-height:320px; background:linear-gradient(160deg,#f8faf9,#eef3f0);border-right:1px solid var(--border);border-radius:var(--r-lg) 0 0 var(--r-lg)} .qv-body{padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;position:relative} .qv-close{position:absolute;top:.9rem;right:.9rem} .qv-body h3{font-size:1.3rem;line-height:1.3;padding-right:2.5rem} .qv-desc{color:var(--text-2);font-size:.89rem} .qv-price{display:flex;flex-direction:column;line-height:1.3} .qv-price b{font-family:var(--font-display);font-size:1.7rem} .qv-locked{background:var(--amber-bg);border:1px solid #f2ddb0;border-radius:8px;padding:.8rem 1rem;font-size:.86rem} .qv-locked b{display:block;color:var(--amber)} .qv-locked small{color:var(--muted)} .qv-unit{font-size:.8rem;color:var(--muted)} .qv-row{display:flex;gap:.7rem;align-items:center;margin-top:.5rem;flex-wrap:wrap} .qv-tags{display:flex;gap:.4rem;flex-wrap:wrap} .qv-tags span{font-size:.7rem;background:var(--surface-2);border:1px solid var(--border);border-radius:5px; padding:.25rem .6rem;color:var(--text-2)} .co-success{text-align:center;padding:2rem 1.8rem} .co-success .big{font-size:3rem;display:block;margin-bottom:.9rem} .co-success h3{margin-bottom:.5rem;font-size:1.3rem} .co-success p{color:var(--text-2);font-size:.9rem;margin-bottom:.4rem} .order-no{font-family:var(--font-display);color:var(--brand);font-size:1.05rem;letter-spacing:.06em;margin-bottom:.9rem;display:block;font-weight:700} .msg-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.3rem;flex-wrap:wrap} .cred-box{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.1rem 0} .cred-box div{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.75rem} .cred-box small{display:block;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem;font-weight:600} .cred-box code{font-family:var(--font-display);color:var(--brand-3);font-size:.88rem;word-break:break-all;font-weight:600} .cred-box .big-code{font-size:1.2rem;letter-spacing:.05em} /* ---- toasts / back-top ---- */ .toasts{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column; gap:.5rem;align-items:center;pointer-events:none} .toast{background:var(--text);color:#fff;border-radius:8px;padding:.65rem 1.2rem;font-size:.85rem;display:flex; gap:.5rem;align-items:center;box-shadow:var(--sh-lg);animation:toastIn .22s ease-out} @keyframes toastIn{from{opacity:0;transform:translateY(12px)}} .toast.out{opacity:0;transform:translateY(8px);transition:.28s} .back-top{position:fixed;bottom:1.3rem;right:1.3rem;width:42px;height:42px;border-radius:8px;background:#fff; border:1px solid var(--border-strong);color:var(--text-2);font-size:1rem;opacity:0;pointer-events:none; transition:.25s;z-index:150;box-shadow:var(--sh-md)} .back-top.show{opacity:1;pointer-events:auto} .back-top:hover{background:var(--surface-2)} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s} .reveal.in{opacity:1;transform:none} /* ============ AUTH PAGE ============ */ .auth-page{min-height:100vh;display:grid;place-items:center;padding:2rem 1.2rem;position:relative; background:linear-gradient(180deg,#fff,#eef4f0)} .auth-wrap{position:relative;z-index:1;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:1.4rem} .auth-card{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)} .auth-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface-2)} .auth-tab{flex:1;background:none;border:none;color:var(--muted);padding:.9rem .5rem;font-size:.85rem;font-weight:600; transition:.15s;position:relative} .auth-tab:hover{color:var(--text)} .auth-tab.active{color:var(--brand);background:#fff} .auth-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)} .auth-form{padding:1.8rem} .auth-form h2{font-size:1.25rem;margin-bottom:.3rem} .auth-sub{color:var(--muted);font-size:.85rem;margin-bottom:1.3rem} .remember{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-2);margin-bottom:1rem;cursor:pointer} .remember input{accent-color:var(--brand)} .auth-error{background:var(--red-bg);border:1px solid #f0c4c4;color:var(--red);border-radius:8px;padding:.65rem .9rem; font-size:.83rem;margin-bottom:.9rem} .demo-hint{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)} .demo-hint b{display:block;color:var(--text-2);margin-bottom:.45rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase} .demo-hint code{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:6px; padding:.4rem .65rem;margin-bottom:.35rem;color:var(--brand-3);font-size:.77rem} .demo-hint em{color:var(--muted);font-style:normal} .auth-back{color:var(--muted);font-size:.85rem} .auth-back:hover{color:var(--brand)} /* ============ APP PAGES (admin / vendor / warehouse) ============ */ .app-page{background:var(--bg)} .app-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:.9rem;padding:.7rem 1.5rem; background:#fff;border-bottom:1px solid var(--border)} .app-bar-right{margin-left:auto;display:flex;gap:.55rem;align-items:center} .role-chip{font-family:var(--font-display);font-size:.66rem;font-weight:700;letter-spacing:.1em;padding:.3rem .7rem; border-radius:5px;background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-tint-2)} .role-chip.admin{background:var(--tierB-bg);color:var(--tierB);border-color:#f2ddb0} .role-chip.warehouse{background:var(--blue-bg);color:var(--blue);border-color:#bfdcee} .role-chip.tier-A{background:var(--tierA-bg);color:var(--tierA);border-color:#c9cffb} .role-chip.tier-B{background:var(--tierB-bg);color:var(--tierB);border-color:#f2ddb0} .role-chip.tier-C{background:var(--tierC-bg);color:var(--tierC);border-color:#d3dbe3} /* minmax(0,1fr) lets the main column shrink, so wide tables scroll inside their own wrapper instead of stretching the whole page. */ .app-shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 60px)} .side-nav{background:#fff;border-right:1px solid var(--border);padding:1.1rem .75rem;display:flex;flex-direction:column; gap:.15rem;position:sticky;top:60px;height:calc(100vh - 60px)} .side-link{display:flex;align-items:center;gap:.65rem;background:none;border:none;color:var(--text-2);padding:.6rem .8rem; border-radius:7px;font-size:.88rem;font-weight:500;text-align:left;transition:.15s;width:100%} .side-link:hover{background:var(--surface-2);color:var(--text)} .side-link.active{background:var(--brand-tint);color:var(--brand-3);font-weight:600} .side-link span{font-size:1rem} .pill{margin-left:auto;background:var(--brand);color:#fff;font-size:.68rem;padding:.08rem .42rem;border-radius:999px;font-weight:700} .app-main{padding:1.8rem;max-width:1400px;width:100%;min-width:0} .app-main.solo{margin:auto} .page-head{margin-bottom:1.5rem} .page-head h1{font-size:1.65rem} .page-head p{color:var(--muted);font-size:.9rem} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-bottom:1.4rem} .stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.2rem; display:flex;flex-direction:column;gap:.1rem;box-shadow:var(--sh-sm)} .stat-card.action{border-left:3px solid var(--amber);background:var(--amber-bg)} .stat-ico{font-size:1.3rem;margin-bottom:.25rem} .stat-card b{font-family:var(--font-display);font-size:1.6rem;line-height:1.1} .stat-card small{color:var(--muted);font-size:.79rem} .panel{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:1.3rem;margin-bottom:1.2rem;box-shadow:var(--sh-sm)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap} .panel-head h2{font-size:1.05rem} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .info-panel p{color:var(--text-2);font-size:.89rem;margin-top:.4rem} .bar-chart{display:grid;gap:.8rem} .bar-row{display:grid;grid-template-columns:145px 1fr 32px;align-items:center;gap:.8rem} .bar-label{display:flex;align-items:center;gap:.45rem;font-size:.79rem;color:var(--muted)} .bar-track{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden} .bar-fill{height:100%;border-radius:4px;background:var(--brand);transition:width .4s} .bar-fill.tier-A{background:var(--tierA)} .bar-fill.tier-B{background:var(--tierB)} .bar-fill.tier-C{background:var(--tierC)} .bar-row b{font-family:var(--font-display);text-align:right} .mini-list{display:grid;gap:.5rem} .mini-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface-2); border:1px solid var(--border);border-radius:8px;padding:.7rem .9rem} .mini-row b{font-size:.88rem;display:block} .mini-row small{color:var(--muted);font-size:.76rem} .order-right{display:flex;align-items:center;gap:.7rem} .order-right b{font-family:var(--font-display);font-size:.95rem} .empty-inline{color:var(--muted);font-size:.88rem;padding:1.1rem;text-align:center;background:var(--surface-2);border-radius:8px} .empty-inline.big{padding:3rem 1rem;font-size:.95rem} .empty-inline a{color:var(--brand);font-weight:600} /* applications */ .app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(325px,1fr));gap:1.1rem} .app-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:1.3rem;display:flex; flex-direction:column;gap:.9rem;box-shadow:var(--sh-sm)} .app-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .app-card-head b{font-size:1rem;font-family:var(--font-display);display:block} .app-card-head small{color:var(--muted);font-size:.76rem;display:block;margin-top:.1rem} .kv{display:grid;gap:.5rem} .kv.wide{gap:.65rem} .kv div{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;border-bottom:1px solid var(--border);padding-bottom:.45rem} .kv dt{color:var(--muted)} .kv dd{text-align:right;word-break:break-word;font-weight:500} .tier-pick{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap} .tier-pick>span{font-size:.79rem;color:var(--muted);width:100%;font-weight:500} .tier-btn{flex:1;background:#fff;border:1px solid var(--border-strong);color:var(--text);border-radius:8px; padding:.6rem .5rem;font-family:var(--font-display);font-weight:700;font-size:1rem;transition:.15s; display:flex;flex-direction:column;align-items:center;gap:.05rem} .tier-btn small{font-size:.65rem;font-weight:500;color:var(--muted)} .tier-btn:hover{box-shadow:var(--sh-sm)} .tier-btn.tier-A:hover{border-color:var(--tierA);background:var(--tierA-bg);color:var(--tierA)} .tier-btn.tier-B:hover{border-color:var(--tierB);background:var(--tierB-bg);color:var(--tierB)} .tier-btn.tier-C:hover{border-color:var(--tierC);background:var(--tierC-bg);color:var(--tierC)} /* toolbar + tables */ .toolbar{display:flex;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center} .toolbar .search-field{max-width:300px} .seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.15rem;flex-wrap:wrap} .seg-btn{background:none;border:none;color:var(--muted);padding:.4rem .8rem;border-radius:6px;font-size:.79rem;font-weight:600;transition:.15s} .seg-btn:hover{color:var(--text)} .seg-btn.on{background:#fff;color:var(--brand);box-shadow:var(--sh-sm)} .toolbar-right{margin-left:auto;display:flex;gap:.45rem;flex-wrap:wrap} .sort-group{display:flex;align-items:center;gap:.45rem} .sort-group label{font-size:.72rem;font-weight:600;color:var(--muted)} .icon-btn.sm{width:34px;height:34px;border-radius:7px;font-size:.9rem} .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:#fff;box-shadow:var(--sh-sm)} .tbl{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px} .tbl th{text-align:left;padding:.75rem .9rem;font-size:.69rem;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;font-weight:700} .tbl th small{color:var(--brand);letter-spacing:0;text-transform:none;font-size:.7rem;font-weight:600} .tbl td{padding:.8rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-2)} .tbl tr:last-child td{border-bottom:none} .tbl tbody tr:hover{background:var(--surface-2)} .tbl td small{display:block;color:var(--muted);font-size:.74rem;margin-top:.1rem} .tbl td b{font-size:.87rem;color:var(--text)} .empty-cell{text-align:center;color:var(--muted);padding:2.5rem!important} .disc{color:var(--brand);font-family:var(--font-display)} .disc-cell{color:var(--brand)} .net{color:var(--brand);font-family:var(--font-display);font-size:.93rem!important} /* Derived tier prices stay neutral — the column heading names the tier, and colouring the figures made them read as warnings. */ .tier-cell{font-family:var(--font-display);font-size:.83rem;color:var(--text-2)} .low{color:var(--amber);font-weight:700} .pw{background:var(--surface-2);border:1px solid var(--border);color:var(--brand-3);padding:.15rem .45rem; border-radius:4px;font-size:.78rem;font-family:var(--font-display);font-weight:600} .row-actions{white-space:nowrap} .tier-select,.status-select{background:#fff;border:1px solid var(--border-strong);color:var(--text);border-radius:6px; padding:.32rem .55rem;font-size:.8rem;font-family:inherit;outline:none;cursor:pointer} .tier-select:focus,.status-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .tier-select:disabled{opacity:.45;cursor:not-allowed;background:var(--surface-2)} /* sortable headings */ .tbl th.sortable{cursor:pointer;user-select:none;transition:.15s} .tbl th.sortable:hover{color:var(--text);background:var(--surface-3)} .tbl th.sortable i{display:inline-block;width:0;height:0;margin-left:.35rem;vertical-align:middle;opacity:.3; border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor} .tbl th.sorted{color:var(--brand);background:var(--brand-tint)} .tbl th.sorted i{opacity:1} .tbl th.sorted.desc i{transform:rotate(180deg)} .table-wrap.compact{margin:.9rem 0} .table-wrap.compact .tbl{min-width:420px;font-size:.81rem} /* Column-heavy tables scroll horizontally rather than crushing the name column. */ .table-wrap.wide .tbl{min-width:1180px} .tbl td:first-child{min-width:200px} .table-wrap.compact .tbl td:first-child{min-width:0} .status{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.22rem .55rem; border-radius:4px;display:inline-block;border:1px solid transparent} .status.pending{background:var(--amber-bg);color:var(--amber);border-color:#f2ddb0} .status.approved,.status.delivered{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-tint-2)} .status.rejected{background:var(--red-bg);color:var(--red);border-color:#f0c4c4} .status.suspended{background:var(--surface-3);color:var(--muted);border-color:var(--border-strong)} .status.received{background:var(--blue-bg);color:var(--blue);border-color:#bfdcee} .status.packing{background:var(--amber-bg);color:var(--amber);border-color:#f2ddb0} .status.packed{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-tint-2)} .status.dispatched{background:var(--tierA-bg);color:var(--tierA);border-color:#c9cffb} /* modal form fields */ .co{padding:1.8rem} .co h3{font-size:1.25rem;margin-bottom:.25rem} .co .co-sub{color:var(--muted);font-size:.86rem;margin-bottom:1.3rem} .co-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.3rem} .co-fields .full-w{grid-column:1/-1} .co-fields label{font-size:.72rem;font-weight:600;color:var(--text-2);display:block;margin-bottom:.28rem} .co-fields input,.co-fields select{width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:8px; padding:.6rem .8rem;color:var(--text);font-size:.88rem;outline:none;font-family:inherit} .co-fields input:focus,.co-fields select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .co-fields input.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)} .co-nav{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap} .co-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.9rem 1.1rem; margin-bottom:1.1rem;font-size:.87rem} .co-summary .row{display:flex;justify-content:space-between;margin-bottom:.35rem;color:var(--muted)} .co-summary .row.total{color:var(--text);font-weight:700;padding-top:.45rem;border-top:1px solid var(--border)} .timeline{display:grid;gap:.45rem;margin-bottom:1.1rem} .timeline div{display:flex;align-items:center;gap:.6rem} .timeline small{color:var(--muted);font-size:.76rem} /* tier admin */ .tier-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.1rem;margin-bottom:1.2rem} .tier-admin{display:flex;flex-direction:column;gap:.8rem;position:relative;overflow:hidden} .tier-admin::after{content:'';position:absolute;inset:0 0 auto;height:3px} .tier-admin.tier-A::after{background:var(--tierA)} .tier-admin.tier-B::after{background:var(--tierB)} .tier-admin.tier-C::after{background:var(--tierC)} .tier-admin-head{display:flex;align-items:center;gap:.9rem} .tier-admin-head b{display:block;font-size:.93rem} .tier-admin-head small{color:var(--muted);font-size:.78rem} .range-label{font-size:.72rem;font-weight:600;color:var(--text-2)} .range-row{display:flex;align-items:center;gap:.9rem} .range-row input[type=range]{flex:1;accent-color:var(--brand)} .range-val{display:flex;align-items:center;gap:.15rem;background:#fff;border:1px solid var(--border-strong);border-radius:7px;padding:.3rem .55rem} .range-val input{width:44px;background:none;border:none;color:var(--text);font-family:var(--font-display); font-size:1.05rem;font-weight:700;outline:none;text-align:right} .range-val span{color:var(--muted);font-size:.84rem} .tier-example{font-size:.83rem;color:var(--text-2);background:var(--surface-2);border-radius:7px;padding:.55rem .75rem} .tier-example b{color:var(--brand);font-family:var(--font-display)} /* import */ .dropzone{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;cursor:pointer; border:2px dashed var(--border-strong);border-radius:var(--r);padding:2rem 1.4rem;transition:.18s;background:var(--surface-2)} .dropzone:hover,.dropzone.over{border-color:var(--brand);background:var(--brand-tint)} .dz-ico{font-size:2rem} .dropzone b{font-size:.95rem} .dropzone small{color:var(--muted);font-size:.79rem} .import-help{margin:1rem 0;padding:.9rem 1.1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;font-size:.81rem} .import-help b{display:block;font-size:.69rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem;font-weight:700} .import-help code{display:block;color:var(--brand-3);font-size:.77rem;line-height:1.7;margin-bottom:.45rem} .import-help small{color:var(--muted);display:block;margin-bottom:.7rem} .import-status{border-radius:8px;padding:.7rem .95rem;font-size:.85rem;margin:.9rem 0} .import-status.ok{background:var(--brand-tint);border:1px solid var(--brand-tint-2);color:var(--brand-3)} .import-status.err{background:var(--red-bg);border:1px solid #f0c4c4;color:var(--red)} .import-status.working{background:var(--surface-2);border:1px solid var(--border);color:var(--muted)} .import-map{font-size:.79rem;color:var(--muted);margin-bottom:.35rem} .import-map span{display:inline-block;background:var(--brand-tint);color:var(--brand);border-radius:4px; padding:.15rem .5rem;margin:.12rem .2rem .12rem 0;font-size:.73rem;font-weight:600} .skip-list{background:var(--amber-bg);border:1px solid #f2ddb0;border-radius:8px;padding:.75rem .95rem;margin:.9rem 0;text-align:left} .skip-list b{display:block;font-size:.81rem;margin-bottom:.35rem;color:var(--amber)} .skip-list small{display:block;color:var(--muted);font-size:.76rem} /* warehouse */ .wh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(335px,1fr));gap:1.1rem} .wh-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;display:flex; flex-direction:column;gap:.8rem;position:relative;overflow:hidden;transition:.18s;box-shadow:var(--sh-sm)} .wh-card::after{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--border-strong)} .wh-card.status-received::after{background:var(--blue)} .wh-card.status-packing::after{background:var(--amber)} .wh-card.status-packed::after{background:var(--brand)} .wh-card.status-dispatched::after{background:var(--tierA)} .wh-card:hover{box-shadow:var(--sh-md)} .wh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .wh-head b{font-family:var(--font-display);font-size:1rem;display:block} .wh-head small{color:var(--muted);font-size:.8rem;display:block;margin-top:.1rem} .wh-meta{display:flex;flex-wrap:wrap;gap:.4rem .85rem;font-size:.77rem;color:var(--muted)} .pick-list{list-style:none;display:grid;gap:.4rem;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.65rem} .pick-list li{display:flex;align-items:center;gap:.6rem} .pick-emoji{font-size:1.2rem} .pick-list b{font-size:.84rem;display:block;line-height:1.3;color:var(--text)} .pick-list small{color:var(--muted);font-size:.72rem} .pick-qty{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--brand);white-space:nowrap} .wh-note{font-size:.81rem;color:var(--amber);background:var(--amber-bg);border:1px solid #f2ddb0;border-radius:7px;padding:.5rem .75rem} .wh-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:auto} .wh-actions .btn-primary{margin-left:auto} .wh-done{margin-left:auto;color:var(--brand);font-size:.84rem;font-weight:600} /* vendor page */ .vendor-hero{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;position:relative;overflow:hidden} .vendor-hero::after{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--brand)} .vendor-hero.tier-A::after{background:var(--tierA)} .vendor-hero.tier-B::after{background:var(--tierB)} .vendor-hero.tier-C::after{background:var(--tierC)} .vh-tier{display:flex;align-items:center;gap:.9rem} .vh-tier b{display:block;font-family:var(--font-display);font-size:1.05rem} .vh-tier small{color:var(--muted);font-size:.83rem} .vh-pct{text-align:right} .vh-pct b{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--brand)} .vh-pct small{display:block;color:var(--muted);font-size:.79rem} /* ---- product images ---- */ .p-img{width:100%;height:100%;object-fit:contain;padding:14px;display:block} .qv-pic{max-width:100%;max-height:320px;object-fit:contain} .ci-thumb img,.pick-emoji img,.sg-media img,.rank-media img{width:100%;height:100%;object-fit:cover;border-radius:6px} .t-cell{width:52px;min-width:52px!important} .t-img{width:38px;height:38px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block} .t-emoji{font-size:1.5rem} .mini-prod{display:flex;align-items:center;gap:.7rem} .p-card.out .p-media{opacity:.55} .p-add:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed} .flag.oos{background:var(--surface-3);color:var(--muted);border:1px solid var(--border-strong)} .stock-out{font-size:.72rem;color:var(--muted);font-weight:600} .oos-pill{font-size:.62rem;font-weight:700;letter-spacing:.05em;background:var(--surface-3);color:var(--muted); border:1px solid var(--border-strong);padding:.16rem .45rem;border-radius:4px} .vol{color:var(--brand);font-weight:600} .ci-hint{color:var(--brand);font-size:.7rem;display:block;margin-top:.1rem} .vol-hint{background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:8px; padding:.6rem .85rem;font-size:.83rem;color:var(--brand-3)} .ov-tag{color:var(--tierA);font-weight:600} .short-flag{color:var(--amber);font-weight:600} .ta-r{text-align:right}.ta-c{text-align:center} /* image upload in product form */ .img-row{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)} .img-preview{width:96px;height:96px;flex-shrink:0;border:1px solid var(--border-strong);border-radius:10px; background:var(--surface-2);display:grid;place-items:center;font-size:2.2rem;overflow:hidden} .img-preview img{width:100%;height:100%;object-fit:cover} .img-loading{font-size:1.4rem;color:var(--muted)} .img-controls{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start} .img-controls label.btn{cursor:pointer} .img-controls small{font-size:.76rem;max-width:320px} /* ---- storage meter ---- */ .storage-meter{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.85rem 1.1rem;margin-bottom:1.1rem} .storage-meter.warn{background:var(--amber-bg);border-color:#f2ddb0} .storage-meter b{font-size:.88rem;display:block} .storage-meter small{color:var(--muted);font-size:.78rem} .meter{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:.55rem} .meter div{height:100%;background:var(--brand);border-radius:3px} .storage-meter.warn .meter div{background:var(--amber)} /* ---- analytics ---- */ .chart{display:flex;align-items:flex-end;gap:2px;height:190px;padding:.5rem 0;border-bottom:1px solid var(--border)} .chart-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px} .chart-bar{width:100%;background:var(--brand);border-radius:2px 2px 0 0;min-height:1px;transition:.2s} .chart-col:hover .chart-bar{background:var(--brand-3)} .chart-axis{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:.5rem} .rank-list{display:grid;gap:.45rem} .rank-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;background:var(--surface-2); border:1px solid var(--border);border-radius:8px} .rank-n{width:20px;height:20px;flex-shrink:0;border-radius:5px;background:var(--surface-3);color:var(--muted); font-size:.72rem;font-weight:700;display:grid;place-items:center} .rank-media{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;font-size:1.2rem} .rank-row b{font-size:.86rem;display:block} .rank-row small{color:var(--muted);font-size:.75rem} .rank-val{margin-left:auto;font-family:var(--font-display);white-space:nowrap} .wide-val{min-width:74px;font-size:.86rem} .bar-row b.wide-val{text-align:right} /* ---- customer detail ---- */ .back-link{background:none;border:none;color:var(--muted);font-size:.85rem;font-weight:500;padding:0 0 .7rem;display:block} .back-link:hover{color:var(--brand)} .detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.2rem;flex-wrap:wrap} .detail-actions{display:flex;gap:.5rem;align-items:center} .tbl tr.clickable{cursor:pointer} .ov-list .ov-right{display:flex;align-items:center;gap:.8rem} .panel-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .side-sep{height:1px;background:var(--border);margin:.5rem .3rem} /* ---- order docs / edit ---- */ .doc-btns{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)} .doc-btns .on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-3)} .mini-num{width:66px;background:#fff;border:1px solid var(--border-strong);border-radius:6px;padding:.32rem .45rem; font-size:.85rem;text-align:center;font-family:inherit;outline:none} .mini-num:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} /* ---- volume breaks admin ---- */ .break-list{display:grid;gap:.5rem;margin:.9rem 0} .break-row{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--muted); background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.55rem .8rem;flex-wrap:wrap} .break-row input{width:70px;background:#fff;border:1px solid var(--border-strong);border-radius:6px; padding:.3rem .45rem;text-align:center;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--text);outline:none} .break-row input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .arrow-sep{color:var(--border-strong);margin:0 .2rem} .break-row .pad-del{margin-left:auto} .break-preview{font-size:.82rem;color:var(--muted);margin-bottom:1rem} .break-preview b{color:var(--text-2);display:block;margin-bottom:.3rem} .break-preview span{display:inline-block;background:var(--brand-tint);color:var(--brand-3);border-radius:5px; padding:.2rem .55rem;margin:.15rem .3rem .15rem 0;font-weight:600} /* ---- warehouse scanning ---- */ .wh-card.scanning{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .scan-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.8rem} .scan-row{display:flex;gap:.5rem} .scan-input{flex:1;background:#fff;border:1px solid var(--brand);border-radius:8px;padding:.6rem .8rem; font-size:.9rem;font-family:inherit;outline:none} .scan-input:focus{box-shadow:0 0 0 3px var(--brand-tint)} .scan-progress{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin:.6rem 0 .35rem} .scan-fill{height:100%;background:var(--brand);border-radius:3px;transition:width .3s} .scan-stat{font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center} .scan-reset{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:.75rem} .scan-reset:hover{color:var(--red)} .scan-video{display:none;width:100%;max-height:190px;object-fit:cover;border-radius:8px;margin-top:.6rem;background:#000} .scan-video.on{display:block} .scan-log{display:grid;gap:.25rem;margin-top:.5rem} .scan-line{font-size:.78rem;padding:.3rem .55rem;border-radius:5px} .scan-line.good{background:var(--brand-tint);color:var(--brand-3)} .scan-line.bad{background:var(--red-bg);color:var(--red)} .pick-list li.picked{opacity:.6} .pick-list li.picked b{text-decoration:line-through} .pick-check{width:16px;color:var(--brand);font-weight:700;flex-shrink:0} .pick-emoji{width:26px;height:26px;display:grid;place-items:center;flex-shrink:0} .pick-qty i{font-style:normal;color:var(--brand);font-size:.85rem} .admin-note{margin-bottom:1.2rem} /* ---- order pad ---- */ .pad-panel{padding-bottom:1rem} .pad-actions{display:flex;gap:.45rem} .pad-head,.pad-row{display:grid;grid-template-columns:minmax(220px,2.4fr) 1fr .7fr 1fr .8fr 1fr 40px;gap:.7rem;align-items:center} .pad-head{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700; padding:0 .2rem .55rem;border-bottom:1px solid var(--border)} .pad-row{padding:.5rem .2rem;border-bottom:1px solid var(--border);position:relative} .pad-row.filled{background:var(--surface-2)} .pad-row.over{background:var(--amber-bg)} .pad-cell{font-size:.85rem;min-width:0} .pad-cell b{font-family:var(--font-display);font-size:.9rem;color:var(--text)} .pad-search{position:relative} .pad-input{width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:7px;padding:.5rem .7rem; font-size:.88rem;font-family:inherit;outline:none} .pad-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .pad-qty{width:70px;background:#fff;border:1px solid var(--border-strong);border-radius:7px;padding:.5rem .4rem; font-size:.9rem;font-weight:600;text-align:center;font-family:inherit;outline:none} .pad-qty:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .pad-qty:disabled{background:var(--surface-2);color:var(--muted)} .pad-del{background:none;border:none;color:var(--muted);font-size:.85rem;width:26px;height:26px;border-radius:5px} .pad-del:hover{background:var(--red-bg);color:var(--red)} .pad-cell small.vol{display:block;font-size:.68rem} .pad-warn{grid-column:1/-1;font-size:.76rem;color:var(--amber);padding:.2rem .2rem 0} .pad-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border); border-radius:9px;box-shadow:var(--sh-lg);z-index:60;display:none;max-height:290px;overflow-y:auto} .pad-suggest.open{display:block} .pad-suggest button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;background:none; border:none;text-align:left;font-size:.84rem;color:var(--text)} .pad-suggest button:hover,.pad-suggest button.on{background:var(--brand-tint)} .sg-media{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;font-size:1.15rem} .sg-name{flex:1;min-width:0} .sg-name b{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sg-name small{color:var(--muted);font-size:.74rem} .sg-stock{font-size:.72rem;color:var(--brand);white-space:nowrap;font-weight:600} .sg-stock.oos,.oos{color:var(--muted)} .pad-none{padding:.7rem;font-size:.82rem;color:var(--muted)} .pad-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-top:1.1rem;flex-wrap:wrap} .pad-totals{display:flex;gap:1.6rem;flex-wrap:wrap} .pad-totals div{display:flex;flex-direction:column} .pad-totals span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .pad-totals b{font-family:var(--font-display);font-size:1.1rem} .pad-totals .save b{color:var(--brand)} .pad-totals .grand b{font-size:1.5rem} .pad-hint{margin-top:1rem} .pad-hint b{color:var(--brand)} kbd{background:var(--surface-2);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px; padding:.05rem .35rem;font-size:.8em;font-family:var(--font-display)} .reorder-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem} .reorder-card{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:.8rem .9rem; text-align:left;transition:.15s;display:flex;flex-direction:column;gap:.15rem} .reorder-card:hover{border-color:var(--brand);background:var(--brand-tint)} .reorder-card b{font-family:var(--font-display);font-size:.92rem} .reorder-card small{color:var(--muted);font-size:.76rem} .reorder-cta{color:var(--brand);font-size:.78rem;font-weight:600;margin-top:.3rem} .preview-more{margin-top:1.4rem;text-align:center;padding:1.6rem 1rem;border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2)} .preview-more p{color:var(--muted);font-size:.9rem;margin-bottom:.9rem} .preview-more b{color:var(--text)} .preview-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap} /* Generated stand-in when a product has no photograph. */ .p-placeholder{display:grid;place-items:center;width:100%;height:100%;gap:.35rem; background:hsl(var(--ph-hue,150) 32% 92%);color:hsl(var(--ph-hue,150) 45% 32%)} .p-placeholder b{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.06em} :root[data-theme="dark"] .p-placeholder{background:hsl(var(--ph-hue,150) 22% 20%);color:hsl(var(--ph-hue,150) 45% 72%)} .ci-thumb .p-placeholder b,.t-cell .p-placeholder b{font-size:.9rem} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} /* ---- responsive ---- */ @media(max-width:1080px){ .hero-inner{grid-template-columns:1fr;text-align:center} .hero p{margin-inline:auto} .hero-cta,.hero-stats{justify-content:center} .hero-visual{display:none} .trust{grid-template-columns:repeat(2,1fr)} .apply-wrap,.two-col{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .nav-search{display:none} .app-shell{grid-template-columns:1fr} .side-nav{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:.6rem} .side-link{width:auto;white-space:nowrap} } @media(max-width:760px){ .nav-inner{padding:.55rem 1rem;gap:.6rem} .logo-svg{height:34px} .hamburger{display:flex} .nav-links{position:fixed;top:0;left:0;bottom:0;width:min(280px,84vw);background:#fff;border-right:1px solid var(--border); flex-direction:column;padding:4.5rem 1.8rem;gap:1.2rem;font-size:1.05rem;transform:translateX(-103%);transition:.3s;z-index:205;box-shadow:var(--sh-lg)} .nav-links.open{transform:none} .nav-cta{display:none} .section{padding:2.6rem 1.1rem 1rem} .trust{grid-template-columns:1fr 1fr;padding:1.5rem 1.1rem 0} .apply-wrap{padding:1.5rem} .qv{grid-template-columns:1fr} .qv-media{border-radius:var(--r-lg) var(--r-lg) 0 0;border-right:none;border-bottom:1px solid var(--border);min-height:180px;font-size:4rem} .footer-grid{grid-template-columns:1fr;gap:1.6rem} .app-main{padding:1.1rem} .app-bar{padding:.6rem 1rem;flex-wrap:wrap} .stat-grid{grid-template-columns:1fr 1fr} .cred-box,.co-fields{grid-template-columns:1fr} .toolbar-right{margin-left:0;width:100%} .toolbar-right .btn{flex:1} .wh-grid{grid-template-columns:1fr} .auth-tab{font-size:.78rem;padding:.8rem .3rem} .banner{flex-direction:column;text-align:center} .banner-actions,.banner>.btn{margin-left:0} .img-row{flex-direction:column;align-items:flex-start} .pad-head{display:none} .pad-row{grid-template-columns:1fr 1fr;gap:.5rem;padding:.8rem .2rem} .pad-search{grid-column:1/-1} .pad-totals{gap:1rem;width:100%} .pad-foot .btn{width:100%} .chart{height:140px} .detail-head{flex-direction:column} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} } /* =============================================================== slider == The hero carousel. Slides come from the live catalogue, so a product photo uploaded in the warehouse system appears here without touching this file. */ .slider{position:relative;height:100%;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--border);background:var(--surface-2);box-shadow:var(--sh-md)} .slider-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)} .slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:flex-end;overflow:hidden} .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Slides with no photograph yet still look deliberate rather than broken. */ .slide-art{position:absolute;inset:0;display:grid;place-items:center; background:linear-gradient(150deg,var(--sa-1),var(--sa-2))} .slide-art span{font-size:5.5rem;filter:drop-shadow(0 8px 22px rgba(0,0,0,.22))} .slide-art::after{content:"";position:absolute;inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0); background-size:22px 22px} .slide-cap{position:relative;z-index:2;width:100%;padding:1.5rem 1.6rem 1.4rem; background:linear-gradient(to top,rgba(6,20,14,.88),rgba(6,20,14,.55) 55%,transparent);color:#fff} .slide-cap b{display:block;font-family:var(--font-display);font-size:1.2rem;line-height:1.25} .slide-cap small{display:block;margin-top:.25rem;font-size:.82rem;color:rgba(255,255,255,.82)} .slide-tag{display:inline-block;margin-bottom:.55rem;font-size:.68rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28); color:#fff;padding:.2rem .55rem;border-radius:999px;backdrop-filter:blur(6px)} .slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.34); background:rgba(10,26,20,.42);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer; backdrop-filter:blur(8px);transition:background .18s,transform .18s;display:grid;place-items:center} .slider-nav:hover{background:rgba(10,26,20,.72);transform:translateY(-50%) scale(1.06)} .slider-nav.prev{left:.75rem} .slider-nav.next{right:.75rem} .slider-dots{position:absolute;left:0;right:0;bottom:.7rem;z-index:3; display:flex;justify-content:center;gap:.4rem} .slider-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.42);transition:width .25s,background .25s} .slider-dots button[aria-current="true"]{width:20px;border-radius:4px;background:#fff} @media(max-width:900px){ .trust{grid-template-columns:repeat(2,1fr)} .brand-row{grid-template-columns:repeat(2,1fr)} .hero-visual{height:320px} } /* ============================================================ banner hero == The banner carries its own headline and call to action, so the page does not repeat them. Aspect ratio is locked to the artwork so nothing is cropped. */ .banner-hero{max-width:1360px;margin:0 auto;padding:1.5rem 2rem 0} .banner-hero .slider{height:auto;aspect-ratio:1717/916;border-radius:var(--r-lg)} .banner-hero .slide{align-items:stretch} .banner-hero .slide img, .banner-hero .slide a{display:block;width:100%;height:100%} .banner-hero .slide img{position:static;object-fit:cover} /* One banner needs no controls. */ .banner-hero .slider.single .slider-nav, .banner-hero .slider.single .slider-dots{display:none} @media(max-width:900px){ .banner-hero{padding:1rem 1rem 0} } /* ========================================================== shop by brand == A logo strip that scrolls itself. The track holds the logos twice over and slides exactly half its width, so the loop meets seamlessly. */ .brand-marquee{ position:relative;overflow:hidden; /* Fade the ends so logos enter and leave rather than being chopped off. */ -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); } .brand-track{display:flex;width:max-content;gap:1rem;animation:brandScroll 32s linear infinite} .brand-marquee:hover .brand-track{animation-play-state:paused} @keyframes brandScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .brand-tile{ flex:0 0 auto;width:190px;height:118px;padding:1.1rem 1.3rem; display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm); cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s } .brand-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)} /* The source files have been trimmed to the artwork, so contain-fitting them inside a fixed box centres every logo on the same optical footprint. */ .brand-tile img{ display:block;margin:auto; max-width:100%;max-height:100%; width:auto;height:auto; object-fit:contain;object-position:center } /* Tall marks would otherwise tower over the wide wordmarks. */ .brand-tile[data-logo="kurkure"] img{max-height:86%} .brand-tile[data-logo="lays"] img{max-height:62%} /* Motion is decorative here; respect a request to stop it. */ @media(prefers-reduced-motion:reduce){ .brand-track{animation:none} .brand-marquee{overflow-x:auto} } /* ============================================== category rail (one line) == Categories stay on a single row and scroll sideways instead of wrapping into three stacked lines. */ .filter-bar{ display:flex;gap:.5rem;flex-wrap:nowrap;margin-bottom:1.6rem; overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none; padding-bottom:.25rem; } .filter-bar::-webkit-scrollbar{display:none} .filter-bar .chip{flex:0 0 auto} .rail{position:relative} .rail-btn{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2); font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:var(--sh-md); transition:opacity .18s,border-color .18s,color .18s } .rail-btn:hover{border-color:var(--brand);color:var(--brand)} .rail-btn.prev{left:-6px} .rail-btn.next{right:-6px} .rail-btn[hidden]{display:none} /* An uploaded logo stands in for the built-in wordmark. Its height comes from Settings in the warehouse system; width follows the artwork. */ .logo-img{width:auto;max-width:320px;object-fit:contain;display:block} /* The header has to grow with a taller logo, or it clips. */ .nav-inner{min-height:auto} /* "Show all orders" sits under the table it belongs to. */ .more-row{display:flex;justify-content:center;padding:.9rem 1rem 1.1rem;border-top:1px solid var(--border)} /* ========================================================== shop sidebar == Thousands of lines need a column for browsing controls, not a row of chips. The sidebar sticks while the grid scrolls. */ .shop-layout{display:grid;grid-template-columns:248px 1fr;gap:1.6rem;align-items:start} .shop-main{min-width:0} .shop-side{ position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1.1rem; max-height:calc(100vh - 7rem);overflow-y:auto;padding-right:.25rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:1.1rem;box-shadow:var(--sh-sm) } .side-block{display:flex;flex-direction:column;gap:.45rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)} .side-block:last-of-type{border-bottom:0;padding-bottom:0} .side-block.grow{min-height:0} /* [hidden] must beat the flex above, or a hidden block still lays out. */ .side-block[hidden]{display:none} /* The panel says what it is, so the first label is not doing that job alone. */ .side-title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700; color:var(--text);padding-bottom:.85rem;border-bottom:1px solid var(--border)} .side-title .side-ico{width:17px;height:17px;color:var(--brand)} .side-label{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .side-ico{width:14px;height:14px;flex:none;color:var(--muted)} .side-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem} /* Input with the icon inside it rather than floating above. */ .side-field{position:relative;display:flex;align-items:center} .side-field .side-ico{position:absolute;left:.6rem;width:14px;height:14px;color:var(--muted);pointer-events:none} .side-field .input{padding-left:2rem;width:100%} .side-field:focus-within .side-ico{color:var(--brand)} .side-clear{background:none;border:0;padding:0;cursor:pointer;font-size:.72rem;color:var(--brand)} .side-clear:hover{text-decoration:underline} .input.sm{padding:.4rem .6rem;font-size:.8rem} /* A drawn checkbox: the native control cannot be given the brand tick. */ .side-check{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--text-2); cursor:pointer;padding:.3rem .1rem;border-radius:8px} .side-check:hover{color:var(--text)} .side-check input{position:absolute;opacity:0;width:0;height:0} .side-check-box{width:16px;height:16px;flex:none;border:1.5px solid var(--border);border-radius:5px; display:grid;place-items:center;transition:background .12s,border-color .12s} .side-check-box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(-45deg) scale(.6);opacity:0;transition:opacity .12s,transform .12s;margin-top:-2px} .side-check input:checked + .side-check-box{background:var(--brand);border-color:var(--brand)} .side-check input:checked + .side-check-box::after{opacity:1;transform:rotate(-45deg) scale(1)} .side-check input:focus-visible + .side-check-box{outline:2px solid var(--brand);outline-offset:2px} /* The category list scrolls on its own so the rest of the sidebar stays put. */ .side-cats{display:flex;flex-direction:column;gap:.1rem;max-height:19rem;overflow-y:auto;margin-top:.2rem} .side-cat{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem; width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:.42rem .55rem;border-radius:8px;font-size:.85rem;color:var(--text-2); transition:background .12s,color .12s } .side-cat:hover{background:var(--surface-2);color:var(--text)} .side-cat.active{background:var(--brand-tint);color:var(--brand);font-weight:600} /* A marker on the selected row, so the choice survives a busy list. */ .side-cat.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:15px;border-radius:0 3px 3px 0;background:var(--brand)} .side-cat > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side-cat .n{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums; background:var(--surface-2);border-radius:999px;padding:.05rem .4rem;flex:none} .side-cat:hover .n{background:var(--surface)} .side-cat.active .n{color:var(--brand);background:transparent} /* Categories holding nothing right now: still reachable, visibly quieter. */ .side-cat.empty{opacity:.45} .side-cat.empty:hover{opacity:1} .side-more{background:none;border:0;padding:.35rem .55rem;margin-top:.15rem;cursor:pointer; font-size:.75rem;color:var(--brand);text-align:left;border-radius:8px} .side-more:hover{background:var(--brand-tint)} .side-reset{width:100%;justify-content:center} .result-count{font-size:.85rem;color:var(--muted)} .shop-filter-toggle{display:none} /* Chips summarising what is currently narrowing the list. */ .active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem} .active-filters:empty{display:none} .af-chip{ display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .6rem;border-radius:999px; background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand);font-size:.78rem } .af-chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:.9rem;line-height:1;padding:0} @media(max-width:1040px){ .shop-layout{grid-template-columns:1fr} .shop-filter-toggle{display:inline-flex} .shop-side{position:static;max-height:none;display:none} .shop-side.open{display:flex} } /* ---- endless scroll ---- */ .scroll-sentinel{ display:flex;align-items:center;justify-content:center;gap:.6rem; width:100%;padding:1.1rem 1rem;margin-top:1.4rem; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r); color:var(--muted);font-size:.86rem;font-family:inherit;cursor:pointer; transition:border-color .18s,color .18s } .scroll-sentinel:hover{border-color:var(--brand);color:var(--brand)} .spinner{ width:14px;height:14px;border-radius:50%; border:2px solid var(--border-strong);border-top-color:var(--brand); animation:spin .7s linear infinite } @media(prefers-reduced-motion:reduce){ .spinner{animation:none} } .pad-cell .each{display:block;font-size:.64rem;color:var(--muted);font-weight:500} /* Quick-view product detail: description, ingredients and the pack's own nutrition panel. Scrolls with the panel body rather than growing the modal. */ .qv-details{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.85rem;display:grid;gap:.7rem} .qv-det h4,.qv-nutri h4{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem} .qv-det p{margin:0;font-size:.82rem;line-height:1.5;color:var(--text-2)} .qv-nutri img{max-width:100%;border:1px solid var(--line);border-radius:10px;background:#fff} /* Staff browsing the shop: price and range visible, basket withheld. */ .staff-only{font-size:.72rem;color:var(--muted);font-weight:600;border:1px dashed var(--line);border-radius:8px;padding:.3rem .55rem;white-space:nowrap} /* Brand list: the same rows as the category list, but a short list that does not need its own scroll area. */ .side-brands{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow-y:auto} /* ---- narrow phones ---------------------------------------------------- At 375px the wordmark, the hamburger and the account buttons together overflow the bar, which slides the whole page sideways. The logo gives up the width, since the nav is reachable either way. */ @media(max-width:480px){ .nav-inner{gap:.5rem;padding:.5rem .75rem} /* phone bar */ /* Scale the wordmark down rather than clipping it — a half-cut logo looks broken, a small one does not. */ .logo{min-width:0;flex:0 1 auto} .logo img,.logo svg,.logo-svg{height:auto;max-height:30px;max-width:112px; width:auto;object-fit:contain} .nav-actions{gap:.3rem;min-width:0} } /* Nothing on the page should scroll the viewport sideways. */ html,body{overflow-x:hidden}