/* Taner network — structural base shared by the three restaurant themes.
 *
 * SHARED FILE: edit it in `_shared/theme/` and run `scripts/sync-shared.sh`.
 *
 * Deliberately plain: layout, rhythm, accessibility and the behaviour of the
 * shared components. Every restaurant's character (type, colour, shapes,
 * hero composition) lives in its own assets/css/brand.css, so the three
 * sites never look like one template in three colours.
 *
 * Site hooks (set in brand.css):
 *   --tn-radius      corner radius of panels (0 for the poster site)
 *   --tn-rule        rule / border colour
 *   --tn-section-y   vertical section padding
 */

:root {
	--tn-radius: 6px;
	--tn-rule: var(--line);
	--tn-section-y: clamp(64px, 9vw, 128px);
}

/* The parent styles one word per heading in italic accent colour; this
   network does not use that device. */
.display em, .section-head h2 em, .tn-head h2 em, h1 em, h2 em { font-style: inherit; color: inherit; }

/* ---------- Section rhythm ---------- */
.tn-section { padding: var(--tn-section-y) 0; background: var(--paper); }
.tn-tone-alt { background: var(--surface-2); }
.tn-tone-brand { background: var(--brand-ink); color: rgba(255,255,255,0.86); }
.tn-tone-brand h2, .tn-tone-brand h3 { color: #fff; }
.tn-section:not([class*="tn-tone-"]) + .tn-section:not([class*="tn-tone-"]),
.tn-tone-alt + .tn-tone-alt, .tn-tone-brand + .tn-tone-brand { padding-top: 0; }

.tn-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.tn-head.is-center { margin-inline: auto; text-align: center; }
.tn-head .eyebrow { display: block; margin-bottom: 12px; color: var(--brand-text); }
.tn-head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 56px); color: var(--heading); }
.tn-tone-brand .tn-head h2 { color: #fff; }
.tn-intro { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--ink-soft); max-width: 40rem; }
.tn-tone-brand .tn-intro { color: rgba(255,255,255,0.8); }
.tn-small { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.tn-kicker { display: block; font-size: 14px; font-weight: 600; color: var(--brand-text); }

.tn-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tn-cta .ctas { margin-top: 26px; }
.tn-link-arrow { font-weight: 600; color: var(--brand-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tn-link-arrow:hover { text-decoration-thickness: 2px; }

.tn-prose { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.tn-prose > * { max-width: 66ch; }
.tn-prose p { margin: 0 0 1em; }
.tn-prose h2, .tn-prose h3 { font-family: var(--font-display); color: var(--heading); line-height: 1.15; margin: 1.6em 0 .5em; }
.tn-prose a { color: var(--brand-text); }

.tn-checklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.tn-checklist li { position: relative; padding-left: 22px; line-height: 1.55; color: var(--ink-soft); }
.tn-checklist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--brand-text); }
.tn-checklist.is-compact { gap: 4px; font-size: 15px; }

:where(.tn-section, .tn-hero, .tn-page-hero) a:focus-visible,
:where(.tn-section, .tn-hero, .tn-page-hero) button:focus-visible,
:where(.tn-section, .tn-hero, .tn-page-hero) input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Live status ---------- */
.tn-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tn-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9a9a9a; flex: none; }
.tn-status.is-open::before { background: #2fa565; box-shadow: 0 0 0 4px rgba(47,165,101,0.18); }
.tn-status.is-closed::before { background: #b0483c; }

/* ---------- Page hero (inner pages) ---------- */
.tn-page-hero { position: relative; padding: clamp(120px, 16vh, 170px) 0 clamp(40px, 6vw, 72px); background: var(--surface-2); overflow: hidden; }
.tn-page-hero.has-media { background: var(--brand-ink); color: #fff; min-height: min(560px, 72svh); display: grid; align-items: end; }
.tn-page-hero-media { position: absolute; inset: 0; }
.tn-page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tn-page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.2) 62%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.7) 100%); }
.tn-page-hero-inner { position: relative; z-index: 1; width: 100%; }
.tn-page-hero .eyebrow { display: block; margin-bottom: 12px; color: var(--brand-text); }
.tn-page-hero.has-media .eyebrow { color: #fff; }
.tn-page-hero h1 { margin: 0; font-size: clamp(42px, 6.6vw, 88px); line-height: 1; color: var(--heading); max-width: 18ch; }
.tn-page-hero.has-media h1 { color: #fff; }
.tn-lead { max-width: 38rem; margin: 20px 0 0; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--ink-soft); }
.tn-page-hero.has-media .tn-lead { color: rgba(255,255,255,0.9); }
.tn-page-hero.has-media .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.tn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 20px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.tn-page-hero.has-media .tn-chips { color: rgba(255,255,255,0.9); }

.tn-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.tn-breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.tn-breadcrumbs a { color: inherit; text-decoration: none; }
.tn-breadcrumbs a:hover { text-decoration: underline; }
.tn-page-hero.has-media .tn-breadcrumbs ol { color: rgba(255,255,255,0.78); }

/* ---------- Text block ---------- */
.tn-text-grid { display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; }
.tn-text.has-media .tn-text-grid { grid-template-columns: 1.05fr 1fr; }
.tn-text.is-media-left .tn-text-media { order: -1; }
.tn-text-media { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-3); border-radius: var(--tn-radius); }
.tn-text-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Features (plain list of facts, no card chrome) ---------- */
.tn-feature-grid { display: grid; grid-template-columns: repeat(var(--tn-cols, 3), minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.tn-feature { padding: 22px 0; border-top: 1px solid var(--tn-rule); }
.tn-icon { display: none; }
.tn-feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 4px 0 8px; color: var(--heading); }
.tn-feature p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.tn-tone-brand .tn-feature { border-color: rgba(255,255,255,0.18); }
.tn-tone-brand .tn-feature p { color: rgba(255,255,255,0.78); }

/* ---------- Cards ---------- */
.tn-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.tn-card { position: relative; display: flex; flex-direction: column; }
.tn-card-media { margin: 0 0 16px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); border-radius: var(--tn-radius); }
.tn-card-media img { width: 100%; height: 100%; object-fit: cover; }
.tn-card-body { display: grid; gap: 6px; }
.tn-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0; color: var(--heading); line-height: 1.15; }
.tn-card h3 a { text-decoration: none; color: inherit; }
.tn-card h3 a::after { content: ""; position: absolute; inset: 0; }
.tn-card h3 a:hover { text-decoration: underline; }
.tn-card p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.tn-card-meta { font-weight: 700; color: var(--brand-text) !important; }

