/*
Theme Name: DerbyFlow SEO (Elementor)
Theme URI: https://derbyflow.us
Description: A child theme of Hello Elementor for restaurants. You design every page in Elementor; this theme silently owns the BACKEND SEO — schema.org structured data (Restaurant / LocalBusiness, Menu, Events, FAQ, Breadcrumbs), meta + Open Graph tags, an auto XML sitemap, local landing pages, and live menu/hours/NAP shortcodes — all driven by your DerbyFlow account and kept in sync. Powered by Derby Digital.
Author: Derby Digital
Author URI: https://derbydigital.us
Template: hello-elementor
Version: 1.12.73
Update URI: https://derbyflow.us/derbyflow-theme.json
Text Domain: derbyflow-seo
Requires at least: 6.0
Requires PHP: 7.4
*/

/* Design is handled in Elementor. This child theme adds no visual styles by
   default — only the few utility classes the DerbyFlow shortcodes render with,
   so they inherit your Elementor typography and colors. */

.df-menu { margin: 1.25rem 0; }
.df-menu__section { margin-bottom: 1.75rem; }
.df-menu__section-name { font-weight: 700; letter-spacing: .02em; margin: 0 0 .5rem; }
.df-menu__item { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dotted rgba(0,0,0,.12); }
.df-menu__item-name { font-weight: 600; }
.df-menu__item-desc { opacity: .75; font-size: .92em; }
.df-menu__item-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.df-hours { margin: 0; }
.df-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.df-nap { line-height: 1.6; }
/* Events — branded cards (mirrors the DerbyFlow events page; --df-accent is the brand accent). */
.df-events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0 auto; padding: 0; max-width: 1000px; }
.df-events-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.df-events-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; }
@media (max-width: 860px) { .df-events-grid[data-cols="2"], .df-events-grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .df-events-grid { grid-template-columns: minmax(0, 1fr); } }
.df-ev-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid rgba(16,32,64,.07); box-shadow: 0 12px 32px -14px rgba(16,32,64,.22); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.df-ev-card:hover, .df-ev-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 46px -16px rgba(16,32,64,.34); outline: none; }
.df-ev-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-accent, #2D6BFF) 45%, transparent), 0 22px 46px -16px rgba(16,32,64,.34); }
.df-ev-media { aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f9; }
.df-ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.df-ev-card:hover .df-ev-media img { transform: scale(1.05); }

