/* Shared shell stylesheet (MW-1) for the non-ordering pages
   (about/gallery/contact.html, book.html later) -- loaded by those pages
   ONLY. index.html keeps its own self-contained <style> block untouched
   (it just survived a comment-typo incident that silently killed its
   :root token block -- see its own <style> comment) and instead appends a
   FEW nav-only rules using the same class names as here, so the top nav bar
   reads identically on every page without this file ever being loaded by
   index.html itself.

   Tokens below are BYTE-FOR-BYTE the same names/defaults as index.html's own
   :root block (brand, on-brand, bg, surface, error, ink, mute, line, the
   ok/err badge-color pair, radius, shadow) so lib/theme.js's
   applyThemeStylesheet -- which only ever emits THESE fixed custom-property
   names -- themes these pages identically to the ordering page: a themed
   tenant's five web presets (classic/bold/elegant/fresh/night) look the
   same card/spacing language everywhere.
   NOTE: never write a token name followed immediately by a slash inside a
   CSS comment (e.g. avoid literally typing the two characters asterisk then
   slash mid-sentence) -- that sequence TERMINATES the comment early and the
   parser then treats the rest of this comment as raw CSS (the exact bug
   that once killed index.html's entire :root block). */

*{box-sizing:border-box;margin:0}
body{font:15px/1.5 system-ui,sans-serif;color:var(--ink);background:var(--bg)}

:root{
  /* --brand #c2410c (Ontabee orange, ≥4.5:1 with white — brand decision 2026-07-14) + --mute #5b6570: WCAG AA — see index.html's :root note
     and lib/theme.js CLASSIC_COLORS (2026-07-13 audit P1-1/P1-2). */
  --brand:#c2410c;--on-brand:#fff;--bg:#fff;--surface:#fff;--error:#b91c1c;
  --ink:#111827;--mute:#5b6570;--line:#e5e7eb;
  --ok-bg:#dcfce7;--ok-fg:#166534;--err-bg:#fee2e2;--err-fg:#b91c1c;
  --radius:12px;--shadow:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}

h1,h2,h3{font-family:var(--font-heading,var(--preset-heading-font,inherit))}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:10px 14px;z-index:10;border-radius:0 0 8px 0}
.skip:focus{left:0}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* --- Shared top nav bar (also referenced, by class name, from index.html's
   own appended nav-only rules -- kept in sync manually, small surface). --- */
.site-nav{border-bottom:1px solid var(--line);background:var(--surface)}
.site-nav-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.site-nav-inner::-webkit-scrollbar{display:none}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;white-space:nowrap;text-decoration:none;color:var(--ink);flex:none}
.site-brand img{max-height:32px;width:auto}
.site-nav-links{display:flex;gap:2px;flex:none}
.site-nav-links a{white-space:nowrap;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--mute);font-weight:600;font-size:.9rem}
.site-nav-links a:hover{background:var(--bg);color:var(--ink)}
.site-nav-links a[aria-current="page"]{background:var(--brand);color:var(--on-brand)}
.site-nav-cta{margin-inline-start:auto;flex:none;white-space:nowrap;background:var(--brand);color:var(--on-brand);border-radius:999px;padding:8px 16px;font-weight:700;font-size:.9rem;text-decoration:none}
/* L-1: language switcher -- only rendered when the storefront offers more
   than one language; sits just left of the "Order online" CTA (the CTA's
   own margin-left:auto keeps both clustered at the nav's trailing edge). */
/* Back affordance on every sub-page (2026-07-18): first pill in the nav. */
/* Language switcher (2026-07-18 polish): a nav pill with a globe glyph; the
   native select goes appearance:none with a CSS chevron so it reads like
   every other pill instead of a raw form control. */
