@font-face{
  font-family:'Fredericka the Great';
  src:url('FrederickatheGreat-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#f6f7f9; --surface:#fff; --ink:#1d2433; --muted:#6b7280; --line:#e6e8ec;
  --brand:#E8A020; --brand-dark:#c9862b; --brand2:#c0392b; --brand2-bright:#e74c3c;
  --accent:#0f9d58; --warn:#e8a800;
  --radius:14px; --radius-btn:10px; --shadow:0 2px 10px rgba(20,25,40,.06); --maxw:960px;

  --btn-ink:#1c1206; --cartbar-bg:var(--brand2);
  --chip-bg:#eef1f5; --chip-ink:#4b5563; --hover-bg:#f2f3f5;
  --thumb-bg:#eef1f5; --thumb-ink:#b6bcc6;
  --pill-active-bg:var(--ink); --pill-active-ink:#fff;
  --danger-border:#f2c2c6; --danger-ink:var(--brand2);

  --badge-pop-bg:#fdecee; --badge-pop-ink:var(--brand2);
  --badge-special-bg:#fff5e0; --badge-special-ink:#a9760b;
  --badge-rec-bg:#e7f6ee;

  --flash-ok-bg:#e7f6ee; --flash-ok-ink:#0b7a3f;
  --flash-bad-bg:#fdecee; --flash-bad-ink:var(--brand2);

  --st-pending-bg:#F0A020; --st-pending-ink:#fff;
  --st-accepted-bg:#2563eb; --st-accepted-ink:#fff;
  --st-preparing-bg:#7c3aed; --st-preparing-ink:#fff;
  --st-ready-bg:#16A34A; --st-ready-ink:#fff;
  --st-completed-bg:#64748B; --st-completed-ink:#fff;
  --st-cancelled-bg:#DC2626; --st-cancelled-ink:#fff;
  --st-paid-bg:#0D9488; --st-paid-ink:#fff;
  --st-failed-bg:#DC2626; --st-failed-ink:#fff;
  --st-cod-bg:#2563eb; --st-cod-ink:#fff;
  --st-cash_pending-bg:#F0A020; --st-cash_pending-ink:#fff;
  --st-cash_received-bg:#2563eb; --st-cash_received-ink:#fff;

  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Josefin Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-hero-title:'Fredericka the Great',var(--font-display);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.mt{margin-top:14px}.mt2{margin-top:22px}.mb{margin-bottom:14px}
.row{display:flex;gap:12px}.row.wrap{flex-wrap:wrap}.between{justify-content:space-between}
.items-center{align-items:center}.items-end{align-items:flex-end}.grow{flex:1}
.hidden{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--radius-btn);padding:11px 16px;font-size:15px;font-weight:600;
  cursor:pointer;background:var(--brand);color:var(--btn-ink);transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;line-height:1}
/* .btn's own display:inline-flex has the same specificity as the browser's
   built-in [hidden]{display:none} and comes later in the cascade, so it wins
   — a hidden .btn renders anyway unless this is spelled out explicitly. */
.btn[hidden]{display:none}
.btn:hover{background:var(--brand-dark);box-shadow:0 3px 10px rgba(232,160,32,.25)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--hover-bg);border-color:#d7dae0;box-shadow:none}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:#0c8049;box-shadow:0 3px 10px rgba(15,157,88,.25)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#323b4f;box-shadow:0 3px 10px rgba(29,36,51,.25)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:8px}
.btn.danger{background:var(--brand2);color:#fff;border-color:var(--brand2)}
.btn.danger:hover{background:#a5311f;border-color:#a5311f;box-shadow:0 3px 10px rgba(192,57,43,.3)}
.btn.danger:disabled{background:var(--surface);color:var(--danger-ink);border-color:var(--danger-border)}
.btn.primary{background:#2563EB;color:#fff}
.btn.primary:hover{background:#1d4fd1;box-shadow:0 3px 10px rgba(37,99,235,.3)}
.btn.warning{background:#D97706;color:#fff}
.btn.warning:hover{background:#B45309;box-shadow:0 3px 10px rgba(217,119,6,.3)}

/* Cards & badges */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--chip-bg);color:var(--chip-ink);text-transform:uppercase;letter-spacing:.03em}
.badge.pop{background:var(--badge-pop-bg);color:var(--badge-pop-ink)}
.badge.special{background:var(--badge-special-bg);color:var(--badge-special-ink)}
.badge.rec{background:var(--badge-rec-bg);color:var(--accent)}
.badge.success{background:var(--badge-rec-bg);color:var(--accent)}
.badge.dot{width:9px;height:9px;padding:0;border-radius:50%}
.tag{font-size:12px;color:var(--muted)}
.pill{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.pill.active{background:var(--pill-active-bg);color:var(--pill-active-ink);border-color:var(--pill-active-bg)}

/* "Today's Special" / "Popular" filter tabs get their own accent (matching
   the badge colors already used on item cards) so they read as a distinct
   kind of filter, not just more categories. */
.pill.pill-special{border-color:var(--badge-special-ink);color:var(--badge-special-ink)}
.pill.pill-special.active{background:var(--badge-special-ink);color:var(--btn-ink);border-color:var(--badge-special-ink)}
.pill.pill-popular{border-color:var(--badge-pop-ink);color:var(--badge-pop-ink)}
.pill.pill-popular.active{background:var(--badge-pop-ink);color:#fff;border-color:var(--badge-pop-ink)}

/* Status colors */
.st-pending{background:var(--st-pending-bg);color:var(--st-pending-ink)}
.st-accepted{background:var(--st-accepted-bg);color:var(--st-accepted-ink)}
.st-preparing{background:var(--st-preparing-bg);color:var(--st-preparing-ink)}
.st-ready{background:var(--st-ready-bg);color:var(--st-ready-ink)}
.st-completed{background:var(--st-completed-bg);color:var(--st-completed-ink)}
.st-cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-ink)}
.st-paid{background:var(--st-paid-bg);color:var(--st-paid-ink)}
.st-failed{background:var(--st-failed-bg);color:var(--st-failed-ink)}
.st-cod{background:var(--st-cod-bg);color:var(--st-cod-ink)}
.st-cash_pending{background:var(--st-cash_pending-bg);color:var(--st-cash_pending-ink)}
.st-cash_received{background:var(--st-cash_received-bg);color:var(--st-cash_received-ink)}

/* Forms */
label{display:block;font-weight:600;font-size:13px;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=file],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:var(--surface);font-family:inherit;color:var(--ink)}
textarea{min-height:70px;resize:vertical}
.field{margin-bottom:14px}
.err{color:var(--danger-ink);font-size:12.5px;margin-top:4px}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.check input{width:auto}

/* On/Off toggle switch (Settings → Order Availability, etc.) */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.toggle-row:last-child{border-bottom:0}
.toggle-row-text{display:flex;flex-direction:column;gap:2px}
.toggle-row-label{font-weight:700;font-size:14.5px;color:var(--ink)}
.toggle-row-desc{font-size:12.5px;color:var(--muted)}
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch-track{position:relative;width:44px;height:26px;border-radius:999px;background:#d1d5db;
  transition:background .18s;flex:none}
.switch-track::before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked ~ .switch-track{background:var(--accent)}
.switch input:checked ~ .switch-track::before{transform:translateX(18px)}
.switch input:focus-visible ~ .switch-track{outline:2px solid var(--brand-dark);outline-offset:2px}
.switch-state{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--muted);min-width:26px}
.switch-state::after{content:'Off'}
.switch input:checked ~ .switch-state{color:var(--accent)}
.switch input:checked ~ .switch-state::after{content:'On'}

/* User cards (admin/users) — role-accented with an avatar */
.user-card{display:flex;gap:14px;align-items:center;border-left:4px solid var(--line);
  transition:box-shadow .15s,transform .15s}
.user-card:hover{box-shadow:0 8px 20px rgba(20,25,40,.1);transform:translateY(-1px)}
.user-card.role-admin{border-left-color:#7C3AED}
.user-card.role-kitchen{border-left-color:#0EA5E9}
.user-avatar{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:16px;color:#fff}
.user-card.role-admin .user-avatar{background:#7C3AED}
.user-card.role-kitchen .user-avatar{background:#0EA5E9}
.user-card .user-form-wrap{flex:1;min-width:0}

/* Filter/toolbar rows (search + selects + submit on one line) */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filters input[type=text]{width:auto;flex:1;min-width:200px}
.filters select{width:auto;min-width:150px;flex:none}
.filters .btn{flex:none}

/* Flash */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;font-size:14px}
.flash.ok{background:var(--flash-ok-bg);color:var(--flash-ok-ink)}
.flash.bad{background:var(--flash-bad-bg);color:var(--flash-bad-ink)}

/* ===== Customer ===== */
.c-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.c-header .container{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.logo{width:42px;height:42px;border-radius:11px;object-fit:cover;background:var(--thumb-bg);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand);flex:none;font-family:var(--font-display)}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ctx-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);white-space:nowrap}
.searchbar{padding:12px 0}
.searchbar input{background:var(--surface)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cats .pill{flex:none;white-space:nowrap}
.section-title{font-size:17px;font-weight:800;margin:18px 0 10px}

/* Compact item grid (category listings) */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.item-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.item-card>.add-btn,.item-card>form{align-self:center}
.item-card:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.item-card-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer}
.item-card-media{width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--thumb-bg);display:flex;align-items:center;justify-content:center;
  color:var(--thumb-ink);font-size:22px}
.item-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.item-card:hover .item-card-media img{transform:scale(1.08)}
.item-card-body{flex:1;min-width:0;display:block}
.item-card .item-name{font-size:15px;font-weight:700;display:block;line-height:1.3;margin-bottom:2px}
.item-card .item-price{font-weight:800;color:var(--brand);font-family:var(--font-display);font-size:17px;display:block}
.item-card .item-rating{display:block}
.item-badges{display:block;margin:2px 0 6px;line-height:1}
.item-badges-empty{visibility:hidden}
.badge-placeholder{visibility:hidden}

/* ---- Ratings & reviews ---- */
.item-rating{font-size:12.5px;color:var(--brand);font-weight:700;margin:2px 0 6px}
.item-rating a{color:inherit}
.item-rating-empty{color:var(--muted,rgba(245,240,230,.4));font-weight:600}

.star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;width:max-content}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{font-size:30px;line-height:1;color:var(--line);cursor:pointer;transition:color .15s;padding:2px}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{color:var(--brand)}
.star-input input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.review-card{border-left:3px solid var(--brand)}
.review-stars{color:var(--brand);letter-spacing:2px;font-size:15px}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.grid.cols2{grid-template-columns:1fr 1fr}}

/* Admin: existing hero-slide rows — compact single row on desktop, stacked
   labeled fields (matching the "Add Slide" form) once it can't fit. */
.slide-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.slide-row:last-child{border-bottom:0}
.slide-row-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.slide-row-fields{display:flex;gap:10px;flex:1;min-width:0}
.slide-row-fields .field{margin-bottom:0}
.slide-row-fields .field.grow{flex:1;min-width:0}
.slide-row-fields input[type=file]{max-width:150px}
.slide-row-fields input[type=number]{width:75px}
.slide-row-actions{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:700px){
  .slide-row{flex-direction:column;align-items:stretch}
  .slide-row-thumb{width:100%;height:150px}
  .slide-row-fields{flex-direction:column;gap:14px}
  .slide-row-fields input[type=file],.slide-row-fields input[type=number]{max-width:none;width:100%}
  .slide-row-actions{justify-content:space-between}
}

.hcard{width:150px;flex:none;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:12px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hcard:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.hscroll::-webkit-scrollbar{display:none}
.hcard{scroll-snap-align:start}
.hcard .thumb{width:100%;aspect-ratio:1/1;border-radius:12px;margin-bottom:8px;background:var(--thumb-bg);
  display:flex;align-items:center;justify-content:center;color:var(--thumb-ink);font-size:26px;overflow:hidden}
.hcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.hcard:hover .thumb img{transform:scale(1.08)}
.hcard-rating{color:var(--brand);font-weight:700;font-size:12px;margin-bottom:3px}
.hcard-name{font-weight:700;font-size:14px}
.hcard-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.hcard .price{color:var(--brand);font-weight:800}
.hcard-view{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:var(--brand);color:var(--btn-ink)}

/* Sticky cart bar */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--cartbar-bg);color:#fff}
.cartbar .container{display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;padding-bottom:12px}
.cartbar a{color:#fff;font-weight:700}

/* Qty stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{background:var(--surface);border:0;width:36px;height:36px;font-size:18px;cursor:pointer;color:var(--ink)}
.stepper span{min-width:34px;text-align:center;font-weight:700}

/* Price breakdown */
.breakdown div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.breakdown .total{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-weight:800;font-size:17px}

/* Order success page — larger, easier-to-read type */
.order-success{font-size:18px}
.order-success h2{font-size:32px}
.order-success p{font-size:18px;line-height:1.7}
.order-success .muted{font-size:17px}
.order-success .small{font-size:17px}
.order-success .section-title{font-size:21px}
.order-success .os-item-name{font-weight:600;font-size:18px}
.order-success .os-item-price{font-weight:700;font-size:18px}
.order-success .breakdown div{font-size:18px}
.order-success .breakdown .total{font-size:23px}
.order-success .status-badge{font-size:15px;padding:8px 16px}

/* ===== Panel (admin/kitchen) ===== */
.panel{display:flex;min-height:100vh}
.side{width:230px;background:#181410;color:#cbbfae;flex:none;padding:18px 0}
.side .brand{font-weight:800;color:var(--brand);font-size:18px;padding:0 20px 16px;font-family:var(--font-display)}
.side a{display:block;padding:10px 20px;color:#a79987;font-weight:600;font-size:14px;border-left:3px solid transparent}
.side a:hover{background:#231c15;color:#fff}
.side a.active{background:#231c15;color:#fff;border-left-color:var(--brand)}
.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6b5f50;padding:16px 20px 6px}
.main{flex:1;min-width:0;background:var(--bg)}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30}
.topbar h1{font-size:18px;margin:0}
.content{padding:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat{display:flex;gap:14px;align-items:flex-start;border-top:4px solid transparent;
  transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,25,40,.12)}
.stat-icon{width:42px;height:42px;border-radius:12px;flex:none;font-size:19px;
  display:flex;align-items:center;justify-content:center}
.stat .k{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:26px;font-weight:800;margin-top:6px;color:var(--ink)}
.stat-orders{border-top-color:#2563EB}
.stat-orders .stat-icon{background:rgba(37,99,235,.12);color:#2563EB}
.stat-orders .v{color:#2563EB}
.stat-revenue{border-top-color:#16A34A}
.stat-revenue .stat-icon{background:rgba(22,163,74,.12);color:#16A34A}
.stat-revenue .v{color:#16A34A}
.stat-monthly{border-top-color:#7C3AED}
.stat-monthly .stat-icon{background:rgba(124,58,237,.12);color:#7C3AED}
.stat-monthly .v{color:#7C3AED}
.stat-popular{border-top-color:#C9862B}
.stat-popular .stat-icon{background:rgba(201,134,43,.14);color:#C9862B}
.stat-popular .v{color:#C9862B}
.stat-mobile{border-top-color:#0EA5E9}
.stat-mobile .stat-icon{background:rgba(14,165,233,.12);color:#0EA5E9}
.stat-mobile .v{color:#0EA5E9}

/* Address / info card with a colored accent bar + icon */
.info-card{display:flex;gap:12px;align-items:flex-start;border-left:4px solid #0EA5E9}
.info-card .stat-icon{background:rgba(14,165,233,.12);color:#0EA5E9}

table{width:100%;border-collapse:collapse;background:#fff}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap}
th{background:#C9862B;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:#000;font-weight:700;border-bottom:2px solid rgba(0,0,0,.12)}
tr:last-child td{border-bottom:0}

.status-badge{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:capitalize;
  box-shadow:0 1px 4px rgba(20,25,40,.18);letter-spacing:.02em}
button.status-badge,button.badge{transition:filter .15s,transform .1s;font-family:inherit}
button.status-badge:hover,button.badge:hover{filter:brightness(.93)}
button.status-badge:active,button.badge:active{transform:scale(.97)}

/* ---- Admin topbar notification bell + dropdown ---- */
.notif-wrap{position:relative}
.notif-bell{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  font-size:16px;cursor:pointer;transition:background .15s}
.notif-bell:hover{background:var(--hover-bg)}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--brand2);color:#fff;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--surface)}
.notif-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(20,25,40,.16);
  z-index:50;overflow:hidden}
.notif-dropdown[hidden]{display:none}
.notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-mark-all{background:none;border:0;color:var(--brand-dark);font-size:12.5px;font-weight:700;cursor:pointer;padding:0}
.notif-mark-all:hover{text-decoration:underline}
.notif-list{max-height:360px;overflow-y:auto}
.notif-empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:13.5px}
.notif-item{display:block;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--hover-bg)}
.notif-item.unread{background:#fff9ee}
.notif-item .notif-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.notif-item.unread .notif-title::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand2);flex:none}
.notif-item .notif-msg{font-size:12.5px;color:var(--muted);margin-top:2px}
.notif-item .notif-time{font-size:11px;color:var(--muted);margin-top:4px}
.notif-view-all{display:block;text-align:center;padding:11px;font-size:13px;font-weight:700;
  color:var(--brand-dark);border-top:1px solid var(--line);background:var(--bg)}
.notif-view-all:hover{background:var(--hover-bg)}


/* ---- DataTables (admin) — restyled to match the panel design system ---- */
.panel .dt-container{padding:0}
.panel .dt-layout-row{margin:0}
.panel .dt-layout-row:first-child{padding:14px 14px 0}
.panel .dt-layout-row:last-child{padding:12px 14px;border-top:1px solid var(--line)}
.panel .dt-search{display:flex;align-items:center;gap:8px}
.panel .dt-search label{margin:0;font-weight:600;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.panel .dt-search input{width:220px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;background:var(--surface);font-family:inherit;color:var(--ink)}
.panel .dt-search input:focus{outline:2px solid rgba(232,160,32,.25);border-color:var(--brand)}
.panel .dt-length label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;margin:0}
.panel .dt-length select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--surface);color:var(--ink)}
.panel .dt-info{font-size:13px;color:var(--muted)}

.panel table.dataTable{margin:0!important;border-collapse:collapse;width:100%!important}
.panel table.dataTable thead th{background:#C9862B;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#000;font-weight:700;
  padding:12px 13px;border-bottom:2px solid rgba(0,0,0,.12)}
.panel table.dataTable thead th.dt-orderable-asc:hover,
.panel table.dataTable thead th.dt-orderable-desc:hover{filter:brightness(.92);color:#000}
.panel table.dataTable thead th .dt-column-order{color:#000}
.panel table.dataTable tbody tr{transition:background .12s}
.panel table.dataTable tbody tr:hover{background:var(--hover-bg)}
.panel table.dataTable tbody td{padding:11px 13px;font-size:14px;border-bottom:1px solid var(--line)}
.panel table.dataTable tbody tr:last-child td{border-bottom:0}
.panel div.dt-container select.dt-input,
.panel div.dt-container input.dt-input{margin:0}

.panel .dt-paging{display:flex}
.panel .dt-paging-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  padding:0 8px;margin-left:6px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.panel .dt-paging-button:hover:not(.disabled):not(.current){background:var(--hover-bg);border-color:var(--brand)}
.panel .dt-paging-button.current{background:var(--brand);border-color:var(--brand);color:var(--btn-ink)}
.panel .dt-paging-button.disabled{opacity:.4;cursor:not-allowed}
.panel .dt-empty{text-align:center;color:var(--muted);padding:22px 13px!important}

/* Kitchen queue */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ktile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;border-top:4px solid var(--warn)}
.ktile.accepted{border-top-color:#2563eb}.ktile.preparing{border-top-color:#7c3aed}.ktile.ready{border-top-color:var(--accent)}
.ktile h3{margin:0 0 2px;font-size:16px}
.ktile ul{margin:8px 0;padding-left:18px}.ktile li{font-size:14px;margin:3px 0}
.ktabs{display:flex;gap:8px;margin-bottom:16px}

.qr-cell svg{width:100%;height:auto;max-width:180px}
.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}

@media(max-width:820px){
  .side{position:fixed;left:-240px;top:0;bottom:0;transition:.2s;z-index:100}
  .side.open{left:0}
  .menu-toggle{display:inline-flex}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}

  /* Anchoring the dropdown to the bell (right:0 on .notif-wrap) only works
     when the bell sits at a predictable spot. Below 560px the topbar's
     action row runs out of room and the bell drifts, dragging a right-anchored
     dropdown off-screen with it — so on mobile the dropdown instead anchors
     to the viewport itself, not to the bell. */
  .notif-dropdown{position:fixed;top:64px;left:12px;right:12px;width:auto;max-width:none;
    max-height:calc(100vh - 84px);display:flex;flex-direction:column}
  .notif-dropdown .notif-list{flex:1;min-height:0}
}
@media(max-width:560px){
  .topbar{padding:12px 14px}
  .topbar-actions{gap:8px}
  .topbar-actions>.small.muted{display:none}
}
@media(min-width:821px){.menu-toggle{display:none}}
.menu-toggle{background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;font-size:18px;cursor:pointer}

/* =====================================================================
   Customer storefront theme — scoped to <body class="customer-theme theme-dark|theme-light">.
   The restaurant admin picks the theme in Settings; both palettes share the
   same brand gold/red identity and only differ in surface/ink tones.
   Palette / type matched to "The Kitchen Door" reference design.
   ===================================================================== */
body.customer-theme.theme-dark{
  --bg:#0D0B07; --bg2:#141209; --bg3:#1C1810; --surface:#1A1610; --ink:#F0E8D8;
  --muted:#9A8E7A; --line:rgba(232,160,32,.18);
  --brand:#E8A020; --brand-dark:#F5C842; --brand2:#C0392B; --brand2-bright:#E74C3C;
  --accent:#27AE60; --warn:#f0b429;
  --radius:10px; --radius-btn:6px; --shadow:0 10px 28px rgba(0,0,0,.4);

  --btn-ink:#12100a; --cartbar-bg:var(--brand2);
  --chip-bg:rgba(255,255,255,.06); --chip-ink:var(--muted); --hover-bg:rgba(255,255,255,.07);
  --thumb-bg:rgba(232,160,32,.10); --thumb-ink:var(--brand);
  --pill-active-bg:var(--brand); --pill-active-ink:#12100a;
  --danger-border:rgba(192,57,43,.4); --danger-ink:#e2685c;

  --badge-pop-bg:rgba(192,57,43,.18); --badge-pop-ink:#e2685c;
  --badge-special-bg:rgba(232,160,32,.16); --badge-special-ink:var(--brand);
  --badge-rec-bg:rgba(39,174,96,.16);

  --flash-ok-bg:rgba(39,174,96,.16); --flash-ok-ink:var(--accent);
  --flash-bad-bg:rgba(192,57,43,.18); --flash-bad-ink:#e2685c;

  --st-pending-bg:rgba(240,180,41,.18); --st-pending-ink:#f0b429;
  --st-accepted-bg:rgba(66,133,244,.18); --st-accepted-ink:#7aa8ff;
  --st-preparing-bg:rgba(147,112,219,.2); --st-preparing-ink:#b79bf0;
  --st-ready-bg:rgba(39,174,96,.18); --st-ready-ink:var(--accent);
  --st-completed-bg:rgba(255,255,255,.08); --st-completed-ink:var(--muted);
  --st-cancelled-bg:rgba(192,57,43,.18); --st-cancelled-ink:#e2685c;
  --st-paid-bg:rgba(39,174,96,.18); --st-paid-ink:var(--accent);
  --st-failed-bg:rgba(192,57,43,.18); --st-failed-ink:#e2685c;
  --st-cod-bg:rgba(66,133,244,.18); --st-cod-ink:#7aa8ff;
  --st-cash_pending-bg:rgba(240,180,41,.18); --st-cash_pending-ink:#f0b429;
  --st-cash_received-bg:rgba(66,133,244,.18); --st-cash_received-ink:#7aa8ff;

  --header-bg:rgba(13,11,7,.85); --header-bg-scrolled:rgba(10,9,6,.97);
  --nav-ink:rgba(245,240,230,.72); --nav-panel-bg:rgba(13,11,7,.98);

  background:var(--bg);
  font-family:var(--font-body);
  position:relative;
}

/* Light theme — same gold/red brand identity, warm ivory surfaces instead of charcoal */
body.customer-theme.theme-light{
  --bg:#FBF7F0; --bg2:#F5EEE1; --bg3:#EFE6D3; --surface:#FFFFFF; --ink:#2A2018;
  --muted:#8A7A63; --line:rgba(42,32,24,.12);
  --brand:#E8A020; --brand-dark:#c9862b; --brand2:#C0392B; --brand2-bright:#E74C3C;
  --accent:#0f9d58; --warn:#e8a800;
  --radius:10px; --radius-btn:6px; --shadow:0 10px 28px rgba(42,32,24,.10);

  --btn-ink:#12100a; --cartbar-bg:var(--brand2);
  --chip-bg:rgba(42,32,24,.05); --chip-ink:var(--muted); --hover-bg:rgba(42,32,24,.04);
  --thumb-bg:rgba(232,160,32,.10); --thumb-ink:var(--brand);
  --pill-active-bg:var(--brand); --pill-active-ink:#12100a;
  --danger-border:rgba(192,57,43,.35); --danger-ink:#b3382a;

  --badge-pop-bg:rgba(192,57,43,.10); --badge-pop-ink:#b3382a;
  --badge-special-bg:rgba(232,160,32,.14); --badge-special-ink:#9c6b1f;
  --badge-rec-bg:rgba(15,157,88,.12);

  --flash-ok-bg:rgba(15,157,88,.12); --flash-ok-ink:#0b7a3f;
  --flash-bad-bg:rgba(192,57,43,.12); --flash-bad-ink:#b3382a;

  --st-pending-bg:rgba(240,180,41,.18); --st-pending-ink:#8a5a00;
  --st-accepted-bg:rgba(37,99,235,.14); --st-accepted-ink:#1d4ed8;
  --st-preparing-bg:rgba(124,58,237,.14); --st-preparing-ink:#6d28d9;
  --st-ready-bg:rgba(15,157,88,.14); --st-ready-ink:#0f9d58;
  --st-completed-bg:rgba(42,32,24,.08); --st-completed-ink:var(--muted);
  --st-cancelled-bg:rgba(192,57,43,.12); --st-cancelled-ink:#b3382a;
  --st-paid-bg:rgba(13,148,136,.14); --st-paid-ink:#0d7d72;
  --st-failed-bg:rgba(192,57,43,.12); --st-failed-ink:#b3382a;
  --st-cod-bg:rgba(37,99,235,.14); --st-cod-ink:#1d4ed8;
  --st-cash_pending-bg:rgba(240,180,41,.18); --st-cash_pending-ink:#8a5a00;
  --st-cash_received-bg:rgba(37,99,235,.14); --st-cash_received-ink:#1d4ed8;

  --header-bg:rgba(255,253,248,.85); --header-bg-scrolled:rgba(255,253,248,.97);
  --nav-ink:rgba(42,32,24,.68); --nav-panel-bg:rgba(255,253,248,.98);

  background:var(--bg);
  font-family:var(--font-body);
  position:relative;
}
/* film-grain texture, matching the reference's noise overlay */
body.customer-theme::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
body.customer-theme main,body.customer-theme .hero,
body.customer-theme .c-footer{position:relative;z-index:1}

body.customer-theme .btn{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:13.5px}
body.customer-theme .btn.ghost{background:transparent;color:var(--brand);border-color:rgba(232,160,32,.5)}
body.customer-theme .btn.ghost:hover{background:rgba(232,160,32,.08)}
body.customer-theme .badge{border:1px solid var(--line)}
body.customer-theme h1,body.customer-theme h2,body.customer-theme h3{font-family:var(--font-display)}

/* ---- Header / brand / cart button ---- */
.c-header{background:var(--header-bg,rgba(13,11,7,.85));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,160,32,.14);
  transition:background .35s ease,box-shadow .35s ease}
.c-header.is-scrolled{background:var(--header-bg-scrolled,rgba(10,9,6,.97));box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.c-header-inner{justify-content:space-between;transition:padding .35s ease}
.c-header.is-scrolled .c-header-inner{padding-top:9px;padding-bottom:9px}
.brand-mark{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark .logo{border:1px solid rgba(232,160,32,.35);transition:border-color .2s}
.brand-text{min-width:0}
.brand-name{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.customer-theme .brand-name{font-family:var(--font-display);color:var(--brand);letter-spacing:.02em;font-weight:400;font-size:19px}
.brand-address{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.header-actions{display:flex;align-items:center;gap:14px;flex:none}

.nav-links{display:flex;gap:2rem;flex:1;justify-content:center}
.nav-links a{position:relative;color:var(--nav-ink,rgba(245,240,230,.72));font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:6px 0;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--brand);
  transition:width .25s ease,left .25s ease}
.nav-links a:hover{color:var(--brand)}
.nav-links a:hover::after{width:100%;left:0}

.ctx-chip{background:rgba(232,160,32,.08);color:var(--brand);border:1px solid rgba(232,160,32,.3);
  font-size:11px;letter-spacing:.06em}

.cart-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--brand);
  font-weight:700;font-size:12px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border:1px solid rgba(232,160,32,.4);border-radius:999px;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.cart-btn:hover{background:var(--brand);color:#12100a;border-color:var(--brand)}
.cart-icon{width:16px;height:16px;flex:none;display:block}
.cart-btn-label{display:inline-block;line-height:1;transform:translateY(.5px)}
.cart-count {
    background: var(--brand2);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    min-width: 17px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px 9px;
    transition: transform .2s ease;
    width: 20px;
}

/* Mobile hamburger toggle */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:38px;height:38px;border:1px solid rgba(232,160,32,.3);border-radius:8px;background:transparent;
  cursor:pointer;flex:none;padding:0;transition:border-color .2s,background .2s}
.nav-toggle:hover{background:rgba(232,160,32,.08)}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--brand)}

/* Mobile off-canvas nav (reuses the .drawer-overlay/.drawer-panel slide-in plumbing) */
.nav-drawer-panel{background:var(--nav-panel-bg,rgba(13,11,7,.98))}
.nav-drawer-panel .cart-drawer-header .brand-name{font-family:var(--font-display);color:var(--brand);
  font-size:18px;font-weight:400}
.nav-links-mobile{flex-direction:column;gap:0;padding:8px 24px 24px;flex:1;justify-content:flex-start;
  overflow-y:auto;min-height:0}
.nav-links-mobile a{padding:16px 0;border-bottom:1px solid rgba(232,160,32,.12);font-size:13px}
.nav-links-mobile a::after{display:none}

/* ---- Hero ---- */
.hero{position:relative;width:100%;min-height:92vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:3rem 1.25rem}
.hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 28%, rgba(232,160,32,.14) 0%, transparent 70%),
    radial-gradient(ellipse 42% 40% at 15% 82%, rgba(192,57,43,.12) 0%, transparent 60%);
}
.hero::after{content:'';position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(232,160,32,.03) 60px,rgba(232,160,32,.03) 61px);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}

/* ---- Hero image slider (auto-rotating background) ---- */
.hero-slider{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0d0b07}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.6s ease, transform 7s ease}
.hero-slide.is-active{opacity:1;transform:scale(1);transition:opacity 1.6s ease, transform 7s ease}
.hero-slider-overlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(13,11,7,.72) 0%, rgba(13,11,7,.6) 38%, rgba(13,11,7,.9) 100%),
    radial-gradient(ellipse 80% 55% at 50% 28%, rgba(232,160,32,.14) 0%, transparent 70%)}
.hero-dots{position:absolute;bottom:4.5rem;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:2}
.hero-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.25s}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot.is-active{background:var(--brand);border-color:var(--brand);width:22px;border-radius:5px}
.hero-quote{font-family:var(--font-display);font-style:italic;font-weight:400;color:#d9cfbe;
  font-size:clamp(.95rem,2.1vw,1.3rem);letter-spacing:.01em;margin:0 0 20px;max-width:38em;
  text-shadow:0 2px 10px rgba(0,0,0,.65)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand);
  background:rgba(13,11,7,.78);
  color:var(--brand);font-size:11px;line-height:1;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 18px;border-radius:999px;margin-bottom:28px}
.hero-badge .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent)}
.hero-badge .dot.off{background:var(--brand2)}
.hero-badge-text{display:inline-block;line-height:20px;transform:translateY(.5px)}
body.customer-theme .hero-title{font-family:var(--font-hero-title);font-weight:400;color:#fff;
  font-size:clamp(3rem,9vw,6rem);line-height:1.05;margin:0 0 20px;
  text-shadow:0 4px 24px rgba(0,0,0,.55),0 0 60px rgba(232,160,32,.2)}
body.customer-theme .hero-title em{font-family:var(--font-display);font-style:italic;color:var(--brand)}
.hero-tagline{color:#d9cfbe;font-size:13px;letter-spacing:.3em;text-transform:uppercase;margin:0 0 30px;
  text-shadow:0 2px 10px rgba(0,0,0,.65)}
.hero-tagline em{color:var(--brand);font-style:normal}
.hero-icons{display:flex;justify-content:center;margin-bottom:2.75rem}
.hero-icons img{width:100%;max-width:240px;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.hero-cta{background:var(--brand);color:#12100a;font-weight:700;font-size:13.5px;
  padding:1rem 2.6rem;border-radius:4px;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.hero-cta:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(232,160,32,.35)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:#9A8E7A;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;z-index:2;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ---- Motion: scroll-reveal, staggered slide-in, button ripple ---- */
body.customer-theme{scroll-behavior:smooth}
body.customer-theme #menu,
body.customer-theme #find-us,
body.customer-theme [data-cat-section]{scroll-margin-top:90px}

body.customer-theme [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .3s ease-out,transform .3s ease-out}
body.customer-theme [data-reveal].is-visible{opacity:1;transform:none}

body.customer-theme .offers-row .offer-card{opacity:0;transform:translateY(20px);
  transition:opacity .3s ease-out,transform .3s ease-out}
body.customer-theme .offers-row.is-visible .offer-card{opacity:1;transform:none}
body.customer-theme .offers-row.is-visible .offer-card:nth-child(2){transition-delay:.06s}
body.customer-theme .offers-row.is-visible .offer-card:nth-child(3){transition-delay:.12s}
body.customer-theme .offers-row.is-visible .offer-card:nth-child(n+4){transition-delay:.18s}

body.customer-theme .btn,body.customer-theme .pill,body.customer-theme .add-btn{position:relative;overflow:hidden}
body.customer-theme .ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .5s ease-out}
@keyframes ripple{to{transform:scale(2.8);opacity:0}}

@media(prefers-reduced-motion:reduce){
  body.customer-theme{scroll-behavior:auto}
  body.customer-theme [data-reveal],
  body.customer-theme .offers-row .offer-card{transition:none;opacity:1;transform:none}
  body.customer-theme .ripple{display:none}
}

/* ---- Offers section (admin-created, one-tap apply) ---- */
.offers-section{padding:56px 0 8px}
.offers-intro{text-align:center;margin-bottom:32px}
.offers-intro .eyebrow{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brand);font-weight:700;margin-bottom:.6rem}
.offers-intro h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4vw,2.4rem);color:var(--ink);margin:0}

.offers-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:0}
.offer-card{position:relative;width:100%;max-width:270px;text-align:center;padding:28px 22px 24px;
  overflow:hidden;border-radius:16px;background:linear-gradient(160deg,var(--bg2,var(--surface)) 0%,var(--bg3,var(--surface)) 100%);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.35);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.offer-card:hover{transform:translateY(-6px);border-color:rgba(232,160,32,.45);
  box-shadow:0 22px 44px rgba(0,0,0,.45),0 0 0 1px rgba(232,160,32,.12)}
body.customer-theme.theme-light .offer-card{box-shadow:0 14px 34px rgba(42,32,24,.12)}
body.customer-theme.theme-light .offer-card:hover{box-shadow:0 22px 44px rgba(42,32,24,.16),0 0 0 1px rgba(232,160,32,.15)}
body.customer-theme.theme-light .c-header.is-scrolled{box-shadow:0 10px 30px rgba(42,32,24,.10)}
.offer-card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at top left,rgba(232,160,32,.1),transparent 60%)}
.offer-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:0;transition:opacity .3s ease}
.offer-card:hover::after{opacity:1}

