/* =========================================================================
   Baba Ganoush v3 — "Billboard above, catalogue below"
   Photography-first commerce chrome: white canvas, soft-cloud product stages,
   ink pills, one lime signal per fold. Display: Bebas Neue · UI: Inter.
   ========================================================================= */

:root {
	--ink: #111111;
	--canvas: #ffffff;
	--cloud: #f5f5f5;
	--cloud-2: #ececec;
	--hairline: #cacacb;
	--hairline-soft: #e5e5e5;
	--charcoal: #39393b;
	--mute: #707072;
	--stone: #9e9ea0;
	--lime: #B5D334;        /* brand signal */
	--lime-ink: #33501F;    /* readable lime on white */
	--sale: #d30005;        /* allergen hit / spicy */
	--success: #007d48;

	--font-display: "Bebas Neue", "Anton", "Impact", sans-serif;
	--font-ui: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: 1440px;
	--gutter: clamp(16px, 3vw, 48px);
	--pill: 30px;
	--section: clamp(40px, 5vw, 64px);
	--header-h: 64px;
	--utility-h: 36px;
	--top: calc(var(--header-h) + var(--utility-h));
	--ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 72px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.bgv3 { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; padding-top: var(--top); }
img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.hp { position: absolute; left: -9999px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }

/* ---------- type ---------- */
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .005em; font-size: clamp(64px, 11vw, 168px); }
.display--md { font-size: clamp(48px, 7vw, 104px); }
.display--sm { font-size: clamp(40px, 5vw, 72px); line-height: .95; }
.display span { display: inline-block; }
.h-xl { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.h-lg { font-size: 24px; font-weight: 600; line-height: 1.2; }
.lead { font-size: 18px; line-height: 1.5; color: var(--charcoal); max-width: 56ch; }
.link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { color: var(--mute); }

/* ---------- pills (the only button shape) ---------- */
.pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px;
	border-radius: var(--pill); border: 1.5px solid transparent; font-weight: 500; font-size: 16px; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 100ms, opacity 100ms, background 150ms, color 150ms, border-color 150ms;
}
.pill:active { transform: scale(.96); opacity: .85; }
.pill--lg { min-height: 56px; padding: 14px 32px; font-size: 17px; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: var(--charcoal); }
.pill--white { background: #fff; color: var(--ink); }
.pill--white:hover { background: var(--cloud); }
.pill--cloud { background: var(--cloud); color: var(--ink); }
.pill--cloud:hover { background: var(--cloud-2); }
.pill--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.pill--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.pill .ic { width: 18px; height: 18px; }

/* ---------- utility bar + header ---------- */
.utility { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--utility-h); background: var(--cloud); font-size: 12px; font-weight: 500; }
.utility__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.utility__in > * { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.utility__right { text-decoration: none; }
.utility .ic { width: 14px; height: 14px; color: var(--mute); }
.utility .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--stone); margin-right: 6px; }
.utility .dot--on { background: var(--success); }
@media (max-width: 700px) { .utility__left { display: none; } }

.site-header { position: fixed; top: var(--utility-h); left: 0; right: 0; z-index: 100; height: var(--header-h); background: var(--canvas); box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.site-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--hairline); }
.site-header__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand img { width: clamp(140px, 14vw, 190px); height: auto; }
.nav { margin-left: auto; margin-right: auto; }
.nav__list { display: flex; gap: 4px; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 500; text-decoration: none; color: var(--ink); position: relative; }
.nav__list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 150ms var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__extra { display: none; }
.header__right { display: flex; align-items: center; gap: 8px; }
.order { position: relative; }
.order__btn .ic { transition: transform 150ms; }
.order__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.order__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; background: #fff; border: 1px solid var(--hairline-soft); border-radius: 18px; display: grid; gap: 2px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .25); }
.order__menu[hidden] { display: none; }
.order__menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.order__menu a:hover { background: var(--cloud); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cloud); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle .ic { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
@media (max-width: 960px) {
	.nav { position: fixed; inset: var(--top) 0 0 0; z-index: 99; margin: 0; padding: 16px var(--gutter) 40px; background: var(--canvas); transform: translateX(-100%); visibility: hidden; transition: transform 300ms var(--ease), visibility 0s 300ms; overflow-y: auto; }
	.nav.is-open { transform: none; visibility: visible; transition: transform 300ms var(--ease); }
	.nav__list { flex-direction: column; }
	.nav__list a { font-family: var(--font-display); text-transform: uppercase; font-size: 40px; min-height: 64px; padding: 0; border-bottom: 1px solid var(--hairline-soft); }
	.nav__list a::after { display: none; }
	.nav__extra { display: grid; gap: 14px; margin-top: 24px; }
	.nav__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; min-height: 44px; }
	.order { display: none; }
	.nav-toggle { display: inline-flex; }
	body.nav-open { overflow: hidden; }
}

/* ---------- campaign tiles ---------- */
.campaign { position: relative; overflow: hidden; background: var(--ink); color: #fff; display: grid; }
.campaign__media { position: absolute; inset: 0; }
.campaign__media img, .campaign__media video { width: 100%; height: 100%; object-fit: cover; }
.campaign::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
/* page headers on a full photo (busy catering-spread shots): the slider's stronger shade, so the white headline and sub stay readable */
.campaign--page:not(.campaign--cut)::after { background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, .12) 80%), linear-gradient(to right, rgba(0, 0, 0, .5), transparent 65%); }
.campaign__copy { position: relative; z-index: 1; align-self: end; padding-bottom: clamp(28px, 5vw, 72px); padding-top: clamp(80px, 12vw, 160px); }
.campaign--hero { min-height: min(92vh, 900px); }
.campaign--page { min-height: 46vh; }
.campaign--tall { min-height: 70vh; }
.campaign__kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; opacity: .9; }
.campaign__sub { font-size: clamp(16px, 1.6vw, 20px); max-width: 48ch; margin-top: 16px; }
.campaign__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.campaign--tile { aspect-ratio: 1; min-height: 0; text-decoration: none; }
.campaign--tile .campaign__media img { transition: transform 700ms var(--ease); }
.campaign--tile:hover .campaign__media img { transform: scale(1.04); }
.campaign__copy--tile { width: auto; margin: 0; padding: 28px; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 700px) { .campaign--hero { min-height: 82vh; } .campaign--page { min-height: 38vh; } }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; background: var(--ink); color: #fff; padding: 10px 0; }
.ticker__track { display: flex; gap: 32px; width: max-content; align-items: center; font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; animation: ticker 28s linear infinite; }
.ticker__track i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- bands ---------- */
.band { padding-block: var(--section); }
.band--tight { padding-block: calc(var(--section) * .5); }
.band--cloud { background: var(--cloud); }
.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.band__head--wrap { flex-wrap: wrap; align-items: flex-end; }
.band__head .lead { margin-top: 8px; }

