:root{
  --peacock:#0B2430;
  --peacock-2:#123B4C;
  --paper:#FFF6E9;
  --paper-2:#F6E9D5;
  --marigold:#F5A524;
  --chili:#D93A2B;
  --cardamom:#5E8C4E;
  --ink:#1A1512;
  --muted:#6B6157;
  --line:#E2D3BC;

  /* text that sits on top of the accent colour */
  --accent-ink:#2A1B00;
  /* soft light behind the hero */
  --hero-glow:#1B4C5F;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Karla',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;

  --wrap:1180px;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marigold);margin:0 0 10px
}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
h2{font-size:clamp(30px,4.4vw,46px)}
h3{font-size:22px;letter-spacing:-.01em}
.lead{color:var(--muted);max-width:56ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:13px 24px;
  font-weight:700;font-size:15px;text-decoration:none;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--marigold);color:var(--accent-ink)}
.btn--chili{background:var(--chili);color:#fff}
.btn--dark{background:var(--peacock);color:var(--paper)}
.btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- Offline notice ---------- */
.offline{
  background:var(--chili);color:#fff;font-size:14px;font-weight:700;
  padding:10px 20px;text-align:center
}

/* ---------- Topbar ---------- */
.topbar{background:var(--peacock-2);color:var(--paper);font-size:13.5px}
.topbar .wrap{display:flex;gap:22px;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar a{text-decoration:none;opacity:.9}
.topbar a:hover{opacity:1;text-decoration:underline}
.topbar .spacer{margin-left:auto}
.lang{display:flex;gap:2px;background:rgba(255,246,233,.12);border-radius:999px;padding:3px}
.lang button{
  border:0;background:none;color:var(--paper);opacity:.7;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  padding:4px 11px;border-radius:999px
}
.lang button[aria-pressed="true"]{background:var(--marigold);color:var(--accent-ink);opacity:1;font-weight:700}

/* ---------- Header ---------- */
/* Phone, address, language and the navigation stay put while the page scrolls */
.topstack{position:sticky;top:0;z-index:60}

header.site{
  position:relative;background:var(--peacock);color:var(--paper);
  border-bottom:1px solid rgba(255,246,233,.1)
}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand .mark{
  width:40px;height:40px;border-radius:11px;background:var(--marigold);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;
  color:var(--accent-ink);font-size:20px;flex:none
}
.brand .logo-img{height:46px;width:auto;max-width:190px;object-fit:contain;flex:none;border-radius:8px}
.brand b{font-family:var(--display);font-size:19px;letter-spacing:-.02em;display:block;line-height:1.1}
.brand-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;opacity:.7;text-transform:uppercase;background:none;padding:0;border-radius:0}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{text-decoration:none;font-size:15px;font-weight:500;opacity:.85}
nav.main a:hover{opacity:1;color:var(--marigold)}
.cart-btn{position:relative;background:rgba(255,246,233,.12);color:var(--paper);border-radius:999px;padding:11px 20px;border:0;font-weight:700;font-size:15px}
.cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--chili);color:#fff;
  min-width:22px;height:22px;border-radius:999px;font-family:var(--mono);font-size:11px;
  display:grid;place-items:center;padding:0 5px
}
.burger{display:none;background:none;border:0;color:var(--paper);font-size:26px;line-height:1;padding:6px}

/* ---------- Admin bar ---------- */

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(120% 90% at 85% 0%, var(--hero-glow) 0%, transparent 60%), var(--peacock);
  color:var(--paper);padding:64px 0 76px;position:relative;overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:34px;background:var(--paper);
  clip-path:polygon(0 100%,100% 0,100% 100%)
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(24px,4cqw,48px)
}

/* The hero sizes itself from its own column rather than from the window, so a
   scaled-up display shows a smaller version of the same thing instead of
   full-size type crammed into a narrower space. The vw values come first as a
   fallback for browsers without container queries. */
.hero .wrap{container-type:inline-size}

.hero h1{font-size:clamp(38px,5.6vw,66px);margin:0 0 18px}
.hero h1{font-size:clamp(32px,6cqw,66px)}
.hero h1 em{font-style:normal;color:var(--marigold)}

.hero p.lead{color:rgba(255,246,233,.78);font-size:18px}
.hero p.lead{font-size:clamp(15.5px,1.7cqw,18px)}

.hero .eyebrow{font-size:clamp(11px,1.1cqw,12px)}

.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(18px,2.4cqw,26px)}
.badge{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,246,233,.28);border-radius:999px;padding:7px 13px
}

/* ---------- Hero side carousels ----------
   The hero is laid out as three columns: rail, text, rail. Each rail holds its
   own space rather than floating over the middle, so it can never cover the
   words however narrow the window becomes — the text column gives way instead.
   Below tablet width the rails step aside and the text takes the full width. */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;            /* the three sit together, centred */
  gap:clamp(14px,2vw,40px);
  /* A margin the rails can never eat into. Without it the text column simply
     absorbs any spare width and the rails end up flat against the window edge,
     which is what happens on a scaled-up display. */
  padding-inline:clamp(20px,4.5vw,90px)
}
.hero-rail--left{order:1}
/* margin:0 auto on .wrap would eat the free space in a flex row and push the
   rails to the window edges, so it is cancelled here */
.hero .wrap{
  order:2;flex:0 1 var(--wrap);max-width:var(--wrap);
  margin-inline:0;                  /* auto margins would push the rails apart */
  padding-inline:0                  /* the hero already provides the margin */
}
.hero-rail--right{order:3}
.hero-rail{flex:0 0 auto}            /* a rail keeps its size; the text yields */

.hero-rail{
  position:relative;                 /* the pictures sit inside it */
  pointer-events:none;               /* decoration: never intercepts a tap */
  width:clamp(116px,13vw,260px);aspect-ratio:3 / 4;   /* scales with the window */
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  background:color-mix(in srgb,var(--peacock-2) 60%,#000)
}
.hero-rail img,.hero-rail video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease
}
.hero-rail img.on,.hero-rail video.on{opacity:1}

/* Phones and small tablets: no room beside the text, so the rails stand down */
@media (max-width:820px){
  .hero{display:block}
  .hero-rail{display:none}
}

@media (prefers-reduced-motion:reduce){ .hero-rail img,.hero-rail video{transition:none} }