.offer-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--brand2),var(--brand2-bright));
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:6px 14px;border-radius:999px;
  margin-bottom:14px;text-transform:uppercase;box-shadow:0 6px 16px rgba(192,57,43,.35)}
.offer-title{font-family:var(--font-display);font-size:19px;font-weight:400;color:var(--ink);margin-bottom:6px}
.offer-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}

.offer-code-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.offer-min{font-size:11px;color:var(--muted);letter-spacing:.03em}
.offer-code{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--brand);
  border:1px dashed rgba(232,160,32,.45);background:rgba(232,160,32,.06);padding:6px 16px;border-radius:8px}

.offer-apply-btn{width:100%}
body.customer-theme .offer-apply-btn.applied{color:var(--accent);border-color:var(--accent);cursor:default}

/* ---- Intro / eyebrow block ---- */
.menu-intro{text-align:center;padding:4rem 0 1rem}
.menu-intro .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);font-weight:700;display:block;margin-bottom:.8rem}
.menu-intro h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,3rem);color:var(--ink)}
.menu-intro p{color:var(--muted);font-size:14px;margin-top:.7rem;letter-spacing:.03em}

/* ---- Section head w/ price ribbon ---- */
.section-head{display:flex;align-items:center;gap:14px;margin:40px 0 18px}
.section-head .section-title{margin:0;white-space:nowrap;font-size:22px;font-family:var(--font-display);color:var(--brand);font-weight:400}
.section-line{flex:1;height:1px;background:var(--line)}
.price-badge{background:var(--brand2);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;padding:6px 14px;border-radius:999px;white-space:nowrap;text-transform:uppercase}

