/* Ladle · restaurant ordering template
   Colors: change the five brand variables in :root. Fonts: see the documentation. */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --green: #173f2f;
  --green-2: #22543f;
  --apricot: #f6a53c;
  --cream: #fbf6ec;
  --ink: #1c2420;

  --white: #fffdf9;
  --ink-soft: #4f5a54;
  --apricot-soft: #fde3bf;
  --line: #e7dfcf;
  --field: #857b6b;
  --on-green: #dfe9e2;
  --danger: #a3271b;

  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --r-sm: 10px;
  --r-md: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.55 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
a { color: inherit; }
a, button, select, label:has(input), summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--r-sm); background: var(--apricot); color: var(--ink); font-weight: 800; }
.skip:focus { top: 12px; }

/* Buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-sm); background: var(--green); color: var(--cream); font-weight: 800; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--green-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--line); color: var(--ink-soft); transform: none; }
.btn-accent { background: var(--apricot); color: var(--ink); }
.btn-accent:hover { background: #ffb85a; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-quiet:hover { background: var(--white); border-color: var(--ink-soft); }
.btn-line { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-line:hover { background: var(--green); color: var(--cream); }
.btn.wide { width: 100%; min-height: 52px; font-size: 17px; }
.link { border: 0; background: none; padding: 6px 0; min-height: 32px; color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }

.cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 12px; background: var(--apricot); color: var(--ink); font-weight: 800; text-decoration: none; }
.cta:hover { background: #ffb85a; }
.cta:active { transform: translateY(1px); }
.ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 0 8px; color: var(--cream); font-weight: 700; text-underline-offset: 4px; }
.ghost:hover { color: #fff; }
.ghost-dark { color: var(--green); }
.ghost-dark:hover { color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

.qty { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.qty button { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--green); background: var(--white); color: var(--green); font-size: 20px; line-height: 1; }
.qty button:hover { background: var(--green); color: var(--cream); }
.qty output { min-width: 22px; text-align: center; }

/* Header */

.top { position: sticky; top: 0; z-index: 20; background: var(--green); color: var(--cream); }
.hd { max-width: var(--wrap); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: var(--serif); font-size: 26px; line-height: 1; text-decoration: none; color: inherit; }
.nav { display: flex; gap: 4px; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--on-green); }
.nav a:hover, .nav a[aria-current="page"] { background: var(--green-2); color: #fff; }
.pill { flex: none; min-height: 44px; padding: 0 6px 0 16px; border: 0; border-radius: 999px; background: var(--apricot); color: var(--ink); font-weight: 800; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.pill:hover { background: #ffb85a; }
.pill-total { padding: 6px 12px; border-radius: 999px; background: var(--white); }
.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.08); } }
@media (max-width: 760px) {
  .brand { font-size: 23px; }
  .pill > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pill { padding: 0 6px; }
}

/* Hero */

.hero { background: var(--green); color: var(--cream); }
.hero-in { max-width: var(--wrap); margin: 0 auto; padding: 28px 20px 44px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero-in { grid-template-columns: 1fr 1fr; padding: 48px 20px 64px; } }
.status { font-size: 15px; color: var(--on-green); }
.status b { color: #fff; }
.hero .status { margin-bottom: 14px; }
.status.is-open b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #7fd39a; vertical-align: 1px; }
.hero h1 { margin-bottom: 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.5vw, 84px); line-height: .98; }
.hero h1 em { font-style: normal; color: var(--apricot); }
.lede { margin-bottom: 24px; font-size: 18px; color: var(--on-green); max-width: 44ch; }
.heroimg { position: relative; margin: 0; }
/* One large rounded corner, repeated on the story photo */
.heroimg img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-md) 120px var(--r-md) var(--r-md); }

/* Round apricot price sticker, tilted, on dish photos */
.stk { position: absolute; display: grid; place-content: center; text-align: center; width: 80px; height: 80px; border-radius: 50%; background: var(--apricot); color: var(--ink); font-weight: 800; line-height: 1.05; rotate: -10deg; }
.stk b { font-size: 17px; }
.stk small { font-size: 12px; font-weight: 700; }
.stk-hero { left: -10px; bottom: 20px; width: 124px; height: 124px; padding: 10px; }
.stk-hero b { font-size: 18px; font-family: var(--serif); font-weight: 400; }
@media (max-width: 899px) { .stk-hero { left: 10px; bottom: 10px; width: 108px; height: 108px; } }

