*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#E4EDF1;--surface-3:#D4E2E8;
  /* text tokens meet WCAG AA (4.5:1) on --surface, --bg and their -soft backgrounds */
  --ink:#0B2A3A;--ink-2:#3E5A68;--ink-3:#546C7D;--line:#CBDAE1;--line-2:#B4C8D1;
  --aqua:#1490B4;--aqua-ink:#0D6F8C;--aqua-soft:#D6EEF5;--aqua-deep:#0B2A3A;--aqua-deep-2:#123B52;
  /* filled buttons and badges: white on #0D6F8C is 5.7:1 (the lighter --aqua was 3.7:1) */
  --btn:#0D6F8C;--btn-hover:#0A5A72;--on-btn:#FFFFFF;
  --jerri:#F2C230;--jerri-ink:#7A5D00;--jerri-soft:#FBF0C4;
  --good:#1B7450;--good-soft:#D8F1E5;--warn:#945808;--warn-soft:#FBE9CF;--bad:#B23434;--bad-soft:#F8DADA;
  --info:#2F5DBF;--info-soft:#DCE6FA;
  --shadow:0 1px 2px rgba(11,42,58,.06),0 10px 28px -14px rgba(11,42,58,.22);
  --shadow-lg:0 24px 60px -24px rgba(11,42,58,.45);
  --r:12px;--r-sm:7px;--r-lg:18px;
  --font-display:"Outfit","Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","Cascadia Mono","Consolas",ui-monospace,monospace;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A151B;--surface:#11202A;--surface-2:#182D38;--surface-3:#213A47;
    --ink:#E6F0F4;--ink-2:#A9BFC9;--ink-3:#8199A5;--line:#233C48;--line-2:#2F4D5B;
    --aqua:#3BB6D9;--aqua-ink:#7FD3EA;--aqua-soft:#12384A;--aqua-deep:#061219;--aqua-deep-2:#0E2431;--btn:#3BB6D9;--btn-hover:#7FD3EA;--on-btn:#061219;
    --jerri:#F2C230;--jerri-ink:#F7D96B;--jerri-soft:#3B3212;
    --good:#4CC08A;--good-soft:#123A2A;--warn:#F0A94B;--warn-soft:#3F2A10;--bad:#F07070;--bad-soft:#4A1C1C;
    --info:#7FA6F5;--info-soft:#1B2C4D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);--shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A151B;--surface:#11202A;--surface-2:#182D38;--surface-3:#213A47;
  --ink:#E6F0F4;--ink-2:#A9BFC9;--ink-3:#8199A5;--line:#233C48;--line-2:#2F4D5B;
  --aqua:#3BB6D9;--aqua-ink:#7FD3EA;--aqua-soft:#12384A;--aqua-deep:#061219;--aqua-deep-2:#0E2431;--btn:#3BB6D9;--btn-hover:#7FD3EA;--on-btn:#061219;
  --jerri:#F2C230;--jerri-ink:#F7D96B;--jerri-soft:#3B3212;
  --good:#4CC08A;--good-soft:#123A2A;--warn:#F0A94B;--warn-soft:#3F2A10;--bad:#F07070;--bad-soft:#4A1C1C;
  --info:#7FA6F5;--info-soft:#1B2C4D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);--shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}