body.customer-theme .item-card,body.customer-theme .hcard{position:relative;overflow:hidden}
body.customer-theme .item-card::before,body.customer-theme .hcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at top left,rgba(232,160,32,.05),transparent 60%)}

/* ---- Circular add button (quick add, always adds at base price) ---- */
.add-btn{background:transparent;border:1.5px solid var(--brand);color:var(--brand);
  width:38px;height:38px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;
  transition:.2s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:300}
.add-btn:hover{background:var(--brand);color:#12100a}
.add-btn:active{transform:scale(.92)}

/* ---- Find us / footer ---- */
.find-card{max-width:560px;margin:0 auto;text-align:center;position:relative;overflow:hidden;padding:2.5rem}
.find-card::before{content:'';position:absolute;top:-30px;right:-30px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(232,160,32,.12),transparent 70%);pointer-events:none}
.find-card .pin{font-size:1.4rem;font-weight:400;color:var(--brand);margin-bottom:14px;font-family:var(--font-display)}
.find-card .muted{margin:4px 0;line-height:1.8}
.find-card .highlight{color:var(--ink);font-weight:600}

.c-footer{border-top:1px solid var(--line);margin-top:50px;padding:2.5rem 1.5rem 3rem;text-align:center}
.footer-brand{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--ink);margin-bottom:.4rem}
.footer-line{margin-top:6px;font-size:13px;letter-spacing:.03em}
.footer-line a{color:var(--brand)}
.footer-copy{margin-top:16px;font-size:11px;letter-spacing:.05em;color:var(--muted)}