.site-lang-wrap{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--surface);cursor:pointer}
.site-lang-wrap:hover{background:var(--bg)}
.site-lang-wrap .lang-globe{font-size:.95rem;line-height:1}
.site-lang-switch{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:600 13px system-ui,sans-serif;color:var(--ink);cursor:pointer;padding:0 16px 0 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6570' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px}
.site-lang-wrap + .site-nav-cta{margin-inline-start:10px}
[data-theme="bold"] .site-nav .site-lang-wrap{background:#1f2937;border-color:#374151}
[data-theme="bold"] .site-nav .site-lang-switch{color:#e5e7eb}
/* Phones: wrap instead of an invisible horizontal scroll (audit S5) —
   keep in sync with index.html's own copy of these nav rules. */
@media (max-width:640px){
  .site-nav-inner{flex-wrap:wrap;overflow-x:visible}
  .site-nav-links{order:10;flex:1 1 100%;flex-wrap:wrap}
}

/* --- Page hero: a slim, on-brand banner for the page's own H1 (About/
   Gallery/Contact) -- same soft brand-tint recipe as index.html's header,
   just at a smaller scale since the nav bar above already carries the
   restaurant identity. --- */
.page-hero{padding:36px 20px 32px;border-bottom:1px solid var(--line);background:rgba(194,65,12,.05)}
.page-hero{background:color-mix(in srgb, var(--brand) 6%, var(--bg))}
.page-hero-inner{max-width:1100px;margin:0 auto}
.page-hero h1{font-size:1.5rem;line-height:1.25}
.page-hero .note{color:var(--mute);margin-top:6px}

.page-wrap{max-width:1100px;margin:0 auto;padding:32px 20px 64px;display:flex;flex-direction:column;gap:28px}

.empty-note{color:var(--mute);padding:8px 0}

/* --- About page --- */
#about-text p{max-width:65ch;line-height:1.7;margin-top:12px}
#about-text p:first-child{margin-top:0}

/* --- Gallery grid (shared by about.html's interleaved strip and
   gallery.html's full grid) --- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gallery-grid img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

/* --- Branch cards (about/contact) -- same surface/line/radius/shadow token
   recipe as index.html's .branch-card, so a diner sees the identical card
   language whichever page they land on. --- */
.branch-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.branch-grid{grid-template-columns:1fr 1fr}}
.branch-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:6px}
.branch-card .b-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.branch-card .b-head strong{font-size:1.05rem;font-weight:600}
.branch-card .b-addr{color:var(--mute);font-size:.9rem}
.branch-card .b-hours{color:var(--mute);font-size:.85rem}
.branch-card .b-hours-row{display:flex;justify-content:space-between;gap:12px;max-width:320px}
.badge{display:inline-block;flex:none;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700;white-space:nowrap}
.badge.open{background:var(--ok-bg);color:var(--ok-fg)}
/* Closed is a ROUTINE state, not an error -- neutral amber, "Opens 11:00 AM"
   style (2026-07-13 audit P1/P2; kept in sync with index.html's own copy of
   this rule; night retint at the bottom of this file). */
.badge.closed{background:#fef3c7;color:#854d0e}
.branch-card .b-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}

/* Collapsed-by-default "All hours" week toggle (about.html) -- same small
   underlined-text-button recipe as index.html's .ms-hours-toggle, kept
   distinct from .pill-link below (that one is for bordered tel:/mailto:/
   map/social links, not this in-card disclosure control). */
.hours-toggle{background:none;border:0;padding:2px 0;margin-top:4px;align-self:flex-start;color:inherit;cursor:pointer;font:600 12px system-ui,sans-serif;text-decoration:underline;text-underline-offset:2px}

/* --- Pill links: tel:/mailto:/social/map -- same recipe as index.html's
   #ms-contact a. --- */
.pill-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface);font-size:.9rem}
.pill-link:hover{background:var(--bg)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}

/* --- Offers & promotions (promotions.html, P-1) -- same surface/line/
   radius/shadow card recipe as .branch-card, so an offer card reads as the
   same visual family as a branch card. --- */
