/* ============================================================
   VARDO • ვარდო - wireframe design tokens
   Palette family: espresso brown + peach paper, from the client's image
   presentation (Canva, "vardo"): page #F6E9DB, panels #362D26.
   Rose (ვარდო = rose) is the second accent.
   Radius system: cards / images / inputs = 14px, buttons / chips = pill.
   ============================================================ */
:root{
  color-scheme: light;
  /* peach paper and warm ink, as in the presentation */
  --paper:#F6E9DB; --surface:#FFFBF6; --surface-2:#F1E0CE; --surface-3:#E9D4BF;
  --ink:#241B15; --ink-2:#4F4137; --ink-3:#6B5A4F;
  --line:#E6D3C0; --line-2:#D4BBA3;
  /* primary: the presentation's espresso brown */
  --brand:#3E3129; --brand-hover:#2A211B; --brand-soft:#F0DFCD; --brand-line:#CDB39B;
  --on-brand:#FFFFFF;
  --brand-grad:linear-gradient(135deg,#2A211B 0%,#4A3B31 100%);
  /* secondary accent: rose, for offers, sales and highlights */
  --accent:#A63D4A; --accent-hover:#8E3340; --accent-soft:#FBEAEC; --accent-line:#F0C3C9;
  --on-accent:#FFFFFF;
  --accent-grad:linear-gradient(135deg,#8E3340 0%,#B84D5A 100%);
  --deep:#362D26; --deep-2:#43382F; --on-deep:#F6E9DB; --on-deep-2:#CDB9A6;
  --deep-grad:linear-gradient(118deg,#2B231D 0%,#362D26 58%,#45392F 100%);
  --warn:#966200; --warn-soft:#FDF3DF; --warn-line:#F0DCAB;
  --danger:#C13B28; --danger-soft:#FCEBE7;
  --r-sm:12px; --r:18px; --r-lg:28px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(32,22,12,.06), 0 2px 8px -4px rgba(32,22,12,.10);
  --shadow-2:0 1px 2px rgba(32,22,12,.06), 0 10px 24px -10px rgba(32,22,12,.20), 0 28px 56px -28px rgba(32,22,12,.22);
  --shadow-3:0 24px 70px -20px rgba(32,22,12,.40);
  --lift:0 2px 6px rgba(32,22,12,.08), 0 16px 32px -14px rgba(32,22,12,.26);
  --edge:inset 0 1px 0 rgba(255,255,255,.75);
  --maxw:1320px;
  --nav-h:70px;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#15100C; --surface:#1E1712; --surface-2:#261D17; --surface-3:#30251D;
  --ink:#F3ECE5; --ink-2:#CDBFB2; --ink-3:#A08F80;
  --line:#34291F; --line-2:#45372B;
  --brand:#D9B48C; --brand-hover:#E6C6A2; --brand-soft:#2C2117; --brand-line:#4D3B2B;
  --on-brand:#20140B;
  --brand-grad:linear-gradient(135deg,#C79D72 0%,#E2C29E 100%);
  --accent:#F08F9B; --accent-hover:#F6A8B1; --accent-soft:#2E171A; --accent-line:#52282E;
  --on-accent:#2A0B10;
  --accent-grad:linear-gradient(135deg,#D9707E 0%,#F49DA8 100%);
  --deep:#1A120D; --deep-2:#241911; --on-deep:#F1E9E1; --on-deep-2:#BBA796;
  --deep-grad:linear-gradient(118deg,#140D09 0%,#20160F 58%,#2D1F15 100%);
  --warn:#E7C06A; --warn-soft:#241D0E; --warn-line:#3D3218;
  --danger:#EE9083; --danger-soft:#2A1512;
  --shadow-1:0 1px 2px rgba(0,0,0,.45), 0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-2:0 1px 2px rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.6), 0 28px 56px -28px rgba(0,0,0,.6);
  --shadow-3:0 24px 70px -20px rgba(0,0,0,.75);
  --lift:0 2px 6px rgba(0,0,0,.5), 0 16px 32px -14px rgba(0,0,0,.62);
  --edge:inset 0 1px 0 rgba(255,255,255,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans Georgian","Segoe UI",system-ui,sans-serif;
  font-size:1.0625rem; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.22; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px}
::selection{background:var(--brand-soft); color:var(--ink)}
[hidden]{display:none !important}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:var(--on-brand); padding:12px 20px; border-radius:var(--r-pill)}
.skip:focus{left:16px; top:16px}

/* ---------- type ---------- */
.display{font-size:clamp(2.15rem,1.2rem + 3vw,3.6rem); font-weight:700; line-height:1.07; letter-spacing:-.028em}
.h2{font-size:clamp(1.7rem,1.15rem + 2.1vw,2.7rem); line-height:1.1; letter-spacing:-.022em}
.h3{font-size:clamp(1.2rem,1.02rem + .75vw,1.55rem); line-height:1.22; letter-spacing:-.016em}
.h4{font-size:1.125rem; font-weight:600; line-height:1.34; letter-spacing:-.012em}
.lead{font-size:clamp(1.09rem,1rem + .45vw,1.3rem); line-height:1.47; letter-spacing:-.008em; color:var(--ink-2); max-width:56ch}
.body{color:var(--ink-2)}
.small{font-size:.875rem; line-height:1.6}
.tiny{font-size:.8125rem; line-height:1.55}
.muted{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.mw-65{max-width:65ch}
.mw-52{max-width:52ch}
.w700{font-weight:700}
.w600{font-weight:600}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,7vw,96px) 0}
.sec--tight{padding:clamp(34px,4.5vw,58px) 0}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px,4vw,52px)}
.sec-head .h2{max-width:26ch}
.hr{height:1px; background:var(--line); border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 23px; border-radius:var(--r-pill);
  border:1px solid transparent; background:transparent; cursor:pointer;
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .16s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}
.btn i{font-size:1.15em; line-height:1}
.btn--primary{background:var(--brand); color:var(--on-brand)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--ghost{border-color:var(--line-2); color:var(--ink); background:var(--surface)}
.btn--ghost:hover{border-color:var(--ink-3); background:var(--surface-2)}
.btn--quiet{color:var(--ink-2); padding:0 14px; min-height:40px}
.btn--quiet:hover{background:var(--surface-2); color:var(--ink)}
.btn--deep{background:var(--on-deep); color:var(--deep)}
.btn--deep:hover{background:#fff}
.btn--deep-ghost{border-color:rgba(255,255,255,.34); color:var(--on-deep)}
.btn--deep-ghost:hover{border-color:var(--on-deep); background:rgba(255,255,255,.09)}
.btn--sm{min-height:38px; padding:0 16px; font-size:.875rem}
.btn--xs{min-height:32px; padding:0 12px; font-size:.8125rem; gap:6px}
.btn--danger{color:var(--danger); border-color:var(--line-2); background:var(--surface)}
.btn--danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn--block{width:100%}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn[disabled]:active{transform:none}
.btn.is-busy{pointer-events:none; opacity:.75}
.btn.is-busy i{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none; border:0; padding:0; text-align:left; font-size:.9375rem}
.link:hover{color:var(--brand-hover); text-decoration:underline; text-underline-offset:3px}
.link i{transition:transform .18s}
.link:hover i{transform:translateX(3px)}
.link--deep{color:var(--on-deep)}
.link--deep:hover{color:#fff}
.link--quiet{color:var(--ink-2)}
.link--quiet:hover{color:var(--ink)}

/* ---------- icon button ---------- */
.iconbtn{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-size:1.15rem; transition:background .18s, color .18s, border-color .18s;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.iconbtn.is-on{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand)}

/* ---------- chips ---------- */
.chips{display:flex; gap:9px; flex-wrap:wrap}
.chip{
  min-height:38px; padding:0 17px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:.875rem; font-weight:500; display:inline-flex; align-items:center; gap:7px;
  box-shadow:var(--shadow-1), var(--edge); transition:all .2s;
}
.chip:hover{border-color:var(--line-2); color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-2), var(--edge)}
.chip:active{transform:translateY(0)}
.chip[aria-selected="true"],.chip[aria-pressed="true"]{background:var(--brand-grad); border-color:transparent; color:var(--on-brand); font-weight:600; box-shadow:0 2px 10px -4px rgba(62,49,41,.65)}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:600; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap; box-shadow:var(--edge);
}
.badge--brand{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line)}
.badge--warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.badge--accent{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.badge--today{background:var(--accent-grad); color:#fff; border-color:transparent}

/* ---------- surfaces ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1), var(--edge)}
.pad{padding:clamp(18px,2.4vw,28px)}
.media{border-radius:var(--r); overflow:hidden; background:var(--surface-2); position:relative; box-shadow:var(--shadow-1)}
.media img{width:100%; height:100%; object-fit:cover}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-2{aspect-ratio:3/2}
.ratio-1-1{aspect-ratio:1/1}
.ratio-16-9{aspect-ratio:16/9}
.ratio-5-7{aspect-ratio:5/7}
.zoom img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.zoom:hover img{transform:scale(1.045)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:8px}
.field > label{font-size:.875rem; font-weight:600; color:var(--ink)}
.field .req{color:var(--brand); margin-left:2px}
.input,.select,.textarea{
  width:100%; min-height:46px; padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(32,22,12,.055);
  transition:border-color .18s, box-shadow .18s;
}
.textarea{min-height:118px; resize:vertical; line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--ink-3); opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(62,49,41,.20), inset 0 1px 2px rgba(32,22,12,.055)}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px}
.select--sm{min-height:34px; padding:5px 32px 5px 11px; font-size:.8125rem; background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px}
.help{font-size:.8125rem; color:var(--ink-3)}
.err{font-size:.8125rem; color:var(--danger); font-weight:600; display:none; align-items:center; gap:6px}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.field.is-bad .err{display:flex}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.form-stack{display:flex; flex-direction:column; gap:18px}
.radio-row{display:flex; align-items:flex-start; gap:12px; padding:15px 17px; border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer; background:var(--surface); transition:border-color .18s, background .18s}
.radio-row:hover{border-color:var(--ink-3)}
.radio-row input{margin:5px 0 0; accent-color:var(--brand); width:17px; height:17px; flex:none}
.radio-row.is-on{border-color:var(--brand); background:var(--brand-soft)}
.radio-row .rr-t{font-weight:600; font-size:.9375rem}
.radio-row .rr-d{font-size:.8125rem; color:var(--ink-2)}

/* ---------- stepper ---------- */
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--surface); overflow:hidden}
.stepper button{width:34px; height:34px; border:0; background:transparent; cursor:pointer; color:var(--ink-2); display:grid; place-items:center; font-size:1rem}
.stepper button:hover{background:var(--surface-2); color:var(--ink)}
.stepper output{min-width:30px; text-align:center; font-weight:600; font-size:.9375rem; font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-1), var(--edge)}
table{width:100%; border-collapse:collapse; min-width:620px}
th,td{text-align:left; padding:13px 16px; font-size:.9rem; border-bottom:1px solid var(--line)}
th{font-weight:600; color:var(--ink-2); font-size:.8125rem; background:var(--surface-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr:not(.grp):hover td:first-child{box-shadow:inset 3px 0 0 var(--page-ink)}
tbody td{transition:background .15s}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{font-weight:700; background:var(--surface-2); border-top:1px solid var(--line-2); border-bottom:0}
.empty{padding:48px 24px; text-align:center; color:var(--ink-3); font-size:.9rem}
.empty i{
  font-size:1.5rem; display:grid; place-items:center; width:54px; height:54px; margin:0 auto 14px;
  border-radius:18px; background:rgba(var(--page-rgb),.08); color:var(--page-ink);
  border:1px solid rgba(var(--page-rgb),.18);
}

/* ---------- tabs ---------- */
.tabs{
  display:inline-flex; gap:2px; max-width:100%; padding:3px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; align-self:flex-start;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:9px 17px; border:0; border-radius:9px; background:none; cursor:pointer; white-space:nowrap;
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em; color:var(--ink-2);
  transition:background .2s, color .2s, box-shadow .2s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgba(32,22,12,.12), 0 0 0 .5px rgba(32,22,12,.05);
}
:root[data-theme="dark"] .tab[aria-selected="true"]{box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(20px)}
.reveal.in{opacity:1; transform:none; transition:opacity .62s ease, transform .62s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ============================================================
   LAYOUT
   ============================================================ */

/* ---------- nav (single line at desktop, 70px) ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:var(--paper);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s;
}
@supports (background: color-mix(in srgb, red, blue)){
  .nav{background:color-mix(in srgb, var(--paper) 72%, transparent)}
  .nav.is-stuck{background:color-mix(in srgb, var(--paper) 82%, transparent)}
}
.nav.is-stuck{border-bottom-color:var(--line)}
/* quiet on the landing view, prominent once a direction is chosen */
.nav .brand,.nav .brand-mark,.nav .nav-links a,.nav .nav-cta{transition:color .3s, background .3s, border-color .3s, opacity .3s}
.nav.is-quiet{border-bottom-color:transparent}
.nav.is-quiet .brand{color:var(--ink-2)}
.nav.is-quiet .brand-mark{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.nav.is-quiet .nav-links a{color:var(--ink-3); font-weight:400}
.nav.is-quiet .nav-links a::after{opacity:0}
.nav.is-quiet .nav-cta.btn--primary{background:transparent; color:var(--ink-2); border-color:var(--line)}
.nav.is-quiet .iconbtn{opacity:.6}
.nav.is-quiet:hover,.nav.is-quiet:focus-within{border-bottom-color:var(--line)}
.nav.is-quiet:hover .brand,.nav.is-quiet:focus-within .brand{color:var(--ink)}
.nav.is-quiet:hover .brand-mark,.nav.is-quiet:focus-within .brand-mark{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.nav.is-quiet:hover .nav-links a,.nav.is-quiet:focus-within .nav-links a{color:var(--ink-2); font-weight:500}
.nav.is-quiet:hover .nav-cta.btn--primary,.nav.is-quiet:focus-within .nav-cta.btn--primary{background:var(--brand); color:var(--on-brand); border-color:transparent}
.nav.is-quiet:hover .iconbtn,.nav.is-quiet:focus-within .iconbtn{opacity:1}
.nav-in{height:var(--nav-h); display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; flex:none}
.brand-mark{width:32px; height:32px; border-radius:10px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:1.05rem; flex:none}
/* the client's wordmark (assets/logo-wordmark.png, brown on transparent) */
.brand-logo{height:19px; width:auto; transition:opacity .3s, filter .3s}
:root[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1) sepia(.35) brightness(.94)}
.nav.is-quiet .brand-logo{opacity:.72}
.nav.is-quiet:hover .brand-logo,.nav.is-quiet:focus-within .brand-logo{opacity:1}
.foot .brand-logo{height:22px; filter:brightness(0) invert(1); opacity:.92}
.nav-links{display:flex; align-items:center; gap:clamp(8px,1.4vw,20px); margin-left:auto}
.nav-links a{font-size:.9rem; font-weight:500; color:var(--ink-2); padding:8px 2px; position:relative; white-space:nowrap; transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); border-radius:2px}
.nav-tools{display:flex; align-items:center; gap:8px; flex:none}
.nav-burger{display:none}
@media (max-width:1119px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-cta{display:none}
}
.mobmenu{position:fixed; inset:var(--nav-h) 0 0; z-index:55; background:var(--paper); padding:22px clamp(16px,4vw,40px) 40px; overflow-y:auto; display:none}
.mobmenu.is-open{display:block}
.mobmenu a{display:flex; align-items:center; justify-content:space-between; padding:17px 0; border-bottom:1px solid var(--line); font-size:1.1rem; font-weight:600}
.mobmenu a i{color:var(--ink-3)}
.mobmenu .btn{margin-top:24px}
body.is-locked{overflow:hidden}

/* fine grain over the whole page: breaks the flatness without touching layout */
body::after{
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{opacity:.08}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .textarea{box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){ body::after{opacity:.03} }

/* a quieter band for alternating section rhythm */
.sec--alt{background:var(--surface-2); border-block:1px solid var(--line)}

/* ---------- views ---------- */
/* one tone across the whole site: the brand brown */
[data-view]{display:none; --page-rgb:62,49,41; --page-ink:var(--brand); --page-line:var(--brand-line)}
[data-view].is-active{display:block}

/* ---------- hero: three directions, the first thing on the page ---------- */
/* the three panels stand apart with a gutter between them, per the client's note */
.trihero{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); padding:clamp(12px,1.6vw,24px); min-height:min(88svh,840px)}
.tri{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,2.4vw,36px); border:0; border-radius:var(--r-lg);
  background:var(--deep); color:#fff; cursor:pointer; text-align:left; font:inherit;
  box-shadow:var(--shadow-2); isolation:isolate;
}
.tri img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(.92); transition:transform .85s cubic-bezier(.16,1,.3,1), filter .45s}
/* each panel washes its photo in its own colour: the text stays readable
   whatever the picture behind it, and the three directions read apart */
.tri::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(var(--tint),.34) 0%,
    rgba(var(--tint),.62) 38%,
    rgba(var(--tint),.90) 72%,
    rgba(var(--tint),.98) 100%);
  transition:background .45s;
}
.tri:nth-child(1){--tint:58,36,20}     /* chocolate */
.tri:nth-child(2){--tint:96,34,44}     /* rose */
.tri:nth-child(3){--tint:44,27,12}     /* roasted coffee */
.tri:hover img,.tri:focus-within img{transform:scale(1.06); filter:saturate(1.2) brightness(1)}
.tri:hover::before{
  background:linear-gradient(180deg,
    rgba(var(--tint),.24) 0%,
    rgba(var(--tint),.56) 36%,
    rgba(var(--tint),.88) 72%,
    rgba(var(--tint),.97) 100%);
}
.tri-in{position:relative; display:flex; flex-direction:column; align-items:flex-start; text-shadow:0 1px 20px rgba(0,0,0,.45)}
.tri-k{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FFC79A}
.tri-t{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem); font-weight:700; line-height:1.14; letter-spacing:-.01em; margin-top:12px}
.tri-d{font-size:.875rem; line-height:1.62; color:rgba(255,255,255,.88); margin-top:11px; max-width:33ch}
/* the title is the keyboard way into the page; the button is the panel's call to action */
.tri-t{color:inherit}
.tri-t:hover,.tri-t:focus-visible{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.tri-cta{margin-top:22px; text-shadow:none}
.tri-cta .btn i{transition:transform .25s}
.tri:hover .tri-cta .btn i{transform:translateX(4px)}
.tri-tag{
  position:absolute; top:clamp(18px,2vw,28px); left:clamp(22px,2.4vw,36px);
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:.75rem; font-weight:600; backdrop-filter:blur(6px);
}
@media (max-width:900px){
  .trihero{grid-template-columns:1fr; min-height:0}
  .tri{min-height:52svh}
}

/* ---------- split rows ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,68px); align-items:center}
.split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:900px){ .split,.split--wide-left{grid-template-columns:1fr; gap:30px} }

/* ---------- feature rows (hairline list, no per-row double borders) ---------- */
.rows{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1), var(--edge)}
.rows > li{position:relative; display:flex; gap:15px; padding:17px 20px; transition:background .18s}
.rows > li:hover{background:var(--surface-2)}
.rows > li:not(:last-child)::after{content:""; position:absolute; left:55px; right:0; bottom:0; height:1px; background:var(--line)}
.rows .r-ico{
  color:var(--brand); font-size:1.05rem; flex:none; margin-top:1px;
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--brand-soft);
}
.rows .r-t{font-weight:600; font-size:1rem; letter-spacing:-.01em}
.rows .r-d{font-size:.9rem; color:var(--ink-2); line-height:1.5; margin-top:2px}
/* inside a card the list is already framed, so drop its own chrome */
.card .rows{background:none; border:0; border-radius:0; box-shadow:none}
.card .rows > li{padding-left:0; padding-right:0}
.card .rows > li:hover{background:none}
.card .rows > li:not(:last-child)::after{left:41px}

