/* /fonts/fonts.css */
/* Plus Jakarta Sans (variable, 400-800), self-hosted from Google Fonts v12. Licence: /fonts/OFL.txt */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /demo-shop.css */
/* Example shop sites. Each shop sets --brand, --ink and --paper on <body>. */
* { box-sizing: border-box; }
.shop {
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --muted: color-mix(in srgb, var(--ink) 68%, var(--paper));
  --card: color-mix(in srgb, var(--paper) 92%, var(--ink));
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 "Plus Jakarta Sans", system-ui, sans-serif;
}
.shop--dark { --card: color-mix(in srgb, var(--paper) 88%, white); }
.shop a { color: inherit; }
.shop-skip { position: absolute; left: -999px; }
.shop-skip:focus { left: 12px; top: 12px; z-index: 50; padding: 8px 12px; background: var(--paper); }
.shop :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.demo-bar {
  position: sticky; top: 0; z-index: 30; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center;
  padding: 8px 16px; background: #14122b; color: #fff; font-size: 0.85rem; text-align: center;
}
.demo-bar strong { padding: 2px 8px; border-radius: 4px; background: #ffcf33; color: #14122b; letter-spacing: 0.08em; }
.demo-bar a { color: #ffcf33; font-weight: 700; }
.demo-short { display: none; }
@media (max-width: 700px) {
  .demo-bar { flex-wrap: nowrap; gap: 8px; font-size: 0.8rem; }
  .demo-bar .demo-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .demo-short { display: inline; }
}

.shop-header {
  display: flex; align-items: center; gap: 20px; padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.shop-logo { font-weight: 800; font-size: 1.25rem; text-decoration: none; color: var(--brand) !important; letter-spacing: -0.02em; }
.shop-nav { display: flex; gap: 18px; flex: 1; overflow-x: auto; }
.shop-nav a { text-decoration: none; font-weight: 600; white-space: nowrap; color: var(--muted); }
.shop-nav a:hover { color: var(--ink); }
.shop-basket-toggle {
  border: 0; border-radius: 999px; padding: 10px 18px; background: var(--brand); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}

.shop-hero { position: relative; min-height: 340px; display: grid; align-items: end; overflow: hidden; background: #000; }
.shop-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.shop-hero-text { position: relative; padding: 40px clamp(16px, 4vw, 40px); color: #fff; max-width: 760px; }
.shop-hero-text h1 { margin: 4px 0 8px; font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; }
.shop-hero-text p { margin: 0; font-weight: 600; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.shop-intro { font-weight: 500 !important; max-width: 52ch; }
.shop-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.shop-facts li { padding: 4px 12px; border-radius: 999px; background: rgb(0 0 0 / 0.55); font-size: 0.85rem; font-weight: 600; }
.demo-stamp {
  position: absolute; top: 22px; right: -42px; transform: rotate(35deg); width: 200px; padding: 6px 0;
  background: #ffcf33; color: #14122b; text-align: center; font-weight: 800; letter-spacing: 0.25em; box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}
.demo-stamp-inline { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 4px; background: #ffcf33; color: #14122b; font-weight: 800; letter-spacing: 0.2em; }

.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; padding: 8px clamp(16px, 4vw, 40px) 64px; max-width: 1280px; margin: 0 auto; }
.shop-menu h2 { margin: 36px 0 14px; font-size: 1.6rem; letter-spacing: -0.02em; scroll-margin-top: 120px; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.shop-item {
  position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 120px; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.shop-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.shop-item img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; }
.shop-item-text { display: flex; flex-direction: column; gap: 4px; }
.shop-item-text > span:not(.shop-price) { color: var(--muted); font-size: 0.92rem; }
.shop-price { margin-top: auto; font-weight: 700; }
.shop-add {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.3rem; font-weight: 700;
}
.shop-note { margin-top: 32px; color: var(--muted); font-size: 0.85rem; }

.shop-basket { position: sticky; top: 64px; align-self: start; margin-top: 36px; }
.shop-basket-inner { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.shop-basket-head { display: flex; justify-content: space-between; align-items: center; }
.shop-basket-head h2 { margin: 0; font-size: 1.3rem; }
.shop-basket-close { display: none; border: 0; background: none; color: inherit; font-size: 1.8rem; cursor: pointer; }
.shop-basket-demo { margin: 4px 0 12px; font-size: 0.8rem; font-weight: 700; color: var(--brand); }
.shop-empty, .shop-small { color: var(--muted); font-size: 0.85rem; }
.shop-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shop-line span { display: block; color: var(--muted); font-size: 0.85rem; }
.shop-line .shop-line-price { color: inherit; font-weight: 600; font-size: 1rem; }
.shop-line-qty { display: flex; gap: 6px; }
.shop-line-qty button, .shop-qty button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.shop-fulfilment { margin: 16px 0 8px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.shop-fulfilment legend { font-weight: 700; margin-bottom: 6px; }
.shop-fulfilment .shop-small { flex-basis: 100%; margin: 0; }
.shop-time { display: grid; gap: 4px; font-weight: 700; }
.shop-time select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: inherit; font: inherit; }
.shop-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 16px 0; }
.shop-totals dd { margin: 0; text-align: right; }
.shop-totals dt:last-of-type, .shop-totals dd:last-of-type { font-weight: 800; font-size: 1.1rem; padding-top: 6px; border-top: 1px solid var(--line); }
.shop-checkout {
  width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--brand); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.shop-checkout:disabled { opacity: 0.45; cursor: not-allowed; }

.shop-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.shop-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.shop-dialog form { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.shop-dialog img { width: 100%; height: clamp(140px, 28dvh, 240px); flex: none; object-fit: cover; display: block; }
.shop-dialog-body { padding: 20px 20px 0; overflow-y: auto; overscroll-behavior: contain; }
.shop-dialog-body h2 { margin: 0 0 4px; }
.shop-dialog-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 1.3rem; cursor: pointer; }
.shop-group { margin: 16px 0 0; padding: 0; border: 0; }
.shop-group legend { display: flex; gap: 8px; align-items: baseline; font-weight: 700; margin-bottom: 6px; }
.shop-group legend span { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.shop-group label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.shop-group input { accent-color: var(--brand); width: 18px; height: 18px; }
.shop-option-price { color: var(--muted); font-size: 0.9rem; }
.shop-dialog-error { color: #c62828; font-weight: 600; min-height: 1.2em; }
.shop-dialog-actions { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 8px -20px 0; padding: 14px 20px 18px; background: linear-gradient(to bottom, transparent, var(--paper) 18px); }
.shop-qty { display: flex; align-items: center; gap: 10px; }
.shop-dialog-add { flex: 1; padding: 13px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.shop-cta { display: inline-block; font-weight: 800; color: var(--brand) !important; }
.shop-confirm .shop-checkout { margin-top: 8px; }

.shop-footer { padding: 28px clamp(16px, 4vw, 40px); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; text-align: center; }
.shop-mobile-bar { display: none; }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-header .shop-basket-toggle { display: none; }
  .shop-nav { display: none; }
  .shop-items { grid-template-columns: 1fr; }
  .shop-item { grid-template-columns: 1fr 96px; }
  .shop-item img { width: 96px; height: 96px; }
  .shop-mobile-bar { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; }
  .shop-mobile-bar .shop-basket-toggle { width: 100%; padding: 14px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); }
  .shop-basket { position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; margin: 0; max-height: 88vh; overflow-y: auto; transform: translateY(105%); transition: transform 0.25s; }
  .shop-basket-inner { border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25); }
  .basket-open .shop-basket { transform: none; }
  .shop-basket-close { display: block; }
  .shop-footer { padding-bottom: 96px; }
  .shop-hero { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-item, .shop-basket { transition: none; }
}

/* Slim scrollbars in each shop's own colours instead of the default grey bar. */
.shop, .shop-dialog-body, .shop-basket, .shop-nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
}
.shop-nav { scrollbar-width: none; }
.shop-confirm .shop-dialog-body { padding-bottom: 20px; }
/* ------------------------------------------------------------------
   Modern polish (31 Oct 2026)
   ------------------------------------------------------------------ */
/* Hero text stays readable over busy food photos. */
.shop-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .12) 70%); }
.shop-hero img { opacity: 1; }
.shop-hero-text { z-index: 1; }
.demo-stamp { z-index: 2; }

/* One left edge for header, hero and menu. */
.shop-header, .shop-hero-text, .shop-layout { padding-inline: max(clamp(16px, 4vw, 40px), calc((100vw - 1240px) / 2)); }
.shop-layout { max-width: none; }

/* Dish cards: crisp card on the page colour with a soft lift. */
.shop-item { background: var(--paper); box-shadow: 0 1px 2px rgb(0 0 0 / .06); border-radius: 16px; }
.shop-item:hover { box-shadow: 0 12px 28px rgb(0 0 0 / .12); }
.shop--dark .shop-item { background: var(--card); }
.shop-add { width: 38px; height: 38px; }
.shop-add::after { content: ""; position: absolute; inset: -6px; }

/* Basket: a clear, raised card. */
.shop-basket-inner { background: var(--paper); border-radius: 20px; box-shadow: 0 16px 44px rgb(0 0 0 / .12); }
.shop--dark .shop-basket-inner { background: var(--card); }
.shop-fulfilment { gap: 8px; }
.shop-fulfilment legend { width: 100%; }
.shop-fulfilment label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.shop-fulfilment label input { position: absolute; opacity: 0; pointer-events: none; }
.shop-fulfilment label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.shop-fulfilment label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.shop-time select {
  appearance: none; min-height: 48px; padding: 10px 40px 10px 14px; border-radius: 12px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat;
}
.shop-totals { column-gap: 0; }
.shop-totals dd { padding-left: 12px; }
.shop-line-qty button, .shop-qty button { width: 40px; height: 40px; font-size: 1.1rem; }
.shop-dialog-close, .shop-basket-close { width: 44px; height: 44px; }
.shop-basket-close { border-radius: 50%; }
.shop-empty { padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }

@media (max-width: 900px) {
  /* Section strip so long menus are easy to jump around. */
  .shop-header { position: sticky; top: 36px; z-index: 25; flex-wrap: wrap; row-gap: 10px; padding-block: 10px; }
  .shop-nav { display: flex; order: 3; flex-basis: 100%; gap: 8px; overflow-x: auto; }
  .shop-nav a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); min-height: 40px; display: inline-flex; align-items: center; }
  .shop-menu h2 { scroll-margin-top: 140px; }
  /* Bottom sheet: grab handle, dimmed page behind, hidden when closed. */
  .shop-basket { max-height: 88dvh; visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .basket-open .shop-basket { visibility: visible; transition: transform .25s, visibility 0s; }
  .basket-open::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .4); }
  .shop-basket-inner { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .shop-basket-inner::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 14px; border-radius: 2px; background: var(--line); }
  .demo-stamp { width: 150px; top: 14px; right: -46px; padding: 3px 0; font-size: .7rem; }
  .shop-hero-text { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .shop-fulfilment label { transition: none; } }

/* Smoke test (31 Oct): keep the live site's "Cookie settings" button clear of the
   basket bar and sheet, and use the one-line DEMO strip on tablets too. */
@media (max-width: 900px) {
  .shop .cookie-settings { bottom: 84px; }
  .basket-open .cookie-settings { display: none; }
  .demo-bar { flex-wrap: nowrap; gap: 8px; font-size: 0.8rem; }
  .demo-bar .demo-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .demo-short { display: inline; }
  .shop-header { top: 36px; }
}
.demo-tiny { display: none; }
.demo-bar a { padding-block: 12px; margin-block: -12px; }
@media (max-width: 900px) {
  .demo-bar { height: 40px; white-space: nowrap; overflow: hidden; }
  .shop-header { top: 40px; }
}
@media (max-width: 480px) {
  .demo-bar .demo-mid { display: none; }
  .demo-tiny { display: inline; }
}
/* Dark shops: dark text on the bright brand colour reads far better. */
.shop--dark :is(.shop-basket-toggle, .shop-checkout, .shop-dialog-add, .shop-add),
.shop--dark .shop-fulfilment label:has(input:checked) { color: var(--paper); }
/* A disabled button that looks intentionally disabled, not muddy. */
.shop-checkout:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--brand) 22%, var(--paper));
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
}
/* Stronger shade behind hero text on bright photos. */
.shop-hero::after { background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / .35) 60%, rgb(0 0 0 / .15)); }
.shop-hero-text { text-shadow: 0 1px 12px rgb(0 0 0 / .45); }