/* ---------- tiles (product) ---------- */
.tiles { display: grid; gap: 8px; }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tile { display: grid; gap: 10px; text-decoration: none; color: var(--ink); }
.tile__media { display: block; aspect-ratio: 1; background: var(--cloud); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__meta { display: grid; gap: 2px; }
.tile__badge { justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: rgba(181, 211, 52, .3); color: var(--lime-ink); margin-bottom: 4px; }
.tile__name { font-weight: 600; }
.tile__cat { color: var(--mute); font-size: 14px; }
.tile__price { font-weight: 600; margin-top: 4px; }
@media (max-width: 900px) { .tiles--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles--2 { grid-template-columns: 1fr; } }

/* ---------- category rail ---------- */
.rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail__item { position: relative; flex: 0 0 clamp(220px, 22vw, 320px); aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden; background: var(--cloud); text-decoration: none; }
.rail__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.rail__item:hover img { transform: scale(1.04); }
.rail__label { position: absolute; left: 16px; bottom: 16px; }

/* ---------- allergen banner ---------- */
.allergen-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.allergen-banner .lead { margin: 14px 0 22px; }
.allergen-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.allergen-strip li { display: grid; gap: 8px; justify-items: center; padding: 16px 8px; background: #fff; font-size: 13px; font-weight: 500; text-align: center; }
.allergen-strip .ic { width: 26px; height: 26px; }
@media (max-width: 900px) { .allergen-banner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .allergen-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.story__media { aspect-ratio: 4 / 5; background: var(--cloud); overflow: hidden; max-height: 640px; }
.story__media video { width: 100%; height: 100%; object-fit: cover; }
.story__copy { display: grid; gap: 18px; max-width: 56ch; }
.story__copy p { color: var(--charcoal); }
.ticks { display: grid; gap: 8px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 6px; border-left: 2px solid var(--lime-ink); border-bottom: 2px solid var(--lime-ink); transform: rotate(-45deg); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story__media { aspect-ratio: 16 / 10; } }

/* ---------- trust ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.trust__item { display: grid; gap: 2px; padding: 24px 8px; text-align: center; }
.trust__big { font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); line-height: .9; color: var(--ink); }
.trust__k { font-weight: 600; margin-top: 6px; }
.trust__v { color: var(--mute); font-size: 14px; }
.trust__item:nth-child(2) .trust__big { color: var(--lime-ink); }
@media (max-width: 700px) { .trust { grid-template-columns: 1fr 1fr; } }

/* ---------- visit / hours / newsletter ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.visit__info { display: grid; gap: 16px; }
.visit__info > p { color: var(--charcoal); }
.visit__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.visit__map { aspect-ratio: 4 / 3; background: var(--cloud); }
.visit__map iframe { width: 100%; height: 100%; border: 0; }
.visit__now { font-weight: 600; }
.hours { display: grid; gap: 2px; max-width: 360px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours div.is-today { font-weight: 600; }
.hours div.is-today dd { color: var(--lime-ink); }
.form--news { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.form__lead { font-weight: 600; margin-bottom: 4px; }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field span { font-size: 13px; font-weight: 500; color: var(--mute); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: #fff; font: inherit; color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border: 2px solid var(--ink); padding: 9px 13px; }
.field textarea { resize: vertical; min-height: 120px; }
.form__notice { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; font-weight: 500; }
.form__notice--ok { background: rgba(0, 125, 72, .1); color: var(--success); }
.form__notice--err { background: rgba(211, 0, 5, .08); color: var(--sale); }
@media (max-width: 640px) { .form__row, .form__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { padding: var(--section) 0 120px; border-top: 1px solid var(--hairline); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__col--brand img { width: 180px; }
.footer__tag { margin-top: 12px; color: var(--mute); font-size: 14px; max-width: 30ch; }
.social { display: flex; gap: 8px; margin-top: 16px; }
.social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cloud); color: var(--ink); }
.social a:hover { background: var(--ink); color: #fff; }
.social .ic { width: 18px; height: 18px; }
.footer__h { font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.footer__nav a, .footer__addr { color: var(--mute); font-size: 14px; text-decoration: none; line-height: 1.9; }
.footer__nav a:hover { color: var(--ink); }
.hours--footer { font-size: 14px; margin-top: 8px; }
.footer__legal { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--hairline-soft); font-size: 12px; color: var(--mute); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- mobile quick bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 960px) {
	.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: inset 0 1px 0 var(--hairline); }
	.mobile-bar__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--pill); background: var(--cloud); color: var(--ink); font-weight: 500; text-decoration: none; border: 0; font: inherit; cursor: pointer; }
	.mobile-bar__btn--primary { background: var(--ink); color: #fff; }
	body.nav-open .mobile-bar { display: none; }
}

/* ---------- order sheet ---------- */
.sheet { border: 0; padding: 0; background: transparent; width: min(420px, calc(100vw - 24px)); }
.sheet::backdrop { background: rgba(0, 0, 0, .5); }
.sheet__in { display: grid; gap: 8px; padding: 24px; background: #fff; border-radius: 24px; }
.sheet__title { font-family: var(--font-display); text-transform: uppercase; font-size: 40px; line-height: .95; }
.sheet__sub { color: var(--mute); margin-bottom: 8px; }
.sheet__close { background: none; border: 0; color: var(--mute); text-decoration: underline; min-height: 44px; cursor: pointer; }
@media (max-width: 700px) { .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; } .sheet__in { border-radius: 24px 24px 0 0; padding-bottom: 28px; } }

/* ---------- sub-nav (category filters + search) ---------- */
.subnav { position: sticky; top: var(--top); z-index: 80; background: var(--canvas); box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.subnav__in { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; }
.subnav__cats { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
.subnav__cats::-webkit-scrollbar { display: none; }
.subnav__tools { display: flex; gap: 8px; align-items: center; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--pill); border: 1px solid var(--hairline); background: #fff; color: var(--ink); font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background 100ms, color 100ms, border-color 100ms; }
.chip span { font-size: 12px; color: var(--mute); }
.chip:hover { border-color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-active span { color: rgba(255, 255, 255, .7); }
.search { position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--mute); pointer-events: none; }
.search input { min-height: 40px; width: 200px; padding: 8px 14px 8px 38px; border-radius: 24px; border: 0; background: var(--cloud); font: inherit; }
.search input:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--cloud); }
.subnav__filters { display: none; min-height: 40px; padding: 8px 16px; }
.subnav__n { background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 6px; }
.subnav__n[hidden] { display: none; }
@media (max-width: 960px) {
	.search input { width: 140px; }
	.subnav__filters { display: inline-flex; }
}

/* ---------- PLP layout: rail + grid ---------- */
.plp { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 24px 0 var(--section); align-items: start; }
.plp--full { grid-template-columns: 1fr; }
.plp__rail { position: sticky; top: calc(var(--top) + 72px); }
.rail-box { display: grid; gap: 8px; }
.rail-box__h { font-weight: 600; font-size: 16px; margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.rail-box__h:first-child { margin-top: 0; }
.checks-list { display: grid; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; border: 0; background: none; text-align: left; cursor: pointer; font-weight: 500; font-size: 15px; }
.check .ic { width: 18px; height: 18px; color: var(--mute); }
.check__box { width: 18px; height: 18px; border: 1.5px solid var(--hairline); border-radius: 4px; flex: none; position: relative; transition: background 100ms, border-color 100ms; }
.check[aria-pressed="true"] .check__box { background: var(--ink); border-color: var(--ink); }
.check[aria-pressed="true"] .check__box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.check[data-filter-allergen][aria-pressed="true"] .check__box { background: var(--sale); border-color: var(--sale); }
.rail-box__status { font-size: 14px; color: var(--mute); margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.rail-box__status [data-filter-count] { color: var(--ink); font-weight: 600; }
.link--btn { font-size: 14px; }
.plp__rail-close { display: none; }
.plp__grid { display: grid; gap: var(--section); min-width: 0; }
.group { display: grid; gap: 16px; scroll-margin-top: calc(var(--top) + 80px); }
.group.is-hidden { display: none; }
.group.is-empty .cards { display: none; }
.group__empty { color: var(--mute); }
.menu__none p { color: var(--charcoal); max-width: 56ch; }
@media (max-width: 960px) {
	.plp { grid-template-columns: 1fr; }
	.plp__rail { position: fixed; inset: 0; z-index: 120; background: #fff; padding: 24px var(--gutter) 100px; overflow-y: auto; transform: translateY(100%); visibility: hidden; transition: transform 300ms var(--ease), visibility 0s 300ms; }
	.plp__rail.is-open { transform: none; visibility: visible; transition: transform 300ms var(--ease); }
	.plp__rail-close { display: inline-flex; position: fixed; left: var(--gutter); right: var(--gutter); bottom: 20px; justify-content: center; }
	body.filters-open { overflow: hidden; }
}

/* ---------- product cards (markup shared with v2) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 8px; }
.plp--full .cards { grid-template-columns: repeat(4, 1fr); }
.card { display: grid; grid-template-rows: auto 1fr; background: var(--canvas); transition: opacity 150ms; }
.card__media { display: block; width: 100%; aspect-ratio: 1; background: var(--cloud); overflow: hidden; padding: 0; border: 0; cursor: pointer; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media--empty { display: block; width: 100%; height: 100%; background: var(--cloud); }
.card__body { padding: 12px 0 8px; display: grid; gap: 8px; align-content: start; }
.card__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card__title { font-weight: 600; font-size: 16px; line-height: 1.3; }
.card__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__desc { color: var(--mute); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__al { display: grid; gap: 6px; padding: 10px 12px; background: var(--cloud); }
.card__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-right: 4px; }
.card__allergens { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--mute); }
.card__allergens--none { color: var(--success); font-weight: 500; }
.card__allergens--unknown { font-style: italic; }
.al { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: var(--pill); background: #fff; border: 1px solid var(--hairline); color: var(--ink); font-weight: 500; }
.al__icon .ic { width: 15px; height: 15px; color: var(--sale); }
.card.is-flagged .al.is-hit { background: var(--sale); border-color: var(--sale); color: #fff; }
.card.is-flagged .al.is-hit .ic { color: #fff; }
.card__ingredients { font-size: 13px; color: var(--mute); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--cloud); }
.tag--vegan, .tag--veg { background: rgba(181, 211, 52, .3); color: var(--lime-ink); }
.tag--spicy { background: rgba(211, 0, 5, .08); color: var(--sale); }
.card__more { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.card.is-hidden { display: none; }
@media (max-width: 1100px) { .plp--full .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cards, .plp--full .cards { grid-template-columns: repeat(2, 1fr); } .card__title { font-size: 15px; } }

/* ---------- per-product allergen strip ---------- */
.alstrip { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin-top: 4px; }
.alstrip__i { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; background: #fff; border: 1px solid var(--hairline-soft); color: var(--stone); font-size: 10px; line-height: 1.1; text-align: center; }
.alstrip__i .ic { width: 16px; height: 16px; }
.alstrip__l { display: none; }
.alstrip__i.is-yes { background: var(--sale); border-color: var(--sale); color: #fff; }
.alstrip__unknown { font-size: 13px; color: var(--mute); font-style: italic; }
.alstrip--labels { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.alstrip--labels .alstrip__i { padding: 10px 6px; font-size: 11px; font-weight: 600; color: var(--mute); background: var(--cloud); border-color: transparent; }
.alstrip--labels .alstrip__i .ic { width: 22px; height: 22px; }
.alstrip--labels .alstrip__l { display: block; }
.alstrip--labels .alstrip__i.is-yes { color: #fff; background: var(--sale); }
.alstrip__s { font-size: 10px; font-weight: 500; opacity: .8; }
.alstrip--dialog[hidden] { display: none; }
.dishdlg .card__allergens { display: none; }
.allergens .allergens__note { margin-top: 0; }

/* ---------- allergen table (kept for v2-style pages) ---------- */
.altable-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--hairline-soft); }
.altable { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: 14px; }
.altable th, .altable td { padding: 10px; text-align: center; border-bottom: 1px solid var(--hairline-soft); }
.altable thead th { position: sticky; top: 0; background: var(--ink); color: #fff; z-index: 2; vertical-align: bottom; }
.altable__al { display: grid; gap: 6px; justify-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.altable__al .ic { width: 20px; height: 20px; }
.altable__dish { text-align: left !important; font-weight: 500; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 150px; }
.altable thead .altable__dish { background: var(--ink); z-index: 3; }
.altable__group th { text-align: left !important; background: var(--cloud); font-family: var(--font-display); text-transform: uppercase; font-size: 22px; font-weight: 400; padding: 10px 12px; }
.altable td.is-yes { background: rgba(211, 0, 5, .08); }
.altable__yes .ic { width: 18px; height: 18px; color: var(--sale); }
.allergens__note { margin-top: 24px; max-width: 80ch; color: var(--charcoal); font-size: 14px; }
.allergens__note h3 { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.allergens__note p + p { margin-top: 8px; }

/* ---------- dish detail dialog ---------- */
.dishdlg { border: 0; padding: 0; background: transparent; max-width: min(960px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); }
.dishdlg::backdrop { background: rgba(0, 0, 0, .5); }
.dish__in { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; background: #fff; border-radius: 24px; overflow: hidden; max-height: calc(100vh - 24px); }
.dish__media { background: var(--cloud); min-height: 260px; }
.dish__media img { width: 100%; height: 100%; object-fit: cover; }
.dish__body { padding: clamp(20px, 3vw, 32px); overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.dish__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.dish__close .ic { width: 20px; height: 20px; }
.dishdlg .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dish__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(36px, 4vw, 56px); line-height: .95; font-weight: 400; }
.dish__desc { color: var(--charcoal); font-size: 15px; }
.dish__h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); display: flex; gap: 10px; align-items: baseline; }
.dish__serving { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mute); }
.dish__ingredients { display: flex; flex-wrap: wrap; gap: 6px; }
.dish__ingredients li { padding: 5px 11px; border-radius: var(--pill); background: var(--cloud); font-size: 13px; }
.dishdlg .card__allergens { font-size: 14px; }
.dish__allergens .al { padding: 6px 12px 6px 9px; }
.ntable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ntable th, .ntable td { padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); text-align: left; }
.ntable td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ntable__sub th { padding-left: 14px; font-weight: 400; color: var(--mute); }
.dish__order { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hairline-soft); }
.dish__order .btn { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--pill); font-weight: 500; text-decoration: none; }
.dish__order .btn--lime { background: var(--ink); color: #fff; }
.dish__order .btn--dark { background: var(--cloud); color: var(--ink); }
.dish__note { font-size: 13px; color: var(--mute); }
.dish__note a { color: var(--ink); }
@media (max-width: 700px) { .dishdlg { max-width: 100vw; max-height: 100vh; margin: 0; } .dish__in { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; } .dish__media { aspect-ratio: 16 / 10; min-height: 0; } }
body.dish-open { overflow: hidden; }

/* ---------- contact ---------- */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick { display: flex; gap: 14px; align-items: center; padding: 18px; background: var(--cloud); color: var(--ink); text-decoration: none; border-radius: 18px; transition: background 150ms; }
.quick:hover { background: var(--cloud-2); }
.quick > .ic { width: 24px; height: 24px; }
.quick span { display: grid; font-size: 14px; color: var(--mute); }
.quick strong { color: var(--ink); }
.contact-form { max-width: 760px; }
.contact-form .lead { margin: 8px 0 20px; }
.quote { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.quote .lead { margin: 12px 0 18px; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr 1fr; } .quote { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .quick-grid { grid-template-columns: 1fr; } }

/* ---------- reveal ---------- */
.js [data-reveal], .js [data-reveal-group] > * { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in, .js [data-reveal-group] > .is-in { opacity: 1; transform: none; transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
.js [data-hero-lines] span { opacity: 0; transform: translateY(40%); }
.js [data-hero-lines].is-in span { opacity: 1; transform: none; transition: opacity 600ms var(--ease), transform 800ms var(--ease); }
.js [data-hero-lines].is-in span:nth-child(2) { transition-delay: 90ms; }
.js [data-hero-lines].is-in span:nth-child(3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal], .js [data-reveal-group] > *, .js [data-hero-lines] span { opacity: 1; transform: none; transition: none; }
}
.cky-btn-accept { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }

/* ---------- story: portrait videos at natural shape ---------- */
.story__phones { display: flex; gap: 20px; align-items: flex-end; justify-content: center; }
.phone { margin: 0; width: min(300px, 44%); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--ink); border: 6px solid var(--ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .08); position: relative; }
.phone--small { width: min(240px, 36%); margin-bottom: -24px; }
.phone video { width: 100%; height: 100%; object-fit: cover; }
/* videos that carry native controls (the story page, WCAG 2.2.2) put a control bar along the bottom edge:
   lift the caption clear of it so the two do not overlap */
.phone:has(video[controls]) figcaption { bottom: 52px; }
.phone figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 12px; font-weight: 600; }
@media (max-width: 900px) { .story__phones { order: 2; } .story__copy { order: 1; } }

/* ---------- elevation: borders + shadows on images and cards ---------- */
:root { --r: 14px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px -8px rgba(0, 0, 0, .18); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .05), 0 24px 40px -18px rgba(0, 0, 0, .35); }
.tile__media, .rail__item, .campaign--tile, .card__media, .visit__map, .quick, .allergen-strip li { border-radius: var(--r); border: 1px solid var(--hairline-soft); box-shadow: var(--shadow-sm); }
.tile, .card, .rail__item, .campaign--tile { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.tile:hover, .rail__item:hover, .campaign--tile:hover { transform: translateY(-4px); }
.tile:hover .tile__media, .rail__item:hover, .campaign--tile:hover { box-shadow: var(--shadow-lg); }
.card { border-radius: var(--r); border: 1px solid var(--hairline-soft); box-shadow: var(--shadow-sm); overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { border: 0; border-radius: 0; box-shadow: none; }
.card__body { padding: 14px 14px 14px; }
.card__al { border-radius: 10px; }
.campaign--tile { overflow: hidden; }
.tiles { gap: 16px; }
.cards { gap: 16px; }
.rail { gap: 16px; }
.trust { border: 1px solid var(--hairline-soft); border-radius: var(--r); box-shadow: var(--shadow-sm); background: #fff; }
.trust__item + .trust__item { border-left: 1px solid var(--hairline-soft); }
@media (max-width: 700px) { .trust__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline-soft); } .trust__item:nth-child(4) { border-top: 1px solid var(--hairline-soft); } }

/* ---------- floating WhatsApp: circular, icon only ---------- */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .7), 0 2px 6px rgba(0, 0, 0, .18); transition: transform 150ms var(--ease), box-shadow 150ms; }
.wa-fab svg { width: 36px; height: 36px; }
.wa-fab__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 34px -8px rgba(37, 211, 102, .8), 0 4px 10px rgba(0, 0, 0, .18); }
.wa-fab:active { transform: scale(.95); }
.wa-fab::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); animation: waPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes waPulse { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
@media (max-width: 960px) { .wa-fab { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 58px; height: 58px; } .wa-fab svg { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; } }

/* ---------- catering focus ---------- */
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tiles--3 { grid-template-columns: 1fr; } }
.cater { background: #fff; }
.cater__kicker { color: var(--lime-ink); }
.cater__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.cater__tiles { margin-top: 8px; }
.steps { display: grid; gap: 12px; margin-top: 32px; counter-reset: step; }
.steps--row, .steps { grid-template-columns: repeat(3, 1fr); }
.steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 18px; border: 1px solid var(--hairline-soft); border-radius: var(--r); background: var(--cloud); }
.steps__n { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; }
.steps strong { font-weight: 600; }
.steps span:last-child { color: var(--mute); font-size: 14px; }
.utility__left a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .steps, .steps--row { grid-template-columns: 1fr; } }

/* ---------- cutout photography (transparent webp from the shoot; tools/cutout-shoot.py, bgv2_pic) ---------- */
:root { --stage: radial-gradient(120% 90% at 50% 42%, #ffffff 0%, var(--cloud) 58%, var(--cloud-2) 100%); }
.card__media:has(> .is-cut), .tile__media:has(> .is-cut), .rail__item:has(> .is-cut), .dish__media:has(> .is-cut), .showcase__media:has(> .is-cut) { background: var(--stage); }
.card__media img.is-cut, .tile__media img.is-cut, .rail__item img.is-cut, .dish__media img.is-cut, .showcase__media img.is-cut { object-fit: contain; padding: 7%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .18)); }
.rail__item img.is-cut { padding: 9% 8% 20%; }
.dish__media img.is-cut { padding: 10%; }
/* billboard panels: dish floats on ink, copy keeps its place bottom-left */
.campaign--cut { background: var(--ink); }
.campaign--cut::after { background: none; }
.campaign--cut .campaign__media { inset: 0 0 36% 34%; padding: 5% 6% 0 0; }
.campaign--cut .campaign__media img { object-fit: contain; object-position: center; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)); }
.campaign--page.campaign--cut .campaign__media { inset: 0 0 0 55%; padding: 4% 5%; }
.campaign--page.campaign--cut .display { font-size: clamp(56px, 8.4vw, 128px); max-width: 52%; }
.campaign--page.campaign--cut .campaign__sub { max-width: min(48ch, 52%); }
@media (max-width: 700px) {
	.campaign--page.campaign--cut .campaign__media { position: relative; inset: auto; height: 58vw; padding: 8% 14% 0; }
	.campaign--page.campaign--cut .campaign__copy { padding-top: 12px; }
	.campaign--page.campaign--cut .display, .campaign--page.campaign--cut .campaign__sub { max-width: none; }
}
/* ---------- lime CTA, header quote pill, mobile bar 4-up ---------- */
.pill--lime { background: var(--lime); color: var(--ink); }
.pill--lime:hover { background: #c4de52; }
.header__quote { min-height: 40px; padding: 8px 18px; }
@media (max-width: 960px) { .header__quote { display: none; } }
@media (max-width: 960px) {
	.mobile-bar { grid-template-columns: 1fr 1.15fr 1.15fr 1fr; }
	.mobile-bar__btn--lime { background: var(--lime); color: var(--ink); }
}

/* ---------- prose pages (policies, story) ---------- */
.prose-head { padding-bottom: 24px; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; }
.prose-head__meta { margin-top: 12px; color: var(--mute); font-size: 14px; }
.prose { max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--charcoal); }
.prose h3 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 32px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 24px 0; }
.prose strong { color: var(--ink); }