/* ---------- deep band ---------- */
.band{background:var(--deep-grad); color:var(--on-deep)}
.band .body,.band .lead{color:var(--on-deep-2)}
.band .hr{background:rgba(255,255,255,.14)}
.band-cta{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.band-cta > .stack{flex:1 1 520px}

/* ---------- steps (horizontal scroll-snap) ---------- */
.steps{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:0; overflow-x:auto; scroll-snap-type:x mandatory; border-top:1px solid var(--line)}
.steps > li{scroll-snap-align:start; padding:26px 26px 26px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.steps > li:last-child{border-right:0}
.steps > li:not(:first-child){padding-left:26px}
.steps .s-ico{font-size:1.5rem; color:var(--brand)}
.steps .s-t{font-weight:600; font-size:.9875rem}
.steps .s-d{font-size:.8438rem; color:var(--ink-2); line-height:1.6}

/* ---------- page header (inner views) ---------- */
.phead{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:clamp(26px,3.6vw,44px) 0 clamp(30px,4vw,54px);
}
.phead > .wrap{position:relative}
.phead .display{letter-spacing:-.025em}
/* an offset colour block behind the header photo, for depth without layout risk */
.phead-grid .media{box-shadow:20px 20px 0 -1px rgba(var(--page-rgb),.16), var(--shadow-2)}
@media (max-width:900px){ .phead-grid .media{box-shadow:12px 12px 0 -1px rgba(var(--page-rgb),.16), var(--shadow-2)} }

/* slim header: a single compact line, so the content starts at the top */
.phead--slim{padding:14px 0 0; border-bottom:0}
.phead--slim .crumbs{margin-bottom:0}
.phead--slim .phead-bar{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:6px 0 0}
.phead--slim h1{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); line-height:1.22; letter-spacing:-.016em}
.phead--slim .phead-note{font-size:.9rem; color:var(--ink-3)}

/* image hero: copy on the left, delivery apps on the right */
.imghero{position:relative; overflow:hidden; color:var(--ink); border-bottom:1px solid var(--line); min-height:min(80svh,760px); display:flex; align-items:center}
.imghero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* a light wash, so the photo stays bright and the text stays dark */
.imghero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(255,252,246,.86) 0%, rgba(255,252,246,.76) 40%, rgba(255,252,246,.56) 70%, rgba(255,252,246,.46) 100%),
    linear-gradient(180deg, rgba(255,252,246,.40) 0%, rgba(255,252,246,.08) 45%, rgba(255,252,246,.34) 100%);
}
.imghero-in{
  position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(44px,6vw,92px) 0;
}
.imghero-copy{display:flex; flex-direction:column; gap:14px; align-items:stretch; max-width:44ch}
/* the muted greys sit on a photo here, so they step up one level for contrast */
.imghero .crumbs,.imghero .crumbs button{color:var(--ink-2); margin-bottom:4px}
.imghero .crumbs button:hover{color:var(--brand)}
.imghero-side{display:flex; flex-direction:column; gap:12px}
/* the copy sits on a translucent, frosted panel so it reads on any photo */
.imghero-text{
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding:clamp(20px,2.4vw,30px); border-radius:var(--r-lg);
  background:rgba(255,251,246,.74); border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 14px 40px -20px rgba(32,22,12,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.imghero-text .crumbs{margin-bottom:0}
.imghero-side .side-t{
  align-self:flex-start; padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(255,251,246,.74); border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
:root[data-theme="dark"] .delivery--glass .dlv{background:rgba(30,23,18,.78); border-color:rgba(255,255,255,.08); box-shadow:0 10px 30px -16px rgba(0,0,0,.7)}
:root[data-theme="dark"] .delivery--glass .dlv:hover{background:rgba(30,23,18,.9); border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .imghero-text,
:root[data-theme="dark"] .imghero-side .side-t{background:rgba(30,23,18,.78); border-color:rgba(255,255,255,.08); box-shadow:0 14px 40px -20px rgba(0,0,0,.7)}
.imghero-side .side-t{font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:2px}
@media (max-width:900px){
  .imghero{min-height:0}
  .imghero-in{grid-template-columns:1fr; gap:30px; padding:clamp(34px,7vw,56px) 0}
}
/* light frosted tiles, to match the bright photo behind them */
.delivery--glass{grid-template-columns:1fr; gap:11px}
.delivery--glass .dlv{
  background:rgba(255,255,255,.72); border-color:rgba(255,255,255,.9); color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 10px 30px -16px rgba(32,22,12,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.delivery--glass .dlv:hover{background:rgba(255,255,255,.92); border-color:#fff; transform:scale(1.02)}

/* numbered feature sequence */
.seq{display:grid; gap:0; border-top:1px solid var(--line)}
.seq > li{
  position:relative;
  display:grid; grid-template-columns:minmax(0,88px) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(18px,3vw,48px); align-items:start;
  padding:clamp(26px,3.6vw,44px) 0; border-bottom:1px solid var(--line);
  transition:background .3s;
}
.seq > li:hover{background:var(--surface-2)}
/* the thread running through the steps; each badge masks it where it sits */
.seq > li::before{content:""; position:absolute; left:31px; top:0; bottom:0; width:2px; background:var(--line); z-index:0}
.seq > li:first-child::before{top:clamp(26px,3.6vw,44px)}
.seq > li:last-child::before{bottom:auto; height:calc(clamp(26px,3.6vw,44px) + 32px)}
.seq-n{
  position:relative; z-index:1; width:64px; height:64px; border-radius:20px;
  display:grid; place-items:center; font-size:1.4rem; font-weight:700; letter-spacing:-.03em;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  transition:background .35s cubic-bezier(.16,1,.3,1), color .35s, border-color .35s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.seq > li.in .seq-n{background:var(--brand); color:var(--on-brand); border-color:var(--brand); box-shadow:0 8px 22px -10px rgba(62,49,41,.7)}
.seq > li:hover .seq-n{transform:scale(1.07) rotate(-3deg)}
.seq > li.in .seq-t{transition:color .3s}
.seq > li:hover .seq-t{color:var(--brand)}
.seq-side .badge{transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s}
.seq > li:hover .seq-side .badge{transform:translateX(5px)}
.seq > li:hover .seq-side .badge:nth-child(2){transition-delay:.05s}
@media (max-width:860px){ .seq > li::before{display:none} .seq-n{width:52px; height:52px; border-radius:16px; font-size:1.15rem} }
.seq-t{font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem); font-weight:700; letter-spacing:-.02em; line-height:1.15}
.seq-d{color:var(--ink-2); line-height:1.55; margin-top:10px}
.seq-side{display:flex; flex-direction:column; gap:10px; padding-top:6px}
.seq-side .badge{align-self:flex-start}
@keyframes seqPop{from{transform:scale(.72); opacity:0} to{transform:scale(1); opacity:1}}
.seq > li.in .seq-n{animation:seqPop .55s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i,0) * 90ms + 130ms)}
@media (prefers-reduced-motion:reduce){ .seq > li.in .seq-n{animation:none} .seq > li:hover .seq-n{transform:none} }
@media (max-width:860px){
  .seq > li{grid-template-columns:minmax(0,54px) minmax(0,1fr); gap:16px 18px}
  .seq-side{grid-column:2; padding-top:0}
}

/* story page: an intro that breathes, then a layered photo collage */
.collage{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(14px,1.8vw,22px); align-items:stretch}
.collage-a{border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-2); min-height:100%}
.collage-a img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.16,1,.3,1)}
.collage-a:hover img{transform:scale(1.04)}
.collage-b{display:grid; grid-template-rows:minmax(0,.85fr) auto; gap:clamp(14px,1.8vw,22px); min-width:0}
.collage-b .media{border-radius:var(--r-lg); min-height:160px}
.collage-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,28px); box-shadow:var(--shadow-2), var(--edge);
}
@media (max-width:820px){
  .collage{grid-template-columns:1fr}
  .collage-a{aspect-ratio:4/3; min-height:0}
  .collage-b{grid-template-rows:auto auto}
}
/* the figures, stacked as a small table of facts */
.figlist{display:flex; flex-direction:column}
.figlist > div{display:flex; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.figlist > div:last-child{border-bottom:0}
.figlist dt{
  font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem); font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--brand); font-variant-numeric:tabular-nums; min-width:3.4ch;
}
.figlist dd{margin:0; color:var(--ink-2); line-height:1.45; font-size:.9375rem}