/* /analytics.css */
.cookie-panel {
  position: fixed;
  z-index: 120;
  inset: auto 24px 24px;
  max-width: 1152px;
  margin-inline: auto;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: #fcfaf7;
  color: #160d26;
  border: 1px solid #ded2ca;
  border-radius: 16px;
  box-shadow: 0 16px 50px #160d2626, 0 2px 6px #160d2614;
}
.cookie-panel[hidden] { display: none; }
.cookie-copy { flex: 1; }
.cookie-copy h2 { font-size: 19px; letter-spacing: -.025em; line-height: 1.3; margin: 0 0 8px; }
.cookie-copy p { font-size: 14px; line-height: 1.65; margin: 0; max-width: 70ch; }
.cookie-copy a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions button {
  min-height: 46px;
  padding: 11px 17px;
  border: 1px solid #160d26;
  border-radius: 8px;
  background: #160d26;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.cookie-actions button:hover { background: #372944; }
.cookie-actions button:active { transform: translateY(1px); }
.cookie-settings {
  position: fixed;
  z-index: 110;
  bottom: 10px;
  left: 12px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #ded2ca;
  border-radius: 8px;
  background: #fcfaf7;
  color: #160d26;
  box-shadow: 0 2px 6px #160d2614;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.cookie-settings:hover { background: #f8ebe3; }
.cookie-panel button:focus-visible, .cookie-settings:focus-visible { outline: 3px solid #ad391d; outline-offset: 4px; }
@media (max-width: 850px) {
  .cookie-panel { display: block; padding: 20px; inset: auto 16px 16px; }
  .cookie-actions { margin-top: 16px; }
  .cookie-actions button { flex: 1; }
}
@media (max-width: 420px) {
  .cookie-panel { inset-inline: 10px; padding: 18px; }
  .cookie-actions { gap: 8px; }
  .cookie-actions button { padding-inline: 10px; font-size: 12px; }
}

/* Smoke test (31 Oct): a compact banner on phones so it covers far less of the
   page. Reject and Accept stay equal in size and weight. The "Cookie settings"
   button hides while the banner itself is showing. */
body:has(.cookie-panel:not([hidden])) .cookie-settings { display: none; }
@media (max-width: 850px) {
  .cookie-panel { padding: 14px 16px; inset: auto 8px 8px; border-radius: 14px; }
  .cookie-copy h2 { font-size: 15px; margin-bottom: 4px; }
  .cookie-copy p { font-size: 13px; line-height: 1.5; }
  .cookie-actions { margin-top: 10px; }
  .cookie-actions button { min-height: 44px; padding-block: 8px; }
}