/* ---------- story page ---------- */
.story-hero__in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.story-hero__copy { display: grid; gap: 20px; }
.story-hero__intro { font-size: 18px; }
.story-hero__phone { justify-self: center; width: min(320px, 80%); }
.story-body { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.story-body__text h2 { margin-bottom: 8px; }
.story-body__aside { position: sticky; top: calc(var(--top) + 24px); }
.story-body__aside .phone { width: 100%; }
.fresh { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fresh__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--r); border: 1px solid var(--hairline-soft); box-shadow: var(--shadow-sm); }
.fresh__media img { width: 100%; height: 100%; object-fit: cover; }
.fresh__copy { display: grid; gap: 16px; justify-items: start; }
.cta-band { background: var(--ink); color: #fff; }
.cta-band__in { display: grid; gap: 16px; justify-items: start; }
.cta-band .lead { color: rgba(255, 255, 255, .8); }
@media (max-width: 900px) {
	.story-hero__in, .story-body, .fresh { grid-template-columns: 1fr; }
	.story-body__aside { position: static; display: flex; justify-content: center; }
	.story-body__aside .phone { width: min(280px, 70%); }
}

/* ---------- allergen guide page ---------- */
.alkey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.alkey__i { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.alkey__i .ic { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--sale); align-self: start; }
.alkey__i strong { font-weight: 600; }
.alkey__i span { font-size: 13px; color: var(--mute); }
.altable-tools { display: grid; gap: 10px; margin-bottom: 16px; }
.altable-tools__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.altable-tools__row .card__label { margin-right: 6px; }
.chip--sm { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.chip--sm .ic { width: 16px; height: 16px; }
.chip[data-altable-avoid][aria-pressed="true"] { background: var(--sale); border-color: var(--sale); }
.altable tbody tr[hidden] { display: none; }
.altable__ask { text-align: left !important; color: var(--mute); font-style: italic; }
.altable td .card__tags { justify-content: center; }
@media (max-width: 1100px) { .alkey { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .alkey { grid-template-columns: 1fr 1fr; } }
/* print: the allergen table is the only page meant to be printed (staff pin it up), so every rule is scoped
   to that body class - unscoped, it stripped the header and footer off every other v3 page's printout too */
@media print {
	body.bgv3--allergens .utility,
	body.bgv3--allergens .site-header,
	body.bgv3--allergens .altable-tools,
	body.bgv3--allergens .site-footer,
	body.bgv3--allergens .wa-fab,
	body.bgv3--allergens .mobile-bar,
	body.bgv3--allergens .campaign__cta,
	body.bgv3--allergens .quote-fab { display: none !important; }
	body.bgv3--allergens { padding-top: 0; }
	body.bgv3--allergens .altable { min-width: 0; font-size: 11px; }
	body.bgv3--allergens .altable thead th { position: static; background: #fff; color: #000; border-bottom: 1px solid #000; }
}

/* ---------- catering lead page ---------- */
.platters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.platter { display: grid; grid-template-columns: 1fr 1.1fr; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.platter__media { aspect-ratio: 4 / 3; background: var(--cloud); }
.platter__media img { width: 100%; height: 100%; object-fit: cover; }
.platter__body { padding: 18px; display: grid; gap: 10px; align-content: start; }
.platter__desc { color: var(--mute); font-size: 14px; }
.platter__add { justify-self: start; margin-top: auto; }
.platter__add-on { display: none; }
.platter__add[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.platter__add[aria-pressed="true"] .platter__add-on { display: inline-flex; align-items: center; gap: 6px; }
.platter__add[aria-pressed="true"] .platter__add-off { display: none; }
.diet { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.diet legend { padding: 0; margin-bottom: 6px; width: 100%; }
.diet__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.diet__chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--pill); border: 1px solid var(--hairline); background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.diet__chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.diet__chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.proof__item { display: grid; gap: 8px; justify-items: center; align-content: center; text-align: center; padding: 20px 12px; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r); font-size: 14px; color: var(--mute); }
.proof__item svg.badge { height: 56px; width: auto; }
.clients { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: center; margin-top: 24px; opacity: .7; }
.fullmenu { border-top: 1px solid var(--hairline); }
.fullmenu__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; padding-block: 24px; }
.fullmenu__summary::-webkit-details-marker { display: none; }
.fullmenu__summary .pill .ic { transition: transform 200ms; }
.fullmenu[open] .fullmenu__summary .pill .ic { transform: rotate(180deg); }
.quote-fab { position: fixed; right: 96px; bottom: 28px; z-index: 95; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .35); transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform 250ms var(--ease), opacity 250ms; }
.quote-fab.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.quote-fab__n { min-width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; display: inline-grid; place-items: center; padding: 0 6px; }
.quote-fab__n[hidden] { display: none; }
#quote { scroll-margin-top: calc(var(--top) + 16px); }
@media (max-width: 960px) { .quote-fab { right: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); } .proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .platters { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .platter { grid-template-columns: 1fr; } .platter__media { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .quote-fab { transition: none; } }

/* ---------- hero slider ---------- */
.slider { position: relative; overflow: hidden; background: var(--ink); color: #fff; min-height: min(92vh, 900px); display: grid; }
.slider__track { position: relative; grid-area: 1 / 1; min-height: inherit; }
.slide { position: absolute; inset: 0; display: grid; opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 0s 900ms; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease); z-index: 1; }
.slide__media { position: absolute; inset: 0; overflow: hidden; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.slide.is-active .slide__media img { animation: kenburns 8s var(--ease) forwards; }
.slide.is-leaving-left .slide__media img, .slide.is-leaving-right .slide__media img { animation: none; transform: scale(1.1); }
@keyframes kenburns { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.12) translateX(-1.5%); } }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .05) 70%), linear-gradient(to right, rgba(0, 0, 0, .35), transparent 60%); pointer-events: none; }
.slide__copy { position: relative; z-index: 1; align-self: end; padding-bottom: clamp(92px, 12vw, 140px); padding-top: clamp(80px, 12vw, 160px); }
.slide__title span { overflow: hidden; vertical-align: bottom; }
.slide__title i { display: inline-block; font-style: normal; transform: translateY(110%); opacity: 0; }
.slide.is-active .slide__title i { animation: rise 900ms var(--ease) forwards; }
.slide.is-active .slide__title span:nth-child(2) i { animation-delay: 100ms; }
.slide.is-active .slide__title span:nth-child(3) i { animation-delay: 200ms; }
.slide.is-active .campaign__kicker, .slide.is-active .campaign__sub, .slide.is-active .campaign__cta { animation: fadeup 800ms var(--ease) 350ms both; }
@keyframes rise { to { transform: none; opacity: 1; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.slide.from-right .slide__copy { transform: translateX(40px); }
.slide.from-left .slide__copy { transform: translateX(-40px); }
.slide.is-active .slide__copy { transition: transform 900ms var(--ease); transform: none; }
.slider__ui { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vw, 44px); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.slider__dots { display: flex; gap: 8px; }
.slider__dot { width: 56px; height: 24px; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.slider__bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; }
.slider__bar::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.slider__dot.is-active .slider__bar::after { transform: scaleX(1); }
.slider.is-counting .slider__dot.is-active .slider__bar::after { animation: count var(--slide-dur, 6500ms) linear forwards; }
.slider.is-paused .slider__dot.is-active .slider__bar::after { animation-play-state: paused; }
@keyframes count { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slider__arrows { display: flex; gap: 8px; margin-right: 92px; } /* keep clear of the WhatsApp button (64px + 20px right) */
.slider__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background 150ms, transform 100ms; }
.slider__arrow:hover { background: #fff; color: var(--ink); }
.slider__arrow:active { transform: scale(.94); }
.slider__arrow .ic { width: 20px; height: 20px; }
.slider__arrow[data-slide-prev] .ic { transform: rotate(180deg); }
@media (max-width: 700px) { .slider { min-height: 84vh; } .slider__dot { width: 36px; } .slider__arrows { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.slide, .slide.is-active { transition: none; }
	.slide.is-active .slide__media img, .slide.is-active .slide__title i, .slide.is-active .campaign__kicker, .slide.is-active .campaign__sub, .slide.is-active .campaign__cta { animation: none; transform: none; opacity: 1; }
	.slider.is-counting .slider__dot.is-active .slider__bar::after { animation: none; transform: scaleX(1); }
}

/* slide 1: the headline is knocked out of a dark layer (mix-blend multiply), so the photo shows through the letters.
   The photo's dark half is lifted with a white wash first, otherwise "LEBANESE." reads near-black on near-black. */
.slide--knock::after { background: none; }
.slide--knock .slide__media img, .slide--knock .slide__media video { filter: brightness(1.28) saturate(1.05); }
.slide--knock .slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,.06) 100%); pointer-events: none; }
.slide__mask { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; padding: 0 var(--gutter); background: #0d0d0d; color: #fff; mix-blend-mode: multiply; pointer-events: none; }
.slide__knock { font-size: clamp(72px, 13.5vw, 220px); line-height: .86; }
.slide--knock .slide__copy { z-index: 2; }
.slide--knock .slide__copy .campaign__sub { max-width: 52ch; }
@supports not (mix-blend-mode: multiply) { .slide__mask { background: rgba(0, 0, 0, .45); } }
@media (max-width: 700px) {
	.slide__mask { align-content: start; padding-top: 18vh; }
	.slide--knock .slide__media::after { background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.30) 60%, rgba(255,255,255,.22) 100%); }
}