/* eyebrow above the page title */
.kicker{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--page-ink); background:rgba(var(--page-rgb),.09); border:1px solid rgba(var(--page-rgb),.22);
}
.kicker i{font-size:1.15em; letter-spacing:0}

.crumbs{display:flex; align-items:center; gap:9px; font-size:.8125rem; color:var(--ink-3); margin-bottom:20px}
.crumbs button{background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); font-size:inherit}
.crumbs button:hover{color:var(--brand)}
.phead-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(24px,4vw,56px); align-items:end}
.phead-copy{display:flex; flex-direction:column; gap:18px; align-items:flex-start; padding-bottom:8px}
@media (max-width:900px){ .phead-grid{grid-template-columns:1fr} }

/* ---------- info notice ---------- */
.notice{display:flex; gap:14px; align-items:flex-start; padding:16px 20px; border-radius:var(--r); background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--ink)}
.notice i{color:var(--warn); font-size:1.25rem; margin-top:2px; flex:none}
.notice .link{color:var(--warn)}

/* ---------- product / gallery grid ---------- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:clamp(14px,1.6vw,22px)}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1), var(--edge); transition:border-color .22s, box-shadow .28s, transform .28s cubic-bezier(.16,1,.3,1)}
.pcard:hover{border-color:var(--line-2); box-shadow:var(--lift), var(--edge); transform:scale(1.015)}
.pcard-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); border:0; padding:0; cursor:zoom-in; display:block; width:100%}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard-body{padding:16px 17px 17px; display:flex; flex-direction:column; gap:7px; flex:1}
.pcard-name{font-weight:600; font-size:.9875rem; line-height:1.35}
.pcard-desc{font-size:.8125rem; color:var(--ink-2); line-height:1.55}
.pcard-foot{margin-top:auto; padding-top:13px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-weight:700; font-size:.9875rem; font-variant-numeric:tabular-nums}
.price small{font-weight:500; color:var(--ink-3); font-size:.75rem}

/* ---------- sale tag (sits on top of the picture) ---------- */
.saletag{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--accent-grad); color:#fff; font-size:.75rem; font-weight:700;
  font-variant-numeric:tabular-nums; box-shadow:0 3px 14px -2px rgba(226,97,31,.65); letter-spacing:.01em;
}
.saletag i{font-size:.9em}
.price s{color:var(--ink-3); font-weight:500; font-size:.875rem; margin-right:7px}