/* ---- Item detail hero image ---- */
.item-hero{position:relative;width:100%;aspect-ratio:1/1;max-height:440px;background:var(--thumb-bg);
  display:flex;align-items:center;justify-content:center;font-size:64px;color:var(--thumb-ink)}
.item-hero img{width:100%;height:100%;object-fit:cover;display:block}
.item-hero-badges{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;z-index:2}
.item-hero-badges .badge{display:inline-flex;align-items:center;gap:6px;line-height:1;
  padding:6px 12px 6px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:rgba(15,13,9,.72);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.item-hero-badges .badge::before{content:'';width:6px;height:6px;flex:none;border-radius:50%}
.item-hero-badges .badge.pop::before{background:var(--brand2-bright,#e74c3c)}
.item-hero-badges .badge.rec::before{background:var(--accent,#0f9d58)}
.item-hero-badges .badge.special::before{background:var(--brand,#e8a020)}

/* ---- Item customization modal ---- */
body.no-scroll{overflow:hidden}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:none;
  align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;
  transition:opacity .2s}
.modal-overlay.open{display:flex;opacity:1;pointer-events:all}

.modal-panel{background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius);
  width:min(960px,100%);max-height:min(90vh,720px);overflow:hidden;display:flex;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .2s}
.modal-overlay.open .modal-panel{transform:translateY(0)}

.modal-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid var(--line);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.modal-close:hover{background:var(--brand);color:#12100a;border-color:var(--brand)}

.modal-form{flex:1;min-height:0;display:flex}

.modal-left{width:40%;flex:none;display:flex;flex-direction:column;min-height:0;
  overflow-y:auto;border-right:1px solid var(--line)}
.modal-media{width:100%;flex:none;aspect-ratio:4/3;background:var(--thumb-bg);display:flex;
  align-items:center;justify-content:center;font-size:60px;color:var(--thumb-ink);overflow:hidden}
.modal-media img{width:100%;height:100%;object-fit:cover;display:block}
.modal-left-info{flex:none;padding:18px 22px}
.modal-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.modal-rating{color:var(--brand);font-weight:700;font-size:13px;margin-bottom:6px}
.modal-title{font-family:var(--font-display);font-size:21px;font-weight:400;color:var(--ink);margin:0 0 4px}
.modal-price{color:var(--brand);font-weight:800;font-size:14.5px;margin-bottom:8px}
.modal-desc{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:0}

.modal-right{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.modal-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 24px 24px}

.option-group{margin-bottom:22px}
.option-group:last-child{margin-bottom:4px}
.option-group-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.option-group-head .name{font-weight:700;font-size:14.5px;color:var(--ink)}
.option-group-head .req{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;background:var(--badge-pop-bg);color:var(--badge-pop-ink)}
.option-group-head .opt{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink)}
.option-group-sub{font-size:12px;color:var(--muted);margin:0 0 10px}

.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.size-option{position:relative;display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--line);border-radius:10px;padding:12px 30px 12px 14px;
  cursor:pointer;transition:border-color .15s,background .15s}
.size-option:hover{border-color:rgba(232,160,32,.5)}
.size-option:has(input:checked){border-color:var(--brand);background:rgba(232,160,32,.06)}
.size-option input{position:absolute;opacity:0;pointer-events:none}
.size-check{position:absolute;top:10px;right:10px;width:18px;height:18px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:10px;font-weight:800;transition:.15s}
.size-option:has(input:checked) .size-check{border-color:var(--brand);background:var(--brand)}
.size-option:has(input:checked) .size-check::after{content:'✓'}
.size-label{font-size:14px;font-weight:700;color:var(--ink)}
.size-price{font-size:12.5px;color:var(--muted);font-weight:600}

.option-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;
  cursor:pointer;transition:border-color .15s,background .15s}
.option-row:hover{border-color:rgba(232,160,32,.5)}
.option-row:has(input:checked){border-color:var(--brand);background:rgba(232,160,32,.06)}
.option-row .option-label{font-size:14px;font-weight:600;flex:1;min-width:0}
.option-row .option-delta{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.option-row input{accent-color:var(--brand);width:17px;height:17px;flex:none}
.option-group textarea{margin-top:2px}

.modal-footer{flex:none;border-top:1px solid var(--line);padding:14px 22px;display:flex;
  flex-direction:column;align-items:stretch;gap:10px;background:var(--surface);
  position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 16px -8px rgba(0,0,0,.35)}
.modal-footer .stepper{align-self:flex-start}
.modal-add{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--brand);color:var(--btn-ink);border:0;border-radius:var(--radius-btn);padding:14px 18px;
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;transition:.15s}
.modal-add:hover{background:var(--brand-dark)}

/* ---- Delivery-address picker (checkout page trigger + Leaflet/Nominatim modal) ---- */
.address-prompt{border:1.5px dashed var(--line);border-radius:var(--radius);padding:16px;text-align:center;
  cursor:pointer;color:var(--muted);font-weight:600;transition:border-color .15s,color .15s}
.address-prompt:hover{border-color:var(--brand);color:var(--brand)}

.address-summary-card{display:flex;gap:12px;align-items:flex-start;padding:14px}
.address-summary-icon{flex:none;font-size:18px;line-height:1.4}
.address-summary-body{flex:1;min-width:0}
.address-summary-tag{margin-bottom:6px}
.address-summary-text{font-size:13.5px;color:var(--ink);line-height:1.5}

.modal-panel.address-modal{width:min(1080px,100%)}
.address-map-col{width:46%}
.address-map-head{flex:none;padding:20px 22px 6px}
.address-map-head h3{font-family:var(--font-display);font-weight:400;font-size:21px;margin:0 0 4px;color:var(--ink)}
.map-search-row{flex:none;padding:0 22px 14px;position:relative;display:flex;gap:8px}
.map-search-row input[type=text]{flex:1;min-width:0}
.map-search-row .btn{flex:none;white-space:nowrap}
.address-search-results{position:absolute;top:100%;left:22px;right:22px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;max-height:220px;overflow-y:auto}
.address-search-result{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--ink)}
.address-search-result:last-child{border-bottom:0}
.address-search-result:hover{background:var(--hover-bg)}

/* Leaflet's own panes/controls run up to z-index:1000 (see vendor/leaflet/leaflet.css)
   and, without this, leak into the same stacking context as .address-search-results
   above — silently burying the search dropdown under the map tiles/controls even
   though it's correctly populated. z-index:0 here is enough to contain them. */
.map-container{position:relative;flex:1;min-height:260px;z-index:0}
#address-leaflet-map{position:absolute;inset:0}
.map-pin-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);font-size:34px;
  z-index:401;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.map-pin-tooltip{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);
  color:#fff;font-size:11.5px;text-align:center;padding:8px 14px;border-radius:8px;z-index:401;
  pointer-events:none;white-space:nowrap}
