/* =========================================================
Tillpoint — design tokens
Editorial provisions-house system: warm cream paper, deep
forest and bronze accents, Cormorant Garamond display type
over clean Inter body copy. Same class vocabulary as before —
this file is a drop-in reskin, no markup changes required.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Space+Mono:wght@400;700&display=swap');
:root{
--ink: #262320;
--ink-soft: #5C564D;
--ink-faint: #928C80;
--paper: #F4EFE6;
--paper-dim: #ECE4D3;
--paper-deep: #DED0AF;
/* forest — primary brand / CTA / links */
--gold: #223424;
--gold-dark: #16241A;
--gold-soft: #E3E8E1;
/* bronze — secondary accent, highlight badges */
--olive: #B08652;
--olive-dark: #8A6537;
--olive-soft: #F3E9D6;
--olive-light:#D9B77E;
/* muted slate — info / accepted */
--blue: #5B7285;
--blue-soft: #E7ECEE;
/* success reuses the forest family */
--green: #223424;
--green-soft: #E3E8E1;
/* terracotta — errors / low-stock / urgent */
--brick: #A85D3F;
--brick-soft: #F1E1D6;
--line: rgba(38,35,32,.14);
--line-soft: rgba(38,35,32,.08);
--display: 'Cormorant Garamond', Georgia, serif;
--accent-serif: 'Cormorant Garamond', Georgia, serif;
--body: 'Inter', sans-serif;
--mono: 'Space Mono', monospace;
--radius: 12px;
--radius-lg: 18px;
--shadow: 0 1px 2px rgba(38,35,32,.04), 0 8px 20px rgba(38,35,32,.05);
--shadow-lg: 0 6px 14px rgba(38,35,32,.06), 0 26px 56px rgba(38,35,32,.14);
--ease: cubic-bezier(.22,1,.36,1);
}
*{ box-sizing: border-box; }
html{ scroll-behavior: auto; } /* Lenis owns smooth scrolling via motion.js */
body{
margin:0;
font-family: var(--body);
font-weight: 400;
background: var(--paper);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,h2,h3{ font-family: var(--display); font-weight:600; line-height:1.1; margin: 0 0 .5em; letter-spacing: -0.005em; color: var(--ink); }
h1{ font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-style: italic; font-weight:500; }
h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-style: italic; font-weight:500; }
h3{ font-size: 1.2rem; font-style: italic; }
p{ margin: 0 0 1em; color: var(--ink-soft); font-weight:400; }
a{ color: var(--gold-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--olive); outline-offset: 3px; }
::selection{ background: var(--olive-soft); color: var(--gold-dark); }
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow{ max-width: 620px; margin: 0 auto; padding: 0 24px; }
.eyebrow{ font-family: var(--body); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--olive-dark); }
/* Grain texture overlay — include once per page */
.grain{ position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.045; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Cursor is custom on pointer:fine devices — hide the system one there */
@media (hover:hover) and (pointer:fine){
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor input, body.has-custom-cursor select{ cursor: none; }
}
/* ---------- Preloader ---------- */
.preloader{
position: fixed; inset: 0; z-index: 9999; background: var(--gold);
display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
.preloader .pl-mark{ font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--paper); letter-spacing: .01em; }
.preloader .pl-bar{ width: 160px; height: 1px; background: rgba(244,239,230,.25); overflow:hidden; position:relative; }
.preloader .pl-bar::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:40%; background: var(--olive-light); animation: pl-sweep 1.1s ease-in-out infinite; }
@keyframes pl-sweep{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(350%); } }
/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index: 9998; border-radius: 50%; transform: translate(-50%,-50%); will-change: transform; }
.cursor-dot{ width:5px; height:5px; background: var(--ink); }
.cursor-ring{
width:34px; height:34px; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center;
font-family: var(--body); font-size:.6rem; font-weight:700; letter-spacing:.08em; color: var(--paper);
background: transparent; opacity:.85; transition: width .35s ease, height .35s ease, background .35s ease, border-color .35s ease, opacity .2s ease;
}
.cursor-ring span{ opacity:0; transition: opacity .25s ease; text-transform: uppercase; }
.cursor-ring.cursor-active{ width:64px; height:64px; background: var(--ink); border-color: var(--ink); opacity:1; }
.cursor-ring.cursor-active span{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } }
/* ---------- Split-text reveal masks ---------- */
.split-mask{ overflow: hidden; display: inline-block; vertical-align: top; }
.split-line, .split-word{ display: inline-block; will-change: transform; }
/* ---------- Floating / parallax utility ---------- */
.floaty{ will-change: transform; }
.parallax-layer{ will-change: transform; }
.parallax-band{ position:relative; overflow:hidden; }
/* ---------- Topbar ---------- */
.topbar{
background: rgba(244,239,230,.72); color: var(--ink);
border-bottom: 1px solid var(--line);
position: sticky; top:0; z-index: 500;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding: 18px 24px; }
.brand{ display:flex; align-items:center; gap:12px; font-family: var(--display); color: var(--ink); font-size: 1.3rem; font-style: italic; letter-spacing:.01em; }
.brand:hover{ text-decoration:none; }
.brand .mark{
width: 34px; height:34px; border-radius: 50%; border: 1px solid var(--ink);
color: var(--ink); background: transparent;
display:flex; align-items:center; justify-content:center;
font-family: var(--display); font-style: normal; font-size:.8rem; letter-spacing:.02em;
}
.nav{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.nav a{ color: var(--ink-soft); opacity:1; font-weight:500; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.nav a:hover{ color: var(--ink); text-decoration:none; }
.nav .pill{
background: var(--gold); color: var(--paper); padding:10px 22px; border-radius: 999px;
font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.nav .pill:hover{ background: var(--gold-dark); text-decoration:none; }
/* ---------- Breadcrumbs (every page except index.html) ---------- */
.breadcrumbs{
max-width: 1180px; margin: 0 auto; padding: 14px 24px 0;
font-family: var(--body); font-size: .76rem; color: var(--ink-faint);
display:flex; align-items:center; flex-wrap:wrap;
}
.breadcrumbs a{ color: var(--ink-faint); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--gold-dark); text-decoration: underline; }
.breadcrumbs .sep{ margin: 0 8px; opacity:.5; }
.breadcrumbs .current{ color: var(--ink-soft); font-weight:500; }
@media print{ .breadcrumbs{ display:none; } }
/* Printing a payslip (or any other modal) out of the dashboard SPA: the
normal app shell has no equivalent to a standalone page's own print rules
(see receipt.html), so this hides it explicitly and lets the open modal
print in its place instead of the sidebar/topbar/whatever tab happens to
be showing underneath it. */
@media print{
body.modal-printing .app-sidebar, body.modal-printing .app-topbar,
body.modal-printing .breadcrumbs, body.modal-printing .app-content,
body.modal-printing .grain, body.modal-printing .bg-blobs{ display:none !important; }
body.modal-printing .modal-overlay{ position:static !important; background:none !important; opacity:1 !important; }
body.modal-printing .modal-box{ box-shadow:none !important; transform:none !important; margin:0 auto !important; }
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family: var(--body); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
padding: 14px 28px; border-radius: 999px; border: 1px solid var(--ink);
background: var(--ink); color: var(--paper); cursor:pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
will-change: transform;
}
.btn:hover{ text-decoration:none; background: var(--gold-dark); border-color: var(--gold-dark); box-shadow: 0 10px 24px rgba(22,36,26,.28); }
.btn:active{ box-shadow:none; }
.btn.gold{ background: var(--gold); border-color: var(--gold); color: var(--paper); }
.btn.gold:hover{ background: var(--gold-dark); border-color: var(--gold-dark); box-shadow: 0 10px 24px rgba(22,36,26,.3); }
.btn.outline{ background: transparent; color: var(--ink); border-color: rgba(38,35,32,.35); }
.btn.outline:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 10px 22px rgba(38,35,32,.18); }
.btn.blue{ background: var(--blue); border-color: var(--blue); color:#fff; }
.btn.green{ background: var(--green); border-color: var(--green); color:#fff; }
.btn.brick{ background: var(--brick); border-color: var(--brick); color:#fff; }
.btn.sm{ padding: 9px 18px; font-size: .68rem; }
.btn.full{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn-link{ background:none;border:none;color:var(--gold-dark);font-weight:600;cursor:pointer;padding:0; font-family:var(--body); font-size:.82rem; display:inline-flex; align-items:center; gap:6px; }
.flip-left{ transform: scaleX(-1); }
.btn-link:hover{ text-decoration:underline; }
/* ---------- Cards ---------- */
.card{
background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
padding: 30px; box-shadow: var(--shadow);
}
.card.paper{ background: var(--paper-dim); }
.card.hoverable{ transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card.hoverable:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* ---------- Modal (sales import wizard, etc.) ---------- */
.modal-overlay{
position:fixed; inset:0; z-index:900; background:rgba(38,35,32,.55);
display:flex; align-items:center; justify-content:center; padding:24px;
opacity:0; pointer-events:none; transition: opacity .25s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
position:relative; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
padding:34px 32px 30px; transform:translateY(16px) scale(.98); transition: transform .25s var(--ease);
}
.modal-overlay.open .modal-box{ transform:none; }
/* .modal-box's own overflow-y:auto put the native scrollbar on the SAME
rounded element as border-radius — browsers generally don't clip a
scrollbar (its track/arrow buttons are square) to a border-radius, so it
visibly poked out past the curve at the top and bottom corners. .wide
moves the actual scrolling to an inner, unrounded child instead — the
outer box's overflow:hidden reliably clips to its own rounded shape
(unlike overflow:auto/scroll), and nothing square-edged sits at its
corners any more. The close button stays a sibling of the scrolling
area, so it stays pinned in the corner regardless of scroll position. */
.modal-box.wide{ max-width:760px; overflow:hidden; padding:0; display:flex; flex-direction:column; }
/* min-height:0 overrides a flex item's default sizing-to-content, which
would otherwise let this grow past its flex parent's own max-height
(inherited from .modal-box) instead of actually scrolling within it. */
.modal-box.wide .modal-scroll{ overflow-y:auto; padding:34px 32px 30px; min-height:0; }
/* ---------- Orders: kanban board ---------- */
.kanban-board{ display:flex; gap:14px; overflow-x:auto; padding:2px 2px 12px; }
.kanban-col{ flex:0 0 260px; background:var(--paper-dim); border-radius:12px; padding:12px; }
.kanban-col.drag-over{ background:var(--gold-soft); }
.kanban-card{ padding:10px 12px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.kanban-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.kanban-card[draggable="true"]{ cursor:grab; }
.kanban-card.dragging{ opacity:.4; }
/* ---------- Orders: calendar/schedule ----------
Cells are a CSS-grid 1fr width with aspect-ratio:1 for their height — with
nothing capping the grid's own width, that made each cell balloon to a
large square on a wide dashboard content area (no sidebar, desktop), badly
overflowing the viewport with no way to scroll to what fell outside it.
calendar-wrap caps the whole grid to a sane width and centers it — cells
settle at a reasonable size regardless of how wide the surrounding page
is — with overflow-x:auto kept as a safety net for anything still too
tight on a narrow phone screen. */
.calendar-wrap{ max-width:520px; margin:0 auto; overflow-x:auto; }
.calendar-dow-row{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px; min-width:320px; }
.calendar-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-width:320px; }
.calendar-cell{ aspect-ratio:1; max-width:68px; border-radius:8px; background:var(--paper-dim); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; transition:background .15s ease; border:2px solid transparent; }
.calendar-cell:hover{ background:var(--paper-deep); }
.calendar-cell.empty{ background:none; cursor:default; }
.calendar-cell.today{ border-color:var(--gold); }
.calendar-cell.selected{ background:var(--gold-soft); }
.calendar-daynum{ font-size:.8rem; font-weight:600; }
.calendar-count{ font-size:.64rem; font-weight:700; background:var(--olive-dark); color:#fff; border-radius:10px; padding:1px 7px; min-width:16px; text-align:center; }
.calendar-count.brick{ background:var(--brick); }
.modal-close{
position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%;
background: var(--paper-dim); border:none; color: var(--ink-soft); cursor:pointer;
display:flex; align-items:center; justify-content:center; transition: background .2s ease, color .2s ease;
}
.modal-close:hover{ background: var(--ink); color: var(--paper); }
/* ---------- iOS "Add to Home Screen" install steps ---------- */
.ios-install-steps{
list-style: none; margin: 20px 0 0; padding: 0; text-align: left;
display: flex; flex-direction: column; gap: 14px;
}
.ios-install-steps li{
display: flex; align-items: flex-start; gap: 12px;
font-size: .92rem; color: var(--ink-soft); line-height: 1.4;
}
.ios-install-steps li > span:last-child{ padding-top: 7px; }
.ios-install-steps li strong{ color: var(--ink); }
.ios-install-ic{
flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
background: var(--gold-soft); color: var(--gold-dark);
display: flex; align-items: center; justify-content: center;
}
/* ---------- File drop zone (sales import) ---------- */
.file-drop{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
border: 1.5px dashed var(--line); border-radius: 14px; padding: 36px 20px; margin-top:16px;
cursor:pointer; color: var(--ink-soft); text-align:center; transition: border-color .2s ease, background .2s ease;
}
.file-drop:hover, .file-drop.over{ border-color: var(--gold); background: var(--gold-soft); }
.file-drop span{ font-size:.85rem; }
.file-drop .hint{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); }
/* ---------- Import field mapper ---------- */
#mapper-rows{ max-height:320px; overflow-y:auto; padding-right:4px; }
#mapper-rows .mapper-select{ width:auto; border-bottom:1.5px solid var(--line); padding:8px 4px; }
/* ---------- Forms ----------
Signature editorial treatment: bare underline fields (no boxes),
like a ledger line waiting to be filled in — not a generic admin form. */
label{ display:block; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; margin: 18px 0 8px; color: var(--ink-soft); }
label:first-child{ margin-top:0; }
input, select, textarea{
width:100%; padding: 12px 2px 11px; border-radius: 0; border:none;
border-bottom: 1.5px solid var(--line);
font-family: var(--body); font-weight:400; font-size: .95rem; background:transparent; color: var(--ink);
transition: border-color .25s var(--ease), background .25s var(--ease);
}
input::placeholder, textarea::placeholder{ color: var(--ink-faint); opacity:.8; }
input:hover, select:hover, textarea:hover{ border-bottom-color: rgba(38,35,32,.35); }
input:focus, select:focus, textarea:focus{ border-bottom-color: var(--gold); outline:none; }
select{ cursor:pointer; appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23928C80'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position: right 4px center; padding-right:22px;
}
textarea{ resize:vertical; }
/* Fields that still want a boxed look (search bars, sale-cart mini inputs) opt in explicitly */
.filter-bar input[type="search"], .filter-bar select{ border-bottom:none; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items:start; }
.hint{ font-size:.76rem; color: var(--ink-faint); margin-top:5px; font-weight:400; }
/* A `` used inline as a label's own explainer (the
"Lead time (hours) — e.g. 36 for a sourdough proof" idiom, used all over
this app's forms) would otherwise inherit the label's uppercase/bold/
letter-spaced styling — same shouty caps as the label itself, no visual
line between where the field name ends and the explanation begins. Reset
it back to a normal, clearly-secondary line directly under the label. */
label .hint{ display:block; text-transform:none; letter-spacing:normal; margin: 2px 0 0; font-size:.72rem; }
.error-text{ color: var(--brick); font-size:.85rem; font-weight:600; margin-top:6px; }
fieldset{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; margin: 10px 0; }
legend{ font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:0 6px; }
/* Custom checkbox — small square, forest fill + tick, replaces the default browser box */
input[type="checkbox"]{
appearance:none; -webkit-appearance:none; width:18px; height:18px; flex-shrink:0;
border:1.5px solid var(--ink-faint); border-radius:3px; background:#fff; cursor:pointer;
position:relative; vertical-align:middle; margin:0; transition: background .2s ease, border-color .2s ease;
}
input[type="checkbox"]:hover{ border-color: var(--gold); }
input[type="checkbox"]:checked{ background: var(--gold); border-color: var(--gold); }
input[type="checkbox"]:checked::after{
content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Dotted leader between a label and a value — receipt/ledger flourish */
.leader{ flex:1; border-bottom:1px dotted var(--line); margin: 0 8px 5px; min-width:20px; }
/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:8px; border-bottom: 1px solid var(--ink); margin-bottom:28px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
background:none; border:none; padding: 14px 4px; font-weight:600; font-size:.7rem; cursor:pointer;
color: var(--ink-faint); border-bottom: 2px solid transparent; margin: 0 18px -1px 0; font-family: var(--body);
white-space:nowrap; letter-spacing:.1em; text-transform:uppercase; transition: color .25s ease, border-color .25s ease;
position:relative;
}
.tab-btn:hover{ color: var(--gold-dark); }
.tab-btn.active{ color: var(--ink); border-bottom-color: var(--gold); }
/* ---------- Badges / status ---------- */
.badge{ display:inline-block; padding: 4px 12px; border-radius: 999px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.badge.pending{ background:var(--olive-soft); color:var(--olive-dark); }
.badge.accepted{ background:var(--blue-soft); color:var(--blue); }
.badge.ready{ background:var(--gold-soft); color:var(--gold-dark); }
.badge.out{ background:var(--brick-soft); color:var(--brick); }
.badge.out_for_delivery{ background:var(--blue-soft); color:var(--blue); }
.badge.completed{ background: var(--green-soft); color: var(--green); }
.badge.cancelled{ background:var(--brick-soft); color:var(--brick); }
.badge.low{ background: var(--brick-soft); color: var(--brick); }
.badge.ok{ background: var(--green-soft); color: var(--green); }
.badge.bnpl{ background:var(--olive-soft); color:var(--olive-dark); border:1px dashed var(--olive-dark); }
.badge.cheaper{ background: var(--green-soft); color: var(--green); }
.badge.competitive{ background: var(--blue-soft); color: var(--blue); }
.badge.pricier{ background: var(--brick-soft); color: var(--brick); }
.badge.error{ background: var(--brick-soft); color: var(--brick); }
.badge.online{ background: var(--green-soft); color: var(--green); }
.badge.offline{ background:#EFEFEF; color: var(--ink-faint); }
.badge.needs_restock{ background:var(--olive-soft); color:var(--olive-dark); }
.badge.fault{ background:var(--brick-soft); color:var(--brick); }
.badge.warn{ background:var(--olive-soft); color:var(--olive-dark); }
.badge.expiring{ background:var(--olive-soft); color:var(--olive-dark); }
.badge.expired{ background:var(--brick-soft); color:var(--brick); }
.badge.shrinkage{ background:var(--brick-soft); color:var(--brick); border:1px dashed var(--brick); }
/* ---------- Tables — a digitised ledger, not a bootstrap grid ---------- */
table{ width:100%; border-collapse: collapse; font-size:.88rem; }
th{ text-align:left; font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; color: var(--ink-faint); font-weight:700; padding: 12px 14px; border-bottom: 1.5px solid var(--ink); }
td{ padding: 15px 14px; border-bottom: 1px solid var(--line-soft); vertical-align:middle; color: var(--ink-soft); }
tbody tr{ transition: background .15s ease; }
tbody tr:hover{ background: var(--paper-dim); }
tr:last-child td{ border-bottom:none; }
/* ---------- Hero (used by non-index pages, e.g. driver guard) ---------- */
.hero{
background: var(--paper-dim); color:var(--ink); position:relative; overflow:hidden;
}
.hero .wrap{ padding: 90px 24px 100px; position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.hero .eyebrow{ color: var(--olive-dark); }
.hero h1{ color: var(--ink); }
.hero p.lead{ color:var(--ink-soft); max-width:520px; font-size:1.05rem; font-weight:400; font-style:normal; }
.hero-stripes{
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(560px 380px at 88% 6%, rgba(34,52,36,.10), transparent 62%),
radial-gradient(520px 360px at 4% 96%, rgba(176,134,82,.14), transparent 62%);
}
.hero-art{ position:relative; z-index:2; }
.hero-art-card{
position:relative; border-radius: 6px; padding: 22px; overflow:visible;
background: linear-gradient(150deg, var(--gold-soft) 0%, #fff 55%, var(--olive-soft) 100%);
box-shadow: var(--shadow-lg);
}
.hero-art-card svg{ width:100%; height:auto; display:block; border-radius: 4px; }
.floating-badge{
position:absolute; background: rgba(255,255,255,.8); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.8); border-radius: 4px; padding: 12px 16px;
box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:10px;
font-size:.78rem; font-weight:600; color: var(--ink); white-space:nowrap;
}
.floating-badge .fb-icon{ font-size:1.1rem; }
.floating-badge.fb-1{ top:-18px; right:-18px; transform: rotate(-3deg); }
.floating-badge.fb-2{ bottom:-16px; left:-22px; transform: rotate(2deg); }
.hero-stats{ display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
.hero-stats .hs b{ font-family:var(--accent-serif); font-style:italic; font-weight:600; font-size:1.7rem; display:block; color:var(--gold);}
.hero-stats .hs span{ font-size:.66rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.09em; }
@media (max-width: 860px){ .hero .wrap{ grid-template-columns:1fr; padding: 60px 24px 50px; } .hero-art{ order:-1; max-width:340px; margin:0 auto 20px; } }
/* ---------- Section header pattern ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom: 30px; }
.section-head h2{ margin:0; }
/* ---------- Directory / editorial grid ---------- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:22px; }
.grid.editorial{ grid-template-columns: repeat(12, 1fr); }
.grid.editorial > *{ grid-column: span 4; }
.grid.editorial > *:nth-child(6n+1){ grid-column: span 7; }
.grid.editorial > *:nth-child(6n+2){ grid-column: span 5; }
@media (max-width: 900px){ .grid.editorial > *{ grid-column: span 12 !important; } }
.shop-card{
background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
display:block;
}
.shop-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); text-decoration:none; }
.shop-card .top{
padding: 60px 20px 16px; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;
background-size: cover; background-position: center; min-height:132px;
}
.shop-card .top::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(22,20,17,.78) 0%, rgba(22,20,17,.15) 55%, rgba(22,20,17,.05) 100%); }
.shop-card .top .emoji{
position:relative; z-index:1; font-size:1.5rem; width:44px; height:44px; border-radius:50%; flex-shrink:0;
background: rgba(244,239,230,.92); display:flex; align-items:center; justify-content:center;
box-shadow: var(--shadow); transition: transform .4s var(--ease);
}
.shop-card:hover .top .emoji{ transform: scale(1.1) rotate(-3deg); }
.shop-card .top .name{ position:relative; z-index:1; font-family: var(--display); font-style:italic; font-weight:600; font-size:1.2rem; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.shop-card .body{ padding: 18px 24px 4px; }
.shop-card .body .cat{ font-size:.66rem; color: var(--olive-dark); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.shop-card .body .addr{ color: var(--ink-soft); font-size:.86rem; margin: 6px 0 12px; font-weight:400; }
.shop-card .foot{ display:flex; justify-content:space-between; align-items:center; padding: 14px 24px 22px; font-size:.76rem; color: var(--ink-faint); border-top:1px solid var(--line-soft); margin-top:8px; }
/* ---------- Premium product card (shop menu / order grid) ---------- */
.product-card{
position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
overflow:hidden; display:flex; flex-direction:column;
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
transform-style: preserve-3d; will-change: transform;
}
.product-card:hover{
transform: translateY(-8px); border-color: transparent;
box-shadow: 0 24px 46px rgba(38,35,32,.18), 0 8px 18px rgba(38,35,32,.08);
}
.product-card .media{
position:relative; aspect-ratio: 4/5; overflow:hidden; display:block;
background-size: cover; background-position: center; background-color: var(--paper-dim);
}
.product-card .media .photo{
position:absolute; inset:0; background-size:cover; background-position:center;
transition: transform .8s var(--ease);
}
.product-card:hover .media .photo{ transform: scale(1.09) rotate(.3deg); }
.product-card .media::after{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background: linear-gradient(0deg, rgba(22,20,17,.5) 0%, rgba(22,20,17,.05) 42%, transparent 60%);
transition: background .45s var(--ease);
}
.product-card:hover .media::after{ background: linear-gradient(0deg, rgba(22,20,17,.62) 0%, rgba(22,20,17,.08) 48%, transparent 68%); }
.product-card .media .stock-flag{ position:absolute; top:12px; left:12px; z-index:2; }
.product-card .price-tag{
position:absolute; top:12px; right:12px; z-index:2; background: var(--ink); color: var(--paper);
font-family: var(--body); font-weight:700; font-size:.7rem; letter-spacing:.04em; padding: 6px 13px;
border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.22); transform: rotate(-2deg);
transition: transform .4s var(--ease), background .4s var(--ease);
}
.product-card:hover .price-tag{ transform: rotate(0deg) scale(1.05); background: var(--gold-dark); }
/* The category glyph straddles the photo/info seam — a normal-flow sibling
pulled up by half its own height, so it works at any card width without
hardcoded offsets, and isn't clipped by .product-card's overflow:hidden
since it never leaves the card's own box, only the .media child's. */
.product-card .glyph{
position:relative; z-index:3; margin: -20px 0 0 16px; width:40px; height:40px; border-radius:50%;
background: #fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
box-shadow: 0 10px 20px rgba(38,35,32,.18), 0 0 0 4px #fff;
transition: transform .5s var(--ease);
}
.product-card:hover .glyph{ transform: scale(1.12) rotate(-6deg); }
.product-card .info{ padding: 16px 18px 4px; flex:1; }
.product-card .info .name{ font-family: var(--display); font-style:italic; font-weight:600; font-size:1.18rem; color: var(--ink); line-height:1.2; }
.product-card .info .meta-row{ display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.product-card .info .meta-row .unit{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); white-space:nowrap; }
.product-card .info .meta-row .leader{ flex:1; border-bottom:1px dotted var(--line); min-width:8px; transform:translateY(-3px); }
.product-card .info .meta-row .stock-note{ font-size:.66rem; letter-spacing:.04em; color: var(--olive-dark); white-space:nowrap; font-weight:600; }
.product-card .details{
max-height:0; opacity:0; overflow:hidden; padding: 0 18px; color: var(--ink-faint); font-size:.72rem;
letter-spacing:.05em; text-transform:uppercase; transition: max-height .35s var(--ease), opacity .3s var(--ease), padding .35s var(--ease);
}
.product-card:hover .details{ max-height:40px; opacity:1; padding: 4px 18px 0; }
.product-card .actions{ padding: 14px 18px 18px; margin-top:auto; }
.product-card .card-accent{
position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
background: linear-gradient(90deg, var(--gold), var(--olive-light)); transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.product-card:hover .card-accent{ transform: scaleX(1); }
.product-card .info .name .chip{ vertical-align:middle; margin-left:4px; position:relative; top:-2px; background: rgba(255,255,255,.9); color: var(--olive-dark); box-shadow:0 0 0 1px var(--line-soft) inset; }
/* ---------- Shop hero banner (order.html) — big rounded banner, shop details layered inside it ---------- */
.shop-hero-wrap{ position:relative; }
.shop-hero{
position:relative; overflow:hidden; border-radius: 28px;
background: linear-gradient(160deg, var(--gold-dark), var(--gold) 65%); color: var(--paper);
padding: 40px 40px 60px;
display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center;
min-height: 320px;
}
@media (max-width: 800px){ .shop-hero{ grid-template-columns: 1fr; padding: 32px 24px 50px; } }
.shop-hero::before{
content:''; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(circle at 88% 15%, rgba(255,255,255,.14), transparent 55%);
}
.shop-hero .sh-ghost{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center;
font-family: var(--display); font-style:italic; font-weight:600; font-size: clamp(3.5rem, 10vw, 8rem);
color: rgba(244,239,230,.08); white-space:nowrap; pointer-events:none; user-select:none; line-height:1;
}
.shop-hero .sh-ribbon{
position:absolute; top:20px; right:-42px; transform:rotate(38deg); z-index:3;
background: var(--paper); color: var(--gold-dark); font-size:.66rem; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; padding:7px 52px; box-shadow: var(--shadow);
}
.shop-hero .sh-left{ position:relative; z-index:2; }
.shop-hero .sh-badge{
width:56px; height:56px; border-radius:50%; font-size:1.75rem;
background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
display:flex; align-items:center; justify-content:center; margin-bottom:14px; backdrop-filter: blur(4px);
}
.shop-hero .eyebrow{ color: rgba(244,239,230,.65); }
.shop-hero h1{ color: var(--paper); margin: 4px 0 4px; font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.shop-hero .sh-addr{ color: rgba(244,239,230,.78); font-size:.9rem; margin:0; }
.shop-hero .sh-trust{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.shop-hero .sh-pill{
display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:6px 13px;
font-size:.7rem; font-weight:600; color: var(--paper);
}
.shop-hero .sh-photo-wrap{
position:relative; z-index:2; border-radius:20px; overflow:hidden; aspect-ratio: 4/3;
box-shadow: 0 24px 50px rgba(22,20,17,.35); border: 3px solid rgba(255,255,255,.25);
}
.shop-hero .sh-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 800px){ .shop-hero .sh-photo-wrap{ aspect-ratio: 16/9; } }
/* Sibling of .shop-hero (inside .shop-hero-wrap), not a child — .shop-hero clips to its rounded corners
via overflow:hidden, which would otherwise cut off this card's bottom half where it breaks the banner's edge. */
.shop-hero-wrap .sh-stat-card{
position:absolute; left:40px; bottom:0; transform: translateY(50%); z-index:4;
background: #fff; color: var(--ink); border-radius: 16px; padding:14px 20px;
box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:12px;
}
.shop-hero-wrap .sh-stat-card .icon{
width:38px; height:38px; border-radius:50%; background: var(--gold-soft); color: var(--gold-dark);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.shop-hero-wrap .sh-stat-card .num{ font-family: var(--display); font-style:italic; font-weight:600; font-size:1.3rem; line-height:1; }
.shop-hero-wrap .sh-stat-card .lbl{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-faint); margin-top:3px; }
/* ---------- Driver dashboard ---------- */
.driver-topbar{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
background: linear-gradient(135deg, var(--gold-dark), var(--gold) 70%); border-radius: var(--radius-lg);
padding: 26px 30px;
}
.availability-toggle{
display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:10px 20px;
font-weight:700; font-size:.8rem; font-family: var(--body); letter-spacing:.02em;
border:1px solid rgba(255,255,255,.3); cursor:pointer; transition: background .25s ease, color .25s ease;
background: rgba(255,255,255,.12); color: var(--paper);
}
.availability-toggle .dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.5); }
.availability-toggle.on{ background: var(--paper); color: var(--gold-dark); }
.availability-toggle.on .dot{ background: #3EA55A; box-shadow: 0 0 0 3px rgba(62,165,90,.25); }
.star-picker{ display:flex; gap:6px; justify-content:center; }
.star-picker .star-btn{ background:none; border:none; cursor:pointer; font-size:1.7rem; line-height:1; padding:2px; color: var(--paper-deep); transition: color .15s ease, transform .15s ease; }
.star-picker .star-btn:hover{ color: var(--olive-light); transform: scale(1.15); }
/* ---------- Google Maps integration ---------- */
.maps-setup-notice{
display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-radius: var(--radius);
background: var(--paper-dim); border:1px dashed var(--paper-deep); color: var(--ink-soft); font-size:.8rem; line-height:1.5;
}
.maps-setup-notice .icon{ font-size:1.2rem; line-height:1; flex-shrink:0; }
.maps-setup-notice strong{ color: var(--ink); }
.map-box{ width:100%; height:260px; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); background: var(--paper-dim); }
.map-box.sm{ height:170px; }
.gmp-address-input{ display:block; width:100%; margin-top:4px; --gmpx-color-surface:#fff; --gmpx-color-on-surface:var(--ink); --gmpx-font-family-base:var(--body); }
.gmp-pin{
width:30px; height:30px; border-radius:50% 50% 50% 0; transform: rotate(-45deg);
background: var(--gold); border:2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25);
display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.gmp-pin span{ transform: rotate(45deg); }
/* ---------- Loyalty teaser banner ---------- */
.loyalty-teaser{
display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 20px;
border-radius: var(--radius); background: var(--olive-soft); border:1px dashed var(--olive-dark);
color: var(--olive-dark); text-decoration:none; font-size:.86rem; font-weight:500;
transition: background .25s ease;
}
.loyalty-teaser:hover{ background: var(--olive-light); }
.loyalty-teaser span{ flex:1; }
/* ---------- Filter bar (glass pill, unified radius throughout) ---------- */
.filter-bar{
display:flex; gap:2px; flex-wrap:wrap; align-items:center;
background: rgba(255,255,255,.6); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
border:1px solid rgba(255,255,255,.75); border-radius: 999px; padding: 7px; box-shadow: var(--shadow-lg);
}
.filter-bar .search-field{ position:relative; flex:1 1 220px; display:flex; align-items:center; }
.filter-bar .search-field .search-icon{ position:absolute; left:17px; font-size:.85rem; opacity:.45; pointer-events:none; }
.filter-bar input[type="search"]{
width:100%; border:none; background:transparent; padding: 13px 16px 13px 42px; border-radius:999px;
font-size:.9rem; box-shadow:none;
}
.filter-bar input[type="search"]:focus{ background: rgba(255,255,255,.85); outline:none; }
.filter-bar .bar-divider{ width:1px; align-self:stretch; margin: 8px 4px; background: rgba(38,35,32,.1); flex-shrink:0; }
.filter-bar select{
border:none; background:transparent; padding: 13px 16px; border-radius:999px; font-weight:600; font-size:.85rem;
flex:0 0 auto; width:auto; min-width:150px; box-shadow:none;
}
.filter-bar select:focus{ outline:none; background: rgba(255,255,255,.85); }
.filter-bar .chip-toggle{
display:flex; align-items:center; gap:7px; padding: 13px 18px; border-radius:999px; border:none;
cursor:pointer; font-weight:600; font-size:.78rem; white-space:nowrap; user-select:none; transition: all .2s ease;
background: transparent; flex-shrink:0;
}
.filter-bar .chip-toggle:hover{ background: rgba(38,35,32,.05); }
.filter-bar .chip-toggle input[type="checkbox"]{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.filter-bar .chip-toggle.active{ background: var(--gold); color: var(--paper); }
@media (max-width: 720px){ .filter-bar{ border-radius: var(--radius-lg); } .filter-bar .bar-divider{ display:none; } }
.result-count{ font-size:.72rem; color: var(--ink-faint); margin: 6px 0 18px; text-transform:uppercase; letter-spacing:.08em; }
/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(32px); }
.reveal.gsap-ready{ opacity:0; }
/* ---------- Install app buttons ---------- */
.install-btn{
display:inline-flex; align-items:center; gap:8px; background: var(--gold);
color: var(--paper); font-weight:600; padding: 12px 20px; border-radius: 999px; border:none; cursor:pointer;
font-family: var(--body); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; transition: background .2s ease, box-shadow .2s ease;
}
.install-btn:hover{ background: var(--gold-dark); }
.install-btn.ghost{ background: #fff; color: var(--ink); box-shadow:var(--shadow); border:1px solid var(--line); }
.install-btn.ghost:hover{ background: var(--paper-dim); color: var(--ink); }
/* ---------- Receipt ---------- */
.receipt{
font-family: var(--body); background:#fff; max-width: 400px; margin: 0 auto;
padding: 34px 30px 22px; position:relative;
box-shadow: var(--shadow-lg); border-radius: 4px;
clip-path: polygon(
0% 0%,100% 0%,100% 96%,
96% 100%,92% 96%,88% 100%,84% 96%,80% 100%,76% 96%,72% 100%,68% 96%,64% 100%,
60% 96%,56% 100%,52% 96%,48% 100%,44% 96%,40% 100%,36% 96%,32% 100%,28% 96%,
24% 100%,20% 96%,16% 100%,12% 96%,8% 100%,4% 96%,0% 100%
);
}
.receipt h3{ font-family: var(--display); font-style:italic; font-weight:600; text-align:center; margin-bottom:2px; font-size:1.35rem; }
.receipt .center{ text-align:center; }
.receipt hr{ border:none; border-top: 1px dashed var(--line); margin: 14px 0; }
.receipt .line{ display:flex; justify-content:space-between; font-size:.85rem; margin:6px 0; font-family: var(--mono); color: var(--ink-soft); }
.receipt .total{ font-weight:700; font-size:1.05rem; color: var(--ink); }
.receipt .stamp{
display:inline-block; margin-top:12px; border:1px solid var(--gold); color:var(--gold-dark);
padding: 4px 14px; transform: rotate(-3deg); font-weight:700; letter-spacing:.09em; font-size:.68rem;
border-radius:999px; text-transform:uppercase;
}
/* ---------- Misc ---------- */
.section{ padding: 64px 0; }
.muted{ color: var(--ink-soft); font-weight:400; }
.center{ text-align:center; }
.flex{ display:flex; align-items:center; gap:10px; }
.flex.between{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.empty{
border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 56px 24px;
text-align:center; color: var(--ink-faint); font-size:.9rem; font-family: var(--body);
}
.empty::before{ content:'—'; display:block; font-family: var(--display); font-style:italic; font-size:1.6rem; color: var(--paper-deep); margin-bottom:10px; }
.toast{
position:fixed; bottom:24px; right:24px; background: var(--ink); color:var(--paper);
padding: 15px 22px; border-radius:12px; font-weight:600; font-size:.85rem; box-shadow: var(--shadow-lg);
z-index: 999; border-left: 3px solid var(--olive); max-width: 320px;
animation: slidein .3s var(--ease);
}
@keyframes slidein{ from{ transform: translateY(14px); opacity:0;} to{ transform:none; opacity:1;} }
.stat{
display:grid; grid-template-columns: minmax(0,1fr) auto; column-gap:10px;
background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:18px 20px 16px;
position:relative; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.stat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.stat:hover::before{ transform: scaleY(1); }
.stat .icon{
grid-column:2; grid-row:1; font-size:1rem; width:30px; height:30px; border-radius:50%; flex-shrink:0;
background: var(--paper-dim); display:flex; align-items:center; justify-content:center; transition: background .3s ease, transform .3s var(--ease);
}
.stat:hover .icon{ background: var(--gold-soft); transform: scale(1.08); }
.stat .num{
grid-column:1; grid-row:1; align-self:center; min-width:0;
font-family: var(--display); font-style:italic; font-weight:600; font-size: 2rem; color: var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat .lbl{ grid-column:1/-1; grid-row:2; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-top:6px; }
.footer{ background: var(--ink); color: var(--paper); padding: 40px 0; margin-top: 70px; }
.footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#B9B3A5; }
.qr-box{ background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 18px; display:inline-block; }
.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 34px; }
@media (max-width: 800px){
.two-col{ grid-template-columns: 1fr; }
.field-row{ grid-template-columns: 1fr; }
.nav{ display:none; }
}
.cart-item{ display:flex; justify-content:space-between; align-items:center; padding: 11px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.qty-ctrl{ display:flex; align-items:center; gap:10px; }
.qty-ctrl button{ width:26px;height:26px;border-radius:50%;border:1px solid var(--ink); background:#fff; cursor:pointer; font-weight:600; transition: background .2s ease, color .2s ease; }
.qty-ctrl button:hover{ background: var(--ink); color: var(--paper); }
/* ---------- Stock management (redesigned card-list) ---------- */
.stock-row{
display:flex; align-items:center; gap:16px; padding:13px 20px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stock-row:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: transparent; }
.stock-row.editing{ display:block; padding:24px; }
.stock-row.editing:hover{ transform:none; }
/* Same warning/danger tiers as the spreadsheet view's rows — a coloured
left-edge stripe so a flagged product reads as flagged at a glance, not
just from a qty badge you have to actually read. */
.stock-row-warn{ box-shadow: inset 4px 0 0 var(--olive-dark); }
.stock-row-danger{ box-shadow: inset 4px 0 0 var(--brick); }
.sr-thumb{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.sr-info{ flex:1; min-width:0; }
.sr-name-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sr-name{ font-family: var(--display); font-style:italic; font-weight:600; font-size:1.04rem; color: var(--ink); }
.sr-meta{ margin-top:4px; font-size:.78rem; color: var(--ink-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sr-meta .dot{ color: var(--ink-faint); }
.sr-margin{ color: var(--olive-dark); font-weight:600; }
.sr-qty-badge{ flex-shrink:0; white-space:nowrap; }
.sr-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background: var(--olive-soft); color: var(--olive-dark); }
.filter-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 13px; font-size:.72rem; font-weight:600; color: var(--ink-soft); cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.chip-btn:hover{ border-color: var(--gold); color: var(--gold-dark); }
.chip-btn.active{ background: var(--gold-dark); color:#fff; border-color: var(--gold-dark); box-shadow: 0 2px 8px rgba(22,36,26,.18); }
/* Premium segmented control — the primary view switchers (Stock's
Products/Spreadsheet/Add/Inventory, Orders' List/Board/Calendar). A
raised pill on a soft track reads as considered UI chrome; a flat solid-
black pill (the old .chip-btn treatment) reads as a default/unstyled
control, which is what this replaces for these specifically. */
.view-toggle{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; background: var(--paper-dim); border-radius:12px; }
.view-toggle-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent;
padding:7px 13px; border-radius:9px; font-family: var(--body); font-size:.74rem; font-weight:600;
letter-spacing:.01em; color: var(--ink-soft); cursor:pointer; white-space:nowrap;
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.view-toggle-btn:hover{ color: var(--ink); }
.view-toggle-btn.active{ background:#fff; color: var(--gold-dark); box-shadow: 0 1px 2px rgba(38,35,32,.07), 0 1px 5px rgba(38,35,32,.06); }
.view-toggle-btn svg{ flex-shrink:0; }
.view-toggle-btn .vt-label-short{ display:none; }
/* Never lose a tab on a narrow screen — it wraps to a second row rather
than clipping or forcing a hidden horizontal scroll, and labels shrink
to their short form so all four options usually still fit on one line. */
@media (max-width: 640px){
.view-toggle{ display:flex; width:100%; padding:3px; gap:3px; }
.view-toggle-btn{ flex:1 1 auto; padding:7px 8px; font-size:.7rem; gap:5px; }
.view-toggle-btn .vt-label-full{ display:none; }
.view-toggle-btn .vt-label-short{ display:inline; }
}
/* A search field with an inline (non-emoji) icon, matching the sidebar's own
search — used wherever a toolbar needs its own search, e.g. the stock
spreadsheet's column search. */
.toolbar-search{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:11px; background:#fff; border:1px solid var(--line); min-width:240px; transition: border-color .18s ease, box-shadow .18s ease; }
.toolbar-search:focus-within{ border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.toolbar-search svg{ flex-shrink:0; color: var(--ink-faint); }
.toolbar-search input{ border:none; background:transparent; padding:0; margin:0; font-size:.82rem; width:100%; min-width:0; color: var(--ink); }
.toolbar-search input:focus{ border:none; box-shadow:none; }
.toolbar-search input::placeholder{ color: var(--ink-faint); }
/* Utility buttons that sit alongside a .toolbar-search (Export, Import…) —
same rounded-corner radius, border weight and hover language as the
search field itself, so a toolbar reads as one designed unit instead of
a search box next to a leftover default .btn CTA pill. */
.sheet-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px 24px; }
.sheet-toolbar-count{ font-family: var(--body); font-style:normal; font-size:.6em; font-weight:600; color: var(--ink-faint); letter-spacing:.02em; margin-left:4px; }
.sheet-toolbar-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar-btn{
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
padding:9px 15px; border-radius:11px; background:#fff; border:1px solid var(--line);
font-family: var(--body); font-size:.78rem; font-weight:600; color: var(--ink-soft); cursor:pointer;
transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.toolbar-btn:hover{ border-color: var(--gold); color: var(--gold-dark); box-shadow: 0 1px 2px rgba(38,35,32,.06); }
.toolbar-btn svg{ flex-shrink:0; }
.toolbar-link{ background:none; border:none; padding:0 2px; font-family: var(--body); font-size:.78rem; font-weight:600; color: var(--gold-dark); cursor:pointer; white-space:nowrap; }
.toolbar-link:hover{ text-decoration:underline; }
/* Excel-style spreadsheet view (Stock tab) — a real grid: frozen header,
row numbers, sortable columns, click-to-edit cells, colour-coded rows. */
.sheet-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.sheet-table th, .sheet-table td{ padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.sheet-table thead th{ position:sticky; top:0; background:var(--paper-dim); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); border-bottom:2px solid var(--line); z-index:1; }
.sheet-sortable{ cursor:pointer; user-select:none; }
.sheet-sortable:hover{ color:var(--gold-dark); }
.sheet-sort-arrow{ color:var(--gold-dark); }
.sheet-th{ position:sticky; top:0; }
.sheet-filter-btn{ background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:.7rem; margin-left:4px; padding:2px 5px; border-radius:4px; vertical-align:middle; }
.sheet-filter-btn:hover{ color:var(--gold-dark); background:var(--gold-soft); }
.sheet-filter-btn.active{ color:var(--gold-dark); font-weight:700; background:var(--gold-soft); }
.sheet-filter-pop{ position:absolute; top:100%; left:0; z-index:5; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:12px; margin-top:6px; min-width:210px; text-transform:none; letter-spacing:0; font-weight:400; font-size:.8rem; white-space:normal; cursor:default; }
.sheet-filter-pop label{ display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; margin-bottom:6px; }
.sheet-filter-pop select, .sheet-filter-pop input[type="number"], .sheet-filter-pop input[type="date"], .sheet-filter-pop input[type="text"]{ width:100%; margin:0; }
.sheet-filter-checkbox{ display:flex; gap:7px; align-items:center; font-weight:400; text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--ink); cursor:pointer; }
.sheet-pill{ cursor:default; display:inline-flex; align-items:center; gap:7px; }
.sheet-pill a{ color:inherit; text-decoration:none; opacity:.7; }
.sheet-pill a:hover{ opacity:1; }
.sheet-rownum{ color:var(--ink-faint); text-align:center; font-variant-numeric:tabular-nums; }
.sheet-num{ text-align:right; font-variant-numeric:tabular-nums; }
.sheet-cell{ cursor:cell; }
.sheet-cell:hover{ box-shadow: inset 0 0 0 1.5px var(--gold); }
.sheet-cell input{ width:100%; min-width:70px; border:1px solid var(--gold); border-radius:4px; padding:3px 6px; font:inherit; background:#fff; }
.sheet-table tbody tr:hover{ background:var(--paper-dim); }
/* Danger (out of stock / expired) stays the existing brick/red tier.
Warning (low stock / expiring soon) uses the olive family, not the
"gold" one — despite its name, --gold is this app's deep-green brand
accent, not an amber tone, so it read as a neutral/positive tint rather
than a caution one. Olive is genuinely warm/amber here. Both also get a
coloured left-edge stripe (via the first cell's inset shadow) so a
flagged row reads as flagged even at a glance, not just a faint tint. */
.sheet-row-danger{ background:var(--brick-soft); }
.sheet-row-warn{ background:var(--olive-soft); }
.sheet-row-danger:hover, .sheet-row-warn:hover{ filter:brightness(0.97); }
.sheet-row-danger td:first-child{ box-shadow: inset 3px 0 0 var(--brick); }
.sheet-row-warn td:first-child{ box-shadow: inset 3px 0 0 var(--olive-dark); }
.sheet-alert-icon{ display:inline-flex; vertical-align:-2px; margin-right:3px; color:var(--brick); }
.sheet-num-alert{ color:var(--brick); font-weight:700; }
/* Show/hide-columns modal (Spreadsheet view toolbar) */
.sheet-col-toggle{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:8px; cursor:pointer; font-family:var(--body); font-size:.86rem; font-weight:500; color:var(--ink); transition: background .15s ease, color .15s ease; }
.sheet-col-toggle:hover{ background:var(--paper-dim); }
.sheet-col-toggle svg{ color:var(--ink-faint); flex-shrink:0; }
.sheet-col-toggle.is-hidden{ color:var(--ink-faint); }
.sheet-col-toggle.is-hidden svg{ color:var(--ink-faint); }
/* Per-row expand toggle + detail panel — price history and the fields that
don't fit a spreadsheet column. */
.sheet-table td.sheet-expand-cell{ padding:0; text-align:center; }
.sheet-expand-btn{ background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:9px; display:inline-flex; align-items:center; justify-content:center; }
.sheet-expand-btn:hover{ color:var(--gold-dark); }
.sheet-expand-btn svg{ transition: transform .15s ease; }
.sheet-expand-btn.expanded svg{ transform: rotate(90deg); }
.sheet-table .sheet-expand-row td{ background:var(--paper); padding:16px 20px; white-space:normal; cursor:default; }
.sheet-expand-panel{ display:flex; flex-wrap:wrap; gap:28px; }
.sheet-expand-section{ flex:1 1 220px; min-width:200px; }
.sheet-expand-section h4{ margin:0 0 10px; font-family:var(--body); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; }
.sheet-expand-details{ display:flex; flex-direction:column; gap:7px; }
.sheet-expand-details > div{ display:flex; justify-content:space-between; gap:16px; font-size:.82rem; }
.sheet-expand-k{ color:var(--ink-faint); }
.sheet-expand-v{ color:var(--ink); font-weight:600; text-align:right; }
.sheet-expand-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.sheet-expand-table th{ text-align:left; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700; padding:0 10px 5px 0; white-space:nowrap; }
.sheet-expand-table td{ padding:4px 10px 4px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.sheet-expand-table tbody tr:last-child td{ border-bottom:none; }
/* The sheet's scroll container — a slim inset custom scrollbar instead of
the native one, whose stepper arrow buttons otherwise sit flush against
(and visually break) the card's rounded corners. Inset via track margin
so the bar reads as "floating" a little in from each edge, not a
full-width native bar. */
/* Matches the app's own global scrollbar recipe (further down this file)
exactly, rather than inventing a different one — the earlier attempt's
transparent track just let this container's own white .card background
show through underneath it, which is what read as "a white scrollbar". */
.sheet-scroll{ overflow:auto; border-radius:0; scrollbar-width:thin; scrollbar-color: var(--paper-deep) var(--paper-dim); }
.sheet-scroll::-webkit-scrollbar{ height:8px; width:8px; }
.sheet-scroll::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.sheet-scroll::-webkit-scrollbar-track{ background: var(--paper-dim); }
.sheet-scroll::-webkit-scrollbar-thumb{ background: var(--paper-deep); border-radius:99px; border:2px solid transparent; background-clip: padding-box; }
.sheet-scroll::-webkit-scrollbar-thumb:hover{ background: var(--olive-light); background-clip: padding-box; }
.sheet-scroll::-webkit-scrollbar-corner{ background: var(--paper-dim); }
@media (max-width: 720px){
.stock-row{ flex-wrap:wrap; }
.sr-info{ flex-basis:100%; order:1; margin-top:4px; }
.sr-actions{ order:4; flex-basis:100%; justify-content:flex-start; margin-top:8px; }
}
/* ---------- Language switcher ---------- */
.lang-switch{ display:flex; gap:4px; }
.lang-switch button{
background: transparent; color: var(--ink-soft); border:1px solid var(--line);
border-radius:999px; padding:5px 10px; font-size:.62rem; font-weight:700; cursor:pointer; font-family: var(--body); letter-spacing:.05em;
}
.lang-switch button.active{ background: var(--gold); color: var(--paper); border-color: var(--gold); }
/* ---------- Shop switcher (multi-shop owners) ---------- */
.shop-switch{ margin: 10px 0 0; }
.shop-switch select{ max-width:280px; display:inline-block; width:auto; }
/* ---------- Barcode scan button ---------- */
.scan-btn{ display:inline-flex; align-items:center; gap:6px; }
#barcode-scanner{ max-width: 360px; margin: 10px 0; border-radius: 14px; overflow:hidden; border:1px solid var(--ink); }
/* ---------- Sync status pill ---------- */
.sync-pill{ font-size:.62rem; font-weight:700; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }
.sync-pill.cloud{ background: var(--green-soft); color: var(--green); }
.sync-pill.local{ background:var(--olive-soft); color: var(--olive-dark); }
/* ---------- Comparison bars (group overview / performance) ---------- */
.perf-bar-track{ background: var(--paper-deep); border-radius:999px; height:6px; overflow:hidden; }
.perf-bar-fill{ height:100%; background: var(--gold); border-radius:999px; }
/* ---------- Vending machines ---------- */
.machine-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:24px; box-shadow: var(--shadow); }
/* ---------- Payment method badges (vending machine header) ---------- */
.pm-badge-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.pm-badge{
display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:600; letter-spacing:.03em;
padding:4px 10px; border-radius:999px; background: var(--paper-dim); color: var(--ink-soft);
}
/* ---------- Machine settings panel (rows/cols + payment methods) ---------- */
.machine-settings{
margin-top:16px; padding:18px; border-radius: 14px; background: var(--paper-dim); border:1px dashed var(--paper-deep);
}
.machine-settings .pm-check-row{ display:flex; gap:14px; flex-wrap:wrap; margin: 8px 0 4px; }
.machine-settings label.pm-check{
display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:500; color: var(--ink-soft); text-transform:none; letter-spacing:0;
margin:0; cursor:pointer;
}
/* ---------- Visual slot board — a literal row/column map of the machine ---------- */
.slot-board-wrap{ margin-top:14px; overflow-x:auto; padding-bottom:4px; }
.slot-board{
display:inline-grid; gap:8px; min-width:100%;
grid-template-columns: repeat(var(--cols, 4), minmax(96px, 1fr));
}
.slot-cell{
position:relative; border-radius:12px; padding:10px 11px 9px; min-height:96px; display:flex; flex-direction:column;
border:1px solid var(--line); background:#fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.slot-cell:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.slot-cell .sc-code{ font-family: var(--mono); font-size:.6rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.slot-cell .sc-name{ font-family: var(--display); font-style:italic; font-weight:600; font-size:.86rem; margin:3px 0 5px; line-height:1.15; flex:1; }
.slot-cell .sc-price{ font-size:.68rem; color: var(--ink-soft); font-weight:600; }
.slot-cell .sc-bar{ height:4px; border-radius:99px; background: var(--paper-dim); overflow:hidden; margin-top:6px; }
.slot-cell .sc-bar-fill{ height:100%; border-radius:99px; }
.slot-cell.stock-ok .sc-bar-fill{ background: var(--green); }
.slot-cell.stock-low .sc-bar-fill{ background: var(--olive); }
.slot-cell.stock-empty .sc-bar-fill{ background: var(--brick); }
.slot-cell .sc-actions{ display:flex; gap:4px; margin-top:7px; }
.slot-cell .sc-actions button{
flex:1; border:1px solid var(--line); background:#fff; border-radius:7px; font-size:.62rem; font-weight:700;
padding:4px 2px; cursor:pointer; color: var(--ink-soft); transition: background .2s ease, color .2s ease;
}
.slot-cell .sc-actions button:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.slot-cell.empty{
align-items:center; justify-content:center; background:transparent; border:1.5px dashed var(--paper-deep); cursor:pointer; color: var(--ink-faint);
}
.slot-cell.empty:hover{ border-color: var(--olive); color: var(--olive-dark); background: var(--paper-dim); transform:none; box-shadow:none; }
.slot-cell.empty .sc-code{ margin-top:6px; }
/* ---------- Cart drawer ---------- */
.cart-fab{
position: fixed; right:26px; bottom:26px; z-index: 700; width:58px; height:58px; border-radius:50%;
background: var(--gold); color: var(--paper); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
font-size:1.25rem; box-shadow: var(--shadow-lg); transition: background .2s ease;
}
.cart-fab:hover{ background: var(--gold-dark); }
.cart-fab .count{
position:absolute; top:-4px; right:-4px; background: var(--olive); color: var(--paper); font-size:.64rem; font-weight:700;
width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; border: 2px solid var(--paper);
}
.cart-drawer-overlay{ position: fixed; inset:0; background: rgba(38,35,32,.4); z-index: 800; opacity:0; pointer-events:none; transition: opacity .3s ease; }
.cart-drawer-overlay.open{ opacity:1; pointer-events:auto; }
/* ---------- Voice assistant ---------- */
.voice-fab{
position:fixed; right:26px; bottom:26px; z-index:699; width:52px; height:52px; border-radius:50%;
background: var(--ink); color:#fff; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg);
transition: background .2s ease, transform .2s ease;
}
.voice-fab:hover{ transform: scale(1.06); }
.voice-fab.open{ background: var(--brick); }
.voice-fab.stacked{ bottom:96px; }
.voice-panel{
position:fixed; right:26px; bottom:90px; z-index:698; width:320px; max-width: calc(100vw - 40px);
background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line);
display:flex; flex-direction:column; overflow:hidden; max-height:70vh;
opacity:0; transform: translateY(12px) scale(.97); pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.voice-panel.stacked{ bottom:160px; }
.voice-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.vp-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background: var(--ink); color:#fff; flex-shrink:0; }
.vp-title{ font-family: var(--display); font-style:italic; font-size:1.05rem; }
.vp-close{ background:none; border:none; color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; opacity:.7; }
.vp-close:hover{ opacity:1; }
.vp-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-height:120px; }
.vp-msg{ font-size:.82rem; line-height:1.45; padding:8px 12px; border-radius:12px; max-width:88%; }
.vp-msg.assistant{ background: var(--paper-dim); color: var(--ink); align-self:flex-start; border-bottom-left-radius:3px; }
.vp-msg.user{ background: var(--gold); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.vp-confirm{ padding:12px 16px; border-top:1px solid var(--line); background: var(--olive-soft); }
.vp-confirm p{ font-size:.82rem; margin:0 0 10px; color: var(--olive-dark); font-weight:600; }
.vp-input-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); flex-shrink:0; }
.vp-input-row input{ flex:1; border:none; padding:8px 4px; font-size:.85rem; }
.vp-input-row input:focus{ outline:none; }
.vp-mic-btn, .vp-send-btn{
width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; color: var(--ink-soft);
display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: background .2s ease, color .2s ease;
}
.vp-mic-btn:hover, .vp-send-btn:hover{ background: var(--ink); color:#fff; }
.vp-mic-btn.active{ background: var(--brick); color:#fff; border-color: var(--brick); animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,93,63,.4); } 50%{ box-shadow:0 0 0 8px rgba(168,93,63,0); } }
.cart-drawer{
position: fixed; top:0; right:0; bottom:0; width: min(420px, 92vw); background: var(--paper); z-index: 900;
box-shadow: -20px 0 60px rgba(0,0,0,.2); transform: translateX(105%); display:flex; flex-direction:column;
/* The whole drawer scrolls as one region now, not just .cd-body — .cd-foot
holds the full checkout form (fulfillment, address, driver, coupon,
payment, guest details, due date…) and on a full checkout it's taller
than the viewport; .cd-foot had no scroll or size limit of its own, so
that overflow used to just run off-screen with nothing to reach it. */
overflow-y:auto;
}
.cart-drawer .cd-head{
padding: 24px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
position: sticky; top:0; background: var(--paper); z-index:2; flex-shrink:0;
}
.cart-drawer .cd-head h3{ font-style:normal; font-weight:600; }
.cart-drawer .cd-close{ background:none; border:none; font-size:1.3rem; cursor:pointer; color: var(--ink); }
.cart-drawer .cd-body{ padding: 8px 26px; }
.cart-drawer .cd-foot{ padding: 20px 26px 26px; border-top:1px solid var(--line); }
.fly-particle{ position: fixed; z-index: 950; pointer-events:none; border-radius:50%; background: var(--gold); box-shadow: 0 4px 14px rgba(34,52,36,.4); }
/* ---------- Premium "SaaS console" treatment for the shop profile ---------- */
.profile-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin: 4px 0 28px; }
.profile-stats .stat{
display:flex; align-items:center; gap:14px; padding:19px 20px;
background: linear-gradient(155deg, #fff 55%, var(--paper-dim) 160%);
}
.profile-stats .stat .icon{
width:44px; height:44px; font-size:1.15rem; flex-shrink:0;
transition: transform .35s var(--ease), background .3s ease, color .3s ease;
}
.profile-stats .stat:hover .icon{ transform: scale(1.1) rotate(-6deg); }
.profile-stats .stat .stat-text{ min-width:0; }
.profile-stats .stat .num{ font-size:1.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-stats .stat .lbl{ margin-top:3px; }
.profile-stats .stat:nth-child(1) .icon{ background: var(--gold-soft); color: var(--gold-dark); }
.profile-stats .stat:nth-child(2) .icon{ background: var(--olive-soft); color: var(--olive-dark); }
.profile-stats .stat:nth-child(3) .icon{ background: var(--brick-soft); color: var(--brick); }
.profile-stats .stat:nth-child(4) .icon{ background: var(--blue-soft); color: var(--blue); }
.profile-stats .stat:nth-child(1):hover .icon{ background: var(--gold-dark); color:#fff; }
.profile-stats .stat:nth-child(2):hover .icon{ background: var(--olive-dark); color:#fff; }
.profile-stats .stat:nth-child(3):hover .icon{ background: var(--brick); color:#fff; }
.profile-stats .stat:nth-child(4):hover .icon{ background: var(--blue); color:#fff; }
.profile-columns{ display:grid; grid-template-columns: 260px 1fr 260px; gap:20px; margin: 8px 0 46px; align-items:stretch; }
@media (max-width: 900px){ .profile-columns{ grid-template-columns: 1fr; } .profile-banner{ height:180px; } .profile-avatar{ width:100px; height:100px; font-size:2.8rem; border-width:5px; } }
.profile-side{
padding:24px; display:flex; flex-direction:column; gap:16px; border-radius: 20px;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.profile-side:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.profile-side .contact-row{ display:flex; align-items:center; gap:11px; font-size:.86rem; color:var(--ink-soft); }
.profile-side .contact-row .ci{
width:30px; height:30px; border-radius:9px; background: var(--paper-dim); color: var(--gold-dark); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.profile-intro{
border-radius: 20px; padding: 30px 28px; position:relative; overflow:hidden; min-height:220px;
display:flex; flex-direction:column; justify-content:flex-end; color:var(--paper);
background:
radial-gradient(420px 260px at 100% -10%, rgba(217,183,126,.28), transparent 60%),
linear-gradient(155deg, var(--gold-dark) 0%, var(--gold) 60%, #1c2b1e 100%);
box-shadow: 0 18px 40px rgba(22,36,26,.28); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
transform-style: preserve-3d; will-change: transform;
}
.profile-intro::after{
content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.profile-intro .intro-badge{
position:relative; z-index:2; width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:18px;
}
.profile-intro .intro-text{ position:relative; z-index:2; max-width: 92%; }
.profile-intro .eyebrow{ color: var(--olive-light); }
.profile-intro h3{ font-size:1.6rem; margin-bottom:8px; color:var(--paper); }
.profile-intro p{ color: rgba(244,239,230,.85); margin:0; font-size:.9rem; line-height:1.6; }
.profile-widget{
border-radius: 20px; padding:26px 22px; text-align:center;
background: rgba(255,255,255,.58); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-lg);
display:flex; flex-direction:column; align-items:center; gap:10px;
transition: transform .4s var(--ease); transform-style: preserve-3d; will-change: transform;
}
.profile-widget .widget-icon{
width:38px; height:38px; border-radius:50%; background: var(--gold-soft); color: var(--gold-dark);
display:flex; align-items:center; justify-content:center; margin-bottom:2px;
}
.profile-widget .widget-label{ font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.profile-widget .qr-box{ margin: 6px 0; border-radius:14px; }
/* =========================================================
App shell — sidebar-driven layout for dashboard.html / admin.html.
A distinct "product" chrome from the marketing site's topbar,
deliberately mirroring modern SaaS console patterns.
========================================================= */
.icon{ display:inline-block; vertical-align:middle; flex-shrink:0; }
.bg-blobs{
position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
background:
radial-gradient(680px 520px at 14% -6%, rgba(34,52,36,.14), transparent 60%),
radial-gradient(620px 480px at 108% 12%, rgba(176,134,82,.16), transparent 58%),
radial-gradient(700px 560px at 50% 118%, rgba(91,114,133,.12), transparent 60%),
var(--paper);
}
.glass{
background: rgba(255,255,255,.62);
backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255,255,255,.7);
box-shadow: var(--shadow-lg);
}
.app-shell{ display:flex; min-height:100vh; align-items:stretch; }
/* Custom scrollbar — applied globally so every scroll region (window, sidebar
nav, modals) matches the design system instead of showing the bulky native
OS scrollbar. Firefox via scrollbar-width/color, WebKit via ::-webkit-*. */
*{ scrollbar-width: thin; scrollbar-color: var(--paper-deep) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--paper-deep); border-radius:99px; border:2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover{ background: var(--olive-light); background-clip: padding-box; }
.app-sidebar{
width: 272px; flex-shrink:0; display:flex; flex-direction:column;
padding: 22px 18px 16px; position:sticky; top:0; height:100vh; overflow:hidden;
background: rgba(244,239,230,.78); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
border-right: 1px solid var(--line); transition: width .25s var(--ease), padding .25s var(--ease);
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding: 4px 8px 2px; font-family: var(--display); font-style:italic; font-size:1.2rem; flex-shrink:0; }
.sidebar-brand .mark{ width:32px; height:32px; border-radius:50%; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--body); font-style:normal; font-size:.72rem; letter-spacing:.02em; flex-shrink:0; }
.brand-logo-img{ max-height:52px; width:auto; border-radius:0; flex-shrink:0; }
.sidebar-brand .brand-logo-img{ max-height:44px; }
.brand-logo-wordmark{ max-height:44px; }
/* Pages whose header is baked into the static HTML (order/shop/receipt/flyer)
would otherwise paint the generic "TP" mark for a moment before the shop's
own logo (fetched async) swaps in — a visible flash on every load. Marking
the brand "pending" up front hides it until applyShopBranding() resolves
(see js/app.js), then fades in whichever logo actually applies — the
shop's own, or the default Tillpoint mark if it has none — instead of
showing the wrong one first. */
.brand .mark, .brand [data-brand-text], .brand .brand-logo-img{ transition: opacity .2s ease; }
.brand.brand-pending .mark, .brand.brand-pending [data-brand-text], .brand.brand-pending .brand-logo-img{ opacity:0; }
.sidebar-collapse-btn{
margin-left:auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.6);
display:flex; align-items:center; justify-content:center; color:var(--ink-faint); cursor:pointer; flex-shrink:0;
transition: background .18s ease, color .18s ease, transform .25s ease; transform: rotate(180deg);
}
.sidebar-collapse-btn:hover{ background: var(--ink); color: var(--paper); }
.sidebar-mobile-close{
display:none; margin-left:auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.6);
align-items:center; justify-content:center; color:var(--ink-faint); cursor:pointer; flex-shrink:0;
transition: background .18s ease, color .18s ease;
}
.sidebar-mobile-close:hover{ background: var(--ink); color: var(--paper); }
.sidebar-primary{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%; flex-shrink:0; margin-top:18px;
background: var(--gold); color: var(--paper); border:none; border-radius: 12px; padding: 13px 16px;
font-family: var(--body); font-weight:600; font-size:.82rem; letter-spacing:.02em; cursor:pointer;
box-shadow: 0 10px 24px rgba(22,36,26,.22); transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sidebar-primary:hover{ background: var(--gold-dark); box-shadow: 0 14px 28px rgba(22,36,26,.28); }
.sidebar-search{
display:flex; align-items:center; gap:8px; padding: 10px 12px; border-radius:12px; flex-shrink:0; margin-top:14px;
background: rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8); color: var(--ink-faint);
}
.sidebar-search input{ border:none; background:transparent; padding:0; font-size:.84rem; width:100%; }
.sidebar-search input:focus{ border:none; }
.sidebar-search kbd{ font-family: var(--body); font-size:.62rem; color: var(--ink-faint); background: rgba(38,35,32,.06); padding:2px 6px; border-radius:5px; flex-shrink:0; }
.sidebar-nav{
display:flex; flex-direction:column; gap:20px; flex:1; min-height:0; overflow-y:auto;
margin-top:18px; padding-right:4px; padding-bottom:6px;
}
.sidebar-section{ display:flex; flex-direction:column; gap:2px; }
.sidebar-section-label{
display:flex; align-items:center; justify-content:space-between; padding: 4px 10px 6px;
font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color: var(--ink-faint); cursor:default;
}
.sidebar-link{
display:flex; align-items:center; gap:11px; padding: 9px 10px; border-radius:10px; cursor:pointer;
color: var(--ink-soft); font-size:.85rem; font-weight:500; text-decoration:none; border:none; background:none; width:100%; text-align:left;
transition: background .18s ease, color .18s ease;
}
.sidebar-link:hover{ background: rgba(38,35,32,.055); color: var(--ink); text-decoration:none; }
.sidebar-link.active{ background: var(--gold); color: var(--paper); }
.sidebar-link.active .icon{ color: var(--paper); }
.sidebar-link .icon{ color: var(--ink-faint); transition: color .18s ease; }
.sidebar-link.active .icon, .sidebar-link:hover .icon{ color: currentColor; }
.sidebar-link .lock-ic{ margin-left:auto; opacity:.55; }
.sidebar-link.is-locked{ opacity:.62; }
.sidebar-link .badge-mini{
margin-left:auto; font-size:.58rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
background: var(--olive-soft); color: var(--olive-dark); padding:2px 7px; border-radius:99px;
}
.plan-card{
position:relative; overflow:hidden; border-radius:14px; padding:14px 16px; color: var(--paper); flex-shrink:0; margin-top:14px;
background: linear-gradient(150deg, var(--gold-dark) 0%, var(--gold) 55%, #3a5a3d 100%);
box-shadow: 0 10px 22px rgba(22,36,26,.26);
}
.plan-card::before{
content:''; position:absolute; right:-24px; top:-24px; width:90px; height:90px; border-radius:50%;
background: radial-gradient(circle, rgba(217,183,126,.5), transparent 70%); pointer-events:none;
}
.plan-card .pc-head{ position:relative; z-index:1; display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.plan-card .pc-icon{ width:24px; height:24px; border-radius:50%; background: rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.plan-card h4{ font-family: var(--display); font-style:italic; font-weight:600; font-size:.95rem; margin:0; color:#fff; }
.plan-card p{ color: rgba(244,239,230,.8); font-size:.7rem; line-height:1.4; margin:0 0 10px; position:relative; z-index:1; }
.plan-card .btn{ position:relative; z-index:1; width:100%; padding:8px 16px; font-size:.62rem; }
.trial-banner{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
margin:16px 28px 0; padding:12px 18px; border-radius:12px; color: var(--paper);
background: linear-gradient(150deg, var(--gold-dark) 0%, var(--gold) 55%, #3a5a3d 100%);
box-shadow: 0 8px 18px rgba(22,36,26,.22);
}
.trial-banner-icon{
width:26px; height:26px; border-radius:50%; background: rgba(255,255,255,.16);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.trial-banner-text{ flex:1; min-width:200px; font-size:.82rem; line-height:1.4; color: rgba(244,239,230,.92); }
.trial-banner-text strong{ color:#fff; }
.trial-banner .btn{ flex-shrink:0; padding:8px 18px; font-size:.72rem; }
.trial-banner-close{
flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none; background: rgba(255,255,255,.14);
color: var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer;
transition: background .15s ease;
}
.trial-banner-close:hover{ background: rgba(255,255,255,.26); }
@media (max-width: 640px){
.trial-banner{ margin:14px 16px 0; }
}
.sidebar-foot{ display:flex; align-items:center; gap:10px; padding: 12px 6px 2px; border-top:1px solid var(--line-soft); margin-top:12px; flex-shrink:0; }
.sidebar-avatar{
width:36px; height:36px; border-radius:50%; background: var(--olive-soft); color: var(--olive-dark);
display:flex; align-items:center; justify-content:center; font-family:var(--display); font-style:italic; font-weight:700; font-size:1rem; flex-shrink:0;
}
.sidebar-foot .who{ flex:1; min-width:0; }
.sidebar-foot .who .n{ font-size:.82rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-foot .who .r{ font-size:.68rem; color: var(--ink-faint); text-transform:capitalize; }
.sidebar-foot button{ background:none; border:none; cursor:pointer; color: var(--ink-faint); padding:6px; border-radius:8px; transition: background .18s ease, color .18s ease; flex-shrink:0; }
.sidebar-foot button:hover{ background: rgba(38,35,32,.06); color: var(--brick); }
/* ---------- Collapsed rail mode ---------- */
.app-sidebar.collapsed{ width:84px; padding-left:14px; padding-right:14px; }
.app-sidebar.collapsed .sidebar-brand span:not(.mark),
.app-sidebar.collapsed .sidebar-primary span,
.app-sidebar.collapsed .sidebar-search,
.app-sidebar.collapsed .sidebar-section-label,
.app-sidebar.collapsed .sidebar-link span:not(.shop-emoji),
.app-sidebar.collapsed .sidebar-link .lock-ic,
.app-sidebar.collapsed .plan-card,
.app-sidebar.collapsed .sidebar-foot .who,
.app-sidebar.collapsed .role-pill{ display:none; }
.app-sidebar.collapsed .sidebar-primary{ width:44px; height:44px; padding:0; border-radius:50%; margin-left:auto; margin-right:auto; }
.app-sidebar.collapsed .sidebar-link{ justify-content:center; padding:10px; }
.app-sidebar.collapsed .sidebar-foot{ justify-content:center; }
.app-sidebar.collapsed .sidebar-brand{ flex-direction:column; gap:10px; }
.app-sidebar.collapsed .sidebar-collapse-btn{ transform: rotate(0deg); margin:0; }
@media (max-width: 980px){ .app-sidebar.collapsed{ width:272px; padding:22px 18px 16px; } }
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 18px 32px;
position:sticky; top:0; z-index:50; background: rgba(244,239,230,.7);
backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom:1px solid var(--line);
}
.app-topbar .tb-title{ font-family:var(--display); font-style:italic; font-size:1.2rem; }
.app-topbar .tb-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tb-icon-btn{
width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background: rgba(255,255,255,.6);
display:flex; align-items:center; justify-content:center; color: var(--ink-soft); cursor:pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tb-icon-btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app-content{ padding: 32px; flex:1; }
@media (max-width: 980px){
.app-sidebar{ position:fixed; left:0; z-index:600; transform: translateX(-104%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
.app-sidebar.open{ transform:none; }
.app-content{ padding: 22px 16px; }
.app-topbar{ padding: 14px 16px; }
#sidebar-toggle{ display:inline-flex !important; }
/* The collapse-to-icon-rail control only makes sense for the desktop pinned
sidebar — on mobile the sidebar is a full overlay drawer instead, so it
swaps for an explicit close button. There's no tap-outside-to-dismiss
backdrop behind the drawer, and the hamburger toggle that opened it sits
underneath the drawer once it's open — without this button there was no
way to close the menu at all on mobile. */
.sidebar-collapse-btn{ display:none; }
.sidebar-mobile-close{ display:flex; }
}
/* ---------- Hero welcome (dashboard Overview) ---------- */
.dash-hero{ text-align:center; max-width:720px; margin: 10px auto 42px; }
.dash-hero .dh-mark{
width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background: linear-gradient(150deg, var(--gold), var(--olive));
display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: 0 16px 34px rgba(22,36,26,.28);
}
.dash-hero h1{ margin-bottom:10px; }
.dash-hero p{ font-size:1rem; }
.quick-launch{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin: 8px 0 40px; }
.ql-card{
display:flex; flex-direction:column; gap:10px; text-align:left; padding:20px; border-radius:16px; cursor:pointer;
background: rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow); transition: box-shadow .3s var(--ease); transform-style: preserve-3d; will-change: transform;
}
.ql-card:hover{ box-shadow: var(--shadow-lg); }
.ql-card .ql-icon{ width:38px; height:38px; border-radius:11px; background: var(--gold-soft); color: var(--gold-dark); display:flex; align-items:center; justify-content:center; }
.ql-card .ql-title{ font-weight:600; font-size:.9rem; color: var(--ink); }
.ql-card .ql-sub{ font-size:.76rem; color: var(--ink-faint); }
/* ---------- Lock / upgrade overlay ---------- */
.upgrade-block{
text-align:center; padding: 64px 32px; border-radius:18px; margin-top:16px;
background: rgba(255,255,255,.6); border:1px dashed var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.upgrade-block .ub-icon{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background: var(--olive-soft); color: var(--olive-dark); display:flex; align-items:center; justify-content:center; }
.upgrade-block h3{ margin-bottom:8px; }
.upgrade-block p{ max-width:420px; margin:0 auto 20px; }
.plan-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; }
.plan-pill.free{ background: var(--paper-deep); color: var(--ink-soft); }
.plan-pill.starter{ background: var(--blue-soft); color: var(--blue); }
.plan-pill.growth{ background: var(--gold-soft); color: var(--gold-dark); }
.plan-pill.pro{ background: linear-gradient(120deg, var(--gold), var(--olive)); color:#fff; }
/* ---------- Pricing cards ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:22px; align-items:stretch; }
.price-card{
display:flex; flex-direction:column; padding: 30px 26px; border-radius:20px; position:relative;
background: rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8);
backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
box-shadow: var(--shadow); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
transform-style: preserve-3d; will-change: transform;
}
.price-card:hover{ box-shadow: var(--shadow-lg); }
.price-card.featured{ background: linear-gradient(165deg, var(--gold-dark), var(--gold)); color:#fff; border-color: transparent; }
.price-card.featured .muted, .price-card.featured p{ color: rgba(244,239,230,.82); }
.price-card.featured .price-card-name, .price-card.featured .price-amt{ color:#fff; }
.price-card.featured .pf-item{ color: rgba(244,239,230,.92); }
.price-card .featured-tag{
position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--olive); color:#fff;
font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:99px; box-shadow: var(--shadow);
}
.price-card-name{ font-family: var(--display); font-style:italic; font-weight:600; font-size:1.3rem; margin-bottom:4px; }
.price-amt{ font-family: var(--display); font-style:italic; font-weight:600; font-size:2.4rem; margin: 10px 0 2px; }
.price-amt span{ font-family: var(--body); font-style:normal; font-weight:500; font-size:.85rem; opacity:.65; }
.price-card ul{ list-style:none; margin: 20px 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-card .pf-item{ display:flex; align-items:flex-start; gap:9px; font-size:.85rem; color: var(--ink-soft); }
.price-card .pf-item .icon{ color: var(--gold); margin-top:2px; flex-shrink:0; }
.price-card.featured .pf-item .icon{ color: var(--olive-light); }
/* ---------- Admin tables / stat rows ---------- */
.admin-stat-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:18px; margin-bottom:32px; }
.role-pill{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:99px; }
.role-pill.owner{ background: var(--gold-soft); color: var(--gold-dark); }
.role-pill.admin{ background: linear-gradient(120deg, var(--gold), var(--olive)); color:#fff; }
.role-pill.driver{ background: var(--blue-soft); color: var(--blue); }
.role-pill.customer{ background: var(--paper-deep); color: var(--ink-soft); }
.sidebar-role-pill{
align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
padding:5px 12px; margin-top:14px; flex-shrink:0;
}