/* ---------- delivery partners ---------- */
.delivery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.dlv{
  display:flex; align-items:center; gap:14px; padding:17px 19px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1), var(--edge);
  transition:border-color .22s, box-shadow .28s, transform .28s cubic-bezier(.16,1,.3,1);
}
.dlv:hover{border-color:var(--line-2); box-shadow:var(--lift), var(--edge); transform:scale(1.02)}
.dlv-mark{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
  font-weight:800; font-size:1.0625rem; color:#101413; letter-spacing:-.02em;
}
.dlv-n{font-weight:700; font-size:.9875rem}
.dlv-d{font-size:.8125rem; color:var(--ink-3)}
.dlv > i{margin-left:auto; color:var(--ink-3); font-size:1.15rem}
@media (max-width:760px){ .delivery{grid-template-columns:1fr} }

/* ---------- special offers ---------- */
.offers{display:grid; grid-template-columns:repeat(auto-fill,minmax(304px,1fr)); gap:clamp(16px,2vw,24px)}
@media (min-width:720px){
  .ocard--feature{grid-column:span 2}
  .ocard--feature .ocard-media{aspect-ratio:21/9}
  .ocard--feature .ocard-t{font-size:1.45rem; letter-spacing:-.02em}
  .ocard--feature .ocard-d{font-size:.9375rem; max-width:62ch}
  .ocard--feature .ocard-body{padding:24px 26px 26px}
}
.ocard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1), var(--edge); transition:border-color .22s, box-shadow .28s, transform .28s cubic-bezier(.16,1,.3,1)}
.ocard:hover{border-color:var(--line-2); box-shadow:var(--lift), var(--edge); transform:scale(1.012)}
.ocard-media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--surface-2)}
.ocard-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ocard:hover .ocard-media img{transform:scale(1.05)}
.ocard-body{padding:19px 20px 21px; display:flex; flex-direction:column; gap:9px; flex:1}
.ocard-t{font-weight:700; font-size:1.05rem; line-height:1.3}
.ocard-d{font-size:.875rem; color:var(--ink-2); line-height:1.65}
.ocard-f{margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line)}