html,body{height:100%}
html{-webkit-tap-highlight-color:transparent;font-size:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:.875rem/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.01em;font-weight:600}
h1{font-size:1.5rem}h2{font-size:1.125rem}h3{font-size:.9375rem}h4{font-size:.8125rem;color:var(--ink-2)}
p{margin:0}
a{color:var(--aqua-ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
code{font-family:var(--font-mono);font-size:.75rem;background:var(--surface-2);padding:1px 5px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}
.small{font-size:.7813rem}.tiny{font-size:.7188rem}
.right{text-align:right}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:0}
.stack{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.grid-2>*{min-width:0}
.hidden{display:none!important}
.only-mobile{display:none}
.hide-mobile{display:inline}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px;border-radius:4px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:var(--r-sm);font-weight:500;line-height:1.2;white-space:nowrap;transition:background .12s,border-color .12s,transform .05s,box-shadow .12s;min-height:36px}
.btn:hover{background:var(--surface-2)}
a.btn{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--btn);border-color:var(--btn);color:var(--on-btn);box-shadow:0 6px 16px -8px rgba(20,144,180,.7)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-jerri{background:var(--jerri);border-color:var(--jerri);color:#3A2C00}
.btn-jerri:hover{background:#E4B21E;border-color:#E4B21E}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:5px 10px;font-size:.7813rem;min-height:30px}
.btn-lg{padding:12px 18px;font-size:.9375rem;min-height:46px}
.btn-block{width:100%}
.icon-btn{width:34px;padding:0;font-size:1rem}
.btn.busy{position:relative;color:transparent!important}
.btn.busy::after{content:"";position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.6);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn:not(.btn-primary):not(.btn-ink).busy::after{border-color:var(--ink-3);border-top-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* fields */
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:.7813rem;color:var(--ink-2);font-weight:500}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:9px 11px;line-height:1.3;min-height:38px;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--aqua-ink);outline:none;box-shadow:0 0 0 1px var(--aqua-ink),0 0 0 4px var(--aqua-soft)}
textarea.input{min-height:70px;resize:vertical}
.input-lg{font-size:1.0625rem;padding:12px 14px;min-height:46px}
.prefix{display:flex;align-items:stretch}
.prefix>b{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-2);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--surface-2);color:var(--ink-2);font-weight:500;white-space:nowrap}
.prefix>.input{border-radius:0 var(--r-sm) var(--r-sm) 0}
.search{position:relative;display:flex;align-items:center}
.search>span{position:absolute;left:10px;width:16px;height:16px;color:var(--ink-3);pointer-events:none;display:flex}
.search>span svg{width:16px;height:16px}
.search>.input{padding-left:32px}
.check{display:flex;align-items:center;gap:8px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--aqua)}
.check.radio{justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px}
.check.radio:has(input:checked){border-color:var(--aqua);background:var(--aqua-soft);color:var(--aqua-ink)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:6px}
.error{color:var(--bad);font-size:.7813rem;background:var(--bad-soft);padding:8px 10px;border-radius:var(--r-sm)}
.help{font-size:.75rem;color:var(--ink-3)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.tight{padding:12px}
.card.raised{box-shadow:var(--shadow);border-color:transparent}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel{background:var(--surface-2);border-radius:var(--r);padding:12px 14px}
.divider{height:1px;background:var(--line);margin:8px 0}
.sect-title{margin:4px 0 8px;color:var(--ink-2);font-size:.8125rem;letter-spacing:.02em}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:500;line-height:1.5;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.aqua{background:var(--aqua-soft);color:var(--aqua-ink)}
.pill.jerri{background:var(--jerri-soft);color:var(--jerri-ink)}
.pill.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.pulse::before{animation:pulse 1.4s ease-in-out infinite}
.pill.pending{outline:1px dashed currentColor;outline-offset:-1px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.tag{font-size:.6875rem;padding:1px 6px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.empty{padding:28px 16px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r)}
.empty b{display:block;color:var(--ink-2);font-weight:500;margin-bottom:3px}
.empty-art{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--surface-2);align-items:center;justify-content:center;margin-bottom:8px;color:var(--ink-3)}
.empty-art svg{width:20px;height:20px}
.skeleton{display:grid;gap:8px}
.skeleton i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.notice{background:var(--jerri-soft);border:1px solid color-mix(in srgb,var(--jerri) 45%,transparent);border-radius:var(--r);padding:12px 14px}
.notice p{margin-top:2px}

/* table */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.table{width:100%;border-collapse:collapse;font-size:.8125rem}
.table th{font-weight:500;color:var(--ink-2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;font-size:.7813rem;position:sticky;top:0;background:var(--surface);z-index:1}
.table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr.clickable:hover td{background:var(--surface-2)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.glyph-sm{display:inline-flex;width:28px;height:30px;align-items:center;justify-content:center;background:var(--surface-2);border-radius:6px}
.glyph-sm svg{width:18px;height:22px}

/* shell */
#app{min-height:100%}
.shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:var(--sat) 16px 0;height:calc(54px + var(--sat));background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand svg{width:22px;height:26px;color:var(--aqua)}
.station-chip{display:flex;flex-direction:column;line-height:1.15;padding-left:12px;border-left:1px solid var(--line)}
.station-chip b{font-weight:600;font-size:.8125rem}
.station-chip small{font-size:.6875rem;color:var(--ink-3)}
.mini-tank{display:block;height:3px;width:100%;background:var(--surface-3);border-radius:2px;margin-top:4px;overflow:hidden}
.mini-tank i{display:block;height:100%;background:var(--aqua);border-radius:2px}
.mini-tank i.low{background:var(--warn)}
.topbar .spacer{flex:1}
.net{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:500;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:28px}
.net i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.net.live i{animation:pulse 2.2s ease-in-out infinite}
.net.off{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.net.off i{background:var(--warn);box-shadow:none}
.net.warn{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.net.warn i{background:var(--bad);box-shadow:none}
.install-banner{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--aqua-soft);border-bottom:1px solid var(--line)}
.install-banner>span{display:flex;width:32px;height:32px;border-radius:8px;background:var(--surface);align-items:center;justify-content:center;color:var(--aqua-ink)}
.install-banner svg{width:18px;height:18px}
.body{display:flex;flex:1;min-height:0}
.sidenav{width:220px;flex-shrink:0;padding:14px 10px;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:2px}
.sidenav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-weight:500}
.sidenav a svg{width:18px;height:18px;opacity:.8}
.sidenav a:hover{background:var(--surface-2);color:var(--ink)}
.sidenav a.active{background:var(--aqua-soft);color:var(--aqua-ink)}
.sidenav a .count{margin-left:auto;background:var(--jerri);color:#3A2C00;font-size:.6875rem;padding:0 7px;border-radius:999px;font-weight:600}
.sidenav .sect{font-size:.7188rem;color:var(--ink-3);padding:12px 12px 4px;font-weight:500}
.sidenav .sect:first-child{padding-top:2px}
.sidenav .foot{margin-top:auto;padding:10px 12px;font-size:.75rem;color:var(--ink-3);line-height:1.4}
.sheet-nav{width:auto;border:0;padding:0;background:none}
.sheet-nav a{font-size:.9375rem;padding:12px}
.main{flex:1;min-width:0;padding:22px 24px 40px}
.main.narrow{max-width:680px;margin:0 auto;width:100%}
.main.wide{max-width:1560px;margin:0 auto;width:100%;padding-left:28px;padding-right:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head p{color:var(--ink-2);margin-top:3px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:1fr;grid-template-areas:"label" "value" "note" "spark";align-content:start}
.kpi span{grid-area:label;display:block;font-size:.7813rem;color:var(--ink-2)}
.kpi b{grid-area:value;display:block;white-space:nowrap;font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi small{grid-area:note;color:var(--ink-3);font-size:.75rem}
.kpi .spark{grid-area:spark;width:100%;height:28px;opacity:.9;margin-top:8px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:14px;align-items:start}
@media (max-width:760px){.rep-grid{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{background:none;border:0;padding:9px 14px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.active{color:var(--aqua-ink);border-bottom-color:var(--aqua)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.seg button{border:0;background:var(--surface);padding:7px 12px;color:var(--ink-2);font-weight:500;min-height:34px}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button.active{background:var(--ink);color:var(--bg)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .search{min-width:220px}
.toolbar select.input{width:auto}

/* bottom tab bar (phones) */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:none;background:var(--surface);border-top:1px solid var(--line);padding:6px 0 max(6px,var(--sab));z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.6875rem;color:var(--ink-3);text-decoration:none;font-weight:500;position:relative;padding:2px 0}
.tabbar a svg{width:22px;height:22px}
.tabbar a.active{color:var(--aqua-ink)}
.tabbar .count{position:absolute;top:-4px;right:calc(50% - 22px);background:var(--jerri);color:#3A2C00;font-size:.625rem;padding:0 5px;border-radius:999px;font-weight:600}

/* sign-in */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.login-form{display:flex;align-items:center;justify-content:center;padding:calc(30px + var(--sat)) 22px calc(30px + var(--sab));background:var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--surface);border-radius:22px;padding:26px 26px 22px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.auth-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.auth-head h1{font-size:1.375rem}
.auth-head p{font-size:.8125rem;margin-top:3px}
.auth-status{display:inline-flex;align-items:center;gap:6px;font-size:.7188rem;font-weight:500;padding:4px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.auth-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.auth-status.ok{background:var(--good-soft);color:var(--good)}
.auth-status.warn{background:var(--warn-soft);color:var(--warn)}
.auth-status.demo{background:var(--aqua-soft);color:var(--aqua-ink)}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:12px;padding:4px;margin-bottom:18px}
.auth-switch button{border:0;background:transparent;padding:9px;border-radius:9px;font-weight:600;color:var(--ink-2)}
.auth-switch button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.auth-form{gap:12px}
.afield{position:relative;display:flex;align-items:center}
.afield>span{position:absolute;left:14px;display:flex;align-items:center;color:var(--ink-3);pointer-events:none;font-weight:600;font-size:.875rem}
.afield>span svg{width:18px;height:18px}
.afield>.input{padding-left:44px;min-height:50px;font-size:1rem;border-radius:12px}
.afield>span.pre+.input{padding-left:62px}
.afield .eye{position:absolute;right:8px;border:0;background:var(--surface-2);color:var(--ink-2);font-size:.75rem;font-weight:600;padding:6px 10px;border-radius:8px}
.auth-form .btn-lg{min-height:50px;border-radius:12px;font-size:1rem}
.center{text-align:center}
.auth-demo{margin-top:16px;font-size:.7813rem;color:var(--ink-2)}
.auth-demo summary{cursor:pointer;font-weight:500;list-style:none;display:inline-flex;gap:6px;align-items:center;color:var(--ink-2)}
.auth-demo summary::before{content:"▸"}
.auth-demo[open] summary::before{content:"▾"}
.auth-demo-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.auth-demo .chip .mono{color:var(--aqua-ink);margin-left:4px;font-size:.75rem}
@media (max-width:900px){.login{grid-template-columns:1fr}.login-form{padding:20px 14px calc(24px + var(--sab))}.auth-card{padding:20px 18px 18px;border-radius:18px}.auth-head{flex-direction:column}}

/* public homepage */
.home .guestbar .btn-primary{box-shadow:none}
.home .main{padding-bottom:60px}

/* customer hero + shop */
.hero{background:linear-gradient(150deg,var(--aqua-deep-2),var(--aqua-deep));color:#E6F0F4;border-radius:var(--r-lg);padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(127,211,234,.25),transparent 70%)}
.hero .eyebrow{font-size:.7813rem;color:#A9BFC9;margin-bottom:4px}
.hero h1{color:#fff;font-size:1.375rem}
.hero p{color:#A9BFC9;font-size:.7813rem;margin-top:6px}
.live-order{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--aqua);border-radius:var(--r);padding:10px 14px;text-decoration:none;color:inherit}
.live-order .jerrican{width:36px;height:45px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.qty button{border:0;background:var(--surface-2);width:32px;height:32px;font-size:1rem}
.qty span{min-width:30px;text-align:center}
.hero-points{background:linear-gradient(150deg,var(--aqua-deep-2),var(--aqua-deep));color:#E6F0F4;border-radius:var(--r-lg);padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;position:relative;overflow:hidden}
.hero-points b{font-family:var(--font-display);font-size:2.375rem;font-weight:600;line-height:1;display:block;letter-spacing:-.02em}
.hero-points span{color:#A9BFC9;font-size:.7813rem}
.hero-points .progress{height:6px;background:rgba(255,255,255,.15);border-radius:3px;margin-top:10px;overflow:hidden}
.hero-points .progress i{display:block;height:100%;background:var(--jerri);border-radius:3px}
.order-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.order-tile.awaiting{border-color:var(--warn)}

/* product artwork, executive tier, branding, uploads */
img.art{display:block;width:var(--art,52px);height:var(--art,52px);object-fit:cover;border-radius:10px;box-shadow:0 6px 14px -8px rgba(0,0,0,.45);background:radial-gradient(circle at 50% 35%,#fff,#EDF3F5 70%);image-rendering:auto}
.upload-preview.premium{background:radial-gradient(circle at 50% 35%,#fff,var(--surface-2) 70%)}
.prod .glyph img.art{width:52px;height:52px}
.prod.packed{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.prod.exec{background:linear-gradient(160deg,#1A2933,#0E2231);color:#E6F0F4;border-color:#2B3E4B}
.prod.exec .price b,.prod.exec .name{color:#fff}
.prod.exec .muted{color:#A9BFC9}
.prod.exec .key{background:#2B3E4B;color:#E6F0F4}
.brand-chip{display:inline-flex;align-items:center;gap:5px;background:var(--jerri-soft);color:var(--jerri-ink);border-radius:999px;padding:1px 8px;font-size:.7188rem;font-weight:500;vertical-align:middle}
.brand-chip img{width:16px;height:16px;border-radius:3px;object-fit:cover;background:#fff}
.logo-thumb{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line);flex-shrink:0}
.upload{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.upload-preview{width:96px;height:96px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px dashed var(--line-2)}
.upload-preview img{width:100%;height:100%;object-fit:cover}
.upload-preview svg{max-height:70px;width:auto}
.glyph-sm.has-img{padding:0}
.glyph-sm img.art{width:28px;height:30px;border-radius:6px;box-shadow:none}

/* catalogue (customer shop) */
.catalog{display:grid;gap:26px;min-width:0}
.catalog>*{min-width:0}
.catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.catalog-head .eyebrow{font-size:.7813rem;color:var(--ink-3)}
.points-chip{display:inline-flex;align-items:center;gap:4px;background:var(--aqua-deep);color:#E6F0F4;border-radius:999px;padding:6px 14px;text-decoration:none;font-size:.8125rem;white-space:nowrap}
.points-chip b{font-family:var(--font-display);font-size:1rem}
.points-chip span{color:var(--jerri)}
.catalog-search .input{min-height:46px;border-radius:12px;font-size:.9375rem}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:500;white-space:nowrap;color:var(--ink-2);min-height:34px}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sect-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sect-row{margin-bottom:14px}
.sect-row .sect-title{margin:0;font-size:1.1875rem;color:var(--ink)}
.rail{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail .pcard{min-width:250px;max-width:270px;scroll-snap-align:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -20px rgba(11,42,58,.38);border-color:var(--line-2)}
.pcard-media{border:0;background:transparent;aspect-ratio:1/1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:0;isolation:isolate;overflow:hidden}
.pcard-media svg{height:64%;width:auto;filter:drop-shadow(0 14px 18px rgba(11,42,58,.25))}
.pcard-media img.art{width:100%;height:100%;border-radius:0;box-shadow:none;background:transparent;padding:0;object-fit:cover;opacity:0;transform:scale(1.08);filter:blur(14px);transition:opacity .55s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .55s ease;animation:none;will-change:transform}
.pcard-media img.art.ld{opacity:1;transform:none;filter:none}
.pcard-media:has(img.art:not(.ld))::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.pcard-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-130%);transition:transform .8s ease;pointer-events:none}
.pcard-media .qv{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(11,42,58,.72);color:#fff;font-size:.7188rem;font-weight:600;backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.pcard-media .qv svg{width:13px;height:13px}
.pcard .pcard-media:active img.art.ld{transform:scale(.97);transition-duration:.15s}
.badges{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:5px;z-index:2}
.badge{font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.badge.gold{background:var(--jerri);color:#3A2C00;border-color:var(--jerri)}
.badge.aqua{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
.badge.ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.badge.good{background:var(--good-soft);color:var(--good);border-color:transparent}
/* the 'check your phone' dialog of an M-Pesa prompt */
.stk-wait{text-align:center;padding:10px 4px 6px}.stk-wait h3{margin:12px 0 6px}.stk-wait p{margin:0 auto;max-width:34ch}.stk-wait p+p{margin-top:8px}
.stk-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--aqua-soft);color:var(--aqua-ink)}.stk-ic svg{width:30px;height:30px}
.stk-ic.ok{background:var(--good-soft);color:var(--good)}.stk-ic.bad{background:var(--bad-soft);color:var(--bad)}
.stk-spin{position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--aqua);animation:spin 1s linear infinite}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pcard-body{padding:16px 18px 18px;display:grid;grid-template-rows:auto auto auto auto auto;gap:6px;flex:1;align-content:start}
.pcard-name{border:0;background:none;padding:0;text-align:left;font-weight:600;font-size:.9688rem;color:var(--ink);cursor:pointer;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(0.9688rem * 1.3 * 2)}
.pcard-sub{font-size:.7813rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}
.pcard-price-row{display:flex;align-items:baseline;gap:6px;margin-top:6px;min-height:26px}
.pcard-price{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.pcard-price.big{font-size:1.75rem}
.pcard-price-row small{font-size:.75rem}
.pcard-meta{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--aqua-ink);white-space:nowrap}
.pcard-act{margin-top:6px;display:flex}
.pcard-act .btn{width:100%;min-height:42px;border-radius:10px;font-size:.875rem}
.pcard-act .qty{width:100%;justify-content:space-between;min-height:42px;border-radius:10px}
.pcard-act .qty button{width:42px;height:40px;font-size:1.125rem}
.pcard-act .qty span{font-size:.9375rem;font-weight:600}
.pcard-brand{font-size:.75rem;color:var(--jerri-ink);text-decoration:none;font-weight:500;min-height:18px;display:block;text-align:center}
.pcard.exec .pcard-brand{color:var(--jerri-ink)}
.reward-card{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--jerri-soft),var(--surface));border:1px solid var(--jerri);border-radius:16px;padding:12px 14px}
.reward-star{width:44px;height:44px;border-radius:12px;background:var(--jerri);color:#3A2C00;display:flex;align-items:center;justify-content:center;font-size:1.375rem;font-weight:700}
.shop-cart-bar{display:inline-flex;bottom:calc(74px + var(--sab));gap:10px}
.drawer-bg{position:fixed;inset:0;background:rgba(6,18,25,.45);z-index:40;backdrop-filter:blur(1px)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:41;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slidein .22s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--sat)) 16px 12px;border-bottom:1px solid var(--line)}
.drawer-body{overflow:auto;padding:12px 16px calc(16px + var(--sab));flex:1}
.dline{display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.dline-art{width:40px;height:44px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dline-art svg{height:34px;width:auto}
.dline-art img.art{width:40px;height:44px;border-radius:8px;box-shadow:none}
.dline-total{min-width:60px;text-align:right}
.psheet{margin:-20px -22px;overflow:hidden;border-radius:14px}
.psheet-x{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.85);border:0;border-radius:50%;width:32px;height:32px;font-size:1.125rem;cursor:pointer}
.psheet-media{height:300px;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.psheet-media svg{height:190px;width:auto;filter:drop-shadow(0 16px 24px rgba(11,42,58,.3))}
.psheet-media img.art{width:100%;height:100%;border-radius:0;box-shadow:none;background:transparent;padding:16px;object-fit:contain}
.psheet-media.photo{background:#0E2231;cursor:zoom-in}
.psheet-media.photo::before{content:"";position:absolute;inset:-12%;background:var(--img) center/cover no-repeat;filter:blur(26px) saturate(1.25) brightness(.85);opacity:.95}
.psheet-media.photo img.art{position:relative;padding:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.psheet-media .zoom-hint{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(11,42,58,.7);color:#fff;font-size:.7188rem;font-weight:600;backdrop-filter:blur(6px);pointer-events:none}
.psheet-media .zoom-hint svg{width:13px;height:13px}
@media (hover:hover){.psheet-media.photo:hover img.art{transform:scale(1.03)}}
.psheet-body{padding:18px 22px 22px;display:grid;gap:12px}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0}
.specs div{background:var(--surface-2);border-radius:10px;padding:8px 10px}
.specs dt{font-size:.7188rem;color:var(--ink-3)}
.specs dd{margin:0;font-weight:500;font-size:.8125rem}
.psheet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid var(--line)}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}.pcard{border-radius:14px}.pcard-body{padding:12px 12px 14px;gap:4px}.pcard-name{font-size:.875rem;min-height:calc(0.875rem * 1.3 * 2)}.pcard-price{font-size:1.0625rem}.pcard-meta{display:none}.pcard-act .btn,.pcard-act .qty{min-height:40px}.rail{gap:12px}.rail .pcard{min-width:190px;max-width:200px}.drawer{width:100%}.psheet-media{height:240px}}

/* motion + industrial */
.pcard{animation:cardin .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.98)}}
.pcard-media svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pcard:hover .pcard-media img.art.ld{transform:scale(1.06)}.pcard:hover .pcard-media svg{transform:scale(1.07)}.pcard:hover .pcard-media::after{transform:translateX(130%)}.pcard:hover .pcard-media .qv{opacity:1;transform:none}}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(11,42,58,.4)}
.pcard .btn-primary:active{transform:scale(.94)}
.tag.good{background:var(--good-soft);color:var(--good)}
img.art{animation:fadein .35s ease both}
@keyframes fadein{from{opacity:0}}
.qty span{display:inline-block;animation:pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{40%{transform:scale(1.28)}}
.qty button:active{transform:scale(.9)}
.chip{transition:background .15s,color .15s,transform .1s}
.chip:active{transform:scale(.96)}
.cart-bar.bump,.guestbar [data-act=cart-toggle].bump{animation:bump .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{30%{transform:scale(1.08)}60%{transform:scale(.97)}}
.drawer-bg{animation:fade .2s}
.modal.sheet .psheet{animation:sheetin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetin{from{transform:translateY(24px);opacity:0}}
.psheet-media img.art,.psheet-media svg{animation:zoomin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes zoomin{from{transform:scale(.85);opacity:0}}
.badges .badge{animation:cardin .4s both;animation-delay:.25s}
.toast{animation:toastin .28s cubic-bezier(.2,.8,.2,1)}
@keyframes toastin{from{transform:translateY(12px);opacity:0}}
.pill.dot.pulse::before{animation:pulse 1.4s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.pcard,img.art,.qty span,.badges .badge,.toast,.modal.sheet .psheet,.psheet-media img.art,.psheet-media svg{animation:none}.pcard:hover .pcard-media img.art,.pcard:hover .pcard-media svg{transform:none}.pcard-media img.art{transition:none;opacity:1;transform:none;filter:none}.pcard-media::before,.pcard-media::after{display:none}.lightbox img{animation:none}}

/* large till screens and kiosks */
@media (min-width:1600px){
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
  .prod{min-height:150px;padding:14px}
  .prod .litres{font-size:1.875rem}
  .prod .price b{font-size:1rem}
  .pos{grid-template-columns:minmax(0,1fr) 440px}
  .cart .btn-lg{min-height:54px;font-size:1.0625rem}
  .main.wide{max-width:1400px}
}
@media (min-width:2000px){html{font-size:100%}.prod-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.pos{grid-template-columns:minmax(0,1fr) 480px}}

/* desktop store layout */
.store-body{display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;align-items:start}
.filter-rail{position:sticky;top:calc(70px + var(--sat));display:grid;gap:18px}
.rail-group h4,.rail-group h2{font-size:.7813rem;letter-spacing:.02em;color:var(--ink-3);margin:0 0 6px;font-weight:600}
.rail-item{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:7px 10px;border-radius:8px;text-align:left;color:var(--ink-2);font-weight:500;font-size:.8438rem}
.rail-item:hover{background:var(--surface-2);color:var(--ink)}
.rail-item.active{background:var(--aqua-soft);color:var(--aqua-ink)}
.rail-item small{color:var(--ink-3);font-size:.75rem}
.rail-group .check{padding:6px 10px;font-size:.8438rem;color:var(--ink-2)}
.sort-select{width:auto;min-height:34px;padding:5px 10px;font-size:.8125rem}
.store .sect-row .row{gap:12px;flex-shrink:0}
.store .sect-row .row .muted{white-space:nowrap}
.store .chips{display:none}
.store .catalog-search{max-width:640px}
@media (max-width:1100px){.store-body{grid-template-columns:1fr}.filter-rail{display:none}.store .chips{display:flex}}
@media (min-width:1100px){.store .pgrid{grid-template-columns:repeat(4,1fr);gap:18px}.store .pcard-body{padding:14px 14px 16px}.store .pcard-name{font-size:.9063rem;min-height:calc(0.9063rem * 1.3 * 2)}.store .pcard-price{font-size:1.125rem}.store .pcard-act .btn,.store .pcard-act .qty{min-height:40px}}
@media (min-width:1400px){.store .pgrid{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1750px){.store .pgrid{grid-template-columns:repeat(6,1fr)}}

/* payments */
.pay-hint{margin:-2px 0 0;min-height:1.4em}
.split-box{margin-top:8px;padding:10px;border:1px dashed var(--line-2);border-radius:var(--r-sm);background:var(--surface-2)}
.split-box .field span{font-size:.75rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.code{font-size:.9375rem;letter-spacing:.12em}
.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.25rem;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.pay-steps{counter-reset:s;display:grid;gap:8px;margin:12px 0}
.pay-steps div{display:flex;gap:10px;align-items:flex-start;font-size:.875rem}
.pay-steps div::before{counter-increment:s;content:counter(s);flex:0 0 24px;height:24px;border-radius:50%;background:var(--aqua-soft);color:var(--aqua-ink);display:grid;place-items:center;font-weight:700;font-size:.7813rem}
.pay-box{background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.pay-box span{font-size:.75rem;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.pay-box b{font-size:1.375rem;letter-spacing:.06em}
.pay-box .amt{color:var(--jerri)}
.review-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);flex-wrap:wrap}
.review-row.faint{opacity:.75}
.action-card{border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent)}
.method-list{display:grid;gap:10px}
.method{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);display:grid;gap:8px}
.method>.check{font-size:.9375rem}
.method .form-grid{margin-top:2px}
.chooser{display:grid;gap:8px}
.chooser button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);text-align:left}
.chooser button:hover{border-color:var(--aqua);background:var(--aqua-soft)}
.chooser button:disabled{opacity:.5}
.chooser b{display:block;font-size:.9063rem}
.chooser small{color:var(--ink-3);font-size:.7813rem}
.chooser .ic{width:34px;height:34px;border-radius:10px;background:var(--aqua-soft);color:var(--aqua-ink);display:grid;place-items:center;flex:0 0 34px}
.chooser .ic svg{width:18px;height:18px}
@media (max-width:640px){.review-row{align-items:flex-start}.review-row>.row{width:100%;justify-content:flex-end}}

.bad-panel{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.link{background:none;border:0;padding:0;color:var(--aqua-ink);font-weight:600;text-decoration:underline;cursor:pointer;font-size:inherit}

.contact{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);margin:0 0 12px;flex-wrap:wrap}
.contact .avatar{width:38px;height:38px;font-size:.875rem}
.contact .mono{font-size:.8125rem}
.contact.walkin{background:var(--surface)}
.contact .btn svg{width:14px;height:14px;margin-right:4px}
a.tel{color:var(--aqua-ink);text-decoration:none;font-weight:600}
a.tel:hover{text-decoration:underline}
@media (max-width:640px){.contact>.row{width:100%}}

#sms-card .sms-tw{display:none}
#sms-card.tw .sms-at{display:none}
#sms-card.tw .sms-tw{display:flex}

.tag.free{background:var(--jerri);color:#3a2a00;font-weight:700}
.collect{display:inline-block;padding:3px 8px;border-radius:6px;font-weight:600;font-size:.7813rem}
.collect.ok{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good)}
.collect.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:#8a5a00}

/* queue board v2 */
.qtool{margin-bottom:12px}
.qtool .chips .chip small{opacity:.7;margin-left:3px}
.board.v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-flow:row;gap:14px;overflow:visible}
.board.v2.filtered{grid-template-columns:repeat(auto-fit,minmax(300px,380px))}
.lane-sort{min-height:26px;padding:2px 22px 2px 6px;font-size:.7188rem;width:auto;border-radius:6px;font-weight:500}
.board.v2 .lane{min-width:0}
.ocard.v2>*{min-width:0}
.ocard.v2{min-width:0}
.ocard.v2 .oc-head{gap:6px}
.ocard.v2 .oc-head .row{flex-wrap:nowrap;min-width:0}
.ocard.v2 .oc-no{white-space:nowrap}
.oc-facts span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard.v2 .oc-head .age{white-space:nowrap;flex:0 0 auto}
.oc-items li .grow{min-width:0;overflow-wrap:anywhere}
.oc-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.oc-facts b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-actions{flex-wrap:wrap}
.oc-actions .btn{padding:7px 7px;flex:0 0 auto;font-size:.7813rem;min-height:34px}
.oc-actions{gap:4px}
.oc-actions .grow{flex:1 1 90px}
.board.v2 .lane{padding:10px 10px 4px}
.ocard.v2{padding:0;gap:0;overflow:hidden;border-left-width:4px;box-shadow:0 1px 2px rgba(6,40,60,.05)}
.ocard.v2>*{padding:8px 12px}
.ocard.v2 .oc-head{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-bottom:1px solid var(--line);padding:8px 12px}
.ocard.v2 .oc-no{font-family:var(--font-display);font-size:.9375rem}
.ocard.v2 .oc-head .age{font-size:.75rem}
.ocard.v2.rush{border-left-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 25%,transparent)}
.ocard.v2.rush .oc-head{background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.oc-cust{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.oc-cust .avatar{width:32px;height:32px;font-size:.7813rem}
.oc-cust .icon-btn{padding:6px 8px}.oc-cust .icon-btn svg{width:15px;height:15px}
.oc-items{list-style:none;margin:0;display:grid;gap:3px;font-size:.8125rem}
.oc-items li{display:flex;gap:8px;align-items:baseline}
.oc-items .qty{font-weight:700;min-width:26px;color:var(--ink)}
.oc-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oc-facts div{display:grid;gap:1px}
.oc-facts span{font-size:.6563rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.oc-facts b{font-size:.8125rem}
.oc-facts b.bad{color:var(--bad)}
.oc-addr{display:flex;gap:8px;align-items:center;font-size:.8125rem}
.oc-addr>svg{width:16px;height:16px;flex:0 0 16px;color:var(--jerri-ink)}
.oc-note{font-size:.8125rem;color:var(--jerri-ink);background:color-mix(in srgb,var(--jerri) 14%,var(--surface));padding:6px 12px}
.oc-note.staff{color:var(--ink-2);background:var(--surface-2)}
.oc-pay{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.oc-pay .collect{font-size:.75rem;padding:2px 7px}
.oc-actions{display:flex;gap:6px;border-top:1px solid var(--line);background:var(--surface);padding:8px 10px 10px}
.oc-actions .btn{padding:8px 9px;min-height:36px;font-size:.8125rem}
.oc-actions .btn svg{width:15px;height:15px;margin-right:4px}
.oc-actions .btn.btn-ghost{color:var(--ink-3)}
.oc-actions .btn.btn-ghost:hover{color:var(--bad)}
@media (max-width:760px){.board.v2,.board.v2.filtered{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86vw;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.board.v2 .lane{scroll-snap-align:start}.oc-facts{grid-template-columns:repeat(2,1fr)}.oc-actions{flex-wrap:wrap}.oc-actions .grow{flex-basis:100%}}

.ocard.v2>.oc-pay-wrap{padding:0}
.oc-pay-wrap summary{list-style:none;cursor:pointer;padding:8px 12px}
.oc-pay-wrap summary::-webkit-details-marker{display:none}
.oc-pay-wrap summary:hover{background:var(--surface-2)}
.oc-pay-wrap .chev{color:var(--ink-3);font-size:.75rem;transition:transform .2s;margin-left:2px}
.oc-pay-wrap[open] .chev{transform:rotate(180deg)}
.pay-detail{padding:6px 12px 10px;background:var(--surface-2);border-top:1px dashed var(--line);display:grid;gap:5px}
.pay-detail .row{gap:10px;align-items:baseline}
.pay-detail .good{color:var(--good)}.pay-detail .bad{color:var(--bad)}.pay-detail .warn{color:#8a5a00}.pay-detail .jerri{color:var(--jerri-ink)}
.modal .pay-detail{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-top:6px}

.member-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.points-chip.wallet{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.points-chip.wallet svg{width:16px;height:16px;color:var(--aqua-ink);margin-right:2px}
.points-chip.wallet span{color:var(--aqua-ink);font-weight:600;margin-left:4px}
.steps-list{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:.875rem}
.profile-card .kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media (max-width:640px){.member-chips{justify-content:flex-start}}

/* customer wallet / points / profile */
.main.medium{max-width:1100px;margin:0 auto;width:100%}
.wallet-top{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:16px;align-items:stretch}
.wallet-card{position:relative;overflow:hidden;border-radius:20px;padding:22px 22px 18px;color:#EAF4F8;background:linear-gradient(135deg,#0B3C55 0%,#0E5A79 55%,#1289B0 100%);box-shadow:0 18px 40px rgba(6,40,60,.28);display:grid;gap:18px;align-content:space-between;min-height:210px}
.wc-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.wc-brand{display:flex;align-items:center;gap:6px;font-size:.8125rem;opacity:.92}.wc-brand svg{width:18px;height:18px}
.wc-chip{width:40px;height:28px;border-radius:6px;background:linear-gradient(135deg,#F2C230,#E8A900);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 8px 0 -6px rgba(255,255,255,.35)}
.wc-balance{position:relative;z-index:1}
.wc-balance span{font-size:.7188rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.wc-balance b{display:block;font-family:var(--font-display);font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;margin-top:2px}
.wc-meta{display:flex;justify-content:space-between;gap:10px;font-size:.8125rem;opacity:.9;position:relative;z-index:1}
.wc-wave{position:absolute;right:-50px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.2),rgba(255,255,255,0) 62%)}
.wallet-side{display:grid;gap:10px;align-content:start}
.quick-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.quick-amt{border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:10px 6px;display:grid;gap:2px;text-align:center;cursor:pointer}
.quick-amt:hover{border-color:var(--aqua);background:var(--aqua-soft)}
.quick-amt b{font-size:.875rem}.quick-amt small{color:var(--good);font-size:.6875rem}
.wallet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.wallet-stats span{display:block;font-size:.6563rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.wallet-stats b{font-size:.9375rem}.wallet-stats .good{color:var(--good)}.wallet-stats .warn{color:#8a5a00}
.wallet-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.wallet-row:last-child{border-bottom:0}
.wr-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.875rem;flex:0 0 30px}
.wallet-row.in .wr-ico{background:color-mix(in srgb,var(--good) 15%,var(--surface));color:var(--good)}
.wallet-row.out .wr-ico{background:var(--surface-2);color:var(--ink-2)}
.wallet-row.back .wr-ico{background:color-mix(in srgb,var(--jerri) 22%,var(--surface));color:var(--jerri-ink)}
.wr-label{font-size:.8438rem;font-weight:500}
.wr-amt{font-size:.875rem;white-space:nowrap}.wallet-row.in .wr-amt,.wallet-row.back .wr-amt{color:var(--good)}
.ptrack{position:relative;height:10px;background:var(--surface-2);border-radius:5px;margin:12px 0 6px}
.ptrack i{display:block;height:100%;background:linear-gradient(90deg,var(--jerri),#F2C230);border-radius:5px;transition:width .4s}
.ptrack em{position:absolute;top:-3px;width:2px;height:16px;background:var(--line-2);transform:translateX(-1px)}
.profile-card{background:linear-gradient(135deg,var(--surface) 55%,var(--aqua-soft))}
.page-head>div{min-width:0}
@media (max-width:760px){.wallet-top{grid-template-columns:1fr}.quick-amts{grid-template-columns:repeat(2,1fr)}.wallet-stats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hero-points{grid-template-columns:1fr}.hero-points>div:last-child{text-align:left!important}.wc-balance b{font-size:2.125rem}}

/* pos */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px;align-items:start}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.prod{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:120px;position:relative;transition:border-color .12s,background .12s,transform .08s}
.prod:hover{border-color:var(--aqua);background:var(--aqua-soft)}
.prod:active{transform:scale(.98)}
.prod.in-cart{border-color:var(--aqua);box-shadow:inset 0 0 0 1px var(--aqua)}
.prod.refill{background:linear-gradient(180deg,var(--surface),var(--aqua-soft))}
.prod.reward{border-color:var(--jerri);background:var(--jerri-soft)}
.prod .key{position:absolute;top:8px;left:8px;font-size:.6875rem;padding:1px 6px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.prod .stock{position:absolute;top:8px;right:8px}
.prod .glyph{display:flex;height:44px;align-items:flex-end;margin-top:14px}
.prod .glyph svg{height:44px;width:auto}
.prod.reward .glyph{font-size:1.875rem;color:var(--jerri-ink);align-items:center}
.prod .name{font-weight:500;line-height:1.3}
.prod .litres{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.prod .litres small{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.prod .price{margin-top:auto;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.7813rem}
.prod .price b{color:var(--ink);font-size:.875rem}
.prod:disabled{opacity:.45;cursor:not-allowed}
.cart{position:sticky;top:calc(70px + var(--sat))}
.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.totals{display:grid;gap:5px;margin:12px 0}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-family:var(--font-display);font-size:1.375rem;font-weight:600;border-top:1px solid var(--line-2);padding-top:8px;margin-top:4px}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pay-methods.pos-pay,.pay-methods.shop-pay{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.pay-methods.radios{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.pay-methods button,.pay-methods label{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:9px 6px;font-weight:500;font-size:.8125rem;min-height:38px}
.pay-methods button.active{border-color:var(--aqua);background:var(--aqua-soft);color:var(--aqua-ink)}
.pay-methods button:disabled{opacity:.5}
.cust-chip{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);background:var(--jerri-soft);border:1px solid var(--jerri)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.8125rem;flex-shrink:0;font-family:var(--font-display)}
.results{position:absolute;left:0;right:0;top:100%;z-index:10;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow);margin-top:4px;max-height:260px;overflow:auto}
.results button{display:flex;width:100%;text-align:left;border:0;background:none;padding:9px 12px;gap:10px;align-items:center}
.results button:hover{background:var(--surface-2)}
.cart-bar{display:none;position:fixed;left:12px;right:12px;bottom:calc(66px + var(--sab));z-index:22;box-shadow:var(--shadow-lg)}

/* queue board */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.lane{background:var(--surface-2);border-radius:var(--r);padding:10px;min-height:120px}
.lane-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px;font-weight:600;font-family:var(--font-display)}
.lane-head .pill{font-weight:600}
.ocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px;display:grid;gap:6px;border-left:3px solid var(--aqua)}
.ocard.delivery{border-left-color:var(--jerri)}
.ocard .age{color:var(--ink-3)}
.ocard.aging .age{color:var(--warn);font-weight:600}
.ocard.late{border-color:var(--bad);border-left-color:var(--bad)}
.ocard.late .age{color:var(--bad);font-weight:600}
.ocard .items{font-size:.7813rem;color:var(--ink-2)}
.ocard .items b{color:var(--ink)}

/* tracker */
.tracker{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
.stepper{display:grid;gap:0;position:relative}
.step{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding-bottom:14px;position:relative}
.step::before{content:"";position:absolute;left:10px;top:22px;bottom:-2px;width:2px;background:var(--line-2)}
.step:last-child::before{display:none}
.step.done::before{background:var(--aqua)}
.step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:.6875rem;color:transparent;flex-shrink:0;font-style:normal}
.step.done i{background:var(--aqua);border-color:var(--aqua);color:#fff}
.step.now i{border-color:var(--aqua);box-shadow:0 0 0 4px var(--aqua-soft);animation:ringpulse 2s ease-in-out infinite}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 4px var(--aqua-soft)}50%{box-shadow:0 0 0 7px transparent}}
.step b{font-weight:500;display:block;line-height:1.3}
.step.now b{color:var(--aqua-ink)}
.step small{color:var(--ink-3);font-size:.75rem}
.step.todo b{color:var(--ink-3)}
.jerrican{width:96px;height:120px;display:block}
.jerrican .body{fill:var(--surface);stroke:var(--jerri);stroke-width:3}
.jerrican .water{fill:var(--aqua);transition:y .8s cubic-bezier(.2,.8,.2,1),height .8s cubic-bezier(.2,.8,.2,1)}
.jerrican .cap{fill:var(--jerri)}
.jerrican .handle{fill:none;stroke:var(--jerri);stroke-width:3}
.jerrican .wave{fill:var(--aqua-ink);opacity:.45}
.jerrican .wave.anim{animation:wave 2.8s linear infinite}
@keyframes wave{to{transform:translateX(60px)}}
@media (prefers-reduced-motion:reduce){.jerrican .water{transition:none}.wave.anim{animation:none}.step.now i{animation:none}.pill.pulse::before{animation:none}.net.live i{animation:none}}

/* tracker v2 */
.track2{display:grid;gap:10px}
.track2-top{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center}
.jc-wrap{position:relative;width:92px}
.jc-wrap .jerrican{width:92px;height:115px}
.jc-pct{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.now-head{font-family:var(--font-display);font-size:1.125rem;font-weight:600;line-height:1.2}
.now-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 10px}
.now-meta .pill svg{width:13px;height:13px}
.now-meta a.pill{text-decoration:none}
.pbar{display:flex;gap:4px}
.pbar .seg{flex:1;height:8px;border-radius:4px;background:var(--surface-3);position:relative;overflow:hidden}
.pbar .seg.done{background:var(--aqua)}
.pbar .seg.now{background:var(--aqua-soft)}
.pbar .seg.now::after{content:"";position:absolute;inset:0;width:45%;background:var(--aqua);border-radius:4px;animation:slide 1.6s ease-in-out infinite}
.pbar.cancelled .seg{background:var(--bad-soft)}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(230%)}}
.pbar-labels{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-3);margin-top:5px}
.pbar-labels .done{color:var(--aqua-ink)}
.pbar-labels .now{color:var(--ink);font-weight:600}
.timeline summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
.timeline summary::before{content:"▸";font-size:.6875rem;transition:transform .15s}
.timeline[open] summary::before{transform:rotate(90deg)}
.timeline .stepper{margin-top:10px}
@media (max-width:760px){.track2-top{grid-template-columns:72px 1fr;gap:12px}.jc-wrap,.jc-wrap .jerrican{width:72px}.jc-wrap .jerrican{height:90px}.now-head{font-size:1rem}.pbar-labels span:nth-child(even){visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pbar .seg.now::after{animation:none;width:100%;opacity:.5}}

/* tank gauge */
.tank{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.tank .vessel{width:150px;height:213px;display:flex;align-items:center;justify-content:center}
.tank-svg{display:block;filter:drop-shadow(0 14px 16px rgba(11,42,58,.28))}
@media (max-width:760px){.tank{grid-template-columns:120px 1fr}.tank .vessel{width:120px;height:170px}.tank-svg{width:120px;height:170px}}
.tank b.big{font-family:var(--font-display);font-size:1.625rem;font-weight:600}

/* charts */
.chart{width:100%;height:auto;display:block}
.chart text{font-size:.7813rem;fill:var(--ink-3);font-family:var(--font-body)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--aqua)}
.chart .bar.today{fill:var(--jerri)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:130px 1fr 84px;gap:10px;align-items:center;font-size:.8125rem;padding:5px 0}
.hbar b{white-space:nowrap}
.hbar .track{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.hbar .track i{display:block;height:100%;background:var(--aqua);border-radius:5px}

/* receipt */
.receipt{font-family:var(--font-mono);font-size:.7813rem;background:#FFFDF7;color:#1E1E1E;padding:18px 20px;border-radius:4px;max-width:340px;margin:0 auto;box-shadow:inset 0 0 0 1px #E8E2CF;line-height:1.55;position:relative}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:6px;background:radial-gradient(circle at 6px 0,transparent 5px,#FFFDF7 5px) 0 0/12px 6px}
.receipt::before{top:-6px;transform:rotate(180deg)}
.receipt::after{bottom:-6px}
.receipt .c{text-align:center}
.receipt .logo svg{width:20px;height:24px;color:#1490B4}
.receipt .rule{border-top:1px dashed #9A9483;margin:8px 0}
.receipt .line{display:flex;justify-content:space-between;gap:8px}
.receipt .line.big{font-size:.9375rem}
.receipt h3{font-family:var(--font-mono);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase}
.receipt .barcode{margin-top:10px;display:flex;justify-content:center;gap:1px;height:26px}
.receipt .barcode i{display:block;background:#1E1E1E;height:100%}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(6,18,25,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade .15s;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:520px;max-height:calc(100vh - 40px - var(--sat) - var(--sab));overflow:auto;box-shadow:var(--shadow-lg);padding:20px 22px;animation:pop .18s cubic-bezier(.2,.8,.2,1)}
.modal.wide{max-width:760px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-20px -22px 14px;padding:16px 22px 10px;position:sticky;top:-20px;background:var(--surface);z-index:2;border-bottom:1px solid var(--line)}
.modal-head .x{border:0;background:none;font-size:1.25rem;line-height:1;color:var(--ink-3);padding:4px 8px;border-radius:6px}
.modal-head .x:hover{background:var(--surface-2);color:var(--ink)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
#toasts{position:fixed;right:16px;bottom:calc(16px + var(--sab));display:grid;gap:8px;z-index:60;max-width:min(360px,calc(100% - 32px))}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:.8125rem;display:flex;gap:10px;align-items:flex-start;animation:pop .2s;position:relative;overflow:hidden}
.toast .tick{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--aqua)}
.toast.good .tick{background:var(--good)}.toast.bad .tick{background:var(--bad)}.toast.warn .tick{background:var(--jerri)}
.toast .bar{position:absolute;left:0;bottom:0;height:2px;background:rgba(255,255,255,.35);animation:drain linear forwards;width:100%}
@keyframes drain{to{width:0}}
.toast.out{opacity:0;transition:opacity .3s}
.toast b{font-weight:600}
@media (prefers-reduced-motion:reduce){.modal,.modal-bg,.toast{animation:none}}

/* mpesa sim */

/* phones */
@media (max-width:760px){
  .only-mobile{display:flex}
  .hide-mobile{display:none}
  .sidenav{display:none}
  .tabbar{display:flex}
  .cart-bar{display:inline-flex}
  .main{padding:14px 12px calc(150px + var(--sab))}
  .main.narrow{padding-bottom:calc(90px + var(--sab))}
  .topbar{padding-left:12px;padding-right:12px;gap:8px}
  .topbar .brand span{display:none}
  .station-chip{border:0;padding-left:0}
  .btn{min-height:42px}
  .btn-sm{min-height:34px}
  .input,select.input{min-height:44px;font-size:1rem}
  .prod{min-height:112px}
  .pos{grid-template-columns:1fr;gap:0}
  .cart{position:fixed;left:0;right:0;bottom:calc(56px + var(--sab));top:auto;max-height:76vh;overflow:auto;border-radius:16px 16px 0 0;transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.8,.2,1);z-index:21;box-shadow:var(--shadow-lg)}
  .cart.open{transform:none;padding-bottom:22px}
  .cart.open ~ .cart-bar{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:1fr}
  .tracker{grid-template-columns:72px 1fr}
  .jerrican{width:72px;height:90px}
  .page-head h1{font-size:1.375rem}
  .hero{grid-template-columns:1fr auto;padding:16px 18px}
  .hero h1{font-size:1.1875rem}
  .modal{border-radius:14px}
  .modal.sheet{align-self:flex-end;border-radius:16px 16px 0 0;max-height:80vh}
  .modal-bg:has(.modal.sheet){align-items:flex-end;padding:0}
}
@media (max-width:1000px) and (min-width:761px){.pos{grid-template-columns:1fr}.cart{position:static}}
@media (prefers-reduced-motion:reduce){.cart{transition:none}}
@media print{
  body *{visibility:hidden}
  .modal-bg{position:static;background:none;padding:0}
  .print-area,.print-area *{visibility:visible}
  .print-area{position:absolute;left:0;top:0;width:100%;box-shadow:none}
  .no-print{display:none!important}
}

/* photo lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,14,20,.93);display:flex;align-items:center;justify-content:center;touch-action:none;animation:fade .18s;cursor:zoom-in;overscroll-behavior:contain}
.lightbox.zoomed{cursor:grab}
.lightbox img{max-width:min(96vw,1400px);max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none;animation:zoomin .3s cubic-bezier(.2,.8,.2,1);transform-origin:center;touch-action:none}
.lightbox .lb-x{position:absolute;top:calc(14px + var(--sat));right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.625rem;line-height:1;cursor:pointer;z-index:1}
.lightbox .lb-x:hover{background:rgba(255,255,255,.26)}
.lightbox .lb-hint{position:absolute;bottom:calc(16px + var(--sab));left:50%;transform:translateX(-50%);color:#C9D8DF;font-size:.75rem;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:999px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
body.lb-open{overflow:hidden}

/* public homepage: news ticker, floating ad */
.ticker{display:flex;align-items:stretch;height:38px;background:#07202D;color:#E6F0F4;overflow:hidden;position:relative;z-index:2}
.tk-tag{flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 14px;background:var(--jerri);color:#3A2C00;font-size:.7188rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tk-tag i{width:7px;height:7px;border-radius:50%;background:#3A2C00;animation:pulse 1.6s ease-out infinite}
.tk-track{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tk-run{display:flex;width:max-content;animation:tk var(--dur,40s) linear infinite;will-change:transform}
.ticker:hover .tk-run{animation-play-state:paused}
@keyframes tk{to{transform:translateX(calc(-1 * var(--seg,50%)))}}
.tk-seg{display:inline-flex;align-items:center;flex:none}
.tk-item{background:none;border:0;color:inherit;font:inherit;display:inline-flex;align-items:baseline;gap:8px;padding:0 16px;cursor:pointer;white-space:nowrap;line-height:38px}
.tk-item b{color:#F2C230;font-weight:600;font-size:.8125rem}
.tk-item span{color:#C9D8DF;font-size:.8125rem}
.tk-item:hover span{color:#fff}
.tk-dot{width:5px;height:5px;border-radius:50%;background:#7FD3EA;opacity:.7;flex:none}
.catalog .ticker{border-radius:12px;margin-bottom:14px}
.fad{position:fixed;right:20px;bottom:calc(20px + var(--sab));z-index:30;width:min(360px,calc(100% - 32px));display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;padding:14px 16px 14px 12px;border-radius:18px;background:linear-gradient(150deg,#243441,#0B2A3A);color:#E6F0F4;box-shadow:0 24px 60px -20px rgba(6,18,25,.75),0 0 0 1px rgba(255,255,255,.06);animation:fadin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay,0s)}
.fad-art{grid-row:1 / span 2;display:grid;place-items:center}
.fad-art svg{height:78px;width:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));animation:floaty 5s ease-in-out infinite}
.fad-body{grid-column:2}
.fad-cta{grid-column:2}
.fad .eyebrow{color:#F2C230;font-size:.6875rem;letter-spacing:.02em}
.fad h3{color:#fff;font-size:.9375rem;line-height:1.25;margin:2px 0 4px}
.fad p{color:#A9BFC9;font-size:.75rem;margin:0 0 4px;line-height:1.4}
.fad-x{position:absolute;top:-9px;right:-9px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:#0B2A3A;color:#fff;font-size:1.0625rem;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.fad-x:hover{background:#243441}
.fad.out{animation:fadout .25s ease both}
@keyframes fadin{from{opacity:0;transform:translateY(24px) scale(.96)}}
@keyframes fadout{to{opacity:0;transform:translateY(16px) scale(.97)}}
.sub-h{font-size:.875rem;font-weight:600;margin:8px 0 0;color:var(--ink)}
@media (max-width:760px){.ticker{height:34px}.tk-item{line-height:34px;padding:0 12px}.tk-tag{padding:0 10px;font-size:.6563rem}.fad{left:12px;right:12px;width:auto;bottom:calc(12px + var(--sab));grid-template-columns:54px 1fr auto;grid-template-rows:auto;gap:10px;padding:10px 12px;border-radius:14px}.fad-art{grid-row:auto}.fad-body,.fad-cta{grid-column:auto}.fad .eyebrow,.fad p{display:none}.fad h3{font-size:.8438rem;margin:0}.fad-art svg{height:46px}.fad .btn{padding:8px 10px}.shell:not(.home) .fad{bottom:calc(72px + var(--sab))}.catalog:has(.shop-cart-bar) .fad{bottom:calc(124px + var(--sab))}}
@media (prefers-reduced-motion:reduce){.tk-run{animation:none}.tk-seg[aria-hidden]{display:none}.tk-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.fad,.fad-art svg,.tk-tag i{animation:none}}

.shop-cart-bar{display:inline-flex}
@media (min-width:761px){.shop-cart-bar{left:0;right:0;width:max-content;margin:0 auto;bottom:calc(22px + var(--sab));min-width:300px;border-radius:999px;padding:12px 22px}.catalog:has(.shop-cart-bar) .fad{bottom:calc(92px + var(--sab))}}
.fad{z-index:21}
.fad.still{animation:none}

/* customer orders page */
.orders-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.orders-main{display:grid;gap:16px;min-width:0}
.orders-side{display:grid;gap:14px;min-width:0}
@media (min-width:1100px){.orders-grid{grid-template-columns:minmax(0,1fr) 300px}.orders-side{position:sticky;top:calc(66px + var(--sat))}}
.order-tile .olines{display:grid;gap:4px;font-size:.8438rem;padding:10px 12px;background:var(--surface-2);border-radius:12px}
.order-tile .oline{display:flex;align-items:baseline;gap:8px}
.order-tile .oline .q{color:var(--ink-3);min-width:28px;font-variant-numeric:tabular-nums}
.order-tile .oline .n{flex:1;min-width:0}
.order-tile .ofoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem}
.order-tile .ofoot .grow{flex:1}
.hist-sum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8125rem;color:var(--ink-2);margin:2px 0 10px}
.hist-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.card.tight.hist{padding:2px 0 4px}
.hgroup{padding:12px 14px 4px;font-size:.7188rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.hrow{display:grid;grid-template-columns:118px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--surface-2)}
.hrow .hn b{display:block;font-size:.875rem}
.hrow .hn small{color:var(--ink-3);font-size:.75rem;white-space:nowrap}
.hrow .hi{min-width:0}
.hrow .hi .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8438rem}
.hrow .hi .m{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hrow .hs{display:grid;gap:4px;justify-items:end}
.hrow .hp{font-weight:600;text-align:right;white-space:nowrap}
.hrow .ha{display:flex;gap:6px}
.hrow .ha svg{width:15px;height:15px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface-2);border-radius:12px;padding:10px 12px;min-width:0}
.stat b{display:block;font-family:var(--font-display);font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:.75rem;color:var(--ink-3)}
@media (max-width:760px){.hrow{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:4px 10px;padding:10px 12px}.hrow .hn{grid-row:1;grid-column:1;display:flex;align-items:baseline;gap:8px}.hrow .hn b{font-size:.875rem}.hrow .hp{grid-row:1;grid-column:2}.hrow .hi{grid-row:2;grid-column:1 / -1}.hrow .hs{grid-row:3;grid-column:1;display:flex;align-items:center;gap:8px;justify-items:start}.hrow .hs .btn{min-height:28px;padding:3px 8px}.hrow .ha{grid-row:3;grid-column:2;justify-content:flex-end}.hrow .ha .btn{min-height:30px;padding:4px 9px}.hist-sum{gap:4px 12px}}

/* checkout: combine points + wallet with one way to pay the rest */
.paywith{display:grid;gap:8px}
.paywith-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.paywith-head b{font-size:.875rem}
.tender{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.tender.on{border-color:var(--aqua);background:var(--aqua-soft)}
.tender input{width:18px;height:18px;accent-color:var(--aqua);margin:0;flex:none}
.tender .t-ic{width:28px;height:28px;border-radius:8px;background:var(--jerri-soft);color:var(--jerri-ink);display:grid;place-items:center;font-size:.875rem;flex:none}
.tender .t-ic svg{width:16px;height:16px}
.tender .grow{min-width:0;display:grid;gap:1px}
.tender .grow b{font-size:.8438rem}
.tender .grow small{color:var(--ink-3);font-size:.75rem}
.tender>b.num{white-space:nowrap;color:var(--aqua-ink)}
.rest-head{font-size:.8125rem;color:var(--ink-2);margin-top:2px}
.totals.covered{margin-top:0}

/* floating ad: real product photo */
.fad-art .fad-img{width:84px;height:84px;object-fit:cover;border-radius:16px;box-shadow:0 14px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);animation:floaty 5s ease-in-out infinite;display:block}
@media (max-width:760px){.fad-art .fad-img{width:48px;height:48px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.fad-art .fad-img{animation:none}}

/* cart: colour + formatting */
.drawer-head{background:linear-gradient(150deg,#0E3B52,#0B2A3A);color:#fff;border-bottom:0;padding:calc(16px + var(--sat)) 16px 14px}
.drawer-head h2{color:#fff;margin:0}
.drawer-sub{font-size:.7813rem;color:#A9BFC9;margin-top:2px}
.drawer-head .btn{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.drawer-head .btn:hover{background:rgba(255,255,255,.16)}
.drawer-head .btn:disabled{opacity:.4}
.dline{grid-template-columns:48px 1fr auto auto;padding:10px 0}
.dline-art{width:48px;height:48px;border-radius:12px}
.dline-art img.art{width:48px;height:48px;border-radius:12px}
.dline .grow>div:first-child{font-weight:600;font-size:.8438rem}
.dline-total{color:var(--aqua-ink);font-weight:700}
.dsect{font-size:.7188rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.drawer .seg{border-radius:12px;border-color:var(--line)}
.drawer .seg button{min-height:38px}
.drawer .seg button.active{background:var(--btn);color:var(--on-btn)}
.drawer .totals{background:var(--aqua-soft);border:1px solid color-mix(in srgb,var(--aqua) 28%,transparent);border-radius:14px;padding:12px 14px;margin:4px 0}
.drawer .totals .grand{color:var(--aqua-ink);border-top-color:color-mix(in srgb,var(--aqua) 35%,transparent)}
.drawer .totals.covered{background:var(--jerri-soft);border-color:color-mix(in srgb,var(--jerri) 45%,transparent)}
.drawer .totals.covered .grand{color:var(--ink);border-top-color:color-mix(in srgb,var(--jerri) 60%,transparent)}
.drawer-cta{position:sticky;bottom:-1px;padding:10px 0 2px;margin-top:4px;background:linear-gradient(to top,var(--surface) 75%,transparent)}
.drawer-cta .btn-primary{background:linear-gradient(135deg,var(--aqua),var(--aqua-ink));border-color:transparent;box-shadow:0 14px 28px -12px rgba(11,42,58,.55);font-size:.9688rem}

/* app install QR (admin settings) */
.qr-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start}
.qr-box{width:200px;height:200px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;display:grid;place-items:center;overflow:hidden}
.qr-box svg{width:100%;height:100%;display:block}
.qr-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8125rem}
.qr-url .mono{background:var(--surface-2);padding:6px 10px;border-radius:8px;word-break:break-all;font-size:.7813rem}
@media (max-width:640px){.qr-wrap{grid-template-columns:1fr}.qr-box{margin:0 auto}}

.qr-mini{display:flex;gap:12px;align-items:center}
.qr-box.sm{width:120px;height:120px;padding:5px;border-radius:10px;flex:none}

/* queue: stage switcher on phones */
.stage-tabs{display:none}
.qboard{position:relative}
@media (min-width:761px){.lane-jump{display:none}}
@media (max-width:760px){
  .stage-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;margin-top:-4px}
  .stage-tab{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:.8125rem;font-weight:600;color:var(--ink-2);min-height:36px}
  .stage-tab b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);font-size:.75rem;display:inline-flex;align-items:center;justify-content:center}
  .stage-tab.has b{background:var(--btn);color:var(--on-btn)}
  .stage-tab.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .stage-tab.on b{background:var(--jerri);color:#3A2C00}
  .qboard::after{content:"";position:absolute;top:0;bottom:6px;right:0;width:26px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
  .lane-empty{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .lane-jump{min-height:30px;padding:4px 10px}
}

/* desktop loyalty app link */
.legacy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.legacy-note{background:var(--jerri-soft);border:1px solid color-mix(in srgb,var(--jerri) 45%,transparent);border-radius:12px;padding:10px 12px;font-size:.8125rem;color:var(--ink-2)}

/* catalogue phase 1: backdrops for faint photos, unit prices, applied filters, suggestions, phone filter sheet, sheet v2 */
.pcard-media{text-decoration:none;color:inherit}
h3.pcard-name{margin:0}.pcard-name a{color:inherit;text-decoration:none}
.pcard-unit{font-size:.75rem;color:var(--ink-3);min-height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.pcard-brand{border:0;background:none;cursor:pointer;width:100%;font:inherit;font-size:.75rem;font-weight:500;color:var(--jerri-ink)}
.badge.warn{background:#FFE7C2;color:#7A3E00}
.badge.gold{color:#2B2000}
mark.hl{background:var(--jerri-soft);color:inherit;border-radius:3px;padding:0 1px}
.trust-strip{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.7813rem;color:var(--ink-3);margin-top:-12px}
.trust-strip span::before{content:"✓";color:var(--aqua-ink);font-weight:700;margin-right:6px}
.applied{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip.on{background:var(--aqua-soft);border-color:var(--aqua);color:var(--aqua-ink)}
.chip.on span{margin-left:8px;opacity:.7}
.chip.ghost{background:none;border-style:dashed}
.catalog-search{position:relative}
.search-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:var(--surface-2);border-radius:50%;width:26px;height:26px;cursor:pointer;color:var(--ink-2);font-size:1rem;line-height:1}
.catalog-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:grid;gap:2px;max-height:min(420px,60vh);overflow:auto}
.catalog-suggest[hidden]{display:none}
.sg-head{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:.75rem;color:var(--ink-3)}
.sg-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:10px;text-align:left;color:var(--ink);cursor:pointer;font:inherit;font-size:.875rem}
.sg-row:hover,.sg-row.active{background:var(--surface-2)}
.sg-row .sg-art{width:36px;height:36px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.sg-row .sg-art img.art{width:36px;height:36px;object-fit:cover;border-radius:8px;box-shadow:none;padding:0}
.sg-row .sg-art svg{height:28px;width:auto}
.sg-row .grow{display:grid;line-height:1.25;min-width:0}.sg-row small{color:var(--ink-3);font-size:.75rem}
.sg-row>svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.sg-row.all{border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:2px;color:var(--aqua-ink);font-weight:600}
.link{border:0;background:none;color:var(--aqua-ink);font-weight:600;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.no-results{display:grid;gap:14px}.no-results .sect-title.small{font-size:.9375rem;margin:0}.no-results .empty p{margin:6px 0 0}
.fs-pill{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + var(--sab));z-index:38;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;font-weight:600;box-shadow:var(--shadow-lg);font-size:.875rem;cursor:pointer}
.fs-pill.with-cart{bottom:calc(130px + var(--sab))}
.fs-pill svg{width:16px;height:16px}
@media (max-width:1100px){.fs-pill{display:inline-flex}}
body.fs-open{overflow:hidden}
.fsheet-bg{position:fixed;inset:0;background:rgba(6,18,25,.45);z-index:44}
.fsheet{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-radius:18px 18px 0 0;max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:sheetup .25s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}}
.fsheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 8px}.fsheet-head h3,.fsheet-head h2{margin:0;font-size:1.0625rem}
.fsheet-body{overflow:auto;padding:0 16px 12px;display:grid;gap:14px}
.fsheet .rail-item{padding:9px 10px;font-size:.9063rem}
.fsheet-foot{display:flex;gap:10px;padding:10px 16px calc(12px + var(--sab));border-top:1px solid var(--line)}
.fsheet-foot .grow{flex:1}
.psheet-cta{position:sticky;bottom:-22px;background:var(--surface);padding-bottom:calc(8px + var(--sab));margin-top:4px;z-index:1}
.psheet-unit{font-size:.7813rem;color:var(--ink-3)}
.psheet-actions .btn svg{width:15px;height:15px;margin-right:5px}
.highlights{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.875rem}
.howto{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.8438rem;color:var(--ink-2)}
.psheet-deliver{display:flex;gap:10px;align-items:center;background:var(--aqua-soft);border-radius:12px;padding:10px 12px;font-size:.8125rem}
.psheet-deliver svg{width:18px;height:18px;flex:none;color:var(--aqua-ink)}
.related h4,.related h3{margin:0 0 8px;font-size:.875rem}
.rel-rail{display:grid;gap:8px}
.rel-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rel-art{width:44px;height:44px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.rel-art img.art{width:44px;height:44px;object-fit:cover;border-radius:8px;box-shadow:none;padding:0}
.rel-art svg{height:34px;width:auto}
.rel-card .grow{min-width:0}.rel-card .grow a{color:inherit;text-decoration:none;font-weight:600;font-size:.875rem}
.rel-card small{display:block;color:var(--ink-3);font-size:.75rem}
@media (min-width:640px){.rel-rail{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.psheet-cta{flex-wrap:wrap}.psheet-cta>.row{width:100%}.psheet-cta>.row .btn{flex:1}}

/* admin catalogue (phase 1): products page v2, quick edit, bulk bar, row menus, grid view, form sections */
.prod-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.prod-toolbar .search{flex:1;min-width:220px;max-width:420px;margin:0}
.prod-toolbar select.input{width:auto;min-height:36px;padding:5px 10px}
.prod-table td.drag{width:72px;white-space:nowrap;color:var(--ink-3)}
.drag-handle{cursor:grab;font-size:.875rem;letter-spacing:-2px;margin-right:4px;user-select:none}
.order-btns{display:inline-flex;gap:2px}
.btn-xs{padding:2px 6px;min-height:22px;font-size:.75rem}
.prow.dragging{opacity:.4}
.prow.drop-before td{box-shadow:inset 0 3px 0 var(--aqua)}
.prow.drop-after td{box-shadow:inset 0 -3px 0 var(--aqua)}
.prow.sel td{background:var(--aqua-soft)}
.quick{background:none;font:inherit;font-weight:600;color:var(--ink);cursor:text;padding:2px 6px;border-radius:6px;border:1px dashed transparent}
.quick:hover{border-color:var(--line-2);background:var(--surface-2)}
.quick.low{color:var(--warn)}
.quick-input{width:96px;text-align:right;min-height:32px;padding:4px 8px}
.bulk-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--ink);color:var(--bg);border-radius:12px;padding:8px 12px;margin-bottom:12px}
.bulk-bar b{margin-right:6px}
.bulk-bar .btn{min-height:30px}
.menu{position:relative;display:inline-block}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:grid;min-width:180px}
.menu-list button,.menu-list a{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;font:inherit;font-size:.8438rem;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.menu-list button:hover,.menu-list a:hover{background:var(--surface-2)}
.menu-list .danger{color:var(--bad)}
.menu-list.lifted{z-index:70;max-height:calc(100vh - 16px);overflow:auto}
.glyph-sm.thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:none}
.glyph-sm.thumb img.art{width:40px;height:40px;object-fit:cover;border-radius:8px;box-shadow:none;padding:0}
.pmini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pmini{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pmini.sel{border-color:var(--aqua)}
.pmini-sel{position:absolute;top:8px;left:8px;z-index:2;background:var(--surface);border-radius:6px;padding:2px 4px}
.pmini-media{border:0;background:var(--surface-2);width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:0}
.pmini-media img.art{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;padding:0}
.pmini-body{padding:10px 12px;display:grid;gap:4px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.form-grid.three{grid-template-columns:1fr}.prod-table td.drag .order-btns{display:none}}

/* catalogue phase 2: promotions, collections, category strips, notify-me, gallery, free-delivery bar */
.pcard-price.sale{color:var(--bad)}
.pcard-was{font-size:.8125rem;color:var(--ink-3);text-decoration:line-through;margin-left:2px}
.badge.sale{background:var(--bad);color:#fff;border-color:var(--bad)}
.promo-ends{font-size:.7188rem;color:var(--bad);font-weight:600}
.strip{display:grid;gap:12px}
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.strip-head h3,.strip-head h2{margin:0;font-size:1.1875rem}.strip-head p{margin:2px 0 0;font-size:.8125rem;color:var(--ink-3);max-width:60ch}
.strip-head .link{white-space:nowrap}
.strips{display:grid;gap:28px}
.rail-sect{display:grid;gap:10px}
.rail-sect .sect-row{margin-bottom:0}
.rail-sect .sect-row p{margin:2px 0 0;font-size:.8125rem;color:var(--ink-3)}
.fd-wrap{background:var(--aqua-soft);border-radius:12px;padding:10px 12px;font-size:.8125rem;display:grid;gap:6px}
.fd-wrap.done{background:var(--good-soft,#E3F6EA);color:var(--good,#1B7F4B);font-weight:600}
.fd-bar{height:6px;border-radius:999px;background:rgba(11,42,58,.12);overflow:hidden}
.fd-bar i{display:block;height:100%;background:var(--aqua);border-radius:999px;transition:width .4s ease}
.notify-btn{width:100%;min-height:42px;border-radius:10px;font-size:.875rem}
.notify-btn.done{background:var(--good-soft,#E3F6EA);color:var(--good,#1B7F4B);border-color:transparent;cursor:default}
.gallery{display:flex;gap:8px;padding:10px 22px 0;overflow-x:auto}
.gallery button{border:2px solid transparent;background:var(--surface-2);border-radius:10px;width:56px;height:56px;padding:0;overflow:hidden;cursor:pointer;flex:none}
.gallery button.active{border-color:var(--aqua)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0B2A3A;font-size:1.375rem;cursor:pointer;z-index:2}
.lightbox .lb-prev{left:14px}.lightbox .lb-next{right:14px}
.lightbox .lb-count{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:rgba(11,42,58,.7);color:#fff;border-radius:999px;padding:4px 10px;font-size:.75rem}
.psheet-sub{display:flex;gap:8px;flex-wrap:wrap}

/* admin catalogue (phase 2): tabbed product form, photo list, collections, promotions, import preview, media library */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto}
.tab{border:0;background:none;padding:8px 12px;font:inherit;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab.active{color:var(--ink);border-bottom-color:var(--aqua)}
.tabpane{display:grid;gap:12px}
.media-list{display:grid;gap:8px}
.media-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px}
.media-item.primary{border-color:var(--aqua);background:var(--aqua-soft)}
.media-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.media-item .input{min-height:34px;padding:4px 8px;font-size:.8125rem}
.media-item .row{gap:4px}
.media-item .tag{font-size:.6875rem}
.unit-preview{font-size:.7813rem;color:var(--ink-3);margin-top:4px}
.status-pill.live{background:var(--good-soft,#E3F6EA);color:var(--good,#1B7F4B)}
.status-pill.scheduled{background:var(--aqua-soft);color:var(--aqua-ink)}
.status-pill.ended,.status-pill.off{background:var(--surface-2);color:var(--ink-3)}
.picker{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px 10px;display:grid;gap:2px}
.picker label{padding:4px 0}
.picker label[hidden]{display:none}
.import-preview{max-height:320px;overflow:auto}
.import-preview .create{color:var(--good,#1B7F4B)}.import-preview .update{color:var(--aqua-ink)}.import-preview .error{color:var(--bad)}
.media-lib{max-height:60vh;overflow:auto}
.media-lib img{width:48px;height:48px;object-fit:cover;border-radius:8px;background:var(--surface-2)}
@media (max-width:640px){.media-item{grid-template-columns:56px 1fr}.media-item>.row{grid-column:1/-1;justify-content:flex-end}}

/* catalogue phase 3: ratings, reviews, promo codes, bundles */
.stars-sm{color:var(--jerri);letter-spacing:-1px;font-size:.75rem}
.stars-sm.big{font-size:.9375rem}
.rating-line{font-size:.8125rem;color:var(--ink-2);margin-top:2px}
.reviews{display:grid;gap:10px}
.reviews h4,.reviews h3{margin:0;font-size:.875rem}
.review{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:4px;font-size:.8438rem}
.review p{margin:0;color:var(--ink-2)}
.review .reply{background:var(--aqua-soft);border-radius:8px;padding:6px 8px;font-size:.8125rem}
.review-row{border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:grid;gap:6px}
.review-row .stars{font-size:1.5rem;gap:2px}
.promo-row2 .field{margin:0}
.promo-row2 .row .input{flex:1;text-transform:uppercase}
.small.good{color:var(--good,#1B7F4B);font-weight:600;margin-top:4px}
.totals .off span:last-child{color:var(--good,#1B7F4B)}
.pcard-sub .stars-sm{font-size:.6875rem}

/* admin catalogue (phase 3): reviews queue, insights, promo codes, bundle components, stock operations */
.rev-text{max-width:46ch;white-space:normal}
.rev-tabs{display:flex;gap:6px;margin-bottom:12px}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.ins-grid .card{margin:0}
.comp-row{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center}
.comp-row .input{min-height:36px}
.kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:130px}
.kpi b{display:block;font-family:var(--font-display);font-size:1.25rem}
.kpi span{font-size:.75rem;color:var(--ink-3)}
.stock-actions{display:inline-flex;gap:4px;flex-wrap:wrap}

/* the switchable ad as a banner at the top of the catalogue */
.ad-banner{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border-radius:var(--r-lg);padding:20px 22px;background:linear-gradient(150deg,#243441,#0B2A3A);color:#E6F0F4}
.ad-banner .eyebrow{color:#F2C230;font-size:.75rem}
.ad-banner h2{color:#fff;font-size:1.25rem;max-width:24ch;margin:2px 0 0}
.ad-banner p{color:#A9BFC9;font-size:.7813rem;margin:6px 0 12px;max-width:60ch}
.ad-banner-art{display:grid;place-items:center}
.ad-banner-art svg{height:110px;width:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4))}
.ad-banner-art img{height:110px;width:110px;object-fit:cover;border-radius:14px;box-shadow:0 12px 20px rgba(0,0,0,.4)}
@media (max-width:760px){.ad-banner{padding:16px}.ad-banner h2{font-size:1.0625rem}.ad-banner-art svg{height:80px}.ad-banner-art img{height:84px;width:84px}}

/* cut-out product photos: the whole product, uncropped, on the card's own background */
img.art.cut{object-fit:contain}
.pcard-media img.art.cut{padding:5%}
.psheet-media.cutout{background:var(--surface)}
.psheet-media.cutout::before{display:none}
.psheet-media.cutout img.art{filter:none;padding:20px}
.bulk-bar #bulk-status{margin-left:auto}

/* products sit directly on the page: no card boxes, borders or lift between one product and the next (reference layout) */
.pcard,.pcard.exec{background:transparent;border:0;border-radius:0;box-shadow:none}
.pcard:hover,.pcard.exec:hover{transform:none;box-shadow:none;border-color:transparent}
@media (hover:hover){.pcard:hover{transform:none;box-shadow:none}}
.pcard-media{border-radius:0}
.pcard-body{padding:12px 10px 16px}
@media (max-width:760px){.pcard{border-radius:0}.pcard-body{padding:10px 8px 14px}}
@media (min-width:1100px){.store .pcard-body{padding:12px 10px 16px}}

/* the hidden attribute always wins, whatever display a component sets (tab panes, pickers, suggestions) */
[hidden]{display:none!important}

/* settings in tabs; a form's error stays on the form, not just in a passing toast */
.stabs{margin-bottom:16px;position:sticky;top:0;background:var(--bg);z-index:3;padding-top:2px}
.form-error{background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:10px;padding:8px 12px;font-size:.8125rem;font-weight:500}

/* the ad in the catalogue's own look: white surface, navy text, the product cut-out on plain white, brand button */
.fad{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(11,42,58,.35),0 2px 8px rgba(11,42,58,.08);border-radius:18px}
.fad .eyebrow{color:var(--aqua-ink)}
.fad h3{color:var(--ink)}
.fad p{color:var(--ink-2)}
.fad-x{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 4px 12px rgba(11,42,58,.18)}
.fad-x:hover{background:var(--surface-2)}
.fad-art .fad-img{object-fit:contain;background:transparent;border-radius:0;box-shadow:none;animation:none}
.fad-art svg{filter:drop-shadow(0 8px 14px rgba(11,42,58,.18))}
.ad-banner{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 30px -18px rgba(11,42,58,.3)}
.ad-banner .eyebrow{color:var(--aqua-ink)}
.ad-banner h2{color:var(--ink)}
.ad-banner p{color:var(--ink-2)}
.ad-banner-art img{object-fit:contain;border-radius:0;box-shadow:none;height:120px;width:120px}
.ad-banner-art svg{filter:drop-shadow(0 8px 14px rgba(11,42,58,.18))}

/* the ad's picture pops out above the card: bigger and sharper without a bigger ad, no tile around it */
.fad{overflow:visible;grid-template-columns:104px 1fr;padding:12px 16px 14px 10px}
.fad-art{align-self:end;overflow:visible}
.fad-art .fad-img{width:112px;height:112px;margin:-38px 0 -6px;object-fit:contain;object-position:center bottom;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 10px 14px rgba(11,42,58,.18))}
.fad-art svg{height:96px;margin-top:-30px}
@media (max-width:760px){.fad{grid-template-columns:58px 1fr auto;padding:8px 10px 9px 6px;gap:6px}.fad h3{font-size:.8438rem}.fad-cta .btn{padding:8px 11px}.fad-art .fad-img{width:80px;height:80px;margin:-32px -6px -4px -12px;border-radius:0}.fad-art svg{height:70px;margin-top:-22px}}

/* the Sante wordmark as the brand mark */
.brand-logo{height:42px;width:auto;display:block}
@media (max-width:760px){.brand-logo{height:34px}}

/* till tiles: the product cut-out shown whole and larger on the tile itself, no thumbnail box */
.prod{min-height:152px;gap:5px}
.prod .glyph{height:76px;align-items:center;justify-content:center;margin-top:16px}
.prod .glyph img.art{width:auto;height:76px;max-width:100%;object-fit:contain;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 8px 10px rgba(11,42,58,.14))}
.prod .glyph svg{height:64px}
.prod.exec .glyph img.art{filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
@media (max-width:760px){.prod{min-height:136px}.prod .glyph{height:64px}.prod .glyph img.art{height:64px}.prod .glyph svg{height:54px}}

/* the wordmark on receipts (screen and print) */
.receipt .logo{display:flex;justify-content:center}
.receipt-logo{height:48px;width:auto;display:block;margin:0 auto 6px}
@media print{.receipt-logo{height:42px}}


/* phones: tables wider than their card scroll sideways; the shaded edge and the label say so until the end is reached */
.table-wrap{position:relative}
.table-wrap.can-scroll:not(.at-end){box-shadow:inset -28px 0 20px -18px rgba(11,42,58,.22)}
.table-wrap.can-scroll:not(.at-end)::after{content:"scroll \2192";position:sticky;left:0;bottom:0;display:block;width:max-content;margin:-22px 0 0 auto;padding:2px 8px;font-size:.6875rem;color:var(--aqua-ink);background:var(--aqua-soft);border-radius:8px 0 0 0;pointer-events:none}
/* statements and receipts fit a phone */
@media (max-width:520px){
  .modal{max-height:calc(100dvh - 24px - var(--sat) - var(--sab));padding:16px 14px}
  .statement{padding:12px 10px}
  .receipt{max-width:100%;padding:14px 12px}
  /* the statement on a phone: one block per entry (date and detail, then the amounts with their names) */
  .stmt-table,.stmt-table tbody,.stmt-table tfoot,.stmt-table tr{display:block;width:100%}
  .stmt-table thead{display:none}
  .stmt-table tr{padding:8px 0;border-bottom:1px solid #E5E7EB;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
  .stmt-table td{display:block;border:0!important;padding:0;text-align:left}
  .stmt-table td:first-child{flex:0 0 auto;font-size:.6875rem;color:#6B7280}
  .stmt-table tbody td:nth-child(2){flex:1 1 100%;order:-1;font-weight:500}
  .stmt-table td.num{flex:0 0 auto;font-size:.75rem}
  .stmt-table td.num:empty{display:none}
  .stmt-table td.num::before{content:attr(data-l) " ";color:#6B7280;font-size:.6875rem}
  .stmt-table td.num{white-space:nowrap}
  .stmt-table tbody td:nth-child(2){margin-bottom:2px}
  .stmt-table tfoot tr{border-top:2px solid #0B2A3A;border-bottom:0;margin-top:2px}
  .stmt-table tfoot td:first-child{flex:1 1 100%;font-weight:700;color:#1E1E1E;font-size:.8125rem}
  .stmt-table td[colspan]{flex:1 1 100%}
  .stmt-who{flex-direction:column;gap:8px}.stmt-sum{justify-content:space-between;gap:8px}.stmt-sum div{text-align:left}
}
/* the cart button: outlined cart icon with a count bubble, "Cart" label on wide screens */
.cart-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.8438rem;cursor:pointer;position:relative;transition:border-color .12s,background .12s,transform .08s}
.cart-btn:hover{border-color:var(--aqua);background:var(--aqua-soft)}
.cart-btn:active{transform:scale(.97)}
.cart-btn.has{border-color:var(--aqua)}
.cart-ic{position:relative;display:inline-flex;align-items:center}
.cart-ic svg{width:21px;height:21px}
.cart-n{position:absolute;top:-9px;right:-11px;min-width:14px;height:18px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:.6875rem;font-weight:700;line-height:18px;text-align:center;border:2px solid var(--surface);font-family:var(--font-body,inherit)}
.cart-btn:hover .cart-n{border-color:var(--aqua-soft)}
@media (max-width:760px){.cart-btn{padding:0 10px;height:36px}.cart-btn .cart-lbl{display:none}}

/* delivery location picker */
.loc-fields{display:grid;gap:8px}
.loc-edit{border:1px dashed var(--line-2);border-radius:12px;padding:10px;display:grid;gap:8px}
details.loc-details summary{cursor:pointer;font-weight:500;color:var(--aqua-ink);margin:2px 0 6px}
details.loc-details .loc-fields{margin-bottom:8px}
select[multiple].input{min-height:120px}

/* business accounts: aging KPIs, the statement document, the customer's account grid, chip counts, the PIN reveal */
.kpis.aging{grid-template-columns:repeat(5,1fr)}@media(max-width:760px){.kpis.aging{grid-template-columns:repeat(2,1fr)}}
.chip-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--surface-2);font-size:.6875rem;line-height:18px;text-align:center;margin-left:2px}.chip.active .chip-n{background:rgba(255,255,255,.28)}
.acct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}.acct-grid div{background:var(--surface-2);border-radius:var(--r);padding:8px 10px}.acct-grid span{display:block;font-size:.75rem;color:var(--ink-2)}.acct-grid b{font-size:1rem;font-variant-numeric:tabular-nums}@media(max-width:520px){.acct-grid{grid-template-columns:1fr 1fr}}
.statement{background:#fff;color:#1E1E1E;padding:20px 22px;border:1px solid #E5E7EB;border-radius:6px;max-width:820px;margin:0 auto;font-size:.8125rem}
.stmt-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:2px solid #0B2A3A;padding-bottom:10px;margin-bottom:12px}.stmt-head .stmt-title{margin-left:auto;text-align:right}.stmt-head .receipt-logo{height:44px}
.stmt-who{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}.stmt-sum{display:flex;gap:14px;flex-wrap:wrap}.stmt-sum div{text-align:right}.stmt-sum span{display:block;font-size:.7188rem;color:#6B7280}.stmt-sum b{font-size:.9375rem}.stmt-sum .bad b{color:#B91C1C}
.stmt-table{width:100%;border-collapse:collapse}.stmt-table th,.stmt-table td{padding:6px 8px;border-bottom:1px solid #E5E7EB;text-align:left;vertical-align:top}.stmt-table th{font-size:.7188rem;text-transform:uppercase;letter-spacing:.04em;color:#6B7280}.stmt-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.stmt-table tfoot td{border-top:2px solid #0B2A3A;border-bottom:none;font-weight:600}.statement .muted{color:#6B7280}.statement .bad{color:#B91C1C}
.stmt-open{margin-top:12px;padding:10px 12px;background:#F3F7FA;border-radius:6px}.stmt-open b{display:block;margin-bottom:4px}.stmt-foot{margin-top:12px}
.pin-show{font-family:var(--font-mono);font-size:2.125rem;letter-spacing:.3em;text-align:center;padding:14px;background:var(--surface-2);border-radius:var(--r);margin:8px 0}
.modal-head .seg{vertical-align:middle;margin-left:6px}
/* every dialog form: the Save/Cancel row stays in view while the form scrolls, so long forms never look cut off */
.modal form>.form-actions:last-child,.modal>.form-actions:last-child{position:sticky;bottom:-20px;margin:14px -22px -20px;padding:12px 22px 14px;background:var(--surface);border-top:1px solid var(--line);z-index:2}
.modal .tabs{overflow-y:hidden;scrollbar-width:thin}
@media (max-width:520px){.modal form>.form-actions:last-child,.modal>.form-actions:last-child{bottom:-16px;margin:12px -14px -16px;padding:10px 14px 12px}.modal-head{margin:-16px -14px 12px;padding:14px 14px 10px;top:-16px}}
@media print{.statement{border:none;max-width:none;padding:0}}

/* compact sign-in: the catalogue is the home page, so no hero half here */
.login.plain{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100dvh;padding:calc(18px + var(--sat,0px)) 16px calc(24px + var(--sab,0px));gap:18px;background:var(--bg)}
.login.plain .auth-top{width:100%;max-width:460px;display:flex;justify-content:space-between;align-items:center}.login.plain .auth-top .brand-logo{height:50px;width:auto}
.login.plain .login-form{width:100%;max-width:460px;padding:0;min-height:0;display:block;background:none}.login.plain .auth-card{width:100%;max-width:none;margin:0}
@media (min-width:760px){.login.plain{justify-content:center;padding-top:24px}}

/* site footer */
.site-foot{margin-top:40px;border-top:1px solid var(--line);background:var(--surface);color:var(--ink)}
.sf-grid{max-width:1560px;margin:0 auto;padding:28px 28px 18px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.site-foot h4,.site-foot h2{margin:0 0 8px;font-size:.7813rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.site-foot a,.site-foot span{display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:.875rem;padding:3px 0}.site-foot a:hover{color:var(--aqua-ink)}.site-foot a svg{width:16px;height:16px}
.sf-brand .brand-logo{height:44px;width:auto}.sf-brand p{margin:8px 0 0;line-height:1.5}
.sf-bottom{max-width:1560px;margin:0 auto;padding:12px 28px calc(14px + var(--sab));border-top:1px solid var(--line)}
@media (max-width:900px){.sf-grid{grid-template-columns:1fr 1fr;padding:22px 18px 12px}}@media (max-width:520px){.sf-grid{grid-template-columns:1fr}.sf-bottom{padding-bottom:calc(80px + var(--sab))}}

/* top-bar contact: WhatsApp pill + call icon, right side, next to the cart */
.contact-top{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.contact-top svg{width:18px;height:18px;flex:none}
.contact-top.wa{background:#25D366;border-color:#25D366;color:#062e16;font-weight:600}.contact-top.wa:hover{background:#1fbf5b;border-color:#1fbf5b}

/* floating WhatsApp pill, top right, below the top bar (phone number lives in the footer) */
.contact-fab{position:fixed;right:18px;top:calc(50% - 24px);z-index:26;display:inline-flex;align-items:center;gap:9px;padding:0 18px 0 14px;height:48px;border-radius:999px;background:#25D366;color:#fff;font-weight:700;font-size:.9063rem;letter-spacing:.01em;text-decoration:none;box-shadow:0 12px 28px -12px rgba(37,211,102,.75),0 2px 6px rgba(11,42,58,.15);animation:cfab-in .35s cubic-bezier(.2,.8,.2,1) both;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.contact-fab:hover,.contact-fab:focus-visible{transform:translateY(-1px) scale(1.03);box-shadow:0 16px 32px -12px rgba(37,211,102,.8),0 3px 8px rgba(11,42,58,.18)}.contact-fab:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
.contact-fab svg{width:24px;height:24px;flex:none;position:relative}.cfab-text{position:relative}
.cfab-ring{position:absolute;inset:0;border-radius:999px;background:#25D366;opacity:.4;animation:cfab-pulse 2.8s ease-out infinite;pointer-events:none}
@keyframes cfab-in{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cfab-pulse{0%{transform:scale(1);opacity:.4}70%{transform:scale(1.28,1.6);opacity:0}100%{transform:scale(1.28,1.6);opacity:0}}
@media (max-width:760px){.contact-fab{right:12px;height:46px;width:46px;padding:0;justify-content:center;border-radius:50%}.cfab-text{display:none}.cfab-ring{border-radius:50%}}
@media (prefers-reduced-motion:reduce){.contact-fab{animation:none;transition:none}.cfab-ring{display:none}}
/* the Sante wordmark is the brand mark: taller top bar, legible logo, no duplicate "Sante" text beside it */
.topbar{height:calc(68px + var(--sat))}.brand-logo{height:56px}.topbar .station-chip b{display:none}.topbar .station-chip small{font-size:.8125rem;color:var(--ink-2)}
@media (max-width:760px){.topbar{height:calc(60px + var(--sat))}.brand-logo{height:44px}.contact-fab{top:calc(50% - 23px)}}

/* ---------- standards batch (2026-09-25 audit): focus, dialogs, toasts, overlaps, touch targets, motion ---------- */
/* a section heading that is an h2 in the outline but keeps the h3 look */
h2.h3{font-size:.9375rem}
/* dialog containers take focus programmatically; their title is announced, no ring on the panel itself */
.modal:focus,.drawer:focus,.fsheet:focus,.lightbox:focus{outline:none}
/* the real button inside a clickable table row or card (keyboard and screen-reader way in) */
.row-open{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px}
.row-open:hover,.row-open:focus-visible{text-decoration-color:currentColor}
/* toasts: above the tab bar and cart bars on phones, top-right on larger screens; the update toast carries a button */
.toast-act{flex:none;align-self:center;background:transparent;border:1px solid currentColor;color:inherit;border-radius:6px;padding:4px 10px;font-weight:600;min-height:32px}
.toast-x{flex:none;align-self:center;background:none;border:0;color:inherit;opacity:.85;font-size:1.125rem;line-height:1;min-width:32px;min-height:32px}
@media (max-width:760px){
  #toasts{left:12px;right:12px;max-width:none;bottom:calc(78px + var(--sab))}
  body:has(.cart-bar) #toasts,body:has(.shop-cart-bar) #toasts{bottom:calc(136px + var(--sab))}
}
@media (min-width:761px){
  #toasts{top:calc(84px + var(--sat));bottom:auto}
}
/* Filter & sort pill: lifted above the cart bar whenever the bar is on screen */
.catalog:has(.shop-cart-bar) .fs-pill{bottom:calc(130px + var(--sab))}
/* the floating ad steps aside while the footer (same links, same contacts) is on screen */
.fad{animation-fill-mode:backwards;transition:opacity .2s,visibility .2s,transform .2s}
body.foot-in .fad{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none}
/* WhatsApp pill: AA green behind the white label; tucks into an edge tab when it would cover a control */
.contact-fab{animation-fill-mode:backwards;background:#15803D;transition:transform .25s cubic-bezier(.2,.8,.2,1),right .25s cubic-bezier(.2,.8,.2,1),border-radius .25s,opacity .2s}
.contact-fab.tuck{right:0;transform:translateX(calc(100% - 20px));border-radius:999px 0 0 999px;opacity:.92;box-shadow:0 4px 12px rgba(11,42,58,.25)}
.contact-fab.tuck .cfab-ring{display:none}
.contact-fab.tuck:focus-visible{right:12px;transform:none;border-radius:999px;opacity:1}
/* product form tabs scroll sideways inside the dialog instead of widening it */
.pform-tabs{flex-wrap:nowrap;max-width:100%;min-width:0;overscroll-behavior-x:contain;scrollbar-width:thin}
.pform-tabs .tab{flex:none}
/* narrow screens: tables keep one line per cell and scroll sideways; long secondary text still wraps */
@media (max-width:760px){
  .table td,.table th{white-space:nowrap}
  .table td.small,.table td .small,.table td .tiny{white-space:normal;min-width:9rem}
  .table-wrap{overscroll-behavior-x:contain}
}
/* touch screens: every control is at least 44 px in both directions */
@media (pointer:coarse){
  :is(#app,#modal-root,.fad,.lightbox) :is(button,select,.btn,.input,.chip,.points-chip,.check):not(.row-open):not(.link):not(.tk-item):not(.toast-act):not(.toast-x){min-height:44px}
  :is(#app,#modal-root) :is(.pcard-act .btn,.pcard-act .qty,.qty button){min-height:44px}
  :is(#app,#modal-root,.fad,.lightbox) :is(button,.btn):not(.row-open):not(.link):not(.tk-item):not(.toast-act):not(.toast-x){min-width:44px}
  .fad-x{min-height:44px}
  /* bare checkboxes (table bulk select): 28 px box plus 8 px clear space on every side = a 44 px target zone */
  input[type=checkbox],input[type=radio]{width:28px;height:28px;margin:8px}
  .check input,.tender input{margin:0 4px 0 0}
  /* inline links and text buttons keep their look; an invisible margin around them takes the tap */
  .link,a.pill,a.tel,.row-open,.net,.pcard-name a,.site-foot a{position:relative}
  .link::after,a.pill::after,a.tel::after,.row-open::after,.net::after,.pcard-name a::after{content:"";position:absolute;inset:-12px -6px;min-height:44px}
  .site-foot a{min-height:44px}
}
/* reduced motion: no animation or transition anywhere (drawer slide, water waves, tickers, view transitions) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- refill carousel (catalogue top) ---------- */
.rc{position:relative;margin:0 0 1.1rem;border-radius:1.25rem;overflow:hidden;box-shadow:0 10px 30px rgba(11,42,58,.18)}
.rc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rc-track::-webkit-scrollbar{display:none}
.rc-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:15rem;padding:1.5rem 1.75rem 2.4rem;color:#fff;text-decoration:none;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 20%,rgba(255,255,255,.28),transparent 55%),linear-gradient(135deg,#0A4F6E 0%,#0D6F8C 45%,#2FA7CF 100%)}
.rc-1{background:radial-gradient(120% 90% at 85% 20%,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,#0B5A6B 0%,#10808F 50%,#43C1C9 100%)}
.rc-2{background:radial-gradient(120% 90% at 85% 20%,rgba(255,255,255,.32),transparent 55%),linear-gradient(135deg,#123E75 0%,#2466A8 50%,#5AA9E6 100%)}
.rc-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:.35rem;max-width:58%}
.rc-size{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:4.5rem;line-height:.9;letter-spacing:-.02em;text-shadow:0 4px 18px rgba(0,0,0,.18)}
.rc-size small{font-size:1.75rem;margin-left:.2rem;font-weight:600;opacity:.9}
.rc-name{font-weight:600;font-size:1.125rem}
.rc-line{font-size:.95rem;opacity:.92;line-height:1.35}
.rc-price{margin-top:.35rem;white-space:nowrap;display:inline-flex;align-items:baseline;gap:.35rem;align-self:flex-start;background:rgba(255,255,255,.95);color:#0A3A50;border-radius:999px;padding:.35rem .85rem;font-weight:700;font-size:1rem}
.rc-price small{font-weight:500;font-size:.8rem;color:#355566}
.rc-art{position:relative;z-index:2;flex:0 0 auto;width:12rem;height:12rem;margin-bottom:-.6rem;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;padding:1.1rem;box-shadow:0 0 0 .5rem rgba(255,255,255,.18),0 0 0 1.1rem rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.28)}
.rc-art img,.rc-art svg{max-width:100%;max-height:100%;object-fit:contain}
.rc-art img{width:100%;height:100%}
.rc-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:2.6rem;fill:rgba(255,255,255,.16);z-index:1}
.rc-bubbles{position:absolute;inset:0;pointer-events:none;z-index:1}
.rc-bubbles i{position:absolute;bottom:-1.5rem;width:.8rem;height:.8rem;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);animation:rc-rise 9s linear infinite}
.rc-bubbles i:nth-child(1){left:8%;animation-delay:0s}.rc-bubbles i:nth-child(2){left:28%;width:.5rem;height:.5rem;animation-delay:2.2s;animation-duration:7s}.rc-bubbles i:nth-child(3){left:47%;width:1.1rem;height:1.1rem;animation-delay:4s}.rc-bubbles i:nth-child(4){left:66%;width:.6rem;height:.6rem;animation-delay:1.1s;animation-duration:8s}.rc-bubbles i:nth-child(5){left:88%;animation-delay:5.5s;animation-duration:10s}
@keyframes rc-rise{0%{transform:translateY(0) scale(.8);opacity:0}15%{opacity:1}100%{transform:translateY(-17rem) scale(1.1);opacity:0}}
.rc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#0A3A50;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transition:opacity .2s}
.rc-prev{left:.75rem}.rc-next{right:.75rem}
.rc:hover .rc-nav,.rc-nav:focus-visible{opacity:1}
.rc-dots{position:absolute;left:0;right:0;bottom:.6rem;z-index:3;display:flex;justify-content:center;gap:.25rem}
.rc-dots button{width:1.75rem;height:1.75rem;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.rc-dots button::before{content:"";width:.55rem;height:.55rem;border-radius:999px;background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.rc-dots button.on::before{width:1.4rem;background:#fff}
.rc-slide:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (max-width:760px){.rc{border-radius:1rem;margin-bottom:.9rem}.rc-slide{min-height:11.5rem;padding:1.1rem 1.1rem 2.1rem}.rc-size{font-size:3.25rem}.rc-size small{font-size:1.25rem}.rc-name{font-size:1rem}.rc-line{font-size:.85rem}.rc-art{width:7.75rem;height:7.75rem;padding:.7rem}.rc-perl{display:none}.rc-text{max-width:60%}.rc-nav{display:none}}
@media (min-width:761px){.rc-slide{padding-right:10.5rem}}
@media (max-width:760px){.rc-art{align-self:flex-end;margin-bottom:-.2rem}.rc-dots{justify-content:flex-start;padding-left:.7rem}}
@media (prefers-reduced-motion:reduce){.rc-bubbles{display:none}}
/* refill carousel: bigger, clearer photos in the same slide size (2026-09-26) */
.rc-art{position:absolute;top:.75rem;bottom:.75rem;right:10.5rem;width:auto;height:auto;aspect-ratio:1;margin:0;padding:.3rem;box-shadow:0 0 0 .35rem rgba(255,255,255,.22),0 14px 34px rgba(0,0,0,.28)}
.rc-art img{width:100%;height:100%;object-fit:contain;transform:scale(1.06);image-rendering:auto}
.rc-text{max-width:calc(100% - 17rem)}
@media (max-width:760px){.rc-art{right:.7rem;top:.6rem;bottom:.6rem;padding:.2rem;box-shadow:0 0 0 .25rem rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.28)}.rc-text{max-width:calc(100% - 11.25rem)}.rc-line{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
.rc-slide{height:15.3rem;min-height:0}
.rc-art{top:.75rem;bottom:auto;height:calc(100% - 1.5rem);width:auto;aspect-ratio:1/1}
@media (max-width:760px){.rc-slide{height:13.5rem;min-height:0}.rc-art{top:.6rem;bottom:auto;height:calc(100% - 1.2rem);width:auto}.rc-size{font-size:2.9rem}.rc-line{-webkit-line-clamp:2}}
@media (max-width:760px){.rc-art{right:-1.4rem}.rc-text{max-width:calc(100% - 11.2rem + 1.4rem)}.rc-line{font-size:.8rem}.rc-price{font-size:.9rem;padding:.3rem .7rem}}
/* refill carousel, light version (2026-09-26, client: 'the image should be clear just like the executive ad'): white slide,
   no frame around the photo, dark text; product photos on white melt into the slide */
.rc{box-shadow:0 8px 26px rgba(11,42,58,.10);border:1px solid #DCEBF1}
.rc-slide,.rc-1,.rc-2{color:#0B2A3A;background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 45%,#EEF8FB 100%)}
.rc-1{background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 45%,#ECF7F7 100%)}
.rc-2{background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 45%,#EEF4FC 100%)}
.rc-size{color:#0D6F8C;text-shadow:none}.rc-size small{color:#0D6F8C}
.rc-name{color:#0B2A3A}.rc-line{color:#46606F;opacity:1}
.rc-price{background:#0D6F8C;color:#fff}.rc-price small{color:#D6EEF5}
.rc-art{background:none;border-radius:0;padding:0;box-shadow:none;overflow:visible;top:.5rem;height:calc(100% - 1rem);aspect-ratio:auto;width:40%;right:10.5rem;display:flex;align-items:center;justify-content:center}
.rc-art img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none;mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.04)}
.rc-art svg{height:100%;width:auto}
.rc-wave{fill:rgba(13,111,140,.07)}
.rc-bubbles i{background:rgba(13,111,140,.08);border-color:rgba(13,111,140,.18)}
.rc-dots button::before{background:rgba(13,111,140,.28)}.rc-dots button.on::before{background:#0D6F8C}
.rc-nav{background:#fff;border:1px solid #DCEBF1}
.rc-slide:focus-visible{outline-color:#0D6F8C}
@media (max-width:760px){.rc-art{right:.3rem;width:48%;top:.4rem;height:calc(100% - .8rem)}.rc-text{max-width:52%}}
html[data-theme="dark"] .rc-art img{mix-blend-mode:normal}
.rc{border:0;box-shadow:inset 0 0 0 1px #DCEBF1,0 8px 26px rgba(11,42,58,.10)}
.rc-art img.art{width:100%;height:100%;border-radius:0;box-shadow:none;background:transparent;padding:0;object-fit:contain;mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.04)}
.rc-art img.art{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.rc-nav{top:auto;bottom:.7rem;transform:none;width:2.4rem;height:2.4rem;font-size:1.35rem}.rc-prev{left:auto;right:4rem}.rc-next{right:1.2rem}
/* catalogue intro polish (2026-09-26): heading, search, trust tags, category chips and the space before the first shelf */
.store.catalog{gap:0}
.store.catalog > .rc{margin-bottom:1.5rem}
.store .catalog-head{margin-bottom:.9rem}
.store .catalog-head .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua-ink,#0D6F8C);margin-bottom:.2rem}
.store .catalog-head h1{font-size:1.75rem;line-height:1.15;letter-spacing:-.01em;margin:0}
.store .catalog-search{margin-bottom:.75rem}
.store .catalog-search .input{min-height:3rem;border-radius:999px;padding-left:2.9rem;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 2px 10px rgba(11,42,58,.05);font-size:.9375rem;transition:border-color .15s,box-shadow .15s}
.store .catalog-search .input:focus{border-color:var(--aqua-ink,#0D6F8C);box-shadow:0 0 0 4px rgba(13,111,140,.14)}
.store .catalog-search > span:first-child{left:1.1rem;color:var(--aqua-ink,#0D6F8C)}
.store .trust-strip{margin:0 0 1.25rem;display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;scrollbar-width:none;font-size:.78rem;color:var(--ink-2)}
.store .trust-strip::-webkit-scrollbar{display:none}
.store .trust-strip span{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;padding:.3rem .7rem .3rem .45rem;border-radius:999px;background:rgba(13,111,140,.07);border:1px solid rgba(13,111,140,.14)}
.store .trust-strip span::before{content:"✓";display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;margin:0;border-radius:50%;background:var(--aqua-ink,#0D6F8C);color:#fff;font-size:.62rem;font-weight:800}
.store .catalog-dyn{display:grid;gap:1.75rem;min-width:0}
.store .catalog-dyn > .chips{margin-bottom:-.5rem;padding:.1rem 1.5rem .2rem 0;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
.store .chips .chip{min-height:2.5rem;padding:.5rem 1.05rem;font-weight:600;font-size:.875rem}
.store .chips .chip.active{box-shadow:0 4px 12px rgba(11,42,58,.18)}
.store .sect-row{margin-bottom:.85rem}
.store .sect-row .sect-title{font-size:1.25rem;letter-spacing:-.005em}
.store .catalog-dyn > section,.store .catalog-dyn > .rail-sect{min-width:0}
@media (max-width:760px){.store.catalog > .rc{margin-bottom:1.25rem}.store .catalog-head h1{font-size:1.5rem}.store .catalog-dyn{gap:1.5rem}.store .sect-row .sect-title{font-size:1.125rem}}
@media (min-width:1101px){.store .catalog-dyn > .chips{display:none}}
.store .sort-select{min-height:2.5rem;height:2.5rem;border-radius:999px;padding:0 2rem 0 .95rem;font-size:.85rem;font-weight:600;width:auto;background-color:var(--surface)}
@media (max-width:760px){.store .trust-strip{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:1.5rem}}
.store .sect-row .sect-title{white-space:nowrap}@media (max-width:760px){.store .sort-select{max-width:9.5rem;font-size:.8rem;padding-right:1.6rem}.store .sect-row .row{gap:.5rem}.store .sect-row .row .muted{font-size:.8rem}}
/* phones and tablets: the Filter & sort button holds categories and sort, so the chip row and the sort box are not repeated;
   the results title shows only when a search, category or filter is active */
@media (max-width:1100px){.store .catalog-dyn > .chips{display:none}.store .results-row .sort-select{display:none}.store .results-row.plain{display:none}}
/* shop and home on white (client reference, 2026-09-26): the catalogue pages use a white page in the light theme; cards get a soft
   shadow instead of relying on the grey page to stand out. Staff pages keep the tinted background. */
html:not([data-theme="dark"]) body:has(.store){background:#FFFFFF}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body:has(.store){background:var(--bg)}}
html:not([data-theme="dark"]) .store .pcard{background:#fff;border:1px solid #EDF2F5;border-radius:16px;box-shadow:0 6px 22px rgba(11,42,58,.07)}
html:not([data-theme="dark"]) .store .pcard:hover{box-shadow:0 12px 30px rgba(11,42,58,.12)}
html:not([data-theme="dark"]) .store .trust-strip span{background:#F2F8FA}
html:not([data-theme="dark"]) .store .catalog-search .input{background:#F7FAFB;box-shadow:none}
html:not([data-theme="dark"]) .store .catalog-search .input:focus{background:#fff}
@media (max-width:760px){html:not([data-theme="dark"]) .store .pcard{border-radius:14px}}
/* every screen on white (client, 2026-09-26: "all screens even admin and cashier"): the light theme's page is white, so
   cards, tiles and tables carry a faint shadow as well as their border */
html:not([data-theme="dark"]) .card,html:not([data-theme="dark"]) .kpi{box-shadow:0 4px 18px rgba(11,42,58,.05)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .card,html:not([data-theme="light"]) .kpi{box-shadow:none}}
/* product cards, clean (client, 2026-09-26: "very clean... if more details are needed, users can click on it"): photo, name, price, Add */
.store .pcard-body{text-align:center;gap:.4rem}
.store .pcard-name{font-size:1rem;font-weight:600;line-height:1.3;min-height:calc(1rem * 1.3 * 2);display:flex;align-items:center;justify-content:center}
.store .pcard-name a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.store .pcard-price-row{justify-content:center;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.store .pcard-price{font-size:1.15rem;color:var(--aqua-ink)}
.store .pcard-price.sale{color:var(--bad)}
.store .pcard-sub{text-align:center;color:var(--bad);font-weight:600;font-size:.8rem}
.store .pcard-act{margin-top:.35rem}
@media (max-width:760px){.store .pcard-name{font-size:.9rem;min-height:calc(.9rem * 1.3 * 2)}.store .pcard-price{font-size:1.05rem}}
.store .pcard-price-row{margin-top:0;min-height:0}.store .pcard-body{grid-template-rows:none}
/* no product cards (client reference, 2026-09-26: "B has no product cards"): products sit straight on the page */
.store .pcard,html:not([data-theme="dark"]) .store .pcard,.store .pcard.exec{background:transparent;border:0;box-shadow:none;border-radius:0}
.store .pcard:hover,html:not([data-theme="dark"]) .store .pcard:hover{box-shadow:none;transform:none}
.store .pcard-media{border-radius:14px}
.store .pcard-body{padding-left:.25rem;padding-right:.25rem}
/* the More sheet reuses the side menu's markup; on phones the side menu is hidden, the sheet copy must not be
   (2026-09-26: admins on phones could not reach Products, Settings, Reports, Team...) */
.sidenav.sheet-nav{display:flex;flex-direction:column;gap:2px;max-height:none}
.sheet-nav .sect{padding:12px 12px 4px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sheet-nav a{display:flex;align-items:center;gap:12px;min-height:48px;border-radius:12px}
.sheet-nav a.active{background:var(--aqua-soft);color:var(--aqua-ink)}
/* Reports on phones: a card never grows wider than the screen (a 464 px card zoomed the whole page out on 390 px phones) */
.rep-grid{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.rep-grid > *{min-width:0}
.rep-grid .card{overflow-x:auto}
@media (max-width:760px){.rep-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.prod-table td.drag .order-btns{display:inline-flex}.prod-table td.drag .drag-handle{display:none}}

/* simple catalogue (no filters or sort): one column of category sections */
.store .store-body.simple{display:block}
.store .store-body.simple .strips{display:grid;gap:2rem}
.store .strip-head{margin-bottom:.85rem}

/* search alone above the products (no page heading, no trust tags) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.store .catalog-search{max-width:none;margin-bottom:1.5rem}
.store .catalog-head:not(:has(.member-chips)){display:none}
/* blue top bar (client, 2026-09-27: "should be blue and well formatted"): brand-blue gradient, the wordmark on a white
   badge so its own blue stays visible, white controls */
.topbar{background:linear-gradient(90deg,#0A3F7A 0%,#0B4A8B 45%,#1466B8 100%);border-bottom:0;box-shadow:0 2px 14px rgba(10,63,122,.28);color:#fff;gap:14px}
.topbar .brand{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:3px 10px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.topbar .brand-logo{height:46px}
.topbar .station-chip{border-left:1px solid rgba(255,255,255,.28);padding-left:14px}
.topbar .station-chip b{color:#fff}
.topbar .station-chip small{color:rgba(255,255,255,.82);font-size:.78rem}
.topbar .mini-tank{background:rgba(255,255,255,.25)}
.topbar .cart-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.topbar .cart-btn:hover,.topbar .cart-btn.has{background:rgba(255,255,255,.2);border-color:#fff}
.topbar .cart-n{background:var(--jerri);color:#0B2A3A;border-color:#0B4A8B}
.topbar .btn{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff}
.topbar .btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.topbar .btn.btn-primary{background:#fff;border-color:#fff;color:#0B4A8B}
.topbar .btn.btn-primary:hover{background:#EAF2FB}
.topbar .btn-ghost{border-color:transparent}
.topbar .avatar{background:#fff;color:#0B4A8B}
.topbar .net{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.topbar .net i{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.topbar :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.topbar{gap:10px}.topbar .brand{padding:2px 8px;border-radius:10px}.topbar .brand-logo{height:36px}.topbar .station-chip small{font-size:.72rem}}

@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .topbar{background:linear-gradient(90deg,#071F3D 0%,#0A2F5A 60%,#0E3F77 100%)}}
/* the wordmark sits straight on the blue bar (client: "logo should blend cleanly"): no white badge, a soft shadow lifts it */
.topbar .brand{background:none;box-shadow:none;padding:0;border-radius:0}
.topbar .brand-logo{height:52px;filter:drop-shadow(0 2px 6px rgba(0,20,60,.35))}
@media (max-width:760px){.topbar .brand{padding:0}.topbar .brand-logo{height:42px}}
/* carousel blends into the page (client, 2026-09-27: "blend it"): edge to edge under the top bar, no card border, corners
   or shadow; the slide fades from pale aqua into the white page; its text and dots line up with the content below */
.main.wide > .catalog.store > .rc{margin-left:-28px;margin-right:-28px;border-radius:0;box-shadow:none;border:0}
.store .rc-slide,.store .rc-1,.store .rc-2{background:linear-gradient(180deg,#E6F3FA 0%,#F3F9FC 55%,#FFFFFF 100%);padding-left:28px}
.store .rc-1{background:linear-gradient(180deg,#E4F4F4 0%,#F2FAFA 55%,#FFFFFF 100%)}
.store .rc-2{background:linear-gradient(180deg,#E7EFFB 0%,#F3F7FD 55%,#FFFFFF 100%)}
.store .rc-wave{fill:rgba(13,111,140,.05)}
.store .rc-dots{padding-left:0}
@media (min-width:761px){.store .rc-slide{padding-left:28px}.store .rc-art{right:calc(10.5rem + 28px)}}
@media (max-width:760px){.store .rc-art{right:.6rem}.store .rc-dots{justify-content:flex-start;padding-left:22px}}

.main.wide > .catalog.store > .rc{margin-top:-14px}@media (min-width:761px){.main.wide > .catalog.store > .rc{margin-top:-22px}}
.pin-block{display:grid;gap:8px}
.pin-map iframe{width:100%;height:220px;border:1px solid var(--line);border-radius:10px;display:block;background:var(--panel-2)}
.oc-addr+.pin-block{margin:6px 0 4px 24px}
.oc-addr+.pin-block .pin-map iframe{height:180px}
.prog-bar{height:8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}.prog-bar i{display:block;height:100%;background:var(--aqua);transition:width .2s}
.stmt-period{display:inline-flex;margin:-6px 0 12px}@media (max-width:520px){.stmt-period{display:flex;width:100%}.stmt-period button{flex:1}}

/* refill carousel card polish (2026-10-04): a soft aqua glow and rings behind the bottle, an eyebrow, a gradient numeral,
   the price paired with an Order pill, calmer dots and arrows; the photo stays clear on white */
.rc{border-radius:1.4rem;box-shadow:inset 0 0 0 1px #D6E8EF,0 18px 44px -18px rgba(11,42,58,.28),0 6px 16px -10px rgba(11,42,58,.18)}
.rc-slide,.rc-1,.rc-2{background:radial-gradient(42% 70% at 74% 50%,#E3F4F8 0%,rgba(227,244,248,0) 72%),radial-gradient(60% 80% at 100% 0%,#F1FAFC 0%,rgba(241,250,252,0) 60%),linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 50%,#F3FAFC 100%)}
.rc-2{background:radial-gradient(42% 70% at 74% 50%,#E6F0FA 0%,rgba(230,240,250,0) 72%),radial-gradient(60% 80% at 100% 0%,#F2F7FD 0%,rgba(242,247,253,0) 60%),linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 50%,#F3F7FC 100%)}
.rc-art::before,.rc-art::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:-1}
.rc-art::before{width:118%;aspect-ratio:1;border:1.5px solid rgba(13,111,140,.14)}
.rc-art::after{width:150%;aspect-ratio:1;border:1px dashed rgba(13,111,140,.12)}
.rc-art{z-index:2;isolation:isolate}
.rc-art img.art{filter:saturate(1.1) contrast(1.05) drop-shadow(0 18px 22px rgba(11,42,58,.18))}
.rc-kicker{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0D6F8C;background:#E6F5F9;border:1px solid #CFE9F0;border-radius:999px;padding:.25rem .6rem;margin-bottom:.15rem}
.rc-size{background:linear-gradient(135deg,#0B5A6B 0%,#1490B4 60%,#43C1C9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rc-size small{-webkit-text-fill-color:#1490B4;color:#1490B4}
.rc-name{font-size:1.2rem;letter-spacing:-.01em}
.rc-line{max-width:34ch}
.rc-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.45rem}
.rc-price{margin-top:0;box-shadow:0 8px 18px -8px rgba(13,111,140,.55)}
.rc-cta{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.35rem .85rem;font-weight:700;font-size:.9rem;color:#0D6F8C;border:1.5px solid #0D6F8C;background:#fff;transition:background .15s,color .15s,transform .15s}
.rc-cta i{font-style:normal;transition:transform .15s}
.rc-slide:hover .rc-cta{background:#0D6F8C;color:#fff}.rc-slide:hover .rc-cta i{transform:translateX(2px)}
.rc-slide:hover .rc-art img.art{transform:translateY(-3px) scale(1.02);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.rc-dots{bottom:.85rem;left:1.75rem;right:auto;justify-content:flex-start;gap:.3rem}
.rc-dots button::before{height:.45rem;width:.45rem;background:rgba(13,111,140,.25)}.rc-dots button.on::before{width:1.6rem;background:linear-gradient(90deg,#0D6F8C,#43C1C9)}
.rc-nav{background:#fff;border:1px solid #D6E8EF;color:#0D6F8C;box-shadow:0 6px 14px -6px rgba(11,42,58,.3);opacity:1}
.rc-nav:hover{background:#0D6F8C;color:#fff;border-color:#0D6F8C}
.rc-wave{fill:rgba(13,111,140,.06)}
@media (max-width:760px){.rc-slide{height:15rem}.rc-text{gap:.25rem}.rc-kicker{font-size:.58rem;padding:.18rem .45rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rc-cta{display:none}.rc-dots{left:1.1rem;bottom:.55rem}.rc-art::after{display:none}.rc-row{margin-top:.3rem}.rc-art img.art{filter:saturate(1.1) contrast(1.05) drop-shadow(0 10px 14px rgba(11,42,58,.18))}}
@media (prefers-reduced-motion:reduce){.rc-slide:hover .rc-art img.art{transform:none}}

/* water droplets on the refill card: a bright highlight top-left, a darker refracting rim bottom-right, a soft contact
   shadow; three of them drip slowly (off with reduced motion) */
.rc-drops{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.rc-drops i{position:absolute;display:block;width:var(--s,18px);height:calc(var(--s,18px)*1.04);border-radius:50% 50% 50% 50%/52% 52% 48% 48%;
  /* mostly see-through: the slide shows through the middle, a thin darker lens rim, a bright caustic crescent at the bottom */
  background:radial-gradient(circle at 50% 54%,rgba(255,255,255,.06) 0 46%,rgba(160,205,222,.18) 62%,rgba(110,170,195,.38) 80%,rgba(60,128,160,.55) 93%,rgba(35,100,135,.6) 100%);
  box-shadow:inset 0 -2px 3px rgba(255,255,255,.75),inset 0 2px 3px rgba(40,100,135,.28),inset -1px 0 2px rgba(40,100,135,.18),0 3px 5px -1px rgba(11,42,58,.22),0 1px 1px rgba(11,42,58,.1);
  opacity:.95}
.rc-drops i::after{content:"";position:absolute;left:22%;top:14%;width:26%;height:18%;border-radius:50%;background:#fff;transform:rotate(-30deg);box-shadow:0 0 2px rgba(255,255,255,.9)}
.rc-drops i::before{content:"";position:absolute;left:18%;right:18%;bottom:7%;height:22%;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.9) 0 30%,rgba(255,255,255,0) 72%)}
.rc-drops i:nth-child(1){--s:30px;left:44%;top:14%}
.rc-drops i:nth-child(2){--s:14px;left:50%;top:30%}
.rc-drops i:nth-child(3){--s:22px;left:57%;top:62%}
.rc-drops i:nth-child(4){--s:11px;left:63%;top:22%}
.rc-drops i:nth-child(5){--s:36px;left:88%;top:18%}
.rc-drops i:nth-child(6){--s:16px;left:93%;top:48%}
.rc-drops i:nth-child(7){--s:24px;left:84%;top:70%}
.rc-drops i:nth-child(8){--s:12px;left:40%;top:72%}
.rc-drops i:nth-child(9){--s:19px;left:70%;top:80%}
.rc-drops i:nth-child(10){--s:9px;left:48%;top:50%}
.rc-drops i:nth-child(11){--s:26px;left:35%;top:40%}
.rc-drops i:nth-child(12){--s:15px;left:78%;top:8%}
/* six of them drip on staggered cycles: a droplet swells, stretches into a tear and slides down, then a new one forms */
.rc-drops i:nth-child(1){animation:rc-drip 9s cubic-bezier(.55,0,.85,.4) 0s infinite}
.rc-drops i:nth-child(5){animation:rc-drip 11s cubic-bezier(.55,0,.85,.4) 2.5s infinite}
.rc-drops i:nth-child(6){animation:rc-drip 13s cubic-bezier(.55,0,.85,.4) 5s infinite}
.rc-drops i:nth-child(9){animation:rc-drip 10s cubic-bezier(.55,0,.85,.4) 7s infinite}
.rc-drops i:nth-child(11){animation:rc-drip 12s cubic-bezier(.55,0,.85,.4) 4s infinite}
.rc-drops i:nth-child(12){animation:rc-drip 14s cubic-bezier(.55,0,.85,.4) 1s infinite}
@keyframes rc-drip{
  0%{transform:translateY(0) scale(.6);opacity:0}
  8%{transform:translateY(0) scale(1);opacity:.95}
  40%{transform:translateY(0) scale(1);opacity:.95}
  48%{transform:translateY(3px) scaleY(1.25) scaleX(.92);opacity:.95}
  70%{transform:translateY(150px) scaleY(1.35) scaleX(.86);opacity:.9}
  74%{transform:translateY(190px) scaleY(1.1) scaleX(.95);opacity:0}
  100%{transform:translateY(190px) scale(.6);opacity:0}
}
.rc-drops i[style],.rc-drops i{transform-origin:50% 0}
@media (max-width:760px){.rc-drops i:nth-child(1),.rc-drops i:nth-child(3),.rc-drops i:nth-child(8),.rc-drops i:nth-child(10),.rc-drops i:nth-child(11){display:none}.rc-drops i:nth-child(5){--s:24px;left:86%;top:12%}.rc-drops i:nth-child(7){--s:16px;left:80%;top:76%}}
@media (prefers-reduced-motion:reduce){.rc-drops i{animation-duration:40s!important}}
html[data-theme="dark"] .rc-drops i{opacity:.75}

/* site footer, industrial (2026-10-04): navy plate with an engineered grid, aqua rule, big Call / WhatsApp, spec grid, link chips */
.site-foot{margin-top:44px;border-top:0;background:#0B2A3A;color:#D6E6EE;position:relative;isolation:isolate}
.site-foot::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.35))}
.site-foot::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#0D6F8C,#43C1C9 45%,#25D366 100%)}
.site-foot .sf-wrap{max-width:1560px;margin:0 auto;padding:30px 28px 22px;display:grid;grid-template-columns:1.2fr 1fr 1.2fr .9fr;gap:26px 32px;align-items:start}
.site-foot .sf-top{display:flex;align-items:center;gap:14px}
.site-foot .sf-plate{display:grid;place-items:center;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.site-foot .sf-plate .brand-logo{height:40px;width:auto}
.site-foot .sf-id{display:flex;flex-direction:column;gap:2px}.sf-id b{font-size:1rem;color:#fff}.sf-id span{font-size:.8125rem;color:#9FBFCE;line-height:1.4}
.site-foot .sf-cta{display:flex;flex-direction:column;gap:10px}
.site-foot a.sf-btn{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;text-decoration:none;color:#fff;font-weight:700;font-size:.95rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);transition:background .15s,transform .15s}
.site-foot .sf-btn svg{width:22px;height:22px;flex:none}.sf-btn span{display:flex;flex-direction:column;line-height:1.15}.sf-btn small{font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#9FBFCE}
.site-foot a.sf-btn.call:hover{background:rgba(255,255,255,.12)}
.site-foot a.sf-btn.wa{background:#25D366;border-color:#25D366;color:#062e16}.sf-btn.wa small{color:#0a4a24}.sf-btn.wa:hover{background:#1fbf5b}
.site-foot a.sf-btn:active{transform:scale(.98)}
.site-foot .sf-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.site-foot .sf-spec{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-top:1px solid rgba(255,255,255,.1)}
.site-foot .sf-spec span{display:block;padding:0;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#7FB2C6}
.site-foot .sf-spec b{font-weight:600;color:#fff;font-size:.9rem}.sf-spec b.mono{font-family:var(--font-mono);letter-spacing:.04em;font-size:1rem}
.site-foot .sf-links{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.site-foot .sf-links a{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#D6E6EE;text-decoration:none;font-size:.8125rem;font-weight:600;background:rgba(255,255,255,.04)}
.site-foot .sf-links a:hover{border-color:#43C1C9;color:#fff;background:rgba(67,193,201,.14)}
.site-foot .sf-note{color:#9FBFCE;font-size:.875rem}
.site-foot .sf-bottom{max-width:1560px;margin:0 auto;padding:12px 28px calc(14px + var(--sab));border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.75rem;color:#7FB2C6}
.site-foot .sf-bottom span{display:inline;padding:0;font-size:inherit;color:#7FB2C6}
.site-foot .sf-bottom b{color:#fff}
body.foot-in .contact-fab{opacity:0;pointer-events:none}
@media (max-width:900px){.sf-wrap{grid-template-columns:1fr 1fr;padding:24px 18px 16px;gap:20px 22px}.sf-links{grid-column:1/-1}}
@media (max-width:520px){
  .site-foot .sf-wrap{grid-template-columns:1fr;padding:22px 16px 14px;gap:18px}
  .site-foot .sf-top{padding-bottom:2px}
  .site-foot .sf-cta{flex-direction:row}.sf-cta .sf-btn{flex:1;padding:10px 12px}.sf-btn span{font-size:.85rem}.sf-btn small{font-size:.6rem}
  .site-foot .sf-specs{grid-template-columns:1fr 1fr;gap:4px 14px}
  .site-foot .sf-links a{padding:8px 12px}
  .site-foot .sf-bottom{padding:12px 16px calc(84px + var(--sab));flex-direction:column;gap:4px;align-items:flex-start}
}
.site-foot a.sf-btn span{color:#fff}.site-foot a.sf-btn.wa span{color:#062e16}
.site-foot a.sf-btn span{white-space:nowrap}
@media (max-width:520px){
  .site-foot a.sf-btn{padding:10px 10px;gap:8px}.site-foot a.sf-btn svg{width:20px;height:20px}.site-foot a.sf-btn span{font-size:.8rem}.site-foot a.sf-btn small{font-size:.56rem;letter-spacing:.06em;white-space:nowrap}
  .site-foot .sf-bottom{justify-content:flex-start;gap:6px}
}
@media (max-width:360px){.site-foot .sf-cta{flex-direction:column}}
/* the footer is a real footer: it cancels the content column's padding so it runs edge to edge and sits flush with the
   bottom of the page; the overscroll area under it is navy as well */
.main:has(.site-foot){padding-bottom:0}
.site-foot{margin:44px -24px 0;max-width:none}
.main.wide .site-foot{margin-left:-28px;margin-right:-28px}
@media (max-width:760px){.site-foot{margin-left:-12px;margin-right:-12px}}
.shell>.site-foot{margin-left:0;margin-right:0;margin-top:0}

/* ============================================================================================================
   Dark theme (2026-10-04): one uniform background. Panels are a step lighter with a hairline, nothing is a band of
   another colour: the header, the refill card, the search, the catalogue and the footer all sit on --bg. */
:root[data-theme="dark"]{
  --bg:#0C1419;--surface:#121D24;--surface-2:#182630;--surface-3:#1F313C;
  --ink:#E8EFF3;--ink-2:#AEBFC8;--ink-3:#8498A3;--line:#1F2E37;--line-2:#2A3E4A;
  --aqua:#38B5DA;--aqua-ink:#7FD3EA;--aqua-soft:#11313F;--aqua-deep:#0C1419;--aqua-deep-2:#122230;
  --chart-bg:#121D24;
}
html[data-theme="dark"] body,html[data-theme="dark"] body:has(.store),html[data-theme="dark"] body:has(.site-foot){background:#0C1419}
/* header and tab bar: same ground, a hairline instead of a blue band */
html[data-theme="dark"] .topbar{background:#0C1419;border-bottom:1px solid var(--line);box-shadow:none}
html[data-theme="dark"] .tabbar{background:#0C1419;border-top:1px solid var(--line)}
/* the refill card: dark glass, light type, the photo on its own shadow */
html[data-theme="dark"] .rc{box-shadow:inset 0 0 0 1px var(--line-2),0 18px 44px -18px rgba(0,0,0,.7)}
html[data-theme="dark"] .rc-slide,html[data-theme="dark"] .rc-1,html[data-theme="dark"] .rc-2,html[data-theme="dark"] .store .rc-slide{color:var(--ink);background:radial-gradient(42% 70% at 74% 50%,rgba(56,181,218,.16) 0%,rgba(56,181,218,0) 72%),radial-gradient(60% 80% at 100% 0%,rgba(127,211,234,.08) 0%,rgba(127,211,234,0) 60%),linear-gradient(100deg,#121D24 0%,#121D24 55%,#0F1A21 100%)}
html[data-theme="dark"] .rc-kicker{color:var(--aqua-ink);background:rgba(56,181,218,.12);border-color:rgba(56,181,218,.3)}
html[data-theme="dark"] .rc-size{background:linear-gradient(135deg,#7FD3EA 0%,#38B5DA 60%,#1E86A8 100%);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .rc-size small{-webkit-text-fill-color:#7FD3EA;color:#7FD3EA}
html[data-theme="dark"] .rc-name{color:var(--ink)}html[data-theme="dark"] .rc-line{color:var(--ink-2)}
html[data-theme="dark"] .rc-price{background:var(--aqua);color:#061219;box-shadow:0 8px 18px -8px rgba(56,181,218,.6)}html[data-theme="dark"] .rc-price small{color:#0B2A3A}
html[data-theme="dark"] .rc-cta{color:var(--aqua-ink);border-color:var(--aqua-ink);background:transparent}
html[data-theme="dark"] .rc-slide:hover .rc-cta{background:var(--aqua-ink);color:#061219}
html[data-theme="dark"] .rc-art::before{border-color:rgba(127,211,234,.18)}html[data-theme="dark"] .rc-art::after{border-color:rgba(127,211,234,.12)}
html[data-theme="dark"] .rc-art img.art{mix-blend-mode:normal;filter:saturate(1.05) drop-shadow(0 18px 22px rgba(0,0,0,.55));-webkit-mask-image:none;mask-image:none}
html[data-theme="dark"] .rc-wave{fill:rgba(127,211,234,.06)}
html[data-theme="dark"] .rc-dots button::before{background:rgba(127,211,234,.3)}html[data-theme="dark"] .rc-dots button.on::before{background:linear-gradient(90deg,#38B5DA,#7FD3EA)}
html[data-theme="dark"] .rc-nav{background:var(--surface-2);border-color:var(--line-2);color:var(--aqua-ink)}
html[data-theme="dark"] .rc-drops i{opacity:.7;background:radial-gradient(circle at 50% 54%,rgba(255,255,255,.04) 0 46%,rgba(127,211,234,.12) 62%,rgba(127,211,234,.28) 80%,rgba(127,211,234,.45) 93%,rgba(127,211,234,.5) 100%);box-shadow:inset 0 -2px 3px rgba(255,255,255,.35),inset 0 2px 3px rgba(0,0,0,.35),0 3px 5px -1px rgba(0,0,0,.5)}
/* search and catalogue surfaces */
html[data-theme="dark"] .store .catalog-search .input,html[data-theme="dark"] .catalog-search .input{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
html[data-theme="dark"] .store .catalog-search .input:focus{background:var(--surface-2)}
html[data-theme="dark"] .store .trust-strip span{background:var(--surface)}
html[data-theme="dark"] .card,html[data-theme="dark"] .kpi{background:var(--surface);border-color:var(--line);box-shadow:none}
/* the footer: the same ground as the page, separated by a hairline, no navy block */
html[data-theme="dark"] .site-foot{background:#0C1419;color:var(--ink-2);border-top:1px solid var(--line)}
html[data-theme="dark"] .site-foot::before{background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px}
html[data-theme="dark"] .site-foot::after{height:2px;background:linear-gradient(90deg,#38B5DA,#7FD3EA 50%,#25D366 100%);opacity:.7}
html[data-theme="dark"] .site-foot .sf-id b{color:var(--ink)}html[data-theme="dark"] .site-foot .sf-id span{color:var(--ink-3)}
html[data-theme="dark"] .site-foot a.sf-btn.call{background:var(--surface);border-color:var(--line-2)}
html[data-theme="dark"] .site-foot a.sf-btn.wa{background:#25D366;border-color:#25D366;color:#062e16}html[data-theme="dark"] .site-foot a.sf-btn.wa span{color:#062e16}html[data-theme="dark"] .site-foot a.sf-btn.wa small{color:#0a4a24}
html[data-theme="dark"] .site-foot a.sf-btn.call:hover{background:var(--surface-2)}
html[data-theme="dark"] .site-foot .sf-spec{border-top-color:var(--line)}html[data-theme="dark"] .site-foot .sf-spec span{color:var(--ink-3)}html[data-theme="dark"] .site-foot .sf-spec b{color:var(--ink)}
html[data-theme="dark"] .site-foot .sf-links a{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
html[data-theme="dark"] .site-foot .sf-links a:hover{border-color:var(--aqua);background:var(--aqua-soft)}
html[data-theme="dark"] .site-foot .sf-bottom{border-top-color:var(--line);color:var(--ink-3)}html[data-theme="dark"] .site-foot .sf-bottom span{color:var(--ink-3)}
html[data-theme="dark"] .site-foot .sf-bottom b{color:var(--ink)}
/* no background on <html>: it would stop the body colour covering the whole page (the body is one screen tall) */
body:has(.site-foot){background:var(--bg)}
html:not([data-theme="dark"]) body:has(.store){background:#FFFFFF}
/* toasts in the dark theme: a lifted panel, not a white card */
html[data-theme="dark"] .toast{background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
/* dark mode parked (2026-10-04): the theme toggle is hidden until the dark theme is switched back on in boot.js */
[data-act="toggle-theme"]{display:none!important}

/* ---------- phone polish (walk-through on the installed app, 2026-10-15) ---------- */
.chip{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.qchips{margin-top:8px}
.pos-kinds{margin:8px 0 10px}
.lane-head .lane-sort{max-width:56%}
@media (max-width:760px){
  .prod .key{display:none} /* keyboard shortcuts: a desktop thing */
  .toolbar.qtool{flex-wrap:wrap}.toolbar.qtool .search{width:100%}
  /* stocked items: one card per row instead of a wide table */
  .stock-table{display:block;width:100%;min-width:0}.stock-table tbody{display:block}
  .stock-table thead{display:none}
  .stock-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
  .stock-table tr:last-child{border-bottom:0}
  .stock-table td{display:block;border:0;padding:0;width:auto}
  .stock-table td:first-child{width:100%}
  .stock-table td.num{text-align:left;font-size:.9375rem}
  .stock-table td.num::before{content:attr(data-l) ": ";color:var(--ink-3);font-weight:400;font-size:.75rem}
  .stock-table td.right{width:100%;text-align:left;margin-top:2px}
  .stock-table .stock-actions{display:inline-flex;flex-wrap:wrap;gap:6px}
  .stock-table .stock-actions .btn,.stock-table td.right>.btn{min-height:36px}
}
@media (max-width:760px){
  /* stock actions: five buttons wrap into rows instead of running off the edge */
  .stock-table td.right{white-space:normal!important;display:flex;flex-wrap:wrap;gap:6px}
  .stock-table .stock-actions{display:contents}
  /* products grid: two tidy columns, photos kept modest */
  .pmini-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .pmini-grid .card img{max-height:150px;object-fit:contain}
}
/* tab strips: labels never shrink into each other; the strip scrolls sideways instead */
.tabs>*{flex:none;white-space:nowrap}
@media (max-width:760px){.tabs{gap:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tabs>*{padding-left:10px;padding-right:10px}}

/* ---------- refills sold with a new container (2026-10-15): paired rows + the red industrial NEW tag ---------- */
.refill-rows{display:grid;gap:12px}
.refill-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.refill-row.solo{grid-template-columns:repeat(2,1fr)}
@media (min-width:1100px){.refill-rows{grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:18px}.refill-row{gap:18px}}
.badge.hot{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;border-radius:0;background:radial-gradient(circle at 38% 32%,#ff6a5c 0%,#e3261b 45%,#9b0f0f 100%);color:#fff;font-weight:900;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;clip-path:polygon(50.0% 0.0%,57.6% 11.7%,69.1% 3.8%,71.7% 17.6%,85.4% 14.6%,82.4% 28.3%,96.2% 30.9%,88.3% 42.4%,100.0% 50.0%,88.3% 57.6%,96.2% 69.1%,82.4% 71.7%,85.4% 85.4%,71.7% 82.4%,69.1% 96.2%,57.6% 88.3%,50.0% 100.0%,42.4% 88.3%,30.9% 96.2%,28.3% 82.4%,14.6% 85.4%,17.6% 71.7%,3.8% 69.1%,11.7% 57.6%,0.0% 50.0%,11.7% 42.4%,3.8% 30.9%,17.6% 28.3%,14.6% 14.6%,28.3% 17.6%,30.9% 3.8%,42.4% 11.7%);transform:rotate(-12deg);text-shadow:0 1px 1px rgba(0,0,0,.45);filter:drop-shadow(0 0 6px rgba(227,38,27,.75)) drop-shadow(0 3px 4px rgba(0,0,0,.25));animation:hotstar 2.2s ease-in-out infinite}
@keyframes hotstar{0%,100%{transform:rotate(-12deg) scale(1);filter:drop-shadow(0 0 6px rgba(227,38,27,.75)) drop-shadow(0 3px 4px rgba(0,0,0,.25))}50%{transform:rotate(-12deg) scale(1.08);filter:drop-shadow(0 0 12px rgba(255,90,70,.95)) drop-shadow(0 3px 4px rgba(0,0,0,.25))}}
.prod .tile-new{position:absolute;top:2px;right:2px;width:34px;height:34px;font-size:.5rem;animation:none}
.prod{position:relative}
.check.field .help{display:block;width:100%;margin-left:0}
@media (prefers-reduced-motion:reduce){.badge.hot{animation:none}}
.check.field .badge.hot{width:34px;height:34px;font-size:.5rem;vertical-align:middle}
/* wallet: the Top up button sits on the card itself, beside the balance (2026-10-15) */
.wc-balance{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.wc-topup{flex:none;min-height:42px;padding:0 18px;background:#fff;color:#0B3C55;border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);font-weight:700}
.wc-topup:hover{background:#EAF4F8;color:#0B3C55}
.steps-list .link{font:inherit;padding:0;background:none;border:0;color:var(--btn);text-decoration:underline;cursor:pointer}

#egate-err:empty{display:none}