.promo-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.promo-grid{grid-template-columns:1fr 1fr}}
.promo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:6px}
.promo-card strong{font-size:1.05rem;font-weight:600}
.promo-discount{color:var(--brand);font-weight:600}
.promo-expiry{color:var(--mute);font-size:.85rem}
.promo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.promo-code{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;letter-spacing:.02em}
.promo-copy{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:600 13px system-ui,sans-serif;cursor:pointer}
.promo-copy:hover{background:var(--bg)}
.promo-order{margin-left:auto}
.promo-auto{font-size:.85rem;color:var(--ok-fg, #166534);font-weight:600}
.ok-note { color: var(--ok-fg, #166534); font-weight: 600; }
[data-theme="bold"] .promo-card,[data-theme="bold"] .promo-code,[data-theme="bold"] .promo-copy{border-radius:4px}
[data-theme="fresh"] .promo-card,[data-theme="fresh"] .promo-code,[data-theme="fresh"] .promo-copy{border-radius:20px}

/* --- Reviews (reviews.html, R-2) -- the big average-rating header + a
   vertical stack of review cards, same surface/line/radius/shadow recipe as
   .promo-card/.branch-card so it reads as the same visual family. --- */
.reviews-summary{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:1.15rem;font-weight:700}
.reviews-summary .stars{color:#f59e0b;letter-spacing:1px}
.reviews-list{display:flex;flex-direction:column;gap:14px}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.review-card .stars{color:#f59e0b;letter-spacing:1px;font-size:1rem}
.review-card .review-comment{line-height:1.6}
.review-card .review-meta{color:var(--mute);font-size:.85rem}
[data-theme="bold"] .review-card{border-radius:4px}
[data-theme="fresh"] .review-card{border-radius:20px}

/* --- Home strip (index.html) -- a compact teaser between the menu preview
   and the contact footer: same card family, laid out 1-up mobile / 2-up
   desktop like the promo/branch grids. --- */
#ms-reviews{margin-top:28px}
#ms-reviews h3{font-size:1.05rem;margin-bottom:2px}
.reviews-strip-summary{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-weight:700}
.reviews-strip-summary .stars{color:#f59e0b;letter-spacing:1px}
.reviews-strip-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (min-width:640px){.reviews-strip-grid{grid-template-columns:1fr 1fr}}

/* --- Booking page (book.html, MW-2) -- form controls follow index.html's
   own label/input/.primary recipe; the slot grid mirrors its .slot styling
   so the full-page flow reads identically to the in-dialog one. --- */
/* margin-inline:auto -- centered on desktop instead of left-anchored at
   half width (2026-07-13 audit P2; applies to book.html's form and
   gift-card.html's buy/balance panels alike). */
/* 2026-07-18 redesign: the booking card widens into a two-column layout
   ("When are you coming?" beside "Your details") with roomier inputs and
   bigger slot chips; below 860px it stacks back to one column. */
.book-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;max-width:980px;margin-inline:auto;width:100%}
.bp-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:860px){
  .bp-grid{grid-template-columns:1.1fr 1fr}
  .bp-col + .bp-col{border-left:1px solid var(--line);padding-left:28px}
}
.bp-col{min-width:0}
.bp-heading{font-size:1.05rem;font-weight:700;margin:0 0 6px}
.bp-sub{font-weight:600;font-size:.9rem;margin:16px 0 2px}
.bp-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.book-panel label{display:block;margin:12px 0 5px;font-weight:600;font-size:.9rem}
.bp-row2 label{margin-top:0}
.book-panel input,.book-panel textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--surface);color:var(--ink)}
.book-panel input:focus-visible,.book-panel textarea:focus-visible{outline:2px solid var(--brand);border-color:var(--brand)}
.book-panel .primary{background:var(--brand);color:var(--on-brand);border:none;border-radius:10px;padding:13px;width:100%;font:600 16px system-ui;cursor:pointer;margin-top:16px}
.book-panel .primary:disabled{opacity:.5;cursor:not-allowed}
.book-panel .note{color:var(--mute);font-size:.85rem;margin-top:8px}
.book-panel .error{color:var(--error);margin-top:8px;font-size:.9rem}
.slot-grid{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0}
.slot{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 15px;font:600 13px system-ui,sans-serif;cursor:pointer;color:var(--ink)}
.slot:hover:not(:disabled){border-color:var(--brand)}
.slot[aria-pressed=true]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.slot:disabled{opacity:.4;cursor:not-allowed}
.deposit-notice{background:#fff7ed;color:#9a3412;border-radius:8px;padding:8px 10px;font-size:.85rem;margin:8px 0}
/* Branch selector row above the form (shown only for >1 bookable branch). */
.book-branch-row label{display:block;margin:0 0 4px;font-weight:600;font-size:.9rem}
.book-branch-row select{max-width:320px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:600 13px system-ui,sans-serif;background:var(--surface);color:var(--ink)}
/* Confirmation panel replaces the form after a successful POST. */
.book-confirm{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:560px;margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:10px}
.book-confirm h2{font-size:1.15rem}
.book-confirm .when{font-weight:600}
.book-confirm .note{color:var(--mute);font-size:.9rem}
/* Live deposit-payment outcome line (lib/gateway.js flow, MW-2 fix):
   green success treatment on gateway-confirmed payment, plain note for the
   truthful pay-later fallback. */
.deposit-status.paid{background:var(--ok-bg);color:var(--ok-fg);border-radius:8px;padding:8px 10px;font-size:.9rem;font-weight:600}
.deposit-status.note{color:var(--mute);font-size:.9rem}
/* Stripe payment-element dialog (#stripe-pay) -- same markup/IDs as
   index.html's; these rules mirror index's dialog/.dlg-close/.primary
   styling so the payment sheet reads identically on both pages. */
/* margin:auto restores UA centering wiped by the *{margin:0} reset (audit S2). */
dialog{border:none;border-radius:14px;max-width:420px;width:92vw;padding:20px;background:var(--surface);color:var(--ink);margin:auto;max-height:82vh;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .primary{background:var(--brand);color:var(--on-brand);border:none;border-radius:10px;padding:13px;width:100%;font:600 16px system-ui;cursor:pointer;margin-top:14px}
dialog .error{color:var(--error);margin-top:8px;font-size:.9rem}
.dlg-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:15px;line-height:1;padding:0}
.dlg-close:hover{background:#f3f4f6}
[data-theme="bold"] .book-panel,[data-theme="bold"] .book-confirm,[data-theme="bold"] .slot,
[data-theme="bold"] .book-panel .primary,[data-theme="bold"] dialog,
[data-theme="bold"] dialog .primary,[data-theme="bold"] .dlg-close{border-radius:4px}
[data-theme="fresh"] .book-panel,[data-theme="fresh"] .book-confirm{border-radius:20px}
[data-theme="fresh"] dialog{border-radius:20px;padding:28px}

/* --- Shared footer --- */
.site-footer{border-top:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;gap:10px}
.site-footer-inner{max-width:1100px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:10px}
.site-footer .contact-links{display:flex;flex-wrap:wrap;gap:10px}
.site-footer .contact-links a{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface);font-size:.9rem}
.site-footer .contact-links a:hover{background:var(--bg)}
.site-footer .powered{font-size:.8rem;color:var(--mute)}
.site-footer .powered a{color:inherit;text-decoration:underline}
/* Structured footer band (2026-07-18): brand column + "Explore" menu +
   today's hours + copyright base — shared with index.html's own band. */
.sf-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:800px){.sf-grid{grid-template-columns:2fr 1fr 1fr}}
.sf-brand strong{font-size:1.1rem;letter-spacing:-.01em}
.sf-about{color:var(--mute);font-size:.9rem;line-height:1.6;margin:8px 0 0;max-width:48ch}
.sf-brand .contact-links{margin-top:14px}
.sf-col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:0 0 10px;font-weight:700}
.site-footer .footer-links{display:flex;flex-direction:column;gap:9px}
.site-footer .footer-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.site-footer .footer-links a:hover{color:var(--brand);text-decoration:underline}
.sf-hours{color:var(--mute);font-size:.9rem;margin:0}
.sf-base{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--mute);font-size:.82rem}
[data-theme="bold"] .site-footer .footer-links a,[data-theme="bold"] .sf-brand strong{color:#e5e7eb}
[data-theme="bold"] .sf-about,[data-theme="bold"] .sf-hours,[data-theme="bold"] .sf-base,[data-theme="bold"] .sf-col h3{color:#9ca3af}
[data-theme="bold"] .sf-base{border-top-color:#374151}

/* --- MS-T1: five web presets, selected via data-theme on <html> (mirrors
   index.html's own preset blocks, restated for the shell's own selectors --
   see that file's MS-T1 comment for why "classic" needs no override block). --- */
[data-theme="bold"]{--radius:4px}
[data-theme="bold"] .site-nav{background:#111827;border-bottom:none}
[data-theme="bold"] .site-brand{color:#fff}
[data-theme="bold"] .site-nav-links a{color:#9ca3af}
[data-theme="bold"] .site-nav-links a[aria-current="page"]{color:var(--on-brand)}
[data-theme="bold"] .page-hero{background:#111827;color:#fff;border-bottom:none}
[data-theme="bold"] .page-hero .note{color:#9ca3af}
[data-theme="bold"] .branch-card,[data-theme="bold"] .site-nav-cta,[data-theme="bold"] .pill-link{border-radius:4px}

[data-theme="elegant"]{--preset-heading-font:Georgia,'Times New Roman',serif;--mute:#78716c;--line:#e7e5e4;--radius:8px}
[data-theme="elegant"] h1,[data-theme="elegant"] h2,[data-theme="elegant"] h3{letter-spacing:.05em}
[data-theme="elegant"] .page-hero{background:var(--bg)}

[data-theme="fresh"]{--radius:20px}
[data-theme="fresh"] .page-hero{background:rgba(194,65,12,.06)}
[data-theme="fresh"] .page-hero{background:color-mix(in srgb, var(--brand) 8%, #fff)}
[data-theme="fresh"] .site-nav-cta,[data-theme="fresh"] .pill-link{border-radius:20px}

/* ===== Editorial preset (2026-07-21) — serif, refined, photo-forward.
   Global tokens/type flow to every storefront page; landing hero lives in
   index.html. Scoped to editorial only — no effect on other presets. ===== */
[data-theme="editorial"]{--radius:10px;--mute:#78716c;--line:#e7e2db}
[data-theme="editorial"] h1,[data-theme="editorial"] h2,[data-theme="editorial"] h3,
[data-theme="editorial"] .site-brand,[data-theme="editorial"] #title{font-family:Georgia,'Times New Roman',serif;letter-spacing:.01em}

/* ===== Appetite preset (2026-07-21) — bold, order-first. Appetite-only. ===== */
[data-theme="appetite"]{--radius:12px}
[data-theme="appetite"] #title,[data-theme="appetite"] h1,[data-theme="appetite"] h2{font-weight:900;letter-spacing:-.02em}
[data-theme="appetite"] .site-nav-cta{font-weight:800}

/* ===== Modern preset (2026-07-21) — crisp, structured, tight type. Modern-only.
   (Info-strip enhancement deferred; identity carried by the light split hero
   + tile cards defined in index.html.) ===== */
[data-theme="modern"]{--radius:10px}
[data-theme="modern"] #title,[data-theme="modern"] h1,[data-theme="modern"] h2{letter-spacing:-.02em;font-weight:800}

:root[data-theme="night"]{
  --bg:#0f172a;--surface:#1e293b;--ink:#f1f5f9;--mute:#94a3b8;--line:#334155;
  --ok-bg:#14532d;--ok-fg:#bbf7d0;--err-bg:#7f1d1d;--err-fg:#fecaca;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.45);
}
/* Amber closed-badge retinted for night's dark cards (same reasoning as the
   ok/err token retints above; mirrors index.html's own night override). */
[data-theme="night"] .badge.closed{background:#78350f;color:#fde68a}

/* ==== Restics-inspired shell revamp (2026-07-17) ====
   Mirrors index.html's own revamp layer (see its <style> block): display
   typography, decorative brand-tinted hero circles, eyebrow labels and
   coupon-style offer cards — all expressed via the existing tenant tokens
   so published themes and the five presets keep working. Appended AFTER the
   preset blocks so equal-specificity restatements below win; preset token
   overrides (--radius etc.) still apply since these rules consume tokens. */
.page-hero{position:relative;overflow:hidden;padding:52px 20px 44px}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:rgba(194,65,12,.09)}
.page-hero::before,.page-hero::after{background:color-mix(in srgb, var(--brand) 10%, transparent)}
.page-hero::before{width:300px;height:300px;top:-150px;right:-100px}
.page-hero::after{width:190px;height:190px;bottom:-110px;left:-70px}
.page-hero-inner{position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;letter-spacing:-.01em}
/* Eyebrow label (Restics "~ Our Special Menu ~" cue) — pages can drop a
   .sec-eyebrow <p> above any heading; same recipe as index.html's. */
.sec-eyebrow{color:var(--brand);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sec-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand);flex:none}
/* Offers page cards -> coupon treatment matching index.html's home strip:
   brand top bar, big discount headline, dashed tear-line above the code
   row, dashed brand-tinted code pill. */
.promo-card{position:relative;overflow:hidden;padding:22px 20px 16px}
.promo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand)}
.promo-discount{font-size:1.3rem;font-weight:800;line-height:1.2}
.promo-actions{border-top:1px dashed var(--line)}
.promo-code{background:rgba(194,65,12,.07);border:1px dashed var(--brand);border-radius:8px;letter-spacing:.06em}
.promo-code{background:color-mix(in srgb, var(--brand) 8%, var(--surface))}
[data-theme="bold"] .promo-code{border-radius:4px}
/* Reviews page: the average-rating summary reads display-scale too. */
.reviews-summary{font-size:1.35rem;font-weight:800}
/* Shared footer: roomier, with the nav's card surface so it closes the page
   as a distinct band on every preset (full-bleed — .site-footer is the
   unconstrained outer element, unlike index.html's #ms-contact). */
.site-footer{background:var(--surface);padding:36px 20px 40px}
[data-theme="bold"] .site-footer{background:#111827;color:#fff;border-top:none}
[data-theme="bold"] .site-footer .contact-links a{background:#1f2937;color:#e5e7eb;border-color:#374151}
[data-theme="bold"] .site-footer .powered{color:#9ca3af}