/* ---------- catering layout: catalog + basket ---------- */
.shop{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:clamp(20px,3vw,40px); align-items:start}
.basket{position:sticky; top:calc(var(--nav-h) + 20px); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-2), var(--edge)}
.basket-head{background:linear-gradient(120deg, rgba(var(--page-rgb),.10) 0%, rgba(var(--page-rgb),0) 70%);padding:17px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px}
.basket-list{max-height:min(46vh,420px); overflow-y:auto}
.bline{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px; padding:13px 20px; border-bottom:1px solid var(--line); align-items:center}
.bline:last-child{border-bottom:0}
.bline img{width:44px; height:44px; border-radius:10px; object-fit:cover}
.bline-n{font-size:.8438rem; font-weight:600; line-height:1.35}
.bline-p{font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.bline-x{background:none; border:0; cursor:pointer; color:var(--ink-3); padding:4px; font-size:1rem}
.bline-x:hover{color:var(--danger)}
.basket-foot{padding:18px 20px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:14px}
.brow{display:flex; align-items:center; justify-content:space-between; font-size:.875rem}
.brow.total{font-size:1.0625rem; font-weight:700}
.basket-fab{display:none}
@media (max-width:1023px){
  .shop{grid-template-columns:1fr}
  .basket{display:none; position:fixed; inset:auto 0 0; border-radius:var(--r) var(--r) 0 0; z-index:70; box-shadow:var(--shadow-3); max-height:82vh; overflow-y:auto; top:auto}
  .basket.is-open{display:block}
  .basket-fab{display:flex; position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:65; box-shadow:var(--shadow-3)}
  .basket-fab:active{transform:translateX(-50%) translateY(1px)}
  /* the cabinet order panel stays in flow on small screens */
  .basket--static{display:block; position:static; max-height:none; border-radius:var(--r); box-shadow:var(--shadow-1); inset:auto; z-index:auto}
}

/* ---------- wizard ---------- */
.wsteps{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-1), var(--edge)}
.wstep{flex:1; padding:14px 18px; display:flex; align-items:center; gap:11px; border-right:1px solid var(--line); font-size:.875rem; color:var(--ink-3); min-width:0}
.wstep:last-child{border-right:0}
.wstep-n{width:25px; height:25px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-2); display:grid; place-items:center; font-size:.75rem; font-weight:700; flex:none}
.wstep.is-on{color:var(--ink); font-weight:600; background:rgba(var(--page-rgb),.09); box-shadow:inset 0 -3px 0 var(--page-ink)}
.wstep.is-on .wstep-n{background:var(--page-ink); color:#fff}
.wstep.is-done .wstep-n{background:rgba(var(--page-rgb),.12); color:var(--page-ink); border:1px solid rgba(var(--page-rgb),.3)}
.wstep-l{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:700px){ .wstep-l{display:none} .wstep{flex:none; justify-content:center} }

/* ---------- success panel ---------- */
.success{text-align:center; padding:clamp(30px,5vw,54px); border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; gap:16px}
.success .s-ico{width:62px; height:62px; border-radius:var(--r-pill); background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-size:1.9rem}
.success .code{font-weight:700; font-size:1.15rem; letter-spacing:.02em; font-variant-numeric:tabular-nums}

/* ---------- logo strip (marks only) ---------- */
.logos{display:flex; align-items:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap; justify-content:center}
.logos svg{height:34px; width:auto; color:var(--ink-3); opacity:.72; transition:opacity .2s, color .2s}
.logos a:hover svg{opacity:1; color:var(--ink-2)}

/* ---------- cabinet ---------- */
.cab-bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px;
  padding:16px clamp(16px,2vw,22px); border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(120deg, rgba(var(--page-rgb),.07) 0%, rgba(var(--page-rgb),0) 55%), var(--surface);
  box-shadow:var(--shadow-1);
}
.cab-who{display:flex; align-items:center; gap:12px}
.cab-av{width:44px; height:44px; border-radius:14px; background:var(--brand-grad); color:var(--on-brand); display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:none; box-shadow:0 3px 12px -4px rgba(62,49,41,.6)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-2), var(--edge)}
.stat{position:relative; padding:20px 22px 22px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; transition:background .22s}
.stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--page-ink), rgba(var(--page-rgb),.2));
  opacity:0; transition:opacity .22s;
}
.stat:hover{background:var(--surface-2)}
.stat:hover::before{opacity:1}
.stat:last-child{border-right:0}
.stat dt{font-size:.75rem; color:var(--ink-3); font-weight:600; letter-spacing:.02em}
.stat dd{margin:0; font-weight:700; font-size:1.45rem; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--brand)}
.stat dd[style]{color:var(--ink)}
@media (max-width:700px){ .stat{border-right:0; border-bottom:1px solid var(--line)} .stat:last-child{border-bottom:0} }
.daytabs{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.daytabs::-webkit-scrollbar{display:none}
.daytab{min-width:96px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:all .18s; flex:none}
.daytab:hover{border-color:var(--line-2)}
.daytab[aria-selected="true"]{border-color:var(--brand); background:var(--brand-soft)}
.daytab .dt-d{font-size:.75rem; color:var(--ink-3)}
.daytab .dt-n{font-weight:600; font-size:.9375rem}
.daytab .dt-s{font-size:.6875rem; color:var(--brand); font-weight:600}
.dishes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}