/* ---------- Menu ---------- */
.tn-menu-nav { position: sticky; top: 72px; z-index: 5; margin: 0 0 32px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--tn-rule); }
.tn-tone-alt .tn-menu-nav { background: var(--surface-2); }
.tn-menu-nav ul { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.tn-menu-nav ul::-webkit-scrollbar { display: none; }
.tn-menu-nav a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-soft); padding: 6px 0; border-bottom: 2px solid transparent; }
.tn-menu-nav a:hover { color: var(--brand-text); border-bottom-color: currentColor; }
.tn-menu-sections { columns: 2 400px; column-gap: clamp(32px, 5vw, 72px); }
.tn-menu-section { break-inside: avoid; margin: 0 0 44px; scroll-margin-top: 140px; }
.tn-menu-section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.8vw, 34px); color: var(--heading); margin: 0 0 6px; }
.tn-menu-section-note { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.tn-menu-items { list-style: none; padding: 0; margin: 8px 0 0; }
.tn-menu-item { padding: 11px 0; border-bottom: 1px solid var(--tn-rule); }
.tn-menu-item-line { display: flex; align-items: baseline; gap: 10px; }
.tn-menu-item-name { font-weight: 600; color: var(--ink); }
.tn-menu-item-dots { flex: 1; }
.tn-menu-item-price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tn-menu-item-price.is-sizes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 16px; white-space: normal; }
.tn-price-opt { white-space: nowrap; }
.tn-price-size { font-weight: 500; font-size: .86em; color: var(--muted); }
.tn-menu-item-desc { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.tn-tag { flex: none; align-self: center; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 3px; background: var(--surface-3); color: var(--ink-soft); }
.tn-tag-piquant { background: #f6dcd6; color: #8c2a1e; }
.tn-tag-ch { background: #f3d9d7; color: #9e1d16; }
.tn-tag-vegetarien { background: #dcebd9; color: #2b5e2f; }
.tn-menu-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Picked dishes (prices from data/menu.json) ---------- */
.tn-picks-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.tn-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--tn-rule); }
.tn-pick-name { max-width: 15em; }
.tn-pick-dots { align-self: end; min-width: 24px; margin-bottom: .45em; border-bottom: 2px dotted var(--tn-rule); }
.tn-pick-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--heading); }
.tn-pick-price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--ink); }
.tn-pick-desc { grid-column: 1 / -1; margin-top: 4px; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- Size / price table ---------- */
.tn-table-scroll { overflow-x: auto; }
.tn-price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tn-price-table th, .tn-price-table td { padding: 14px 12px; text-align: right; border-bottom: 1px solid var(--tn-rule); vertical-align: top; }
.tn-price-table thead th { font-size: 14px; font-weight: 600; color: var(--muted); }
.tn-price-table th[scope="row"], .tn-price-table thead th:first-child { text-align: left; }
.tn-table-name { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--heading); }
.tn-table-desc { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.tn-price-table td { font-weight: 700; font-size: 17px; }

/* ---------- Delivery checker ---------- */
/* minmax(0, 1fr): an input's built-in width (~20 characters) would otherwise
   set the column's minimum and push the button out of a padded box. */
.tn-checker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tn-checker-label { font-weight: 700; }
.tn-checker-row { display: flex; }
.tn-checker-input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-right: 0; border-radius: var(--tn-radius) 0 0 var(--tn-radius); }
.tn-checker-button { height: 52px; padding: 0 20px; font: inherit; font-weight: 700; color: #fff; background: var(--ink); border: 2px solid var(--ink); border-radius: 0 var(--tn-radius) var(--tn-radius) 0; cursor: pointer; }
.tn-checker-result[hidden] { display: none; }
.tn-checker-result { display: grid; gap: 8px; padding: 14px 16px; border-left: 4px solid var(--muted); background: var(--surface); color: var(--ink); }
.tn-checker-result p { margin: 0; line-height: 1.5; }
.tn-checker-result.is-yes { border-color: #2fa565; }
.tn-checker-result.is-sister { border-color: var(--accent); }
.tn-checker-link { font-weight: 700; color: var(--brand-text); }
.tn-checker-link.is-primary { justify-self: start; padding: 10px 16px; color: #fff; background: var(--brand); text-decoration: none; border-radius: var(--tn-radius); }
.tn-checker-grid { display: grid; grid-template-columns: 1fr minmax(300px, 460px); gap: clamp(28px, 5vw, 72px); align-items: end; }

/* ---------- Media (poster + video) ---------- */
.tn-media { position: relative; overflow: hidden; background: var(--brand-ink); }
.tn-media-poster, .tn-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-media-video { opacity: 0; transition: opacity .8s ease; }
.tn-media.is-playing .tn-media-video { opacity: 1; }
.tn-media-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); cursor: pointer; }
.tn-media-toggle::before, .tn-media-toggle::after { content: ""; position: absolute; top: 15px; width: 4px; height: 14px; background: #fff; }
.tn-media-toggle::before { left: 16px; }
.tn-media-toggle::after { left: 24px; }
.tn-media-toggle.is-paused::before { left: 18px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.tn-media-toggle.is-paused::after { display: none; }
.tn-media-section .tn-media { aspect-ratio: 16 / 9; border-radius: var(--tn-radius); }
.tn-media-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.tn-media-strip figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--tn-radius); }
.tn-media-strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Delivery zones ---------- */
.tn-zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.tn-zone { padding-top: 16px; border-top: 3px solid var(--ink); }
.tn-zone header { display: grid; gap: 2px; margin-bottom: 12px; }
.tn-zone-min { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--heading); }
.tn-zone-fee { font-size: 14px; color: var(--muted); }
.tn-zone-places { list-style: none; padding: 0; margin: 0; line-height: 1.75; color: var(--ink-soft); }
.tn-zone-places li { display: inline; }
.tn-zone-places li:not(:last-child)::after { content: ", "; }
.tn-zone-hours { margin-top: 36px; max-width: 520px; }
.tn-zone-hours h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--heading); margin: 0 0 8px; }
.tn-zone-note { margin-top: 18px; color: var(--ink-soft); }