.map-pin-tooltip span{display:block;font-weight:400;opacity:.75;font-size:10.5px;margin-top:2px}

.address-confirm-card{display:flex;gap:12px;align-items:flex-start;background:rgba(232,160,32,.1);
  border:1px solid rgba(232,160,32,.4);border-radius:10px;padding:14px;margin-bottom:18px}
.address-confirm-icon{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.address-confirm-body{flex:1;min-width:0}
.address-confirm-title{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:3px}

.saveas-row{display:flex;gap:8px;flex-wrap:wrap}
.save-as-pill.active{background:var(--brand);border-color:var(--brand);color:var(--btn-ink)}

@media(max-width:720px){
  .modal-panel.address-modal .modal-form{flex-direction:column;overflow-y:auto}
  .address-map-col{width:auto;display:contents}
  .address-map-head{order:1}
  .map-search-row{order:2}
  .map-container{order:3;height:220px;flex:none}
  .modal-panel.address-modal .modal-right{order:4;flex:none;min-height:0}
  .modal-panel.address-modal .modal-scroll{flex:none;overflow:visible}
  /* The desktop sticky footer relies on .modal-scroll being its own scroll
     container (see base .modal-footer rule). On mobile the whole .modal-form
     scrolls instead, which would make the sticky footer float up and cover
     the Landmark/Save-as fields still above it — so it reverts to a normal
     block at the end of the column here. */
  .modal-panel.address-modal .modal-footer{position:static;box-shadow:none}
  /* Icon + locality text + "Change on map" button don't fit on one row at
     phone widths — force the button onto its own full-width line instead of
     letting it collide with the wrapped text next to it. */
  .address-confirm-card{flex-wrap:wrap}
  .address-confirm-card #address-change-map-btn{flex:1 1 100%;margin-top:2px}
  .address-map-head{padding:16px 16px 4px}
  .map-search-row{padding:0 16px 12px}
  .modal-panel.address-modal .modal-scroll{padding:16px}
  .modal-panel.address-modal .modal-footer{padding:12px 16px 16px}
}
@media(max-width:420px){
  .map-search-row{flex-wrap:wrap}
  .map-search-row input[type=text]{flex:1 1 100%}
  .map-search-row .btn{flex:1 1 100%}
}

/* ---- Cart drawer (slide-in from the right) ---- */
.modal-overlay.drawer-overlay{justify-content:flex-end;padding:0}
.modal-panel.drawer-panel{width:min(420px,100vw);height:100%;max-height:100%;border-radius:0;
  flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.modal-overlay.drawer-overlay.open .modal-panel.drawer-panel{transform:translateX(0)}

.cart-drawer-header{flex:none;padding:20px 24px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between}
.cart-drawer-header h3{font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--brand);margin:0}
.cart-drawer-header .modal-close{position:static}
.cart-drawer-body{flex:1;min-height:0;display:flex;flex-direction:column}

.cart-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cart-empty-icon{font-size:2.5rem;margin-bottom:10px}
.cart-empty p{font-size:14px;line-height:1.6}

.drawer-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.drawer-line:last-child{border-bottom:0}
.drawer-line-info{flex:1;min-width:0}
.drawer-line-name{font-weight:700;font-size:14px;color:var(--ink)}
.drawer-line-meta{font-size:12px;color:var(--muted);margin-top:2px}
.drawer-line-addons-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand);margin-top:6px}
.drawer-line-addon{font-size:12px;color:var(--muted);margin-top:2px;margin-left:8px}
.drawer-line-actions{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.drawer-line-price{font-weight:800;font-size:13.5px;color:var(--brand)}

.stepper.sm{transform:scale(.85);transform-origin:right center}
.stepper.sm button{width:30px;height:30px;font-size:15px}

.drawer-coupon{width:100%;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.drawer-coupon .row{gap:8px}
.drawer-coupon input[type=text]{text-transform:uppercase}
.drawer-coupon-error{margin-top:6px;margin-bottom:0}

.drawer-footer{flex-direction:column;align-items:stretch;gap:10px}
.drawer-breakdown{width:100%}
.drawer-breakdown .row{padding:2px 0;font-size:13px}
.drawer-total{font-family:var(--font-display);font-size:22px;color:var(--brand)}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--brand);color:var(--btn-ink);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:.75rem 1.6rem;border-radius:999px;z-index:500;
  max-width:calc(100vw - 32px);text-align:center;box-sizing:border-box;
  transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:768px){
    .item-card .item-name{font-size:17px;}
    label{font-size:17px;}
    .drawer-line-name{font-size:17px;}
    .drawer-line-meta, .drawer-line-price, .small, .drawer-breakdown .row {font-size:16px;}
}