/* ---------- lunch: fixed menu sets (the employee picks one) ---------- */
.msets{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px}
.mset{
  position:relative; display:flex; flex-direction:column; padding:0; text-align:left; font:inherit;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow-1), var(--edge);
  transition:border-color .22s, box-shadow .28s, transform .28s cubic-bezier(.16,1,.3,1);
}
.mset:hover{border-color:rgba(var(--page-rgb),.5); box-shadow:var(--lift), var(--edge); transform:translateY(-4px)}
.mset.is-on{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand), var(--shadow-2)}
.mset[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.mset-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.mset-media img{width:100%; height:100%; object-fit:cover}
.mset-b{padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.mset-h{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mset-n{font-weight:700; font-size:.9375rem}
.mset-tick{width:22px; height:22px; border-radius:var(--r-pill); border:1px solid var(--line-2); display:grid; place-items:center; font-size:.75rem; color:transparent; flex:none}
.mset.is-on .mset-tick{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.mset-li{display:flex; flex-direction:column; gap:1px; font-size:.8125rem; color:var(--ink-2); line-height:1.6}
.mset-li .mli{position:relative; padding-left:13px}
.mset-li .mli::before{content:""; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:50%; background:var(--line-2)}
.mset-f{margin-top:auto; padding-top:11px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line)}

/* grouped admin tables: delivery date over company */
tbody tr.grp td{font-weight:700; font-size:.8438rem}
tbody tr.grp:hover td{background:inherit}
tbody tr.grp--date td{
  background:var(--surface-3); font-size:.9375rem; color:var(--ink);
  border-top:2px solid var(--brand); padding-top:15px; padding-bottom:15px;
}
tbody tr.grp--date:hover td{background:var(--surface-3)}
tbody tr.grp--date i{color:var(--brand); margin-right:4px}
tbody tr.grp--date .badge{margin-left:9px; vertical-align:1px}
tbody tr.grp--co td{background:var(--surface-2); font-size:.8125rem; color:var(--ink-2); border-top:1px solid var(--line)}
tbody tr.grp--co:hover td{background:var(--surface-2)}
tbody tr.grp--co td:first-child{padding-left:34px}
tbody tr.grp--co i{color:var(--ink-3); margin-right:4px}
tbody tr.grp--sep td{
  background:var(--ink); color:var(--paper); font-size:.8125rem; letter-spacing:.04em;
  border-top:0; text-transform:uppercase;
}
tbody tr.grp--sep:hover td{background:var(--ink)}
tbody tr.grp--sep i{margin-right:6px}
.cutoff{display:inline-flex; align-items:center; gap:7px; font-size:.8125rem; font-weight:600; color:var(--warn)}
.daytab .dt-x{font-size:.6875rem; font-weight:600; color:var(--ink-3)}
.daytab[disabled]{opacity:.5; cursor:not-allowed}
.daytab[disabled]:hover{border-color:var(--line)}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:120; background:rgba(8,14,12,.92); display:none; align-items:center; justify-content:center; padding:clamp(14px,4vw,56px)}
.lb.is-open{display:flex}
.lb-fig{margin:0; max-width:1100px; width:100%; display:flex; flex-direction:column; gap:14px}
.lb-fig img{width:100%; max-height:76vh; object-fit:contain; border-radius:var(--r); background:#0e1412}
.lb-cap{color:#E7EEEA; display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap}
.lb-cap .num{color:#9FB6AC; font-size:.8125rem}
.lb-x{position:absolute; top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); width:44px; height:44px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.09); color:#fff; cursor:pointer; font-size:1.3rem; display:grid; place-items:center}
.lb-x:hover{background:rgba(255,255,255,.2)}
.lb-arrow{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.09); color:#fff; cursor:pointer; font-size:1.35rem; display:grid; place-items:center}
.lb-arrow:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:clamp(8px,1.6vw,22px)} .lb-next{right:clamp(8px,1.6vw,22px)}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:130; display:none; align-items:center; justify-content:center; padding:clamp(14px,4vw,40px); background:rgba(8,14,12,.55); backdrop-filter:blur(3px)}
.modal.is-open{display:flex}
.modal-box{width:100%; max-width:480px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3); max-height:90vh; overflow-y:auto}
.modal-box--wide{max-width:760px}
.modal-head{padding:22px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.modal-body{padding:20px 24px 24px; display:flex; flex-direction:column; gap:18px}
.modal-x{width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-2); display:grid; place-items:center; flex:none}
.modal-x:hover{background:var(--surface-2); color:var(--ink)}
.rolebtns{display:grid; gap:9px}
.rolebtn{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); cursor:pointer; text-align:left; transition:all .18s}
.rolebtn:hover{border-color:var(--brand); background:var(--brand-soft)}
.rolebtn i{font-size:1.3rem; color:var(--brand); flex:none}
.rolebtn .rb-t{font-weight:600; font-size:.9rem}
.rolebtn .rb-d{font-size:.75rem; color:var(--ink-3)}
.orsep{display:flex; align-items:center; gap:14px; color:var(--ink-3); font-size:.8125rem}
.orsep::before,.orsep::after{content:""; flex:1; height:1px; background:var(--line)}
.alert{display:flex; gap:11px; align-items:flex-start; padding:13px 16px; border-radius:var(--r); font-size:.875rem; background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger); font-weight:500}
.alert i{font-size:1.15rem; flex:none}

/* ---------- toast ---------- */
.toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:150; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; width:calc(100% - 32px); max-width:460px}
.toast{background:var(--ink); color:var(--paper); padding:13px 19px; border-radius:var(--r-pill); font-size:.875rem; font-weight:500; box-shadow:var(--shadow-3); display:flex; align-items:center; gap:10px; animation:pop .3s cubic-bezier(.16,1,.3,1)}
.toast i{font-size:1.15rem; flex:none}
.toast.t-ok i{color:#5FD3A9}
.toast.t-info i{color:#8FC3F5}
@keyframes pop{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------- annotation layer ---------- */
[data-note]{position:relative}
.nmark{
  position:absolute; top:-12px; left:-12px; z-index:20; width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper); border:2px solid var(--paper); cursor:help;
  font-size:.6875rem; font-weight:700; display:none; place-items:center; box-shadow:var(--shadow-2);
}
body.notes-on .nmark{display:grid}
body.notes-on [data-note]{outline:1px dashed var(--line-2); outline-offset:5px; border-radius:4px}
.npop{position:fixed; z-index:140; max-width:330px; background:var(--ink); color:var(--paper); padding:14px 16px; border-radius:var(--r); font-size:.8125rem; line-height:1.6; box-shadow:var(--shadow-3); display:none}
.npop.is-open{display:block}
.npop b{display:block; margin-bottom:5px; font-size:.75rem; opacity:.6; font-weight:600}

/* ---------- footer ---------- */
.foot{background:var(--deep-grad); color:var(--on-deep); padding:clamp(46px,6vw,76px) 0 30px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,48px)}
.foot h4{font-size:.8125rem; color:var(--on-deep-2); font-weight:600; margin-bottom:14px}
.foot ul li{margin-bottom:10px}
.foot a,.foot .link-b{font-size:.9rem; color:var(--on-deep); opacity:.86; transition:opacity .18s; background:none; border:0; padding:0; cursor:pointer; text-align:left; font-family:inherit}
.foot a:hover,.foot .link-b:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.foot .brand{color:var(--on-deep); margin-bottom:14px}
.foot .brand-mark{background:var(--on-deep); color:var(--deep)}
.foot-fine{margin-top:clamp(34px,4vw,54px); padding-top:22px; border-top:1px solid rgba(255,255,255,.13); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.75rem; color:var(--on-deep-2)}
.socials{display:flex; gap:9px}
.socials button{width:36px; height:36px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--on-deep); cursor:pointer; display:grid; place-items:center; font-size:1rem}
.socials button:hover{background:rgba(255,255,255,.11)}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