/* ---------- trust badges ---------- */
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: center; }
.badges__i { display: grid; place-items: center; padding: 12px; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r); min-height: 96px; text-decoration: none; transition: transform 200ms var(--ease), box-shadow 200ms; }
a.badges__i:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
svg.badge { width: 100%; max-width: 200px; height: auto; }
.paycards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.paycards li { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 6px; color: var(--mute); }
@media (max-width: 900px) { .badges { grid-template-columns: repeat(3, 1fr); } }

/* ---------- showcase rail ---------- */
.showcase { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 12px; scrollbar-width: none; outline-offset: -2px; }
.showcase::-webkit-scrollbar { display: none; }
.showcase__item { flex: 0 0 clamp(280px, 40vw, 560px); scroll-snap-align: start; display: grid; gap: 12px; }
.showcase__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--r); border: 1px solid var(--hairline-soft); box-shadow: var(--shadow-sm); background: var(--cloud); }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.showcase__item:hover .showcase__media img { transform: scale(1.04); }
.showcase__meta { display: flex; align-items: center; gap: 12px; }
.showcase__meta .pill { margin-left: auto; }
.showcase__arrows { display: flex; gap: 8px; }
.showcase__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background 150ms, transform 100ms; }
.showcase__arrow:hover { background: var(--ink); color: #fff; }
.showcase__arrow:active { transform: scale(.94); }
.showcase__arrow .ic { width: 20px; height: 20px; }
.showcase__arrow[data-showcase-prev] .ic { transform: rotate(180deg); }
.showcase__more { margin-top: 20px; }
@media (max-width: 700px) { .showcase__item { flex-basis: 85vw; } .showcase__arrows { display: none; } }
.form__hint { font-size: 14px; color: var(--mute); margin-top: -8px; }
.fx-tilt:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important; } /* !important: beats .js [data-reveal-group] > .is-in's higher-specificity transform:none once a card has been scroll-revealed */