/* ---------- Hours ---------- */
.tn-hours { margin: 0; display: grid; }
.tn-hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--tn-rule); }
.tn-hours-row dt { font-weight: 600; color: var(--ink); }
.tn-hours-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tn-hours-row dt { white-space: nowrap; }
.tn-period { white-space: nowrap; }
.tn-hours-row.is-today dt, .tn-hours-row.is-today dd { color: var(--brand-text); font-weight: 700; }
.tn-hours-row.is-closed dd { color: var(--muted); }
.tn-hours-compact .tn-hours-row { padding: 6px 0; font-size: 14.5px; }

/* ---------- Visit ---------- */
.tn-visit-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.tn-visit-cards { display: grid; gap: 28px; }
.tn-visit-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--heading); }
.tn-address { margin: 0 0 8px; line-height: 1.6; color: var(--ink-soft); }
.tn-contact-lines { margin: 0 0 12px; line-height: 1.8; }
.tn-contact-lines a { color: var(--ink); font-weight: 600; }

.tn-map { position: relative; min-height: 420px; overflow: hidden; background: var(--brand-ink); border-radius: var(--tn-radius); }
.tn-map-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.tn-map-overlay { position: relative; z-index: 1; height: 100%; min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; color: #fff; background: rgba(0,0,0,0.35); }
.tn-map-overlay p { margin: 0; font-weight: 600; }
.tn-map-link { color: #fff; font-size: 14px; }
.tn-map-privacy { font-size: 12.5px !important; font-weight: 400 !important; opacity: .8; max-width: 34ch; }
.tn-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tn-map.is-loaded .tn-map-overlay, .tn-map.is-loaded .tn-map-poster { display: none; }

/* ---------- Contact ---------- */
.tn-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.tn-contact-card { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--tn-rule); text-decoration: none; color: inherit; }
.tn-contact-card span { font-size: 14px; color: var(--muted); }
.tn-contact-card strong { font-size: 20px; color: var(--heading); overflow-wrap: anywhere; }
a.tn-contact-card:hover strong { text-decoration: underline; }

/* ---------- Gallery ---------- */
.tn-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 10px; }
.tn-gallery-grid figure { margin: 0; overflow: hidden; grid-column: span 4; grid-row: span 2; border-radius: var(--tn-radius); background: var(--surface-3); }
.tn-gallery-grid figure:first-child { grid-column: span 8; grid-row: span 4; }
.tn-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Reviews ---------- */
.tn-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.tn-rating strong { font-family: var(--font-display); font-size: 52px; color: var(--heading); line-height: 1; }
.tn-stars { color: #d9961a; letter-spacing: 2px; }
.tn-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.tn-review { margin: 0; display: grid; gap: 12px; align-content: start; }
.tn-review blockquote { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.45; color: var(--ink); }
.tn-review figcaption { font-size: 14px; color: var(--muted); }

/* ---------- Network ---------- */
.tn-network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.tn-network-card { display: grid; grid-template-rows: auto 1fr; }
.tn-network-media { margin: 0 0 16px; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,0.08); border-radius: var(--tn-radius); }
.tn-network-media img { width: 100%; height: 100%; object-fit: cover; }
.tn-network-body { display: grid; gap: 8px; align-content: start; }
.tn-network-body .tn-network-name { font-family: var(--font-display); font-weight: 600; font-size: 28px; margin: 0; color: var(--heading); }
.tn-network-body p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.tn-network-meta { font-size: 14.5px; color: var(--muted) !important; }
.tn-network-here { font-size: 14px; font-weight: 700; color: var(--muted); }
.tn-tone-brand .tn-network-body .tn-network-name { color: #fff; }
.tn-tone-brand .tn-network-body p { color: rgba(255,255,255,0.8); }
.tn-tone-brand .tn-network-meta, .tn-tone-brand .tn-network-here { color: rgba(255,255,255,0.62) !important; }
.tn-tone-brand .tn-link-arrow, .tn-tone-brand .tn-kicker { color: #fff; }

/* ---------- Youth protection ---------- */
.tn-age-table { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.tn-age-table ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.tn-age-title { margin: 0; font-weight: 700; font-size: 13px; }

/* ---------- Opening-hours card + modal (parent markup, our content) ---------- */
/* The parent card folds its identity block to zero width once the visitor
   scrolls, and that block is where our live status sits: the pill ended up
   as a bare logo. These rules restate the card on its own terms. It always
   shows the status and only drops the tagline when it shrinks (after
   scrolling, and on phones). On the home page the hero carries the status
   itself, so the card waits until that line has scrolled away (taner.js sets
   body.tn-hero-passed) instead of landing on the hero's title, tiles or
   village checker. Brand files restyle the surface for both states. */
/* CodeOrder Theme 2.2 moves the card into the page flow under its hero on
   phones (782 px and less). Ours is printed in wp_footer on inner pages, so it
   stays pinned bottom-left on every screen, clear of the app bar. */
.tn-info-zone {
	position: fixed;
	left: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	z-index: 80;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
@media (max-width: 782px) {
	body.has-bottom-app-menu .tn-info-zone { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
}
.tn-info-card,
.tn-info-card:not(.is-compact) {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	max-width: calc(100vw - 28px);
	padding: 10px 20px 10px 10px;
}
.tn-info-card .ic-head { gap: 12px; }
.tn-info-card .ic-avatar { width: 42px; height: 42px; }
.tn-info-card .ic-avatar img { width: 100%; height: 100%; object-fit: contain; }
.tn-info-card .ic-id,
.tn-info-card.is-compact .ic-id { display: grid; gap: 2px; max-width: none; opacity: 1; overflow: visible; text-align: left; }
.tn-info-card .tn-status { font-size: 15px; line-height: 1.25; white-space: nowrap; color: inherit; }
.tn-info-card .ic-tagline { font-size: 13px; color: inherit; opacity: .72; }

.tn-info-card.is-compact { gap: 10px; padding: 6px 18px 6px 6px; }
.tn-info-card.is-compact .ic-avatar { width: 34px; height: 34px; }
.tn-info-card.is-compact .ic-tagline { display: none; }

.tn-info-zone .tn-info-card {
	transition:
		gap 300ms cubic-bezier(0.22, 1, 0.36, 1),
		padding 300ms cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 300ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease,
		opacity 250ms ease, transform 250ms ease, visibility 0s;
}
body.is-front-page:not(.tn-hero-passed) .tn-info-zone .tn-info-card {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
@media (prefers-reduced-motion: reduce) {
	.tn-info-zone .tn-info-card,
	body.is-front-page:not(.tn-hero-passed) .tn-info-zone .tn-info-card { transition: none; transform: none; }
}

@media (max-width: 600px) {
	.tn-info-card,
	.tn-info-card:not(.is-compact) { gap: 10px; padding: 6px 16px 6px 6px; }
	.tn-info-card .ic-avatar { width: 34px; height: 34px; }
	.tn-info-card .ic-tagline { display: none; }
	.tn-info-card .tn-status { font-size: 14px; }
}
.tn-hours-modal .hours-modal-sheet { max-width: 100vw; }
.tn-hours-modal .hm-week td, .tn-hours-modal .tn-hours-row dd { white-space: normal; }
.tn-hours-modal .hm-status { margin: 0 0 18px; font-size: 18px; }
.tn-hours-modal .hm-section-title { margin: 22px 0 6px; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.tn-hours-modal .hm-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.tn-hours-modal .hm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tn-hours-modal .hm-action { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--tn-radius); font-weight: 600; text-decoration: none; color: var(--ink); }
.tn-hours-modal .hm-action.is-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tn-hours-modal .hm-address { margin: 0; color: var(--ink-soft); }
.tn-mm-status { margin: 0 0 14px; }

/* ---------- Logo ---------- */
/* The drawer head holds the logo next to its actions; a wide wordmark used
   to push the hidden sheet past the viewport and add a sideways scroll. */
.mobile-menu-head .custom-logo { height: 32px; max-width: 52vw; object-fit: contain; object-position: left center; }
.mobile-menu { max-width: 100vw; }
body { overflow-x: clip; }
.nav-logo .custom-logo, .mm-brand .custom-logo { height: var(--tn-logo-h, 44px); width: auto; }
.tn-logo-text { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--heading); }
.footer-brand .custom-logo.is-white { filter: none; }
.tn-footer-logo { display: inline-block; margin-bottom: 18px; }
.tn-footer-logo .custom-logo { height: 60px; width: auto; }

/* ---------- Footer ---------- */
.tn-footer-grid { grid-template-columns: 1.2fr 0.9fr 1.1fr 1.2fr 1.1fr; gap: 40px; }
.tn-footer-nap { font-style: normal; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.8); margin: 0 0 10px; }
.tn-footer-nap strong { color: #fff; }
.tn-footer-directions { font-weight: 600; color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
.tn-hours-footer .tn-hours-row { padding: 6px 0; border-bottom-color: rgba(255,255,255,0.12); font-size: 14px; }
.tn-hours-footer .tn-hours-row dt { color: rgba(255,255,255,0.92); }
.tn-hours-footer .tn-hours-row dd { color: rgba(255,255,255,0.72); }
.tn-hours-footer .tn-hours-row.is-today dt, .tn-hours-footer .tn-hours-row.is-today dd { color: #fff; }
.tn-footer-network li { margin-bottom: 12px; }
.tn-footer-network a, .tn-footer-network li.is-self { display: grid; gap: 1px; }
.tn-footer-network strong { color: #fff; font-weight: 600; font-size: 15px; }
.tn-footer-network span { font-size: 13px; color: rgba(255,255,255,0.62); }
.tn-footer-age { padding: 20px 0; margin-bottom: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
.tn-footer-age .tn-age-table { color: rgba(255,255,255,0.62); }
/* Footer column titles are h2 (they follow the page's own h2s); they keep
   the small footer style rather than the section-title one. */
.footer .tn-footer-title { margin: 0 0 24px; font-family: var(--font-body); font-size: 15px; font-weight: 600; font-variation-settings: normal; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--on-brand-accent); }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.has-bottom-app-menu .nav-cta-btn { display: none; }
}
@media (max-width: 1180px) {
	.tn-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 920px) {
	.tn-text.has-media .tn-text-grid, .tn-visit-grid, .tn-checker-grid { grid-template-columns: minmax(0, 1fr); }
	.tn-text.is-media-left .tn-text-media { order: 0; }
	.tn-text-media { aspect-ratio: 16 / 11; }
	.tn-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tn-footer-grid { grid-template-columns: 1fr 1fr; }
	.tn-menu-nav { top: 62px; }
	.tn-gallery-grid figure, .tn-gallery-grid figure:first-child { grid-column: span 6; grid-row: span 2; }
	.tn-gallery-grid figure:first-child { grid-column: span 12; grid-row: span 3; }
}
@media (max-width: 600px) {
	.tn-feature-grid { grid-template-columns: 1fr; }
	.tn-footer-grid { grid-template-columns: 1fr; }
	.tn-map, .tn-map-overlay { min-height: 320px; }
	.tn-page-hero h1 { font-size: 40px; }
	/* Sizes get their own line under the dish name. */
	.tn-menu-item-line:has(.is-sizes) { flex-wrap: wrap; }
	.tn-menu-item-price.is-sizes { flex-basis: 100%; justify-content: flex-start; order: 5; }
	.tn-menu-item-line:has(.is-sizes) .tn-menu-item-dots { display: none; }
}
/* ---------- Menu du jour ---------- */
/* The week as a list of days: day on the left, its dishes on the right,
   today marked, past days quieter, the all-week offers in a box below. */
.tn-mdj { display: grid; gap: clamp(48px, 7vw, 88px); }
.tn-mdj-week[hidden], .tn-mdj-empty[hidden], .tn-mdj-today-when[hidden] { display: none; }
.tn-mdj-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 14px; border-bottom: 2px solid var(--heading); }
.tn-mdj-title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; color: var(--heading); }
.tn-mdj-serving { margin: 0; font-size: 15px; color: var(--muted); }
.tn-mdj-days, .tn-mdj-dishes, .tn-mdj-today-items { list-style: none; margin: 0; padding: 0; }
.tn-mdj-day { display: grid; grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--tn-rule); }
.tn-mdj-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.tn-mdj-dayname { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--heading); }
.tn-mdj-daynum { font-size: 15px; color: var(--muted); }
.tn-mdj-today-tag { display: none; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.tn-mdj-day.is-today { margin: 0 -16px; padding-left: 16px; padding-right: 16px; background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: var(--tn-radius); }
.tn-mdj-day.is-today .tn-mdj-today-tag { display: inline-block; }
.tn-mdj-day.is-past { opacity: .5; }
.tn-mdj-dishes { display: grid; gap: 14px; }
.tn-mdj-line, .tn-mdj-today-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.tn-mdj-label { font-size: 14px; font-weight: 700; color: var(--brand-text); }
.tn-mdj-name { flex: 1 1 12ch; font-size: 18px; font-weight: 600; color: var(--ink); }
.tn-mdj-price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.tn-mdj-desc { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tn-mdj-weekly { margin-top: 28px; padding: 22px 24px; background: var(--surface-2); border-radius: var(--tn-radius); }
.tn-mdj-weekly-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 22px; color: var(--heading); }
.tn-mdj-note { margin: 18px 0 0; color: var(--ink-soft); }
.tn-mdj-empty { margin: 0; font-size: 18px; line-height: 1.55; }
.tn-mdj-empty a { font-weight: 700; white-space: nowrap; }

/* Seasonal block (chasse, carte d'été): brand files place and colour it. */
.tn-season[hidden] { display: none; }
.tn-season { display: grid; gap: 12px; justify-items: start; }
.tn-season-title { margin: 0; }
.tn-season-text { margin: 0; line-height: 1.5; }
.tn-season-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; font-weight: 700; text-decoration: none; }

/* Home page: today's lunch next to the section text. */
.tn-mdj-today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.tn-mdj-today-card { padding: 24px 26px; background: var(--surface); border: 1px solid var(--tn-rule); border-radius: var(--tn-radius); }
.tn-mdj-today-when { margin: 0 0 10px; font-weight: 700; color: var(--brand-text); }
.tn-mdj-today-list { display: block; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.tn-mdj-today-items { display: grid; gap: 10px; }
.tn-mdj-today-card .tn-ctas { margin-top: 20px; }

@media (max-width: 760px) {
	.tn-mdj-day { grid-template-columns: minmax(0, 1fr); }
	.tn-mdj-day.is-today { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
	.tn-mdj-weekly { padding: 18px; }
	.tn-mdj-today-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones: size table as cards ---------- */
/* Four columns do not fit 375 px: the dish name was squeezed to one word a
   line. Each dish becomes a block, its sizes a row of labelled prices. */
@media (max-width: 600px) {
	.tn-price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.tn-price-table, .tn-price-table tbody { display: block; }
	.tn-price-table tr { display: grid; grid-template-columns: repeat(var(--tn-cols, 3), minmax(0, 1fr)); gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--tn-rule); }
	.tn-price-table th[scope="row"] { grid-column: 1 / -1; padding: 0 0 4px; border: 0; }
	.tn-price-table td { display: grid; gap: 1px; padding: 8px 10px; text-align: left; border: 1px solid var(--tn-rule); border-radius: var(--tn-radius); }
	.tn-price-table td::before { content: attr(data-label); font-size: 13px; font-weight: 500; color: var(--muted); }
}

/* ---------- Touch targets ---------- */
/* Anything a thumb aims at gets 44 px of height. Rows of text links get it
   from padding, not from bigger type, so the layout keeps its rhythm. */
@media (max-width: 920px) {
	.nav-menu-btn { width: 44px; height: 44px; }
	.nav-account { padding: 8px; }
	.footer-socials a { width: 44px; height: 44px; }
	.footer-col ul { display: grid; gap: 0; }
	.footer-col li { margin: 0; }
	.footer-col ul a, .footer-legal a, .tn-credit a, .tn-footer-directions { display: inline-flex; align-items: center; min-height: 44px; }
	.footer-legal { flex-wrap: wrap; column-gap: 22px; row-gap: 0; }
	.tn-footer-network li { margin-bottom: 4px; }
	.footer-col .tn-footer-network a { display: grid; align-content: center; padding: 6px 0; }
	.tn-map-link { display: inline-flex; align-items: center; min-height: 44px; }
	.tn-link-arrow { display: inline-block; padding: 9px 0; }
	.tn-menu-nav { padding: 2px 0; }
	.tn-menu-nav ul { gap: 6px; }
	.tn-menu-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
	.tn-menu-nav li:first-child a { padding-left: 0; }
	.code-order-cart-close { min-width: 44px; min-height: 44px; }
	.tn-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
	.tn-card h3 a { display: inline-block; padding: 6px 0; }
	.tn-breadcrumbs ol { align-items: center; margin-bottom: 8px; }
	.nav-cta-btn { min-height: 44px; display: inline-flex; align-items: center; }
	.nav-logo .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
}
.faq-head .eyebrow { display: none; }

/* Category strips scroll sideways on phones: fade the right edge so the cut
   reads as "more this way", and pad the end so the last item can leave it. */
.tn-menu-nav ul { padding-right: 48px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }

.tn-footer-age .tn-age-table { color: rgba(255,255,255,0.74); }
.tn-footer-age .tn-small { color: inherit; }

@media (max-width: 782px) {
	/* End the page on the footer's own colour instead of a strip of page
	   background behind the app bar, and keep the last footer line clear of
	   the bar and the hours card above it. */
	body.has-bottom-app-menu { padding-bottom: 0; }
	body.has-bottom-app-menu .tn-footer { padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
	/* The header is sticky, not laid over the page: no need to clear it. */
	.tn-page-hero:not(.has-media) { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.tn-media-video { transition: none; }
}

/* CodeOrder's cart drawer waits off-screen to the right; its shadow bled a
   grey band onto the page edge while closed. */
.code-order-cart-drawer:not(.open) { box-shadow: none; }

/* ---------- Review fixes (v1.1.6) ---------- */

/* Carte: a long section (the pizzas) spans both columns and splits its own
   items, so neither column ends a screen early. */
.tn-menu-section--long { column-span: all; }
.tn-menu-section--long .tn-menu-items { columns: 2 360px; column-gap: clamp(32px, 5vw, 72px); }
.tn-menu-section--long .tn-menu-item { break-inside: avoid; }
.tn-menu-note { column-span: all; }

/* Carte tabs: every rubric visible on a wide screen, the current one marked. */
.tn-menu-nav a.is-active { color: var(--brand-text); border-bottom-color: currentColor; }
@media (min-width: 900px) {
	.tn-menu-nav ul { flex-wrap: wrap; row-gap: 2px; column-gap: 22px; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}

/* Piquant: a small pepper after the name instead of a word badge. */
.tn-tag-icon { flex: none; align-self: center; display: inline-flex; color: #b3261e; }
.tn-tag { border-radius: 2px; }

/* Closing call to action: the section heading and the buttons on the grid. */
.tn-cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px clamp(32px, 5vw, 80px); }
.tn-cta .tn-head { margin: 0; }
.tn-cta .tn-head .tn-intro { margin-bottom: 0; }
.tn-cta .tn-ctas { margin: 0; justify-content: flex-end; }
@media (max-width: 760px) {
	.tn-cta .wrap { grid-template-columns: 1fr; }
	.tn-cta .tn-ctas { justify-content: flex-start; }
}

/* Home picks: the leader stays on the last line of a wrapped name. */
.tn-pick { grid-template-columns: minmax(0, max-content) minmax(28px, 1fr) auto; align-items: last baseline; }
.tn-pick-name { line-height: 1.12; }
.tn-pick-dots { align-self: last baseline; height: .3em; margin: 0; }

/* Editable pages (legal, events): one reading column on the page grid. */
.tn-page-content .tn-prose { max-width: 46rem; }

/* Footer bottom row on one baseline, one size. */
.footer-bottom { align-items: baseline; font-size: 14px; }
.footer-bottom .footer-legal a, .footer-bottom .tn-credit a { font-size: inherit; }

/* Village names and street names do not break at their hyphen. */
/* (each name is an unbreakable box; lines break between names) */
.tn-zone-places li { display: inline-block; white-space: nowrap; margin-right: .3em; }
.tn-zone-places li:not(:last-child)::after { content: ","; }
.tn-nowrap { white-space: nowrap; }

/* FAQ toggles and status pills: the same small radius as the buttons. */
.faq-q .toggle { border-radius: 4px; }

/* Delivery zones: name as heading, minimum order as the figure. */
.tn-zone-name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--heading); }
.tn-zone .tn-zone-min { margin: 6px 0 0; }
.tn-zone-min-label { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; font-variation-settings: normal; letter-spacing: 0; color: var(--muted); }

/* Header: square-cornered nav and account link, a visible current page. */
/* The menu items sit in a list since CodeOrder Theme 2.2; it takes the nav's
   spacing so brand files keep setting it on .nav-center. */
.nav-center-list { gap: inherit; }
.nav-center a, .nav-account, .nav-account img, .nav-account .avatar, .nav-account span { border-radius: var(--tn-radius, 4px); }
/* The current page: its colour and a straight rule under the word (an inset
   shadow followed the link's rounded corners and read as a bent box). */
.nav-center .current-menu-item > a, .nav-center .current_page_item > a { position: relative; color: var(--brand-text); background: transparent; box-shadow: none; }
.nav-center .current-menu-item > a::after, .nav-center .current_page_item > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: currentColor; }

/* Footer: roman tagline, square social buttons. */
.footer-brand p { font-style: normal; }
.footer-socials a { border-radius: var(--tn-radius, 4px); }

/* Menu du jour: today marked by a rule on the grid; past days readable. */
.tn-mdj-today-tag { border-radius: var(--tn-radius, 4px); }
.tn-mdj-day.is-today { margin: 0; padding-left: 14px; padding-right: 0; background: none; border-left: 3px solid var(--brand); border-radius: 0; }
.tn-mdj-day.is-past { opacity: 1; }
.tn-mdj-day.is-past, .tn-mdj-day.is-past * { color: var(--muted); }
@media (max-width: 760px) { .tn-mdj-day.is-today { margin: 0; padding-left: 12px; padding-right: 0; } }

/* A pick's rows stay together when a neighbour in the grid row is taller. */
.tn-pick { align-content: start; }

/* Gallery: no photo left alone on the last row (4 or 5 photos). */
@media (min-width: 921px) {
	.tn-gallery-grid figure:nth-child(4):last-child { grid-column: span 12; }
	.tn-gallery-grid figure:nth-child(4):nth-last-child(2), .tn-gallery-grid figure:nth-child(5):last-child { grid-column: span 6; }
}
@media (max-width: 920px) {
	.tn-gallery-grid figure:nth-child(even):last-child { grid-column: span 12; }
}

/* Contact shows hours, phone and address in full; the floating card would
   only cover the phone number there (its hours dialog stays for the app bar). */
.tn-page-contact .info-card-zone { display: none; }

/* Plain page heroes (no photo): the header is in the flow, so 150 px above
   the breadcrumb read as an empty band. */
.tn-page-hero:not(.has-media) { padding-top: clamp(56px, 8vh, 88px); }

/* Skip link: a full-size target when it appears on keyboard focus. */
.skip-link.screen-reader-text:focus { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; }

/* ---------- WooCommerce cart block ---------- */
/* The parent's `.page-content a` (brand colour, underline) also hits links
   drawn as buttons (.wp-element-button, .wp-block-button__link), which keep
   core's grey fill: brand text on #32373c ("Proceed to Checkout", the empty
   cart's "Add to cart"). On the cart page they take the shape CodeOrder gives
   the checkout buttons on the next step (checkout-blocks-v2.css) on a flat
   brand fill: white on the light end of CodeOrder's gradient drops below
   4.5:1 (Croix 4.3 mid). */
.page-content a.wp-element-button { color: var(--on-brand); text-decoration: none; }
.wp-block-woocommerce-cart :is(.wc-block-components-button:not(.is-link):not(.text), .wp-block-button__link) {
	border: 0;
	border-radius: 14px;
	font-weight: 700;
	background: var(--brand);
	color: var(--on-brand);
	text-decoration: none;
}
.wp-block-woocommerce-cart :is(.wc-block-components-button:not(.is-link):not(.text), .wp-block-button__link):hover { background: var(--brand-deep); }
.wp-block-woocommerce-cart :is(.wc-block-components-button, .wp-block-button__link):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Seasonal carte announced on a page (section `season`). */
.tn-season-band[hidden] { display: none; }
.tn-season-band .tn-picks-list { margin-top: 4px; }

/* Rubrics with sizes (32 / 36 / 45 cm, mini / normale): the sizes once as
   column heads, each dish its prices in the same columns. */
.tn-menu-sizes, .has-sizes .tn-menu-item-line { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--tn-sizes, 3), 4.2em); column-gap: 12px; align-items: baseline; }
.tn-menu-sizes { margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--tn-rule); font-size: 13px; color: var(--muted); }
.tn-menu-sizes span, .tn-menu-item-price.is-col { text-align: right; }
.tn-menu-item-price.is-col { white-space: nowrap; }
.tn-menu-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.tn-menu-split .tn-menu-items { columns: auto; }
@media (max-width: 760px) {
	.tn-menu-split { grid-template-columns: minmax(0, 1fr); }
	.tn-menu-sizes, .has-sizes .tn-menu-item-line { grid-template-columns: minmax(0, 1fr) repeat(var(--tn-sizes, 3), 3.6em); column-gap: 8px; }
}

/* On the narrowest phones a long town name in a big title may break again. */
@media (max-width: 359px) { .tn-page-hero .tn-nowrap, .tn-head .tn-nowrap { white-space: normal; } }

/* A film behind a page title (page-hero `video`). */
/* The gradient (::after) follows the film in DOM order, so it stays above the
   video and under the title's .wrap (z-index 1): no z-index on it. */
.tn-page-hero-media .tn-media { position: absolute; inset: 0; background: transparent; }
.tn-page-hero-media .tn-media-toggle { top: 18px; right: 18px; bottom: auto; z-index: 3; }
.tn-page-hero.has-film { min-height: min(600px, 76svh); }