/* Menu */

.menu { max-width: var(--wrap); margin: 0 auto; padding: 36px 20px 120px; }
.tools { position: sticky; top: 64px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; background: var(--cream); }
.search { flex: 1 1 260px; max-width: 380px; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--field); border-radius: 12px; background: var(--white); color: var(--ink-soft); cursor: text; }
.search:focus-within { border-color: var(--green); outline: 3px solid var(--apricot-soft); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; outline: none; color: var(--ink); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.chips button { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); font-weight: 700; }
.chips button:hover { border-color: var(--green); }
.chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--cream); }
@media (max-width: 760px) { .tools { top: 64px; } .search { max-width: none; } }

.cat { padding-top: 32px; }
.cat h2 { margin-bottom: 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 48px); line-height: 1; color: var(--green); }
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.card .ph { position: relative; }
.card .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card .ph .stk { right: 12px; top: 12px; }
.card .body { flex: 1; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.1; color: var(--green); }
.card p { color: var(--ink-soft); font-size: 15px; }
.card .act { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meta { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
/* Dishes without a photo carry the price sticker inside the card */
.card-text { background: var(--apricot-soft); border-color: #f4d3a6; }
.card-text .row-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.card-text .row-top .stk { position: static; }
.is-out .ph img { filter: grayscale(.8); opacity: .75; }
.is-out h3 { color: var(--ink-soft); }

.list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lrow { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--apricot-soft); }
.lrow img, .lrow .dot { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.lrow .dot { display: grid; place-items: center; background: var(--white); color: var(--green); font-family: var(--serif); font-size: 34px; }
.lrow h3 { font-size: 18px; font-weight: 800; }
.lrow p { font-size: 14px; color: var(--ink-soft); }
.lrow .price { font-weight: 800; color: var(--ink); }
@media (max-width: 420px) { .list { grid-template-columns: 1fr; } .lrow { grid-template-columns: 60px 1fr; } .lrow img, .lrow .dot { width: 60px; height: 60px; } .lrow > .btn, .lrow > .qty { grid-column: 2; justify-self: start; } }

.empty { padding: 48px 20px; text-align: center; display: grid; gap: 16px; justify-items: center; color: var(--ink-soft); font-size: 18px; }
.load-error { margin: 20px 0; padding: 16px 18px; border-radius: 12px; background: #fbe3df; color: var(--danger); font-weight: 600; }

/* Story, hours, how */

.story { background: var(--green); color: var(--cream); }
.story-in { max-width: var(--wrap); margin: 0 auto; padding: 36px 20px 56px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .story-in { grid-template-columns: 5fr 7fr; padding: 56px 20px 72px; } }
.story-img { margin: 0; }
.story-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 120px var(--r-md) var(--r-md) var(--r-md); }
.story h1 { margin-bottom: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.5vw, 68px); line-height: 1; }
.story-copy p { margin-bottom: 14px; font-size: 18px; color: var(--on-green); max-width: 52ch; }

.visit-in, .how-in { max-width: var(--wrap); margin: 0 auto; padding: 56px 20px; }
.visit-in { display: grid; gap: 40px; }
@media (min-width: 900px) { .visit-in { grid-template-columns: 1fr 1fr; } }
.visit h2, .how h2 { margin-bottom: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); color: var(--green); }
.visit .status { color: var(--ink-soft); margin-bottom: 14px; }
.visit .status b { color: var(--green); }
.hours { width: 100%; border-collapse: collapse; font-size: 17px; }
.hours th, .hours td { padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-today th, .hours .is-today td { font-weight: 800; color: var(--green); }
.today-tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--apricot); color: var(--ink); font-size: 12px; vertical-align: 2px; }
.find { display: grid; gap: 14px; align-content: start; justify-items: start; }
.map { display: block; width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.map:hover img { transform: scale(1.02); }
.map img { width: 100%; transition: transform .3s ease; }
.how { background: var(--white); border-top: 1px solid var(--line); }
.how ol { margin: 8px 0 28px; padding-left: 22px; display: grid; gap: 14px; max-width: 62ch; font-size: 17px; }
.how li::marker { font-family: var(--serif); color: var(--green); font-size: 20px; }

/* Footer, mobile bar, toast */

.foot-site { background: var(--ink); color: var(--on-green); }
.ft { max-width: var(--wrap); margin: 0 auto; padding: 44px 20px 24px; display: grid; gap: 28px; }
@media (min-width: 860px) { .ft { grid-template-columns: 5fr 4fr 3fr; } }
.ft-col { display: grid; gap: 14px; align-content: start; justify-items: start; }
.ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft-links a { display: inline-block; padding: 4px 0; text-decoration: none; }
.ft-links a:hover { text-decoration: underline; }
.social { display: flex; flex-wrap: wrap; gap: 14px; }
.legal { max-width: var(--wrap); margin: 0 auto; padding: 0 20px 110px; font-size: 14px; color: #b9c9be; }
@media (min-width: 761px) { .legal { padding-bottom: 32px; } }
.ft .brand { color: #fff; margin-bottom: 10px; display: block; }
.ft p { margin-bottom: 6px; }
.ft a { color: #fff; }
.ft .status b { color: #fff; }
.ft-side { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ft .btn-line { color: #fff; border-color: #fff; }
.ft .btn-line:hover { background: #fff; color: var(--ink); }
.lang { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lang select { min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid #ffffff55; background: var(--ink); color: #fff; }

.mbar { position: fixed; inset: auto 12px 12px; z-index: 15; display: none; align-items: center; justify-content: space-between; min-height: 60px; padding: 8px 8px 8px 18px; border: 0; border-radius: 16px; background: var(--green); color: var(--cream); font-weight: 800; font-size: 17px; box-shadow: 0 10px 24px #173f2f55; }
.mbar-go { padding: 10px 14px; border-radius: var(--r-sm); background: var(--apricot); color: var(--ink); }
@media (max-width: 760px) { .mbar:not([hidden]) { display: flex; } }

.toast { position: fixed; left: 50%; top: 76px; z-index: 30; translate: -50% -20px; opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 8px 20px #0003; transition: opacity .2s, translate .2s; max-width: calc(100% - 24px); }
.toast.show { opacity: 1; translate: -50% 0; }

/* Dialogs */

.dlg { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; color: var(--ink); }
.dlg::backdrop { background: #0f1a14a6; }
.dlg:not(.side) { width: min(560px, calc(100% - 24px)); margin: auto; }
.dlg.side { margin: 0 0 0 auto; width: min(460px, 100%); height: 100%; }
.dlg[open] { animation: rise .22s ease; }
.dlg.side[open] { animation: slide .25s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.sheet { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-md); max-height: calc(100dvh - 24px); overflow: hidden; }
.side .sheet { height: 100%; max-height: none; border-radius: 0; }
.sheet .pad { padding: 24px; overflow-y: auto; flex: 1; }
.sheet .foot { padding: 14px 24px 18px; border-top: 1px solid var(--line); background: var(--white); display: grid; gap: 8px; }
.item .foot { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); font-size: 26px; line-height: 1; box-shadow: 0 2px 8px #0002; }
.x:hover { background: var(--cream); }
/* Sheets focus their heading for screen readers, so no ring is needed there */
.sheet h2[tabindex="-1"]:focus { outline: none; }
.hero-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.item .pad { display: grid; gap: 16px; align-content: start; }
.item h2, .cart h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--green); padding-right: 44px; }
.desc { color: var(--ink-soft); }
.opt { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.opt legend { margin-bottom: 8px; padding: 0; font-weight: 800; }
.req { font-weight: 500; font-size: 14px; color: var(--ink-soft); }
.choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.choice:hover { border-color: var(--green); }
.choice:has(input:checked) { border-color: var(--green); background: #eef4ef; }
.choice input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; flex: none; }
.choice span:first-of-type { flex: 1; }
.plus { font-weight: 700; color: var(--ink-soft); }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.field > span, .field > legend { font-weight: 700; font-size: 15px; padding: 0; }
.field input:not([type=radio]):not([type=checkbox]), .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 10px; background: #fff; }
.field textarea { resize: vertical; }
.field input:not([type=radio]):focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--apricot-soft); border-color: var(--green); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.err { color: var(--danger); font-size: 14px; font-weight: 600; }
.err.big { padding: 10px 12px; border-radius: 10px; background: #fbe3df; }
.qty.big button { width: 48px; height: 48px; }

.lines { list-style: none; margin: 18px 0; padding: 0; display: grid; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ln-main { display: grid; gap: 2px; }
.ln-main small { color: var(--ink-soft); font-size: 14px; }
.ln-main .note { font-style: italic; }
.ln-actions { display: flex; gap: 14px; }
.ln-side { display: grid; justify-items: end; gap: 8px; }
.ln-price { font-weight: 800; }
.line .qty button { width: 38px; height: 38px; font-size: 18px; }
.sum { display: grid; gap: 6px; margin-top: 16px; font-size: 16px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum .tot { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 800; font-size: 20px; }
.empty-cart { display: grid; gap: 16px; align-content: start; justify-items: start; }
.empty-cart p { color: var(--ink-soft); }
.empty-cart b { color: var(--ink); }

.co { display: grid; gap: 16px; align-content: start; }
.back { justify-self: start; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: var(--cream); }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: 10px; font-weight: 700; text-align: center; }
.seg label:hover span { background: #fff; }
.seg input:checked + span { background: var(--green); color: var(--cream); }
.seg input:focus-visible + span { outline: 3px solid var(--apricot); outline-offset: 2px; }
.when { display: grid; gap: 8px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: 14px; color: var(--ink-soft); }
.hint.small { text-align: center; }
.hint.warn { padding: 10px 12px; border-radius: 10px; background: var(--apricot-soft); color: var(--ink); font-weight: 600; }
.hint.strong { padding: 10px 12px; border-radius: 10px; background: #eef4ef; color: var(--green); font-weight: 700; }
.sent { display: grid; gap: 16px; align-content: start; }

/* Announcement bar */

.notice { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 52px; background: var(--apricot); color: var(--ink); font-size: 15px; font-weight: 700; text-align: center; }
.notice[hidden] { display: none; }
.notice a { text-underline-offset: 3px; }
.notice-x { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; }
.notice-x:hover { background: #ffffff66; }

/* Header actions and small-screen navigation */

.hd-actions { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--green-2); color: var(--cream); }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; margin: auto; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .burger { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px 12px 16px; background: var(--green); border-top: 1px solid var(--green-2); box-shadow: 0 16px 24px #0004; }
  .nav-open .nav { display: flex; }
  .nav a { min-height: 48px; font-size: 18px; }
}

/* Shared page pieces */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
.page-head { background: var(--green); color: var(--cream); }
.page-head .wrap { padding-top: 40px; padding-bottom: 44px; }
.page-head h1 { margin: 6px 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 68px); line-height: 1; }
.page-head .lede { margin: 0; }
.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 22px; }
.band-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 48px); line-height: 1; color: var(--green); }
.link-arrow { font-weight: 800; color: var(--green); text-underline-offset: 4px; }
.link-arrow::after { content: " →"; }
.band { padding: 56px 0 24px; }
.band .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.ways { padding: 48px 0; }
.ways-in { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .ways-in { grid-template-columns: 5fr 7fr; gap: 56px; } }
.ways-img { margin: 0; }
.ways-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md) 120px var(--r-md) var(--r-md); }
.ways h2 { margin-bottom: 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 52px); line-height: 1; color: var(--green); }
.ways-list { margin: 0 0 28px; display: grid; gap: 0; }
.ways-list div { padding: 16px 0; border-top: 1px solid var(--line); }
.ways-list div:last-child { border-bottom: 1px solid var(--line); }
.ways-list dt { font-family: var(--serif); font-size: 24px; color: var(--green); }
.ways-list dd { margin: 4px 0 0; color: var(--ink-soft); }

.duo { padding: 24px 0 56px; }
.duo-in { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; display: grid; gap: 20px; }
@media (min-width: 760px) { .duo-in { grid-template-columns: 1fr 1fr; } }
.duo-card { display: grid; gap: 12px; align-content: start; padding: 32px; border-radius: var(--r-md); background: var(--green); color: var(--cream); text-decoration: none; }
.duo-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.05; }
.duo-card p { color: var(--on-green); max-width: 40ch; }
.duo-card .link-arrow { color: var(--apricot); }
.duo-card:hover .link-arrow { text-decoration: underline; }
.duo-alt { background: var(--apricot-soft); color: var(--ink); }
.duo-alt h2, .duo-alt .link-arrow { color: var(--green); }
.duo-alt p { color: var(--ink-soft); }

.strip { padding: 24px 0 56px; }
.strip-row { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.strip-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
@media (max-width: 700px) { .strip-row { grid-template-columns: 1fr 1fr; } }

/* Dietary tags and filters */

.tags { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 2px 9px; border-radius: 999px; background: #eef4ef; color: var(--green); font-size: 12px; font-weight: 700; }
.tag-spicy { background: #fbe3df; color: var(--danger); }
.tag-nuts { background: #f3eadb; color: #6b4e1f; }
.lrow .tags { margin-top: 6px; }
.diet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 4px; }
.diet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.diet-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-right: 4px; }
.diet button { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 700; }
.diet button:hover { border-color: var(--green); }
.diet button[aria-pressed="true"] { background: #eef4ef; border-color: var(--green); color: var(--green); }
.diet button[aria-pressed="true"]::before { content: "✓ "; }
.print-btn { min-height: 40px; }
.item .copy { justify-self: start; }

/* Checkout extras */

.promo-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo label { font-weight: 700; font-size: 15px; }
.sum .disc { color: var(--green); font-weight: 700; }
.reorder { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--apricot-soft); }
.reorder p { color: var(--ink); }

/* Booking and catering */

.book { padding: 40px 0 72px; }
.book-in { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 960px) { .book-in { grid-template-columns: 7fr 5fr; } .book-in:has(.offer) { grid-template-columns: 5fr 7fr; } }
.form-card { padding: 28px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
@media (max-width: 560px) { .form-card { padding: 20px 16px; } }
.wa-form { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.sent-panel { display: grid; gap: 14px; }
.sent-panel h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--green); }
.sent-panel h2:focus { outline: none; }
.book-side { display: grid; gap: 14px; }
.book-side img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md) 90px var(--r-md) var(--r-md); }
.book-side h2, .offer h2 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--green); }
.book-side .status { color: var(--ink-soft); }
.book-side .status b { color: var(--green); }
.offer { display: grid; gap: 14px; }
.offer img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 90px var(--r-md) var(--r-md) var(--r-md); }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; }
.offer-list li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.offer-list b { display: block; color: var(--ink); font-size: 17px; }

/* Gallery and lightbox */

.gallery-wrap { max-width: var(--wrap); margin: 0 auto; padding: 40px 20px 72px; }
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gallery a { display: block; border-radius: 16px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .3s ease; }
.gallery a:hover img { transform: scale(1.03); }
.dlg.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; background: #0d1a14f2; color: #fff; }
.lb-in { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 64px 72px 24px; gap: 12px; }
.lb-in img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lb-in figcaption { text-align: center; color: var(--on-green); }
.lb-count { margin-left: 8px; color: #b9c9be; font-size: 14px; }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 32px; line-height: 1; }
.lb-nav:hover { background: #ffffff38; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 600px) { .lb-in { padding: 64px 12px 90px; } .lb-nav { top: auto; bottom: 20px; translate: none; } .lb-prev { left: calc(50% - 64px); } .lb-next { right: calc(50% - 64px); } }

/* FAQ and long text */

.faq { padding: 56px 0 72px; }
.faq h2 { margin-bottom: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); color: var(--green); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 10px 0; font-weight: 800; font-size: 18px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--green); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--ink-soft); max-width: 64ch; }
.prose { padding: 48px 0 72px; }
.prose h2 { margin: 28px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--green); }
.prose p { margin-bottom: 12px; font-size: 17px; max-width: 66ch; }

/* 404 */

.lost { min-height: 100dvh; display: grid; place-items: center; background: var(--green); color: var(--cream); }
.lost-in { max-width: 560px; padding: 40px 24px; display: grid; gap: 18px; justify-items: start; }
.lost h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 8vw, 72px); line-height: 1; }
.lost p { font-size: 18px; color: var(--on-green); }
.stk-lost { position: static; width: 110px; height: 110px; }
.stk-lost b { font-size: 30px; font-family: var(--serif); font-weight: 400; }
.lost .ghost-dark { color: var(--cream); }

@media print {
  .notice, .top, .page-head, .tools, .diet-row, .foot-site, .mbar, .toast, .card .act, .lrow > .btn, .lrow > .qty, .card .ph, .lrow img, .lrow .dot { display: none !important; }
  body { background: #fff; }
  .menu { padding: 0; }
  .grid, .list { display: block; }
  .card, .lrow { display: block; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: none; padding: 8px 0; break-inside: avoid; }
  .card .body { padding: 0; }
  .card-text .row-top, .card .stk { position: static; display: inline; width: auto; height: auto; background: none; rotate: none; }
  .cat h2 { font-size: 28px; margin: 16px 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}