/* Event detail modal (click a card) */
.df-ev-modal[hidden] { display: none; }
.df-ev-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.df-ev-modal-backdrop { position: absolute; inset: 0; background: rgba(8,16,34,.62); backdrop-filter: blur(2px); animation: df-ev-fade .18s ease; }
.df-ev-modal-card { position: relative; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(8,16,34,.7); animation: df-ev-pop .22s cubic-bezier(.2,.7,.3,1); }
.df-ev-modal-x { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #10203f; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(8,16,34,.4); }
.df-ev-modal-x:hover { background: #fff; }
.df-ev-modal-media { aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f9; border-radius: 22px 22px 0 0; }
.df-ev-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-ev-modal-body { padding: 1.15rem 1.4rem 1.5rem; }
.df-ev-modal-desc { margin: .55rem 0 0; font-size: .92rem; line-height: 1.55; color: #47566f; white-space: pre-line; }
.df-ev-modal-body .df-ev-adm { display: block; margin-top: .9rem; }
.df-ev-modal-cal { display: inline-block; margin-top: .5rem; padding: .6rem 1.05rem; border-radius: 999px; font-size: .8rem; font-weight: 800; text-decoration: none; color: #fff; background: var(--df-accent, #2D6BFF); }
.df-ev-modal-cal:hover { filter: brightness(1.06); }
@keyframes df-ev-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes df-ev-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .df-ev-card, .df-ev-media img, .df-ev-modal-backdrop, .df-ev-modal-card { transition: none; animation: none; } }
.df-ev-body { padding: 1rem 1.1rem 1.15rem; }
.df-ev-when { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5b6b86; }
.df-ev-cat { display: inline-block; margin-top: .45rem; padding: .15rem .6rem; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--df-accent, #2D6BFF); background: color-mix(in srgb, var(--df-accent, #2D6BFF) 13%, transparent); }
.df-ev-title { margin: .4rem 0 0; font-size: 1.2rem; line-height: 1.15; font-weight: 800; color: #10203f; }
.df-ev-desc { margin: .35rem 0 0; font-size: .86rem; line-height: 1.45; color: #5b6b86; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-ev-adm { display: inline-block; margin-top: .7rem; font-size: .72rem; font-weight: 800; color: var(--df-accent, #2D6BFF); }
/* featured events ([derbyflow_featured_events]) — up to 3 owner-starred events as
   editorial hero cards (poster + "Featured event" label + title + Date/Time/Type +
   admission pill); the whole card links to the client's /events page. Brand-styled
   via --df-accent + the heading/body fonts (NOT a fixed skin). An event with no
   photo gets an auto-generated accent poster (.df-feat-auto). */
.df-feat { display: grid; gap: 1.25rem; margin: 0; padding: 0; }
.df-feat-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(16,32,64,.08); box-shadow: 0 20px 48px -24px rgba(16,32,64,.3); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.df-feat-body { min-width: 0; }
.df-feat-card:hover { box-shadow: 0 28px 60px -24px rgba(16,32,64,.36); transform: translateY(-2px); }
.df-feat-body { display: flex; flex-direction: column; padding: 1.9rem 2rem; }
.df-feat-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.df-feat-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--df-accent, #2D6BFF); }
.df-feat-pill { flex: none; padding: .35rem .8rem; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--df-accent, #2D6BFF); border: 1px solid color-mix(in srgb, var(--df-accent, #2D6BFF) 35%, transparent); white-space: nowrap; }
.df-feat-title { margin: 0; font-size: 1.85rem; line-height: 1.08; font-weight: 800; color: #10203f; }
.df-feat-desc { margin: .8rem 0 0; font-size: .92rem; line-height: 1.5; color: #5b6b86; max-width: 42ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.df-feat-meta { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; margin-top: auto; padding-top: 1.4rem; }
.df-feat-cell { display: flex; flex-direction: column; gap: .3rem; }
.df-feat-lbl { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #95a0b3; }
.df-feat-val { font-size: 1.05rem; font-weight: 700; color: #20304d; }
.df-feat-poster { position: relative; min-height: 260px; background: #eef2f9; overflow: hidden; }
.df-feat-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.df-feat-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; text-align: center; background: linear-gradient(155deg, var(--df-accent, #2D6BFF), color-mix(in srgb, var(--df-accent, #2D6BFF) 80%, #0b1a3b)); }
.df-feat-auto-when { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.df-feat-auto-title { font-size: 1.5rem; line-height: 1.1; font-weight: 800; color: #fff; }
.df-feat-auto-mark { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (max-width: 720px) {
  .df-feat-card { grid-template-columns: 1fr; }
  .df-feat-poster { order: -1; min-height: 190px; }
  .df-feat-body { padding: 1.4rem 1.4rem 1.5rem; }
  .df-feat-title { font-size: 1.5rem; }
  .df-feat-meta { gap: .8rem 1.6rem; }
}
/* ── Addison template ─────────────────────────────────────────────────────
   Opinionated dark-navy + gold skin (data-tpl="addison"), mirrors the in-app
   EventsDisplay/FeaturedEvents: portrait posters, gold pills, cream serif titles,
   solid-gold CTA. Colours ride on --df-accent (the gold). */
/* events grid cards — Addison is an opinionated, fixed 3-up grid (responsive down);
   this overrides the generic data-cols rules above (later in the sheet → wins). */
.df-events-grid[data-tpl="addison"] { gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
@media (max-width: 900px) { .df-events-grid[data-tpl="addison"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .df-events-grid[data-tpl="addison"] { grid-template-columns: minmax(0, 1fr); } }
[data-tpl="addison"].df-events-grid .df-ev-card,
.df-ev-modal[data-tpl="addison"] .df-ev-modal-card { background: linear-gradient(165deg,#0c1838,#0a1430 60%,#081025); border: 1px solid color-mix(in srgb, var(--df-accent, #E8B33C) 30%, transparent); box-shadow: 0 24px 60px -28px rgba(4,10,26,.85); }
[data-tpl="addison"].df-events-grid .df-ev-card:hover { box-shadow: 0 34px 72px -30px rgba(4,10,26,.95); }
[data-tpl="addison"].df-events-grid .df-ev-media { aspect-ratio: 4 / 5; background: #0a1430; }
[data-tpl="addison"].df-events-grid .df-ev-when { color: var(--df-accent, #E8B33C); }
[data-tpl="addison"].df-events-grid .df-ev-cat { color: var(--df-accent, #E8B33C); background: transparent; border: 1px solid color-mix(in srgb, var(--df-accent, #E8B33C) 45%, transparent); }
[data-tpl="addison"].df-events-grid .df-ev-title { color: #ece6da; font-weight: 500; }
[data-tpl="addison"].df-events-grid .df-ev-desc { color: rgba(236,230,218,.58); }
[data-tpl="addison"].df-events-grid .df-ev-adm { margin-top: 1rem; padding: .55rem 1.15rem; border-radius: 999px; background: var(--df-accent, #E8B33C); color: #0a1430; }
/* addison detail modal */
.df-ev-modal[data-tpl="addison"] .df-ev-modal-x { background: rgba(255,255,255,.14); color: #fff; }
.df-ev-modal[data-tpl="addison"] .df-ev-title { color: #ece6da; font-weight: 500; }
.df-ev-modal[data-tpl="addison"] .df-ev-when { color: var(--df-accent, #E8B33C); }
.df-ev-modal[data-tpl="addison"] .df-ev-cat { color: var(--df-accent, #E8B33C); background: transparent; border: 1px solid color-mix(in srgb, var(--df-accent, #E8B33C) 45%, transparent); }
.df-ev-modal[data-tpl="addison"] .df-ev-modal-desc { color: rgba(236,230,218,.72); }
.df-ev-modal[data-tpl="addison"] .df-ev-adm { color: var(--df-accent, #E8B33C); }
.df-ev-modal[data-tpl="addison"] .df-ev-modal-cal { background: var(--df-accent, #E8B33C); color: #0a1430; }

/* Smokehouse — white event cards with a bold accent (salmon) border, matching the
   Smokehouse MENU template so the events page reads as a sibling. Mirrors the
   in-app EventsDisplay smokehouse branch. */
[data-tpl="smokehouse"].df-events-grid .df-ev-card,
.df-ev-modal[data-tpl="smokehouse"] .df-ev-modal-card { border: 2px solid var(--df-accent, #e18b92); box-shadow: 0 16px 34px -14px rgba(16,32,64,.3); }
[data-tpl="smokehouse"].df-events-grid .df-ev-card { border-radius: 16px; }
[data-tpl="smokehouse"].df-events-grid .df-ev-when { color: var(--df-accent, #e18b92); }
/* force a single column on phones — the base [data-cols="2"] rule (≤860px) otherwise
   out-specifies the base ≤560px 1-column rule, leaving 2 cramped columns (addison
   overrides it the same way; the auto-fill MENU grid isn't affected) */
@media (max-width: 560px) { [data-tpl="smokehouse"].df-events-grid { grid-template-columns: minmax(0, 1fr); } }
/* addison featured spotlight (single card, centred) */
.df-feat[data-tpl="addison"] { max-width: 62rem; margin-inline: auto; }
.df-feat[data-tpl="addison"] .df-feat-card { background: linear-gradient(165deg,#0c1838,#0a1430 55%,#081025); border: 1px solid color-mix(in srgb, var(--df-accent, #E8B33C) 30%, transparent); box-shadow: 0 30px 70px -30px rgba(4,10,26,.9); }
.df-feat[data-tpl="addison"] .df-feat-title { color: #ece6da; font-weight: 500; }
.df-feat[data-tpl="addison"] .df-feat-desc { color: rgba(236,230,218,.6); }
.df-feat[data-tpl="addison"] .df-feat-lbl { color: var(--df-accent, #E8B33C); }
.df-feat[data-tpl="addison"] .df-feat-val { color: #ece6da; font-weight: 500; }
.df-feat[data-tpl="addison"] .df-feat-pill { color: var(--df-accent, #E8B33C); border-color: color-mix(in srgb, var(--df-accent, #E8B33C) 45%, transparent); }
.df-feat[data-tpl="addison"] .df-feat-auto { background: linear-gradient(150deg,#101f44,#0a1430); }
.df-feat[data-tpl="addison"] .df-feat-auto-title { color: #ece6da; font-weight: 500; }
.df-feat[data-tpl="addison"] .df-feat-auto-when, .df-feat[data-tpl="addison"] .df-feat-auto-mark { color: var(--df-accent, #E8B33C); }

/* empty state — a white card so it's readable on any Elementor background */
.df-ev-empty { display: grid; place-items: center; gap: .25rem; padding: 2.5rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid rgba(16,32,64,.08); box-shadow: 0 12px 32px -16px rgba(16,32,64,.2); text-align: center; }
.df-ev-empty-title { margin: 0; font-size: 1rem; font-weight: 800; color: #10203f; }
.df-ev-empty-sub { margin: 0; font-size: .85rem; color: #5b6b86; }
/* legacy list (older snapshots) */
.df-events { list-style: none; margin: 0; padding: 0; }
.df-events li { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.df-btn { display: inline-block; padding: .65rem 1.25rem; border-radius: .5rem; text-decoration: none; font-weight: 700; }
.df-note { font-size: .85em; opacity: .6; }
/* ── Event pop-up (inc/popup.php) — branded promotional modal; 4 layouts + light/dark ── */
.df-pop[hidden] { display: none; }
.df-pop { position: fixed; inset: 0; z-index: 100000; display: flex; padding: 1.25rem; }
.df-pop[data-pos="center"] { align-items: center; justify-content: center; }
.df-pop[data-pos="corner"] { align-items: flex-end; justify-content: flex-end; }
.df-pop-backdrop { position: absolute; inset: 0; background: rgba(8,12,28,.55); backdrop-filter: blur(2px); animation: df-pop-fade .3s ease both; }
.df-pop-card { position: relative; width: 100%; max-width: 460px; max-height: 92vh; max-height: 92dvh; overflow: hidden auto; border-radius: 24px; background: #fff; box-shadow: 0 40px 90px -30px rgba(8,16,34,.7); animation: df-pop-in .42s cubic-bezier(.22,1,.36,1) both; will-change: transform, opacity; }
.df-pop-media, .df-pop-body { min-width: 0; }
@keyframes df-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes df-pop-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
.df-pop-card[data-layout="image-left"] { max-width: 640px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.df-pop-card[data-layout="text"] { max-width: 400px; text-align: center; }
.df-pop-card[data-layout="spotlight"] { max-width: 460px; min-height: 420px; }
.df-pop-x { position: absolute; top: .7rem; right: .7rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: rgba(0,0,0,.06); color: #10203f; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.df-pop-media { overflow: hidden; background: #eef2f9; }
.df-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-pop-card[data-layout="image-top"] .df-pop-media { aspect-ratio: 16 / 9; }
.df-pop-card[data-layout="image-left"] .df-pop-media { height: 100%; min-height: 220px; }
.df-pop-body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; }
.df-pop-card[data-layout="image-left"] .df-pop-body { justify-content: center; }
.df-pop-card[data-layout="text"] .df-pop-body { align-items: center; }
.df-pop-eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--df-accent, #2D6BFF); margin-bottom: .6rem; }
.df-pop-title { margin: 0; font-size: 1.6rem; line-height: 1.14; font-weight: 800; color: #10203f; }
.df-pop-sub { margin: .7rem 0 0; font-size: .95rem; line-height: 1.5; color: #47566f; max-width: 44ch; }
.df-pop-card[data-layout="text"] .df-pop-sub { margin-inline: auto; }
.df-pop-cta { align-self: flex-start; margin-top: 1.3rem; padding: .8rem 1.6rem; border-radius: 999px; font-size: .9rem; font-weight: 800; text-decoration: none; }
.df-pop-card[data-layout="text"] .df-pop-cta { align-self: center; }
/* spotlight → full-bleed photo behind, text over a dark gradient */
.df-pop-card[data-layout="spotlight"] .df-pop-media { position: absolute; inset: 0; height: 100%; }
.df-pop-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,28,.05) 25%, rgba(8,12,28,.9) 100%); }
.df-pop-card[data-layout="spotlight"] .df-pop-body { position: absolute; inset-inline: 0; bottom: 0; }
.df-pop-card[data-layout="spotlight"] .df-pop-title { color: #fff; }
.df-pop-card[data-layout="spotlight"] .df-pop-sub { color: rgba(255,255,255,.85); }
/* dark scheme (Addison-style navy card) */
.df-pop-card[data-scheme="dark"] { background: linear-gradient(160deg,#0A1730,#0E2147 60%,#122c57); }
.df-pop-card[data-scheme="dark"] .df-pop-title { color: #fff; }
.df-pop-card[data-scheme="dark"] .df-pop-sub { color: rgba(255,255,255,.8); }
.df-pop-card[data-scheme="dark"] .df-pop-x { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 640px) {
  /* phone: everything stacks + fits the viewport, centered, smaller type */
  .df-pop { padding: .85rem; align-items: center; justify-content: center; }
  .df-pop-card,
  .df-pop-card[data-layout="image-left"],
  .df-pop-card[data-layout="text"],
  .df-pop-card[data-layout="spotlight"] { max-width: 100%; }
  .df-pop-card[data-layout="image-left"] { grid-template-columns: minmax(0, 1fr); }
  /* stacked on mobile: the photo becomes a CROPPED band (like the event-detail
     popup), not a full-height poster — object-cover trims it to a tidy strip */
  .df-pop-card[data-layout="image-left"] .df-pop-media,
  .df-pop-card[data-layout="image-top"] .df-pop-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .df-pop-card[data-layout="spotlight"] { min-height: 360px; }
  .df-pop-body { padding: 1.3rem 1.35rem 1.5rem; }
  .df-pop-eyebrow { font-size: .62rem; }
  .df-pop-title { font-size: 1.3rem; }
  .df-pop-sub { font-size: .9rem; }
  .df-pop-cta { padding: .75rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .df-pop-backdrop, .df-pop-card { animation: none; } }
/* menu empty state — a white card (matches .df-ev-empty) so it's readable on any
   Elementor background, and the live page matches the in-app Menu Preview exactly */
.df-menu-empty { display: grid; place-items: center; gap: .25rem; max-width: 28rem; margin: 1rem auto; padding: 2.5rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid rgba(16,32,64,.08); box-shadow: 0 12px 32px -16px rgba(16,32,64,.2); text-align: center; }
.df-menu-empty-title { margin: 0; font-size: 1rem; font-weight: 800; color: #10203f; }
.df-menu-empty-sub { margin: 0; font-size: .85rem; color: #5b6b86; }

/* ── Styled menu ([derbyflow_menu]) ──────────────────────────────────────────
   A faithful port of the in-app React menu (src/dev/menu/menu.css + MenuDisplay):
   the SAME .df-menu-canvas markup, data-* attributes and class names, so the live
   WordPress page is pixel-identical to the owner's DerbyFlow Preview. The PHP
   shortcode emits the data-* attrs (template/cols/density/card/divider/align) +
   inline fonts/accent; these rules paint the six templates. Container queries make
   the menu respond to ITS OWN width (it may be embedded in a narrow column or
   full-width), never the browser viewport.

   Scoped reset — neutralise the parent theme's element styles so the menu renders
   the same here as in-app (Tailwind's preflight does this in the app). */
.df-menu-canvas, .df-menu-canvas *, .df-menu-canvas *::before, .df-menu-canvas *::after { box-sizing: border-box; }
.df-menu-canvas h2, .df-menu-canvas h3, .df-menu-canvas p { margin: 0; padding: 0; }
.df-menu-canvas img { display: block; max-width: 100%; }
.df-menu-canvas button.df-menu-pill { margin: 0; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.df-menu-page { min-width: 0; }

/* NOTE: viewport @media queries below, NOT CSS @container. A query CONTAINER
   (container-type: inline-size) here triggers a Chromium layout bug inside
   Elementor flex-column containers: the shortcode widget wrapper captures a
   stale/collapsed height of the container and inflates to tens of thousands of
   px, leaving enormous blank space under the menu (worst on mobile). The menu is
   always a full-width shortcode, so viewport width ≈ canvas width and @media is
   equivalent — without the bug. (App menu.css keeps @container: it renders in
   narrow preview panels and has no Elementor flex parent.) */
.df-menu-canvas { border-radius: 1rem; padding: 1rem; }
@media (min-width: 680px) { .df-menu-canvas { padding: 1.75rem; } }

/* decorative header */
.df-menu-header { text-align: center; margin-bottom: 1.5rem; }
.df-menu-header-left { text-align: left; }
.df-menu-logo { height: 56px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: 0.6rem; }
.df-menu-header:not(.df-menu-header-left) .df-menu-logo { margin-left: auto; margin-right: auto; }
.df-menu-title { font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; color: #141414; }
@media (min-width: 680px) { .df-menu-title { font-size: 34px; } }
.df-menu-tagline { margin-top: 0.35rem; font-size: 13px; font-style: italic; color: #666; }

/* menu switcher pills — substantial tabs at the scale of a real site's switcher */
.df-menu-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.df-menu-canvas[data-align='left'] .df-menu-pills { justify-content: flex-start; }
.df-menu-canvas[data-template='sicilian'] .df-menu-pills { justify-content: center; }
.df-menu-pill { border-radius: 10px; padding: 0.55rem 1.65rem; font-size: 16px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.2; background: #1b1d24; color: #ffffff; box-shadow: 0 6px 18px -12px rgba(11, 26, 59, 0.5); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
@media (min-width: 600px) { .df-menu-pill { padding: 0.5rem 1.9rem; font-size: 21px; } }
.df-menu-pill[data-active='true'] { background: var(--df-accent, #1b1d24); color: var(--df-pill-active-text, #ffffff); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--df-accent, #1b1d24) 60%, transparent); }
.df-menu-pill:not([data-active='true']):hover { background: var(--df-accent, #1b1d24); color: var(--df-pill-active-text, #ffffff); transform: translateY(-2px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--df-accent, #1b1d24) 55%, transparent); }

/* active menu blurb */
/* ⚠️ two classes, not one — `.df-menu-canvas p { margin: 0 }` above is (0,1,1) and
 * beats a bare `.df-menu-blurb` (0,1,0), which killed `margin: 0 auto` and left the
 * blurb stranded flush-left in a 42rem box (and with no space under it). Same
 * specificity trap as the Experiences description. Keep the canvas class. */
.df-menu-canvas .df-menu-blurb { max-width: 42rem; margin: 0 auto 1.75rem; text-align: center; font-size: 13px; font-style: italic; line-height: 1.6; color: #555; }
.df-menu-canvas[data-align='left'] .df-menu-blurb { margin-left: 0; text-align: left; }

/* the grid: one column, two only when the CONTAINER is wide */
.df-menu-grid { column-count: 1; column-gap: 1.25rem; }
.df-menu-canvas[data-cols='auto'] .df-menu-grid, .df-menu-canvas[data-cols='2'] .df-menu-grid { column-count: 1; }
@media (min-width: 600px) { .df-menu-canvas[data-cols='auto'] .df-menu-grid { column-count: 2; } }
@media (min-width: 520px) { .df-menu-canvas[data-cols='2'] .df-menu-grid { column-count: 2; } }
.df-menu-canvas[data-cols='1'] .df-menu-grid { column-count: 1; }
/* a lone category centers instead of stranding in the left column */
.df-menu-canvas:not([data-template='sicilian']):not([data-template='taproom']):not([data-cols='1']) .df-menu-grid[data-single='true'] { column-count: 1; max-width: 64rem; margin-inline: auto; }
@media (min-width: 640px) { .df-menu-canvas:not([data-template='sicilian']):not([data-cols='1']) .df-menu-grid[data-single='true'] { column-count: 2; } }

/* category card: card / flat / bordered */
/* display:block, NOT inline-block — an atomic inline can't be distributed by the
 * multi-column balancer, so with break-inside:avoid every card stacks in column
 * one and column two renders empty. Mirrors src/dev/menu/menu.css. */
.df-card { display: block; width: 100%; break-inside: avoid; border-radius: 1rem; margin-bottom: 1.25rem; padding: 1.1rem 1.25rem; }
@media (min-width: 680px) { .df-card { padding: 1.5rem 1.6rem; } }
.df-menu-canvas[data-card='card'] .df-card { background: #ffffff; box-shadow: 0 18px 50px -28px rgba(11, 26, 59, 0.35); }
.df-menu-canvas[data-card='flat'] .df-card { background: transparent; }
.df-menu-canvas[data-card='bordered'] .df-card { background: #ffffff; border: 1.5px solid var(--df-accent, #141414); }

/* density */
.df-menu-canvas[data-density='compact'] .df-card { padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.df-menu-canvas[data-density='roomy'] .df-card { padding: 1.75rem; }
@media (min-width: 680px) { .df-menu-canvas[data-density='roomy'] .df-card { padding: 2.6rem; } }
.df-menu-canvas[data-density='compact'] .df-menu-grid { column-gap: 1rem; }
.df-menu-canvas[data-density='roomy'] .df-menu-grid { column-gap: 1.75rem; }
.df-menu-canvas[data-density='roomy'] .df-card { margin-bottom: 1.75rem; }

/* category title + flourish */
.df-menu-cat { font-size: 23px; line-height: 1.15; letter-spacing: 0.04em; font-weight: 400; color: #141414; overflow-wrap: break-word; }
@media (min-width: 680px) { .df-menu-cat { font-size: 30px; } }
.df-menu-canvas[data-template='taproom'] .df-cat { font-weight: 800; font-size: 32px; letter-spacing: -0.01em; }
@media (min-width: 680px) { .df-menu-canvas[data-template='taproom'] .df-cat { font-size: 42px; } }
.df-flourish { display: block; margin-top: 0.35rem; font-size: 14px; color: var(--df-accent, #141414); }
.df-menu-canvas[data-align='center'] .df-flourish { text-align: center; }
.df-cat-note { max-width: 28rem; margin-top: 0.5rem; font-size: 13px; line-height: 1.6; color: #555; }

/* item list + dividers + rows */
.df-itemlist { margin-top: 1.25rem; }
.df-menu-canvas[data-divider='ruled'] .df-itemlist { border-left: 1px solid rgba(0, 0, 0, 0.1); padding-left: 1.25rem; }
.df-item { padding: 1rem 0; }
.df-item:first-child { padding-top: 0.25rem; }
.df-menu-canvas[data-divider='ruled'] .df-item + .df-item, .df-menu-canvas[data-divider='line'] .df-item + .df-item { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.df-menu-canvas[data-density='compact'] .df-item { padding: 0.6rem 0; }
.df-menu-canvas[data-density='roomy'] .df-item { padding: 1.35rem 0; }
.df-item-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.df-menu-name { font-size: 17px; font-weight: 300; color: #141414; min-width: 0; overflow-wrap: break-word; }
@media (min-width: 680px) { .df-menu-name { font-size: 20px; } }
.df-item-meta { display: inline-flex; align-items: baseline; gap: 0.65rem; flex-shrink: 0; }
.df-menu-price { font-size: 16px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.df-item-abv { font-size: 0.92em; font-weight: 700; white-space: nowrap; opacity: 0.92; font-variant-numeric: tabular-nums; }
.df-item-desc { margin-top: 0.375rem; font-size: 13px; line-height: 1.6; color: #4a4a4a; }

/* Taproom template — each item is a solid accent-filled card (brewery menus).
   Text colors (name / price / ABV / desc) are set inline to the readable ink. */
/* NOTE: no viewport "full-bleed" on purpose. The board fills whatever width its
   section gives it — the column-count fix below is what actually makes it span the
   full width. (A 95vw/100vw break-out could spill the board onto the page's dark
   background on wide screens.) If a tap list still looks narrow, set its Elementor
   section to full-width / stretch. */
/* A tap board renders its items in the .df-itemlist card grid, so the OUTER
   multicol must stay 1 column — otherwise a single category (the usual case) is
   flowed into one of 2 columns and the whole board collapses to ~half width. */
.df-menu-canvas[data-template='taproom'] .df-menu-grid { column-count: 1 !important; }
.df-menu-canvas[data-template='taproom'] .df-card { background: transparent; box-shadow: none; padding: 0; margin-bottom: 2.5rem; }
.df-menu-canvas[data-template='taproom'] .df-itemlist { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; border-left: 0; padding-left: 0; }
@media (min-width: 560px) { .df-menu-canvas[data-template='taproom'] .df-itemlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .df-menu-canvas[data-template='taproom'] .df-itemlist { grid-template-columns: repeat(3, 1fr); } }
.df-menu-canvas[data-template='taproom'] .df-item, .df-menu-canvas[data-template='taproom'][data-density='compact'] .df-item, .df-menu-canvas[data-template='taproom'][data-density='roomy'] .df-item { background: var(--df-accent, #1a3fb0); border-radius: 20px; padding: 1.9rem 2rem; min-height: 200px; display: flex; flex-direction: column; transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease; }
@media (min-width: 680px) { .df-menu-canvas[data-template='taproom'] .df-item, .df-menu-canvas[data-template='taproom'][data-density='compact'] .df-item, .df-menu-canvas[data-template='taproom'][data-density='roomy'] .df-item { padding: 2.4rem 2.5rem; min-height: 232px; } }
.df-menu-canvas[data-template='taproom'] .df-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 22px 44px -20px rgba(16, 32, 64, 0.5); }
.df-menu-canvas[data-template='taproom'] .df-item + .df-item { border-top: 0; }
.df-menu-canvas[data-template='taproom'] .df-menu-name { font-weight: 800; font-size: 22px; }
@media (min-width: 680px) { .df-menu-canvas[data-template='taproom'] .df-menu-name { font-size: 27px; } }
.df-menu-canvas[data-template='taproom'] .df-item-desc { margin-top: 0.7rem; font-size: 16px; line-height: 1.6; }
.df-menu-canvas[data-template='taproom'] .df-item-abv, .df-menu-canvas[data-template='taproom'] .df-item-price { font-size: 17px; font-weight: 700; }

/* item photos */
.df-item-photo { margin-top: 0.875rem; width: 100%; border-radius: 0.5rem; object-fit: cover; }
.df-photo-sm { max-height: 9rem; }
.df-photo-md { max-height: 14rem; }
.df-photo-lg { max-height: 20rem; }

/* Sicilian template — dark marble + gold, framed, serif caps (a self-contained
   DARK scheme; the other five are light) */
.df-menu-canvas[data-template='sicilian'] { position: relative; color: #e7dfd4; border-radius: 3px; padding: clamp(2rem, 5.5vw, 4.5rem); background-color: #0b0a09; background-image: radial-gradient(130% 90% at 18% 8%, rgba(201, 160, 90, 0.07), transparent 55%), radial-gradient(120% 80% at 85% 92%, rgba(201, 160, 90, 0.05), transparent 50%), repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 26px), repeating-linear-gradient(64deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 34px), linear-gradient(135deg, #110f0d 0%, #0a0908 45%, #15110c 100%); border: 1.5px solid color-mix(in srgb, var(--df-accent, #c89a4b) 78%, transparent); }
.df-menu-canvas[data-template='sicilian']::after { content: ''; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--df-accent, #c89a4b) 62%, transparent); border-radius: 2px; pointer-events: none; }
.df-frame { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.df-corner { position: absolute; width: clamp(40px, 7vw, 56px); height: clamp(40px, 7vw, 56px); color: var(--df-accent, #c89a4b); }
.df-corner svg { display: block; width: 100%; height: 100%; }
.df-corner-tl { top: 15px; left: 15px; }
.df-corner-tr { top: 15px; right: 15px; transform: rotate(90deg); }
.df-corner-br { right: 15px; bottom: 15px; transform: rotate(180deg); }
.df-corner-bl { bottom: 15px; left: 15px; transform: rotate(270deg); }
/* per-section icons (mirrors src/dev/menu/menu.css) */
.df-menu-canvas[data-template='sicilian'] .df-card[data-featured] { position: relative; border: 1px solid color-mix(in srgb, var(--df-accent, #c89a4b) 42%, transparent) !important; border-radius: 4px; padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.5rem, 3.5vw, 2.6rem) !important; margin-top: 1.5rem; background: radial-gradient(120% 130% at 50% -10%, color-mix(in srgb, var(--df-accent, #c89a4b) 9%, transparent), transparent 62%), color-mix(in srgb, var(--df-accent, #c89a4b) 3%, transparent) !important; }
.df-menu-canvas[data-template='sicilian'] .df-card[data-featured]::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--df-accent, #c89a4b) 24%, transparent); border-radius: 2px; pointer-events: none; }
.df-teste { position: absolute; z-index: 3; width: clamp(30px, 5.5vw, 44px); color: var(--df-accent, #c89a4b); line-height: 0; pointer-events: none; }
.df-teste-tl { top: -16px; left: -10px; }
.df-teste-tr { top: -16px; right: -10px; transform: scaleX(-1); }
.df-teste-bl { bottom: -16px; left: -10px; }
.df-teste-br { bottom: -16px; right: -10px; transform: scaleX(-1); }
.df-menu-canvas[data-template='sicilian'] .df-cat-icon { display: flex; justify-content: center; margin-bottom: 0.65rem; color: var(--df-accent, #c89a4b); }
.df-menu-canvas[data-template='sicilian'] .df-cat-icon .df-icon { width: clamp(44px, 7vw, 66px); }
.df-icon { display: block; width: 100%; color: var(--df-accent, #c89a4b); }
.df-icon-img { height: auto; object-fit: contain; }
.df-menu-canvas[data-template='sicilian'] .df-menu-grid { column-count: 1 !important; }
.df-menu-canvas[data-template='sicilian'] .df-card { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin-bottom: 3.25rem; }
.df-menu-canvas[data-template='sicilian'] .df-itemlist { display: grid; grid-template-columns: 1fr; gap: 1.6rem 3rem; border: none !important; padding: 0 !important; margin-top: 1.9rem; }
@media (min-width: 560px) { .df-menu-canvas[data-template='sicilian'] .df-itemlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .df-menu-canvas[data-template='sicilian'] .df-itemlist { grid-template-columns: 1fr 1fr 1fr; } }
.df-menu-canvas[data-template='sicilian'] .df-item { padding: 0 !important; border: none !important; }
.df-menu-canvas[data-template='sicilian'] .df-cat { display: flex; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; color: var(--df-accent, #c89a4b); font-weight: 500; letter-spacing: 0.3em; }
.df-menu-canvas[data-template='sicilian'] .df-cat::before, .df-menu-canvas[data-template='sicilian'] .df-cat::after { content: ''; flex: 1; max-width: 30%; height: 1px; }
.df-menu-canvas[data-template='sicilian'] .df-cat::before { background: linear-gradient(90deg, transparent, var(--df-accent, #c89a4b)); }
.df-menu-canvas[data-template='sicilian'] .df-cat::after { background: linear-gradient(90deg, var(--df-accent, #c89a4b), transparent); }
.df-menu-canvas[data-template='sicilian'] .df-cat-note { margin: 0.75rem auto 0; text-align: center; color: #b7afa2; }
.df-menu-canvas[data-template='sicilian'] .df-item-name { color: #e7dfd4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.df-menu-canvas[data-template='sicilian'] .df-item-desc { color: #b3aa9d; }
.df-menu-canvas[data-template='sicilian'] .df-menu-blurb { color: #cfc7ba; }
.df-menu-canvas[data-template='sicilian'] .df-menu-title { color: #e7dfd4; }
.df-menu-canvas[data-template='sicilian'] .df-menu-tagline { color: #b3aa9d; }
.df-menu-canvas[data-template='sicilian'] .df-menu-pill { box-shadow: none; border: 1px solid color-mix(in srgb, var(--df-accent, #c89a4b) 55%, transparent); }

/* ── Fish House template — counter-service board (cream paper + red accent) ──
   Mirrors src/dev/menu/menu.css [data-template='fishhouse'] 1:1: an icon tab
   bar (one category at a time), item list + hero photo + promo highlight
   cards, and "Explore the menu" photo tiles. The PHP (derbyflow_menu_fishhouse)
   emits the same markup as the React FishHouseStage; small inline JS swaps the
   panels. Fixed yellow #f6c343 + ink #17130f are part of the look; the red
   rides on --df-accent. */
.df-menu-canvas button.df-fh-tab, .df-menu-canvas button.df-fh-tile, .df-menu-canvas button.df-fh-cardcta { margin: 0; border: 0; background: transparent; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; color: inherit; text-align: inherit; line-height: inherit; }
.df-menu-canvas[data-template='fishhouse'] { background: #f4efe4; color: #17130f; border-radius: 14px; }
/* the board reads as a fixed-width composition — cap + center (ultra-wide pages) */
.df-fh { max-width: 1440px; margin-inline: auto; }
/* no hero/promo cards yet → items flow into two menu-board columns (dense like the reference) */
.df-fh-stage-solo { max-width: 1280px; margin-inline: auto; }
@media (min-width: 640px) { .df-fh-stage-solo .df-fh-items { column-count: 2; column-gap: 2.75rem; } .df-fh-stage-solo .df-fh-item { break-inside: avoid; } }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tabswrap { position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; border-bottom: 2px solid rgba(23, 19, 15, 0.85); margin-bottom: 1.6rem; padding-top: 0.4rem; background: #f4efe4; }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tabs { display: flex; align-items: stretch; gap: 0.2rem; flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 0 0.2rem; }
.df-menu-canvas .df-fh-tabswrap .df-fh-tabarrow { flex: 0 0 auto; align-self: center; width: 32px; height: 32px; margin: 0 0.15rem 0.4rem; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid rgba(23, 19, 15, 0.3); background: #ffffff; color: #17130f; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.df-menu-canvas .df-fh-tabswrap .df-fh-tabarrow:hover { background: var(--df-accent, #d7282f); border-color: var(--df-accent, #d7282f); color: var(--df-pill-active-text, #ffffff); }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tabs::-webkit-scrollbar { display: none; }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-width: 88px; padding: 0.7rem 0.85rem 0.6rem; border-radius: 10px 10px 0 0; color: #17130f; transition: background 0.2s ease, color 0.2s ease; }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tab[data-active='true'] { background: var(--df-accent, #d7282f); color: var(--df-pill-active-text, #ffffff); }
.df-menu-canvas[data-template='fishhouse'] .df-fh-tab:not([data-active='true']):hover { background: rgba(23, 19, 15, 0.06); }
.df-fh-tabicon { display: grid; place-items: center; width: 30px; height: 30px; }
.df-fh-iconsvg { display: block; width: 100%; height: 100%; }
.df-fh-iconimg { width: 100%; height: 100%; object-fit: contain; }
.df-fh-iconmask { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.df-fh-tablabel { font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; white-space: nowrap; }
.df-fh-panel[hidden] { display: none; }
.df-fh-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (min-width: 760px) { .df-fh-stage:not(.df-fh-stage-solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.25rem; align-items: start; } }
.df-fh-cattitle { font-size: clamp(32px, 5.5cqw, 48px); line-height: 1; letter-spacing: 0.01em; color: #17130f; overflow-wrap: break-word; }
.df-fh-note { display: inline-block; margin-top: 0.55rem; padding: 0.25rem 0.65rem; background: #f6c343; color: var(--df-accent, #b33327); font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; transform: rotate(-0.6deg); }
.df-fh-items { margin-top: 1.1rem; }
.df-fh-item { padding: 0.85rem 0; border-bottom: 1px solid rgba(23, 19, 15, 0.14); }
.df-fh-item:last-child { border-bottom: 0; }
.df-fh-itemrow { display: flex; align-items: baseline; gap: 0.75rem; }
.df-fh-name { min-width: 0; overflow-wrap: break-word; font-size: 17px; font-weight: 800; letter-spacing: 0.02em; color: #17130f; }
.df-fh-price { margin-left: auto; flex-shrink: 0; color: var(--df-accent, #d7282f); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.df-fh-chev { flex-shrink: 0; color: rgba(23, 19, 15, 0.35); font-size: 17px; font-weight: 700; line-height: 1; }
.df-fh-desc { margin-top: 0.3rem; padding-right: 1.5rem; font-size: 13.5px; line-height: 1.55; color: #5b544b; }
.df-fh-rail { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.df-fh-hero { border-radius: 14px; }
.df-fh-heroimg { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 14px; }
.df-fh-hero-split .df-fh-heroimg { border-radius: 14px 0 0 14px; }
.df-fh-hero-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.df-fh-hero-split .df-fh-card { border-radius: 0 14px 14px 0; height: 100%; }
.df-fh-card { border-radius: 14px; overflow: hidden; min-width: 0; }
.df-fh-card-dark { background: url('assets/fishhouse/brush-dark.webp') center / 100% 100% no-repeat; border-radius: 0; color: #ffffff; display: flex; flex-direction: column; }
/* dark-card photo = the POP-OUT slot (3D cup breaking past the card edge; transparent PNG) */
.df-fh-card-dark { position: relative; overflow: visible; }
.df-fh-card-dark .df-fh-cardphoto { position: absolute; top: 8px; right: -14px; height: calc(100% + 40px); width: auto; max-width: 55%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 16px 20px rgba(23, 19, 15, 0.4)); z-index: 1; pointer-events: none; }
.df-fh-card-dark[data-photo='true'] { min-height: 215px; }
.df-fh-rail > .df-fh-card-dark { flex: 0 0 auto; min-height: 200px; }
.df-fh-rail > .df-fh-card-dark .df-fh-cardbody { flex: 1; justify-content: center; }
.df-fh-card-dark[data-photo='true'] .df-fh-cardbody { padding-right: 46%; }
.df-fh-card-accent { position: relative; z-index: 0; background: transparent; border-radius: 0; color: var(--df-pill-active-text, #ffffff); }
.df-fh-card-accent::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--df-accent, #d7282f); -webkit-mask: url('assets/fishhouse/brush-red.webp') center / 100% 100% no-repeat; mask: url('assets/fishhouse/brush-red.webp') center / 100% 100% no-repeat; }
.df-fh-card-accent[data-photo='true'] { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.df-fh-card-accent .df-fh-cardphoto { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.df-fh-cardphoto { display: block; }
.df-fh-cardbody { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
.df-fh-cardtitle { font-size: 26px; line-height: 1.02; font-weight: 800; text-transform: uppercase; letter-spacing: 0.015em; }
.df-fh-cardtag { margin-top: 0.3rem; color: #f6c343; font-family: 'Grape Nuts', cursive; font-weight: 700; font-size: 34px; line-height: 0.95; letter-spacing: 0.01em; }
.df-fh-cardcopy { margin-top: 0.65rem; font-size: 14.5px; line-height: 1.5; opacity: 0.95; }
.df-fh-cardbadge { margin-top: 0.85rem; background: #f6c343; color: #17130f; font-weight: 800; font-size: 18px; padding: 0.45rem 1rem; border-radius: 10% 30% 12% 26% / 60% 42% 65% 45%; transform: rotate(-1.5deg); }
.df-menu-canvas .df-fh-card .df-fh-cardcta { margin-top: 0.85rem; display: inline-block; border: 1.5px solid currentColor; border-radius: 8px; background: transparent; color: inherit; padding: 0.5rem 1rem; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.df-menu-canvas .df-fh-card .df-fh-cardcta:hover { background: var(--df-pill-active-text, #ffffff); color: var(--df-accent, #d7282f); }
.df-fh-explore { margin-top: 2.75rem; }
.df-fh-exploretitle { display: flex; align-items: center; justify-content: center; gap: 0.9rem; font-size: clamp(24px, 4cqw, 34px); line-height: 1; color: #17130f; text-align: center; }
.df-fh-spark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--df-accent, #d7282f); }
.df-fh-spark-flip { transform: scaleX(-1); }
.df-fh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 560px) { .df-fh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .df-fh-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.df-menu-canvas .df-fh-tiles .df-fh-tile { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 14px 34px -18px rgba(23, 19, 15, 0.4); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.df-menu-canvas .df-fh-tiles .df-fh-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(23, 19, 15, 0.5); }
.df-fh-tilephoto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.df-fh-tilefallback { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--df-accent, #d7282f) 10%, #ffffff); color: var(--df-accent, #d7282f); }
.df-fh-tilefallback .df-fh-iconsvg, .df-fh-tilefallback .df-fh-iconmask, .df-fh-tilefallback .df-fh-iconimg { width: 34px; height: 34px; }
.df-fh-tilelabel { display: block; width: 100%; background: var(--df-accent, #d7282f); color: var(--df-pill-active-text, #ffffff); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0.55rem 0.5rem; }
.df-menu-canvas[data-template='fishhouse'] .df-menu-pill { background: #ffffff; color: #17130f; border: 1.5px solid rgba(23, 19, 15, 0.25); box-shadow: none; }
.df-menu-canvas[data-template='fishhouse'] .df-menu-pill[data-active='true'], .df-menu-canvas[data-template='fishhouse'] .df-menu-pill:hover { background: var(--df-accent, #d7282f); color: var(--df-pill-active-text, #ffffff); border-color: var(--df-accent, #d7282f); }
/* Elementor ships `.elementor img { height: auto }` at (0,1,1) — re-assert the two
   fills that need a real height (the split hero photo + custom tab-icon uploads) */
.df-menu-canvas .df-fh-heroimg { height: 100%; }
.df-menu-canvas .df-fh-iconimg { height: 100%; }
/* ── Fish House live-page compat (Elementor) ──────────────────────────────────
   The [derbyflow_menu] shortcode is usually dropped into a BOXED Elementor
   container, whose inner (.e-con-inner) clamps content to the site's narrow
   content-width — so the board can't reach its 1440px composition width (looks
   small with side white space), and a clipping container can kill the sticky
   category tabs. When a container HOLDS a Fish House menu, relax both — scoped
   via :has() so nothing else on the page is touched, and it degrades to the
   boxed look on browsers without :has(). No page-builder editing needed. */
.e-con-boxed:has(.df-menu-canvas[data-template='fishhouse']) > .e-con-inner { max-width: 1440px; }
.e-con:has(.df-menu-canvas[data-template='fishhouse']),
.e-con-inner:has(.df-menu-canvas[data-template='fishhouse']),
.elementor-widget:has(.df-menu-canvas[data-template='fishhouse']) { overflow: visible; }
/* print: the whole Fish House menu (every category panel), no interactive chrome */
@media print {
  .df-menu-canvas[data-template='fishhouse'] .df-fh-tabs, .df-menu-canvas[data-template='fishhouse'] .df-fh-explore { display: none !important; }
  .df-menu-canvas[data-template='fishhouse'] .df-fh-panel[hidden] { display: block !important; }
}

/* ── The Saint template — cream/blush printed menu, terracotta serif ──────────
   Mirrors src/dev/menu/menu.css [data-template='saint'] 1:1. A self-contained
   CREAM scheme (owns its background, like Fish House): a centered rose-emblem
   header, category blocks in a multi-column grid, a blush circular "Featured
   Dish" card floated top-right, rose botanical line-art in the corners and an
   optional dark event CTA band. Cormorant Garamond; terracotta = --df-accent. */
.df-menu-canvas[data-template='saint'] { --df-pad: clamp(1.5rem, 4.5vw, 3.5rem); --df-padx: max(var(--df-pad), calc((100% - 1280px) / 2)); --df-ink: #2b2420; --df-muted: #8a7d75; --df-blush: #f3e7e2; --df-hair: color-mix(in srgb, var(--df-accent, #b0654e) 15%, transparent); position: relative; /* no overflow:hidden — it would block the sticky nav; corner rose is clipped by .df-saint-artframe instead */ border-radius: 14px; padding: var(--df-pad) var(--df-padx); color: var(--df-ink); background-color: #fbf5f1; background-image: radial-gradient(150% 100% at 50% -12%, #fefbf9, transparent 55%); }
/* multi-menu switcher pills on the cream paper */
.df-menu-canvas[data-template='saint'] .df-menu-pill { background: transparent; color: var(--df-ink); border: 1px solid color-mix(in srgb, var(--df-accent, #b0654e) 45%, transparent); border-radius: 999px; box-shadow: none; letter-spacing: 0.12em; }
.df-menu-canvas[data-template='saint'] .df-menu-pill[data-active='true'], .df-menu-canvas[data-template='saint'] .df-menu-pill:hover { background: var(--df-accent, #b0654e); color: var(--df-pill-active-text, #ffffff); border-color: var(--df-accent, #b0654e); transform: none; }
.df-menu-canvas[data-template='saint'] .df-menu-blurb { color: var(--df-muted); }
/* icon menu-nav bar (Dinner · Cocktails · Wine …) — one menu at a time */
.df-menu-canvas[data-template='saint'] .df-saint-navwrap { display: flex; align-items: stretch; justify-content: center; gap: 0.4rem; position: sticky; top: var(--df-saint-nav-top, 0px); z-index: 12; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); padding: clamp(0.75rem, 2.4vw, 1.35rem) 0 0; background: #fbf5f1; }
.df-menu-canvas[data-template='saint'] .df-saint-nav { display: flex; align-items: flex-end; justify-content: safe center; gap: clamp(1.1rem, 3.2vw, 3rem); flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid color-mix(in srgb, var(--df-accent, #b0654e) 22%, transparent); }
.df-menu-canvas[data-template='saint'] .df-saint-navarrow { flex: 0 0 auto; display: none; align-items: center; justify-content: center; align-self: flex-end; width: 34px; height: 34px; margin-bottom: 0.35rem; padding: 0; border: 1px solid color-mix(in srgb, var(--df-accent, #b0654e) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, #fff 65%, transparent); color: var(--df-accent, #b0654e); cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 2px 8px -4px rgba(120, 60, 40, 0.4); transition: background 0.2s ease; }
.df-menu-canvas[data-template='saint'] .df-saint-navarrow:hover { background: color-mix(in srgb, var(--df-accent, #b0654e) 12%, #fff); }
.df-menu-canvas[data-template='saint'] .df-saint-navarrow:focus, .df-menu-canvas[data-template='saint'] .df-saint-navarrow:focus-visible, .df-menu-canvas[data-template='saint'] .df-saint-navarrow:active { outline: none; box-shadow: 0 2px 8px -4px rgba(120, 60, 40, 0.4); }
.df-menu-canvas[data-template='saint'] .df-saint-navarrow svg { width: 18px; height: 18px; }
.df-menu-canvas[data-template='saint'] .df-saint-navarrow[data-show='true'] { display: inline-flex; }
.df-menu-canvas[data-template='saint'] .df-saint-nav::-webkit-scrollbar { display: none; }
.df-menu-canvas[data-template='saint'] .df-saint-navbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: -1px; padding: 0 0.15rem 0.8rem; font-size: clamp(11px, 1.3vw, 13px); letter-spacing: 0.16em; line-height: 1; color: var(--df-muted); background: none; -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; border-bottom: 2px solid transparent; box-shadow: none; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; }
/* kill the Elementor/browser button focus box (blue outline) on the live site — the terracotta underline is the state */
.df-menu-canvas[data-template='saint'] .df-saint-navbtn:focus, .df-menu-canvas[data-template='saint'] .df-saint-navbtn:focus-visible, .df-menu-canvas[data-template='saint'] .df-saint-navbtn:active { outline: none !important; box-shadow: none !important; background: none !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }
.df-menu-canvas[data-template='saint'] .df-saint-navicon { width: clamp(18px, 2.2vw, 22px); height: auto; flex: 0 0 auto; }
.df-menu-canvas[data-template='saint'] .df-saint-navbtn:hover { color: var(--df-accent, #b0654e); }
.df-menu-canvas[data-template='saint'] .df-saint-navbtn[data-active='true'] { color: var(--df-accent, #b0654e); border-bottom-color: var(--df-accent, #b0654e); }
/* rose botanical line-art in the lower-left corner (real hand-drawn art, faint) */
.df-menu-canvas[data-template='saint'] .df-saint-artframe { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none; }
.df-menu-canvas[data-template='saint'] .df-saint-art { position: absolute; z-index: 0; width: clamp(140px, 19vw, 300px); height: auto; opacity: 0.26; pointer-events: none; user-select: none; }
.df-menu-canvas[data-template='saint'] .df-saint-art-l { left: -5%; bottom: -5%; }
.df-menu-canvas[data-template='saint'] .df-saint-head, .df-menu-canvas[data-template='saint'] .df-saint-body, .df-menu-canvas[data-template='saint'] .df-saint-band { position: relative; z-index: 1; }
/* header */
.df-menu-canvas[data-template='saint'] .df-saint-head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.df-menu-canvas[data-template='saint'] .df-saint-emblem { display: block; width: clamp(36px, 4.8vw, 52px); height: auto; margin: 0 auto 0.2rem; }
.df-menu-canvas[data-template='saint'] .df-saint-title { font-size: clamp(27px, 4.6vw, 46px); line-height: 1.04; letter-spacing: 0.09em; font-weight: 500; color: var(--df-ink); }
.df-menu-canvas[data-template='saint'] .df-saint-divider { width: clamp(150px, 24vw, 210px); margin: 0.85rem auto 0; }
/* ornamental rule: two accent lines flanking the hand-drawn leaf-knot ornament */
.df-menu-canvas[data-template='saint'] .df-saint-orndiv { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.df-menu-canvas[data-template='saint'] .df-saint-orndiv-line { flex: 1 1 auto; min-width: 14px; height: 1px; }
.df-menu-canvas[data-template='saint'] .df-saint-orndiv-line:first-child { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--df-accent, #b0654e) 55%, transparent)); }
.df-menu-canvas[data-template='saint'] .df-saint-orndiv-line:last-child { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--df-accent, #b0654e) 55%, transparent)); }
.df-menu-canvas[data-template='saint'] .df-saint-orndiv-orn { flex: 0 0 auto; height: 15px; width: auto; }
/* body: category columns (left) + featured card (right); cats flow 1→2→3 cols (always horizontal) */
.df-menu-canvas[data-template='saint'] .df-saint-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(2rem, 4.5vw, 4rem); }
.df-menu-canvas[data-template='saint'] .df-saint-cats { flex: 1 1 320px; min-width: 0; column-width: 250px; column-gap: clamp(2rem, 4.5vw, 3.75rem); column-rule: 1px solid var(--df-hair); }
/* cap column COUNT to the category count so 1–2 categories fill the area evenly instead of clumping left */
.df-menu-canvas[data-template='saint'] .df-saint-cats[data-cats='1'] { column-count: 1; }
.df-menu-canvas[data-template='saint'] .df-saint-cats[data-cats='2'] { column-count: 2; }
.df-menu-canvas[data-template='saint'] .df-saint-cats[data-cats='3'] { column-count: 3; }
.df-menu-canvas[data-template='saint'] .df-saint-cat { break-inside: avoid; margin-bottom: clamp(1.9rem, 3.6vw, 2.9rem); }
/* category block */
.df-menu-canvas[data-template='saint'] .df-saint-catname { font-size: clamp(17px, 2vw, 23px); letter-spacing: 0.22em; line-height: 1.2; font-weight: 500; color: var(--df-accent, #b0654e); }
.df-menu-canvas[data-template='saint'] .df-saint-catrule { display: block; width: 100%; height: 1px; margin: 0.6rem 0 1.2rem; background: linear-gradient(to right, color-mix(in srgb, var(--df-accent, #b0654e) 45%, transparent), var(--df-hair)); }
.df-menu-canvas[data-template='saint'] .df-saint-catnote { margin: -0.6rem 0 1rem; font-size: 12.5px; font-style: italic; color: var(--df-muted); }
.df-menu-canvas[data-template='saint'] .df-saint-items { display: flex; flex-direction: column; gap: clamp(0.95rem, 1.8vw, 1.35rem); }
.df-menu-canvas[data-template='saint'] .df-saint-itemhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; }
.df-menu-canvas[data-template='saint'] .df-saint-name { font-size: clamp(14px, 1.5vw, 16px); letter-spacing: 0.09em; line-height: 1.25; font-weight: 600; color: var(--df-ink); min-width: 0; overflow-wrap: break-word; }
.df-menu-canvas[data-template='saint'] .df-saint-price { flex: 0 0 auto; font-size: clamp(13.5px, 1.4vw, 15.5px); letter-spacing: 0.02em; color: color-mix(in srgb, var(--df-accent, #b0654e) 62%, var(--df-muted)); }
.df-menu-canvas[data-template='saint'] .df-saint-desc { margin-top: 0.28rem; max-width: 44ch; font-size: clamp(12.5px, 1.4vw, 14px); font-style: italic; line-height: 1.55; color: var(--df-muted); }
/* featured dish card (blush, circular photo) — the right-hand column */
.df-menu-canvas[data-template='saint'] .df-saint-featured { flex: 0 1 clamp(250px, 28%, 340px); align-self: flex-start; padding: clamp(1.5rem, 2.8vw, 2.15rem); border: 1px solid color-mix(in srgb, var(--df-accent, #b0654e) 18%, transparent); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--df-blush) 55%, #fff), var(--df-blush)); box-shadow: 0 30px 60px -42px rgba(120, 60, 40, 0.4); text-align: center; }
.df-menu-canvas[data-template='saint'] .df-saint-featured-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: var(--df-accent, #b0654e); }
.df-menu-canvas[data-template='saint'] .df-saint-featured-rose { width: 20px; height: auto; }
.df-menu-canvas[data-template='saint'] .df-saint-featured-div { width: 118px; margin: 0.55rem auto 0; }
.df-menu-canvas[data-template='saint'] .df-saint-featured-photo { display: block; width: 76%; max-width: 230px; aspect-ratio: 1; height: auto; margin: 1.15rem auto 1.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-accent, #b0654e) 30%, transparent), 0 0 0 6px #fff, 0 18px 32px -18px rgba(120, 60, 40, 0.45); }
.df-menu-canvas[data-template='saint'] .df-saint-featured-name { font-size: clamp(25px, 3.3vw, 34px); line-height: 1.08; letter-spacing: 0.01em; font-weight: 500; color: var(--df-ink); }
.df-menu-canvas[data-template='saint'] .df-saint-featured-price { margin-top: 0.45rem; font-size: clamp(16px, 1.8vw, 19px); color: color-mix(in srgb, var(--df-accent, #b0654e) 62%, var(--df-muted)); }
.df-menu-canvas[data-template='saint'] .df-saint-featured-desc { margin: 0.7rem auto 0; max-width: 26ch; font-size: 13px; font-style: italic; line-height: 1.55; color: var(--df-muted); }
/* mobile — the Featured Dish card wraps below the menu; stack the body and CENTER the card */
@media (max-width: 640px) {
  .df-menu-canvas[data-template='saint'] .df-saint-body { flex-direction: column; }
  .df-menu-canvas[data-template='saint'] .df-saint-cats { flex-basis: auto; width: 100%; }
  .df-menu-canvas[data-template='saint'] .df-saint-featured { flex-basis: auto; width: min(360px, 100%); align-self: center; }
}
/* event CTA band — blush strip: photo bleeds in from the LEFT, rose graphic on the RIGHT */
.df-menu-canvas[data-template='saint'] .df-saint-band { position: relative; overflow: hidden; margin: clamp(4.25rem, 9.5vw, 8.5rem) 0 0; border-radius: clamp(22px, 3vw, 34px); padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.5rem, 5vw, 3rem); text-align: center; background: #f0e2dc; box-shadow: 0 34px 72px -46px rgba(120, 60, 40, 0.34); }
.df-menu-canvas[data-template='saint'] .df-saint-band-photo { position: absolute; left: 0; top: 0; z-index: 0; height: 100%; width: clamp(180px, 34%, 460px); object-fit: cover; object-position: center 35%; -webkit-mask-image: linear-gradient(to right, #000 12%, transparent 90%); mask-image: linear-gradient(to right, #000 12%, transparent 90%); }
.df-menu-canvas[data-template='saint'] .df-saint-band-floral { position: absolute; right: 0.5%; top: 50%; transform: translateY(-50%); z-index: 0; width: clamp(200px, 26vw, 400px); height: auto; opacity: 0.85; pointer-events: none; }
.df-menu-canvas[data-template='saint'] .df-saint-band-inner { position: relative; z-index: 1; }
.df-menu-canvas[data-template='saint'] .df-saint-band-rose { display: block; width: 32px; height: auto; margin: 0 auto 0.35rem; }
.df-menu-canvas[data-template='saint'] .df-saint-band-head { font-size: clamp(22px, 3.4vw, 34px); line-height: 1.1; letter-spacing: 0.06em; font-weight: 500; color: var(--df-ink); }
.df-menu-canvas[data-template='saint'] .df-saint-band-sub { margin: 0.5rem auto 0; max-width: 32rem; font-size: clamp(13px, 1.5vw, 15px); font-style: italic; color: var(--df-muted); }
.df-menu-canvas[data-template='saint'] .df-saint-band-btn { display: inline-block; margin-top: 1.35rem; padding: 0.72rem 2rem; border: 1px solid var(--df-accent, #b0654e); border-radius: 999px; font-size: 12px; letter-spacing: 0.16em; color: var(--df-accent, #b0654e); transition: background 0.3s ease, color 0.3s ease; }
.df-menu-canvas[data-template='saint'] a.df-saint-band-btn:hover { background: var(--df-accent, #b0654e); color: var(--df-pill-active-text, #ffffff); }
/* Elementor ships `.elementor img { height: auto }` (0,1,1) — re-assert the band photo's full height + the divider ornament's fixed height (the circular featured photo keeps auto) */
.df-menu-canvas[data-template='saint'] .df-saint-band-photo { height: 100%; }
.df-menu-canvas[data-template='saint'] .df-saint-orndiv-orn { height: 15px; }
/* boxed-container relax + overflow (mirrors the Fish House :has() fix) so the wide menu isn't clamped */
.e-con-boxed:has(.df-menu-canvas[data-template='saint']) > .e-con-inner { max-width: 1200px; }
.e-con:has(.df-menu-canvas[data-template='saint']), .e-con-inner:has(.df-menu-canvas[data-template='saint']), .elementor-widget:has(.df-menu-canvas[data-template='saint']) { overflow: visible; }
/* event band on phones + narrow tablets: the left-bleeding photo sits BEHIND the
   centered copy (unreadable). Stack up to 800px — photo becomes a clean full-width
   top banner, copy sits below on the blush, rose shrinks to a faint corner accent.
   MUST come after the base band rules + the `height:100%` re-assert above so it wins
   the cascade (same specificity, later source order). */
@media (max-width: 800px) {
  .df-menu-canvas[data-template='saint'] .df-saint-band { padding: 0; }
  .df-menu-canvas[data-template='saint'] .df-saint-band-photo { position: static; width: 100%; height: clamp(130px, 30vw, 200px); object-position: center 30%; -webkit-mask-image: none; mask-image: none; }
  .df-menu-canvas[data-template='saint'] .df-saint-band-inner { padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.5rem, 5vw, 2.5rem) clamp(2.25rem, 6vw, 3rem); }
  .df-menu-canvas[data-template='saint'] .df-saint-band-floral { width: 118px; opacity: 0.4; right: -10px; bottom: -10px; top: auto; transform: none; }
}
@media print { .df-menu-canvas[data-template='saint'] .df-saint-art { display: none !important; } }

/* ---- Nightlife template — black + gold, condensed caps, glowing cards ---------
 * 1:1 port of the [data-template='nightlife'] rules in src/dev/menu/menu.css.
 * Owns its dark background (like Sicilian/Addison). Gold = --df-accent (defaults
 * to MG's #f2aa45). ⚠️ Keep in sync with menu.css on any change. */
.df-menu-canvas[data-template='nightlife'] {
  --df-gold: var(--df-accent, #f2aa45);
  --df-pad: clamp(1.5rem, 4.5vw, 3.75rem);
  --df-ink: #ffffff;
  --df-muted: rgba(255, 255, 255, 0.62);
  --df-hair: color-mix(in srgb, var(--df-gold) 48%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  padding: clamp(2rem, 5vw, 4rem) var(--df-pad) clamp(2.5rem, 6vw, 4.5rem);
  color: var(--df-ink);
  background-color: #050505;
  background-image:
    radial-gradient(120% 80% at 12% 6%, color-mix(in srgb, var(--df-gold) 14%, transparent), transparent 30%),
    radial-gradient(120% 80% at 88% 92%, color-mix(in srgb, var(--df-gold) 10%, transparent), transparent 32%),
    linear-gradient(150deg, #050505 0%, #0b0b0b 44%, #120a02 74%, #050505 100%);
  border: 1px solid color-mix(in srgb, var(--df-gold) 34%, transparent);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), inset 0 0 70px color-mix(in srgb, var(--df-gold) 5%, transparent);
}
.df-menu-canvas[data-template='nightlife']::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--df-gold) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--df-gold) 4%, transparent) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 62%, transparent 92%);
  mask-image: radial-gradient(circle at center, #000 0%, #000 62%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
.df-menu-canvas[data-template='nightlife'] .df-menu-pills { position: relative; z-index: 3; }
.df-menu-canvas[data-template='nightlife'] .df-menu-pill { background: rgba(0, 0, 0, 0.35); color: var(--df-ink); border: 1px solid color-mix(in srgb, var(--df-gold) 55%, transparent); border-radius: 6px; box-shadow: none; letter-spacing: 0.14em; font-weight: 600; }
.df-menu-canvas[data-template='nightlife'] .df-menu-pill[data-active='true'],
.df-menu-canvas[data-template='nightlife'] .df-menu-pill:hover { background: var(--df-gold); color: #050505; border-color: var(--df-gold); box-shadow: 0 0 22px color-mix(in srgb, var(--df-gold) 30%, transparent); transform: none; }
.df-menu-canvas[data-template='nightlife'] .df-menu-blurb { color: var(--df-muted); position: relative; z-index: 3; }
.df-night { position: relative; z-index: 2; }
.df-night-ghost { position: absolute; right: clamp(-0.5rem, 1vw, 1rem); bottom: clamp(-1.5rem, -1vw, -0.5rem); font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-size: clamp(90px, 16vw, 220px); line-height: 1; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--df-gold) 12%, transparent); pointer-events: none; z-index: 0; white-space: nowrap; }
.df-night-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.25rem); position: relative; z-index: 2; }
.df-night-eyebrow { display: inline-flex; align-items: center; justify-content: center; padding: 6px 22px 7px; margin-bottom: 1rem; background: var(--df-gold); border: 2px solid #050505; transform: rotate(-2deg); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 26px color-mix(in srgb, var(--df-gold) 22%, transparent); font-size: clamp(15px, 1.4vw, 19px); line-height: 1; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #050505; }
.df-night-title { margin: 0; font-size: clamp(42px, 6.4vw, 92px); line-height: 0.92; font-weight: 700; letter-spacing: 0.02em; color: var(--df-ink); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 34px color-mix(in srgb, var(--df-gold) 12%, transparent); }
.df-night-rule { display: block; width: min(240px, 60%); height: 2px; margin: 1.1rem auto 0; background: linear-gradient(90deg, transparent, var(--df-gold), transparent); position: relative; }
.df-night-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); background: var(--df-gold); box-shadow: 0 0 14px color-mix(in srgb, var(--df-gold) 55%, transparent); }
.df-night-cats { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.4vw, 2rem); position: relative; z-index: 2; }
@media (min-width: 760px) {
  .df-night-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-night-cats[data-cats='1'] { grid-template-columns: minmax(0, 620px); justify-content: center; }
}
.df-night-cat { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid color-mix(in srgb, var(--df-gold) 42%, transparent); border-radius: 12px; background: radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--df-gold) 10%, transparent), transparent 40%), linear-gradient(150deg, #0b0b0b 0%, #111 48%, #080808 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 55px color-mix(in srgb, var(--df-gold) 4%, transparent); }
.df-night-cat::before { content: ''; position: absolute; left: 0; top: 14%; width: 3px; height: 72%; background: linear-gradient(180deg, transparent, var(--df-gold), color-mix(in srgb, var(--df-gold) 60%, #fff), var(--df-gold), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--df-gold) 60%, transparent); }
.df-night-dots { position: absolute; top: 14px; right: 16px; width: 108px; height: 66px; background-image: radial-gradient(circle, color-mix(in srgb, var(--df-gold) 60%, transparent) 1.1px, transparent 1.3px); background-size: 15px 15px; opacity: 0.5; pointer-events: none; z-index: 0; }
.df-night-catname { position: relative; z-index: 1; margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; font-weight: 700; letter-spacing: 0.04em; color: var(--df-gold); text-shadow: 0 0 22px color-mix(in srgb, var(--df-gold) 20%, transparent); }
.df-night-catrule { display: block; width: 46px; height: 3px; margin: 0.7rem 0 0; border-radius: 3px; background: var(--df-gold); box-shadow: 0 0 14px color-mix(in srgb, var(--df-gold) 45%, transparent); }
.df-night-catnote { margin: 0.75rem 0 0; font-size: 16px; line-height: 1.5; letter-spacing: 0.02em; color: var(--df-muted); }
.df-night-items { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.15rem; position: relative; z-index: 1; }
.df-night-item { position: relative; }
.df-night-itemhead { display: flex; align-items: baseline; gap: 0.4rem; }
.df-night-name { flex: 0 1 auto; margin: 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.1; font-weight: 600; letter-spacing: 0.03em; color: var(--df-ink); min-width: 0; overflow-wrap: break-word; }
.df-night-leader { flex: 1 1 auto; align-self: flex-end; height: 1px; transform: translateY(-0.32em); min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--df-gold) 45%, transparent); }
.df-night-price { flex: 0 0 auto; font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; letter-spacing: 0.02em; color: var(--df-gold); font-variant-numeric: tabular-nums; }
.df-night-desc { margin: 0.3rem 0 0; max-width: 52ch; font-size: 15.5px; line-height: 1.5; letter-spacing: 0.02em; color: var(--df-muted); }
.df-night-photo { display: block; margin: 0.85rem 0 0; width: 100%; object-fit: cover; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--df-gold) 32%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.df-night-photo-sm { height: 120px; }
.df-night-photo-md { height: 168px; }
.df-night-photo-lg { height: 224px; }
@media (max-width: 560px) {
  .df-night-ghost { font-size: 84px; opacity: 0.8; }
  .df-night-dots { width: 78px; height: 48px; }
  .df-night-photo-lg { height: 190px; }
}
@media print {
  .df-menu-canvas[data-template='nightlife'] .df-night-ghost,
  .df-menu-canvas[data-template='nightlife']::before { display: none !important; }
}

/* ---- Royale template — espresso-black + champagne gold, Playfair editorial ----
 * 1:1 port of the [data-template='royale'] rules in src/dev/menu/menu.css. Owns
 * its dark background (like Nightlife/Sicilian). Gold = --df-accent (defaults to
 * Latte Royale's #ebbf10). ⚠️ Keep in sync with menu.css on any change. */
.df-menu-canvas[data-template='royale'] {
  --df-gold: var(--df-accent, #ebbf10);
  --df-pad: clamp(1.5rem, 4.5vw, 4rem);
  --df-ink: #f5ebdd;
  --df-muted: rgba(245, 235, 221, 0.6);
  --df-hair: color-mix(in srgb, var(--df-gold) 30%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  padding: clamp(2.25rem, 5.5vw, 4.5rem) var(--df-pad) clamp(2.5rem, 6vw, 4.75rem);
  color: var(--df-ink);
  background-color: #111827;
  background-image:
    radial-gradient(120% 70% at 50% -12%, color-mix(in srgb, var(--df-gold) 12%, transparent), transparent 55%),
    radial-gradient(100% 65% at 50% 118%, rgba(0, 0, 0, 0.55), transparent 62%),
    linear-gradient(180deg, #16203a 0%, #111827 42%, #0b111d 100%);
  border: 1px solid color-mix(in srgb, var(--df-gold) 24%, transparent);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 0 90px color-mix(in srgb, var(--df-gold) 4%, transparent);
}
.df-menu-canvas[data-template='royale'] .df-menu-pills { position: relative; z-index: 3; }
.df-menu-canvas[data-template='royale'] .df-menu-pill { background: transparent; color: var(--df-ink); border: 1px solid color-mix(in srgb, var(--df-gold) 50%, transparent); border-radius: 999px; box-shadow: none; letter-spacing: 0.16em; font-weight: 500; }
.df-menu-canvas[data-template='royale'] .df-menu-pill[data-active='true'],
.df-menu-canvas[data-template='royale'] .df-menu-pill:hover { background: var(--df-gold); color: var(--df-pill-active-text, #111827); border-color: var(--df-gold); box-shadow: 0 0 22px color-mix(in srgb, var(--df-gold) 26%, transparent); transform: none; }
.df-menu-canvas[data-template='royale'] .df-menu-blurb { color: var(--df-muted); position: relative; z-index: 3; text-align: center; }

.df-royale { position: relative; z-index: 2; }
.df-royale-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.df-royale-crown { display: block; width: clamp(34px, 4.4vw, 46px); height: auto; margin: 0 auto 0.85rem; color: var(--df-gold); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--df-gold) 30%, transparent)); }
.df-royale-eyebrow { display: block; margin: 0 0 0.75rem; font-size: clamp(11px, 1.25vw, 13.5px); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--df-gold); }
.df-royale-title { margin: 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: 0.03em; color: var(--df-ink); text-shadow: 0 6px 34px rgba(0, 0, 0, 0.55); }
.df-royale-divider { display: flex; align-items: center; justify-content: center; gap: 0.7rem; width: min(300px, 66%); margin: 1.15rem auto 0; }
.df-royale-divider-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--df-gold) 70%, transparent)); }
.df-royale-divider-line:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--df-gold) 70%, transparent), transparent); }
.df-royale-divider-gem { flex: 0 0 auto; width: 7px; height: 7px; transform: rotate(45deg); background: var(--df-gold); box-shadow: 0 0 12px color-mix(in srgb, var(--df-gold) 55%, transparent); }
.df-royale-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); min-height: clamp(240px, 34vw, 400px); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); background-size: cover; background-position: center; border: 1px solid color-mix(in srgb, var(--df-gold) 22%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.df-royale-hero-scrim { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--df-gold) 12%, transparent), transparent 55%), linear-gradient(180deg, rgba(11, 17, 29, 0.5) 0%, rgba(11, 17, 29, 0.62) 55%, rgba(11, 17, 29, 0.82) 100%); }
.df-royale-head-hero { position: relative; z-index: 1; margin: 0; }
.df-royale-head-hero .df-royale-title { text-shadow: 0 6px 34px rgba(0, 0, 0, 0.75); }
.df-royale-blocks { display: flex; flex-direction: column; gap: clamp(2.75rem, 5.5vw, 4.5rem); position: relative; z-index: 2; }
.df-royale-block { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; }
@media (min-width: 820px) {
  .df-royale-block[data-photo='true'] { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .df-royale-block[data-photo='true'][data-flip='true'] { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
  .df-royale-block[data-photo='true'][data-flip='true'] .df-royale-blockphoto { order: 2; }
}
.df-royale-blockphoto { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5; border: 1px solid color-mix(in srgb, var(--df-gold) 26%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); }
.df-royale-blockphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-royale-block[data-photo='true'] .df-royale-blockbody { text-align: left; }
.df-royale-block:not([data-photo='true']) .df-royale-blockbody { text-align: center; max-width: 660px; margin: 0 auto; }
.df-royale-catname { margin: 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; font-weight: 600; letter-spacing: 0.05em; color: var(--df-ink); }
.df-royale-catrule { display: block; width: 52px; height: 2px; margin: 0.7rem auto 0; background: var(--df-gold); box-shadow: 0 0 12px color-mix(in srgb, var(--df-gold) 45%, transparent); }
.df-royale-block[data-photo='true'] .df-royale-catrule { margin-left: 0; margin-right: auto; }
.df-royale-catnote { margin: 0.85rem auto 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; letter-spacing: 0.02em; font-style: italic; color: var(--df-muted); }
.df-royale-block[data-photo='true'] .df-royale-catnote { margin-left: 0; margin-right: 0; }
.df-royale-items { margin-top: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 1.35rem; text-align: left; }
.df-royale-item { position: relative; }
.df-royale-itemhead { display: flex; align-items: baseline; gap: 0.5rem; }
.df-royale-name { flex: 0 1 auto; margin: 0; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.15; font-weight: 500; letter-spacing: 0.02em; color: var(--df-ink); }
.df-royale-leader { flex: 1 1 auto; align-self: flex-end; height: 1px; transform: translateY(-0.34em); min-width: 1.5rem; background: linear-gradient(90deg, var(--df-hair), color-mix(in srgb, var(--df-gold) 12%, transparent)); }
.df-royale-price { flex: 0 0 auto; font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; letter-spacing: 0.02em; color: var(--df-gold); }
.df-royale-desc { margin: 0.35rem 0 0; max-width: 54ch; font-size: 15px; line-height: 1.55; letter-spacing: 0.01em; color: var(--df-muted); }
.df-royale-photo { display: block; margin: 0.9rem 0 0; width: 100%; object-fit: cover; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--df-gold) 28%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.df-royale-photo-sm { height: 120px; }
.df-royale-photo-md { height: 172px; }
.df-royale-photo-lg { height: 228px; }
@media (max-width: 560px) {
  .df-royale-photo-lg { height: 194px; }
}
@media print {
  .df-menu-canvas[data-template='royale']::before { display: none !important; }
}

/* ---- Experiences — tabbed coffee-menu showcase ([derbyflow_experiences]) --------
 * A gold icon TAB BAR (sticky) that switches between experiences; clicking a tab
 * reveals ONE experience at a time as a rich panel — a photo gallery (main +
 * thumbnails) beside the name / price / description / what's-included / CTA. No
 * scrolling; every panel stays in the DOM (SEO), only the active one shows.
 * Champagne gold = --df-accent (readable CTA text via --df-xp-onaccent). Mirrored
 * 1:1 by `derbyflow_experiences` (tabs + panels + a toggle script) in the WP theme
 * (style.css). ⚠️ Keep the two in sync. */
.df-xp, .df-xp * { box-sizing: border-box; }
.df-xp {
  /* brand-driven: --df-bg = brand Background, --df-ink = brand Primary, --df-accent
     = brand Accent; all other tones derive from these (see the app menu.css). */
  --df-accent: #c9a24b;
  --df-xp-onaccent: #111827;
  --df-ink: #f4ecdd;
  --df-bg: #0c1220;
  --df-muted: color-mix(in srgb, var(--df-ink) 56%, transparent);
  --df-hair: color-mix(in srgb, var(--df-ink) 12%, transparent);
  position: relative;
  /* clip (not hidden) so the sticky nav below isn't trapped in a scroll container */
  overflow: clip;
  isolation: isolate;
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3.8rem);
  color: var(--df-ink);
  background-color: var(--df-bg);
  background-image:
    radial-gradient(130% 70% at 50% -10%, color-mix(in srgb, var(--df-accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--df-ink) 5%, var(--df-bg)) 0%, var(--df-bg) 58%, color-mix(in srgb, #000 26%, var(--df-bg)) 100%);
  border: 1px solid color-mix(in srgb, var(--df-accent) 22%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.df-xp p, .df-xp h3, .df-xp ul { margin: 0; }
.df-xp img { display: block; max-width: 100%; }

/* --- icon tab bar — sticks to the top while scrolling; edge arrows scroll it
       when the tabs overflow (many experiences) so none get cut off --- */
.df-xp-navwrap {
  position: sticky;
  top: var(--df-xp-nav-top, 0px);
  z-index: 20;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.df-xp-nav {
  display: flex;
  align-items: stretch;
  justify-content: safe center;
  gap: clamp(0.75rem, 2.4vw, 2.75rem);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* no scroll-behavior: smooth — a smooth scrollBy is a no-op in some webview
     browsers, stranding the tabs that overflow past the edge; the arrow script
     scrolls instantly instead. */
  padding-top: clamp(0.85rem, 1.8vw, 1.35rem);
  padding-bottom: 0.9rem;
  background: color-mix(in srgb, var(--df-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--df-accent) 20%, transparent);
}
.df-xp-nav::-webkit-scrollbar { display: none; }
.df-xp-navarrow {
  position: absolute;
  top: 0;
  bottom: 1px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  width: clamp(46px, 9vw, 60px);
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--df-accent);
  transition: color 0.2s ease;
}
.df-xp-navarrow[hidden] { display: none; }
.df-xp-navarrow[data-dir='prev'] {
  left: 0;
  justify-content: flex-start;
  padding-left: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--df-bg) 98%, transparent) 44%, color-mix(in srgb, var(--df-bg) 70%, transparent) 74%, transparent);
}
.df-xp-navarrow[data-dir='next'] {
  right: 0;
  justify-content: flex-end;
  padding-right: 3px;
  background: linear-gradient(270deg, color-mix(in srgb, var(--df-bg) 98%, transparent) 44%, color-mix(in srgb, var(--df-bg) 70%, transparent) 74%, transparent);
}
.df-xp-navarrow:hover { color: color-mix(in srgb, var(--df-accent) 78%, #ffffff); }
.df-xp-chev { width: 21px; height: 21px; flex: 0 0 auto; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55)); }
.df-xp-navbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.1rem 0.55rem;
  margin-bottom: -0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--df-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.df-xp-navbtn:hover, .df-xp-navbtn:focus-visible { color: var(--df-accent); outline: none; }
.df-xp-navbtn[aria-selected='true'] { color: var(--df-accent); border-bottom-color: var(--df-accent); }
.df-xp-navicon { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- the per-experience panels (one shown at a time) --- */
.df-xp-panels { position: relative; z-index: 1; }
.df-xp-panel { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3.6vw, 3.75rem); align-items: start; animation: dfxpfade 0.35s ease; }
.df-xp-panel[hidden] { display: none; }
@keyframes dfxpfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 820px) { .df-xp-panel { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); align-items: center; } }

.df-xp-pgallery { position: relative; }
.df-xp-galmain { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--df-accent) 24%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); }
.df-xp-galnone { background: linear-gradient(150deg, #1a2338, #0c1220); }
.df-xp-num { position: absolute; top: 16px; left: 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; letter-spacing: 0.04em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, #ffffff 52%, transparent); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.df-xp-galthumbs { display: flex; gap: 0.55rem; margin-top: 0.7rem; overflow-x: auto; scrollbar-width: none; }
.df-xp-galthumbs::-webkit-scrollbar { display: none; }
.df-xp-galthumb { flex: 0 0 auto; width: 84px; height: 62px; padding: 0; border-radius: 9px; overflow: hidden; border: 1px solid transparent; opacity: 0.55; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease; }
.df-xp-galthumb img { width: 100%; height: 100%; object-fit: cover; }
.df-xp-galthumb:hover { opacity: 0.85; }
.df-xp-galthumb.is-active { opacity: 1; border-color: var(--df-accent); }

.df-xp-pbody { min-width: 0; }
.df-xp-eyebrow { display: block; margin: 0 0 1.1rem; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--df-accent); }
.df-xp-name { font-family: var(--df-xp-title-font, 'Playfair Display', Georgia, serif); font-size: clamp(30px, 3.9vw, 52px); line-height: 1.06; font-weight: 500; letter-spacing: 0.004em; color: var(--df-ink); }
/* script headline (Dom Loves Mary / Grape Nuts) reads smaller at a given px — size it larger + looser */
.df-xp[data-title-kind='script'] .df-xp-name { font-size: clamp(42px, 6vw, 82px); line-height: 0.98; font-weight: 400; letter-spacing: 0; }
.df-xp-price { display: inline-flex; align-items: center; margin: 1.5rem 0 0; padding: 0.42rem 0.95rem; border: 1px solid color-mix(in srgb, var(--df-accent) 42%, transparent); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--df-accent); }
/* `.df-xp .df-xp-desc` — extra .df-xp beats the `.df-xp p { margin: 0 }` reset (0-1-1) */
.df-xp .df-xp-desc { margin: 1.75rem 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.75; color: color-mix(in srgb, var(--df-ink) 76%, transparent); }
.df-xp .df-xp-incltitle { margin: 2.9rem 0 0.7rem; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--df-muted); }
.df-xp-incl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--df-hair); }
@media (min-width: 560px) { .df-xp-incl { columns: 2; column-gap: 3rem; } }
.df-xp-incl li { display: flex; align-items: center; gap: 0.75rem; padding: 0.82rem 0; font-size: 14px; line-height: 1.42; color: color-mix(in srgb, var(--df-ink) 90%, transparent); border-bottom: 1px solid var(--df-hair); break-inside: avoid; }
.df-xp-check { flex: 0 0 auto; width: 15px; height: 15px; color: var(--df-accent); }
.df-xp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  background: transparent;
  color: var(--df-accent);
  border: 1.5px solid var(--df-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.df-xp-cta:hover { background: var(--df-accent); color: var(--df-xp-onaccent, #111827); box-shadow: 0 14px 34px color-mix(in srgb, var(--df-accent) 32%, transparent); }
.df-xp-cta .df-xp-arrow { transition: transform 0.25s ease; }
.df-xp-cta:hover .df-xp-arrow { transform: translateX(4px); }
.df-xp-arrow { flex: 0 0 auto; width: 20px; height: 13px; }

/* empty state */
.df-xp-empty { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1.5rem; }
.df-xp-empty-title { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 500; color: var(--df-ink); }
.df-xp-empty-sub { margin-top: 0.4rem; font-size: 14px; color: var(--df-muted); }

/* ============================================================================
   SPECIALS — [derbyflow_specials] render. A 1:1 port of the React
   SpecialsDisplay CSS (src/dev/specials/specials.css). One unified card markup;
   the look switches by data-template (cards / board / fishhouse) on
   .df-sp-canvas. Container queries so it responds to its OWN width. The active
   accent rides as --df-accent. ⚠️ Keep in sync with specials.css on any change.
   ========================================================================== */
.df-sp-canvas, .df-sp-canvas * { box-sizing: border-box; }
.df-sp-canvas h2, .df-sp-canvas p { margin: 0; }
.df-sp-canvas img { display: block; max-width: 100%; }
.df-sp-canvas {
  /* viewport @media, not @media — see the note on .df-menu-canvas above
     (the container-type Chromium/Elementor flex bug applies here too). */
  border-radius: 1rem;
  padding: 1.25rem;
}
@media (min-width: 680px) {
  .df-sp-canvas { padding: 1.75rem; }
}

/* ---- header ---- */
.df-sp-header { text-align: center; margin-bottom: 1.5rem; }
.df-sp-title { font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; color: #141414; }
@media (min-width: 680px) { .df-sp-title { font-size: 34px; } }
.df-sp-subtitle { margin-top: 0.4rem; font-size: 13.5px; line-height: 1.5; color: #666; }

/* ---- grid: responsive columns ---- */
.df-sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 560px) {
  .df-sp-canvas[data-cols='auto'] .df-sp-grid,
  .df-sp-canvas[data-cols='2'] .df-sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .df-sp-canvas[data-cols='auto'] .df-sp-grid,
  .df-sp-canvas[data-cols='3'] .df-sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.df-sp-canvas[data-cols='1'] .df-sp-grid { grid-template-columns: minmax(0, 1fr); max-width: 44rem; margin-inline: auto; }

/* ---- card (base) ---- */
.df-sp-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: #ffffff;
  border: 1px solid rgba(16, 32, 64, 0.08);
  box-shadow: 0 14px 34px -20px rgba(16, 32, 64, 0.28);
}
.df-sp-photo { aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f9; }
.df-sp-photo img { width: 100%; height: 100%; object-fit: cover; }
.df-sp-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem 1.15rem; }
.df-sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.df-sp-name { min-width: 0; font-size: 17px; font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; color: #141414; overflow-wrap: break-word; }
.df-sp-deal {
  flex-shrink: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--df-accent, #1a53e8) 12%, transparent);
  color: var(--df-accent, #1a53e8);
  padding: 0.25rem 0.6rem; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.df-sp-price { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.df-sp-orig { font-size: 13px; font-weight: 600; color: #9aa3b2; text-decoration: line-through; }
.df-sp-sale { font-size: 17px; font-weight: 800; color: var(--df-accent, #1a53e8); }
.df-sp-desc { font-size: 13px; line-height: 1.55; color: #4a4a4a; }
.df-sp-sched { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--df-accent, #1a53e8) 78%, #333); }
.df-sp-credit { margin-top: 1.5rem; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa3b2; }

/* ---- ADDISON template — dark navy + gold (matches the Addison menu + events).
   Opinionated: gold accent (--df-accent = #E8B33C, set inline), Cormorant names,
   cream text on a dark navy card. Canvas bg owned here (PHP skips the inline bg). */
.df-sp-canvas[data-template='addison'] { background: linear-gradient(165deg, #0c1838, #0a1430 60%, #081025); }
.df-sp-canvas[data-template='addison'] .df-sp-title { color: #ece6da; }
.df-sp-canvas[data-template='addison'] .df-sp-subtitle { color: rgba(236, 230, 218, 0.6); }
.df-sp-canvas[data-template='addison'] .df-sp-card {
  background: linear-gradient(165deg, #101f44, #0b1734 60%, #0a1430);
  border: 1px solid color-mix(in srgb, var(--df-accent, #e8b33c) 30%, transparent);
  box-shadow: 0 24px 60px -28px rgba(4, 10, 26, 0.85);
}
.df-sp-canvas[data-template='addison'] .df-sp-photo { background: #0a1430; }
.df-sp-canvas[data-template='addison'] .df-sp-name { color: #ece6da; font-weight: 500; }
.df-sp-canvas[data-template='addison'] .df-sp-desc { color: rgba(236, 230, 218, 0.6); }
.df-sp-canvas[data-template='addison'] .df-sp-deal { background: transparent; border: 1px solid color-mix(in srgb, var(--df-accent, #e8b33c) 45%, transparent); color: var(--df-accent, #e8b33c); }
.df-sp-canvas[data-template='addison'] .df-sp-sale { color: var(--df-accent, #e8b33c); }
.df-sp-canvas[data-template='addison'] .df-sp-orig { color: rgba(236, 230, 218, 0.4); }
.df-sp-canvas[data-template='addison'] .df-sp-sched { color: var(--df-accent, #e8b33c); }
.df-sp-canvas[data-template='addison'] .df-sp-credit { color: rgba(236, 230, 218, 0.45); }

/* ---- NIGHTLIFE specials — black + gold (matches the Nightlife menu). 1:1 port of
   the [data-template='nightlife'] rules in src/dev/specials/specials.css. ---- */
.df-sp-canvas[data-template='nightlife'] { --df-gold: var(--df-accent, #f2aa45); background: radial-gradient(120% 70% at 12% 4%, color-mix(in srgb, var(--df-gold) 12%, transparent), transparent 32%), linear-gradient(150deg, #050505 0%, #0b0b0b 46%, #120a02 76%, #050505 100%); }
.df-sp-canvas[data-template='nightlife'] .df-sp-title { color: #ffffff; letter-spacing: 0.03em; }
.df-sp-canvas[data-template='nightlife'] .df-sp-subtitle { color: rgba(255, 255, 255, 0.6); }
.df-sp-canvas[data-template='nightlife'] .df-sp-card { background: radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--df-gold) 9%, transparent), transparent 42%), linear-gradient(150deg, #0b0b0b 0%, #111 48%, #080808 100%); border: 1px solid color-mix(in srgb, var(--df-gold) 42%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 55px color-mix(in srgb, var(--df-gold) 4%, transparent); }
.df-sp-canvas[data-template='nightlife'] .df-sp-clickable:hover { border-color: color-mix(in srgb, var(--df-gold) 75%, transparent); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 34px color-mix(in srgb, var(--df-gold) 20%, transparent); }
.df-sp-canvas[data-template='nightlife'] .df-sp-photo { background: #0a0a0a; }
.df-sp-canvas[data-template='nightlife'] .df-sp-name { color: #ffffff; font-weight: 700; letter-spacing: 0.03em; }
.df-sp-canvas[data-template='nightlife'] .df-sp-desc { color: rgba(255, 255, 255, 0.62); }
.df-sp-canvas[data-template='nightlife'] .df-sp-deal { background: var(--df-gold); border: 1px solid var(--df-gold); color: #050505; box-shadow: 0 0 18px color-mix(in srgb, var(--df-gold) 25%, transparent); }
.df-sp-canvas[data-template='nightlife'] .df-sp-sale { color: var(--df-gold); }
.df-sp-canvas[data-template='nightlife'] .df-sp-orig { color: rgba(255, 255, 255, 0.4); }
.df-sp-canvas[data-template='nightlife'] .df-sp-sched { color: var(--df-gold); }
.df-sp-canvas[data-template='nightlife'] .df-sp-tab { background: var(--df-gold); color: #050505; }
.df-sp-canvas[data-template='nightlife'] .df-sp-credit { color: rgba(255, 255, 255, 0.45); }

/* ---- empty state ---- */
.df-sp-empty { display: grid; place-items: center; gap: 0.25rem; max-width: 28rem; margin: 0.5rem auto; padding: 2.5rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid rgba(16, 32, 64, 0.08); text-align: center; }
.df-sp-empty-title { font-size: 15px; font-weight: 800; color: #10203f; }
.df-sp-empty-sub { font-size: 13px; color: #5b6b86; }

/* ---- BOARD template — no photos, bold list rows, deal on the right ---- */
.df-sp-canvas[data-template='board'] { background: #fbf8f1; }
.df-sp-canvas[data-template='board'] .df-sp-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0; max-width: 52rem; margin-inline: auto; }
.df-sp-canvas[data-template='board'] .df-sp-card { flex-direction: row; align-items: center; gap: 1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(16, 32, 64, 0.12); padding: 0; }
.df-sp-canvas[data-template='board'] .df-sp-photo { flex: 0 0 104px; width: 104px; aspect-ratio: 1; border-radius: 12px; margin: 1.3rem 0; }
/* the rows ARE the design on a printed board — row rhythm is the body padding (grid
 * gap is 0, a hairline rule separates rows), and the stack gap must beat the base
 * 0.35rem or the deal + description collapse onto the name. */
.df-sp-canvas[data-template='board'] .df-sp-body { gap: 0.6rem; padding: 1.5rem 0; }
@media (min-width: 680px) { .df-sp-canvas[data-template='board'] .df-sp-body { padding: 1.9rem 0; } }
/* name OVER deal — side-by-side only survives while both are short; a real headline
 * wrapped mid-name with the deal stranded beside it. */
.df-sp-canvas[data-template='board'] .df-sp-head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.df-sp-canvas[data-template='board'] .df-sp-name { font-size: 26px; }
@media (min-width: 680px) { .df-sp-canvas[data-template='board'] .df-sp-name { font-size: 32px; } }
.df-sp-canvas[data-template='board'] .df-sp-deal { background: transparent; padding: 0; font-size: 20px; }
@media (min-width: 680px) { .df-sp-canvas[data-template='board'] .df-sp-deal { font-size: 23px; } }
.df-sp-canvas[data-template='board'] .df-sp-desc { font-size: 15px; line-height: 1.65; }

/* ---- FISH HOUSE template — DARK board, cream cards, yellow day tabs, red prices, yellow schedule footers (the JoJo's board) ---- */
.df-sp-canvas[data-template='fishhouse'] { background: #17130f; color: #f4efe4; border-radius: 16px; padding: 1.75rem 1.4rem; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-title { color: #ffffff; font-style: italic; letter-spacing: 0.01em; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-subtitle { color: #cbb89b; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-credit { color: #7a6f5e; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-card { position: relative; background: #f4efe4; border: 0; border-radius: 16px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.65); overflow: hidden; padding-top: 2.1rem; text-align: center; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-tab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; background: #f6c343; color: #17130f; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.36rem 1.15rem; border-radius: 0 0 10px 10px; white-space: nowrap; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-photo { aspect-ratio: 4 / 3; margin: 0 0.85rem; border-radius: 12px; background: #e7ddca; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-body { align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 1.1rem; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-name { color: #17130f; text-transform: uppercase; font-weight: 900; font-size: 20px; line-height: 1.1; letter-spacing: 0.005em; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-deal { background: transparent; padding: 0; color: var(--df-accent, #d7282f); font-size: 33px; font-weight: 900; line-height: 1.0; letter-spacing: -0.015em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-price { justify-content: center; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-sale { color: var(--df-accent, #d7282f); font-size: 33px; font-weight: 900; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-orig { color: #a79b88; font-size: 18px; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-desc { color: #5a5148; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-sp-canvas[data-template='fishhouse'] .df-sp-foot { margin-top: auto; background: #f6c343; color: #17130f; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0.55rem 0.5rem; }

/* ---- FEATURED strip — the homepage [derbyflow_featured_specials] row: same themed cards, no header, packs up to ~5 across ---- */
.df-sp-featured { padding: 1.25rem; }
.df-sp-featured .df-sp-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 1rem; max-width: none !important; }

/* ---- FISH HOUSE FEATURED BOARD — the full "Today's Specials" homepage strip: hero (left) · cards (middle) · red Happy-Hour CTA (right) ---- */
.df-sp-featured.df-fsp-board { display: flex; align-items: stretch; gap: 0; padding: 0; background: #17130f; border-radius: 16px; overflow: hidden; }
.df-fsp-hero { flex: 0 0 clamp(210px, 27%, 400px); display: flex; flex-direction: column; justify-content: center; padding: clamp(1.4rem, 2.2cqi, 2.6rem); }
.df-fsp-eyebrow { color: var(--df-accent, #d7282f); font-weight: 800; font-size: clamp(11px, 1cqi, 15px); letter-spacing: 0.1em; text-transform: uppercase; }
.df-fsp-title { margin: 0.3rem 0 0.5rem; color: #ffffff; font-style: normal; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 5cqi, 86px); line-height: 0.9; letter-spacing: 0.005em; }
.df-fsp-title .df-fsp-accentword { display: block; color: #f6c343; }
.df-fsp-tag { color: #cbb89b; font-size: clamp(13px, 1.15cqi, 18px); line-height: 1.4; margin-bottom: clamp(0.9rem, 1.4cqi, 1.6rem); }
.df-fsp-viewall { align-self: flex-start; background: var(--df-accent, #d7282f); color: #fff; font-weight: 800; font-size: clamp(11px, 1cqi, 15px); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.65rem 1.15rem; border-radius: 7px; text-decoration: none; }
.df-fsp-board .df-sp-grid { flex: 1 1 auto; display: flex !important; justify-content: center; gap: 0.8rem; padding: 1.1rem 0.9rem; min-width: 0; }
.df-fsp-board .df-sp-card { flex: 0 1 300px; min-width: 220px; max-width: 320px; }
.df-fsp-board .df-sp-photo { aspect-ratio: auto; height: 168px; }
.df-fsp-board .df-sp-body { padding: 0.75rem 1rem 1rem; gap: 0.4rem; }
/* COUNT-AWARE: a lone / small set of cards would float with dead space, so let them GROW to fill the board and scale the type up (the reference look) */
/* a LONE special becomes a wide LANDSCAPE hero card (photo left · text right) so it runs longer, not taller, and the board stays a banner */
.df-fsp-board .df-sp-grid .df-sp-card:only-child { flex: 1 1 auto; min-width: 320px; max-width: 960px; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-name { font-size: clamp(22px, 2.4cqi, 36px); }
.df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-deal, .df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-sale { font-size: clamp(38px, 4.4cqi, 66px); -webkit-line-clamp: 3; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-desc { font-size: clamp(14px, 1.25cqi, 18px); -webkit-line-clamp: 3; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-tab { font-size: 15px; padding: 0.45rem 1.2rem; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child .df-sp-foot { font-size: 16px; padding: 0.8rem 0.6rem; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:has(.df-sp-photo) { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: 1fr auto; grid-template-areas: 'photo body' 'photo foot'; padding-top: 0; text-align: left; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:has(.df-sp-photo) .df-sp-photo { grid-area: photo; aspect-ratio: auto; width: 100%; min-width: 0; height: 100%; min-height: 250px; margin: 0; border-radius: 0; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:has(.df-sp-photo) .df-sp-body { grid-area: body; align-items: flex-start; justify-content: center; text-align: left; padding: 1.4rem 1.7rem; gap: 0.5rem; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:has(.df-sp-photo) .df-sp-foot { grid-area: foot; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:has(.df-sp-photo) .df-sp-tab { top: 0.9rem; left: 0.9rem; transform: none; border-radius: 8px; }
.df-fsp-board .df-sp-grid .df-sp-card:only-child:not(:has(.df-sp-photo)) { max-width: 620px; }
/* exactly TWO cards also get room to breathe + a size bump */
.df-fsp-board .df-sp-grid .df-sp-card:first-child:nth-last-child(2), .df-fsp-board .df-sp-grid .df-sp-card:first-child:nth-last-child(2) ~ .df-sp-card { flex: 1 1 0; max-width: 400px; }
.df-fsp-board .df-sp-grid .df-sp-card:first-child:nth-last-child(2) .df-sp-photo, .df-fsp-board .df-sp-grid .df-sp-card:first-child:nth-last-child(2) ~ .df-sp-card .df-sp-photo { height: 210px; }
.df-fsp-cta { flex: 0 0 clamp(140px, 16%, 230px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; text-align: center; padding: clamp(1.4rem, 2cqi, 2.2rem) 1rem; background: var(--df-accent, #d7282f); color: #ffffff; }
.df-fsp-clock { color: #f6c343; line-height: 0; }
.df-fsp-clock svg { width: clamp(40px, 3.6cqi, 58px); height: clamp(40px, 3.6cqi, 58px); }
.df-fsp-cta-title { font-style: normal; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 3cqi, 38px); line-height: 0.9; }
.df-fsp-cta-sched { font-size: clamp(11px, 1cqi, 15px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; }
.df-fsp-cta-sched span { display: block; }
.df-fsp-cta-btn { margin-top: 0.35rem; border: 1.5px solid #fff; color: #fff; font-weight: 800; font-size: clamp(10.5px, 0.9cqi, 14px); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.55rem 0.9rem; border-radius: 6px; text-decoration: none; }
@media (max-width: 780px) {
  .df-sp-featured.df-fsp-board { flex-direction: column; }
  .df-fsp-hero, .df-fsp-cta { flex-basis: auto; }
  .df-fsp-hero { align-items: flex-start; padding-bottom: 0.5rem; }
  .df-fsp-board .df-sp-grid { flex-wrap: wrap; }
  .df-fsp-board .df-sp-card { flex: 1 1 150px; }
}

/* ---- CLICK-TO-EXPAND — compact cards clamp their text; clicking opens the popup with the full description ---- */
.df-sp-clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.df-sp-clickable:hover { transform: translateY(-3px); }
.df-sp-canvas[data-template='fishhouse'] .df-sp-clickable:hover { box-shadow: 0 26px 46px -20px rgba(0, 0, 0, 0.72); }
.df-sp-clickable:focus-visible { outline: 3px solid var(--df-accent, #d7282f); outline-offset: 2px; }
/* a SCRIM — the page stays visible (dimmed + blurred) behind the card. Never paint
 * the brand background here; that turned the overlay into an opaque sheet. */
.df-sp-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(12, 9, 6, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: dfSpLbFade 0.16s ease; }
.df-sp-lightbox[hidden] { display: none; }
@keyframes dfSpLbFade { from { opacity: 0; } to { opacity: 1; } }
.df-sp-lightbox-card { position: relative; width: min(408px, 100%); max-height: 88vh; overflow: auto; background: #f4efe4; border-radius: 18px; box-shadow: 0 34px 90px -22px rgba(0, 0, 0, 0.85); animation: dfSpLbPop 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dfSpLbPop { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.df-sp-lightbox-x { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(23, 19, 15, 0.62); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.df-sp-lightbox-x:hover { background: rgba(23, 19, 15, 0.85); }
.df-sp-lightbox-photo { aspect-ratio: 16 / 10; background: #e7ddca; }
.df-sp-lightbox-photo[hidden] { display: none; }
.df-sp-lightbox-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-sp-lightbox-body { padding: 1.15rem 1.35rem 1.5rem; text-align: center; }
.df-sp-lightbox-tab { display: inline-block; margin-bottom: 0.65rem; background: #f6c343; color: #17130f; font-weight: 800; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.32rem 0.9rem; border-radius: 999px; }
.df-sp-lightbox-tab[hidden] { display: none; }
.df-sp-lightbox-name { color: #17130f; font-weight: 900; font-size: 21px; line-height: 1.12; }
.df-sp-lightbox-price { margin-top: 0.5rem; }
.df-sp-lightbox-price .df-sp-deal, .df-sp-lightbox-price .df-sp-sale { color: var(--df-accent, #d7282f); font-size: 26px; font-weight: 900; }
.df-sp-lightbox-price .df-sp-deal { background: transparent; padding: 0; white-space: normal; }
.df-sp-lightbox-price .df-sp-price { justify-content: center; }
.df-sp-lightbox-price .df-sp-orig { color: #a79b88; font-size: 17px; }
.df-sp-lightbox-desc { margin-top: 0.7rem; color: #5a5148; font-size: 13.5px; line-height: 1.5; }
.df-sp-lightbox-desc[hidden] { display: none; }
.df-sp-lightbox-sched { margin-top: 0.9rem; color: #17130f; font-weight: 800; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.df-sp-lightbox-sched[hidden] { display: none; }

/* ============================================================================
 * BLOG — posts + posts-index, keyed on [data-template]. Mirror of
 * src/dev/blog/blog.css (keep lock-step). Reads --df-accent / --df-heading /
 * --df-heading-weight off the .df-blog-canvas wrapper.
 * ========================================================================== */
.df-blog-canvas { color: #1a1a22; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.df-blog-canvas *, .df-blog-canvas *::before, .df-blog-canvas *::after { box-sizing: border-box; }
.df-blog-canvas img { max-width: 100%; display: block; }

.df-post { --df-measure: 720px; }
.df-post-hero { width: 100%; }
.df-post-hero img { width: 100%; max-height: 480px; object-fit: cover; }
.df-post-inner { max-width: var(--df-measure); margin: 0 auto; padding: 0 20px; }
.df-post-head { padding: 40px 0 8px; }
.df-post-kicker { font-family: var(--df-heading); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; color: var(--df-accent); margin: 0 0 14px; }
.df-post-title { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: clamp(30px, 5vw, 46px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: #14141b; }
.df-post[data-upper="1"] .df-post-title, .df-post[data-upper="1"] .df-post-body h2, .df-post[data-upper="1"] .df-post-body h3 { text-transform: uppercase; letter-spacing: 0.02em; }
.df-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; font-size: 13.5px; color: #6b7280; }
.df-post-byline { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #374151; }
.df-post-avatar { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.df-post-toc { margin: 30px 0 8px; padding: 16px 20px; border: 1px solid #ececf1; border-radius: 14px; background: #fafafb; }
.df-post-toc-title { font-family: var(--df-heading); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: #9096a1; margin: 0 0 10px; }
.df-post-toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.df-post-toc a { color: #374151; text-decoration: none; font-size: 14.5px; border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; transition: color 0.15s, border-color 0.15s; }
.df-post-toc a:hover { color: var(--df-accent); border-left-color: var(--df-accent); }
.df-post-body { font-size: 18px; line-height: 1.75; color: #2b2b33; margin-top: 26px; }
.df-post-body > *:first-child { margin-top: 0; }
.df-post-body p { margin: 0 0 1.15em; }
.df-post-body h2 { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin: 1.8em 0 0.5em; color: #17171f; scroll-margin-top: 80px; }
.df-post-body h3 { font-family: var(--df-heading); font-weight: 600; font-size: 20px; margin: 1.4em 0 0.4em; color: #17171f; }
.df-post-body a, .df-post-body a.df-post-link { color: var(--df-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; }
.df-post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--df-accent); font-family: var(--df-heading); font-size: clamp(20px, 2.6vw, 25px); line-height: 1.4; font-style: italic; color: #33333c; }
.df-post-body ul { padding-left: 1.3em; margin: 0 0 1.15em; }
.df-post-body li { margin: 0 0 0.5em; }
.df-post-body figure { margin: 1.8em 0; }
.df-post-body figure img { width: 100%; border-radius: 14px; }
.df-post-body figcaption { margin-top: 8px; font-size: 13px; color: #9096a1; text-align: center; }
.df-cta { display: inline-block; background: var(--df-accent); color: var(--df-on-accent); font-family: var(--df-heading); font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 999px; font-size: 15px; letter-spacing: 0.01em; transition: transform 0.12s, filter 0.12s; }
.df-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.df-cta-lg { padding: 14px 30px; font-size: 16px; }
.df-post-book { margin: 40px 0; text-align: center; }
.df-post-faq { margin: 44px 0 8px; border-top: 1px solid #ececf1; padding-top: 28px; }
.df-post-faq h2 { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: 24px; margin: 0 0 12px; }
.df-post-faq details { border-bottom: 1px solid #ececf1; padding: 14px 0; }
.df-post-faq summary { font-weight: 700; font-size: 16.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #22222b; }
.df-post-faq summary::-webkit-details-marker { display: none; }
.df-post-faq summary::after { content: "+"; color: var(--df-accent); font-size: 22px; font-weight: 400; line-height: 1; }
.df-post-faq details[open] summary::after { content: "\2013"; }
.df-post-faq details p { margin: 10px 0 2px; color: #4b5563; line-height: 1.65; font-size: 16px; }
.df-post-related { margin: 48px 0; padding: 28px 0 8px; border-top: 1px solid #ececf1; }
.df-post-related-title { font-family: var(--df-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; font-weight: 700; color: #9096a1; margin: 0 0 16px; }
.df-post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.df-post-related-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.df-post-related-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.df-post-related-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--df-accent); }
.df-post-related-name { font-family: var(--df-heading); font-weight: 600; font-size: 16px; line-height: 1.25; margin-top: 4px; color: #22222b; }
@media (max-width: 640px) { .df-post-related-grid { grid-template-columns: 1fr; gap: 22px; } }

.df-blog-index { max-width: 1080px; margin: 0 auto; padding: 40px 20px 60px; }
.df-blog-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.df-blog-logo { height: 46px; width: auto; margin: 0 auto 18px; object-fit: contain; }
.df-blog-h1 { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: clamp(32px, 5vw, 48px); line-height: 1.05; margin: 0; color: #14141b; }
.df-blog-index[data-upper="1"] .df-blog-h1, .df-blog-index[data-upper="1"] .df-blog-card-title { text-transform: uppercase; letter-spacing: 0.01em; }
.df-blog-sub { font-size: 17px; color: #6b7280; margin: 14px 0 0; line-height: 1.55; }
.df-blog-empty { text-align: center; color: #9096a1; padding: 40px 0; }
.df-blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ececf1; }
.df-blog-featured .df-blog-card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.df-blog-featured .df-blog-card-title { font-size: clamp(24px, 3.4vw, 34px); }
.df-blog-featured .df-blog-card-excerpt { font-size: 16px; -webkit-line-clamp: 3; }
@media (max-width: 760px) { .df-blog-featured { grid-template-columns: 1fr; gap: 18px; } }
.df-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
@media (max-width: 900px) { .df-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .df-blog-grid { grid-template-columns: 1fr; } }
.df-blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.df-blog-card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.df-blog-card-body { display: flex; flex-direction: column; padding-top: 14px; }
.df-blog-card-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--df-accent); }
.df-blog-card-title { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: 20px; line-height: 1.22; margin-top: 7px; color: #1a1a22; }
.df-blog-card-excerpt { font-size: 14.5px; color: #6b7280; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-blog-card-meta { font-size: 12.5px; color: #9096a1; margin-top: 10px; font-weight: 500; }

/* template variants */
.df-post[data-template="editorial"] { --df-measure: 700px; }
.df-post[data-template="editorial"] .df-post-head { text-align: center; padding-top: 52px; }
.df-post[data-template="editorial"] .df-post-meta { justify-content: center; }
.df-post[data-template="editorial"] .df-post-title { font-size: clamp(34px, 5.6vw, 52px); letter-spacing: -0.02em; }
.df-post[data-template="editorial"] .df-post-body > p:first-of-type::first-letter { font-family: var(--df-heading); font-size: 3.4em; line-height: 0.82; float: left; padding: 6px 10px 0 0; color: var(--df-accent); font-weight: 700; }
.df-blog-index[data-template="editorial"] .df-blog-card-title, .df-blog-index[data-template="classic"] .df-blog-card-title { font-size: 21px; }
.df-post[data-template="photo"] { --df-measure: 760px; }
.df-post[data-template="photo"] .df-post-hero img { max-height: 560px; }
.df-post[data-template="photo"] .df-post-head { padding-top: 34px; }
.df-post[data-template="photo"] .df-post-body { font-size: 18.5px; }
.df-post[data-template="photo"] .df-post-body figure img { border-radius: 18px; }
.df-post[data-template="minimal"] { --df-measure: 680px; }
.df-post[data-template="minimal"] .df-post-hero img { max-height: 400px; }
.df-post[data-template="minimal"] .df-post-kicker { color: #9096a1; }
.df-post[data-template="minimal"] .df-post-title { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.02em; }
.df-post[data-template="minimal"] .df-post-body { font-size: 17.5px; }
.df-post[data-template="minimal"] .df-post-body blockquote { font-style: normal; }
.df-post[data-template="classic"] { --df-measure: 700px; }
.df-post[data-template="classic"] .df-post-head { text-align: center; border-bottom: 1px solid #e6e6ee; padding-bottom: 22px; }
.df-post[data-template="classic"] .df-post-meta { justify-content: center; }
.df-post[data-template="classic"] .df-post-body h2 { text-align: center; }
.df-post[data-template="classic"] .df-post-kicker { color: #8a7a5c; }
/* menu-item page (df_dish) — price / dietary / order bar under the title */
.df-dish-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 22px; padding: 14px 0; border-top: 1px solid #ececf1; border-bottom: 1px solid #ececf1; }
.df-post[data-template="classic"] .df-dish-bar, .df-post[data-template="editorial"] .df-dish-bar { justify-content: center; }
.df-dish-price { font-family: var(--df-heading); font-weight: var(--df-heading-weight, 700); font-size: 26px; color: #14141b; }
.df-dish-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.df-dish-tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--df-accent); background: color-mix(in srgb, var(--df-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--df-accent) 26%, transparent); border-radius: 999px; padding: 4px 10px; }
.df-dish-order { margin-left: auto; }
.df-post[data-template="classic"] .df-dish-order, .df-post[data-template="editorial"] .df-dish-order { margin-left: 0; }
@media (max-width: 560px) { .df-dish-order { margin-left: 0; width: 100%; text-align: center; } }

/* SEO internal-link hub ([derbyflow_seo_links]) + FAQ block ([derbyflow_faq]) ------ */
.df-seolinks { margin: 2em 0; }
.df-seolinks-title { font-size: 1.5em; font-weight: 800; margin: 0 0 .6em; }
.df-seolinks-group { margin: 0 0 1.4em; }
.df-seolinks-grouptitle { font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--df-accent, #2d6bff); margin: 0 0 .5em; }
.df-seolinks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2em 1.5em; }
.df-seolinks-list a { display: block; padding: .35em 0; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.df-seolinks-list a:hover { color: var(--df-accent, #2d6bff); border-bottom-color: currentColor; }

.df-faq { margin: 2em 0; }
.df-faq-title { font-size: 1.5em; font-weight: 800; margin: 0 0 .8em; }
.df-faq-item { border-bottom: 1px solid #e6e6e6; }
.df-faq-q { cursor: pointer; font-weight: 700; padding: .8em 1.6em .8em 0; list-style: none; position: relative; }
.df-faq-q::-webkit-details-marker { display: none; }
.df-faq-q::after { content: "+"; position: absolute; right: .1em; top: .7em; font-weight: 400; opacity: .5; }
.df-faq-item[open] .df-faq-q::after { content: "\2013"; }
.df-faq-a { padding: 0 0 1em; opacity: .85; }

/* ===================================================================== *
 *  SMOKEHOUSE menu template — dark navy BBQ board (photo cards)          *
 *  Mirror of the [data-template='smokehouse'] rules in the app           *
 *  (src/dev/menu/menu.css) + derbyflow_menu_smokehouse(). Keep in sync.  *
 * ===================================================================== */
.df-menu-canvas[data-template='smokehouse'] {
  --df-salmon: var(--df-accent, #e18b92);
  --df-navy: #172740;
  --df-pad: clamp(1.15rem, 4vw, 3rem);
  --df-ink: #ffffff;
  --df-muted: rgba(255, 255, 255, 0.72);
  /* price color lives on .df-smoke-price with a static fallback (old browsers
     without color-mix would otherwise inherit white → invisible on the card) */
  position: relative;
  isolation: isolate;
  /* clip (not hidden) so the sticky category bar sticks to the viewport, not the
     canvas — overflow:hidden creates a scroll container and traps position:sticky */
  overflow: clip;
  border-radius: 16px;
  padding: 0 0 clamp(2rem, 5vw, 3.5rem);
  color: var(--df-ink);
  background-color: var(--df-navy);
  background-image: radial-gradient(130% 90% at 50% -12%, rgba(255, 255, 255, 0.06), transparent 42%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.df-menu-canvas[data-template='smokehouse'] .df-menu-pills { padding: clamp(1.25rem, 3.5vw, 2rem) var(--df-pad) 0; position: relative; z-index: 3; }
.df-menu-canvas[data-template='smokehouse'] .df-menu-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--df-ink);
  border: 1px solid color-mix(in srgb, var(--df-salmon) 60%, transparent);
  border-radius: 999px;
  letter-spacing: 0.1em;
  font-weight: 600;
  box-shadow: none;
}
.df-menu-canvas[data-template='smokehouse'] .df-menu-pill[data-active='true'],
.df-menu-canvas[data-template='smokehouse'] .df-menu-pill:hover {
  background: var(--df-salmon);
  color: var(--df-navy);
  border-color: var(--df-salmon);
  transform: none;
}
.df-menu-canvas[data-template='smokehouse'] .df-menu-blurb { color: var(--df-muted); padding: 1rem var(--df-pad) 0; position: relative; z-index: 3; }

.df-menu-canvas[data-template='smokehouse'] .df-smoke { position: relative; z-index: 2; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-nav {
  position: sticky;
  /* default 0; the embed can set --df-smoke-nav-top to a fixed site header's height */
  top: var(--df-smoke-nav-top, 0px);
  z-index: 20;
  background: var(--df-salmon);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navwrap { position: relative; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navrow {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  /* center categories when they fit; fall back to start (scrollable) when they overflow */
  justify-content: safe center;
  padding: 0 var(--df-pad);
  scrollbar-width: none;
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navrow::-webkit-scrollbar { display: none; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navlink {
  flex: 0 0 auto;
  padding: 1rem 1.45rem;
  color: var(--df-navy);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: 0.09em;
  white-space: nowrap;
  text-decoration: none;
  border-right: 1px solid rgba(23, 39, 64, 0.22);
  border-right: 1px solid color-mix(in srgb, var(--df-navy) 22%, transparent);
  transition: background 0.2s ease;
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navlink:first-child { border-left: 1px solid rgba(23, 39, 64, 0.22); border-left: 1px solid color-mix(in srgb, var(--df-navy) 22%, transparent); }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navlink:hover { background: color-mix(in srgb, var(--df-navy) 14%, var(--df-salmon)); }
/* ‹ › scroll arrows — shown only when the row overflows (data-l / data-r set by the inline script) */
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navbtn {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 48px; border: 0; padding: 0; cursor: pointer;
  background: var(--df-salmon); color: var(--df-navy);
  font: 700 27px/1 system-ui, sans-serif;
  display: none; align-items: center; justify-content: center;
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navbtn-l { left: 0; box-shadow: 12px 0 16px -6px rgba(0, 0, 0, 0.3); }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navbtn-r { right: 0; box-shadow: -12px 0 16px -6px rgba(0, 0, 0, 0.3); }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-nav[data-l='true'] .df-smoke-navbtn-l { display: flex; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-nav[data-r='true'] .df-smoke-navbtn-r { display: flex; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-navbtn:hover { background: color-mix(in srgb, var(--df-navy) 12%, var(--df-salmon)); }

.df-menu-canvas[data-template='smokehouse'] .df-smoke-cat { max-width: 1400px; margin: clamp(2.25rem, 5vw, 3.5rem) auto 0; padding: 0 var(--df-pad); scroll-margin-top: 68px; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-cat:first-of-type { margin-top: 0; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-cathead { display: flex; align-items: flex-end; gap: 0.9rem; margin-bottom: 0.55rem; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-catname {
  margin: 0;
  color: var(--df-salmon);
  font-size: clamp(1.95rem, 5.5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: 0.035em;
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-catnote {
  margin: 0 0 1.35rem;
  color: var(--df-muted);
  font-size: clamp(0.9rem, 1.5vw, 1.02rem);
  line-height: 1.55;
  max-width: 70ch;
}
/* fixed responsive columns (2 phone → 3 desktop) instead of auto-fill, so it never
   sprawls to 5-7 across on a wide screen or collapses to one long column. align-items
   :stretch gives every card in a row the SAME height — no ragged empty navy gaps when
   one dish has a long description; the leftover space sits inside the white card. */
/* mobile = ONE column (cards size to their content); 2-up tablet, 3-up desktop */
.df-menu-canvas[data-template='smokehouse'] .df-smoke-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.7rem, 1.8vw, 1.5rem); align-items: stretch; }
@media (min-width: 768px) { .df-menu-canvas[data-template='smokehouse'] .df-smoke-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 1024px) { .df-menu-canvas[data-template='smokehouse'] .df-smoke-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid var(--df-salmon);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}
.df-menu-canvas[data-template='smokehouse'] .df-smoke-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #efe6de; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-body { display: flex; flex-direction: column; gap: 0.42rem; flex: 1 1 auto; padding: 0.95rem 1.05rem 1.15rem; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-namerow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-name { margin: 0; color: var(--df-navy); font-size: clamp(1.05rem, 1.9vw, 1.22rem); line-height: 1.14; font-weight: 700; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-price { color: #b3686f; color: color-mix(in srgb, var(--df-salmon) 72%, #3d0f14); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.15rem); white-space: nowrap; }
.df-menu-canvas[data-template='smokehouse'] .df-smoke-desc { margin: 0; color: #4a5568; font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 640px) {
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-navlink { padding: 0.8rem 1rem; font-size: 0.9rem; letter-spacing: 0.05em; }
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-navbtn { width: 38px; font-size: 22px; }
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-catname { letter-spacing: 0.02em; }
  /* single-column phone cards are full-width, so let them breathe */
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-body { padding: 1rem 1.15rem 1.2rem; gap: 0.4rem; }
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-name { font-size: 1.2rem; line-height: 1.18; }
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-price { font-size: 1.15rem; }
  .df-menu-canvas[data-template='smokehouse'] .df-smoke-desc { font-size: 0.92rem; line-height: 1.5; }
}