@media(max-width:720px){
  .modal-panel{max-height:94vh;width:100%}
  .modal-form{flex-direction:column;overflow-y:auto}
  /* Collapse the left column so its children become direct items of the
     column-flex form, all flowing through one shared scroller (modal-form)
     instead of separate nested scroll regions. The footer is sticky at the
     bottom of that same scroller, so on short viewports (small laptop
     windows, landscape phones) the page scrolls to reveal Add to Cart
     instead of it ever being clipped by the panel's overflow:hidden. */
  .modal-left{display:contents}
  .modal-media{order:1;flex:none;aspect-ratio:auto;height:min(180px,28vh)}
  .modal-left-info{order:2;flex:none;overflow:visible;max-height:none;padding:14px 18px}
  .modal-right{order:3;flex:none;min-height:0}
  /* Scoped to .modal-left/.modal-right (exclusive to the item-customization
     modal) rather than the bare .modal-footer/.modal-scroll classes, which
     the cart drawer (cart-drawer.blade.php) also uses with its own layout —
     an earlier version of this rule accidentally broke the drawer's item
     list scrolling on mobile by matching those shared class names too. */
  .modal-left .modal-footer{order:4;padding:12px 18px;position:sticky;bottom:0;z-index:2;
    box-shadow:0 -8px 16px -8px rgba(0,0,0,.35)}
  .modal-right .modal-scroll{flex:none;overflow:visible;padding:14px 18px 18px}
  .size-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .size-grid{grid-template-columns:1fr}
}

.nav-links:not(.nav-links-mobile){display:none}
.nav-toggle{display:flex}
@media(max-width:600px){
  .brand-address{display:none}
  .cart-btn-label{display:none}
  .cart-btn{padding:9px 11px}
  .hero{min-height:88vh}
  .hero-title{font-size:clamp(2.2rem,11vw,3rem)}
  .hero-tagline{letter-spacing:.18em}
  .hero-icons{margin-bottom:2.25rem}
  .hero-icons img{max-width:240px}
  /* All tabs at once instead of a horizontal-scroll row that hides some
     off-screen — wraps to as many lines as needed (usually 2). */
  .cats{flex-wrap:wrap;overflow-x:visible}
  /* Reviews header: badge wraps under the title instead of forcing the
     row (and page) to scroll horizontally to fit both. */
  #reviews.section-head{flex-wrap:wrap}
  #reviews.section-head .section-line{display:none}
}