/* ---------- 2026-09-20: quote basket (WhatsApp), "Feeds 6 / Eco-friendly" row, catering partners, menu PDF ---------- */
.pill--sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.pill--wa { background: #1fa855; color: #fff; }
.pill--wa:hover { background: #178a45; }
.pill .ic, .btn .ic { width: 18px; height: 18px; flex: none; }
.qadd .qadd__on { display: none; }
.qadd[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.qadd[aria-pressed="true"] .qadd__on { display: inline-flex; align-items: center; gap: 6px; }
.qadd[aria-pressed="true"] .qadd__off { display: none; }
.dish__order .qadd[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.dish__order button.btn { border: 0; font: inherit; cursor: pointer; }
.qcount { min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.qcount[hidden] { display: none; }
.mobile-bar__btn--lime .qcount { background: var(--ink); color: #fff; }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; }
.platter__add.card__actions { justify-self: stretch; }
.metarow { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--mute); }
.metarow li { display: inline-flex; align-items: center; gap: 5px; }
.metarow .ic { width: 16px; height: 16px; }
.metarow:empty { display: none; }
.card__media--empty { display: grid; place-items: center; color: var(--mute); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
button.platter__media { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; }
.platter__media:has(> .is-cut) { background: var(--stage); }
.platter__media img.is-cut { object-fit: contain; padding: 6%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .18)); }

.sheet--quote { width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.sheet--quote .sheet__in { max-height: calc(100vh - 24px); overflow-y: auto; }
.qlist { display: grid; gap: 6px; }
.qlist:empty { display: none; }
.qlist__i { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: var(--cloud); border-radius: 14px; font-weight: 500; }
.qlist__qty { display: inline-flex; align-items: center; gap: 2px; background: #fff; border-radius: var(--pill); }
.qlist__qty output { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.qlist__i button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.qlist__i button:hover { background: var(--hairline-soft); }
.qlist__i .ic { width: 16px; height: 16px; }
.qempty { display: grid; gap: 10px; padding: 16px; background: var(--cloud); border-radius: 16px; color: var(--mute); }
.qempty[hidden], .qfields[hidden] { display: none; }
.qempty__links { display: flex; flex-wrap: wrap; gap: 8px; }
.qempty__links .pill { background: #fff; }
.qfields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.qfields .field textarea { min-height: 64px; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet__foot .sheet__close { margin-left: auto; }

.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 20px 0; }
.partners__label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.partners__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.partners__i { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 18px; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r); font-size: 14px; font-weight: 500; }
.partners__i img { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.site-footer .partners { border-top: 1px solid var(--hairline-soft); margin-top: 24px; }
.badges { grid-template-columns: repeat(5, 1fr); }
.badges__i--eco { gap: 6px; color: var(--ink); font-weight: 600; font-size: 14px; text-align: center; }
.badges__i--eco .ic { width: 30px; height: 30px; }
.footer__btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1.9; color: var(--mute); cursor: pointer; }
.footer__btn:hover { color: var(--ink); }
.form__send { display: flex; flex-wrap: wrap; gap: 8px; }
.menupdf { display: flex; justify-content: center; padding: 8px 0 28px; }
@media (max-width: 900px) { .badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .qfields { grid-template-columns: 1fr; } }
@media print { .sheet, .wa-fab, .mobile-bar, .quote-fab { display: none !important; } }
.platter__body { min-width: 0; }
.platter__body .alstrip { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.platter__body .h-lg { overflow-wrap: anywhere; }

/* ---------- 2026-09-20: phone layout ----------
   .sr-only labels are position:absolute. Inside a horizontal scroller (allergen table) or a clipped card they need a
   positioned ancestor, otherwise they sit at their un-scrolled x position, widen the document and the phone zooms the
   whole page out ("site not responsive"). */
.altable-wrap, .altable th, .altable td, .alstrip__i, .card, .platter, .subnav__cats, .showcase, .checks-list { position: relative; }
.cards, .plp--full .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plp--full .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 1100px) { .plp--full .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cards, .plp--full .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html, body { overflow-x: clip; }
/* card internals may never be wider than the card: every nested grid gets a shrinkable column */
.card__body, .card__al { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.alstrip { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.alstrip__i { min-width: 0; overflow: hidden; }
.card__title { overflow-wrap: anywhere; }
.card__head { flex-wrap: wrap; gap: 2px 12px; }
@media (max-width: 760px) {
	.card__body { padding: 12px 10px; }
	.card__al { padding: 8px; }
	.card .alstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 11 icons in two rows: still readable at 150px */
	.card .alstrip__i { padding: 5px 0; }
	.card__actions { gap: 4px 10px; }
	.card__actions .pill--sm { width: 100%; justify-content: center; }
	.metarow { font-size: 12px; }
}
@media (max-width: 380px) { .al { padding: 2px 7px 2px 5px; font-size: 12px; } }
/* quote sheet on phones: full width bottom sheet, nothing wider than the screen */
.sheet__in { grid-template-columns: minmax(0, 1fr); }
.qfields .field, .qfields input, .qfields textarea { min-width: 0; max-width: 100%; }
.qlist__name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
	.sheet--quote { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; }
	.sheet--quote .sheet__in { max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
	.sheet--quote .sheet__title { font-size: 34px; }
	.sheet--quote .pill--lg { padding: 12px 16px; font-size: 16px; }
	.qlist__i { padding: 6px 4px 6px 12px; gap: 4px; }
}
/* the labelled strip (dish dialog) keeps its wrapping grid; only the compact 11-icon strip is forced into equal shrinkable columns */
.alstrip.alstrip--labels { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

/* ---------- 2026-09-20: phone header + category bar ---------- */
@media (max-width: 960px) {
	/* the nav turns into a fixed drawer here, so nothing pushed the menu button right any more */
	.header__right { margin-left: auto; }
}
@media (max-width: 760px) {
	/* categories get their own scrollable row; search + Filters share the row below instead of squeezing them */
	.subnav__in { flex-wrap: wrap; gap: 8px; padding: 8px 0 10px; }
	.subnav__cats { flex: 1 1 100%; order: 1; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
	.subnav__cats .chip { flex: none; }
	.subnav__tools { flex: 1 1 100%; order: 2; }
	.subnav__tools .search { flex: 1 1 auto; min-width: 0; }
	.subnav__tools .search input { width: 100%; min-width: 0; }
}
/* cookie "revisit consent" bubble (CookieYes): on phones it sat on top of the quick bar's Menu button. Lift it above the bar
   (same height as the WhatsApp button on the other side) and make it smaller; hide it while a sheet or the nav drawer is open. */
@media (max-width: 960px) {
	.cky-btn-revisit-wrapper { bottom: calc(86px + env(safe-area-inset-bottom)) !important; left: 14px !important; width: 38px !important; height: 38px !important; z-index: 89 !important; }
	.cky-btn-revisit-wrapper .cky-btn-revisit img { width: 24px !important; height: 24px !important; }
	body.nav-open .cky-btn-revisit-wrapper, body.dish-open .cky-btn-revisit-wrapper, body.filters-open .cky-btn-revisit-wrapper { display: none !important; }
	/* the consent banner itself must clear the quick bar too */
	.cky-consent-container { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}


/* ---------- 2026-09-20: whole photos on charcoal instead of cutouts ----------
   The shoot photos carry their own charcoal background (tools/recolor-cloth.py), so every photo frame is charcoal too:
   no light flash while loading, and the few remaining cutouts (white-background cans) sit on the same colour. */
:root { --photo-bg: #2a2927; --stage: radial-gradient(120% 90% at 50% 42%, #3a3936 0%, #2a2927 60%, #232220 100%); }
.card__media, .tile__media, .rail__item, .dish__media, .showcase__media, .platter__media { background: var(--photo-bg); }
.card__media--empty { background: var(--cloud); }
.dish__media { min-height: 320px; }
@media (max-width: 700px) { .dish__media { aspect-ratio: 4 / 3; min-height: 0; width: 100%; } .dish__in { grid-template-columns: minmax(0, 1fr); } }
.platter__media { aspect-ratio: 1; }
@media (max-width: 600px) { .platter__media { aspect-ratio: 4 / 3; } }

/* ---------- 2026-09-20: dish pop-up scrolling + instant photo swap ----------
   Desktop: the text column scrolls inside a height-limited grid row. Phone: the whole sheet scrolls (photo included), the
   close button stays put. dvh = the visible height on phones whose address bar takes part of 100vh. */
.dish__in { grid-template-rows: minmax(0, 1fr); }
.dish__body { min-height: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
@media (max-width: 700px) {
	.dishdlg { max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; }
	.dish__in { display: block; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.dish__body { overflow: visible; max-height: none; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
	.dish__close { position: fixed; top: 12px; right: 12px; z-index: 5; }
}
/* the photo of the previous dish never shows: v2.js hides the image until the new one has loaded */
.dish__media img { transition: opacity 180ms; }
.dish__media img.is-loading { opacity: 0; transition: none; }

/* ---------- 2026-09-20: catering = the whole menu by category, prices on, no descriptions ---------- */
/* Without a description the card has to say what the dish contains, so the ingredient line is not clamped on the catering page. */
.catermenu .card__ingredients { display: block; -webkit-line-clamp: unset; overflow: visible; }
.card__suits { color: var(--ink); }
.group__note { margin-left: 8px; padding: 3px 10px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font: 600 12px/1.4 Inter, sans-serif; letter-spacing: .02em; text-transform: none; vertical-align: middle; white-space: nowrap; }
.dish__suits { font-size: 14px; color: var(--ink); }

/* 2026-09-20: delivery postcode in the catering form and the quote sheet */
.field__postcode { text-transform: uppercase; }
.field__postcode::placeholder { text-transform: none; }

/* ---------- 2026-09-20: the quote sheet is a full order form (same fields as the catering form) with prices and a total ---------- */
.qlist__i { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.qlist__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.qtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; }
.qtotal[hidden] { display: none; }
.qtotal strong { font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
.qfields .diet { gap: 6px; }
.qfields .diet__chip span { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.fulfil__note { width: 100%; font-size: 14px; margin-top: 2px; }
.fulfil__note[hidden], .field[hidden] { display: none; }
.qfields.is-checked :invalid { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }
.qfields__err { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fdecea; color: #8e1b16; font-size: 14px; font-weight: 500; }
.qfields__err[hidden] { display: none; }
.field--full { grid-column: 1 / -1; }
.qfields.is-checked .diet__chip input:invalid + span { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }
/* a card without a description (owner's 2026-09-20 lists) shows its whole contents line */
.card__body:not(:has(.card__desc)) .card__ingredients { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ---------- 2026-09-20: 320px phones ---------- */
/* A grid track of "1fr" never gets narrower than its widest child (date/time inputs, the form buttons), which pushed the quote
   section 8px past a 320px screen. minmax(0, 1fr) lets the track shrink; the fields then shrink with it. */
@media (max-width: 900px) { .quote { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .form__row, .form__grid { grid-template-columns: minmax(0, 1fr); } }
.quote > *, .form__grid > *, .field, .field input, .field textarea { min-width: 0; max-width: 100%; }
.form__send .pill { max-width: 100%; white-space: normal; text-align: center; }
/* top bar: the open/closed note and the phone number did not both fit */
@media (max-width: 360px) { .utility { font-size: 11px; } .utility__in { gap: 8px; } .utility__in > * { gap: 4px; min-width: 0; } .utility__in > :first-child { overflow: hidden; text-overflow: ellipsis; } }
.quote .pill { max-width: 100%; white-space: normal; text-align: center; }

/* ---------- 2026-09-20: the quote sheet keeps its own scroll ---------- */
/* At the end of the sheet the scroll used to carry on into the page behind it; on phones that also moved the address bar and the
   sheet jumped. The page is locked while the sheet is open, the sheet does not pass its scroll on, and its height follows the
   visible screen (dvh), not the screen without the address bar (vh). Same treatment as the dish dialog. */
body.sheet-open { overflow: hidden; }
body.sheet-open .cky-btn-revisit-wrapper { display: none !important; }
.sheet--quote { overflow: hidden; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.sheet--quote .sheet__in { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
	.sheet--quote { max-height: 92vh; max-height: 92dvh; }
	.sheet--quote .sheet__in { max-height: 92vh; max-height: 92dvh; }
}