/* ---------- utility ---------- */
/* ---------- catering catalogue: the printed menu, as sections ---------- */
.shop > *{min-width:0}
@media (max-width:640px){
  #catChips,#catSub{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex:1 1 100%; min-width:0; max-width:100%}
  #catChips::-webkit-scrollbar,#catSub::-webkit-scrollbar{display:none}
  #catChips .chip,#catSub .chip{flex:none}
}
/* two-level filter: three buttons first, the categories only under "მენიუ დეტალურად" */
.catfilter{display:flex; flex-direction:column; gap:12px; margin-bottom:24px}
.chips--sub{padding-top:12px; border-top:1px dashed var(--line-2)}
.chips--sub .chip{min-height:34px; padding:0 14px; font-size:.8125rem; box-shadow:none}
.chip .ph-caret-down{transition:transform .2s}
.chip[aria-pressed="true"] .ph-caret-down{transform:rotate(180deg)}
.catlist{display:flex; flex-direction:column; gap:clamp(18px,2vw,26px)}
.catsec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1), var(--edge); padding:clamp(16px,2vw,24px); overflow:hidden}
.catsec-h{display:flex; align-items:center; gap:18px; margin-bottom:14px}
.catsec-media{flex:none; width:clamp(84px,11vw,132px); aspect-ratio:1; border-radius:var(--r); overflow:hidden; border:0; padding:0; cursor:zoom-in; background:var(--surface-2)}
.catsec-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.catsec-media:hover img{transform:scale(1.06)}
.catsec-t{display:flex; flex-direction:column; gap:4px; min-width:0}
.mrows{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); column-gap:clamp(18px,2.4vw,34px)}
.mrow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line)}
.mrow-n{font-size:.9rem; line-height:1.4}
.veg{color:#4F7A3A; font-size:.85em; vertical-align:-1px}
:root[data-theme="dark"] .veg{color:#9CCB7F}
.packs{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:12px}
.pack{display:flex; flex-direction:column; gap:8px; padding:16px 17px; border:1px solid var(--line-2); border-radius:var(--r); background:linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 60%)}
.pack-n{font-size:.975rem; font-weight:600; line-height:1.35}
.pack-d{font-size:.8125rem; color:var(--ink-2); line-height:1.55}
.pack-f{margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line)}
.pack-media{display:block; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--surface-2); margin-bottom:4px}
.pack-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.pack:hover .pack-media img{transform:scale(1.05)}
.pack-n a:hover{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
.pack-g{font-size:.75rem; font-weight:600; color:var(--ink-3)}
.pack .link{font-size:.875rem}

/* ---------- ready menu: its own page ---------- */
.pkd{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.pkd-media{position:sticky; top:calc(var(--nav-h) + 20px); aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-2)}
.pkd-media img{width:100%; height:100%; object-fit:cover}
.pkd-body{display:flex; flex-direction:column; gap:18px; align-items:flex-start; min-width:0}
.pkd-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.pkd-price .price{font-size:1.6rem; letter-spacing:-.02em}
.pkd-inc{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); column-gap:24px; width:100%; border-top:1px solid var(--line)}
.pkd-inc li{position:relative; padding:9px 0 9px 22px; border-bottom:1px dashed var(--line); font-size:.9rem; line-height:1.45}
.pkd-inc li::before{content:""; position:absolute; left:4px; top:1.05em; width:7px; height:7px; border-radius:50%; background:var(--brand-line)}
.pkd-buy{width:100%; display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-1), var(--edge)}
.pkd-buy .stepper button{width:42px; height:42px}
.pkd-buy .field > label{font-size:.8125rem}
@media (max-width:900px){ .pkd{grid-template-columns:1fr} .pkd-media{position:relative; top:auto} }
@media (max-width:560px){ .mrow{grid-template-columns:minmax(0,1fr) auto; row-gap:6px} .mrow .stepper,.mrow .btn{grid-column:2} }

/* ---------- lunch: menu cards can be chosen several times ---------- */
.mset{cursor:default}
.mset-media{border:0; padding:0; display:block; width:100%; cursor:pointer}
.mset-media[disabled]{cursor:not-allowed}
.mset.is-locked{transform:none}
.mset.is-locked:not(.is-on){opacity:.55}
.mset.is-locked:hover{transform:none}
.mset-f .stepper button{width:30px; height:30px}
.daytab--we{border-style:dashed}
.infocard{display:flex; gap:14px; align-items:flex-start; padding:15px 19px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.infocard > i{color:var(--brand); font-size:1.25rem; margin-top:2px; flex:none}
.gap-4{gap:4px}

/* ---------- admin: compact inputs, dish library, catering editor ---------- */
.input--sm{min-height:34px; padding:5px 10px; font-size:.8125rem; border-radius:10px}
td .input--sm{width:100%; min-width:90px}
td.num .input--sm{max-width:96px; margin-left:auto; text-align:right}
.input--title{min-height:38px; padding:6px 11px; font-weight:600; font-size:.95rem}
.dlib{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:18px}
.dlib-h{font-size:.8125rem; font-weight:700; color:var(--ink-2); padding-bottom:6px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.dlib-r{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line)}
.dlib-r .btn{flex:none}
.catadm{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(16px,2vw,24px); align-items:start}
@media (max-width:900px){ .catadm{grid-template-columns:1fr} }
.catpick{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 13px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; font:inherit; color:inherit}
.catpick:hover{border-color:var(--line-2)}
.catpick.is-on{border-color:var(--brand); background:var(--brand-soft)}
.catadm-add{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto auto; gap:12px; align-items:end}
@media (max-width:900px){ .catadm-add{grid-template-columns:1fr 1fr} }
.checkrow{display:flex; align-items:center; gap:8px; font-size:.875rem; min-height:46px; cursor:pointer}
.checkrow input,td input[type="checkbox"]{accent-color:var(--brand); width:17px; height:17px}

/* ---------- lunch page: what it is, one day, who pays ---------- */
.lnav{display:flex; flex-wrap:wrap; gap:6px 18px; padding-top:4px}
.lnav button{background:none; border:0; padding:4px 0; cursor:pointer; font:inherit; font-size:.875rem; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; border-bottom:1px dashed var(--line-2)}
.lnav button:hover{color:var(--brand); border-bottom-color:var(--brand)}


/* a day as a timeline: phases on top, one card per step, arrows between; colour = who acts */
.dphases{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; margin-bottom:6px}
.dph{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line-2); font-size:.8125rem; font-weight:700; color:var(--ink-2); box-shadow:var(--shadow-1)}
.dph i{font-size:1.05rem; color:var(--brand)}
.dph::after{content:""; position:absolute; left:8%; right:8%; top:calc(100% + 4px); height:9px; border:2px solid var(--line-2); border-top:0; border-radius:0 0 10px 10px}
.dayflow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px}
.dayflow li{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:16px 16px 20px; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--df);
  border-radius:var(--r); box-shadow:var(--shadow-1), var(--edge);
  --df:var(--brand); --df-soft:var(--brand-soft);
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s;
}
.dayflow li:hover{transform:translateY(-4px); box-shadow:var(--lift), var(--edge)}
.dayflow li.df--emp{--df:var(--accent); --df-soft:var(--accent-soft)}
.dayflow li.df--co{--df:var(--warn); --df-soft:var(--warn-soft)}
.df-head{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%}
.df-n{font-size:1.65rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--df); opacity:.32; font-variant-numeric:tabular-nums}
.df-who{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill); font-size:.6875rem; font-weight:700; color:var(--df); background:var(--df-soft); white-space:nowrap}
.df-ico{width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:1.75rem; color:var(--surface); background:var(--df); box-shadow:0 10px 22px -12px var(--df)}
.df-time{display:inline-flex; padding:3px 11px; border-radius:var(--r-pill); font-size:.8125rem; font-weight:700; color:var(--df); border:1px solid var(--df); font-variant-numeric:tabular-nums}
.df-time--big{font-size:1rem; padding:3px 13px}
.df-ph{display:none}
.df-t{font-weight:700; font-size:1rem; line-height:1.3}
.df-d{font-size:.84rem; color:var(--ink-2); line-height:1.55}
.df-arrow{position:absolute; right:-28px; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); font-size:.95rem}
@media (max-width:980px){
  .dphases{display:none}
  .df-ph{display:inline; margin-right:.3em}
  .dayflow{grid-template-columns:1fr; gap:30px}
  .dayflow li{display:grid; grid-template-columns:60px minmax(0,1fr); column-gap:16px; row-gap:6px; align-items:start}
  .dayflow li .df-head{grid-column:1 / -1}
  .dayflow li .df-ico{grid-column:1; grid-row:2 / span 3}
  .dayflow li .df-time,.dayflow li .df-t,.dayflow li .df-d{grid-column:2; justify-self:start}
  .df-arrow{right:auto; top:auto; left:50%; bottom:-28px; transform:translateX(-50%) rotate(90deg)}
}

/* lunch header: title and links left, the partnership button right, on the first screen */
.lhead{display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap}
.lcta{position:relative; min-height:54px; padding:0 10px 0 24px; font-size:1rem; font-weight:600; box-shadow:0 14px 30px -14px rgba(62,49,41,.8)}
.lcta > i{font-size:1.3rem}
.lcta-a{width:36px; height:36px; margin-left:6px; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(255,255,255,.16); transition:transform .25s}
:root[data-theme="dark"] .lcta-a{background:rgba(0,0,0,.14)}
.lcta:hover .lcta-a{transform:translateX(4px)}
.lcta::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:jumpPulse 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){ .lcta::after{animation:none} }
@media (max-width:640px){ .lcta{width:100%; justify-content:space-between} }