/* ---------- Delivery radar ---------- */
.radar{
  container-type:inline-size;
  background:var(--paper);color:var(--ink);border-radius:20px;padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);transition:box-shadow .3s ease
}
.radar.nudge{box-shadow:0 0 0 4px var(--marigold), 0 24px 60px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){ .radar{transition:none} }
.radar h3{margin-bottom:4px}
.radar .hint{font-size:14px;color:var(--muted);margin:0 0 18px}
.toggle{display:flex;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:16px}
.toggle button{flex:1;border:0;background:none;padding:10px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--peacock);color:var(--paper)}
.plz-row{display:flex;gap:8px}
.plz-row input{
  flex:1;font-family:var(--mono);font-size:17px;letter-spacing:.1em;
  padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;min-width:0
}
.plz-row input:focus{border-color:var(--peacock);outline:none}
.plz-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{font-family:var(--mono);font-size:12.5px;padding:5px 10px;border-radius:8px;background:var(--paper-2);color:var(--muted);border:1px solid transparent;transition:.15s}
.chip.on{background:var(--cardamom);color:#fff;border-color:var(--cardamom)}
.radar-msg{margin-top:14px;font-size:14.5px;font-weight:700;display:none;border-radius:10px;padding:11px 13px}
.radar-msg.ok{display:block;background:color-mix(in srgb,var(--cardamom) 16%,transparent);color:color-mix(in srgb,var(--cardamom) 72%,#000)}
.radar-msg.no{display:block;background:color-mix(in srgb,var(--chili) 13%,transparent);color:color-mix(in srgb,var(--chili) 88%,#000)}

/* ---------- Sections ---------- */
section{padding:72px 0}
.sec-head{margin-bottom:34px}
.sec-head p{margin:12px 0 0}

.hours{background:var(--paper-2)}
.hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.hours-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hours-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 12px;border-bottom:1px solid var(--line);font-size:15.5px}
.hours-list li.today{background:#fff;border-radius:8px;font-weight:700}
.hours-list .d{font-weight:700}
.hours-list .t{font-family:var(--mono);font-size:13.5px;text-align:right;color:var(--muted)}
.hours-list li.today .t{color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;background:#fff;border-radius:999px;padding:9px 17px;margin-bottom:18px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--cardamom)}
.dot.closed{background:var(--chili)}
.note{background:var(--peacock);color:var(--paper);border-radius:var(--r);padding:24px;margin-top:22px}
.note h4{font-family:var(--display);font-size:18px;margin:0 0 10px;color:var(--marigold)}
.note p{margin:0 0 6px;font-size:15px;color:rgba(255,246,233,.82)}

.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:26px;scrollbar-width:thin}
.tabs button{white-space:nowrap;border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:9px 17px;font-weight:700;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--peacock);border-color:var(--peacock);color:var(--paper)}
.tabs button[disabled]{opacity:.38;cursor:not-allowed}
.tabs button em{
  font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7;margin-left:2px
}

/* dish-type filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 26px}
.mfilter{
  border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;transition:.15s
}
.mfilter::before{
  content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.55;flex:none
}
.mfilter[data-type=""]::before{display:none}
.mfilter:hover{border-color:var(--muted);color:var(--ink)}
.mfilter[aria-pressed="true"]{background:var(--peacock);border-color:var(--peacock);color:var(--paper)}
.mfilter--vegan,.mfilter--vegetarian{color:color-mix(in srgb,var(--cardamom) 78%,#000)}
.mfilter--halal{color:color-mix(in srgb,var(--cardamom) 62%,#000)}
.mfilter--meat{color:var(--muted)}
.mfilter[aria-pressed="true"]::before{opacity:1;background:var(--marigold)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:14px}

/* A card is a square photo beside the text, so more dishes fit on screen */
.dish{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;gap:16px;align-items:flex-start
}
.dish--photo{padding:14px}
.dish-img{
  width:132px;height:132px;flex:none;object-fit:cover;border-radius:12px;
  background:var(--paper-2)
}
.dish-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0
}
.dish-body .tag{align-self:center}

/* type, spice and the Add button share the last line */
.dish-foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  width:100%;margin-top:2px
}
.dish-foot .add{margin-left:auto}
.dish .price{margin-top:2px}
.dish h4{font-family:var(--display);font-size:17px;margin:0;letter-spacing:-.01em;line-height:1.25}
.dish .price{font-family:var(--mono);font-weight:700;font-size:16px;white-space:nowrap}
.dish p{margin:0;font-size:14px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.tags{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.tag{border-radius:6px;padding:3px 7px;background:var(--paper-2);color:var(--muted)}
.tag.veg{background:color-mix(in srgb,var(--cardamom) 18%,transparent);color:color-mix(in srgb,var(--cardamom) 72%,#000)}
.tag.hot{background:color-mix(in srgb,var(--chili) 13%,transparent);color:color-mix(in srgb,var(--chili) 88%,#000)}
.tag.halal{background:color-mix(in srgb,var(--cardamom) 12%,transparent);color:color-mix(in srgb,var(--cardamom) 80%,#000)}
.tag.meat{background:var(--paper-2);color:var(--muted)}
.tag.spice-mild{background:color-mix(in srgb,var(--cardamom) 12%,transparent);color:color-mix(in srgb,var(--cardamom) 75%,#000)}
.tag.spice-medium{background:color-mix(in srgb,var(--marigold) 20%,transparent);color:color-mix(in srgb,var(--marigold) 58%,#000)}
.tag.spice-hot{background:color-mix(in srgb,var(--chili) 13%,transparent);color:color-mix(in srgb,var(--chili) 88%,#000)}
.tag.spice-veryhot{background:var(--chili);color:#fff}
.dish .add{align-self:center;background:var(--peacock);color:var(--paper);border:0;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px}
.dish .add:hover{background:var(--peacock-2)}

.usp{background:var(--peacock);color:var(--paper)}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usp-card{border:1px solid rgba(255,246,233,.16);border-radius:var(--r);padding:26px}
.usp-card .num{font-family:var(--mono);font-size:12px;color:var(--marigold);letter-spacing:.14em}
.usp-card h3{margin:12px 0 8px;font-size:20px}
.usp-card p{margin:0;font-size:15px;color:rgba(255,246,233,.75)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--body);font-size:15.5px;background:#fff;color:var(--ink)
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--peacock);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field-note{
  background:color-mix(in srgb,var(--marigold) 16%,transparent);
  color:color-mix(in srgb,var(--marigold) 58%,#000);
  border-radius:10px;padding:10px 12px;margin:-6px 0 14px;
  font-size:13px;line-height:1.45;font-weight:700
}
.field-note span{display:block;font-weight:400;margin-top:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:16px 0}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--peacock)}
.err{color:var(--chili);font-size:13.5px;font-weight:700;margin-top:8px;display:none}
.err.show{display:block}
.ok-msg{background:color-mix(in srgb,var(--cardamom) 16%,transparent);color:color-mix(in srgb,var(--cardamom) 72%,#000);border-radius:10px;padding:13px;font-weight:700;font-size:14.5px;margin-top:14px;display:none}
.ok-msg.show{display:block}
.info-list{list-style:none;padding:0;margin:0 0 24px}
.info-list li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;overflow-wrap:anywhere}
.info-list b{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:110px;flex:none;padding-top:3px}
.map{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:260px;
  background:var(--paper-2);display:grid;place-items:center;position:relative
}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-consent{text-align:center;padding:22px;max-width:420px}
.map-address{font-weight:700;font-size:15px;margin:0 0 8px;line-height:1.4}
.map-note{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.map-consent .link-btn{display:inline-block;margin-top:10px;font-size:13px}

footer{background:var(--peacock);color:rgba(255,246,233,.75);padding:56px 0 26px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--display);color:var(--paper);font-size:17px;margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:5px 0;overflow-wrap:anywhere}
footer a{text-decoration:none}
footer a:hover{color:var(--marigold)}
.socials{margin-top:24px}
.socials-label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.6;margin-bottom:10px
}
.socials-row{display:flex;gap:10px}
.social{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,246,233,.1);color:var(--paper);
  transition:background .15s, transform .12s, color .15s
}
.social svg{width:21px;height:21px;display:block}
.social:hover{background:var(--marigold);color:var(--accent-ink);transform:translateY(-2px)}

/* compact variant for the top bar */
.socials-top{gap:4px}
.social--sm{width:30px;height:30px;border-radius:8px;background:transparent;opacity:.8}
.social--sm svg{width:16px;height:16px}
.social--sm:hover{background:rgba(255,246,233,.14);color:var(--marigold);opacity:1;transform:none}
.foot-bottom{border-top:1px solid rgba(255,246,233,.14);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
.foot-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .admin-link{opacity:.45}
.foot-bottom .admin-link:hover{opacity:1}

/* ---------- Added-to-basket confirmation ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:125;background:var(--peacock);color:var(--paper);
  border-radius:999px;padding:13px 22px;font-size:14.5px;font-weight:700;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);
  opacity:0;transition:opacity .22s ease, transform .22s ease;pointer-events:none
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast--info{background:var(--marigold);color:var(--accent-ink)}
.toast--info .tick{background:var(--accent-ink);color:var(--marigold)}
.toast .tick{
  width:20px;height:20px;border-radius:50%;background:var(--cardamom);color:#fff;
  display:grid;place-items:center;font-size:12px;flex:none
}
.toast .what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-open{
  background:none;border:0;color:var(--marigold);font-weight:700;font-size:13.5px;
  text-decoration:underline;padding:0 0 0 4px;white-space:nowrap
}
.toast.show{pointer-events:auto}

/* a small nudge on the basket so the count is noticed */
.cart-btn.bump{animation:bump .32s ease}
@keyframes bump{
  0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:none}
  .cart-btn.bump{animation:none}
}
@media (max-width:640px){
  .toast{bottom:auto;top:calc(100% - 100vh + 108px);font-size:13.5px;padding:11px 18px}
}

/* ---------- Notes on basket and bill lines ---------- */
.line-note{flex:0 0 100%;grid-column:1 / -1;margin-top:2px}
.note-add{
  background:none;border:0;padding:0;font-size:12.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px
}
.note-add:hover{color:var(--ink)}
.note-edit{display:flex;gap:8px;align-items:center}
.note-input{
  flex:1;min-width:0;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;
  font-size:13px;background:#fff;color:var(--ink)
}
.note-saved{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.note-saved em,.item-note{
  font-style:normal;background:color-mix(in srgb,var(--marigold) 20%,transparent);
  border-radius:5px;padding:2px 8px;font-size:12.5px;overflow-wrap:anywhere
}
.btn--sm{padding:7px 14px;font-size:12.5px;min-height:0}

.cart-note{margin-bottom:12px}
.cart-note label{
  display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px
}
.cart-note textarea{
  width:100%;min-height:64px;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:10px;font-size:13.5px;background:#fff;color:var(--ink);resize:vertical
}

/* ---------- Cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(11,36,48,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);
  z-index:100;transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25)
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:21px}
.x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);padding:4px 8px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.empty{text-align:center;color:var(--muted);padding:50px 10px;font-size:15px}
.line{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line .nm{flex:1;font-size:15px;font-weight:700;line-height:1.3}
.line .nm small{display:block;font-weight:400;color:var(--muted);font-family:var(--mono);font-size:12px;margin-top:3px}
.qty{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.qty button{width:28px;height:28px;border:0;background:none;border-radius:50%;font-size:17px;font-weight:700;color:var(--peacock);line-height:1}
.qty button:hover{background:var(--paper-2)}
.qty span{font-family:var(--mono);font-size:14px;min-width:20px;text-align:center}
.line .lp{font-family:var(--mono);font-size:14.5px;font-weight:700;min-width:62px;text-align:right}
.drawer-foot{border-top:1px solid var(--line);padding:20px 22px;background:var(--paper-2)}
.sum{display:flex;justify-content:space-between;font-size:14.5px;padding:4px 0;color:var(--muted)}
.sum.total{font-size:19px;font-weight:700;color:var(--ink);font-family:var(--display);padding-top:10px;margin-top:6px;border-top:1px solid var(--line)}
.sum span:last-child{font-family:var(--mono)}
.warn{background:color-mix(in srgb,var(--marigold) 20%,transparent);color:color-mix(in srgb,var(--marigold) 55%,#000);border-radius:10px;padding:11px;font-size:13.5px;font-weight:700;margin-bottom:14px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:20px;background:rgba(11,36,48,.65);overflow-y:auto}
.modal.open{display:grid}

/* These open on top of the full-screen settings window, which sits last in the
   DOM and would otherwise paint over them */
#tabModal{z-index:130}
#payModal{z-index:140}
#unlockModal{z-index:150}
.modal-card{background:var(--paper);border-radius:20px;width:min(560px,100%);padding:0 30px 30px;max-height:92vh;overflow-y:auto}
.modal-card h3{font-size:26px;margin-bottom:6px}
.modal-card>p{color:var(--muted);font-size:15px;margin:0 0 22px}
.modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  position:sticky;top:0;z-index:3;background:var(--paper);
  margin:0 0 18px;padding:26px 0 14px;
  border-bottom:1px solid transparent
}
/* a rule appears only once there is text scrolled underneath it */
.modal-card.scrolled .modal-head{border-bottom-color:var(--line)}
.modal-head .x{position:sticky;top:0}
.ref{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.06em}

/* ---------- small utilities (kept out of style attributes for CSP) ---------- */
.u-plain{text-decoration:none}
.u-mt10{margin-top:10px}
.u-mt14{margin-top:14px}
.u-mt16{margin-top:16px}
.u-mt22{margin-top:22px}
.u-mb6{margin-bottom:6px}
.u-narrow{margin:0;max-width:38ch}
.u-on-dark{color:var(--paper)}
.u-start{align-self:flex-start}
.u-onecol{grid-template-columns:1fr}

.modal-card--sm{width:min(420px,100%)}
.modal-card--wide{width:min(820px,100%)}

/* ---------- Admin: table service ---------- */
.tab-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:18px}
.tab-dish{
  border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;
  text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px
}
.tab-dish:hover{border-color:var(--peacock)}
.tab-dish b{font-size:13.5px;font-weight:700;line-height:1.25}
.tab-dish span{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.tab-dish em{
  font-style:normal;font-family:var(--mono);font-size:11px;background:var(--peacock);
  color:var(--paper);border-radius:999px;padding:2px 7px
}
.tab-bill{background:var(--paper-2);border-radius:var(--r);padding:14px;margin-bottom:14px}
.tab-bill h4{font-size:14px;margin:0 0 10px}
.split-ask{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 10px;
  border-bottom:1px solid var(--line);margin-bottom:8px
}
.split-people{display:flex;align-items:center;gap:8px}
.split-people label{font-size:13px;color:var(--muted)}
.split-people input{
  width:64px;padding:7px 9px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:13.5px;background:#fff;color:var(--ink)
}
.unit-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line)
}
.unit-line--paid{opacity:.5}
.unit-line--paid .nm{text-decoration:line-through}
.unit-paid{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cardamom) 80%,#000);white-space:nowrap
}
/* ---------- Splitting a bill: one card per person ---------- */
#tabPerPerson{display:flex;flex-direction:column;gap:8px;margin-top:14px}

.person-share{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 14px
}
.person-share > div{flex:1;min-width:0}
.person-share b{display:block;font-size:14px}
.person-share em{
  display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.person-share .share-total{
  font-family:var(--mono);font-weight:700;font-size:15px;white-space:nowrap
}

/* the person the button will settle next */
/* still to pay */
.person-share--owing{
  background:color-mix(in srgb,var(--chili) 10%,#fff);
  border-color:color-mix(in srgb,var(--chili) 32%,var(--line))
}
.person-share--owing .share-total{color:color-mix(in srgb,var(--chili) 78%,#000)}

/* the person the button will settle next */
.person-share--next{border-color:color-mix(in srgb,var(--chili) 55%,var(--line))}

/* already paid */
.person-share--paid{
  background:color-mix(in srgb,var(--cardamom) 14%,#fff);
  border-color:color-mix(in srgb,var(--cardamom) 34%,var(--line))
}
.person-share--paid em{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cardamom) 78%,#000)
}
.person-share--paid em::before{content:"✓";font-family:var(--sans);font-size:13px}
.person-share--paid .share-total{color:var(--muted)}
.unit-line .nm{font-size:13.5px;overflow-wrap:anywhere}
.unit-line .lp{font-family:var(--mono);font-size:13px;min-width:60px;text-align:right}
.unit-line select.unset{border-color:var(--marigold);background:color-mix(in srgb,var(--marigold) 12%,#fff)}
.assign-left{
  font-size:13px;font-weight:700;margin:8px 0 0;
  color:color-mix(in srgb,var(--chili) 80%,#000)
}
.unit-line select{
  padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;
  background:#fff;color:var(--ink)
}
.person-totals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
  margin:12px 0 4px
}
.person-total{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px
}
.person-total b{display:block;font-size:13px}
.person-total span{font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.person-total em{
  font-style:normal;display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  line-height:1.35;overflow-wrap:anywhere
}
.tab-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)
}
.tab-line .line-note{grid-column:1 / -1;margin-top:2px}
.tab-line:last-child{border-bottom:0}
.tab-line .nm{flex:1;font-size:14px}
.tab-line .lp{font-family:var(--mono);font-size:13.5px;min-width:64px;text-align:right}
.tab-empty{font-size:13.5px;color:var(--muted);padding:8px 0}
.pay-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.pay-grid .btn{padding:16px 8px;font-size:14px}
.occ-total{font-family:var(--mono);font-size:13px;color:var(--ink);display:block;margin-top:6px}
@media (max-width:640px){ .pay-grid{grid-template-columns:1fr} }
.u-w240{max-width:240px}

/* ---------- Booking: notice, code, self-cancel ---------- */
.notice{
  background:color-mix(in srgb,var(--marigold) 18%,transparent);
  color:color-mix(in srgb,var(--marigold) 55%,#000);
  border-radius:10px;padding:12px 14px;font-size:13.5px;font-weight:700;
  margin:0 0 14px;line-height:1.45
}
.found{
  border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;
  margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap
}
.found b{display:block;font-size:14.5px}
.found span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.found .btn{padding:8px 16px;font-size:13.5px}
.found--seated{opacity:.7}
.link-btn{
  background:none;border:0;padding:0;color:var(--muted);font-size:14px;
  text-decoration:underline;font-weight:700
}
.link-btn:hover{color:var(--ink)}
#cancelBox{margin-top:14px}


/* ---------- Booking: live availability ---------- */
.avail{
  border-radius:12px;padding:13px 15px;margin:0 0 14px;font-size:14px;
  background:var(--paper-2);border:1px solid var(--line)
}
.avail-title{font-weight:700;display:block;margin-bottom:8px}
.avail-list{display:flex;flex-wrap:wrap;gap:6px}
.avail-chip{
  font-family:var(--mono);font-size:12.5px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;color:var(--ink)
}
.avail-chip em{font-style:normal;color:var(--muted);font-size:11px;margin-left:4px}
.avail--none{background:color-mix(in srgb,var(--chili) 9%,transparent);border-color:transparent}
.avail--none .avail-title{color:color-mix(in srgb,var(--chili) 85%,#000)}
.avail--ok{background:color-mix(in srgb,var(--cardamom) 12%,transparent);border-color:transparent}
.avail--ok .avail-title{color:color-mix(in srgb,var(--cardamom) 72%,#000)}

/* ---------- Customer order tracking ---------- */
.track-or{
  text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:4px 0 14px;position:relative
}
.track-card{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:16px;margin-top:16px
}
.track-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.track-head b{font-family:var(--mono);font-size:15px}
.track-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.track-steps li{
  display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);
  padding:9px 0;position:relative
}
.track-steps li span{
  width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:#fff;
  flex:none;position:relative;z-index:1
}
/* the line joining the dots */
.track-steps li:not(:last-child)::before{
  content:"";position:absolute;left:6px;top:50%;bottom:-50%;width:2px;background:var(--line)
}
.track-steps li.on{color:var(--ink)}
.track-steps li.on span{border-color:var(--cardamom);background:var(--cardamom)}
.track-steps li.on:not(:last-child)::before{background:var(--cardamom)}
.track-steps li.now{font-weight:700}
.track-steps li.now span{box-shadow:0 0 0 4px color-mix(in srgb,var(--cardamom) 22%,transparent)}

/* ---------- Admin: split payment and report ---------- */
.split-row{
  display:grid;grid-template-columns:minmax(0,1fr) 96px auto;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)
}
.split-row:last-of-type{border-bottom:0}
.split-row label{font-size:13.5px;font-weight:700}
.split-items{
  display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);
  margin-top:2px;line-height:1.35;overflow-wrap:anywhere
}
.split-row input{
  padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:14px;background:#fff;color:var(--ink);min-width:0;width:100%
}
.split-row select{
  padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;
  background:#fff;color:var(--ink)
}
#splitRemaining.ok{color:color-mix(in srgb,var(--cardamom) 75%,#000)}
#splitRemaining.off{color:var(--chili)}

.report-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
/* The report's own header block: the range, then its filters. It does not use
   the menu's .filters rule, which pulls itself up under a heading. */
.report-range{
  font-size:13px;font-weight:700;color:var(--muted);
  margin:14px 0 0;padding:9px 12px;border-radius:9px;
  background:color-mix(in srgb,var(--peacock) 7%,transparent)
}
.report-range[hidden]{display:none}

.report-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px
}
.report-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0 20px
}
.stat{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px}
.stat b{display:block;font-family:var(--display);font-size:22px;line-height:1.1}
.stat span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:6px
}
.report-card{
  border:1px solid var(--line);border-left:4px solid var(--cardamom);border-radius:12px;
  background:#fff;padding:14px;margin-bottom:10px
}
.report-card--open{border-left-color:var(--marigold)}
.report-card--delivery{border-left-color:var(--peacock-2)}
.report-card--reservation{border-left-color:var(--chili)}
.report-card--void{opacity:.5}
.report-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.kind-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:4px 9px;background:var(--paper-2);color:var(--muted);white-space:nowrap
}
.kind-badge--delivery{background:color-mix(in srgb,var(--peacock-2) 14%,transparent);color:var(--peacock-2)}
.kind-badge--reservation{background:color-mix(in srgb,var(--chili) 12%,transparent);color:color-mix(in srgb,var(--chili) 85%,#000)}
.stat--wide{grid-column:span 2;background:var(--peacock);border-color:var(--peacock)}
.stat--wide b{color:var(--paper);font-size:26px}
.stat--wide span{color:rgba(255,246,233,.7)}
@media (max-width:640px){ .stat--wide{grid-column:span 2} }
.report-items{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.report-booking{
  font-size:12.5px;margin:8px 0 0;color:color-mix(in srgb,var(--chili) 80%,#000);
  font-weight:700
}
.paid-items{
  display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px
}
.report-parts{
  margin:10px 0 0;padding:10px 12px;background:var(--paper-2);border-radius:8px;
  font-size:13px;display:flex;flex-direction:column;gap:4px
}
.report-parts div{display:flex;justify-content:space-between;gap:12px}
.report-parts .lp{font-family:var(--mono)}

/* ---------- Kitchen tickets ---------- */
#ticketList{display:flex;flex-direction:column;gap:10px}
.ticket{
  border:1px solid var(--line);border-left:4px solid var(--marigold);border-radius:12px;
  background:#fff;padding:14px
}
.ticket--accepted{border-left-color:var(--peacock-2)}
.ticket--preparing{border-left-color:var(--chili)}
.ticket--ready{border-left-color:var(--cardamom)}
.ticket--done{border-left-color:var(--line);opacity:.6}
.ticket-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ticket-items li{font-size:14.5px;line-height:1.4}
.ticket-items b{font-family:var(--mono)}
.stage-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.save-status{
  font-size:12.5px;font-weight:700;margin:10px 0 0;color:var(--muted)
}
.save-status--ok{color:color-mix(in srgb,var(--cardamom) 75%,#000)}
.save-status--warn{color:var(--chili)}

.delivery-eta{
  margin:12px 0 0;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:700;
  line-height:1.45;
  background:color-mix(in srgb,var(--cardamom) 16%,transparent);
  color:color-mix(in srgb,var(--cardamom) 80%,#000)
}
.pay-blocked{
  font-size:13px;font-weight:700;margin:0 0 10px;padding:9px 12px;border-radius:9px;
  background:color-mix(in srgb,var(--marigold) 18%,transparent);
  color:color-mix(in srgb,var(--marigold) 60%,#000)
}

/* the customer's comment for the whole order, kept prominent */
.order-note{
  margin:10px 0 0;padding:10px 12px;border-radius:9px;font-size:13.5px;line-height:1.45;
  background:color-mix(in srgb,var(--marigold) 22%,transparent);
  color:color-mix(in srgb,var(--marigold) 62%,#000);overflow-wrap:anywhere
}
.order-note b{color:inherit}

.ticket-progress{
  background:var(--paper-2);border-radius:var(--r);padding:12px 14px;margin-bottom:14px
}
.ticket-progress h4{font-size:13px;margin:0 0 8px}
.tp-row{padding:9px 0;border-bottom:1px solid var(--line)}
.tp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tp-items{
  list-style:none;margin:6px 0 0;padding:0 0 0 2px;
  display:flex;flex-direction:column;gap:3px
}
.tp-items li{font-size:13px;line-height:1.4;color:var(--ink)}
.tp-items b{font-family:var(--mono);font-size:12.5px}
.tp-row:last-child{border-bottom:0}
.tp-round{font-size:13px;font-weight:700;min-width:88px}
.tp-deliver{margin-top:8px}
.tp-deliver[disabled]{opacity:.45}
.tp-wait{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.tp-round em{display:block;font-style:normal;font-weight:400;font-family:var(--mono);font-size:11px;color:var(--muted)}
.tp-steps{display:flex;gap:6px;flex-wrap:wrap}
.tp-step{
  font-size:11.5px;border-radius:999px;padding:4px 10px;
  background:#fff;border:1px solid var(--line);color:var(--muted)
}
.tp-step.on{
  background:color-mix(in srgb,var(--cardamom) 16%,transparent);
  border-color:transparent;color:color-mix(in srgb,var(--cardamom) 75%,#000)
}
.tp-step.now{background:var(--peacock);border-color:var(--peacock);color:var(--paper);font-weight:700}

/* ---------- Admin: website texts ---------- */
#copyEditor{margin-top:18px}
.copy-group{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:14px 16px;margin-bottom:12px
}
.copy-group .sub-h{margin-bottom:12px}
.copy-group textarea{min-height:64px}
.copy-group input::placeholder,.copy-group textarea::placeholder{color:var(--muted);opacity:.75}

/* ---------- Admin: team and access ---------- */
#roleList{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.role-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px}
.pane-picks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px;margin:10px 0
}
.pane-pick{display:flex;align-items:center;gap:7px;font-size:13px}
.pane-pick input{width:15px;height:15px;accent-color:var(--peacock);flex:none}

#userList{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.user-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px
}
.user-row > div:first-child{flex:1;min-width:150px}
.user-row b{display:block;font-size:14.5px}
.user-row select{
  padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;background:#fff
}
.link-btn.danger{color:var(--chili)}
.newuser{border:1.5px dashed var(--line);border-radius:12px;padding:16px}

/* ---------- Admin: enquiries ---------- */
#enquiryList{display:flex;flex-direction:column;gap:10px}
.enquiry{
  border:1px solid var(--line);border-left:4px solid var(--marigold);border-radius:12px;
  background:#fff;padding:14px
}
.enquiry--done{border-left-color:var(--line);opacity:.62}
.enquiry-body{
  font-size:14.5px;line-height:1.55;margin:10px 0 0;white-space:pre-wrap;
  overflow-wrap:anywhere;background:var(--paper-2);border-radius:8px;padding:10px 12px
}
.enquiry .occ-actions .btn{flex:0 0 auto}

/* ---------- Admin: order cards ---------- */
.ordercard{
  border:1px solid var(--line);border-left:4px solid var(--marigold);border-radius:12px;
  background:#fff;padding:14px
}
.ordercard--accepted{border-left-color:var(--peacock-2)}
.ordercard--preparing{border-left-color:var(--chili)}
.ordercard--ready{border-left-color:var(--cardamom)}
.ordercard--delivering{border-left-color:var(--peacock)}
.ordercard--delivered{border-left-color:var(--line);opacity:.65}
.ordercard--cancelled{border-left-color:var(--line);opacity:.5}
.ordercard-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}
.ordercard-top b{font-family:var(--mono);font-size:14.5px;display:block}
.ordermeta{font-size:13px;color:var(--muted);display:block;margin-top:2px;overflow-wrap:anywhere}
.orderitems{font-size:14px;margin:8px 0 0;line-height:1.45}

.orderflow{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.stage{
  flex:1 1 auto;min-width:120px;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:9px 12px;font-size:12.5px;font-weight:700;min-height:40px;
  transition:.15s
}
.stage:hover{border-color:var(--muted);color:var(--ink)}
.stage--done{background:color-mix(in srgb,var(--cardamom) 14%,transparent);border-color:transparent;color:color-mix(in srgb,var(--cardamom) 75%,#000)}
.stage--now{background:var(--peacock);border-color:var(--peacock);color:var(--paper)}
.stage[disabled]{opacity:.45;cursor:not-allowed}
.order-locked{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  font-size:12.5px;color:var(--muted)
}
.order-locked .link-btn{font-size:12.5px}

/* ---------- Legal texts ---------- */
.legal-input{min-height:200px;font-size:14px;line-height:1.55;resize:vertical}
.char-count{
  display:block;text-align:right;font-family:var(--mono);font-size:11px;
  color:var(--muted);margin-top:4px
}
.char-count.near{color:color-mix(in srgb,var(--chili) 85%,#000)}
.legal-body{
  white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--ink);
  overflow-wrap:anywhere
}
.legal-body .empty{padding:30px 0}

/* ---------- Admin: carousels ---------- */
.sub-h{font-family:var(--display);font-size:14px;margin:0 0 10px;letter-spacing:-.01em}
.carousel-grid{display:grid;grid-template-columns:repeat(auto-fill,120px);gap:10px}
.cimg{
  position:relative;aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2)
}
.cimg img,.cimg video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.cimg .kind{
  position:absolute;bottom:4px;right:4px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;background:rgba(0,0,0,.6);color:#fff;border-radius:5px;padding:2px 6px
}
.cimg button{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;border:0;font-size:15px;line-height:1;
  display:grid;place-items:center
}
.cimg .pos{
  position:absolute;bottom:4px;left:4px;font-family:var(--mono);font-size:10px;
  background:rgba(0,0,0,.55);color:#fff;border-radius:5px;padding:2px 6px
}
.carousel-empty{
  grid-column:1 / -1;font-size:13px;color:var(--muted);padding:14px;
  border:1.5px dashed var(--line);border-radius:10px;text-align:center
}

/* ---------- Admin: tables ---------- */
.trow{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  display:grid;grid-template-columns:1fr 90px 1fr auto;gap:10px;align-items:end
}
.trow .mfield-label{margin-bottom:3px}
.trow input,.trow select{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;
  font-size:14px;background:#fff;color:var(--ink);min-width:0
}

.occ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px}
.occ{
  border:1px solid var(--line);border-left:4px solid var(--cardamom);border-radius:12px;
  background:#fff;padding:12px;min-height:96px
}
.occ--busy{border-left-color:var(--chili);background:color-mix(in srgb,var(--chili) 5%,#fff)}
.occ--seated{border-left-color:var(--peacock);background:color-mix(in srgb,var(--peacock) 5%,#fff)}
.occ--seated .occ-state{color:var(--peacock)}
.occ--booked{border-left-color:var(--chili)}

/* a table with food waiting on the pass */
.occ--ready{
  border-left-color:var(--cardamom);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cardamom) 45%,transparent)
}
.occ-ready{
  font-size:13px;font-weight:700;margin:6px 0 0;padding:5px 9px;border-radius:8px;
  background:color-mix(in srgb,var(--cardamom) 18%,transparent);
  color:color-mix(in srgb,var(--cardamom) 78%,#000)
}
.occ-ready--bar{
  background:color-mix(in srgb,var(--peacock-2) 16%,transparent);
  color:color-mix(in srgb,var(--peacock-2) 85%,#000)
}
.occ-cooking{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.occ--booked .occ-state{color:color-mix(in srgb,var(--chili) 85%,#000)}
.occ-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.occ-actions .btn{flex:1;min-width:96px;padding:7px 10px;font-size:12.5px}
.occ-no{font-family:var(--display);font-weight:800;font-size:17px;display:block}
.occ-seats{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-top:2px}
.occ-state{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cardamom) 72%,#000);display:block;margin-top:10px
}
.occ--busy .occ-state{color:color-mix(in srgb,var(--chili) 85%,#000)}
.occ-guest{font-size:14px;font-weight:700;margin:8px 0 0;line-height:1.3}
.occ-detail{font-size:12.5px;color:var(--muted);margin:3px 0 0;overflow-wrap:anywhere}


.res-table{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.res-table label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.res-table select{
  padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;
  background:#fff;color:var(--ink);min-width:150px
}
.res-table .warn-seats{font-size:12.5px;color:color-mix(in srgb,var(--marigold) 55%,#000);font-weight:700}

/* ---------- Admin: menu editor ---------- */
.msub{margin-bottom:14px}
.msub-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:8px
}
.msub-list{display:flex;flex-wrap:wrap;gap:6px}
.msub-list button{
  border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;
  padding:8px 14px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;
  min-height:40px
}
.msub-list button:hover{border-color:var(--muted);color:var(--ink)}
.msub-list button[aria-pressed="true"]{background:var(--peacock);border-color:var(--peacock);color:var(--paper)}
.msub-list button em{
  font-style:normal;font-family:var(--mono);font-size:11px;opacity:.65;
  background:rgba(0,0,0,.08);border-radius:20px;padding:1px 6px
}
.msub-list button[aria-pressed="true"] em{background:rgba(255,255,255,.2)}

.msec{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:14px;overflow:hidden}
.msec-head{
  display:flex;align-items:center;gap:8px;padding:12px;background:var(--paper-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap
}
.msec-head input{
  flex:1 1 160px;min-width:0;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:8px;font-size:14px;font-weight:700;background:#fff;color:var(--ink)
}
.msec-tools{display:flex;gap:2px;margin-left:auto}
.icon-btn{
  background:none;border:0;width:36px;height:36px;border-radius:8px;color:var(--muted);
  font-size:16px;line-height:1;display:grid;place-items:center
}
.icon-btn:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.icon-btn.danger:hover{background:color-mix(in srgb,var(--chili) 14%,transparent);color:var(--chili)}
.msec-bar{margin:0 0 12px;font-size:13px;color:var(--muted)}
.msec-body{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px;align-items:start}
.msec-body > .btn{grid-column:1 / -1;justify-self:start}

.mitem{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:96px 1fr;gap:12px}
.mitem-img{
  width:96px;height:96px;border-radius:10px;border:1.5px dashed var(--line);
  background:var(--paper-2);display:grid;place-items:center;overflow:hidden;position:relative;cursor:pointer
}
.mitem-img img{width:100%;height:100%;object-fit:cover}
.mitem-img span{font-size:10.5px;color:var(--muted);text-align:center;padding:4px;line-height:1.3}
.mitem-img .rm{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:0;font-size:14px;line-height:1;display:grid;place-items:center
}
.mitem-fields{display:flex;flex-direction:column;gap:8px;min-width:0}
.mitem input,.mitem select,.mitem textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--body);font-size:14px;background:#fff;color:var(--ink);min-width:0
}
.mitem textarea{min-height:56px;resize:vertical}
.mitem-meta{display:grid;grid-template-columns:96px 1fr 1fr auto;gap:8px;align-items:end}
.mitem-hot{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.mitem-hot input{width:16px;height:16px;flex:none;accent-color:var(--peacock)}
.mfield-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ---------- Admin: full-window settings ---------- */
.modal--full{padding:0;place-items:stretch}
.admin-shell{
  background:var(--paper);width:100%;height:100%;
  display:grid;grid-template-columns:264px 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "nav body" "foot foot"
}
.admin-who{display:flex;align-items:center;gap:12px;flex:none}
.admin-who #whoAmI{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap
}
@media (max-width:640px){
  .admin-who #whoAmI{display:none}
}

.admin-top{
  grid-area:top;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 26px;border-bottom:1px solid var(--line);background:var(--paper)
}
.admin-top h3{font-size:22px;margin:0}
.admin-top p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}

.admin-nav{
  grid-area:nav;border-right:1px solid var(--line);background:var(--paper-2);
  padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto
}
.admin-nav button{
  border:0;background:none;text-align:left;padding:11px 14px;border-radius:10px;
  font-size:14.5px;font-weight:700;color:var(--muted);min-height:44px;
  display:flex;align-items:center;gap:8px;
  white-space:nowrap                    /* label and badge stay on one line */
}
.admin-nav button:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.admin-nav button{position:relative}
.admin-nav button[aria-selected="true"]{background:var(--peacock);color:var(--paper)}

/* ---------- Notification badges ---------- */
.nav-badge{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--chili);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;
  flex:none;margin-left:auto            /* pinned to the right of its row */
}
@media (max-width:900px){
  .nav-badge{min-width:17px;height:17px;font-size:10px;padding:0 5px}
  .admin-nav button .nav-badge{margin-left:0}
}


.admin-body{grid-area:body;overflow-y:auto;padding:26px;-webkit-overflow-scrolling:touch}
.admin-pane{max-width:760px}
.admin-pane--wide{max-width:1280px}

/* Blocks of form fields stay at a readable width inside a wide pane */
.pane-form{max-width:720px}
.admin-pane h4{font-family:var(--display);font-size:16px;margin:0 0 6px}
.pane-hint{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}

.admin-foot{
  grid-area:foot;border-top:1px solid var(--line);background:var(--paper-2);
  padding:14px 26px;display:flex;align-items:center;gap:16px
}
.admin-foot-msg{flex:1;min-width:0}
.admin-foot-msg .err,.admin-foot-msg .ok-msg{margin:0}
.admin-foot .btn{min-width:160px}

@media (max-width:900px){
  .admin-shell{
    grid-template-columns:1fr;
    /* four areas need four row sizes: only the body should take the slack */
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"top" "nav" "body" "foot"
  }
  .admin-top{padding:16px 18px}
  .admin-top h3{font-size:19px}
  .admin-top p{display:none}
  .admin-nav{
    flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--line);
    padding:10px 12px;gap:6px;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* a soft edge, so it is obvious there are more tabs to the right */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)
  }
  .admin-nav button{
    white-space:nowrap;padding:10px 12px;font-size:13.5px;flex:none;
    scroll-snap-align:center
  }
  .admin-body{padding:18px}
  .admin-foot{padding:12px 18px;gap:12px}
  .admin-foot .btn{min-width:0;flex:1}
}

/* ---------- Admin panel ---------- */
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;background:#fff;transition:.15s}
.drop.over{border-color:var(--marigold);background:color-mix(in srgb,var(--marigold) 7%,var(--paper))}
.drop p{margin:0 0 12px;font-size:14px;color:var(--muted)}
.logo-preview{background:var(--peacock);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--paper)}
.logo-preview img{height:46px;width:auto;max-width:190px;object-fit:contain;border-radius:8px}
.logo-preview .none{font-family:var(--mono);font-size:12px;opacity:.7}
.admin-note{background:color-mix(in srgb,var(--marigold) 18%,transparent);border-radius:10px;padding:13px;font-size:13px;color:color-mix(in srgb,var(--marigold) 55%,#000);margin:18px 0 0;line-height:1.5}
.divider{border:0;border-top:1px solid var(--line);margin:24px 0}
.hours-editor{display:flex;flex-direction:column;gap:8px}

/* Card-style editors flow into columns on wide screens */
#zoneEditor{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;align-items:start
}
#zoneEditor .trow{grid-template-columns:minmax(0,1fr) 74px auto;gap:8px}
#zoneEditor .trow > div{min-width:0}
#zoneEditor input[data-f="plz"]{font-family:var(--mono);letter-spacing:.06em}
#tableEditor{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:10px;align-items:start
}
#hoursEditor,#holidayEditor{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
  gap:12px;align-items:start
}
.hrow{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:10px;min-width:0
}
.hrow-head{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap
}
.hrow-day{font-weight:700;font-size:14.5px}
.hrow-closed{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.hrow-closed input{width:16px;height:16px;accent-color:var(--peacock);flex:none}

.hrow-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;min-width:0}
.hslot{display:flex;align-items:center;gap:6px;min-width:0}
.hslot label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex:none;width:auto;min-width:46px
}
.hslot input{
  flex:1 1 0;min-width:0;width:100%;padding:8px 6px;border:1.5px solid var(--line);
  border-radius:8px;font-family:var(--mono);font-size:13px;background:#fff;color:var(--ink)
}
.hrow.is-closed .hrow-times{opacity:.35;pointer-events:none}

.hrow-meta{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;
  gap:8px;align-items:center;min-width:0
}
.hrow-meta input{
  padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;
  background:#fff;color:var(--ink);min-width:0;width:100%
}
.hrow-del{background:none;border:0;color:var(--chili);font-size:20px;line-height:1;padding:4px 8px;flex:none}
.holiday-line{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:4px 0}
.holiday-line b{font-weight:700}
.holiday-line span{font-family:var(--mono);font-size:12.5px;opacity:.85;text-align:right}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.theme-card{
  border:2px solid var(--line);border-radius:12px;padding:11px;background:#fff;
  text-align:left;cursor:pointer;transition:border-color .15s
}
.theme-card:hover{border-color:var(--muted)}
.theme-card[aria-pressed="true"]{border-color:var(--peacock);background:var(--paper-2)}
.theme-card .dots{display:flex;gap:5px;margin-bottom:9px}
.theme-card .dots i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.14);display:block}
.theme-card b{display:block;font-size:13px;line-height:1.25;margin-bottom:4px;color:var(--ink)}
.theme-card span{display:block;font-size:11.5px;line-height:1.35;color:var(--muted)}
.inbox{display:flex;flex-direction:column;gap:10px}
.inbox-row{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px}

.inbox-row b{font-family:var(--mono);font-size:12.5px}
.inbox-row span{color:var(--muted);display:block;margin-top:3px;font-size:13px}

/* ---------- Cookie ---------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;background:var(--peacock);color:rgba(255,246,233,.85);
  border-radius:var(--r);padding:18px 22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.3);font-size:14px
}
.cookie a{color:var(--marigold)}
.cookie p{margin:0;flex:1;min-width:240px}

/* ---------- Responsive ---------- */

/* Never allow sideways scrolling on a phone */
/* overflow-x:hidden here would make html the sticky container and stop the
   header sticking at all. `clip` prevents sideways scrolling without that. */
html,body{max-width:100%;overflow-x:clip}

/* Comfortable tap targets everywhere (Apple/Google both recommend ~44px) */
@media (hover:none) and (pointer:coarse){
  .btn{padding:15px 26px}
  nav.main a,.tabs button,.chip,.toggle button,.dish .add,.qty button,.x{min-height:44px}
  .qty button{width:40px;height:40px;font-size:20px}
  .x{min-width:44px}
  .lang button{padding:9px 14px}
  /* 16px stops iOS Safari zooming in when a field is focused */
  .field input,.field select,.field textarea,.plz-row input{font-size:16px}
}

@media (max-width:900px){
  .hero-grid,.hours-grid,.contact-grid,.foot-grid{grid-template-columns:1fr;gap:32px}
  .usp-grid{grid-template-columns:1fr}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--peacock-2);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;
    border-bottom:1px solid rgba(255,246,233,.12);
    max-height:calc(100vh - 70px);overflow-y:auto
  }
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid rgba(255,246,233,.1)}
  .burger{display:block;order:3}
  .cart-btn{order:2;padding:10px 16px}
  .topbar .wrap{font-size:12.5px;gap:12px}
  .brand .logo-img{height:38px;max-width:130px}
  section{padding:52px 0}
  .field-row{grid-template-columns:1fr}
  .hero{padding:44px 0 60px}
  .radar{padding:22px}
}

/* Phones */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}

  /* Top bar: keep phone + language, drop the rest to save a line */
  html{scroll-padding-top:100px}
  .topbar .wrap{gap:10px;min-height:34px;flex-wrap:nowrap}
  #topAddress,#topStatus{display:none}
  .socials-top{margin-left:auto}
  .social--sm{width:34px;height:34px}
  .social--sm svg{width:17px;height:17px}
  .lang{margin-left:0}

  header.site .wrap{min-height:62px;gap:10px}
  .brand b{font-size:17px}
  .brand-tag{display:none}
  .brand .mark{width:36px;height:36px;font-size:18px}
  .cart-btn{padding:9px 14px;font-size:14px}

  .hero{padding:36px 0 52px}
  .hero h1{margin-bottom:14px}
  .hero p.lead{font-size:16.5px}
  .hero-badges{gap:8px;margin-top:20px}
  .badge{font-size:10.5px;padding:6px 11px}

  .radar{padding:20px;border-radius:16px}
  .plz-row{flex-wrap:wrap}
  .plz-row input{flex:1 1 100%}
  .plz-row .btn{flex:1 1 100%}

  section{padding:44px 0}
  .sec-head{margin-bottom:26px}

  .hours-list li{padding:12px 8px;font-size:15px}
  .hours-list .t{font-size:12.5px}
  .note{padding:20px}

  .dish{padding:14px;gap:12px}
  .dish--photo{padding:12px}
  .dish-img{width:104px;height:104px}
  .dish h4{font-size:17px}

  .usp-card{padding:22px}

  .info-list b{width:auto;min-width:88px}

  /* Full-height sheet rather than a cramped centred box */
  .modal{padding:0;place-items:stretch}
  .modal-card{
    width:100%;max-width:100%;min-height:100%;max-height:100%;
    border-radius:0;padding:0 18px 34px
  }
  .modal-head{margin:0 0 14px;padding:20px 0 12px}
  .modal-card h3{font-size:22px}

  .drawer-head,.drawer-body,.drawer-foot{padding-left:18px;padding-right:18px}
  .line .lp{min-width:56px}

  .cookie{left:10px;right:10px;bottom:10px;padding:16px;gap:12px}
  .cookie p{font-size:13px;min-width:0}
  .cookie .btn{width:100%}

  .foot-bottom{flex-direction:column;gap:12px}
  .foot-bottom nav{gap:16px}

  .logo-preview{flex-wrap:wrap}
  .drop{padding:18px 14px}
  .drop .btn{width:100%;margin-bottom:8px}
  .theme-grid{grid-template-columns:1fr 1fr;gap:8px}
  .resactions .btn{flex:1;min-width:140px}
  .stage{min-width:0;flex:1 1 45%;font-size:12px;padding:9px 8px}
  .trow{grid-template-columns:1fr 1fr;gap:8px}
  #zoneEditor .trow{grid-template-columns:minmax(0,1fr) 74px auto}
  .trow select{grid-column:1 / 3}
  .trow .icon-btn{grid-column:2;justify-self:end}
  .occ-grid{grid-template-columns:1fr 1fr;gap:8px}
  .mitem{grid-template-columns:1fr;gap:10px}
  .mitem-img{width:100%;height:120px}
  .mitem-meta{grid-template-columns:1fr 1fr;gap:8px;align-items:end}
  .mitem-meta .icon-btn{grid-column:2;justify-self:end}
  .msub-list button{padding:8px 12px;font-size:13px}
  .hrow-times{grid-template-columns:1fr}
  .hrow-meta{grid-template-columns:minmax(0,1fr) auto}
  .hrow-meta input[type=date]{grid-column:1 / -1}
  .theme-card{padding:9px}
  .theme-card .dots i{width:18px;height:18px}
}

/* Very small phones */
@media (max-width:380px){
  .hero h1{font-size:32px}
  .brand b{font-size:15.5px}
  .cart-btn span:first-child{display:none}
  .cart-btn{padding:10px 12px}
  .cart-count{position:static;top:auto;right:auto}
}

/* Short landscape screens: don't let the sticky header eat the page */
@media (max-height:500px) and (orientation:landscape){
  .topstack{position:static}
  .modal-card{min-height:auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ---------- The staff sign-in page ----------
   Reaching the private address puts the restaurant site away completely: no
   header, no hero, no sections, no footer — nothing behind the sign-in box.
   Signing out returns here rather than to the public site. */
body.admin-only > .topstack,
body.admin-only > .hero,
body.admin-only > section,
body.admin-only > footer,
body.admin-only > .cookie,
body.admin-only > .drawer,
body.admin-only > .scrim{
  display:none !important
}

body.admin-only{
  background:
    radial-gradient(120% 90% at 85% 0%, var(--hero-glow) 0%, transparent 60%),
    var(--peacock);
  min-height:100vh
}

/* Sprache / Language, on the sign-in box itself — the top bar that usually
   carries this is not on the page here. */
.login-lang{
  display:flex;justify-content:center;gap:8px;margin-top:18px
}
.login-lang button{
  border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:6px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;font-weight:700
}
.login-lang button[aria-pressed="true"]{
  background:var(--peacock);border-color:var(--peacock);color:var(--paper)
}

/* the box stands alone, so it needs no way to be dismissed */
body.admin-only #loginModal .x{ display:none }

/* and no dark backdrop, since there is nothing behind it to dim */
body.admin-only #loginModal{ background:transparent }


/* ---------- Features switched off ----------
   Whatever the superadmin turns off leaves the public site as well, so a
   customer never meets a button that leads nowhere. */
body.no-ordering .add,
body.no-ordering .cart-btn,
body.no-ordering .radar,          /* the ordering panel, postcode check and all */
body.no-ordering .js-track{
  display:none !important
}

/* with no ordering panel the hero is a single column */
body.no-ordering .hero-grid{grid-template-columns:1fr}
body.no-booking .js-reserve{ display:none !important }

/* ---------- The superadmin's feature list ---------- */


.feature-row{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:12px 14px;margin-bottom:8px
}
.feature-row input{width:18px;height:18px;accent-color:var(--peacock);flex:none;margin-top:2px}
.feature-row b{display:block;font-size:14.5px}
.feature-row em{
  display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px
}
.feature-row--off{opacity:.6}
.feature-held{color:var(--chili) !important}