/* QR-first order app. Loaded after styles.css — only the deltas. */
body.order-app{
  cursor:auto;
  line-height:1.35;
  min-height:100dvh;
}
body.order-app.standalone .order-bar{
  padding-top:max(12px, env(safe-area-inset-top));
}
body.order-app .install-chip{
  left:max(16px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  cursor:pointer;
  max-width:calc(100vw - 8rem);
}
body.order-app .cursor{display:none}
html{scroll-padding-top:120px}

.order-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 14px max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
}
.order-bar::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.55;
}
.order-brand{
  display:flex;align-items:center;margin:0;line-height:0;
}
.order-brand img{
  height:40px;width:40px;object-fit:cover;display:block;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(232,176,74,.5);
}
.order-badge{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(255,107,53,.45);border-radius:100px;
  padding:5px 12px;margin-left:auto;
  background:rgba(255,107,53,.08);
}
.order-bar-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.order-badge + .order-bar-right{margin-left:0}

/* ---- Signature hero: coals + heat field ---- */
.order-hero{
  position:relative;
  min-height:min(68svh, 560px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.order-hero-photo{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.order-hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  opacity:.28;filter:saturate(.85) contrast(1.08) brightness(.72);
}
#orderField{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.order-hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(13,10,7,.55) 38%, transparent 72%),
    radial-gradient(90% 70% at 50% 100%, rgba(255,107,53,.16), transparent 58%);
}
.order-hero-inner{
  position:relative;z-index:3;
  padding:0 16px 28px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  max-width:720px;width:100%;margin:0 auto;
}
.order-kicker{margin-bottom:16px}
html[lang="el"] .order-kicker{text-transform:none;letter-spacing:.04em}
html[lang="el"] .order-h{letter-spacing:-.03em;line-height:.92}
html[lang="el"] .order-h em{letter-spacing:-.01em}
html[lang="el"] .order-badge{text-transform:none;letter-spacing:.06em}
html[lang="el"] body.order-app .kat-h{line-height:1.08}
.order-h{
  font-family:var(--font-display);
  font-size:clamp(52px,16vw,104px);
  font-weight:700;letter-spacing:-.05em;line-height:.82;
}
.order-h em{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;font-weight:400;
  color:var(--accent);
  letter-spacing:-.02em;
  margin-top:.08em;
  font-size:.62em;
}
.order-h-table{
  display:block;
}
.order-table-lbl{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.2em;
}
html[lang="el"] .order-table-lbl{text-transform:none;letter-spacing:.08em}
.order-table-num{
  display:block;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.06em;
  line-height:.78;
  background:linear-gradient(180deg, #fff4e8 0%, var(--accent) 88%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.order-lede{
  margin-top:18px;max-width:32ch;
  font-size:16px;line-height:1.45;color:var(--ink-dim);
}
body.order-app .order-status{
  margin-top:22px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:none;gap:10px;line-height:1.2;
}
body.order-app .order-status .s-dot{
  width:8px;height:8px;
}
html[lang="el"] body.order-app .order-status{letter-spacing:0}

.order-main{
  padding:8px 16px 128px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  max-width:720px;margin:0 auto;
}

body.order-app .kat-nav{
  top:58px;margin-top:0;margin-bottom:8px;
  padding:10px 0 12px;
  background:linear-gradient(var(--bg) 70%, transparent);
}
body.order-app .kat{scroll-margin-top:128px;margin-top:36px}
body.order-app .kat-head{
  border-bottom:none;
  padding-bottom:4px;
  align-items:baseline;
}
body.order-app .kat-h{
  font-family:var(--font-serif);
  font-style:italic;font-weight:400;
  font-size:clamp(28px,8vw,40px);
  letter-spacing:-.03em;
}
body.order-app .kat-count{
  font-size:11px;letter-spacing:.14em;
}
body.order-app .kat-list{margin-top:8px}

body.order-app .mi{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-areas:"img main";
  column-gap:14px;
  padding:18px 0;
  border-bottom:none;
  position:relative;
  align-items:start;
}
body.order-app .mi::after{
  content:"";position:absolute;left:90px;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg, rgba(245,241,232,.22) 0 2px, transparent 2px 6px);
}
body.order-app .mi:hover{background:transparent}
body.order-app .mi:active{transform:scale(.992)}
body.order-app .mi-img{
  grid-area:img;width:76px;height:76px;border-radius:4px;
  border-color:rgba(255,107,53,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
body.order-app .mi:hover .mi-img{transform:scale(1.04)}
body.order-app .mi-main{grid-area:main;min-width:0}
body.order-app .mi-main h4{
  font-size:clamp(17px,4.4vw,20px);
  font-weight:600;letter-spacing:-.02em;
}
body.order-app .mi-main .add-btn{margin-top:10px}
body.order-app .add-btn{
  width:auto;min-width:max-content;height:34px;padding:0 14px;border-radius:100px;
  background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);
  font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1;
}
body.order-app .add-btn:hover,
body.order-app .add-btn:active{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  transform:none;
}

.order-foot{
  display:flex;flex-wrap:wrap;gap:12px 20px;
  padding:24px 16px max(28px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);
}
.order-foot a,.order-foot button{
  color:var(--ink);background:none;border:0;padding:0;font:inherit;
  letter-spacing:inherit;text-transform:inherit;cursor:pointer;
}
html[lang="el"] .order-foot{text-transform:none;letter-spacing:.04em}

body.order-app .mi{cursor:pointer}
body.order-app .add-btn{cursor:pointer}
body.order-app .cart-fab{cursor:pointer}

body.order-app .cart-fab{
  box-shadow:0 12px 40px rgba(255,107,53,.4), 0 0 0 1px rgba(255,107,53,.25);
}
body.order-app .cart-drawer{
  background:
    linear-gradient(180deg, rgba(255,107,53,.07), transparent 120px),
    var(--bg-2);
}
body.order-app .cart-head h3{
  font-family:var(--font-serif);
  font-style:italic;font-weight:400;
  font-size:clamp(26px,7vw,34px);
}
body.order-app .cart-total{
  font-family:var(--font-serif);
  font-style:italic;font-weight:400;
  letter-spacing:-.03em;
}
body.order-app .dish-modal{
  border-radius:4px;
  overflow:hidden;
}
body.order-app .dish-body h3{
  font-family:var(--font-serif);
  font-style:italic;font-weight:400;
  font-size:clamp(26px,7vw,36px);
}
body.order-app .dish-img{
  mask-image:linear-gradient(to bottom, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent);
}
body.order-app .ok-id{
  font-size:clamp(22px,7vw,28px);
  letter-spacing:.12em;
}

@media(min-width:768px){
  .order-hero{min-height:min(72svh, 680px)}
  .order-hero-inner,.order-bar{padding-left:28px;padding-right:28px}
  .order-main{padding-left:28px;padding-right:28px}
  body.order-app .mi{grid-template-columns:96px minmax(0,1fr)}
  body.order-app .mi::after{left:110px}
  body.order-app .mi-img{width:96px;height:96px}
}

@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  body.order-app .mi:active{transform:none}
}