/* payment schemes: each card shows the split of one box as a bar */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px)}
@media (max-width:900px){ .plans{grid-template-columns:1fr} }
.plan{position:relative; display:flex; flex-direction:column; gap:16px; padding:0 0 clamp(18px,2vw,24px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1), var(--edge); overflow:hidden; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s}
.plan:hover{transform:translateY(-4px); box-shadow:var(--lift), var(--edge)}
.plan > :not(.plan-top){margin-left:clamp(18px,2vw,24px); margin-right:clamp(18px,2vw,24px)}
/* the top of each card is a band in the colour of whoever pays most */
.plan-top{display:flex; align-items:center; gap:12px; padding:16px clamp(18px,2vw,24px); color:#fff; background:var(--plan-band)}
.plan--1{--plan-band:var(--accent-grad)}
.plan--2{--plan-band:var(--brand-grad)}
.plan--3{--plan-band:linear-gradient(110deg,#2A211B 0%,#4A3B31 55%,#8E3340 100%)}
:root[data-theme="dark"] .plan-top{color:#1B120C}
:root[data-theme="dark"] .plan--3{--plan-band:linear-gradient(110deg,#C79D72 0%,#E2C29E 50%,#F49DA8 100%)}
.plan-n{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); flex:none}
:root[data-theme="dark"] .plan-n{background:rgba(0,0,0,.12); border-color:rgba(0,0,0,.2)}
.plan-t{font-size:1.125rem; font-weight:700; line-height:1.3}
.plan-vis{display:grid; grid-template-columns:128px minmax(0,1fr); gap:18px; align-items:center}
.donut{width:128px; height:128px; display:block}
.donut .d-em{fill:none; stroke:var(--accent); stroke-width:16; opacity:.85}
.donut .d-co{fill:none; stroke:var(--brand); stroke-width:16; stroke-linecap:butt; transition:stroke-dasharray .8s cubic-bezier(.16,1,.3,1)}
.payers{display:flex; flex-direction:column; gap:8px}
.payer{display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2)}
.payer i{grid-row:1 / span 2; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1.05rem}
.payer span{font-size:.75rem; color:var(--ink-3); font-weight:600}
.payer b{font-size:1.15rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15}
.payer--co i{background:var(--brand); color:var(--on-brand)}
.payer--em i{background:var(--accent); color:var(--on-accent)}
.payer.is-zero{opacity:.5}
.payer.is-zero b{font-weight:600}
.plan-d{font-size:.875rem; color:var(--ink-2); line-height:1.55}
.plan-ex{font-size:.75rem; color:var(--ink-3); margin-top:-6px}
.plan-legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8125rem; color:var(--ink-2)}
.plan-legend span{display:inline-flex; align-items:center; gap:7px}
.plan-legend i{width:12px; height:12px; border-radius:4px; display:inline-block}
@media (max-width:380px){ .plan-vis{grid-template-columns:1fr; justify-items:center} .payers{width:100%} }

/* ---------- blocks taken from the Canva presentation ---------- */
.usp{display:grid; gap:10px; margin:6px 0 4px; max-width:58ch}
.usp li{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-radius:var(--r); background:var(--deep); color:var(--on-deep)}
.usp-t{font-weight:700; font-size:.9375rem}
.usp-d{font-size:.8125rem; color:var(--on-deep-2); line-height:1.55}
.about-lead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:start}
@media (max-width:900px){ .about-lead{grid-template-columns:1fr} }

.stack{display:flex; flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}
.row{display:flex; align-items:center}
.row-w{display:flex; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.mt-auto{margin-top:auto}
.center{text-align:center}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- boulangerie: animated jump to the request form ---------- */
.jumpbtn{position:relative; padding-right:8px; box-shadow:0 10px 26px -12px rgba(62,49,41,.75)}
.jumpbtn-a{width:32px; height:32px; margin-left:4px; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(255,255,255,.16)}
:root[data-theme="dark"] .jumpbtn-a{background:rgba(0,0,0,.14)}
.jumpbtn-a i{animation:jumpBob 1.6s cubic-bezier(.45,0,.55,1) infinite}
.jumpbtn::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(62,49,41,.45); animation:jumpPulse 2.4s ease-out infinite; pointer-events:none}
.jumpbtn:hover .jumpbtn-a i{animation-duration:.8s}
@keyframes jumpBob{0%,100%{transform:translateY(-3px)} 50%{transform:translateY(4px)}}
@keyframes jumpPulse{0%{box-shadow:0 0 0 0 rgba(62,49,41,.42)} 70%,100%{box-shadow:0 0 0 14px rgba(62,49,41,0)}}
@media (prefers-reduced-motion:reduce){ .jumpbtn-a i,.jumpbtn::after{animation:none} }

/* ---------- request cart in the top menu ---------- */
.navcart{position:relative}
.navcart-btn{position:relative}
.navcart-n{
  position:absolute; top:-5px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--on-brand); border:2px solid var(--paper);
  font-size:.6875rem; font-weight:700; line-height:1; display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.nav.is-quiet .navcart-btn.has-items{opacity:1}
.navcart-pop{position:absolute; top:calc(100% + 12px); right:0; z-index:80; width:350px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3); overflow:hidden}
.navcart-pop .basket-list{max-height:min(46vh,340px)}
@media (max-width:560px){ .navcart-pop{position:fixed; top:calc(var(--nav-h) + 6px); left:12px; right:12px; width:auto} }
/* four tools and the wordmark share one line on a phone */
@media (max-width:480px){
  .nav-in{gap:10px}
  .nav .brand-logo{height:14px}
  .nav-tools{gap:6px}
  .nav-tools .iconbtn{width:36px; height:36px; font-size:1.05rem}
}

/* ---------- catering request: service format with an estimated price ---------- */
.radio-row .rr-p{display:inline-block; margin-top:7px; font-size:.8125rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.radio-row .rr-p small{font-weight:500; color:var(--ink-3); margin-left:4px; font-size:inherit}
.estimate{display:flex; flex-direction:column; gap:9px; padding:16px 18px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line)}

/* ---------- admin: unread counter, request page, dish categories, delivery fee ---------- */
.tabcount{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:7px; border-radius:var(--r-pill);
  background:#D63B2B; color:#fff; font-size:.6875rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; vertical-align:1px;
}
tbody tr.is-click{cursor:pointer}
.reqd{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(16px,2vw,24px); align-items:start}
@media (max-width:1000px){ .reqd{grid-template-columns:1fr} }
.kv{display:grid; grid-template-columns:minmax(118px,max-content) minmax(0,1fr); margin:0}
.kv dt,.kv dd{padding:9px 0; border-bottom:1px solid var(--line); font-size:.875rem}
.kv dt{color:var(--ink-3); padding-right:18px}
.kv dd{margin:0; font-weight:500; min-width:0; overflow-wrap:anywhere}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}
.rlog li{position:relative; padding:0 0 14px 22px; font-size:.8125rem; line-height:1.5}
.rlog li::before{content:""; position:absolute; left:3px; top:.42em; width:9px; height:9px; border-radius:50%; background:var(--brand)}
.rlog li::after{content:""; position:absolute; left:7px; top:1.35em; bottom:0; width:1px; background:var(--line-2)}
.rlog li:last-child{padding-bottom:0}
.rlog li:last-child::after{display:none}
.dcats{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:10px}
.dcat{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.dcat .input--sm{flex:1; min-width:0}
.dlib-r .select--sm{max-width:138px; flex:none}
.feecell{display:flex; gap:6px; justify-content:flex-end; align-items:center}
td.num .feecell .input--sm{max-width:84px; margin-left:0}
.feecell .select--sm{width:auto}

/* ---------- print (invoice) ---------- */
@media print{
  body{background:#fff}
  .nav,.foot,.toasts,.basket-fab,.npop,.nmark{display:none !important}
  body::after{display:none !important}          /* the grain overlay must not print */
  .stat::before{display:none !important}
  .modal:not(.is-open){display:none !important}
  .modal.is-open{position:static; padding:0; background:none; display:block; backdrop-filter:none}
  .modal-box{box-shadow:none; border:0; max-width:none; max-height:none}
  .modal-x,.no-print{display:none !important}
}