:root{
  --bg:#0b1220;          /* deep navy */
  --card:#101a2e;        /* slightly lighter */
  --muted:#a6b2c6;       /* text-muted */
  --text:#e7eefc;        /* primary text */
  --accent:#22d3ee;      /* cyan accent */
  --ring:#1f2a44;        /* outlines */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
img{max-width:100%;display:block}

.wrap{
  max-width:860px;
  margin:48px auto 80px;
  padding:0 16px;
}

.header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(34,211,238,0) 70%), var(--card);
  border:1px solid #14213b;
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  font-weight:700;background:#12203a;color:#e7eefc;border:1px solid var(--ring);
}
.name{font-size:20px;font-weight:800;letter-spacing:.2px}
.addr{font-size:12px;color:var(--muted);margin-top:2px}
.qr{width:110px;height:110px;object-fit:contain;opacity:.9}

.cat{
  margin:28px 0;
  background:var(--card);
  border:1px solid #14213b;
  border-left:4px solid var(--accent);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.cat h2{
  margin:0;
  padding:14px 16px;
  font-size:15px;
  color:#bfefff;
  letter-spacing:.3px;
  border-bottom:1px solid #14213b;
  background:linear-gradient(180deg, rgba(34,211,238,.06), rgba(34,211,238,0));
}

.item{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px;
  border-bottom:1px dashed #1a2745;
}
.item:last-child{border-bottom:none}
.meta{flex:1;min-width:0}
.name{
  font-size:18px;font-weight:700;color:#eaf2ff;line-height:1.25;
  text-wrap:balance;
}
.desc{
  margin-top:4px;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.price{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  min-width:96px;text-align:right;font-weight:700;
  color:#d3ecff;
}

.item:hover{background:#0f1a31}

footer, .powered{opacity:.7;color:var(--muted)}

@media (max-width:640px){
  .wrap{margin:24px auto 56px}
  .header{grid-template-columns:40px 1fr 64px;padding:14px}
  .qr{width:64px;height:64px}
  .name{font-size:18px}
  .cat{margin:18px 0;border-left-width:3px}
  .item{padding:14px}
  .price{min-width:auto;margin-left:12px}
}

@media (prefers-color-scheme:light){
  :root{--bg:#0c1222;--card:#0f1830;--text:#f5f9ff}
}

/* Focus states for a11y */
a:focus, button:focus, .item:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}

/* Print / PDF (QR menus) */
@media print{
  body{background:#fff;color:#111}
  .header,.cat{box-shadow:none;border-color:#ddd;background:#fff}
  .qr{width:80px;height:80px}
  .price{color:#111}
}
/* --- item thumbnails --- */
.item { display: flex; align-items: center; gap: 12px; }
.item .thumb{
  width:72px; height:72px; border-radius:12px; object-fit:cover;
  border:1px solid #1c2a4a; background:#0e172a; flex:0 0 auto;
}
@media (max-width:640px){
  .item .thumb{ width:64px; height:64px; }
}

/* order button */
.meta .btn-order{
  display:inline-block; margin-top:6px; padding:6px 10px;
  font-size:12px; font-weight:600; text-decoration:none;
  border:1px solid #1f2a44; border-radius:10px;
  background:#0f1a31; color:#cfe9ff;
}
.meta .btn-order:hover{ background:#132041 }
@media (max-width:640px){
  .meta .btn-order{ margin-top:8px; }
}

/* header action buttons */
.actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.actions .btn{
  display:inline-block; padding:6px 10px; font-size:12px; font-weight:600;
  text-decoration:none; border:1px solid #1f2a44; border-radius:10px;
  background:#0f1a31; color:#cfe9ff;
}
.actions .btn:hover{ background:#132041 }

/* Hide buttons in print; clean print page */
@media print{
  .actions{ display:none !important; }
}

/* A4 PDF size + margins */
@page{ size: A4; margin: 12mm; }

/* ----- Compact layout ----- */
.compact .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #223557}
.compact .row .n{font-weight:600}
.compact .row .p{opacity:.9}
.compact .d{opacity:.75;font-size:.95rem;margin:-4px 0 8px 0}

/* ----- Cards layout ----- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:#0b162b;border:1px solid #16243f;border-radius:16px;overflow:hidden}
.card-img{width:100%;height:150px;object-fit:cover;display:block}
.card-body{padding:10px}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}

/* ensure header tools layout */
.header{display:flex;align-items:center}
.header .qr{display:block;width:120px;height:120px;border-radius:8px}
.header .actions{margin-left:12px}

/* === Header as 2-row grid === */
.header{
  display:grid !important;
  grid-template-columns:auto 1fr auto; /* [logo/img] [name/address] [QR] */
  grid-template-rows:auto auto;        /* row1: info  row2: buttons */
  column-gap:16px; row-gap:12px; align-items:center;
}

/* left image/logo occupies first column (both rows) */
.header .logo, .header .logo-img{
  grid-column:1; grid-row:1 / span 2;
  width:96px; height:96px; border-radius:12px; object-fit:cover;
}

/* the name/address block is the 2nd direct <div> inside .header */
.header > div:nth-of-type(2){ grid-column:2; grid-row:1; }

/* QR on the right, top row */
.header .qr{ grid-column:3; grid-row:1; width:120px; height:120px; border-radius:8px }

/* All direct action controls go to row-2 (toggle + download + print) */
.header > .actions,
.header > a,
.header > button{ grid-column:2 / span 2; grid-row:2; }

.header > .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.header > a, .header > button{ margin-right:8px }

/* Mobile stacking */
@media (max-width: 640px){
  .header{ grid-template-columns:1fr auto; grid-template-rows:auto auto auto; }
  .header .logo, .header .logo-img{ grid-column:1; grid-row:1 }
  .header > div:nth-of-type(2){ grid-column:1 / span 2; grid-row:2 }
  .header .qr{ grid-column:2; grid-row:1 }
  .header > .actions, .header > a, .header > button{ grid-column:1 / span 2; grid-row:3 }
}

/* --- Header: two-row layout (force placement) --- */
.header{
  display:grid !important;
  grid-template-columns:auto 1fr auto; /* logo | info | QR */
  grid-template-rows:auto auto;        /* row1: info, row2: actions */
  column-gap:16px; row-gap:12px; align-items:center;
}
.header .logo, .header .logo-img{
  grid-column:1; grid-row:1 / span 2;
  width:96px; height:96px; border-radius:12px; object-fit:cover;
}
.header .info{ grid-column:2 !important; grid-row:1 !important; }
.header .qr{ grid-column:3 !important; grid-row:1 !important; width:120px; height:120px; border-radius:8px }
/* all action controls (toggle + download + print) forced to row-2 */
.header > .actions,
.header > a,
.header > button{ grid-column:2 / span 2 !important; grid-row:2 !important; }
.header > .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.header > a, .header > button{ margin-right:8px }

/* Mobile */
@media (max-width:640px){
  .header{ grid-template-columns:1fr auto; grid-template-rows:auto auto auto; }
  .header .logo, .header .logo-img{ grid-column:1; grid-row:1 }
  .header .info{ grid-column:1 / span 2 !important; grid-row:2 !important; }
  .header .qr{ grid-column:2; grid-row:1 }
  .header > .actions, .header > a, .header > button{ grid-column:1 / span 2 !important; grid-row:3 !important; }
}

/* ---- Header actions: row-2, left aligned, clickable ---- */
.header > .actions{ 
  grid-column:2 / span 2 !important; 
  grid-row:2 !important; 
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-left:0 !important;
  position:relative; z-index:2;  /* make sure QR doesn't steal clicks */
}
.header > a, .header > button{
  grid-column:2 / span 2 !important; 
  grid-row:2 !important;
}
.header .qr{ z-index:1; }

/* Row-2 alignment in header */
.header > a, .header > button{
  grid-column:2 !important;   /* left, under name */
  grid-row:2 !important;
}
.header > .actions{
  grid-column:3 !important;   /* right, under QR */
  grid-row:2 !important;
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}

/* ----- Header 2-row grid (already set), place groups clearly ----- */
.header .qr{ grid-column:3; grid-row:1; z-index:1; }
.header .info{ grid-column:2; grid-row:1; }

/* Row 2 LEFT: Download / Print */
.header > .tools{
  grid-column:2; grid-row:2;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}

/* Row 2 RIGHT: Layout toggle */
.header > .actions{
  grid-column:3; grid-row:2;
  display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}

/* Make sure old rules on .header > a / > button don't fight us */
.header > a, .header > button{ grid-column:auto; grid-row:auto; }

/* === Row-2 bar: split into left (tools) + right (layout) === */
.header > .actions{
  grid-column: 2 / span 2 !important;   /* span under name + QR */
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr auto;      /* left = tools, right = layout */
  gap: 8px; align-items: center;
}

/* Left side: Download / Print */
.header .actions .tools{
  justify-self: start;
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Right side: Default / Cards */
.header .actions > a.btn{
  justify-self: end;
}
.header .actions > a.btn + a.btn{ margin-left: 8px; }

/* Avoid old rules fighting placement */
.header > .tools{ grid-column:auto; grid-row:auto; }
.header > a, .header > button{ grid-column:auto; grid-row:auto; }
/* Actions bar must be clickable and on top */
.header > .actions{
  z-index: 5;               /* ensure above QR/others */
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr auto; /* left: tools, right: layout */
  gap: 8px; align-items: center;
}
.header .actions .tools{ justify-self: start; display:flex; gap:8px; flex-wrap:wrap; }
.header .actions .layout{ justify-self: end; display:flex; gap:8px; }
.header .actions .layout a{ pointer-events: auto; } /* just in case */
.header .qr{ z-index: 1; }  /* QR stays below actions */
/* ===== HEADER FIX OVERRIDES (2 rows) ===== */
.header{
  /* keep your look, but switch to 2-row grid */
  grid-template-columns: 1fr minmax(260px, 520px) 220px;
  grid-template-rows: auto auto;
  gap: 12px 16px;
}

/* Row 1: info center, QR right */
.header .info{ grid-column:2; grid-row:1; }
.header .qr{ grid-column:3; grid-row:1; justify-self:end; }

/* Row 2: Tools left, Actions right */
.header > .tools{
  grid-column:2; grid-row:2;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.header > .actions{
  grid-column:3; grid-row:2;
  display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}

/* Neutralize any older direct-child grid placement */
.header > a, .header > button, .header > *{ grid-column:auto; grid-row:auto; }

/* Buttons (match your theme) */
.btn{
  border:1px solid var(--ring);
  background:transparent;
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px); }

/* Mobile: stack neatly */
@media (max-width: 790px){
  .header{
    grid-template-columns: 1fr 120px; /* text | qr */
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
  }
  .header .info{ grid-column:1; grid-row:1; }
  .header .qr{ grid-column:2; grid-row:1; justify-self:end; }
  .header > .tools{ grid-column:1 / -1; grid-row:2; justify-content:flex-start; }
  .header > .actions{ grid-column:1 / -1; grid-row:3; justify-content:flex-end; }
}

/* Print: compact and clean */
@media print{
  .btn{ display:none !important; }
}
/* ===== FINAL HEADER PLACEMENT FIX ===== */
/* 2-row grid with explicit cells */
.header{
  grid-template-columns: 64px minmax(280px, 520px) 220px; /* logo | info | QR/actions */
  grid-template-rows: auto auto; /* row1 (title/qr) + row2 (buttons) */
  gap: 12px 16px;
}

/* Put logo in col 1, row 1 */
.header .logo,
.header .logo-img{ grid-column:1; grid-row:1; align-self:center; }

/* Row 1: info center, QR right */
.header .info{ grid-column:2; grid-row:1; align-self:center; }
.header .qr{ grid-column:3; grid-row:1; justify-self:end; }

/* Row 2: Tools left, Actions right */
.header > .tools{
  grid-column:2; grid-row:2;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.header > .actions{
  grid-column:3; grid-row:2;
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}

/* Make sure no old rules override placement */
.header > a, .header > button, .header > *{ grid-column:auto; grid-row:auto; }

/* Typography spacing so text doesn't collide */
.header .name{ margin:0; line-height:1.15; font-size: clamp(20px, 3vw, 28px); }
.header .addr{ margin-top:2px; }

/* QR + logo sizing (avoid squeeze) */
.header .qr{ width:140px; height:140px; object-fit:contain; }
.header .logo-img{ width:48px; height:48px; object-fit:cover; border-radius:12px; }

/* Mobile stack */
@media (max-width: 790px){
  .header{
    grid-template-columns: 1fr 120px;      /* info | qr  */
    grid-template-rows: auto auto auto;    /* info, tools, actions */
    gap: 10px 12px;
  }
  .header .logo, .header .logo-img{ grid-column:1; grid-row:1; }
  .header .info{ grid-column:1; grid-row:1; }
  .header .qr{ grid-column:2; grid-row:1; justify-self:end; }
  .header > .tools{ grid-column:1 / -1; grid-row:2; }
  .header > .actions{ grid-column:1 / -1; grid-row:3; justify-content:flex-end; }
}
/* --- HEADER CONTAINER OVERRIDE (force 2 rows) --- */
.header{
  grid-template-columns: 64px minmax(280px, 1fr) 220px; /* logo | info | QR */
  grid-template-rows: auto auto;                        /* row1 + row2 */
  gap: 12px 16px;
}
.header .logo,
.header .logo-img{ grid-column:1; grid-row:1; align-self:center; width:48px; height:48px; border-radius:12px; }
/* === LOCK HEADER LAYOUT (final override) === */
.wrap > .header{
  grid-template-columns: 64px minmax(280px, 1fr) 220px !important; /* logo | info | QR */
  grid-template-rows: auto auto !important;                         /* row1 + row2 */
  gap: 12px 16px !important;
}

/* Row 1 placement */
.wrap > .header .logo,
.wrap > .header .logo-img{ grid-column:1; grid-row:1; align-self:center; width:48px; height:48px; border-radius:12px; }
.wrap > .header .info{ grid-column:2; grid-row:1; align-self:center; }
.wrap > .header .qr{ grid-column:3; grid-row:1; justify-self:end; width:140px !important; height:140px !important; object-fit:contain; }

/* Row 2 placement */
.wrap > .header > .tools{
  grid-column:2; grid-row:2;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.wrap > .header > .actions{
  grid-column:3; grid-row:2;
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}

/* Neutralizer (keep it) */
.wrap > .header > a,
.wrap > .header > button,
.wrap > .header > *{ grid-column:auto; grid-row:auto; }

/* Mobile */
@media (max-width:790px){
  .wrap > .header{
    grid-template-columns: 1fr 120px !important;
    grid-template-rows: auto auto auto !important;
    gap:10px 12px !important;
  }
  .wrap > .header .logo, .wrap > .header .logo-img{ grid-column:1; grid-row:1; }
  .wrap > .header .info{ grid-column:1; grid-row:1; }
  .wrap > .header .qr{ grid-column:2; grid-row:1; justify-self:end; width:110px !important; height:110px !important; }
  .wrap > .header > .tools{ grid-column:1 / -1; grid-row:2; }
  .wrap > .header > .actions{ grid-column:1 / -1; grid-row:3; justify-content:flex-end; }
}
/* --- ensure header buttons are clickable and above other elements --- */
.wrap > .header { position: relative; }
.wrap > .header .qr { z-index: 1; }            /* QR behind */
.wrap > .header > .tools,
.wrap > .header > .actions { position: relative; z-index: 3; }

.btn { pointer-events: auto; }                 /* just in case */

/* ===== New Minimal Header (mh) ===== */
.mh{
  display:grid;
  grid-template-columns: 64px minmax(280px, 1fr) 220px;
  grid-template-rows: auto auto;
  gap: 12px 16px;
  align-items:center;
  background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(34,211,238,0) 70%), var(--card);
  border:1px solid #14213b;
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  position:relative;
}
.mh-logo,
.mh-logo-img{ grid-column:1; grid-row:1; align-self:center; }
.mh-info{ grid-column:2; grid-row:1; align-self:center; }
.mh-qr{ grid-column:3; grid-row:1; justify-self:end; }

.mh-tools{
  grid-column:2; grid-row:2;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.mh-actions{
  grid-column:3; grid-row:2;
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}
.mh-logo{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  font-weight:700;background:#12203a;color:var(--text);border:1px solid var(--ring);
}
.mh-logo-img{ width:48px;height:48px;object-fit:cover;border-radius:12px; }
.mh-qr{ width:140px;height:140px;object-fit:contain; }
.mh-name{ margin:0; line-height:1.15; font-weight:800; font-size: clamp(22px, 3vw, 36px); }
.mh-addr{ margin-top:3px; color:var(--muted); font-size:14px; }

.mh-btn{
  border:1px solid var(--ring);
  background:transparent;
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.mh-btn:active{ transform: translateY(1px); }
.mh-qr{ z-index:1; }
.mh-tools, .mh-actions{ position:relative; z-index:3; }
.mh-btn{ pointer-events:auto; }

@media (max-width: 790px){
  .mh{
    grid-template-columns: 1fr 120px;
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
  }
  .mh-logo, .mh-logo-img{ grid-column:1; grid-row:1; }
  .mh-info{ grid-column:1; grid-row:1; }
  .mh-qr{ grid-column:2; grid-row:1; justify-self:end; width:110px; height:110px; }
  .mh-tools{ grid-column:1 / -1; grid-row:2; }
  .mh-actions{ grid-column:1 / -1; grid-row:3; justify-content:flex-end; }
}

/* ====== Header: 2-row grid, clear groups ====== */
.header{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}
.header .qr{ grid-column:1; grid-row:1 / span 2; display:flex; align-items:center; gap:12px; }
.header .info{ grid-column:2; grid-row:1; }
.header .tools{ grid-column:2; grid-row:2; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.header .actions{ grid-column:3; grid-row:1 / span 2; display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }

/* simple button look */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #ddd; border-radius:12px;
  text-decoration:none; font-weight:600; cursor:pointer;
}
.btn:hover{ background:#f7f7f7; }

/* owner/customer visibility helpers */
.owner-only{ display:inherit; }
.customer-only{ display:inherit; }
body.mode-customer .owner-only{ display:none !important; }
body.mode-owner .customer-only{ display:none !important; }

/* responsive: stack on small screens */
@media (max-width: 640px){
  .header{ grid-template-columns: 1fr; grid-template-rows: auto; }
  .header .qr, .header .info, .header .tools, .header .actions{
    grid-column:1; grid-row:auto;
    justify-content:flex-start;
  }
}

/* === UI Polish Set 1 (layout + readability) === */
:root{
  --pad:12px;
}
.wrap{ max-width:900px; margin:48px auto 80px; padding:0 16px; }
.menu h2{ font-size:1.1rem; margin:18px 0 8px 0; }
.items{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:720px){ .items{ grid-template-columns:1fr 1fr; } }
article{ border:1px solid #e5e7eb22; border-radius:14px; padding:var(--pad); background:var(--card, rgba(255,255,255,0.02)); }
article h3{ font-size:1rem; }

.header .tools .btn, .header .actions .btn{ padding:8px 12px; border-radius:10px; }
.btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb40; }
.btn:hover{ background:#f7f7f720; }

/* Tighten mobile header spacing */
@media (max-width: 640px){
  .header{ gap:8px; margin-bottom:12px; }
}