.sf-root, .sf-root *, .sf-root *::before, .sf-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sf-root {
  font-family: var(--sf-body);
  color: var(--sf-text);
  background: var(--sf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky-footer shell: fill at least the viewport so a short page (reserve,
     confirmation, contact) never leaves the body's cream background showing as
     a blank strip beneath the footer. This was the "big white screen at the
     bottom" seen on tablets — taller viewports where the content fell short —
     while phones (shorter viewports, longer content) never revealed it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* The footer is pushed to the bottom of the shell; any slack above it is the
   storefront's own background, not a mismatched body colour. */
.sf-root > .sf-footer { margin-top: auto; }
.sf-root a { text-decoration: none; color: inherit; }
.sf-root img { max-width: 100%; display: block; }
.sf-root button { cursor: pointer; border: none; font-family: inherit; }
.sf-container { max-width: 1200px; margin: 0 auto; }

/* NAV */
.sf-nav { position: sticky; top: 0; z-index: 1000; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); padding: 0 24px; }
.sf-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 70px; }
.sf-logo { font-family: var(--sf-heading); font-size: 26px; font-weight: 800; color: var(--sf-primary); letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.sf-logo img { height: 44px; width: auto; max-width: min(180px, 42vw); border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.sf-nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.sf-nav-links a { font-size: 15px; font-weight: 500; color: var(--sf-text); transition: color .2s; }
.sf-nav-links a:hover, .sf-nav-links a.active { color: var(--sf-primary); font-weight: 600; }
.sf-cart-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-bg); transition: background .2s; }
.sf-cart-icon svg { width: 22px; height: 22px; stroke: var(--sf-text); fill: none; }
.sf-cart-badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; background: var(--sf-accent); color: var(--sf-on-accent, #fff); font-size: 11px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.sf-nav-call { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-bg); transition: background .2s; }
.sf-nav-call svg { width: 21px; height: 21px; stroke: var(--sf-primary); fill: none; }
.sf-nav-call:hover { background: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-bg)); }
/* Sign in / account control in the nav */
.sf-root .sf-signin { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--sf-primary); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 4px 14px color-mix(in srgb, var(--sf-primary) 26%, transparent); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.sf-root .sf-signin:hover { background: var(--sf-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--sf-primary) 32%, transparent); }
.sf-root .sf-signin:active { transform: translateY(0); }
.sf-account { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--sf-border); background: var(--sf-surface); font-size: 14px; font-weight: 600; color: var(--sf-text); transition: border-color .15s ease, box-shadow .15s ease; }
/* The account pill is a link inside the nav: dark-header designs colour every
   nav link white, which turned the name white on the pill's own light surface. */
.sf-root .sf-nav a.sf-account, .sf-root .sf-nav a.sf-account .sf-account-name { color: var(--sf-text) !important; }
.sf-account:hover { border-color: color-mix(in srgb, var(--sf-primary) 40%, var(--sf-border)); box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.sf-account-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--sf-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.sf-signin-sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
.sf-account.sf-mobile-only { padding: 0; border: none; background: none; }
/* The compact top-bar sign-in/account shows ONLY once the nav collapses to a
   burger — otherwise you get two sign-in buttons at once. The high-specificity
   .sf-root .sf-signin rule sets display:inline-flex, so a plain .sf-mobile-only
   display:none never won and the compact button leaked onto desktop. These
   selectors match that specificity (and come later) so the hide actually holds. */
.sf-mobile-only { display: none; }
.sf-root .sf-signin.sf-mobile-only,
.sf-root .sf-account.sf-mobile-only { display: none; }
@media (max-width: 1024px) {
  .sf-mobile-only { display: inline-flex; }
  .sf-root .sf-signin.sf-mobile-only,
  .sf-root .sf-account.sf-mobile-only { display: inline-flex; }
}
.sf-nav-actions { display: flex; align-items: center; gap: 6px; }
/* Always-visible tap-to-call on phones (hidden on desktop, which uses .sf-nav-call in the links). */
.sf-call-icon { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-bg); }
.sf-call-icon svg { width: 21px; height: 21px; stroke: var(--sf-primary); fill: none; }
.sf-burger { display: none; background: none; padding: 8px; flex-direction: column; gap: 5px; }
.sf-burger span { display: block; width: 24px; height: 2px; background: var(--sf-text); border-radius: 2px; transition: .25s; }
.sf-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sf-burger.open span:nth-child(2) { opacity: 0; }
.sf-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile drawer */
.sf-drawer { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sf-drawer.open { opacity: 1; pointer-events: auto; }
.sf-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 80%; max-width: 320px; background: var(--sf-surface); padding: 24px; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; gap: 6px; }
.sf-drawer.open .sf-drawer-panel { transform: translateX(0); }
.sf-drawer-panel a { padding: 14px 8px; font-size: 17px; font-weight: 600; color: var(--sf-text); border-bottom: 1px solid var(--sf-border); }
.sf-drawer-close { align-self: flex-end; font-size: 26px; color: var(--sf-text-light); background: none; margin-bottom: 8px; }

/* BUTTONS — scoped high enough to always beat ".sf-root a { color: inherit }" */
.sf-root .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sf-primary); color: var(--sf-on-primary, #fff) !important; padding: 15px 32px; border-radius: var(--sf-btn-radius); font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 26%, transparent); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.sf-root .sf-btn:hover { background: var(--sf-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--sf-primary) 32%, transparent); }
.sf-root .sf-btn:active { transform: translateY(0); }
.sf-root .sf-btn:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-root .sf-btn-accent { background: var(--sf-accent); color: var(--sf-on-accent, #fff) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-accent) 30%, transparent); }
.sf-root .sf-btn-accent:hover { background: color-mix(in srgb, var(--sf-accent) 82%, #000); }
.sf-root .sf-btn-sm { padding: 9px 18px; font-size: 13px; box-shadow: none; }
.sf-root .sf-btn-sm:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 24%, transparent); }
/* Outline / secondary button */
.sf-root .sf-btn-outline { background: transparent; color: var(--sf-primary) !important; border: 1.5px solid var(--sf-primary); box-shadow: none; }
.sf-root .sf-btn-outline:hover { background: var(--sf-primary); color: #fff !important; }

/* HERO — full-bleed store-type photo with overlaid content.
   The photo (var --sf-hero-photo) sits UNDER a brand-color scrim; background-
   color is the brand primary so a slow/failed photo degrades to brand color,
   never an empty/broken box. */
.sf-hero { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 96px 24px; color: #fff;
  background-color: var(--sf-primary);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--sf-primary-dark) 34%, transparent) 0%, color-mix(in srgb, var(--sf-primary) 30%, transparent) 42%, color-mix(in srgb, var(--sf-primary-dark) 82%, transparent) 100%),
    var(--sf-hero-photo, none);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.sf-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.sf-hero-logo { width: auto; max-width: min(220px, 70vw); height: 84px; border-radius: 18px; object-fit: contain; margin: 0 auto 22px; box-shadow: 0 10px 30px rgba(0,0,0,.3); background: #fff; padding: 6px; }
.sf-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 16px; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-hero h1 { font-family: var(--sf-heading); font-size: clamp(38px, 6vw, 62px); font-weight: 800; line-height: 1.03; margin-bottom: 18px; color: #fff; letter-spacing: -0.03em; text-shadow: 0 2px 26px rgba(0,0,0,.34); }
.sf-hero p { font-size: 19px; color: rgba(255,255,255,.92); margin: 0 auto 30px; max-width: 520px; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.sf-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; justify-content: center; }
.sf-hero-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 9px 15px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-hero-chip.open { color: #fff; border-color: rgba(134,239,172,.6); background: rgba(16,120,70,.5); }
@media (max-width: 768px) { .sf-hero { min-height: 440px; padding: 64px 20px; } .sf-section { padding: 48px 20px; } }
/* Hero variant: BAND — editorial, content bottom-left */
.sf-hero.v-band { align-items: flex-end; justify-content: flex-start; text-align: left; min-height: 620px; padding: 96px 56px 64px; }
.sf-hero.v-band .sf-hero-inner { margin: 0; max-width: 760px; }
.sf-hero.v-band .sf-hero-chips { justify-content: flex-start; }
.sf-hero.v-band .sf-hero-logo { margin: 0 0 22px; }
.sf-hero.v-band h1 { font-size: 66px; }
/* Hero variant: SPLIT — copy on bg (left) + photo panel (right) */
.sf-hero.v-split { display: block; min-height: 0; padding: 0; text-align: left; color: var(--sf-text); background: none; background-color: transparent; }
.sf-hero.v-split .sf-hero-split { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: stretch; padding: 72px 24px; min-height: 560px; }
.sf-hero.v-split .sf-hero-copy { align-self: center; }
.sf-hero-copy { text-align: left; }
.sf-hero-copy .sf-hero-eyebrow { color: var(--sf-accent); background: color-mix(in srgb, var(--sf-accent) 12%, transparent); border-color: color-mix(in srgb, var(--sf-accent) 30%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sf-hero-copy h1 { color: var(--sf-text); text-shadow: none; font-size: 52px; margin-bottom: 16px; }
.sf-hero-copy p { color: var(--sf-text-light); text-shadow: none; margin: 0 0 26px; max-width: 460px; }
.sf-hero-copy .sf-hero-chips { justify-content: flex-start; margin-top: 22px; }
.sf-hero-copy .sf-hero-chip { color: var(--sf-text); background: var(--sf-surface); border: 1px solid var(--sf-border); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sf-hero-copy .sf-hero-chip.open { color: #067647; border-color: #a7e3c6; background: #ecfdf3; }
.sf-hero-panel { min-height: 100%; border-radius: 24px; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 0 34px 80px color-mix(in srgb, var(--sf-primary) 26%, transparent); }
@media (max-width: 768px) { .sf-hero.v-split .sf-hero-split { grid-template-columns: 1fr; gap: 26px; padding: 40px 20px; min-height: 0; } .sf-hero-panel { min-height: 260px; aspect-ratio: 16/10; order: -1; } .sf-hero-copy h1 { font-size: 38px; } }

/* WELCOME paragraph (home) — owner-editable intro, clean and readable. */
.sf-welcome { max-width: 820px; padding: 0 24px; }
.sf-welcome-title { font-family: var(--sf-heading); font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 14px; color: var(--sf-text); }
.sf-welcome-text { font-size: 17px; line-height: 1.75; color: var(--sf-text-light); white-space: pre-line; }
@media (max-width: 768px) { .sf-welcome-text { font-size: 15.5px; } }

/* SECTIONS */
.sf-section { padding: 72px 24px; }
.sf-section.sf-section-tight { padding-top: 30px; padding-bottom: 30px; }
.sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-bg)); }
.sf-section-title { font-family: var(--sf-heading); font-size: clamp(27px, 3.6vw, 37px); font-weight: 800; text-align: center; margin-bottom: 12px; letter-spacing: -0.025em; line-height: 1.1; }
.sf-section-title::after { content: ''; display: block; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sf-accent), color-mix(in srgb, var(--sf-accent) 40%, transparent)); margin: 14px auto 0; }
.sf-section-sub { font-size: 16.5px; color: var(--sf-text-light); text-align: center; margin: 0 auto 40px; max-width: 580px; line-height: 1.6; }

/* ITEM CARDS (home popular) */
.sf-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Horizontal scroll row — Home "Specials" and "Popular" swipe left↔right on
   both the website and the mobile app (the app is a WebView of this page). Cards
   keep a fixed width and snap; the next card peeks in so it reads as scrollable. */
.sf-scroll-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sf-primary) 32%, transparent) transparent;
}
.sf-scroll-row > .sf-card { flex: 0 0 auto; width: 260px; scroll-snap-align: start; }
.sf-scroll-row > .sf-card:hover { transform: translateY(-4px); }
.sf-scroll-row::-webkit-scrollbar { height: 8px; }
.sf-scroll-row::-webkit-scrollbar-track { background: transparent; }
.sf-scroll-row::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sf-primary) 26%, transparent); border-radius: 999px; }
.sf-scroll-row::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--sf-primary) 48%, transparent); }
@media (max-width: 640px) {
  .sf-scroll-row > .sf-card { width: 76vw; max-width: 300px; }
}
.sf-card { background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 2px); overflow: hidden; box-shadow: 0 2px 10px rgba(16,24,40,.06); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; cursor: pointer; }
.sf-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16,24,40,.14); }
.sf-card-img { width: 100%; aspect-ratio: 4/3; position: relative; background:
  radial-gradient(80px 60px at 70% 30%, color-mix(in srgb, var(--sf-accent) 16%, transparent), transparent 70%),
  linear-gradient(135deg, color-mix(in srgb, var(--sf-primary) 9%, var(--sf-surface)), color-mix(in srgb, var(--sf-primary) 4%, var(--sf-surface)));
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-card-img span:not(.sf-special-tag) { font-size: 40px; font-weight: 800; color: var(--sf-primary); opacity: .34; font-family: var(--sf-heading); letter-spacing: .04em; }
/* Food-type emoji placeholder (item has no uploaded photo) */
.sf-root .sf-food { opacity: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); line-height: 1; }
.sf-card-img .sf-food { font-size: 66px; }
.sf-menu-item-img .sf-food { font-size: 46px; }
.sf-card-special .sf-card-img .sf-food { font-size: 58px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.sf-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.sf-card-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.sf-card-desc { font-size: 13px; color: var(--sf-text-light); margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-includes { font-size: 12.5px; font-weight: 600; color: var(--sf-primary); margin-bottom: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-price { font-size: 18px; font-weight: 700; color: var(--sf-primary); }
/* Special (deal) card */
.sf-card-special { border: 1px solid color-mix(in srgb, var(--sf-accent) 40%, var(--sf-border)); box-shadow: 0 8px 26px color-mix(in srgb, var(--sf-accent) 16%, transparent); }
.sf-card-special .sf-card-img { position: relative; aspect-ratio: 16/10; background:
  radial-gradient(120px 90px at 78% 22%, color-mix(in srgb, var(--sf-accent) 30%, transparent), transparent 70%),
  linear-gradient(135deg, color-mix(in srgb, var(--sf-primary) 88%, #000), var(--sf-primary)); }
.sf-card-special .sf-card-img span:not(.sf-special-tag) { color: #fff; opacity: .95; font-size: 46px; }
/* Specials sections (Family Specials, Lunch Specials…): a quiet sub-heading
   with a count, under the page's "Today's Specials" title. */
.sf-specials-group { margin: 0 0 34px; scroll-margin-top: 130px; }
.sf-specials-group:last-child { margin-bottom: 0; }
.sf-specials-sub {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--sf-border);
  font-family: var(--sf-heading); font-size: clamp(19px, 4.6vw, 24px); font-weight: 800;
  letter-spacing: -0.01em; color: var(--sf-text); line-height: 1.2;
}
.sf-specials-count { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--sf-text-light); }
.sf-special-tag { position: absolute; top: 10px; left: 10px; background: var(--sf-accent); color: var(--sf-on-accent, #fff); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* STEPS / VALUES */
.sf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; }
.sf-step-num { width: 54px; height: 54px; background: var(--sf-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto 18px; font-family: var(--sf-heading); }
.sf-step h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.sf-step p { font-size: 14px; color: var(--sf-text-light); }
.sf-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sf-value { text-align: center; padding: 32px 22px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); box-shadow: 0 1px 3px rgba(16,24,40,.05); transition: transform .18s ease, box-shadow .18s ease; }
.sf-value:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16,24,40,.09); }
.sf-value-ic { width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 25px; }
.sf-value h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.sf-value p { font-size: 14px; color: var(--sf-text-light); }

/* PROMO */
.sf-promo { background: var(--sf-primary); border-radius: 20px; padding: 46px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.sf-promo h3 { font-family: var(--sf-heading); font-size: 26px; color: #fff; margin-bottom: 8px; }
.sf-promo p { color: rgba(255,255,255,.82); font-size: 16px; }

/* CAPTURE CUSTOMERS — offers/updates signup */
.sf-offers { max-width: 900px; margin: 0 auto; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 20px; padding: 40px 44px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 40px; align-items: center; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.sf-offers .sf-section-title { text-align: left; margin-bottom: 8px; }
.sf-offers .sf-section-sub { text-align: left; margin: 0; }
.sf-offers-form { display: flex; flex-direction: column; gap: 12px; }
.sf-offers-input { width: 100%; padding: 13px 16px; font-size: 15px; border: 1px solid var(--sf-border); border-radius: var(--sf-btn-radius); background: var(--sf-bg); color: var(--sf-text); }
.sf-offers-input:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 18%, transparent); }
.sf-offers-form .sf-btn { width: 100%; text-align: center; border: none; cursor: pointer; }
.sf-offers-form .sf-btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-offers-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--sf-text-light); }
.sf-offers-consent input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--sf-primary); }
.sf-offers-error { color: #c0392b; font-size: 13px; margin: 0; }
.sf-offers-done { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sf-offers-done .sf-section-title, .sf-offers-done .sf-section-sub { text-align: center; }
.sf-offers-icon { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--sf-primary) 14%, transparent); color: var(--sf-primary); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
@media (max-width: 768px) { .sf-offers { grid-template-columns: 1fr; padding: 30px 22px; gap: 20px; } }

/* REVIEWS */
.sf-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-review { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 28px; box-shadow: 0 1px 3px rgba(16,24,40,.05); position: relative; }
.sf-review::before { content: '\201C'; position: absolute; top: 8px; right: 22px; font-family: var(--sf-heading); font-size: 64px; line-height: 1; color: color-mix(in srgb, var(--sf-primary) 14%, transparent); }
.sf-review-stars { color: var(--sf-accent); font-size: 17px; margin-bottom: 12px; letter-spacing: 2px; }
.sf-review-text { font-size: 15px; color: var(--sf-text-light); margin-bottom: 14px; line-height: 1.5; font-style: italic; }
.sf-review-author { font-size: 14px; font-weight: 600; }

/* CTA */
.sf-cta { text-align: center; background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg)); padding: 76px 24px; }
.sf-cta h2 { font-family: var(--sf-heading); font-size: 34px; margin-bottom: 14px; }
.sf-cta p { font-size: 16px; color: var(--sf-text-light); margin-bottom: 28px; }

/* PAGE HEADER (inner pages) — compact store-type image band with scrim */
.sf-page-header { position: relative; padding: 64px 24px; text-align: center; color: #fff; background-color: var(--sf-primary);
  background-image:
    linear-gradient(160deg, color-mix(in srgb, var(--sf-primary) 74%, transparent), color-mix(in srgb, var(--sf-primary-dark) 88%, transparent)),
    var(--sf-hero-photo, none);
  background-size: cover; background-position: center; }
.sf-page-header h1 { font-family: var(--sf-heading); font-size: 40px; font-weight: 800; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.sf-page-header p { font-size: 16px; color: rgba(255,255,255,.9); }

/* INFO BAR (menu page) — professional strip: open status, fulfilment, address. */
.sf-infobar { background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); }
.sf-infobar-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 24px; }
.sf-infobar-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--sf-text-light); }
.sf-infobar-link { color: var(--sf-primary); }
.sf-infobar-status { color: var(--sf-text); }
.sf-infobar .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.sf-infobar-status.open .sf-dot { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 20%, transparent); }
.sf-infobar-status.open { color: #067647; }
.sf-infobar-status.closed .sf-dot { background: #dc2626; }
@media (max-width: 768px) { .sf-infobar-inner { padding: 13px 16px; gap: 8px 16px; } .sf-infobar-item { font-size: 12.5px; } }

/* CATEGORY NAV (menu page) */
.sf-catnav { position: sticky; top: 70px; z-index: 900; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); padding: 0 24px; overflow-x: auto; }
.sf-catnav-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 8px; padding: 12px 0; }
.sf-cat { padding: 10px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-bg)); color: var(--sf-text); cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.sf-cat:hover { background: color-mix(in srgb, var(--sf-primary) 14%, var(--sf-bg)); }
.sf-cat.active { background: var(--sf-primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sf-primary) 30%, transparent); transform: translateY(-1px); }

/* MENU LIST */
.sf-menu-wrap { padding: 48px 24px; max-width: 1200px; margin: 0 auto; }
.sf-menu-cat { margin-bottom: 52px; scroll-margin-top: 130px; }
.sf-menu-cat h2 { font-family: var(--sf-heading); font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sf-menu-cat h2::before { content: ''; width: 4px; height: 26px; border-radius: 3px; background: var(--sf-accent); flex-shrink: 0; }
/* CATEGORY BANNER — a full-bleed dish photo under a theme-colour scrim: the
   name stays readable on the left, the photo shows through on the right. ONE
   layer (image + scrim + text), so nothing can break at any width. The colour
   is the restaurant's own primary; plain gradient when there is no photo. */
.sf-cat-banner {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(112px, 30vw, 168px); margin-bottom: 22px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(115deg, var(--sf-primary) 0%, color-mix(in srgb, #000 24%, var(--sf-primary)) 100%);
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--sf-primary) 75%, #000);
}
.sf-cat-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cat-banner-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--sf-primary) 4%, color-mix(in srgb, var(--sf-primary) 55%, transparent) 46%, transparent 82%),
    linear-gradient(0deg, color-mix(in srgb, #000 30%, transparent) 0%, transparent 60%);
}
.sf-cat-banner.is-plain .sf-cat-banner-scrim { background: none; }
.sf-cat-banner-copy {
  position: relative; z-index: 2; min-width: 0; max-width: 78%;
  padding: clamp(16px, 4vw, 24px);
}
.sf-cat-banner-kicker {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 6px;
}
.sf-menu-cat .sf-cat-banner-copy h2, .sf-menu-cat .sf-cat-banner-copy h3 {
  display: block; margin: 0; padding: 0; border: none; color: #fff;
  font-family: var(--sf-heading); font-size: clamp(23px, 6vw, 38px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.04;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.sf-menu-cat .sf-cat-banner-copy h2::before, .sf-menu-cat .sf-cat-banner-copy h3::before { display: none; }
/* Automatic deal on this category ("Buy 4, get 1 free"): a solid pill, legible
   on any photo, with the text written out (not colour alone). */
.sf-cat-banner-deal {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 6px 12px; border-radius: 999px; background: #fff; color: #14532d;
  font-size: 13px; font-weight: 800; line-height: 1.2; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* TIME-LIMITED MENUS (Breakfast 7–11 AM …): a section header per menu with its
   hours and a status that is written out, not colour alone. Outside the hours
   the dishes stay visible but muted, with no add button. */
.sf-menu-group { margin: 8px 0 52px; }
.sf-menu-group-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px;
  padding: 0 0 16px; margin-bottom: 22px; border-bottom: 2px solid color-mix(in srgb, var(--sf-primary) 22%, var(--sf-border));
  scroll-margin-top: 130px;
}
.sf-menu-group-titles { min-width: 0; }
.sf-menu-group-head h2 {
  font-family: var(--sf-heading); font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0; color: var(--sf-text);
}
.sf-menu-group-head p { margin: 6px 0 0; color: var(--sf-text-light); font-size: 15px; line-height: 1.45; }
.sf-menu-group-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sf-menu-group-hours {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-surface)); color: var(--sf-text);
  font-size: 13px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--sf-primary) 22%, transparent);
}
.sf-menu-group-status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.sf-menu-group-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-menu-group-status.is-on { background: #DCFCE7; color: #166534; }
.sf-menu-group-status.is-off { background: #F3F4F6; color: #374151; }
.sf-menu-item.is-unavailable { cursor: not-allowed; box-shadow: none; }
.sf-menu-item.is-unavailable:hover { transform: none; box-shadow: none; }
.sf-menu-item.is-unavailable .sf-menu-item-img, .sf-menu-item.is-unavailable .sf-menu-item-name,
.sf-menu-item.is-unavailable .sf-menu-item-desc, .sf-menu-item.is-unavailable .sf-price { opacity: .55; }
.sf-menu-item.is-unavailable .sf-menu-item-img img { filter: grayscale(.7); }
.sf-menu-item-bottom { flex-wrap: wrap; }
.sf-unavail-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 4px 9px; border-radius: 999px;
  background: #F3F4F6; color: #374151; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.sf-cat.is-later { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .sf-menu-item.is-unavailable { transition: none; } }
.sf-cat-banner-copy p {
  margin: 6px 0 0; padding: 0; color: rgba(255,255,255,.9);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.sf-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
/* Menu row: copy on the left, a rounded photo on the right with a
   floating circular add button overlapping its corner. */
.sf-menu-item { display: flex; gap: 18px; padding: 16px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 4px); box-shadow: 0 2px 6px rgba(16,24,40,.05); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; align-items: stretch; }
.sf-menu-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16,24,40,.13); border-color: color-mix(in srgb, var(--sf-primary) 30%, var(--sf-border)); }
.sf-menu-item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-menu-item-name { font-size: 16px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.01em; }
.sf-menu-item-desc { font-size: 13.5px; color: var(--sf-text-light); margin-bottom: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-menu-item-bottom { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.sf-menu-item-media { position: relative; flex-shrink: 0; }
.sf-menu-item-img { width: 128px; height: 128px; min-width: 128px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background:
  linear-gradient(135deg, color-mix(in srgb, var(--sf-primary) 10%, var(--sf-surface)), color-mix(in srgb, var(--sf-accent) 10%, var(--sf-surface))); }
.sf-menu-item-img img { width: 100%; height: 100%; object-fit: cover; }
/* A flower shop's product with no photo yet: a crop of the bundled bouquet
   illustration (a different part of it per product), never an empty box. */
.sf-root .sf-botanical { position: absolute; inset: 0; display: block; background: #F7E6E3 url("/florist-hero.svg") no-repeat; background-size: auto 230%; transition: transform .6s ease; }
.sf-root .sf-card-img.is-botanical, .sf-root .sf-menu-item-img.is-botanical { position: relative; overflow: hidden; }
.sf-root .sf-card-img .sf-botanical, .sf-root .sf-menu-item-img .sf-botanical { opacity: 1; }
.sf-root .sf-card:hover .sf-botanical, .sf-root .sf-menu-item:hover .sf-botanical { transform: scale(1.05); }
.sf-menu-item-img span { font-size: 24px; font-weight: 800; color: var(--sf-primary); opacity: .34; font-family: var(--sf-heading); }

/* Circular add button. 44px hit target. */
.sf-root .sf-add { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-surface); color: var(--sf-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(16,24,40,.24); border: 1px solid var(--sf-border); transition: transform .14s ease, background .14s ease, color .14s ease; z-index: 2; }
.sf-root .sf-add svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.sf-root .sf-add:hover { background: var(--sf-primary); color: #fff; transform: scale(1.08); }
.sf-root .sf-add:active { transform: scale(.96); }
.sf-root .sf-add:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
/* Floating variant on the big Popular/Special card images */
.sf-root .sf-add-float { right: 12px; bottom: 12px; width: 44px; height: 44px; }

/* ABOUT / CONTACT content */
.sf-content { max-width: 900px; margin: 0 auto; padding: 56px 24px; }
.sf-content-block { margin-bottom: 44px; }
.sf-content-block h2 { font-family: var(--sf-heading); font-size: 26px; font-weight: 700; margin-bottom: 14px; color: var(--sf-primary); }
.sf-content-block p { font-size: 15px; color: var(--sf-text-light); line-height: 1.7; }
.sf-hours-grid { display: grid; gap: 8px; max-width: 420px; }
.sf-hours-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sf-border); font-size: 15px; text-transform: capitalize; }
.sf-info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.sf-info-ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.sf-info-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.sf-info-item p { font-size: 14px; color: var(--sf-text-light); }
.sf-faq { border-bottom: 1px solid var(--sf-border); padding: 18px 0; }
.sf-faq h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.sf-faq p { font-size: 14px; color: var(--sf-text-light); }
.sf-socials { display: flex; gap: 12px; margin-top: 8px; }
.sf-social { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* FOOTER */
.sf-footer { background: var(--sf-primary); color: rgba(255,255,255,.82); padding: 44px 24px 24px; }
.sf-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 42px; }
.sf-footer-logo { font-family: var(--sf-heading); font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.sf-footer-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; }
.sf-footer-col h4 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.sf-footer-col ul { list-style: none; }
.sf-footer-col li { margin-bottom: 9px; font-size: 14px; }
.sf-footer-col a:hover { color: #fff; }
.sf-footer-bottom { max-width: 1200px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.55);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
/* Readable on every template's footer (it sits on the brand colour): the
   text colour that reads on that colour, never a tinted box behind it. */
.sf-footer-bottom .sf-powered-by { color: var(--sf-footer-fg, var(--sf-on-primary, #fff)) !important; background: none !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 5px; }
.sf-powered-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; display: inline-block; flex-shrink: 0; background: #fff; opacity: 1 !important; }
.sf-footer-bottom .sf-powered-by:hover { opacity: .85; }
.sf-footer-legal { display: inline-flex; align-items: center; gap: 8px; }
.sf-footer-legal a { color: rgba(255,255,255,.7); text-decoration: none; }
.sf-footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .sf-footer-bottom { justify-content: center; text-align: center; } }

/* ═══ MOBILE BOTTOM TAB BAR ═════════════════════════════════════════════════
   App-style navigation for phones. Hidden by default; the ≤768px block below
   turns it on and pads the page bottom so the footer clears it. */
.sf-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: color-mix(in srgb, var(--sf-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--sf-border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sf-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 7px;
  background: none; border: none; cursor: pointer;
  color: var(--sf-text-light);
  text-decoration: none;
  transition: color .18s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.sf-tab-ico { position: relative; display: block; width: 23px; height: 23px; }
.sf-tab-ico svg { width: 100%; height: 100%; display: block; }
.sf-tab-label { font-family: var(--sf-body); font-size: 10.5px; font-weight: 600; letter-spacing: .015em; line-height: 1; }
.sf-tab.active { color: var(--sf-primary); }
.sf-tab.active .sf-tab-label { font-weight: 700; }
/* Small indicator pill above the active tab */
.sf-tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sf-primary);
}
.sf-tab-badge {
  position: absolute; top: -5px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--sf-accent); color: var(--sf-on-accent, #fff);
  font-family: var(--sf-body); font-size: 9.5px; font-weight: 800; line-height: 17px;
  text-align: center; box-shadow: 0 0 0 2px var(--sf-surface);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .sf-items { grid-template-columns: repeat(2, 1fr); }
  .sf-values { grid-template-columns: repeat(2, 1fr); }
  .sf-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-footer-inner { grid-template-columns: 1fr 1fr; }
}
/* Nav collapses to a burger across the whole tablet range, not just phones —
   five links + a sign-in + a call + a cart crowd a portrait tablet, and with no
   burger there was no way to open them. The bottom tab bar stays phones-only. */
@media (max-width: 1024px) {
  .sf-burger { display: flex; }
  .sf-nav-links { display: none; }
  .sf-call-icon { display: inline-flex; }
}
@media (max-width: 768px) {
  .sf-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .sf-hero h1 { font-size: 38px; }
  .sf-hero-img { max-width: 100%; aspect-ratio: 4/3; order: -1; }
  .sf-items, .sf-values, .sf-reviews, .sf-steps, .sf-menu-grid { grid-template-columns: 1fr; }
  .sf-promo { flex-direction: column; text-align: center; }
  .sf-footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .sf-section, .sf-hero { padding-left: 16px; padding-right: 16px; }
  /* App-style bottom tabs take over navigation on phones. */
  .sf-tabbar { display: flex; }
  /* Keep the footer (and any fixed CTA) clear of the bar. */
  .sf-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══ MOBILE STRUCTURE — the bottom tab bar changes per template ════════════ */
@media (max-width: 768px) {
  /* TAB BAR — minimal: icon-only, slim */
  .sf-root[data-tabbar="minimal"] .sf-tab-label { display: none; }
  .sf-root[data-tabbar="minimal"] .sf-tab { padding: 13px 4px; }
  .sf-root[data-tabbar="minimal"] .sf-tab-ico { width: 25px; height: 25px; }
  .sf-root[data-tabbar="minimal"] .sf-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* TAB BAR — floating: a detached rounded bar lifted off the bottom edge */
  .sf-root[data-tabbar="floating"] .sf-tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--sf-border); border-radius: 22px; overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,.18); padding-bottom: 0;
  }
  .sf-root[data-tabbar="floating"] .sf-tab.active::before { border-radius: 0 0 3px 3px; }
  .sf-root[data-tabbar="floating"] .sf-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  /* TAB BAR — pill: the active tab gets a soft filled pill instead of a top line */
  .sf-root[data-tabbar="pill"] .sf-tab { margin: 8px 4px; border-radius: 14px; padding: 8px 4px; transition: background .18s ease; }
  .sf-root[data-tabbar="pill"] .sf-tab.active { background: color-mix(in srgb, var(--sf-primary) 13%, transparent); }
  .sf-root[data-tabbar="pill"] .sf-tab.active::before { display: none; }
}

/* ═══ TEMPLATE LAYOUT VARIANTS ═══════════════════════════════════════════════
   Data-attributes on .sf-root (set from the template tokens) turn each design
   into a structurally different layout, not just a recolor. */

/* MENU LAYOUT — list: full-width single-column rows with larger imagery */
.sf-root[data-menu-layout="list"] .sf-menu-grid { grid-template-columns: 1fr; gap: 14px; }
.sf-root[data-menu-layout="list"] .sf-menu-item { padding: 18px; }
.sf-root[data-menu-layout="list"] .sf-menu-item-img { width: 148px; height: 148px; min-width: 148px; }
.sf-root[data-menu-layout="list"] .sf-menu-item-name { font-size: 17px; }

/* MENU LAYOUT — magazine: 2 columns, photo on top, editorial cards */
.sf-root[data-menu-layout="magazine"] .sf-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.sf-root[data-menu-layout="magazine"] .sf-menu-item { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.sf-root[data-menu-layout="magazine"] .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-menu-layout="magazine"] .sf-menu-item-img { width: 100%; height: 210px; min-width: 0; border-radius: 0; }
.sf-root[data-menu-layout="magazine"] .sf-menu-item-details { padding: 16px 18px 18px; }
.sf-root[data-menu-layout="magazine"] .sf-menu-item-name { font-size: 18px; }
.sf-root[data-menu-layout="magazine"] .sf-add { right: 12px; bottom: 12px; }

/* MENU LAYOUT — compact: dense text columns, no photos (quick-scan) */
.sf-root[data-menu-layout="compact"] .sf-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-root[data-menu-layout="compact"] .sf-menu-item { padding: 14px 16px; }
.sf-root[data-menu-layout="compact"] .sf-menu-item-media { display: none; }
.sf-root[data-menu-layout="compact"] .sf-menu-item-desc { display: none; }

/* MENU LAYOUT — grid: image-forward tile cards (photo on top), like the app.
   Three columns on desktop; the photo leads, name/price sit below with the
   circular add button floating on the image corner. */
.sf-root[data-menu-layout="grid"] .sf-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-root[data-menu-layout="grid"] .sf-menu-item { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.sf-root[data-menu-layout="grid"] .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-menu-layout="grid"] .sf-menu-item-img { width: 100%; height: 168px; min-width: 0; border-radius: 0; }
.sf-root[data-menu-layout="grid"] .sf-menu-item-details { padding: 14px 16px 16px; }
.sf-root[data-menu-layout="grid"] .sf-menu-item-desc { margin-bottom: 10px; }
.sf-root[data-menu-layout="grid"] .sf-add { right: 12px; bottom: 12px; }

/* MENU LAYOUT — masonry: Pinterest-style columns of image-top cards with
   varied photo heights for a lively, editorial wall. */
.sf-root[data-menu-layout="masonry"] .sf-menu-grid { display: block; column-count: 3; column-gap: 22px; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item { display: flex; flex-direction: column; width: 100%; margin: 0 0 22px; padding: 0; overflow: hidden; gap: 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item-img { width: 100%; height: 190px; min-width: 0; border-radius: 0; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item:nth-child(3n+1) .sf-menu-item-img { height: 240px; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item:nth-child(3n+2) .sf-menu-item-img { height: 160px; }
.sf-root[data-menu-layout="masonry"] .sf-menu-item-details { padding: 14px 16px 16px; }
.sf-root[data-menu-layout="masonry"] .sf-add { right: 12px; bottom: 12px; }

/* MENU LAYOUT — carousel: horizontal scroll of image-top cards per category. */
.sf-root[data-menu-layout="carousel"] .sf-menu-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 4px 2px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sf-root[data-menu-layout="carousel"] .sf-menu-grid::-webkit-scrollbar { height: 8px; }
.sf-root[data-menu-layout="carousel"] .sf-menu-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sf-primary) 30%, var(--sf-border)); border-radius: 8px; }
.sf-root[data-menu-layout="carousel"] .sf-menu-item { flex: 0 0 258px; scroll-snap-align: start; flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.sf-root[data-menu-layout="carousel"] .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-menu-layout="carousel"] .sf-menu-item-img { width: 100%; height: 158px; min-width: 0; border-radius: 0; }
.sf-root[data-menu-layout="carousel"] .sf-menu-item-details { padding: 14px 16px 16px; }
.sf-root[data-menu-layout="carousel"] .sf-add { right: 12px; bottom: 12px; }

/* CARD STYLE — flat: no shadow/border, tinted hover */
.sf-root[data-cards="flat"] .sf-menu-item,
.sf-root[data-cards="flat"] .sf-card { box-shadow: none; border-color: transparent; }
.sf-root[data-cards="flat"] .sf-menu-item:hover,
.sf-root[data-cards="flat"] .sf-card:hover { box-shadow: none; transform: none; background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-surface)); }

/* CARD STYLE — bordered: crisp outline, no shadow, accent border on hover */
.sf-root[data-cards="bordered"] .sf-menu-item,
.sf-root[data-cards="bordered"] .sf-card { box-shadow: none; border-width: 1.5px; border-color: color-mix(in srgb, var(--sf-primary) 22%, var(--sf-border)); }
.sf-root[data-cards="bordered"] .sf-menu-item:hover,
.sf-root[data-cards="bordered"] .sf-card:hover { box-shadow: none; transform: none; border-color: var(--sf-primary); }

/* NAV STYLE — minimal: transparent, borderless top bar (original behavior).
   The header is intentionally the SAME clean bar across every template, the
   templates differ in hero, menu, footer and the bottom tab bar instead. */
.sf-root[data-nav="minimal"] .sf-nav { background: transparent; border-bottom: none; box-shadow: none; }

/* ─── FOOTER STYLES — the footer changes SHAPE, not just its colors ───────── */
/* centered: brand centered on top, the link columns in one tidy centered row */
.sf-root[data-footer="centered"] .sf-footer { text-align: center; }
.sf-root[data-footer="centered"] .sf-footer-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; }
.sf-root[data-footer="centered"] .sf-footer-brand { flex: 1 1 100%; max-width: 440px; margin: 0 auto; }
.sf-root[data-footer="centered"] .sf-footer-brand p { margin-left: auto; margin-right: auto; }
.sf-root[data-footer="centered"] .sf-socials { justify-content: center; }
.sf-root[data-footer="centered"] .sf-footer-col { flex: 0 0 auto; min-width: 110px; }
.sf-root[data-footer="centered"] .sf-footer-col h4 { margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .92; }
.sf-root[data-footer="centered"] .sf-footer-col ul { display: block; }
.sf-root[data-footer="centered"] .sf-footer-col li { margin: 0 0 8px; }
.sf-root[data-footer="centered"] .sf-footer-bottom { justify-content: center; }
/* Phones: stack the link columns into a compact centered block. */
@media (max-width: 560px) {
  .sf-root[data-footer="centered"] .sf-footer-inner { gap: 18px 28px; }
  .sf-root[data-footer="centered"] .sf-footer-col { min-width: 0; flex: 1 1 44%; }
}

/* compact: a lean flex row instead of four wide columns */
.sf-root[data-footer="compact"] .sf-footer { padding: 40px 24px 22px; }
.sf-root[data-footer="compact"] .sf-footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 52px; }
.sf-root[data-footer="compact"] .sf-footer-brand { flex: 1 1 240px; }
.sf-root[data-footer="compact"] .sf-footer-col { flex: 0 0 auto; }
.sf-root[data-footer="compact"] .sf-footer-logo { font-size: 20px; }
.sf-root[data-footer="compact"] .sf-footer-col h4 { margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }

/* bold: a strong accent rule across the top and an oversized brand mark */
.sf-root[data-footer="bold"] .sf-footer { border-top: 5px solid var(--sf-accent); }
.sf-root[data-footer="bold"] .sf-footer-logo { font-size: 30px; letter-spacing: .01em; }
.sf-root[data-footer="bold"] .sf-footer-brand p { font-size: 15px; }

/* Variants collapse to the responsive single-column on phones */
@media (max-width: 768px) {
  .sf-root[data-menu-layout="magazine"] .sf-menu-grid,
  .sf-root[data-menu-layout="compact"] .sf-menu-grid { grid-template-columns: 1fr; }
  .sf-root[data-menu-layout="compact"] .sf-menu-item-media { display: block; }
  .sf-root[data-menu-layout="compact"] .sf-menu-item-desc { display: -webkit-box; }
  /* image-forward grids drop to two tiles across; masonry to two columns */
  .sf-root[data-menu-layout="grid"] .sf-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sf-root[data-menu-layout="grid"] .sf-menu-item-img { height: 130px; }
  .sf-root[data-menu-layout="masonry"] .sf-menu-grid { column-count: 2; column-gap: 14px; }
  .sf-root[data-menu-layout="carousel"] .sf-menu-item { flex-basis: 78%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .sf-root[data-menu-layout="compact"] .sf-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-root[data-menu-layout="grid"] .sf-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-root[data-menu-layout="masonry"] .sf-menu-grid { column-count: 2; }
}

/* GET-THE-APP CTA (home) — a two-column band that adapts to each template via
   the identity blocks below. */
.sf-appcta { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface));
  border: 1px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 6px); padding: 26px 24px; }
.sf-appcta-copy { width: 100%; }
.sf-appcta .sf-section-title { text-align: center; margin-bottom: 6px; font-size: 24px; }
.sf-appcta .sf-section-title::after { display: none; }
.sf-appcta .sf-section-sub { text-align: center; margin: 0 auto; max-width: 440px; }
.sf-appcta > div:last-child { width: 100%; display: flex; justify-content: center; }
@media (max-width: 768px) {
  .sf-appcta { padding: 22px 18px; }
  .sf-appcta .sf-section-title { font-size: 21px; line-height: 1.15; }
  .sf-appcta .sf-section-sub { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PER-TEMPLATE IDENTITIES
   Each design gets a genuinely distinct personality, hero, section headers,
   nav, buttons, cards and decorative accents, so no two storefronts read the
   same. Driven by data-template on .sf-root (the template id).
   ═══════════════════════════════════════════════════════════════════════════ */



/* ── classic · CLASSIC (Hearth) — terracotta, gold, big Fraunces ───────────── */
.sf-root[data-template="classic"] .sf-nav { background: color-mix(in srgb, var(--sf-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sf-root[data-template="classic"] .sf-logo { font-family: var(--sf-heading); font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }
.sf-root[data-template="classic"] .sf-section-title { font-weight: 900; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.035em; line-height: 1.02; }
.sf-root[data-template="classic"] .sf-section-title::after { width: 56px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--sf-primary), var(--sf-accent)); }
.sf-root[data-template="classic"] .sf-section.alt { background: radial-gradient(900px 300px at 0% 0%, color-mix(in srgb, var(--sf-accent) 12%, transparent), transparent 70%), color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)); }
.sf-root[data-template="classic"] .sf-card { border-radius: 22px; overflow: hidden; border: none; box-shadow: 0 18px 40px -18px rgba(90,40,20,.35); }
.sf-root[data-template="classic"] .sf-card-img img { transition: transform .5s ease; }
.sf-root[data-template="classic"] .sf-card:hover .sf-card-img img { transform: scale(1.06); }
.sf-root[data-template="classic"] .sf-price { color: var(--sf-primary); font-weight: 800; }
.sf-root[data-template="classic"] .sfx-ticker { background: var(--sf-primary); }
.sf-root[data-template="classic"] .sfx-cta--accent { background: linear-gradient(120deg, var(--sf-primary-dark), var(--sf-primary) 55%, color-mix(in srgb, var(--sf-primary) 70%, var(--sf-accent))); }
.sf-root[data-template="classic"] .sf-footer { background: #1D110C; }
.sf-root[data-template="classic"] .sf-cat.active { background: var(--sf-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--sf-primary) 35%, transparent); }

/* ── template15 · EDITORIAL — a food magazine, black, cream and red ──────── */
.sf-root[data-template="template15-editorial"] .sf-nav { background: var(--sf-bg); box-shadow: none; border-bottom: 4px double var(--sf-text); }
.sf-root[data-template="template15-editorial"] .sf-logo { font-family: var(--sf-heading); font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: -0.02em; }
.sf-root[data-template="template15-editorial"] .sf-nav-links a { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.sf-root[data-template="template15-editorial"] .sf-section-title { text-align: left; font-weight: 900; font-style: italic; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.03em; padding-top: 16px; border-top: 4px solid var(--sf-text); }
.sf-root[data-template="template15-editorial"] .sf-section-title::after { display: none; }
.sf-root[data-template="template15-editorial"] .sf-section-sub { text-align: left; margin-left: 0; font-family: var(--sf-heading); font-style: italic; font-size: 19px; }
.sf-root[data-template="template15-editorial"] .sfx-eyebrow { text-align: left; color: var(--sf-accent); }
.sf-root[data-template="template15-editorial"] .sf-section.alt { background: #EFE9E0; }
.sf-root[data-template="template15-editorial"] .sf-card, .sf-root[data-template="template15-editorial"] .sf-menu-item { box-shadow: none; border-radius: 0; border: 0; border-top: 1px solid var(--sf-text); }
.sf-root[data-template="template15-editorial"] .sf-card-img img { filter: grayscale(.25) contrast(1.05); transition: filter .3s ease; }
.sf-root[data-template="template15-editorial"] .sf-card:hover .sf-card-img img { filter: none; }
.sf-root[data-template="template15-editorial"] .sf-price { font-family: var(--sf-heading); font-style: italic; font-weight: 900; color: var(--sf-accent); }
.sf-root[data-template="template15-editorial"] .sf-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.sf-root[data-template="template15-editorial"] .sf-btn:hover { background: var(--sf-accent); }
.sf-root[data-template="template15-editorial"] .sf-cat { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
.sf-root[data-template="template15-editorial"] .sf-cat.active { background: var(--sf-text); }
.sf-root[data-template="template15-editorial"] .sfx-ticker { background: var(--sf-text); font-style: italic; }
.sf-root[data-template="template15-editorial"] .sfx-cta--outline .sfx-cta__inner { border: 0; border-top: 4px solid var(--sf-text); border-radius: 0; }
.sf-root[data-template="template15-editorial"] .sf-footer { background: #0E0E0E; border-top: 6px solid var(--sf-accent); }

/* Coloured or dark header bars: the phone menu button reads in white. */
.sf-root[data-template="template22-corner-market"] .sf-burger span,
.sf-root[data-template="template25-smash-burger"] .sf-burger span,
.sf-root[data-template="template26-roastery"] .sf-burger span,
.sf-root[data-template="template28-taqueria"] .sf-burger span,
.sf-root[data-template="template29-smokehouse"] .sf-burger span,
.sf-root[data-template="template31-diner"] .sf-burger span,
.sf-root[data-template="template42-trompo"] .sf-burger span { background: #fff; }

/* ── template19 · PATISSERIE (Maison) — awning stripes, arches, raspberry ── */
.sf-root[data-template="template19-patisserie"] .sf-nav { background: var(--sf-surface); border-top: 6px solid transparent; border-image: repeating-linear-gradient(90deg, var(--sf-primary) 0 22px, #fff 22px 44px) 6; box-shadow: 0 6px 24px -14px rgba(80,20,40,.3); }
.sf-root[data-template="template19-patisserie"] .sf-logo { font-family: var(--sf-heading); font-style: italic; font-weight: 700; font-size: 28px; color: var(--sf-primary); }
.sf-root[data-template="template19-patisserie"] .sf-nav-links a { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.sf-root[data-template="template19-patisserie"] .sf-section-title { font-style: italic; font-weight: 700; font-size: clamp(38px, 5vw, 58px); color: var(--sf-primary); letter-spacing: -0.01em; }
.sf-root[data-template="template19-patisserie"] .sf-section-title::after { content: '✦'; width: auto; height: auto; background: none; color: var(--sf-accent); font-size: 14px; font-style: normal; margin-top: 10px; }
.sf-root[data-template="template19-patisserie"] .sf-section.alt { background: radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--sf-primary) 10%, transparent) 2px, transparent 2.5px) 0 0 / 24px 24px, color-mix(in srgb, var(--sf-primary) 7%, var(--sf-bg)); }
.sf-root[data-template="template19-patisserie"] .sf-card { border-radius: 24px; box-shadow: 0 16px 40px -20px rgba(80,20,40,.4); border: none; }
.sf-root[data-template="template19-patisserie"] .sf-card-img { border-radius: 999px 999px 0 0; margin: 10px 10px 0; overflow: hidden; }
.sf-root[data-template="template19-patisserie"] .sf-price { font-family: var(--sf-heading); font-style: italic; font-size: 20px; color: var(--sf-accent); }
.sf-root[data-template="template19-patisserie"] .sf-cat { border-radius: 999px; }
.sf-root[data-template="template19-patisserie"] .sfx-ticker { background: var(--sf-primary); font-style: italic; }
.sf-root[data-template="template19-patisserie"] .sf-footer { background: var(--sf-primary-dark); }

/* ── template20 · BAKEHOUSE (Crumb) — flour paper, stitched edges, stamps ── */
.sf-root[data-template="template20-bakehouse"] .sf-nav { background: var(--sf-bg); border-bottom: 2px dashed color-mix(in srgb, var(--sf-primary) 35%, transparent); }
.sf-root[data-template="template20-bakehouse"] .sf-logo { font-family: var(--sf-heading); font-size: 26px; color: var(--sf-primary); }
.sf-root[data-template="template20-bakehouse"] .sf-section-title { font-weight: 400; font-size: clamp(34px, 4.8vw, 54px); letter-spacing: -0.02em; }
.sf-root[data-template="template20-bakehouse"] .sf-section-title::after { width: 64px; height: 8px; border-radius: 0; background: radial-gradient(circle, var(--sf-accent) 3px, transparent 3.5px) 0 0 / 16px 8px repeat-x; }
.sf-root[data-template="template20-bakehouse"] .sf-section.alt { background: radial-gradient(rgba(122,69,22,.07) 1px, transparent 1.4px) 0 0 / 7px 7px, #F4E6CC; }
.sf-root[data-template="template20-bakehouse"] .sf-card, .sf-root[data-template="template20-bakehouse"] .sf-menu-item { border-radius: 20px; border: 2px solid color-mix(in srgb, var(--sf-primary) 16%, var(--sf-border)); box-shadow: none; }
.sf-root[data-template="template20-bakehouse"] .sf-price { display: inline-block; background: var(--sf-accent); color: #fff; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.sf-root[data-template="template20-bakehouse"] .sf-btn { box-shadow: 0 4px 0 var(--sf-primary-dark); }
.sf-root[data-template="template20-bakehouse"] .sf-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sf-primary-dark); }
.sf-root[data-template="template20-bakehouse"] .sfx-ticker { background: var(--sf-primary); }
.sf-root[data-template="template20-bakehouse"] .sfx-menu-board__panel { background: #2B1B0E; }
.sf-root[data-template="template20-bakehouse"] .sf-footer { background: #3A2410; border-top: 2px dashed rgba(255,255,255,.25); }

/* ── template22 · CORNER MARKET — green, tomato, highlighter, stickers ───── */
.sf-root[data-template="template22-corner-market"] .sf-nav { background: var(--sf-primary); border-bottom: none; }
.sf-root[data-template="template22-corner-market"] .sf-logo, .sf-root[data-template="template22-corner-market"] .sf-nav a, .sf-root[data-template="template22-corner-market"] .sf-nav button { color: #fff; }
.sf-root[data-template="template22-corner-market"] .sf-logo { font-family: var(--sf-heading); font-weight: 800; letter-spacing: -0.03em; font-size: 24px; }
.sf-root[data-template="template22-corner-market"] .sf-cart-icon, .sf-root[data-template="template22-corner-market"] .sf-nav-call, .sf-root[data-template="template22-corner-market"] .sf-call-icon { background: rgba(255,255,255,.18); }
.sf-root[data-template="template22-corner-market"] .sf-cart-icon svg, .sf-root[data-template="template22-corner-market"] .sf-nav-call svg, .sf-root[data-template="template22-corner-market"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template22-corner-market"] .sf-section-title { font-weight: 800; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.04em; text-decoration: underline; text-decoration-color: #F7D046; text-decoration-thickness: .32em; text-underline-offset: -.1em; text-decoration-skip-ink: none; }
.sf-root[data-template="template22-corner-market"] .sf-section-title::after { display: none; }
.sf-root[data-template="template22-corner-market"] .sf-section.alt { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sf-primary) 14%, transparent) 1px, transparent 0) 0 0 / 20px 20px, #EAF5E6; }
.sf-root[data-template="template22-corner-market"] .sf-card { border: 2px solid var(--sf-border); box-shadow: none; transition: transform .15s ease, border-color .15s ease; }
.sf-root[data-template="template22-corner-market"] .sf-card:hover { border-color: var(--sf-primary); transform: translateY(-3px); }
.sf-root[data-template="template22-corner-market"] .sf-price { display: inline-block; background: var(--sf-accent); color: #fff; padding: 3px 10px; border-radius: 8px; font-weight: 800; transform: rotate(-2deg); }
.sf-root[data-template="template22-corner-market"] .sf-cat { border-radius: 999px; font-weight: 700; }
.sf-root[data-template="template22-corner-market"] .sfx-ticker { background: #F7D046; color: #13261A; }
.sf-root[data-template="template22-corner-market"] .sfx-cta--accent { background: linear-gradient(120deg, var(--sf-primary-dark), var(--sf-primary)); }
.sf-root[data-template="template22-corner-market"] .sf-footer { background: #0F3D20; }

/* ── template25 · SMASH BURGER — mustard, ketchup, hard shadows ──────────── */
.sf-root[data-template="template25-smash-burger"] .sf-nav { background: #141414; border-bottom: 4px solid var(--sf-primary); }
.sf-root[data-template="template25-smash-burger"] .sf-logo { color: #FFC72C; font-family: var(--sf-heading); text-transform: uppercase; font-size: 24px; }
.sf-root[data-template="template25-smash-burger"] .sf-nav-links a { color: rgba(255,255,255,.85); text-transform: uppercase; font-weight: 700; letter-spacing: .06em; font-size: 13px; }
.sf-root[data-template="template25-smash-burger"] .sf-nav-links a:hover, .sf-root[data-template="template25-smash-burger"] .sf-nav-links a.active { color: #FFC72C; }
.sf-root[data-template="template25-smash-burger"] .sf-cart-icon, .sf-root[data-template="template25-smash-burger"] .sf-nav-call, .sf-root[data-template="template25-smash-burger"] .sf-call-icon { background: rgba(255,255,255,.12); }
.sf-root[data-template="template25-smash-burger"] .sf-cart-icon svg, .sf-root[data-template="template25-smash-burger"] .sf-nav-call svg, .sf-root[data-template="template25-smash-burger"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template25-smash-burger"] .sf-section-title, .sf-root[data-template="template25-smash-burger"] .sf-menu-cat h2 { font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5.2vw, 60px); letter-spacing: -0.01em; }
.sf-root[data-template="template25-smash-burger"] .sf-section-title::after { width: 90px; height: 10px; border-radius: 0; background: linear-gradient(-45deg, transparent 5px, var(--sf-primary) 0) 0 0 / 10px 10px repeat-x, linear-gradient(45deg, transparent 5px, var(--sf-primary) 0) 0 0 / 10px 10px repeat-x; }
.sf-root[data-template="template25-smash-burger"] .sf-section.alt { background: radial-gradient(rgba(0,0,0,.08) 1.2px, transparent 1.6px) 0 0 / 18px 18px, #FFC72C; }
.sf-root[data-template="template25-smash-burger"] .sf-card, .sf-root[data-template="template25-smash-burger"] .sf-menu-item { border: 3px solid #1A120E; border-radius: 20px; box-shadow: 6px 6px 0 #1A120E; }
.sf-root[data-template="template25-smash-burger"] .sf-card:hover, .sf-root[data-template="template25-smash-burger"] .sf-menu-item:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #1A120E; }
.sf-root[data-template="template25-smash-burger"] .sf-price { font-family: var(--sf-heading); font-size: 24px; font-weight: 400; color: var(--sf-primary); }
.sf-root[data-template="template25-smash-burger"] .sf-btn { border: 3px solid #1A120E; box-shadow: 4px 4px 0 #1A120E; text-transform: uppercase; font-weight: 800; }
.sf-root[data-template="template25-smash-burger"] .sf-cat { border: 2px solid #1A120E; font-weight: 800; }
.sf-root[data-template="template25-smash-burger"] .sf-cat.active { background: var(--sf-primary); box-shadow: 3px 3px 0 #1A120E; }
.sf-root[data-template="template25-smash-burger"] .sfx-ticker { background: #141414; color: #FFC72C; }
.sf-root[data-template="template25-smash-burger"] .sf-footer { background: #141414; border-top: 6px solid #FFC72C; }

/* ── template26 · ROASTERY — espresso dark, italic serif, copper ─────────── */
.sf-root[data-template="template26-roastery"] .sf-nav { background: #1B120C; border-bottom: 1px solid rgba(217,160,107,.3); }
.sf-root[data-template="template26-roastery"] .sf-logo { color: #F5EBDD; font-family: var(--sf-heading); font-style: italic; font-size: 26px; }
.sf-root[data-template="template26-roastery"] .sf-nav-links a { color: rgba(245,235,221,.78); }
.sf-root[data-template="template26-roastery"] .sf-nav-links a:hover, .sf-root[data-template="template26-roastery"] .sf-nav-links a.active { color: #D9A06B; }
.sf-root[data-template="template26-roastery"] .sf-cart-icon, .sf-root[data-template="template26-roastery"] .sf-nav-call, .sf-root[data-template="template26-roastery"] .sf-call-icon { background: rgba(245,235,221,.1); }
.sf-root[data-template="template26-roastery"] .sf-cart-icon svg, .sf-root[data-template="template26-roastery"] .sf-nav-call svg, .sf-root[data-template="template26-roastery"] .sf-call-icon svg { stroke: #F5EBDD; }
.sf-root[data-template="template26-roastery"] .sf-section-title { font-style: italic; font-weight: 400; font-size: clamp(36px, 5vw, 58px); }
.sf-root[data-template="template26-roastery"] .sf-section-title::after { width: 64px; height: 2px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template26-roastery"] .sf-section.alt { background: #1B120C; color: #F5EBDD; }
.sf-root[data-template="template26-roastery"] .sf-section.alt .sf-section-title { color: #fff; }
.sf-root[data-template="template26-roastery"] .sf-section.alt .sf-section-sub, .sf-root[data-template="template26-roastery"] .sf-section.alt .sfx-eyebrow { color: #D9A06B; }
.sf-root[data-template="template26-roastery"] .sf-section.alt .sf-btn-outline { color: #F5EBDD !important; border-color: rgba(245,235,221,.7); }
.sf-root[data-template="template26-roastery"] .sf-section.alt .sf-btn-outline:hover { background: #F5EBDD; color: #1B120C !important; }
.sf-root[data-template="template26-roastery"] .sf-card, .sf-root[data-template="template26-roastery"] .sf-menu-item { box-shadow: none; border: 1px solid color-mix(in srgb, var(--sf-accent) 30%, var(--sf-border)); border-radius: 16px; }
.sf-root[data-template="template26-roastery"] .sf-price { font-weight: 700; color: var(--sf-accent); font-variant-numeric: tabular-nums; }
.sf-root[data-template="template26-roastery"] .sf-cat.active { background: #1B120C; color: #F5EBDD; }
.sf-root[data-template="template26-roastery"] .sfx-ticker { background: #1B120C; color: #D9A06B; font-style: italic; }
.sf-root[data-template="template26-roastery"] .sf-footer { background: #120B07; border-top: 1px solid rgba(217,160,107,.35); }

/* ── template28 · TAQUERIA — teal, magenta, marigold, papel picado ───────── */
.sf-root[data-template="template28-taqueria"] .sf-nav { background: var(--sf-primary); border-bottom: none; }
.sf-root[data-template="template28-taqueria"] .sf-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none; background: linear-gradient(90deg, var(--sf-accent) 0 25%, #E8A317 25% 50%, #0EA5E9 50% 75%, #E4572E 75%) 0 0 / 160px 10px; clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); }
.sf-root[data-template="template28-taqueria"] .sf-logo { color: #fff; font-family: var(--sf-heading); font-size: 28px; }
.sf-root[data-template="template28-taqueria"] .sf-nav-links a { color: rgba(255,255,255,.88); }
.sf-root[data-template="template28-taqueria"] .sf-nav-links a:hover, .sf-root[data-template="template28-taqueria"] .sf-nav-links a.active { color: #fff; }
.sf-root[data-template="template28-taqueria"] .sf-cart-icon, .sf-root[data-template="template28-taqueria"] .sf-nav-call, .sf-root[data-template="template28-taqueria"] .sf-call-icon { background: rgba(255,255,255,.16); }
.sf-root[data-template="template28-taqueria"] .sf-cart-icon svg, .sf-root[data-template="template28-taqueria"] .sf-nav-call svg, .sf-root[data-template="template28-taqueria"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template28-taqueria"] .sf-section-title { font-weight: 400; font-size: clamp(36px, 5.4vw, 62px); color: var(--sf-primary); text-shadow: 3px 3px 0 #F8C95A; }
.sf-root[data-template="template28-taqueria"] .sf-section-title::after { width: 96px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sf-primary) 0 25%, #E8A317 25% 50%, var(--sf-accent) 50% 75%, #0EA5E9 75%); }
.sf-root[data-template="template28-taqueria"] .sf-section.alt { background: linear-gradient(180deg, color-mix(in srgb, #E8A317 16%, var(--sf-bg)), var(--sf-bg)); }
.sf-root[data-template="template28-taqueria"] .sf-card { border-radius: 22px; box-shadow: 0 16px 36px -18px rgba(14,110,92,.5); }
.sf-root[data-template="template28-taqueria"] .sf-card:nth-child(4n+1) { border-top: 6px solid var(--sf-accent); }
.sf-root[data-template="template28-taqueria"] .sf-card:nth-child(4n+2) { border-top: 6px solid #E8A317; }
.sf-root[data-template="template28-taqueria"] .sf-card:nth-child(4n+3) { border-top: 6px solid var(--sf-primary); }
.sf-root[data-template="template28-taqueria"] .sf-card:nth-child(4n+4) { border-top: 6px solid #0EA5E9; }
.sf-root[data-template="template28-taqueria"] .sf-price { color: var(--sf-accent); font-weight: 800; }
.sf-root[data-template="template28-taqueria"] .sf-btn { background: var(--sf-accent); }
.sf-root[data-template="template28-taqueria"] .sfx-ticker { background: var(--sf-accent); font-family: var(--sf-heading); }
.sf-root[data-template="template28-taqueria"] .sf-footer { background: var(--sf-primary-dark); }

/* ── template29 · SMOKEHOUSE — charcoal, ember orange, big Oswald caps ──── */
.sf-root[data-template="template29-smokehouse"] .sf-nav { background: #0C0A09; border-bottom: 3px solid var(--sf-accent); }
.sf-root[data-template="template29-smokehouse"] .sf-logo { color: #fff; font-family: var(--sf-heading); text-transform: uppercase; letter-spacing: .06em; font-size: 24px; }
.sf-root[data-template="template29-smokehouse"] .sf-nav-links a { color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-family: var(--sf-heading); }
.sf-root[data-template="template29-smokehouse"] .sf-nav-links a:hover, .sf-root[data-template="template29-smokehouse"] .sf-nav-links a.active { color: #FDBA74; }
.sf-root[data-template="template29-smokehouse"] .sf-cart-icon, .sf-root[data-template="template29-smokehouse"] .sf-nav-call, .sf-root[data-template="template29-smokehouse"] .sf-call-icon { background: rgba(255,255,255,.1); }
.sf-root[data-template="template29-smokehouse"] .sf-cart-icon svg, .sf-root[data-template="template29-smokehouse"] .sf-nav-call svg, .sf-root[data-template="template29-smokehouse"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template29-smokehouse"] .sf-section-title, .sf-root[data-template="template29-smokehouse"] .sf-menu-cat h2 { text-transform: uppercase; font-weight: 700; font-size: clamp(36px, 5.6vw, 66px); letter-spacing: -0.005em; line-height: 1; }
.sf-root[data-template="template29-smokehouse"] .sf-section-title::after { width: 72px; height: 4px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template29-smokehouse"] .sf-section.alt { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px), #1C1917; color: #F5F0EA; }
.sf-root[data-template="template29-smokehouse"] .sf-section.alt .sf-section-title { color: #fff; }
.sf-root[data-template="template29-smokehouse"] .sf-section.alt .sf-section-sub { color: #FDBA74; }
.sf-root[data-template="template29-smokehouse"] .sf-section.alt .sf-btn-outline { color: #fff !important; border-color: rgba(255,255,255,.7); }
.sf-root[data-template="template29-smokehouse"] .sf-section.alt .sf-btn-outline:hover { background: #fff; color: #1C1917 !important; }
.sf-root[data-template="template29-smokehouse"] .sf-card, .sf-root[data-template="template29-smokehouse"] .sf-menu-item { border-radius: 4px; border: 1px solid #1C1917; box-shadow: none; }
.sf-root[data-template="template29-smokehouse"] .sf-card-img img { filter: contrast(1.08) saturate(1.1); }
.sf-root[data-template="template29-smokehouse"] .sf-price { font-family: var(--sf-heading); font-weight: 700; font-size: 20px; color: var(--sf-accent); }
.sf-root[data-template="template29-smokehouse"] .sf-btn { background: var(--sf-accent); border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; }
.sf-root[data-template="template29-smokehouse"] .sf-cat { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--sf-heading); }
.sf-root[data-template="template29-smokehouse"] .sf-cat.active { background: #1C1917; }
.sf-root[data-template="template29-smokehouse"] .sfx-ticker { background: var(--sf-accent); font-family: var(--sf-heading); text-transform: uppercase; }
.sf-root[data-template="template29-smokehouse"] .sf-footer { background: #0C0A09; border-top: 4px solid var(--sf-accent); }

/* ── template30 · MEZZE — azure, terracotta, painted tiles, arches ───────── */
.sf-root[data-template="template30-mezze"] .sf-nav { background: var(--sf-surface); border-bottom: none; box-shadow: 0 1px 0 var(--sf-border); }
.sf-root[data-template="template30-mezze"] .sf-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; pointer-events: none; background: repeating-conic-gradient(from 45deg, var(--sf-primary) 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.sf-root[data-template="template30-mezze"] .sf-logo { font-family: var(--sf-heading); color: var(--sf-primary); font-size: 28px; letter-spacing: .02em; }
.sf-root[data-template="template30-mezze"] .sf-nav-links a { letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; font-weight: 700; }
.sf-root[data-template="template30-mezze"] .sf-section-title { font-weight: 400; font-size: clamp(38px, 5vw, 60px); color: var(--sf-primary); }
.sf-root[data-template="template30-mezze"] .sf-section-title::after { width: 60px; height: 12px; border-radius: 0; background: repeating-conic-gradient(from 45deg, var(--sf-accent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.sf-root[data-template="template30-mezze"] .sf-section.alt { background: radial-gradient(700px 300px at 50% 0%, color-mix(in srgb, var(--sf-primary) 12%, transparent), transparent 70%), #EEF3F9; }
.sf-root[data-template="template30-mezze"] .sf-card { border-radius: 20px; border: none; box-shadow: 0 16px 36px -18px rgba(29,78,137,.4); padding: 10px; }
.sf-root[data-template="template30-mezze"] .sf-card-img { border-radius: 999px 999px 12px 12px; overflow: hidden; }
.sf-root[data-template="template30-mezze"] .sf-price { color: var(--sf-accent); font-weight: 800; }
.sf-root[data-template="template30-mezze"] .sf-cat { border-radius: 999px; }
.sf-root[data-template="template30-mezze"] .sfx-ticker { background: var(--sf-primary); }
.sf-root[data-template="template30-mezze"] .sf-footer { background: var(--sf-primary-dark); border-top: 8px solid transparent; border-image: repeating-linear-gradient(90deg, var(--sf-accent) 0 16px, #fff 16px 32px) 8; }

/* ── template31 · DINER — cherry red, teal, checker floor, chrome ─────────── */
.sf-root[data-template="template31-diner"] .sf-nav { background: var(--sf-primary); border-bottom: none; }
.sf-root[data-template="template31-diner"] .sf-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; pointer-events: none; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.sf-root[data-template="template31-diner"] .sf-logo { color: #fff; font-family: var(--sf-heading); font-size: 28px; text-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.sf-root[data-template="template31-diner"] .sf-nav-links a { color: rgba(255,255,255,.9); font-weight: 700; }
.sf-root[data-template="template31-diner"] .sf-nav-links a:hover, .sf-root[data-template="template31-diner"] .sf-nav-links a.active { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.sf-root[data-template="template31-diner"] .sf-cart-icon, .sf-root[data-template="template31-diner"] .sf-nav-call, .sf-root[data-template="template31-diner"] .sf-call-icon { background: rgba(255,255,255,.18); }
.sf-root[data-template="template31-diner"] .sf-cart-icon svg, .sf-root[data-template="template31-diner"] .sf-nav-call svg, .sf-root[data-template="template31-diner"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template31-diner"] .sf-section-title { font-weight: 400; font-size: clamp(36px, 5vw, 58px); color: var(--sf-accent); }
.sf-root[data-template="template31-diner"] .sf-section-title::after { width: 90px; height: 10px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--sf-primary) 0 15px, #fff 15px 30px); box-shadow: 0 0 0 2px var(--sf-primary); }
.sf-root[data-template="template31-diner"] .sf-section.alt { background: #E3F4F1; border-top: 12px solid transparent; border-image: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 12; }
.sf-root[data-template="template31-diner"] .sf-card, .sf-root[data-template="template31-diner"] .sf-menu-item { border-radius: 22px; border: 3px solid #D9DEE2; box-shadow: inset 0 0 0 2px #fff, 0 14px 30px -16px rgba(0,0,0,.35); }
.sf-root[data-template="template31-diner"] .sf-price { display: inline-block; background: var(--sf-primary); color: #fff; padding: 3px 12px; border-radius: 999px; font-weight: 800; }
.sf-root[data-template="template31-diner"] .sf-btn { box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
.sf-root[data-template="template31-diner"] .sf-cat.active { background: var(--sf-accent); }
.sf-root[data-template="template31-diner"] .sfx-ticker { background: var(--sf-accent); font-family: var(--sf-heading); }
.sf-root[data-template="template31-diner"] .sf-footer { background: #0B2423; }

/* ── template32 · FRESH BOWL — violet, emerald, soft blobs, round ─────────── */
.sf-root[data-template="template32-bowl"] .sf-nav { background: color-mix(in srgb, var(--sf-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: none; }
.sf-root[data-template="template32-bowl"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; font-size: 26px; color: var(--sf-primary); }
.sf-root[data-template="template32-bowl"] .sf-section-title { font-weight: 700; font-size: clamp(36px, 5vw, 58px); letter-spacing: -0.02em; }
.sf-root[data-template="template32-bowl"] .sf-section-title::after { width: 72px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sf-primary), var(--sf-accent)); }
.sf-root[data-template="template32-bowl"] .sf-section.alt { background: radial-gradient(600px 300px at 10% 10%, color-mix(in srgb, var(--sf-primary) 14%, transparent), transparent 70%), radial-gradient(600px 300px at 90% 90%, color-mix(in srgb, var(--sf-accent) 14%, transparent), transparent 70%), var(--sf-bg); }
.sf-root[data-template="template32-bowl"] .sf-card, .sf-root[data-template="template32-bowl"] .sf-menu-item { border-radius: 26px; border: none; box-shadow: 0 20px 44px -22px rgba(80,40,160,.45); }
.sf-root[data-template="template32-bowl"] .sf-card-img img { transition: transform .5s ease; }
.sf-root[data-template="template32-bowl"] .sf-card:hover .sf-card-img img { transform: scale(1.07) rotate(-1deg); }
.sf-root[data-template="template32-bowl"] .sf-price { color: var(--sf-accent); font-weight: 800; font-size: 17px; }
.sf-root[data-template="template32-bowl"] .sf-btn:not(.sf-btn-outline) { background: linear-gradient(120deg, var(--sf-primary), color-mix(in srgb, var(--sf-primary) 60%, var(--sf-accent))); }
.sf-root[data-template="template32-bowl"] .sf-cat { border-radius: 999px; font-weight: 700; }
.sf-root[data-template="template32-bowl"] .sf-cat.active { background: linear-gradient(120deg, var(--sf-primary), var(--sf-accent)); }
.sf-root[data-template="template32-bowl"] .sfx-ticker { background: linear-gradient(90deg, var(--sf-primary), var(--sf-accent)); }
.sf-root[data-template="template32-bowl"] .sf-footer { background: #2A1459; }

/* ── template33 · BLOOM — florist: rose and sage on blush, arches, sprigs ── */
.sf-root[data-template="template33-bloom"] .sf-nav { background: color-mix(in srgb, var(--sf-bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template33-bloom"] .sf-logo { font-family: var(--sf-heading); font-weight: 400; font-size: 28px; color: var(--sf-primary); letter-spacing: .01em; }
.sf-root[data-template="template33-bloom"] .sf-nav-links a { font-weight: 600; letter-spacing: .04em; }
.sf-root[data-template="template33-bloom"] .sf-section-title { font-weight: 400; font-size: clamp(36px, 5vw, 58px); color: var(--sf-primary); }
.sf-root[data-template="template33-bloom"] .sf-section-title::after { width: 84px; height: 14px; border-radius: 0; background: radial-gradient(circle at 7px 7px, var(--sf-accent) 3px, transparent 3.5px) 0 0 / 14px 14px repeat-x; opacity: .8; }
.sf-root[data-template="template33-bloom"] .sf-section.alt { background: radial-gradient(700px 320px at 85% 0%, color-mix(in srgb, var(--sf-primary) 10%, transparent), transparent 70%), radial-gradient(600px 300px at 0% 100%, color-mix(in srgb, var(--sf-accent) 10%, transparent), transparent 70%), #FDEFEF; }
.sf-root[data-template="template33-bloom"] .sf-card, .sf-root[data-template="template33-bloom"] .sf-menu-item { border-radius: 22px; border: none; box-shadow: 0 18px 40px -22px rgba(122,45,69,.45); }
.sf-root[data-template="template33-bloom"] .sf-card-img { border-radius: 999px 999px 16px 16px; overflow: hidden; }
.sf-root[data-template="template33-bloom"] .sf-card-img img { transition: transform .6s ease; }
.sf-root[data-template="template33-bloom"] .sf-card:hover .sf-card-img img { transform: scale(1.06); }
.sf-root[data-template="template33-bloom"] .sf-price { color: var(--sf-primary); font-weight: 800; }
.sf-root[data-template="template33-bloom"] .sf-cat { border-radius: 999px; font-weight: 600; }
.sf-root[data-template="template33-bloom"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template33-bloom"] .sfx-ticker { background: var(--sf-accent); }
.sf-root[data-template="template33-bloom"] .sf-footer { background: #4A1E2C; }
/* Bloom · the Shop page is a product grid: tall arched photos, the name in
   the display face, the price beneath. Bouquets are bought by eye. */
.sf-root[data-template="template33-bloom"] .sf-section-title::after { margin: 16px auto 22px; }
.sf-root[data-template="template33-bloom"] .sf-menu-grid, .sf-root[data-template="template33-bloom"] .sf-menu-wrap.has-index .sf-menu-grid { display: grid; column-count: initial; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 26px 22px; }
.sf-root[data-template="template33-bloom"] .sf-menu-grid .sf-menu-item { margin: 0; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) { flex-direction: column; gap: 0; padding: 10px 10px 16px; border: none; border-radius: 26px; background: var(--sf-surface); box-shadow: 0 22px 46px -30px rgba(122,45,69,.55); }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo):hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(122,45,69,.6); }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-img { width: 100%; height: auto; min-width: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-details { padding: 16px 8px 0; text-align: center; align-items: center; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-name { font-family: var(--sf-heading); font-weight: 400; font-size: 20px; line-height: 1.2; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-desc { margin-bottom: 10px; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-bottom { justify-content: center; }
.sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-price { font-size: 17px; }
.sf-root[data-template="template33-bloom"] .sf-menu-item .sf-add { right: 14px; bottom: 14px; background: var(--sf-primary); color: #fff; border-color: transparent; }
.sf-root[data-template="template33-bloom"] .sf-card .sf-add { background: var(--sf-primary); color: #fff; border-color: transparent; }
.sf-root[data-template="template33-bloom"] .sf-card-img.is-botanical { aspect-ratio: 4 / 4.4; }
.sf-root[data-template="template33-bloom"] .sf-card-name { font-family: var(--sf-heading); font-weight: 400; font-size: 20px; }

/* ── template34 · ATELIER — florist studio: green and terracotta on paper ── */
.sf-root[data-template="template34-atelier"] .sf-nav { background: var(--sf-bg); border-bottom: 2px solid var(--sf-text); }
.sf-root[data-template="template34-atelier"] .sf-logo { font-family: var(--sf-heading); font-style: italic; font-weight: 400; font-size: 28px; color: var(--sf-text); }
.sf-root[data-template="template34-atelier"] .sf-nav-links a { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.sf-root[data-template="template34-atelier"] .sf-section-title { font-weight: 400; font-size: clamp(38px, 5.4vw, 66px); letter-spacing: -0.02em; }
.sf-root[data-template="template34-atelier"] .sf-section-title::after { width: 100%; max-width: 120px; height: 2px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template34-atelier"] .sf-section.alt { background: #EFE9DC; border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template34-atelier"] .sf-card, .sf-root[data-template="template34-atelier"] .sf-menu-item { border-radius: 2px; border: 1px solid var(--sf-border); box-shadow: none; background: var(--sf-surface); }
.sf-root[data-template="template34-atelier"] .sf-card:hover { box-shadow: 0 22px 44px -26px rgba(20,51,39,.5); }
.sf-root[data-template="template34-atelier"] .sf-card-img img { filter: saturate(.96) contrast(1.02); }
.sf-root[data-template="template34-atelier"] .sf-price { color: var(--sf-accent); font-weight: 800; letter-spacing: .02em; }
.sf-root[data-template="template34-atelier"] .sf-cat { border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 800; }
.sf-root[data-template="template34-atelier"] .sf-cat.active { background: var(--sf-text); color: #fff; }
.sf-root[data-template="template34-atelier"] .sfx-ticker { background: var(--sf-primary); font-family: var(--sf-heading); font-style: italic; }
.sf-root[data-template="template34-atelier"] .sf-footer { background: var(--sf-primary-dark); }
/* Atelier · the Shop page reads like a printed catalogue: square-cornered
   portrait plates, the name in the serif, a hairline, the price in terracotta. */
.sf-root[data-template="template34-atelier"] .sf-menu-grid, .sf-root[data-template="template34-atelier"] .sf-menu-wrap.has-index .sf-menu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 34px 26px; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) { flex-direction: column; gap: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo):hover { transform: none; box-shadow: none; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-media { order: -1; width: 100%; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-img { width: 100%; height: auto; min-width: 0; aspect-ratio: 4 / 5; border-radius: 2px; border: 1px solid var(--sf-border); }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-details { padding: 14px 0 0; border-top: 0; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-name { font-family: var(--sf-heading); font-weight: 400; font-size: 21px; line-height: 1.2; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-desc { margin-bottom: 8px; }
.sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo):hover .sf-menu-item-name { color: var(--sf-primary); }
.sf-root[data-template="template34-atelier"] .sf-menu-item .sf-add, .sf-root[data-template="template34-atelier"] .sf-card .sf-add { border-radius: 2px; background: var(--sf-primary); color: #fff; border-color: transparent; }
.sf-root[data-template="template34-atelier"] .sf-card-img.is-botanical { aspect-ratio: 4 / 5; }
.sf-root[data-template="template34-atelier"] .sf-card-name { font-family: var(--sf-heading); font-weight: 400; font-size: 20px; }
/* ── template43 · STACK 3D — dark cinematic hero, poster caps ────────────────
   Its darks and accents are mixed from the website's own colours, so they
   change when the owner changes the brand colour. */
.sf-root[data-template="template43-stack3d"] { --t43-ink: color-mix(in srgb, var(--sf-primary) 10%, #0B0908); --t43-hi: color-mix(in srgb, var(--sf-primary) 42%, #FFFFFF); }
.sf-root[data-template="template43-stack3d"] .sf-nav { background: var(--t43-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.sf-root[data-template="template43-stack3d"] .sf-logo { font-family: var(--sf-heading); text-transform: uppercase; letter-spacing: .03em; font-size: 26px; color: #fff; }
.sf-root[data-template="template43-stack3d"] .sf-nav-links a { color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 800; }
.sf-root[data-template="template43-stack3d"] .sf-nav-links a:hover, .sf-root[data-template="template43-stack3d"] .sf-nav-links a.active { color: var(--t43-hi); }
.sf-root[data-template="template43-stack3d"] .sf-nav .sf-burger span { background: #fff; }
.sf-root[data-template="template43-stack3d"] .sf-nav .sf-cart-icon, .sf-root[data-template="template43-stack3d"] .sf-nav .sf-nav-call { background: rgba(255,255,255,.1); color: #fff; }
.sf-root[data-template="template43-stack3d"] .sf-section-title { font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(38px, 5.6vw, 72px); line-height: .95; }
.sf-root[data-template="template43-stack3d"] .sf-section-title::after { width: 56px; height: 5px; border-radius: 0; background: var(--sf-primary); }
.sf-root[data-template="template43-stack3d"] .sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-bg)); }
.sf-root[data-template="template43-stack3d"] .sf-card { border-radius: 10px; border: none; box-shadow: 0 22px 44px -28px rgba(0,0,0,.55); }
.sf-root[data-template="template43-stack3d"] .sf-card-name { font-family: var(--sf-heading); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 20px; }
.sf-root[data-template="template43-stack3d"] .sf-price { color: var(--sf-primary); font-weight: 800; }
.sf-root[data-template="template43-stack3d"] .sf-btn:not(.sf-btn-outline) { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.sf-root[data-template="template43-stack3d"] .sf-cat.active { background: var(--sf-primary); color: var(--sf-on-primary, #fff); }
.sf-root[data-template="template43-stack3d"] .sfx-ticker { background: var(--t43-ink); color: var(--t43-hi); font-family: var(--sf-heading); text-transform: uppercase; letter-spacing: .06em; }
.sf-root[data-template="template43-stack3d"] .sf-footer { background: var(--t43-ink); }
.sf-root[data-template="template43-stack3d"] .sfx-cta--dark { background: radial-gradient(900px 420px at 80% 0%, color-mix(in srgb, var(--sf-primary) 26%, var(--t43-ink)) 0%, var(--t43-ink) 70%); }

/* ── template44 · STUDIO 3D — bright product page, rounded, brand-tinted ───── */
.sf-root[data-template="template44-studio3d"] .sf-nav { background: color-mix(in srgb, var(--sf-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template44-studio3d"] .sf-logo { font-family: var(--sf-heading); font-weight: 800; letter-spacing: -0.03em; font-size: 24px; color: var(--sf-text); }
.sf-root[data-template="template44-studio3d"] .sf-section-title { font-weight: 700; letter-spacing: -0.04em; font-size: clamp(34px, 4.8vw, 60px); }
.sf-root[data-template="template44-studio3d"] .sf-section-title::after { width: 40px; height: 4px; border-radius: 999px; background: var(--sf-primary); }
.sf-root[data-template="template44-studio3d"] .sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 4%, #FFFFFF); }
.sf-root[data-template="template44-studio3d"] .sf-card, .sf-root[data-template="template44-studio3d"] .sf-menu-item { border-radius: 18px; border: 1px solid var(--sf-border); box-shadow: none; transition: transform .25s ease, box-shadow .25s ease; }
.sf-root[data-template="template44-studio3d"] .sf-card:hover, .sf-root[data-template="template44-studio3d"] .sf-menu-item:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(24,24,27,.4); }
.sf-root[data-template="template44-studio3d"] .sf-card-name { font-family: var(--sf-heading); font-weight: 700; letter-spacing: -0.02em; }
.sf-root[data-template="template44-studio3d"] .sf-price { color: var(--sf-primary); font-weight: 800; }
.sf-root[data-template="template44-studio3d"] .sf-cat.active { background: var(--sf-primary); color: var(--sf-on-primary, #fff); }
.sf-root[data-template="template44-studio3d"] .sfx-ticker { background: var(--sf-primary); color: var(--sf-on-primary, #fff); }
.sf-root[data-template="template44-studio3d"] .sf-footer { background: color-mix(in srgb, var(--sf-primary) 14%, #141416); }

/* Both florist designs: the rating line sits under the title ornament, not on it. */
.sf-root[data-template="template33-bloom"] .sfx-rating, .sf-root[data-template="template34-atelier"] .sfx-rating { margin-top: 0; }
/* Occasion tiles without a photo: a soft card with the flower in a medallion
   and the name beneath, rather than an emoji under a dark film. */
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji), .sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1 / 1; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji) { background: linear-gradient(180deg, #FCEDEE, #F7E2E4); border-radius: 26px; }
.sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji) { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 2px; }
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji):hover, .sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji):hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--sf-primary) 60%, transparent); }
.sf-root[data-template="template33-bloom"] .sfx-cat .sfx-cat__emoji, .sf-root[data-template="template34-atelier"] .sfx-cat .sfx-cat__emoji { width: min(46%, 92px); height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff; font-size: clamp(30px, 4vw, 44px); line-height: 1; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--sf-primary) 50%, transparent); }
.sf-root[data-template="template34-atelier"] .sfx-cat .sfx-cat__emoji { background: color-mix(in srgb, var(--sf-primary) 6%, #fff); box-shadow: none; border: 1px solid var(--sf-border); }
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy, .sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy { position: static; padding: 0 10px; background: none; color: var(--sf-text); }
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy strong { color: var(--sf-primary); font-weight: 400; font-size: 19px; }
.sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy strong { font-weight: 400; font-size: 20px; }
.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy em, .sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji) .sfx-cat__copy em { color: var(--sf-text-light); opacity: 1; }
/* Both florist designs on a phone: two products a row, like a shop app. */
@media (max-width: 600px) {
  .sf-root[data-template="template33-bloom"] .sf-menu-grid, .sf-root[data-template="template34-atelier"] .sf-menu-grid, .sf-root[data-template="template33-bloom"] .sf-menu-wrap.has-index .sf-menu-grid, .sf-root[data-template="template34-atelier"] .sf-menu-wrap.has-index .sf-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) { padding: 6px 6px 12px; border-radius: 20px; }
  .sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-details { padding: 10px 4px 0; }
  .sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-name, .sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-name { font-size: 16px; }
  .sf-root[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-desc, .sf-root[data-template="template34-atelier"] .sf-menu-item:not(.no-photo) .sf-menu-item-desc { display: none; }
  .sf-root[data-template="template33-bloom"] .sf-menu-item .sf-add, .sf-root[data-template="template34-atelier"] .sf-menu-item .sf-add { width: 36px; height: 36px; right: 8px; bottom: 8px; }
}





/* ── template23 · PIZZERIA — Neapolitan trattoria ─────────────────────────── */
/* A red-and-cream checker band under the header (the tablecloth), slab type,
   basil-green markers and a stamped price. */
.sf-root[data-template="template23-pizzeria"] .sf-nav { border-bottom: none; box-shadow: none; }
.sf-root[data-template="template23-pizzeria"] .sf-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none;
  background: repeating-conic-gradient(var(--sf-primary) 0 25%, #fff 0 50%) 0 0 / 20px 20px;
  opacity: .92;
}
.sf-root[data-template="template23-pizzeria"] .sf-hero-eyebrow { border-radius: 6px; background: color-mix(in srgb, var(--sf-accent) 14%, var(--sf-bg)); color: var(--sf-accent); font-weight: 700; }
.sf-root[data-template="template23-pizzeria"] .sf-section-title { font-weight: 700; letter-spacing: -0.01em; }
.sf-root[data-template="template23-pizzeria"] .sf-section-title::after { width: 56px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--sf-accent) 0 33%, #fff 33% 66%, var(--sf-primary) 66%); box-shadow: 0 0 0 1px var(--sf-border); }
.sf-root[data-template="template23-pizzeria"] .sf-menu-cat h2::before { width: 12px; height: 12px; border-radius: 50%; background: var(--sf-accent); }
.sf-root[data-template="template23-pizzeria"] .sf-cat { border-radius: 8px; font-weight: 700; }
.sf-root[data-template="template23-pizzeria"] .sf-card { border-top: 4px solid var(--sf-primary); }
.sf-root[data-template="template23-pizzeria"] .sf-price { display: inline-block; padding: 2px 10px; border-radius: 6px; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-surface)); color: var(--sf-primary-dark, var(--sf-primary)); font-weight: 800; }
.sf-root[data-template="template23-pizzeria"] .sf-section.alt { background: color-mix(in srgb, var(--sf-accent) 6%, var(--sf-bg)); }
.sf-root[data-template="template23-pizzeria"] .sf-promo { background: linear-gradient(120deg, var(--sf-primary), color-mix(in srgb, var(--sf-primary) 70%, #000)); }
.sf-root[data-template="template23-pizzeria"] .sf-footer { border-top: 10px solid transparent; border-image: repeating-linear-gradient(90deg, var(--sf-accent) 0 20px, #fff 20px 40px, var(--sf-primary) 40px 60px) 10; }

/* ── template24 · SLICE JOINT — late-night slice shop ─────────────────────── */
/* Black header, a red neon rule, condensed caps and prices set like a menu
   board with a dotted leader. */
.sf-root[data-template="template24-slice-joint"] .sf-nav { background: var(--sf-primary); border-bottom: 3px solid var(--sf-accent); }
.sf-root[data-template="template24-slice-joint"] .sf-logo { color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.sf-root[data-template="template24-slice-joint"] .sf-nav-links a { color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.sf-root[data-template="template24-slice-joint"] .sf-nav-links a:hover,
.sf-root[data-template="template24-slice-joint"] .sf-nav-links a.active { color: #fff; }
.sf-root[data-template="template24-slice-joint"] .sf-cart-icon,
.sf-root[data-template="template24-slice-joint"] .sf-nav-call,
.sf-root[data-template="template24-slice-joint"] .sf-call-icon { background: rgba(255,255,255,.14); }
.sf-root[data-template="template24-slice-joint"] .sf-cart-icon svg,
.sf-root[data-template="template24-slice-joint"] .sf-nav-call svg,
.sf-root[data-template="template24-slice-joint"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template24-slice-joint"] .sf-section-title,
.sf-root[data-template="template24-slice-joint"] .sf-menu-cat h2 { text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
.sf-root[data-template="template24-slice-joint"] .sf-section-title::after { width: 100%; max-width: 120px; height: 3px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template24-slice-joint"] .sf-menu-cat h2::before { width: 16px; height: 16px; border-radius: 0; background: var(--sf-accent); transform: rotate(45deg) scale(.7); }
.sf-root[data-template="template24-slice-joint"] .sf-menu-item { border-radius: 0; border-width: 0 0 1px; }
.sf-root[data-template="template24-slice-joint"] .sf-menu-item-bottom { gap: 10px; }
.sf-root[data-template="template24-slice-joint"] .sf-menu-item-bottom::before { content: ''; flex: 1; order: 0; border-bottom: 2px dotted var(--sf-border); margin-bottom: 6px; }
.sf-root[data-template="template24-slice-joint"] .sf-price { order: 1; font-family: var(--sf-heading); font-size: 22px; font-weight: 400; color: var(--sf-accent); }
.sf-root[data-template="template24-slice-joint"] .sf-cat { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.sf-root[data-template="template24-slice-joint"] .sf-cat.active { background: var(--sf-accent); color: #fff; }
.sf-root[data-template="template24-slice-joint"] .sf-section.alt { background: #111; color: #fff; }
.sf-root[data-template="template24-slice-joint"] .sf-section.alt .sf-section-title { color: #fff; }
.sf-root[data-template="template24-slice-joint"] .sf-section.alt .sf-btn-outline { color: #fff !important; border-color: rgba(255,255,255,.7); }
.sf-root[data-template="template24-slice-joint"] .sf-section.alt .sf-btn-outline:hover { background: #fff; color: #111 !important; }
/* Anton is a single heavy weight: no faux bold, and a touch of tracking so the
   stacked poster name never runs its letters together. */
.sf-root[data-template="template24-slice-joint"] .sfx-hero-poster h1 { font-weight: 400; letter-spacing: .01em; line-height: .96; }



/* ── template27 · IZAKAYA — sushi & Asian kitchen ────────────────────────── */
/* Washi paper, indigo ink, square corners and a vermilion hanko seal beside
   every heading. */
.sf-root[data-template="template27-izakaya"] .sf-nav { background: var(--sf-primary); border-bottom: none; }
.sf-root[data-template="template27-izakaya"] .sf-logo { color: #fff; letter-spacing: .06em; }
.sf-root[data-template="template27-izakaya"] .sf-nav-links a { color: rgba(255,255,255,.78); letter-spacing: .1em; font-size: 13px; }
.sf-root[data-template="template27-izakaya"] .sf-nav-links a:hover,
.sf-root[data-template="template27-izakaya"] .sf-nav-links a.active { color: #fff; }
.sf-root[data-template="template27-izakaya"] .sf-cart-icon,
.sf-root[data-template="template27-izakaya"] .sf-nav-call,
.sf-root[data-template="template27-izakaya"] .sf-call-icon { background: rgba(255,255,255,.12); }
.sf-root[data-template="template27-izakaya"] .sf-cart-icon svg,
.sf-root[data-template="template27-izakaya"] .sf-nav-call svg,
.sf-root[data-template="template27-izakaya"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template27-izakaya"] .sf-section-title { font-weight: 600; letter-spacing: .04em; }
.sf-root[data-template="template27-izakaya"] .sf-section-title::after { width: 14px; height: 14px; border-radius: 2px; background: var(--sf-accent); margin-top: 16px; }
.sf-root[data-template="template27-izakaya"] .sf-menu-cat h2::before { width: 14px; height: 14px; border-radius: 2px; background: var(--sf-accent); }
.sf-root[data-template="template27-izakaya"] .sf-cat { border-radius: 2px; letter-spacing: .06em; }
.sf-root[data-template="template27-izakaya"] .sf-card { box-shadow: none; }
.sf-root[data-template="template27-izakaya"] .sf-price { color: var(--sf-accent); font-weight: 700; }
.sf-root[data-template="template27-izakaya"] .sf-section.alt {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--sf-primary) 5%, transparent) 23px 24px),
    color-mix(in srgb, var(--sf-primary) 3%, var(--sf-bg));
}
.sf-root[data-template="template27-izakaya"] .sf-promo { background: var(--sf-primary); border-left: 8px solid var(--sf-accent); }



/* ═══ ACCESSIBILITY & POLISH ═════════════════════════════════════════════════
   Keyboard focus on the interactive cards/rows/chips (they're role="button"
   divs, so they need a visible focus ring), larger tap targets, and honouring
   the visitor's reduced-motion preference. */
.sf-root .sf-menu-item:focus-visible,
.sf-root .sf-card:focus-visible,
.sf-root .sf-cat:focus-visible,
.sf-root .sf-tab:focus-visible,
.sf-root .sf-infobar-link:focus-visible {
  outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: var(--sf-radius);
}
/* Category chips are a common tap target — keep them comfortably tappable. */
.sf-root .sf-cat { min-height: 40px; }
/* Gentle lift on the specials/popular cards for a more premium feel. */
.sf-root .sf-card { transition: transform .18s ease, box-shadow .18s ease; }
.sf-root .sf-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(16,24,40,.12); }

@media (prefers-reduced-motion: reduce) {
  .sf-root *, .sf-root *::before, .sf-root *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .sf-root .sf-menu-item:hover,
  .sf-root .sf-card:hover { transform: none; }
}

/* ═══ RESERVATION (moved here so it loads AFTER the .sf-root reset and can
   never be zeroed by it) ═══════════════════════════════════════════════ */
/* ── Table reservations ─────────────────────────────────────────────────────
   The booking form and the guest's manage page. Everything is driven by the
   storefront theme variables, so a booking page looks like the restaurant it
   belongs to rather than like the platform. Touch targets are 44px because
   most of these are filled in on a phone. */

/* The booking STAGE: a full-width, softly-tinted backdrop that centres the
   card in the middle of the screen with generous space all around it.
   Selectors are prefixed with .sf-root so they OUTRANK the storefront's
   .sf-root * reset (which zeroes margin/padding) — otherwise the card goes
   edge-to-edge with no gutter, which is exactly what was reported. */
.sf-root .sf-reserve-page,
.sf-reserve-page {
  min-height: 78vh;
  padding: clamp(28px, 6vw, 76px) 16px clamp(56px, 9vw, 104px);
  /* A COLUMN: the page heading sits above the card. As a row, the heading
     and the card shared the width side by side and a phone squeezed both. */
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(150% 100% at 50% -12%, color-mix(in srgb, var(--sf-primary, #6f4e37) 13%, transparent) 0%, transparent 56%),
    var(--sf-bg, #faf7f2);
}

/* The page heading, lined up with the card's left edge underneath it. */
.sf-root .sf-reserve-intro,
.sf-reserve-intro {
  width: 100%;
  max-width: 580px;
  margin: 0 auto clamp(18px, 3vw, 26px);
}
.sf-root .sf-reserve-intro h1,
.sf-reserve-intro h1 {
  font-family: var(--sf-heading, inherit);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--sf-text, #3e2723);
  margin: 0 0 8px;
  text-wrap: balance;
}
.sf-root .sf-reserve-intro p,
.sf-reserve-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sf-text-light, #8d6e63);
  max-width: 52ch;
}

/* calc(100% - 32px) guarantees a 16px gutter on each side even if the reset
   ever wins the margin battle — the card can never touch the screen edge. */
.sf-root .sf-reserve-card,
.sf-reserve-card {
  width: 100%;
  max-width: min(580px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  background: var(--sf-surface, #fff);
  border: 1px solid var(--sf-border, #e8ddd0);
  border-radius: var(--sf-radius, 18px);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 42px -24px rgba(16, 24, 40, .28);
}

.sf-reserve-kicker {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-text-light, #8d6e63);
  margin: 0 0 6px;
}

.sf-reserve-h {
  font-family: var(--sf-heading, inherit);
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--sf-text, #3e2723);
}

/* The status of a booking has to read at a glance, so it carries colour as
   well as words. Every one of these clears 4.5:1 on the surface behind it. */
.sf-tone-good { color: #166534; }
.sf-tone-warn { color: #92400e; }
.sf-tone-bad  { color: #991b1b; }
.sf-tone-flat { color: var(--sf-text-light, #6b7280); }

.sf-reserve-lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sf-text, #3e2723);
  margin: 0 0 18px;
}

.sf-reserve-muted {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sf-text-light, #8d6e63);
  margin: 0;
}

.sf-reserve-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sf-text-light, #8d6e63);
  margin: 10px 0 0;
}

.sf-reserve-hint a,
.sf-reserve-muted a { color: var(--sf-primary, #6f4e37); }

.sf-reserve-error {
  font-size: 14px;
  line-height: 1.5;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

.sf-reserve-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sf-text, #3e2723);
  background: rgba(0, 0, 0, .035);
  border-left: 3px solid var(--sf-primary, #6f4e37);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

/* Fields */
.sf-reserve-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.sf-reserve-field { display: flex; flex-direction: column; }

.sf-reserve-field label,
.sf-reserve-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sf-text, #3e2723);
  margin-bottom: 6px;
}

.sf-reserve-field input,
.sf-reserve-field select,
.sf-reserve-times input {
  min-height: 48px;
  padding: 11px 14px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus. */
  font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-surface, #fff);
  border: 1.5px solid var(--sf-border, #e8ddd0);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* A tokenised caret so the party-size / location selects match the rest of the
   form instead of the browser's grey default. */
.sf-reserve-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f4e37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.sf-reserve-field input:hover,
.sf-reserve-field select:hover,
.sf-reserve-times input:hover { border-color: var(--sf-text-light, #b8a894); }

.sf-reserve-field input:focus,
.sf-reserve-field select:focus,
.sf-reserve-times input:focus {
  outline: none;
  border-color: var(--sf-primary, #6f4e37);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary, #6f4e37) 16%, transparent);
}

/* Times */
.sf-reserve-times {
  border: 0;
  padding: 0;
  margin: 22px 0 0;
}

.sf-reserve-times legend {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-text, #3e2723);
  padding: 0;
  margin-bottom: 12px;
}

.sf-reserve-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.sf-reserve-slot {
  min-height: 46px;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-surface, #fff);
  border: 1.5px solid var(--sf-border, #e8ddd0);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .05s ease;
}

.sf-reserve-slot:hover:not(:disabled) {
  border-color: var(--sf-primary, #6f4e37);
  color: var(--sf-primary, #6f4e37);
  background: color-mix(in srgb, var(--sf-primary, #6f4e37) 6%, var(--sf-surface, #fff));
}

.sf-reserve-slot:active:not(:disabled) { transform: scale(.97); }

.sf-reserve-slot.is-on {
  background: var(--sf-primary, #6f4e37);
  border-color: var(--sf-primary, #6f4e37);
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sf-primary, #6f4e37) 55%, transparent);
}

/* A taken time is shown, not hidden: a short unexplained list reads as
   "they're closed", while a flat, un-tappable chip next to a crisp free one is
   the information that gets the booking made. A muted fill (rather than a
   strike-through) keeps a whole column of closed early-morning slots looking
   like a tidy grid instead of a wall of crossed-out text. */
.sf-reserve-slot:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--sf-text-light, #8d6e63) 62%, transparent);
  background: color-mix(in srgb, var(--sf-border, #e8ddd0) 32%, transparent);
  border-color: transparent;
}

/* Buttons */
.sf-reserve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  color: #fff;
  background: var(--sf-primary, #6f4e37);
  border: 1px solid var(--sf-primary, #6f4e37);
  border-radius: var(--sf-btn-radius, 12px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--sf-primary, #6f4e37) 70%, transparent);
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

.sf-reserve-btn:hover:not(:disabled) { filter: brightness(1.06); }
.sf-reserve-btn:active:not(:disabled) { transform: translateY(1px); }
.sf-reserve-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.sf-reserve-btn.is-ghost {
  color: var(--sf-text, #3e2723);
  background: transparent;
  border-color: var(--sf-border, #e8ddd0);
  box-shadow: none;
}
.sf-reserve-btn.is-ghost:hover:not(:disabled) {
  filter: none;
  border-color: var(--sf-text-light, #8d6e63);
  background: color-mix(in srgb, var(--sf-text, #3e2723) 4%, transparent);
}

.sf-reserve-btn.is-danger {
  color: #991b1b;
  background: transparent;
  border-color: #fecaca;
  box-shadow: none;
}
.sf-reserve-btn.is-danger:hover:not(:disabled) { filter: none; background: #fef2f2; }

.sf-reserve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sf-reserve-actions .sf-reserve-btn { width: auto; flex: 1 1 160px; }

.sf-reserve-contact { margin-top: 22px; }
.sf-reserve-contact .sf-reserve-field { margin-top: 12px; }

/* Summary */
.sf-reserve-summary {
  margin: 18px 0 0;
  border-top: 1px solid var(--sf-border, #e8ddd0);
}

.sf-reserve-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sf-border, #e8ddd0);
}

.sf-reserve-summary dt {
  font-size: 14px;
  color: var(--sf-text-light, #8d6e63);
  margin: 0;
}

.sf-reserve-summary dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text, #3e2723);
  margin: 0;
  text-align: right;
}

/* A proposed time needs an answer, so it is given its own block rather than
   being folded in with everything else. */
.sf-reserve-proposal {
  margin-top: 18px;
  padding: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--sf-radius, 14px);
}

.sf-reserve-proposal-time {
  font-size: 18px;
  font-weight: 700;
  color: #9a3412;
  margin: 0 0 12px;
}

/* ── Booking confirmation ───────────────────────────────────────────────────
   The diner pressed a button and needs to know, immediately and without
   reading, that something happened. A tick, a colour and the booking laid out
   like a ticket do that faster than a paragraph. */

.sf-reserve-done { text-align: center; }

.sf-reserve-done .sf-reserve-lead,
.sf-reserve-done .sf-reserve-hint { text-align: center; }

.sf-reserve-tick {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #166534;
  background: #DCFCE7;
  border: 2px solid #86EFAC;
  box-shadow: 0 0 0 6px color-mix(in srgb, #86EFAC 26%, transparent);
}

/* The booking itself, given the weight of a ticket rather than a sentence. */
.sf-reserve-ticket {
  margin-top: 20px;
  border: 1px solid var(--sf-border, #e8ddd0);
  border-radius: var(--sf-radius, 16px);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 12px 30px -20px rgba(16, 24, 40, .35);
}

.sf-reserve-ticket-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 18px 20px;
  background: var(--sf-primary, #6f4e37);
  background-image: linear-gradient(135deg, color-mix(in srgb, #fff 10%, var(--sf-primary, #6f4e37)), var(--sf-primary, #6f4e37));
  color: #fff;
}

.sf-reserve-ticket-day {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  flex: 1 0 100%;
}

.sf-reserve-ticket-date { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

.sf-reserve-ticket-time {
  font-size: 20px;
  font-weight: 800;
  margin-left: auto;
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
}

.sf-reserve-ticket .sf-reserve-summary {
  margin: 0;
  padding: 4px 18px 10px;
  border-top: 0;
}

.sf-reserve-ticket .sf-reserve-summary > div:last-child { border-bottom: 0; }

.sf-reserve-done .sf-reserve-btn + .sf-reserve-btn { margin-top: 10px; }

/* ── Form polish ────────────────────────────────────────────────────────────
   Wider screens get the party size, date and location on one line; a phone
   stacks them. auto-fit alone collapsed to one column at every width once a
   third field appeared, because the minimum could not be met. */
@media (min-width: 560px) {
  .sf-reserve-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* The slot grid gets denser as there is room, rather than growing four
   enormous buttons on a tablet. */
@media (min-width: 480px) {
  .sf-reserve-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* Respect a reduced-motion preference: the confirmation still scrolls into
   view, it just does not animate there. */
@media (prefers-reduced-motion: reduce) {
  .sf-reserve-page * { scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESERVATION BOOKING — a purpose-built, professional booking surface used by
   ReserveForm (the storefront "Reserve a table" page and its confirmation).
   Every value is driven by the storefront theme tokens, so the page wears the
   restaurant's own colour and type. Touch targets are ≥44px — most bookings
   are made on a phone.
   ═════════════════════════════════════════════════════════════════════════ */

.sf-root .sf-rsv-card,
.sf-rsv-card {
  width: 100%;
  max-width: min(580px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  background: var(--sf-surface, #fff);
  border: 1px solid var(--sf-border, #e8ddd0);
  border-radius: clamp(18px, 3vw, 26px);
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .05), 0 30px 66px -32px rgba(16, 24, 40, .38);
}

/* Header ------------------------------------------------------------------- */
.sf-rsv-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.sf-rsv-head-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  color: var(--sf-primary, #6f4e37);
  background: color-mix(in srgb, var(--sf-primary, #6f4e37) 12%, transparent);
}
.sf-rsv-head-icon svg { width: 26px; height: 26px; }
/* The page already has its own heading above the card, so the card's header
   is a single compact line. */
.sf-rsv-head.is-compact { align-items: center; gap: 14px; margin-bottom: 24px; }
.sf-rsv-head.is-compact .sf-rsv-head-icon { width: 44px; height: 44px; border-radius: 13px; }
.sf-rsv-head.is-compact .sf-rsv-head-icon svg { width: 22px; height: 22px; }
.sf-rsv-head.is-compact .sf-rsv-title { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; margin: 0; }
.sf-rsv-title {
  font-family: var(--sf-heading, inherit);
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 2px 0 6px;
  color: var(--sf-text, #3e2723);
}
.sf-rsv-subtitle {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sf-text-light, #8d6e63);
  margin: 0;
  max-width: 46ch;
}

/* Fields ------------------------------------------------------------------- */
.sf-rsv-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 18px;
}
@media (min-width: 560px) {
  .sf-rsv-fields { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .sf-rsv-field-wide { grid-column: 1 / -1; }
}
.sf-rsv-field { display: flex; flex-direction: column; min-width: 0; }
.sf-rsv-field > label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sf-text-light, #8d6e63);
  margin-bottom: 8px;
}
.sf-rsv-input {
  min-height: 50px;
  padding: 12px 15px;
  font-size: 16px; /* stops iOS zooming on focus */
  font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-bg, #fff);
  border: 1.5px solid var(--sf-border, #e8ddd0);
  border-radius: 13px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* iOS Safari gives a date input an intrinsic width wider than a phone column
   and ignores width:100%, so it spilled out of the card. Dropping the native
   appearance lets it size like every other field; iOS then shows no icon, so
   one is drawn in. */
.sf-rsv-input[type="date"] {
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.5;
  text-align: left;
}
.sf-rsv-input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
@supports (-webkit-touch-callout: none) {
  .sf-rsv-input[type="date"] {
    -webkit-appearance: none; appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f4e37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='16' rx='3'/><path d='M3 9.5h18M8 2.5v4M16 2.5v4'/></svg>");
    background-repeat: no-repeat; background-position: right 15px center;
  }
}
.sf-rsv-input:hover { border-color: color-mix(in srgb, var(--sf-primary, #6f4e37) 40%, var(--sf-border, #e8ddd0)); }
.sf-rsv-input:focus {
  outline: none;
  background: var(--sf-surface, #fff);
  border-color: var(--sf-primary, #6f4e37);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sf-primary, #6f4e37) 16%, transparent);
}
.sf-rsv-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f4e37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center;
}

/* Party stepper ------------------------------------------------------------ */
.sf-rsv-stepper {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px;
  padding: 4px;
  border: 1.5px solid var(--sf-border, #e8ddd0);
  border-radius: 13px;
  background: var(--sf-bg, #fff);
}
.sf-rsv-stepper button {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500; line-height: 1;
  color: var(--sf-primary, #6f4e37);
  background: color-mix(in srgb, var(--sf-primary, #6f4e37) 9%, transparent);
  border: none; border-radius: 10px;
  cursor: pointer; transition: background .14s ease, transform .05s ease;
}
.sf-rsv-stepper button:hover:not(:disabled) { background: color-mix(in srgb, var(--sf-primary, #6f4e37) 18%, transparent); }
.sf-rsv-stepper button:active:not(:disabled) { transform: scale(.92); }
.sf-rsv-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.sf-rsv-stepper-val {
  font-size: 16px; font-weight: 700; color: var(--sf-text, #3e2723);
  text-align: center; white-space: nowrap;
}
.sf-rsv-stepper-val small { font-weight: 500; color: var(--sf-text-light, #8d6e63); font-size: 13px; }

/* Party quick-pick --------------------------------------------------------- */
.sf-rsv-party { margin-bottom: 16px; }
.sf-rsv-party > label {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--sf-text-light, #8d6e63); margin-bottom: 10px;
}
.sf-rsv-party-pills { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
@media (max-width: 420px) { .sf-rsv-party-pills { grid-template-columns: repeat(4, 1fr); } }
/* Phone: the page already keeps a 16px gutter, so the card uses the full
   width inside it (the extra calc gutter doubled it to 32px a side) and a
   slightly tighter padding, leaving the fields room to breathe. */
@media (max-width: 520px) {
  .sf-root .sf-rsv-card,
  .sf-rsv-card { max-width: 100%; padding: 22px 18px; border-radius: 20px; }
}
.sf-rsv-pill {
  min-height: 50px; font-size: 16px; font-weight: 700; font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-surface, #fff);
  border: 1.5px solid color-mix(in srgb, var(--sf-text, #3e2723) 13%, var(--sf-border, #e8ddd0));
  border-radius: 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .05s ease;
}
.sf-rsv-pill:hover:not(.is-on) { border-color: var(--sf-primary, #6f4e37); color: var(--sf-primary, #6f4e37); }
.sf-rsv-pill:active { transform: scale(.94); }
.sf-rsv-pill.is-on {
  background: var(--sf-primary, #6f4e37); border-color: var(--sf-primary, #6f4e37); color: #fff;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--sf-primary, #6f4e37) 60%, transparent);
}
.sf-rsv-party-more { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.sf-rsv-party-more-label { font-size: 13px; font-weight: 600; color: var(--sf-text-light, #8d6e63); }
.sf-rsv-stepper-sm { min-height: 44px; flex: 1 1 180px; max-width: 240px; }
.sf-rsv-stepper-sm button { width: 36px; height: 36px; font-size: 20px; }
.sf-rsv-stepper-sm .sf-rsv-stepper-val { font-size: 15px; }

/* Optional occasion / seating chips ---------------------------------------- */
.sf-rsv-opt { margin-top: 16px; }
.sf-rsv-opt-label {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--sf-text-light, #8d6e63); margin-bottom: 9px;
}
.sf-rsv-opt-label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.sf-rsv-opt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-rsv-chip {
  min-height: 40px; padding: 0 15px; font-size: 13.5px; font-weight: 600; font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-surface, #fff);
  border: 1.5px solid var(--sf-border, #e8ddd0);
  border-radius: 999px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .05s ease;
}
.sf-rsv-chip:hover:not(.is-on) { border-color: var(--sf-primary, #6f4e37); color: var(--sf-primary, #6f4e37); }
.sf-rsv-chip:active { transform: scale(.96); }
.sf-rsv-chip.is-on { background: var(--sf-primary, #6f4e37); border-color: var(--sf-primary, #6f4e37); color: #fff; }

.sf-rsv-hint {
  font-size: 13px; line-height: 1.55;
  color: var(--sf-text-light, #8d6e63);
  margin: 12px 0 0;
}
.sf-rsv-hint a { color: var(--sf-primary, #6f4e37); font-weight: 600; }

/* Times -------------------------------------------------------------------- */
/* Padding (not margin) carries the separation so the storefront reset can't
   collapse it; the border sits above generous breathing room. */
.sf-rsv-times {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--sf-border, #e8ddd0);
}
.sf-rsv-times-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.sf-rsv-section-title {
  font-family: var(--sf-heading, inherit);
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  color: var(--sf-text, #3e2723); margin: 0;
}
.sf-rsv-times-date { font-size: 13px; font-weight: 600; color: var(--sf-text-light, #8d6e63); }
.sf-rsv-times-status {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--sf-text-light, #8d6e63); padding: 8px 0;
}

.sf-rsv-periods { display: flex; flex-direction: column; gap: 22px; }
.sf-rsv-period { padding: 0; }
/* A clean period heading with a hairline running off to the right — structure
   without the muddy tinted card the pills used to sit inside. */
.sf-rsv-period-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sf-text-light, #8d6e63); margin: 0 0 12px;
}
.sf-rsv-period-label::after {
  content: ''; flex: 1; height: 1px;
  background: var(--sf-border, #e8ddd0);
}
.sf-rsv-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}
@media (min-width: 480px) {
  .sf-rsv-slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
/* Crisp, tappable pills: real surface, a border that actually reads on white,
   and a soft lift — not a washed-out tint. */
.sf-rsv-slot {
  min-height: 48px;
  font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: var(--sf-text, #3e2723);
  background: var(--sf-surface, #fff);
  border: 1.5px solid color-mix(in srgb, var(--sf-text, #3e2723) 13%, var(--sf-border, #e8ddd0));
  border-radius: 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .05s ease;
}
.sf-rsv-slot:hover:not(:disabled) {
  border-color: var(--sf-primary, #6f4e37);
  color: var(--sf-primary, #6f4e37);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--sf-primary, #6f4e37) 55%, transparent);
}
.sf-rsv-slot:active:not(:disabled) { transform: scale(.96); }
.sf-rsv-slot.is-on {
  background: var(--sf-primary, #6f4e37);
  border-color: var(--sf-primary, #6f4e37);
  color: #fff;
  box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--sf-primary, #6f4e37) 62%, transparent);
}
/* A booked time reads as a flat, un-tappable chip. */
.sf-rsv-slot:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--sf-text-light, #8d6e63) 55%, transparent);
  background: color-mix(in srgb, var(--sf-border, #e8ddd0) 26%, transparent);
  border-color: transparent;
  box-shadow: none;
}

.sf-rsv-empty {
  padding: 22px; text-align: center;
  border: 1px dashed var(--sf-border, #e8ddd0); border-radius: 14px;
  background: color-mix(in srgb, var(--sf-border, #e8ddd0) 14%, transparent);
}
.sf-rsv-empty-title { font-size: 15px; font-weight: 700; color: var(--sf-text, #3e2723); margin: 0 0 4px; }

/* Contact ------------------------------------------------------------------ */
.sf-rsv-contact {
  margin-top: 28px; padding-top: 26px;
  border-top: 1px solid var(--sf-border, #e8ddd0);
}
.sf-rsv-chosen {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--sf-primary, #6f4e37) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sf-primary, #6f4e37) 22%, transparent);
}
.sf-rsv-chosen-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-primary, #6f4e37); color: #fff; font-size: 13px; font-weight: 800;
}
.sf-rsv-chosen-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--sf-text, #3e2723); line-height: 1.4; }
.sf-rsv-chosen-change {
  flex-shrink: 0; background: none; border: none;
  font-size: 13px; font-weight: 700; color: var(--sf-primary, #6f4e37);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sf-rsv-contact .sf-rsv-fields { margin-bottom: 12px; }

/* Buttons ------------------------------------------------------------------ */
.sf-rsv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin-top: 10px;
  padding: 0 22px; font-size: 15.5px; font-weight: 700; font-family: inherit;
  text-decoration: none; text-align: center;
  color: #fff; background: var(--sf-primary, #6f4e37);
  border: 1px solid var(--sf-primary, #6f4e37);
  border-radius: var(--sf-btn-radius, 13px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--sf-primary, #6f4e37) 72%, transparent);
  cursor: pointer; transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.sf-rsv-btn:hover:not(:disabled) { filter: brightness(1.07); }
.sf-rsv-btn:active:not(:disabled) { transform: translateY(1px); }
.sf-rsv-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.sf-rsv-btn-lg { min-height: 56px; font-size: 16px; margin-top: 4px; }
.sf-rsv-btn.is-ghost {
  color: var(--sf-text, #3e2723); background: transparent;
  border-color: var(--sf-border, #e8ddd0); box-shadow: none;
}
.sf-rsv-btn.is-ghost:hover:not(:disabled) {
  filter: none; border-color: var(--sf-text-light, #8d6e63);
  background: color-mix(in srgb, var(--sf-text, #3e2723) 4%, transparent);
}

.sf-rsv-fine {
  font-size: 12.5px; line-height: 1.5; text-align: center;
  color: var(--sf-text-light, #8d6e63); margin: 12px 0 0;
}
.sf-rsv-fine a { color: var(--sf-primary, #6f4e37); font-weight: 600; }

/* Confirmation ------------------------------------------------------------- */
/* Centre with flex, NOT margin:auto — the storefront's .sf-root * reset can
   zero margins, which left the tick and ticket stuck to the left edge. */
.sf-root .sf-rsv-done,
.sf-rsv-done {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sf-rsv-tick {
  width: 68px; height: 68px; margin-bottom: 18px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #16a34a; background: #dcfce7; border: 2px solid #86efac;
  box-shadow: 0 0 0 8px color-mix(in srgb, #86efac 22%, transparent);
}
.sf-rsv-tick svg { width: 32px; height: 32px; }
.sf-rsv-pill {
  display: inline-flex; align-items: center; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.sf-rsv-pill-warn { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.sf-rsv-done-h {
  font-family: var(--sf-heading, inherit);
  font-size: clamp(24px, 3.4vw, 31px); letter-spacing: -.02em;
  color: var(--sf-text, #3e2723); margin: 0 0 12px;
}
.sf-rsv-done-lead {
  font-size: 15px; line-height: 1.6; color: var(--sf-text, #3e2723);
  margin-bottom: 22px; max-width: 44ch;
}
.sf-rsv-ticket {
  text-align: left; width: 100%; max-width: 440px; margin-bottom: 22px;
  border: 1px solid var(--sf-border, #e8ddd0); border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 36px -22px rgba(16, 24, 40, .42);
}
.sf-rsv-ticket-top {
  padding: 18px 20px; color: #fff;
  background: var(--sf-primary, #6f4e37);
  background-image: linear-gradient(135deg, color-mix(in srgb, #fff 12%, var(--sf-primary, #6f4e37)), var(--sf-primary, #6f4e37));
}
.sf-rsv-ticket-day {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 4px;
}
.sf-rsv-ticket-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sf-rsv-ticket-date { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.sf-rsv-ticket-time { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-rsv-ticket-meta { margin: 0; padding: 6px 20px 12px; }
.sf-rsv-ticket-meta > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--sf-border, #e8ddd0);
}
.sf-rsv-ticket-meta > div:last-child { border-bottom: 0; }
.sf-rsv-ticket-meta dt { font-size: 13.5px; color: var(--sf-text-light, #8d6e63); margin: 0; }
.sf-rsv-ticket-meta dd { font-size: 13.5px; font-weight: 700; color: var(--sf-text, #3e2723); margin: 0; text-align: right; }
.sf-rsv-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; }
.sf-rsv-done .sf-rsv-fine { margin-top: 16px; }

/* Loading ------------------------------------------------------------------ */
.sf-rsv-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; }
.sf-rsv-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--sf-primary, #6f4e37) 22%, transparent);
  border-top-color: var(--sf-primary, #6f4e37);
  animation: sf-rsv-spin .7s linear infinite;
}
.sf-rsv-spinner-sm { width: 18px; height: 18px; border-width: 2.5px; }
@keyframes sf-rsv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-rsv-spinner { animation-duration: 1.4s; } }


/* "Powered by" credit: match the footer's real background, not the brand color. */
.sf-root[data-template="classic"] .sf-footer,
.sf-root[data-template="template15-editorial"] .sf-footer,
.sf-root[data-template="template20-bakehouse"] .sf-footer,
.sf-root[data-template="template22-corner-market"] .sf-footer,
.sf-root[data-template="template25-smash-burger"] .sf-footer,
.sf-root[data-template="template26-roastery"] .sf-footer,
.sf-root[data-template="template29-smokehouse"] .sf-footer,
.sf-root[data-template="template31-diner"] .sf-footer,
.sf-root[data-template="template32-bowl"] .sf-footer,
.sf-root[data-template="template33-bloom"] .sf-footer,
.sf-root[data-template="template35-maison"] .sf-footer,
.sf-root[data-template="template36-urban"] .sf-footer,
.sf-root[data-template="template37-forno"] .sf-footer,
.sf-root[data-template="template38-casa"] .sf-footer,
.sf-root[data-template="template39-midnight"] .sf-footer,
.sf-root[data-template="template41-cantina"] .sf-footer,
.sf-root[data-template="template42-trompo"] .sf-footer { --sf-footer-fg: #fff; }
.sf-root[data-template="template19-patisserie"] .sf-footer,
.sf-root[data-template="template28-taqueria"] .sf-footer,
.sf-root[data-template="template30-mezze"] .sf-footer,
.sf-root[data-template="template34-atelier"] .sf-footer { --sf-footer-fg: var(--sf-on-primary-dark, #fff); }

/* ── template35 · MAISON — fine dining: ivory, forest, brass hairlines ── */
.sf-root[data-template="template35-maison"] .sf-nav { background: var(--sf-bg); border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template35-maison"] .sf-logo { font-family: var(--sf-heading); font-weight: 600; font-size: 30px; letter-spacing: .02em; color: var(--sf-primary); }
.sf-root[data-template="template35-maison"] .sf-nav-links a { letter-spacing: .18em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.sf-root[data-template="template35-maison"] .sf-section-title, .sf-root[data-template="template35-maison"] .sf-menu-cat h2 { font-weight: 500; font-size: clamp(40px, 5vw, 64px); color: var(--sf-primary); letter-spacing: -0.01em; }
.sf-root[data-template="template35-maison"] .sf-section-title::after { width: 56px; height: 1px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template35-maison"] .sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-bg)); }
.sf-root[data-template="template35-maison"] .sf-card, .sf-root[data-template="template35-maison"] .sf-menu-item { border-radius: 4px; box-shadow: none; }
.sf-root[data-template="template35-maison"] .sf-price { font-family: var(--sf-heading); font-weight: 600; font-size: 21px; color: var(--sf-primary); }
.sf-root[data-template="template35-maison"] .sf-btn { border-radius: 2px; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.sf-root[data-template="template35-maison"] .sf-btn:hover { background: var(--sf-accent); }
.sf-root[data-template="template35-maison"] .sf-cat { border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.sf-root[data-template="template35-maison"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template35-maison"] .sfx-ticker { background: var(--sf-primary); font-family: var(--sf-heading); font-style: italic; }
.sf-root[data-template="template35-maison"] .sf-footer { background: var(--sf-primary-dark); border-top: 1px solid var(--sf-accent); }

/* ── template36 · URBAN KITCHEN — fast casual: charcoal, signal orange ── */
.sf-root[data-template="template36-urban"] .sf-nav { background: color-mix(in srgb, var(--sf-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sf-border); }
.sf-root[data-template="template36-urban"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; }
.sf-root[data-template="template36-urban"] .sf-nav-links a { font-weight: 600; }
.sf-root[data-template="template36-urban"] .sf-section-title, .sf-root[data-template="template36-urban"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: -0.035em; font-size: clamp(34px, 4.6vw, 56px); }
.sf-root[data-template="template36-urban"] .sf-section-title::after { width: 40px; height: 6px; border-radius: 3px; background: var(--sf-accent); }
.sf-root[data-template="template36-urban"] .sf-card { border-radius: 20px; border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(15,23,42,.18); }
.sf-root[data-template="template36-urban"] .sf-price { font-family: var(--sf-heading); font-weight: 700; color: var(--sf-text); }
.sf-root[data-template="template36-urban"] .sf-btn { border-radius: 12px; }
.sf-root[data-template="template36-urban"] .sf-cat { border-radius: 10px; font-weight: 600; }
.sf-root[data-template="template36-urban"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template36-urban"] .sfx-ticker { background: var(--sf-accent); font-family: var(--sf-heading); }
.sf-root[data-template="template36-urban"] .sf-footer { background: #0B0F19; }

/* ── template37 · FORNO — modern pizzeria: cream, tomato, basil ── */
.sf-root[data-template="template37-forno"] .sf-nav { background: var(--sf-bg); border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--sf-accent) 0 33.3%, #fff 33.3% 66.6%, var(--sf-primary) 66.6%) 4; }
.sf-root[data-template="template37-forno"] .sf-logo { font-family: var(--sf-heading); font-size: 30px; color: var(--sf-primary); }
.sf-root[data-template="template37-forno"] .sf-section-title, .sf-root[data-template="template37-forno"] .sf-menu-cat h2 { font-weight: 400; font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.015em; }
.sf-root[data-template="template37-forno"] .sf-section-title::after { width: 64px; height: 4px; border-radius: 2px; background: var(--sf-primary); }
.sf-root[data-template="template37-forno"] .sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)); }
.sf-root[data-template="template37-forno"] .sf-card { border-radius: 22px; box-shadow: none; }
.sf-root[data-template="template37-forno"] .sf-price { color: var(--sf-primary); font-weight: 800; }
.sf-root[data-template="template37-forno"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template37-forno"] .sfx-ticker { background: var(--sf-accent); }
.sf-root[data-template="template37-forno"] .sf-footer { background: #2A120D; }

/* ── template38 · CASA — Latin kitchen: terracotta, marigold, teal ── */
.sf-root[data-template="template38-casa"] .sf-nav { background: var(--sf-surface); box-shadow: 0 8px 24px -16px rgba(120,40,10,.35); }
.sf-root[data-template="template38-casa"] .sf-logo { font-family: var(--sf-heading); font-weight: 900; font-size: 28px; letter-spacing: -0.02em; color: var(--sf-primary); }
.sf-root[data-template="template38-casa"] .sf-nav-links a { font-weight: 700; }
.sf-root[data-template="template38-casa"] .sf-section-title, .sf-root[data-template="template38-casa"] .sf-menu-cat h2 { font-weight: 900; letter-spacing: -0.03em; font-size: clamp(38px, 5.2vw, 64px); color: var(--sf-primary-dark); }
.sf-root[data-template="template38-casa"] .sf-section-title::after { width: 72px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sf-primary), #E9952B, var(--sf-accent)); }
.sf-root[data-template="template38-casa"] .sf-section.alt { background: color-mix(in srgb, var(--sf-accent) 8%, var(--sf-bg)); }
.sf-root[data-template="template38-casa"] .sf-card { border-radius: 24px; border: 0; box-shadow: 0 18px 40px -18px rgba(120,40,10,.35); }
.sf-root[data-template="template38-casa"] .sf-price { color: var(--sf-accent); font-weight: 800; }
.sf-root[data-template="template38-casa"] .sf-cat.active { background: var(--sf-accent); }
.sf-root[data-template="template38-casa"] .sfx-ticker { background: var(--sf-accent); font-family: var(--sf-heading); }
.sf-root[data-template="template38-casa"] .sf-footer { background: var(--sf-primary-dark); }

/* ── template39 · MIDNIGHT — lounge & grill: deep night, champagne gold ── */
.sf-root[data-template="template39-midnight"] .sf-nav { background: var(--sf-primary); border-bottom: 1px solid rgba(232,207,150,.25); }
.sf-root[data-template="template39-midnight"] .sf-logo { font-family: var(--sf-heading); color: #fff; font-size: 28px; letter-spacing: .02em; }
.sf-root[data-template="template39-midnight"] .sf-nav-links a { color: rgba(244,239,230,.75); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.sf-root[data-template="template39-midnight"] .sf-nav-links a:hover, .sf-root[data-template="template39-midnight"] .sf-nav-links a.active { color: #E8CF96; }
.sf-root[data-template="template39-midnight"] .sf-cart-icon, .sf-root[data-template="template39-midnight"] .sf-nav-call, .sf-root[data-template="template39-midnight"] .sf-call-icon { background: rgba(255,255,255,.08); }
.sf-root[data-template="template39-midnight"] .sf-cart-icon svg, .sf-root[data-template="template39-midnight"] .sf-nav-call svg, .sf-root[data-template="template39-midnight"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template39-midnight"] .sf-section-title, .sf-root[data-template="template39-midnight"] .sf-menu-cat h2 { font-weight: 500; font-size: clamp(40px, 5vw, 66px); letter-spacing: -0.01em; }
.sf-root[data-template="template39-midnight"] .sf-section-title::after { width: 48px; height: 1px; border-radius: 0; background: var(--sf-accent); }
.sf-root[data-template="template39-midnight"] .sf-section.alt { background: var(--sf-primary); color: #F4EFE6; }
.sf-root[data-template="template39-midnight"] .sf-section.alt .sf-section-title { color: #fff; }
.sf-root[data-template="template39-midnight"] .sf-section.alt .sf-section-sub { color: #D9BE86; }
.sf-root[data-template="template39-midnight"] .sf-section.alt .sf-btn-outline { color: #fff !important; border-color: rgba(255,255,255,.6); }
.sf-root[data-template="template39-midnight"] .sf-section.alt .sf-btn-outline:hover { background: #fff; color: var(--sf-primary) !important; }
.sf-root[data-template="template39-midnight"] .sf-card, .sf-root[data-template="template39-midnight"] .sf-menu-item { border-radius: 12px; box-shadow: none; }
.sf-root[data-template="template39-midnight"] .sf-price { font-family: var(--sf-heading); font-weight: 600; font-size: 20px; color: var(--sf-accent); }
.sf-root[data-template="template39-midnight"] .sf-btn:hover { background: var(--sf-accent); }
.sf-root[data-template="template39-midnight"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template39-midnight"] .sfx-ticker { background: var(--sf-primary); color: #E8CF96; font-family: var(--sf-heading); font-style: italic; }
.sf-root[data-template="template39-midnight"] .sf-footer { background: #0B0B0E; border-top: 1px solid rgba(232,207,150,.3); }
.sf-root[data-template="template39-midnight"] .sf-burger span { background: #fff; }

/* ── template41 · CANTINA — cobalt talavera, chile red, printed menu board ── */
.sf-root[data-template="template41-cantina"] .sf-nav { background: var(--sf-surface); border-bottom: 4px solid var(--sf-primary); box-shadow: 0 8px 24px -18px rgba(20,30,70,.45); }
.sf-root[data-template="template41-cantina"] .sf-logo { font-family: var(--sf-heading); font-weight: 400; font-size: 26px; color: var(--sf-primary); }
.sf-root[data-template="template41-cantina"] .sf-nav-links a { font-weight: 700; }
.sf-root[data-template="template41-cantina"] .sf-nav-links a.active { color: var(--sf-accent); }
.sf-root[data-template="template41-cantina"] .sf-section-title, .sf-root[data-template="template41-cantina"] .sf-menu-cat h2 { font-weight: 400; font-size: clamp(34px, 4.8vw, 58px); color: var(--sf-primary); }
.sf-root[data-template="template41-cantina"] .sf-section-title::after { width: 88px; height: 10px; border-radius: 3px; background: radial-gradient(circle, #E8A317 0 22%, var(--sf-primary) 24% 62%, transparent 64%) 0 0 / 10px 10px repeat-x; }
.sf-root[data-template="template41-cantina"] .sf-section.alt { background: color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)); }
.sf-root[data-template="template41-cantina"] .sf-card, .sf-root[data-template="template41-cantina"] .sf-menu-item { border-radius: 10px; border: 1.5px solid var(--sf-border); box-shadow: none; }
.sf-root[data-template="template41-cantina"] .sf-card:hover { border-color: var(--sf-primary); box-shadow: 6px 6px 0 color-mix(in srgb, var(--sf-primary) 18%, transparent); }
.sf-root[data-template="template41-cantina"] .sf-price { color: var(--sf-accent); font-weight: 800; }
.sf-root[data-template="template41-cantina"] .sf-btn { background: var(--sf-accent); }
.sf-root[data-template="template41-cantina"] .sf-cat.active { background: var(--sf-primary); }
.sf-root[data-template="template41-cantina"] .sfx-ticker { background: var(--sf-primary); font-family: var(--sf-heading); }
.sf-root[data-template="template41-cantina"] .sf-footer { background: var(--sf-primary-dark); border-top: 8px solid var(--sf-accent); }

/* ── template42 · TROMPO — charcoal grill, lime, green, order tickets ───── */
.sf-root[data-template="template42-trompo"] .sf-nav { background: var(--sf-primary); border-bottom: 3px solid #A3E635; }
.sf-root[data-template="template42-trompo"] .sf-logo { font-family: var(--sf-heading); font-weight: 400; font-size: 24px; color: #fff; text-transform: uppercase; }
.sf-root[data-template="template42-trompo"] .sf-nav-links a { color: rgba(255,255,255,.82); font-weight: 600; }
.sf-root[data-template="template42-trompo"] .sf-nav-links a:hover, .sf-root[data-template="template42-trompo"] .sf-nav-links a.active { color: #A3E635; }
.sf-root[data-template="template42-trompo"] .sf-cart-icon, .sf-root[data-template="template42-trompo"] .sf-nav-call, .sf-root[data-template="template42-trompo"] .sf-call-icon { background: rgba(255,255,255,.1); }
.sf-root[data-template="template42-trompo"] .sf-cart-icon svg, .sf-root[data-template="template42-trompo"] .sf-nav-call svg, .sf-root[data-template="template42-trompo"] .sf-call-icon svg { stroke: #fff; }
.sf-root[data-template="template42-trompo"] .sf-section-title, .sf-root[data-template="template42-trompo"] .sf-menu-cat h2 { font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.8vw, 60px); letter-spacing: -0.01em; color: var(--sf-text); }
.sf-root[data-template="template42-trompo"] .sf-section-title::after { width: 64px; height: 8px; border-radius: 999px; background: #A3E635; }
.sf-root[data-template="template42-trompo"] .sf-section.alt { background: #EEEDE6; }
.sf-root[data-template="template42-trompo"] .sf-card, .sf-root[data-template="template42-trompo"] .sf-menu-item { border-radius: 16px; border: 0; box-shadow: 0 16px 34px -20px rgba(0,0,0,.45); }
.sf-root[data-template="template42-trompo"] .sf-price { color: var(--sf-accent); font-weight: 800; }
.sf-root[data-template="template42-trompo"] .sf-btn { background: var(--sf-accent); }
.sf-root[data-template="template42-trompo"] .sf-cat.active { background: var(--sf-primary); color: #A3E635; }
.sf-root[data-template="template42-trompo"] .sfx-ticker { background: #A3E635; color: #14210A; font-family: var(--sf-heading); text-transform: uppercase; }
.sf-root[data-template="template42-trompo"] .sf-footer { background: var(--sf-primary-dark); border-top: 4px solid #A3E635; }

/* ── Design refresh: Midnight, Cantina, Diner, Mezze (look only; scoped to
   these four designs, nothing else changes). ───────────────────────────── */

/* Midnight: the first screen holds the name, the plate and "Order online". */
.sf-root[data-template="template39-midnight"] .bx-spot { padding: clamp(36px, 5.5vh, 88px) 0 clamp(48px, 7vh, 96px); }
.sf-root[data-template="template39-midnight"] .bx-spot h1 { font-size: min(clamp(46px, 7.5vw, 112px), 12svh, var(--sf-fit, 1000px)); margin: 14px 0 26px; }
.sf-root[data-template="template39-midnight"] .bx-spot__plate { width: min(64vw, 320px, 30svh); min-width: 180px; margin-bottom: 28px; outline: 1px solid rgba(232,207,150,.4); outline-offset: 12px; }
.sf-root[data-template="template39-midnight"] .bx-spot__eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.sf-root[data-template="template39-midnight"] .bx-spot__eyebrow::before,
.sf-root[data-template="template39-midnight"] .bx-spot__eyebrow::after { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #D9BE86); }
.sf-root[data-template="template39-midnight"] .bx-spot__eyebrow::after { transform: scaleX(-1); }
.sf-root[data-template="template39-midnight"] .bx-spot .sfx-hero-lead { color: rgba(244,239,230,.9); margin-bottom: 24px; }
.sf-root[data-template="template39-midnight"] .bx-spot .sfx-btn-ghost--light { border: 1px solid rgba(232,207,150,.55); color: #F4EFE6 !important; }
.sf-root[data-template="template39-midnight"] .bx-spot .sfx-btn-ghost--light:hover { background: rgba(232,207,150,.12); }
.sf-root[data-template="template39-midnight"] .bx-spot__meta { margin-top: 20px; color: rgba(244,239,230,.82); }
@media (max-width: 560px) {
  .sf-root[data-template="template39-midnight"] .bx-spot__eyebrow::before, .sf-root[data-template="template39-midnight"] .bx-spot__eyebrow::after { display: none; }
  .sf-root[data-template="template39-midnight"] .bx-spot__plate { width: min(54vw, 26svh); min-width: 150px; margin-bottom: 22px; outline-offset: 8px; }
  .sf-root[data-template="template39-midnight"] .bx-spot h1 { margin: 10px 0 20px; }
  .sf-root[data-template="template39-midnight"] .bx-spot .sfx-hero-lead { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
}
.sf-root[data-template="template39-midnight"] .sf-section.alt .sf-card { border: 1px solid rgba(232,207,150,.35); }
.sf-root[data-template="template39-midnight"] .sf-card:hover { border-color: rgba(232,207,150,.5); }

/* Cantina: a crisp printed shadow on the name, and the board's status pill
   back to a small pill (it had taken the board title's big type). */
.sf-root[data-template="template41-cantina"] .bx-tala h1 { text-shadow: 3px 3px 0 color-mix(in srgb, #E8A317 55%, var(--sf-bg)); }
.sf-root[data-template="template41-cantina"] .bx-tala__board-head > .bx-open { font-family: var(--sf-body); font-size: 13px; font-weight: 700; padding: 6px 12px; }
.sf-root[data-template="template41-cantina"] .bx-tala__board { width: min(78%, 340px); }
.sf-root[data-template="template41-cantina"] .sf-card { border-top: 4px solid var(--sf-primary); }
@media (max-width: 560px) { .sf-root[data-template="template41-cantina"] .bx-tala__board { width: auto; } }

/* Diner: a sharp neon name that still reads, a chrome line inside the sign,
   and the status chips in two rows on a phone, not three. */
.sf-root[data-template="template31-diner"] .bx-neon h1 { text-shadow: 0 0 3px #fff, 0 0 12px #ff2e55, 0 0 28px rgba(255,46,85,.75), 0 0 56px rgba(200,16,46,.55); }
.sf-root[data-template="template31-diner"] .bx-neon__sign { box-shadow: 0 0 0 6px rgba(200,16,46,.22), 0 0 34px rgba(255,64,96,.45), inset 0 0 0 4px rgba(217,222,226,.18), inset 0 0 34px rgba(255,64,96,.22); }
@media (max-width: 560px) {
  .sf-root[data-template="template31-diner"] .bx-neon__sign { padding: 22px 20px; }
  .sf-root[data-template="template31-diner"] .bx-neon .sfx-chips { gap: 6px; }
  .sf-root[data-template="template31-diner"] .bx-neon .sfx-chips li { font-size: 12.5px; padding: 7px 11px; }
}

/* Mezze: a warm sunlit wash in place of the grey one, terracotta lines
   inside the arches, and the arches start higher on the first screen. */
.sf-root[data-template="template30-mezze"] .bx-arches { padding-top: clamp(40px, 5.5vw, 80px); background: radial-gradient(900px 420px at 50% 0%, color-mix(in srgb, var(--sf-primary) 9%, transparent), transparent 70%), linear-gradient(180deg, #FBF7EF, var(--sf-bg)); }
.sf-root[data-template="template30-mezze"] .bx-arches h1 { margin: 12px auto 14px; }
.sf-root[data-template="template30-mezze"] .bx-arches .sfx-hero-lead { margin-bottom: 24px; }
.sf-root[data-template="template30-mezze"] .bx-arches__row { margin-top: clamp(28px, 4vw, 48px); }
.sf-root[data-template="template30-mezze"] .bx-arches__win { outline: 2px solid color-mix(in srgb, var(--sf-accent) 55%, transparent); outline-offset: -14px; }

/* The shell is a flex column, and a flex item will not shrink below its
   content's min-content width. The carousel menu's single unwrapped row made
   that ~600px on a 360px phone: the whole menu column grew past the screen
   and its right side was clipped. Sections may shrink; the carousel then
   scrolls inside its own row, as intended. */
.sf-root > * { min-width: 0; }
/* A direct child centred with margin:auto is sized to its content in a flex
   column, not stretched, so the carousel's long row set its width (649px on a
   360px phone). Full width, capped by its own max-width, still centred. */
.sf-root > .sf-menu-wrap { width: 100%; }

/* ── top bar on phones: never wrap the name or the sign-in button ─────────── */
.sf-root .sf-signin, .sf-root .sf-account { white-space: nowrap; }
.sf-root .sf-nav-inner { gap: 10px; }
.sf-root .sf-logo { min-width: 0; }
.sf-root .sf-logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 420px) { .sf-root .sf-logo span { font-size: 17px; letter-spacing: .02em; } .sf-root .sf-logo img { height: 38px; max-width: 120px; } }

/* Footer: the store's apps under the social and chat links. */
.sf-root .sf-footer-apps { margin-top: 14px; }

/* ── primitives ─────────────────────────────────────────────────────────── */
.sf-root .sfx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.sf-root .sfx-narrow { max-width: 820px; }
.sf-root .sfx-narrow-lg { max-width: 980px; }
.sf-root .sfx-center { display: flex; justify-content: center; margin-top: 30px; }
.sf-root .sfx-stack { display: grid; gap: 14px; }
.sf-root .sfx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sf-root .sfx-block { width: 100%; }
.sf-root .sfx-card { background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); }
/* Cards and tiles keep their own text colour inside a template's dark band. */
.sf-root .sfx-points li, .sf-root .sfx-tile:not(.sfx-tile--brand) { color: var(--sf-text); }
.sf-root .sfx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-root .sfx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); text-align: center; margin-bottom: 10px; }
.sf-root .sfx-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 18px; }
.sf-root .sfx-rule { display: inline-block; width: 36px; height: 2px; background: var(--sf-accent); }
.sf-root .sfx-h2 { font-family: var(--sf-heading); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--sf-text); }
.sf-root .sfx-body { font-size: 16.5px; line-height: 1.75; color: var(--sf-text-light); margin-bottom: 18px; max-width: 62ch; }
.sf-root .sfx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sf-primary); border-bottom: 2px solid color-mix(in srgb, var(--sf-primary) 30%, transparent); padding-bottom: 2px; }
.sf-root .sfx-link:hover { border-bottom-color: var(--sf-primary); }

/* Secondary buttons, for photo (light) and plain (dark) backgrounds. */
.sf-root .sfx-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 13px 24px; border-radius: var(--sf-btn-radius); font-size: 15px; font-weight: 600; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.sf-root .sfx-btn-ghost--light { color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.sf-root .sfx-btn-ghost--light:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.sf-root .sfx-btn-ghost--dark, .sf-root .sfx-btn-ghost--solid { color: var(--sf-text) !important; border: 1.5px solid var(--sf-border); background: var(--sf-surface); }
.sf-root .sfx-btn-ghost--dark:hover, .sf-root .sfx-btn-ghost--solid:hover { border-color: var(--sf-primary); color: var(--sf-primary) !important; }
.sf-root .sfx-btn-invert { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 15px 30px; border-radius: var(--sf-btn-radius); background: #fff; color: var(--sf-primary) !important; font-weight: 700; font-size: 15px; line-height: 1; box-shadow: 0 8px 22px rgba(0,0,0,.14); transition: transform .15s ease; }
.sf-root .sfx-btn-invert:hover { transform: translateY(-2px); }

/* Status chips under a hero. */
.sf-root .sfx-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 22px; }
.sf-root .sfx-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.sf-root .sfx-chips--light li { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-root .sfx-chips--dark li { color: var(--sf-text); background: var(--sf-surface); border: 1px solid var(--sf-border); }
.sf-root .sfx-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sf-root .sfx-chips li.is-open .sfx-dot, .sf-root .sfx-pill.is-open .sfx-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.sf-root .sfx-chips li.is-closed .sfx-dot, .sf-root .sfx-pill.is-closed .sfx-dot { background: #f97316; }
.sf-root .sf-hero.v-center .sfx-actions, .sf-root .sf-hero.v-center .sfx-chips { justify-content: center; }
.sf-root .sf-hero .sfx-actions { margin-top: 4px; }

/* Split hero on a phone: the one column may shrink below its content's widest
   word, instead of growing past the viewport and being clipped. */
.sf-root .sf-hero-copy { min-width: 0; }
.sf-root .sf-hero-copy h1 { overflow-wrap: anywhere; }
@media (max-width: 768px) { .sf-root .sf-hero.v-split .sf-hero-split { grid-template-columns: minmax(0, 1fr); } }

/* ── hero: TYPE ─────────────────────────────────────────────────────────── */
.sf-root .sfx-hero-type { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--sf-border); background:
  radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--sf-accent) 12%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .sfx-hero-type__name { font-family: var(--sf-heading); font-size: clamp(46px, 10vw, 132px); line-height: .94; letter-spacing: -0.045em; font-weight: 800; color: var(--sf-text); max-width: 14ch; overflow-wrap: anywhere; }
.sf-root .sfx-hero-type__foot { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: clamp(26px, 4vw, 44px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--sf-border); }
.sf-root .sfx-hero-type__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: var(--sf-text-light); max-width: 52ch; }
@media (min-width: 900px) { .sf-root .sfx-hero-type__foot { grid-template-columns: 1.1fr 1fr; align-items: end; } }

/* ── hero: ORDER (app-like) ─────────────────────────────────────────────── */
.sf-root .sfx-hero-order { color: #fff; padding: clamp(40px, 7vw, 96px) 0; background-color: var(--sf-primary); background-image:
  linear-gradient(100deg, color-mix(in srgb, var(--sf-primary-dark) 92%, transparent) 0%, color-mix(in srgb, var(--sf-primary) 70%, transparent) 55%, color-mix(in srgb, var(--sf-primary) 40%, transparent) 100%), var(--sf-hero-photo, none);
  background-size: cover; background-position: center; }
.sf-root .sfx-hero-order__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.sf-root .sfx-hero-order__copy h1 { font-family: var(--sf-heading); font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 16px; color: #fff; }
.sf-root .sfx-hero-order__copy p { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: rgba(255,255,255,.88); max-width: 50ch; }
.sf-root .sfx-order-card { background: var(--sf-surface); color: var(--sf-text); border-radius: calc(var(--sf-radius) + 6px); padding: clamp(20px, 3vw, 28px); box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.sf-root .sfx-order-card__status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sf-root .sfx-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg)); }
.sf-root .sfx-order-card__today { font-size: 13px; color: var(--sf-text-light); }
.sf-root .sfx-order-card__title { font-family: var(--sf-heading); font-size: 22px; font-weight: 700; margin: 16px 0 12px; line-height: 1.2; }
.sf-root .sfx-order-card__rows { list-style: none; display: grid; gap: 2px; margin-bottom: 18px; }
.sf-root .sfx-order-card__rows li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--sf-border); }
.sf-root .sfx-order-card__rows strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-text-light); }
.sf-root .sfx-order-card__rows em { display: block; font-style: normal; font-weight: 600; font-size: 15px; }
.sf-root .sfx-order-card__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg)); flex: 0 0 auto; }
.sf-root .sfx-order-card__call { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--sf-primary); min-height: 44px; }
@media (min-width: 900px) { .sf-root .sfx-hero-order__grid { grid-template-columns: 1.25fr .85fr; gap: 56px; } }

/* ── hero: COLLAGE ──────────────────────────────────────────────────────── */
.sf-root .sfx-hero-collage { padding: clamp(36px, 6vw, 84px) 0; background: linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)), var(--sf-bg)); }
.sf-root .sfx-hero-collage__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.sf-root .sfx-hero-collage__copy h1 { font-family: var(--sf-heading); font-size: clamp(38px, 6vw, 66px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 16px; color: var(--sf-text); }
.sf-root .sfx-hero-collage__copy p { font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.7; color: var(--sf-text-light); margin-bottom: 24px; max-width: 48ch; }
.sf-root .sfx-collage { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 5 / 4; }
.sf-root .sfx-collage__t { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--sf-radius) + 8px); box-shadow: 0 18px 44px color-mix(in srgb, var(--sf-primary) 18%, transparent); }
.sf-root .sfx-collage__t0 { grid-row: 1 / span 2; }
.sf-root .sfx-collage__photo { display: block; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .sfx-collage__t2.sfx-collage__photo { background-position: 80% 30%; }
@media (min-width: 900px) { .sf-root .sfx-hero-collage__grid { grid-template-columns: 1fr 1.05fr; gap: 56px; } }

/* ── hero: NOIR ─────────────────────────────────────────────────────────── */
.sf-root .sfx-hero-noir { position: relative; color: #f5f1e8; text-align: center; padding: clamp(72px, 12vw, 150px) 0; min-height: min(86vh, 760px); display: flex; align-items: center; background-color: #0e0d0b; background-image:
  linear-gradient(180deg, rgba(10,9,8,.72), rgba(10,9,8,.86)), var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .sfx-hero-noir__inner { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: flex; flex-direction: column; align-items: center; }
.sf-root .sfx-hero-noir__logo { width: 76px; height: 76px; border-radius: 50%; object-fit: contain; margin-bottom: 26px; border: 1px solid color-mix(in srgb, var(--sf-accent) 60%, transparent); padding: 4px; background: #fff; }
.sf-root .sfx-hero-noir__eyebrow { font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 22px; }
.sf-root .sfx-hero-noir h1 { font-family: var(--sf-heading); font-weight: 500; font-size: clamp(42px, 8vw, 96px); line-height: 1; letter-spacing: .01em; color: #fff; }
.sf-root .sfx-hero-noir__rule { display: block; width: 72px; height: 1px; background: var(--sf-accent); margin: 30px auto; }
.sf-root .sfx-hero-noir__lead { font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.8; color: rgba(245,241,232,.78); max-width: 54ch; margin-bottom: 30px; }
.sf-root .sfx-hero-noir .sfx-actions, .sf-root .sfx-hero-noir .sfx-chips { justify-content: center; }
.sf-root .sfx-hero-noir .sf-btn { background: var(--sf-accent); color: var(--sf-on-accent, #fff) !important; box-shadow: none; }
.sf-root .sfx-hero-noir .sfx-btn-ghost--light { border-color: color-mix(in srgb, var(--sf-accent) 60%, transparent); background: transparent; }

/* ── hero: POSTER ───────────────────────────────────────────────────────── */
.sf-root .sfx-hero-poster { background: var(--sf-primary); color: #fff; padding: clamp(40px, 7vw, 90px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.sf-root .sfx-hero-poster__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.sf-root .sfx-hero-poster__tag { display: inline-block; background: var(--sf-accent); color: var(--sf-on-accent, #fff); font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; transform: rotate(-2deg); margin-bottom: 18px; }
.sf-root .sfx-hero-poster h1 { font-family: var(--sf-heading); text-transform: uppercase; font-weight: 800; font-size: clamp(50px, 11vw, 148px); line-height: .88; letter-spacing: -0.02em; color: #fff; overflow-wrap: anywhere; }
.sf-root .sfx-hero-poster p { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: rgba(255,255,255,.84); margin: 20px 0 26px; max-width: 46ch; }
.sf-root .sfx-hero-poster .sf-btn { background: var(--sf-accent); color: var(--sf-on-accent, #fff) !important; box-shadow: none; }
.sf-root .sfx-hero-poster__art { position: relative; justify-self: center; width: min(100%, 460px); }
.sf-root .sfx-hero-poster__photo { display: block; aspect-ratio: 1 / 1; border-radius: calc(var(--sf-radius) + 10px); transform: rotate(3deg); background-color: var(--sf-primary-dark); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 16px 16px 0 var(--sf-accent); }
.sf-root .sfx-sticker { position: absolute; left: -10px; bottom: -18px; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 14px; background: #fff; color: var(--sf-primary) !important; font-family: var(--sf-heading); font-weight: 800; text-transform: uppercase; font-size: 16px; line-height: 1.05; transform: rotate(-12deg); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.sf-root .sfx-sticker:hover { transform: rotate(-4deg) scale(1.04); }
@media (min-width: 900px) { .sf-root .sfx-hero-poster__grid { grid-template-columns: 1.2fr .8fr; gap: 48px; } }

/* ── hero: MASTHEAD (food magazine cover) ───────────────────────────────── */
.sf-root .sfx-hero-mast { padding: clamp(22px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); background: var(--sf-bg); border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-mast__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 10px 0; border-top: 3px solid var(--sf-text); border-bottom: 1px solid var(--sf-text); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sf-text); }
.sf-root .sfx-mast__name { font-family: var(--sf-heading); font-weight: 700; font-size: clamp(52px, 12.5vw, 176px); line-height: .9; letter-spacing: -0.045em; color: var(--sf-text); margin: clamp(14px, 2.4vw, 26px) 0 clamp(18px, 3vw, 34px); overflow-wrap: anywhere; }
.sf-root .sfx-mast__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3.6vw, 44px); }
.sf-root .sfx-mast__cover { position: relative; min-height: 280px; aspect-ratio: 4 / 3; }
.sf-root .sfx-mast__photo { position: absolute; inset: 0; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; border-radius: var(--sf-radius); }
.sf-root .sfx-mast__stamp { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; background: var(--sf-accent); color: var(--sf-on-accent, #fff); padding: 10px 14px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sf-root .sfx-mast__stamp strong { font-size: 14px; letter-spacing: .02em; text-transform: none; }
.sf-root .sfx-mast__side { min-width: 0; }
.sf-root .sfx-mast__lead { font-family: var(--sf-heading); font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--sf-text); margin-bottom: 22px; max-width: 40ch; }
.sf-root .sfx-mast__issue { margin-top: 28px; border-top: 3px solid var(--sf-text); }
.sf-root .sfx-mast__label { font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--sf-accent); padding: 12px 0 4px; }
.sf-root .sfx-mast__issue ol { list-style: none; }
.sf-root .sfx-mast__issue a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--sf-border); color: var(--sf-text); }
.sf-root .sfx-mast__issue a:hover strong { color: var(--sf-accent); }
.sf-root .sfx-mast__n { font-family: var(--sf-heading); font-size: 20px; font-weight: 700; color: var(--sf-accent); font-variant-numeric: tabular-nums; }
.sf-root .sfx-mast__t strong { display: block; font-family: var(--sf-heading); font-size: 18px; font-weight: 600; line-height: 1.25; transition: color .15s ease; }
.sf-root .sfx-mast__t em { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 13.5px; color: var(--sf-text-light); margin-top: 2px; }
.sf-root .sfx-mast__p { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .sf-root .sfx-mast__grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .sf-root .sfx-mast__cover { aspect-ratio: auto; height: 100%; min-height: 520px; }
}

/* ── hero: SHOWCASE (pastry window) ─────────────────────────────────────── */
.sf-root .sfx-hero-case { padding: clamp(40px, 7vw, 96px) 0; background:
  radial-gradient(700px 420px at 0% 100%, color-mix(in srgb, var(--sf-accent) 10%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)), var(--sf-bg)); }
.sf-root .sfx-case__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.sf-root .sfx-case__art { position: relative; width: min(100%, 440px); justify-self: center; aspect-ratio: 4 / 5; }
.sf-root .sfx-case__arch, .sf-root .sfx-case__frame { position: absolute; inset: 0; border-radius: 999px 999px var(--sf-radius) var(--sf-radius); }
.sf-root .sfx-case__arch { background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 0 30px 60px color-mix(in srgb, var(--sf-primary) 22%, transparent); }
.sf-root .sfx-case__frame { transform: translate(14px, 14px); border: 1.5px solid var(--sf-accent); }
.sf-root .sfx-case__tag { position: absolute; z-index: 1; display: grid; gap: 2px; max-width: 190px; padding: 12px 16px 12px 22px; background: var(--sf-surface); color: var(--sf-text); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.14); font-size: 13px; transition: transform .2s ease; }
.sf-root .sfx-case__tag::before { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sf-accent); }
.sf-root .sfx-case__tag:hover { transform: translateY(-3px); }
.sf-root .sfx-case__tag strong { font-family: var(--sf-heading); font-size: 16px; font-weight: 600; line-height: 1.2; }
.sf-root .sfx-case__tag em { font-style: normal; font-weight: 700; color: var(--sf-accent); font-variant-numeric: tabular-nums; }
.sf-root .sfx-case__tag0 { left: -8px; top: 22%; }
.sf-root .sfx-case__tag1 { right: -8px; bottom: 14%; }
.sf-root .sfx-case__copy { text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sf-root .sfx-case__orn { font-size: 18px; color: var(--sf-accent); margin-bottom: 16px; }
.sf-root .sfx-case__logo { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; margin-bottom: 18px; border: 1px solid var(--sf-border); background: #fff; }
.sf-root .sfx-case__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 18px; }
.sf-root .sfx-hero-case h1 { font-family: var(--sf-heading); font-weight: 600; font-size: clamp(44px, 7.4vw, 92px); line-height: 1; letter-spacing: -0.01em; color: var(--sf-text); overflow-wrap: anywhere; }
.sf-root .sfx-case__lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--sf-text-light); max-width: 46ch; margin: 22px 0 28px; }
.sf-root .sfx-case__copy .sfx-actions, .sf-root .sfx-case__copy .sfx-chips { justify-content: center; }
.sf-root .sfx-case__copy::after { content: ''; display: block; width: 56px; height: 1px; background: var(--sf-accent); margin-top: 28px; }
@media (max-width: 480px) { .sf-root .sfx-case__art { width: calc(100% - 28px); } .sf-root .sfx-case__tag { max-width: 150px; padding: 10px 12px 10px 20px; } .sf-root .sfx-case__tag strong { font-size: 14px; } }
@media (min-width: 900px) { .sf-root .sfx-case__grid { grid-template-columns: .9fr 1.1fr; } }

/* ── hero: AISLE (grocery front) ────────────────────────────────────────── */
.sf-root .sfx-hero-aisle { padding: clamp(28px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); background: linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg)), var(--sf-bg) 78%); }
.sf-root .sfx-aisle__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.sf-root .sfx-aisle__copy { min-width: 0; align-self: center; }
.sf-root .sfx-aisle__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-primary); margin-bottom: 16px; }
.sf-root .sfx-aisle__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-accent); }
.sf-root .sfx-hero-aisle h1 { font-family: var(--sf-heading); font-weight: 800; font-size: clamp(38px, 6.4vw, 70px); line-height: 1.02; letter-spacing: -0.035em; color: var(--sf-text); margin-bottom: 14px; overflow-wrap: anywhere; }
.sf-root .sfx-hero-aisle .sfx-hero-lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--sf-text-light); max-width: 50ch; margin-bottom: 22px; }
.sf-root .sfx-aisle__pick { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 6px); padding: 16px; box-shadow: 0 20px 50px color-mix(in srgb, var(--sf-primary) 12%, transparent); display: flex; flex-direction: column; gap: 12px; max-width: 420px; width: 100%; justify-self: center; }
.sf-root .sfx-aisle__label { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .sfx-aisle__pickimg { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--sf-radius); overflow: hidden; background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-bg)); }
.sf-root .sfx-aisle__pickimg img { width: 100%; height: 100%; object-fit: cover; }
.sf-root .sfx-aisle__emoji { font-size: 72px; line-height: 1; }
.sf-root .sfx-aisle__pickrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-root .sfx-aisle__pickrow strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.sf-root .sfx-aisle__pickrow em { display: block; font-style: normal; font-weight: 800; color: var(--sf-primary); margin-top: 2px; }
.sf-root .sfx-aisle__pickrow .sf-btn { min-height: 44px; flex: 0 0 auto; }
.sf-root .sfx-aisle__nav { margin-top: clamp(24px, 4vw, 40px); }
.sf-root .sfx-aisle__nav .sfx-aisle__label { margin-bottom: 12px; }
.sf-root .sfx-aisle__row { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.sf-root .sfx-aisle__row li { scroll-snap-align: start; }
.sf-root .sfx-aisle__tile { display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: var(--sf-radius); background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-text); transition: border-color .15s ease, transform .15s ease; min-height: 44px; }
.sf-root .sfx-aisle__tile:hover { border-color: var(--sf-primary); transform: translateY(-2px); }
.sf-root .sfx-aisle__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; overflow: hidden; background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg)); margin-bottom: 6px; }
.sf-root .sfx-aisle__ic img { width: 100%; height: 100%; object-fit: cover; }
.sf-root .sfx-aisle__tile strong { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.sf-root .sfx-aisle__tile em { font-style: normal; font-size: 12.5px; color: var(--sf-text-light); }
@media (min-width: 900px) {
  .sf-root .sfx-aisle__top { grid-template-columns: 1.3fr .8fr; gap: 48px; }
  .sf-root .sfx-aisle__row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .sf-root .sfx-aisle__tile:hover, .sf-root .sfx-case__tag:hover { transform: none; } }

/* ── hero: BILL (street-food board) ─────────────────────────────────────── */
.sf-root .sfx-hero-bill { position: relative; color: #fff; padding: clamp(44px, 7vw, 96px) 0 clamp(48px, 7vw, 100px); background:
  radial-gradient(600px 400px at 100% 100%, color-mix(in srgb, var(--sf-accent) 45%, transparent), transparent 70%),
  var(--sf-primary); overflow: hidden; }
.sf-root .sfx-bill__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.sf-root .sfx-bill__copy { min-width: 0; }
.sf-root .sfx-bill__tag { display: inline-block; background: #E8A317; color: #1d1405; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 8px; margin-bottom: 18px; }
.sf-root .sfx-hero-bill h1 { font-family: var(--sf-heading); font-weight: 800; font-size: clamp(46px, 8.8vw, 116px); line-height: .92; letter-spacing: -0.04em; color: #fff; overflow-wrap: anywhere; }
.sf-root .sfx-hero-bill .sfx-hero-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: rgba(255,255,255,.88); margin: 20px 0 26px; max-width: 46ch; }
.sf-root .sfx-hero-bill .sf-btn { background: var(--sf-accent); color: var(--sf-on-accent, #fff) !important; box-shadow: none; }
.sf-root .sfx-bill__board { background: #FFFBF2; color: #231A12; border-radius: calc(var(--sf-radius) + 2px); padding: clamp(18px, 3vw, 28px); box-shadow: 0 30px 70px rgba(0,0,0,.3); transform: rotate(-1.2deg); border-top: 10px solid #E8A317; }
.sf-root .sfx-bill__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sf-root .sfx-bill__head p { font-family: var(--sf-heading); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.sf-root .sfx-bill__board ul { list-style: none; }
.sf-root .sfx-bill__board li { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed #E2D2B6; }
.sf-root .sfx-bill__row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 13px 0; color: #231A12; min-height: 44px; }
.sf-root .sfx-bill__name { font-weight: 700; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .sfx-bill__dots { flex: 1; min-width: 16px; border-bottom: 2px dotted #CDB994; transform: translateY(-4px); }
.sf-root .sfx-bill__price { font-family: var(--sf-heading); font-weight: 800; font-size: 17px; color: var(--sf-primary); font-variant-numeric: tabular-nums; }
.sf-root .sfx-bill__add { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--sf-accent); color: var(--sf-on-accent, #fff); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; position: relative; }
.sf-root .sfx-bill__add::after { content: ''; position: absolute; inset: -4px; }
.sf-root .sfx-bill__add:hover { filter: brightness(.92); }
.sf-root .sfx-bill__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-weight: 800; color: var(--sf-accent); }
.sf-root .sfx-bill__photo { display: block; aspect-ratio: 1 / 1; width: min(100%, 440px); justify-self: center; border-radius: 50% 50% var(--sf-radius) var(--sf-radius); background-color: var(--sf-primary-dark); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 0 0 0 10px #E8A317, 0 0 0 20px var(--sf-accent); }
@media (min-width: 900px) { .sf-root .sfx-bill__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
@media (prefers-reduced-motion: reduce) { .sf-root .sfx-bill__board { transform: none; } }

/* ── broken images: never show alt text in a frame ──────────────────────── */
.sf-root img.sf-img-broken { opacity: 0; }
.sf-root .sf-img-fallback { background-color: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)) !important; background-image: linear-gradient(135deg, color-mix(in srgb, var(--sf-accent) 14%, transparent), transparent 60%) !important; }

/* ══ MENU PAGE ══════════════════════════════════════════════════════════════
   Each design opens its categories its own way (recipe.menuSection) and some
   get a sticky index beside the dishes on desktop (recipe.menuIndex). */

/* Category headings. The template's own .sf-menu-cat h2 flourishes are for
   the old heading; these reset them so each style draws cleanly. */
.sf-root .sf-menu-cat .sfx-mh { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; }
.sf-root .sf-menu-cat .sfx-mh .sfx-mh__title { display: block; margin: 0; padding: 0; border: 0; font-family: var(--sf-heading); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; letter-spacing: -0.02em; color: var(--sf-text); }
.sf-root .sf-menu-cat .sfx-mh .sfx-mh__title::before { display: none; }
.sf-root .sfx-mh__titles { flex: 1 1 260px; min-width: 0; }
.sf-root .sfx-mh__kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 6px; }
.sf-root .sfx-mh__desc { font-size: 15px; line-height: 1.6; color: var(--sf-text-light); margin-top: 8px; max-width: 60ch; }
.sf-root .sfx-mh__count { font-size: 13px; font-weight: 700; color: var(--sf-text-light); white-space: nowrap; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.sf-root .sfx-mh__deal { margin-top: 0; background: color-mix(in srgb, #16a34a 10%, var(--sf-surface)); box-shadow: none; }

/* rule — a hairline under a left-set title (editorial, bakehouse, roastery) */
.sf-root .sf-menu-cat .sfx-mh--rule { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--sf-text) 22%, transparent); }
/* caps — poster type over a thick accent bar (slice joint, burger bar) */
.sf-root .sf-menu-cat .sfx-mh--caps { padding-bottom: 12px; border-bottom: 4px solid var(--sf-accent); }
.sf-root .sf-menu-cat .sfx-mh--caps .sfx-mh__title { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(30px, 4.4vw, 46px); }
/* ornament — centred, a small star between two rules (bistro, patisserie) */
.sf-root .sf-menu-cat .sfx-mh--ornament { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sf-root .sf-menu-cat .sfx-mh--ornament .sfx-mh__titles { flex: 0 1 auto; }
.sf-root .sf-menu-cat .sfx-mh--ornament .sfx-mh__desc { margin-left: auto; margin-right: auto; font-style: italic; }
.sf-root .sfx-mh__orn { display: flex; align-items: center; gap: 12px; color: var(--sf-accent); font-size: 13px; }
.sf-root .sfx-mh__orn::before, .sf-root .sfx-mh__orn::after { content: ''; width: 44px; height: 1px; background: color-mix(in srgb, var(--sf-accent) 60%, transparent); }
.sf-root .sf-menu-cat .sfx-mh--ornament .sfx-mh__count { padding: 0; }
/* ink — a vermilion seal beside the title, hairline under (izakaya) */
.sf-root .sf-menu-cat .sfx-mh--ink { align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-mh__seal { width: 30px; height: 30px; border-radius: 3px; background: var(--sf-accent); transform: rotate(-4deg); flex: 0 0 auto; box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 22%, transparent); }
/* stripe — a colour tab over the rule (corner market, taqueria) */
.sf-root .sf-menu-cat .sfx-mh--stripe { position: relative; padding-top: 18px; border-top: 2px solid var(--sf-border); }
.sf-root .sf-menu-cat .sfx-mh--stripe::before { content: ''; position: absolute; left: 0; top: -2px; width: 72px; height: 5px; border-radius: 0 0 4px 4px; background: var(--sf-primary); }
.sf-root .sf-menu-cat .sfx-mh--stripe .sfx-mh__count { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-surface)); color: var(--sf-primary); }

/* The photo banner, slimmer and calmer than before. The locked designs
   (data-locked) keep every original rule, so none of these touch them. */
.sf-root:not([data-locked]) .sf-cat-banner { min-height: clamp(120px, 22vw, 176px); border-radius: calc(var(--sf-radius) + 4px); }

/* Dish rows: bigger, readable type. */
.sf-root:not([data-locked]) .sf-menu-item-name { font-size: 17px; line-height: 1.3; }
.sf-root:not([data-locked]) .sf-menu-item-desc { font-size: 14.5px; line-height: 1.55; }
.sf-root:not([data-locked]) .sf-menu-item .sf-price { font-size: 16px; }
.sf-root:not([data-locked]) .sf-menu-grid { align-items: stretch; }

/* A dish with no photo is a text card: a thin accent rule, a soft wash, and
   the add button beside the price — no empty picture box. */
.sf-root .sf-menu-item.no-photo { background: color-mix(in srgb, var(--sf-primary) 3%, var(--sf-surface)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sf-accent) 70%, transparent); }
.sf-root .sf-menu-item.no-photo, .sf-root[data-menu-layout] .sf-menu-item.no-photo { padding: 0; }
.sf-root .sf-menu-item.no-photo .sf-menu-item-details, .sf-root[data-menu-layout] .sf-menu-item.no-photo .sf-menu-item-details { padding: 16px 16px 14px 20px; }
.sf-root .sf-menu-item.no-photo .sf-menu-item-desc { margin-bottom: 10px; }
.sf-root .sf-menu-item.no-photo .sf-menu-item-bottom { justify-content: space-between; }
.sf-root .sf-add.sf-add-inline { position: static; width: 40px; height: 40px; flex: 0 0 auto; margin-left: auto; box-shadow: none; background: var(--sf-primary); color: var(--sf-on-primary, #fff); border-color: var(--sf-primary); }
.sf-root .sf-add.sf-add-inline:hover { background: var(--sf-primary-dark); }
.sf-root .sf-menu-item.no-photo .sf-unavail-pill { margin-left: auto; }

/* Home dish cards with no photo: the initial as a monogram on a brand wash. */
.sf-root .sf-card-img.is-empty { background:
  linear-gradient(160deg, color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface)), color-mix(in srgb, var(--sf-primary) 14%, var(--sf-surface))) !important; }
.sf-root .sf-card-img.is-empty::before, .sf-root .sf-card-img.is-empty::after { display: none !important; }
.sf-root .sf-card-mono { font-family: var(--sf-heading); font-size: 64px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--sf-primary) 55%, transparent); }

/* Page headers the menu shares with the rest of each design. */
.sf-root .sfx-menu-noir { background-color: #0e0d0b; background-image: linear-gradient(180deg, rgba(10,9,8,.8), rgba(10,9,8,.9)), var(--sf-hero-photo, none); background-size: cover; background-position: center; color: #f5f1e8; text-align: center; padding: clamp(56px, 8vw, 96px) 0; }
.sf-root .sfx-menu-noir__eyebrow { font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 18px; }
.sf-root .sfx-menu-noir h1 { font-family: var(--sf-heading); font-weight: 500; font-size: clamp(40px, 6.4vw, 76px); line-height: 1; color: #fff; }
.sf-root .sfx-menu-noir__rule { display: block; width: 64px; height: 1px; background: var(--sf-accent); margin: 24px auto; }
.sf-root .sfx-menu-noir p:last-child { font-size: 15px; color: rgba(245,241,232,.78); }
.sf-root .sfx-menu-block { background: var(--sf-primary); color: #fff; padding: clamp(36px, 5vw, 60px) 0; overflow: hidden; }
.sf-root .sfx-menu-block__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.sf-root .sfx-menu-block__tag { display: inline-block; background: var(--sf-accent); color: var(--sf-on-accent, #fff); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; margin-bottom: 14px; }
.sf-root .sfx-menu-block h1 { font-family: var(--sf-heading); font-weight: 800; font-size: clamp(38px, 6vw, 68px); line-height: .98; letter-spacing: -0.035em; color: #fff; }
.sf-root .sfx-menu-block p { font-size: 16.5px; color: rgba(255,255,255,.86); margin-top: 14px; max-width: 48ch; }
.sf-root .sfx-menu-block__photo { display: none; height: 200px; border-radius: calc(var(--sf-radius) + 6px); background-color: var(--sf-primary-dark); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 12px 12px 0 color-mix(in srgb, var(--sf-accent) 80%, transparent); }
@media (min-width: 900px) { .sf-root .sfx-menu-block__grid { grid-template-columns: 1.3fr .7fr; gap: 48px; } .sf-root .sfx-menu-block__photo { display: block; } }
.sf-root .sfx-menu-mast { padding: clamp(24px, 4vw, 40px) 0 clamp(30px, 4vw, 48px); background: var(--sf-bg); }
.sf-root .sfx-menu-mast h1 { font-family: var(--sf-heading); font-weight: 700; font-size: clamp(52px, 10vw, 132px); line-height: .9; letter-spacing: -0.045em; color: var(--sf-text); margin: 18px 0 14px; }
.sf-root .sfx-menu-mast p { font-family: var(--sf-heading); font-size: clamp(18px, 1.8vw, 22px); color: var(--sf-text-light); }

/* Desktop index beside the dishes. */
.sf-root .sfx-menu-index { display: none; }
@media (min-width: 1024px) {
  .sf-root .sf-menu-wrap.has-index { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .sf-root .sfx-menu-index { display: block; position: sticky; top: 150px; }
  .sf-root .sfx-menu-index__label { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 12px; }
  .sf-root .sfx-menu-index ol { list-style: none; border-top: 1px solid var(--sf-border); }
  .sf-root .sfx-menu-index button { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--sf-border); background: none; font-size: 15px; font-weight: 600; color: var(--sf-text-light); cursor: pointer; transition: color .15s ease; }
  .sf-root .sfx-menu-index button span { font-family: var(--sf-heading); font-size: 13px; color: var(--sf-accent); min-width: 22px; font-variant-numeric: tabular-nums; }
  .sf-root .sfx-menu-index button em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--sf-text-light); opacity: .8; }
  .sf-root .sfx-menu-index button:hover, .sf-root .sfx-menu-index button.is-on { color: var(--sf-text); }
  .sf-root .sfx-menu-index button.is-on { box-shadow: inset 3px 0 0 var(--sf-primary); padding-left: 12px; }
  /* The chip bar is the phone's index; with the side index it is redundant. */
  .sf-root:has(.sf-menu-wrap.has-index) .sf-catnav { display: none; }
  .sf-root .sf-menu-wrap.has-index .sf-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-root[data-menu-layout="list"] .sf-menu-wrap.has-index .sf-menu-grid { grid-template-columns: 1fr; }
}
.sf-root .sf-menu-main { min-width: 0; }
/* Reserve: the page header sits above, so the form column starts closer. */
.sf-root .sf-reserve-page.has-band { padding-top: clamp(24px, 4vw, 44px); min-height: 0; }

/* ── dish search (Menu page, every design) ─────────────────────────────── */
.sf-root .sf-search { margin: 0 0 28px; }
/* The search sits at the top of the menu, above the category chips. */
.sf-root .sf-search-top { padding: 20px 24px 8px; background: var(--sf-bg); }
.sf-root .sf-search-top .sf-search { max-width: 1200px; margin: 0 auto; }
.sf-root .sf-search-top .sf-search__count:empty { min-height: 0; margin-top: 0; }
.sf-root .sf-search-top + .sf-catnav, .sf-root .sf-search-top ~ .sf-menu-wrap { border-top: 0; }
@media (max-width: 640px) { .sf-root .sf-search-top { padding: 14px 16px 6px; } }
.sf-root .sf-search-cats { margin-bottom: 28px; }
.sf-root .sf-search-cats__row { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-root .sf-search-cat { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; line-height: 1.2; border-radius: var(--sf-btn-radius); border: 1.5px solid var(--sf-border); background: var(--sf-surface); color: var(--sf-text); font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sf-root .sf-search-cat:hover, .sf-root .sf-search-cat:focus-visible { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface)); }
.sf-root .sf-search-cat em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--sf-text-light); }
.sf-root .sf-search__field { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; background: var(--sf-surface); color: var(--sf-text-light); border: 1.5px solid var(--sf-border); border-radius: var(--sf-btn-radius); box-shadow: 0 8px 24px -18px rgba(0,0,0,.4); transition: border-color .15s ease, box-shadow .15s ease; }
.sf-root .sf-search__field:focus-within { border-color: var(--sf-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-primary) 16%, transparent); color: var(--sf-primary); }
.sf-root .sf-search__field input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--sf-text); }
.sf-root .sf-search__field input::-webkit-search-cancel-button { display: none; }
.sf-root .sf-search__clear { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--sf-text) 8%, transparent); color: var(--sf-text); flex: 0 0 auto; }
.sf-root .sf-search__count { min-height: 1.4em; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--sf-text-light); }
.sf-root .sf-search__empty { text-align: center; padding: 40px 16px; border: 1.5px dashed var(--sf-border); border-radius: var(--sf-radius); }
.sf-root .sf-search__empty p { color: var(--sf-text-light); margin-bottom: 16px; font-size: 15.5px; }

/* ── facts band ─────────────────────────────────────────────────────────── */
.sf-root .sfx-facts { padding: 26px 0 0; }

/* ── welcome: quote ─────────────────────────────────────────────────────── */
.sf-root .sfx-welcome-quote figure { text-align: center; }
.sf-root .sfx-quote-mark { display: block; font-family: var(--sf-heading); font-size: 96px; line-height: .6; color: var(--sf-accent); margin-bottom: 6px; }
.sf-root .sfx-welcome-quote blockquote { font-family: var(--sf-heading); font-size: clamp(21px, 2.8vw, 31px); line-height: 1.45; color: var(--sf-text); font-style: italic; white-space: pre-line; }
.sf-root .sfx-welcome-quote figcaption { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-light); }

/* ── welcome: split ─────────────────────────────────────────────────────── */
.sf-root .sfx-welcome-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sf-root .sfx-welcome-split h2 { font-family: var(--sf-heading); font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -0.03em; color: var(--sf-text); }
.sf-root .sfx-welcome-split__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--sf-border); }
.sf-root .sfx-welcome-split__facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-text-light); }
.sf-root .sfx-welcome-split__facts dd { font-weight: 600; font-size: 15px; margin-top: 3px; }
@media (min-width: 900px) { .sf-root .sfx-welcome-split { grid-template-columns: 1fr 1.2fr; gap: 64px; } }

/* Home "popular" grid: two across on a phone rather than eight full-width cards. */
@media (max-width: 768px) { .sf-root .sf-items.sfx-items-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ── category tiles ─────────────────────────────────────────────────────── */
.sf-root .sfx-cats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-root .sfx-cat { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--sf-radius); overflow: hidden; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)); }
.sf-root .sfx-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sf-root .sfx-cat:hover img { transform: scale(1.05); }
.sf-root .sfx-cat__emoji { display: grid; place-items: center; height: 100%; font-size: 44px; }
.sf-root .sfx-cat__copy { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
.sf-root .sfx-cat__copy strong { display: block; font-family: var(--sf-heading); font-size: 17px; line-height: 1.2; }
.sf-root .sfx-cat__copy em { font-style: normal; font-size: 12.5px; opacity: .85; }
.sf-root .sfx-cat:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
/* Two across on a phone: an odd last tile spans the row as a wide banner. */
@media (max-width: 759px) { .sf-root .sfx-cats li:last-child:nth-child(odd) { grid-column: 1 / -1; } .sf-root .sfx-cats li:last-child:nth-child(odd) .sfx-cat { aspect-ratio: 8 / 3; } }
@media (min-width: 760px) { .sf-root .sfx-cats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } }

/* ── menu board ─────────────────────────────────────────────────────────── */
.sf-root .sfx-board { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 56px; max-width: 1040px; margin: 0 auto; }
.sf-root .sfx-board li { border-bottom: 1px dashed color-mix(in srgb, var(--sf-text) 16%, transparent); }
.sf-root .sfx-board__row { display: block; width: 100%; text-align: left; background: none; padding: 18px 0; color: var(--sf-text); }
.sf-root .sfx-board__row:hover .sfx-board__name { color: var(--sf-primary); }
.sf-root .sfx-board__line { display: flex; align-items: baseline; gap: 10px; }
.sf-root .sfx-board__name { font-family: var(--sf-heading); font-size: 18.5px; font-weight: 700; line-height: 1.3; transition: color .15s ease; }
.sf-root .sfx-board__dots { flex: 1 1 auto; min-width: 20px; border-bottom: 2px dotted color-mix(in srgb, var(--sf-text) 22%, transparent); transform: translateY(-5px); }
.sf-root .sfx-board__price { font-weight: 700; color: var(--sf-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-root .sfx-board__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--sf-text-light); max-width: 60ch; }
.sf-root .sfx-board__row:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
@media (min-width: 900px) { .sf-root .sfx-board { grid-template-columns: 1fr 1fr; } }

/* ── gallery ────────────────────────────────────────────────────────────── */
.sf-root .sfx-gallery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 10px; }
.sf-root .sfx-gallery li.is-lead { grid-column: span 2; grid-row: span 2; }
.sf-root .sfx-gallery__tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-border); }
.sf-root .sfx-gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sf-root .sfx-gallery__tile:hover img { transform: scale(1.06); }
.sf-root .sfx-gallery__cap { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 5px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-root .sfx-gallery__tile:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
@media (min-width: 760px) { .sf-root .sfx-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; } }
@media (min-width: 760px) { .sf-root .sfx-gallery--3 { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 320px; } .sf-root .sfx-gallery--3 li.is-lead { grid-column: auto; grid-row: auto; } }

/* ── ticker ─────────────────────────────────────────────────────────────── */
.sf-root .sfx-ticker { overflow: hidden; background: var(--sf-accent); color: var(--sf-on-accent, #fff); padding: 14px 0; border-block: 2px solid color-mix(in srgb, var(--sf-accent) 70%, #000); }
.sf-root .sfx-ticker__track { display: flex; width: max-content; animation: sfx-marquee 38s linear infinite; }
.sf-root .sfx-ticker span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--sf-heading); font-weight: 800; font-size: clamp(16px, 2vw, 22px); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sf-root .sfx-ticker i { font-style: normal; opacity: .7; }
@keyframes sfx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sf-root .sfx-ticker__track { animation: none; } }

/* ── direct points ──────────────────────────────────────────────────────── */
.sf-root .sfx-points { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.sf-root .sfx-points li { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 22px; }
.sf-root .sfx-points h3 { font-family: var(--sf-heading); font-size: 18px; margin: 14px 0 6px; line-height: 1.25; }
.sf-root .sfx-points p { font-size: 14.5px; line-height: 1.6; color: var(--sf-text-light); }

/* ── visit ──────────────────────────────────────────────────────────────── */
.sf-root .sfx-visit { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.sf-root .sfx-visit__where { padding: 22px; }
.sf-root .sfx-visit__where h3 { font-family: var(--sf-heading); font-size: 19px; margin-bottom: 12px; }
.sf-root .sfx-visit__where address { font-style: normal; font-size: 15.5px; line-height: 1.65; margin-bottom: 8px; }
.sf-root .sfx-visit__tel { display: inline-block; font-weight: 700; color: var(--sf-primary); margin-bottom: 16px; }
.sf-root .sfx-map { display: block; width: 100%; border: 0; border-radius: var(--sf-radius); background: var(--sf-border); }
@media (min-width: 760px) { .sf-root .sfx-visit { grid-template-columns: 1fr 1fr; } .sf-root .sfx-visit.has-map .sfx-visit__map { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .sf-root .sfx-visit.has-map { grid-template-columns: 1fr 1fr 1.4fr; } .sf-root .sfx-visit.has-map .sfx-visit__map { grid-column: auto; } .sf-root .sfx-visit.has-map .sfx-map { height: 100% !important; min-height: 320px; } }

/* ── reviews ────────────────────────────────────────────────────────────── */
.sf-root .sfx-stars { color: #f5a524; letter-spacing: 2px; font-size: 16px; }
.sf-root .sfx-stars__off { color: color-mix(in srgb, var(--sf-text) 18%, transparent); }
.sf-root .sfx-rating { text-align: center; margin: -22px 0 28px; color: var(--sf-text-light); font-size: 15px; }
.sf-root .sfx-rating strong { color: var(--sf-text); margin: 0 4px; }
.sf-root .sfx-reviews { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sf-root .sfx-reviews li { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.sf-root .sfx-reviews p { font-size: 15.5px; line-height: 1.65; color: var(--sf-text); }
.sf-root .sfx-reviews span:last-child { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--sf-text-light); }

/* ── branches ───────────────────────────────────────────────────────────── */
.sf-root .sfx-locs { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; }
.sf-root .sfx-loc { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sf-root .sfx-loc__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg)); }
.sf-root .sfx-loc h3 { font-family: var(--sf-heading); font-size: 18px; line-height: 1.25; margin-top: 4px; }
.sf-root .sfx-loc address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--sf-text-light); }
.sf-root .sfx-loc__tel { font-weight: 700; color: var(--sf-primary); }
.sf-root .sfx-loc .sfx-actions { margin-top: auto; padding-top: 8px; }
@media (min-width: 700px) { .sf-root .sfx-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .sf-root .sfx-locs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

/* "Get the app" bar above the site header. */
.sf-root .sf-appbar { background: color-mix(in srgb, var(--sf-primary) 28%, #121212); color: #fff; }
.sf-root .sf-appbar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 16px; min-height: 60px; }
.sf-root .sf-appbar__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #fff; color: var(--sf-primary); font-weight: 800; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.sf-root .sf-appbar__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-root .sf-appbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sf-root .sf-appbar__txt strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-root .sf-appbar__txt > span { font-size: 12px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-root .sf-appbar__btns { flex-shrink: 0; display: flex; gap: 8px; }
.sf-root .sf-appbar__btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: #111; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.sf-root .sf-appbar__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.sf-root .sf-appbar__btn:focus-visible, .sf-root .sf-appbar__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sf-root .sf-appbar__close { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: .75; cursor: pointer; }
.sf-root .sf-appbar__close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.sf-root .sf-appbar__txt .sf-appbar__short { display: none; }
/* Phones: a short title; with two stores the buttons move to their own row,
   side by side and labelled, so neither is cut down to an icon. */
@media (max-width: 520px) {
  .sf-root .sf-appbar__txt .sf-appbar__long { display: none; }
  .sf-root .sf-appbar__txt .sf-appbar__short { display: inline; }
  .sf-root .sf-appbar__inner--two { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; }
  .sf-root .sf-appbar__inner--two .sf-appbar__btns { order: 3; width: 100%; padding-right: 10px; }
  .sf-root .sf-appbar__inner--two .sf-appbar__btn { flex: 1; justify-content: center; min-width: 0; }
  .sf-root .sf-appbar__btn { padding: 0 14px; }
}
/* Small phones: even one store button gets its own full-width row, so the
   title is never cut to "Get our …". */
@media (max-width: 420px) {
  .sf-root .sf-appbar__inner { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; }
  .sf-root .sf-appbar__btns { order: 3; width: 100%; padding-right: 10px; }
  .sf-root .sf-appbar__btn { flex: 1; justify-content: center; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sf-root .sf-appbar__btn { transition: none; } }

/* Branch finder (home): branch list beside a map of the selected branch. */
.sf-root .sfx-finder__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(20px, 3vw, 32px); text-align: left; }
.sf-root .sfx-finder__list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.sf-root .sfx-finder__item { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--sf-text); background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sf-root .sfx-finder__item:hover { border-color: color-mix(in srgb, var(--sf-primary) 45%, var(--sf-border)); }
.sf-root .sfx-finder__item:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.sf-root .sfx-finder__item.is-on { border-color: var(--sf-primary); box-shadow: 0 0 0 1px var(--sf-primary) inset, 0 10px 26px color-mix(in srgb, var(--sf-primary) 14%, transparent); background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-surface)); }
.sf-root .sfx-finder__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)); }
.sf-root .sfx-finder__item.is-on .sfx-finder__num { color: var(--sf-on-primary, #fff); background: var(--sf-primary); }
.sf-root .sfx-finder__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-root .sfx-finder__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--sf-heading); font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.sf-root .sfx-finder__tag { font-family: var(--sf-body, inherit); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-bg)); }
.sf-root .sfx-finder__addr { font-size: 14px; line-height: 1.5; color: var(--sf-text-light); }
.sf-root .sfx-finder__chev { flex-shrink: 0; font-size: 24px; line-height: 1; color: var(--sf-text-light); opacity: .6; }
.sf-root .sfx-finder__item.is-on .sfx-finder__chev { color: var(--sf-primary); opacity: 1; }
.sf-root .sfx-finder__panel { overflow: hidden; display: flex; flex-direction: column; }
.sf-root .sfx-finder__map { display: block; width: 100%; height: 220px; border: 0; background: color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)); }
.sf-root .sfx-finder__info { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.5vw, 26px); }
.sf-root .sfx-finder__info h3 { font-family: var(--sf-heading); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; }
.sf-root .sfx-finder__info address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--sf-text-light); margin-top: 4px; }
.sf-root .sfx-finder__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sf-root .sfx-finder__line { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; color: var(--sf-primary); }
.sf-root .sfx-finder__cta { width: 100%; justify-content: center; min-height: 50px; }
@media (min-width: 900px) {
  .sf-root .sfx-finder__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
  .sf-root .sfx-finder__grid--one { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .sf-root .sfx-finder__map { height: 300px; }
  .sf-root .sfx-finder__cta { width: auto; align-self: flex-start; padding-left: 28px; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sf-root .sfx-finder__item { transition: none; } }

/* ── order, chat & get the app ──────────────────────────────────────────── */
.sf-root .sfx-connect__card { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; padding: clamp(22px, 4vw, 40px); border-radius: calc(var(--sf-radius) + 8px); background: linear-gradient(135deg, color-mix(in srgb, var(--sf-primary) 8%, var(--sf-surface)), var(--sf-surface)); border: 1px solid var(--sf-border); }
.sf-root .sfx-connect__actions { display: grid; gap: 14px; }
.sf-root .sfx-connect .sf-ch-row { max-width: none; }
@media (min-width: 900px) { .sf-root .sfx-connect__card { grid-template-columns: 1.1fr 1fr; gap: 40px; } }

/* ── story teaser ───────────────────────────────────────────────────────── */
.sf-root .sfx-story { text-align: center; }
.sf-root .sfx-story .sfx-body { margin-left: auto; margin-right: auto; }
.sf-root .sfx-story-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.sf-root .sfx-story-split .sfx-eyebrow { text-align: left; }
.sf-root .sfx-story-split__photo { aspect-ratio: 4 / 3; border-radius: calc(var(--sf-radius) + 8px); background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
@media (min-width: 900px) { .sf-root .sfx-story-split { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.sf-root .sfx-cta { padding: clamp(44px, 7vw, 80px) 0; }
.sf-root .sfx-cta__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.sf-root .sfx-cta h2 { font-family: var(--sf-heading); font-size: clamp(26px, 4vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.sf-root .sfx-cta p { margin-top: 8px; font-size: 16px; }
.sf-root .sfx-cta--accent { background: radial-gradient(700px 260px at 100% 0%, color-mix(in srgb, var(--sf-accent) 34%, transparent), transparent 70%), var(--sf-primary); color: #fff; }
.sf-root .sfx-cta--accent h2 { color: #fff; }
.sf-root .sfx-cta--accent p { color: rgba(255,255,255,.85); }
.sf-root .sfx-cta--dark { background: color-mix(in srgb, var(--sf-text) 94%, #000); color: #fff; }
.sf-root .sfx-cta--dark h2 { color: #fff; }
.sf-root .sfx-cta--dark p { color: rgba(255,255,255,.72); }
.sf-root .sfx-cta--dark .sf-btn { background: var(--sf-accent); color: var(--sf-on-accent, #fff) !important; box-shadow: none; }
.sf-root .sfx-cta--outline { background: var(--sf-bg); border-top: 1px solid var(--sf-border); }
.sf-root .sfx-cta--outline .sfx-cta__inner { border: 1.5px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 6px); padding: clamp(24px, 4vw, 44px); max-width: calc(1200px - 64px); }
.sf-root .sfx-cta--outline p { color: var(--sf-text-light); }
@media (max-width: 640px) { .sf-root .sfx-cta__inner { flex-direction: column; align-items: flex-start; } .sf-root .sfx-cta--outline .sfx-cta__inner { margin: 0 16px; width: auto; } }

/* ── menu page headers ──────────────────────────────────────────────────── */
.sf-root .sfx-menu-type { padding: clamp(40px, 7vw, 88px) 0 clamp(20px, 3vw, 32px); }
.sf-root .sfx-menu-type h1 { font-family: var(--sf-heading); font-size: clamp(44px, 8vw, 96px); line-height: .95; letter-spacing: -0.04em; color: var(--sf-text); }
.sf-root .sfx-menu-type p { margin-top: 14px; font-size: 16.5px; color: var(--sf-text-light); max-width: 56ch; }
.sf-root .sfx-menu-board { padding: clamp(18px, 3vw, 28px) 0; }
.sf-root .sfx-menu-board__panel { background: color-mix(in srgb, var(--sf-text) 90%, #000); color: #f6f1e7; border-radius: calc(var(--sf-radius) + 6px); padding: clamp(26px, 5vw, 56px); text-align: center; box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--sf-accent) 34%, transparent); }
.sf-root .sfx-menu-board__panel p:first-child { font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .sfx-menu-board__panel h1 { font-family: var(--sf-heading); font-size: clamp(40px, 7vw, 80px); line-height: 1; margin: 12px 0; color: #fff; }
.sf-root .sfx-menu-board__panel p:last-child { color: rgba(246,241,231,.75); }

/* ── inner-page hero shells (About / Contact) ───────────────────────────── */
.sf-root .sfx-page { padding-bottom: clamp(40px, 7vw, 88px); }
.sf-root .sfx-sec { padding: clamp(40px, 6vw, 72px) 0 0; }
.sf-root .sfx-sec-head { margin-bottom: 22px; }
.sf-root .sfx-sec-head h2 { font-family: var(--sf-heading); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--sf-text); }
.sf-root .sfx-sec-head p { margin-top: 8px; font-size: 15.5px; line-height: 1.65; color: var(--sf-text-light); max-width: 60ch; }
.sf-root .sfx-page-photo { color: #fff; padding: clamp(60px, 10vw, 128px) 0 clamp(36px, 6vw, 64px); background-color: var(--sf-primary); background-image: linear-gradient(180deg, color-mix(in srgb, var(--sf-primary-dark) 40%, transparent), color-mix(in srgb, var(--sf-primary-dark) 88%, transparent)), var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .sfx-page-photo h1 { font-family: var(--sf-heading); font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; max-width: 18ch; }
.sf-root .sfx-page-photo p { margin-top: 14px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: rgba(255,255,255,.88); max-width: 56ch; }
.sf-root .sfx-page-photo .sfx-kicker { color: #fff; }
.sf-root .sfx-page-photo .sfx-rule { background: #fff; }
.sf-root .sfx-dl { display: grid; gap: 0; }
.sf-root .sfx-dl > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-text-light); }
.sf-root .sfx-dl dd { font-size: 16px; line-height: 1.6; color: var(--sf-text); }
.sf-root .sfx-dl dd a { color: var(--sf-primary); font-weight: 600; }
@media (min-width: 700px) { .sf-root .sfx-dl > div { grid-template-columns: 200px 1fr; gap: 24px; } }

/* ── About: EDITORIAL ───────────────────────────────────────────────────── */
.sf-root .sfx-ed-head { padding: clamp(48px, 8vw, 104px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-ed-head h1 { font-family: var(--sf-heading); font-size: clamp(40px, 7vw, 92px); line-height: .98; letter-spacing: -0.035em; color: var(--sf-text); max-width: 16ch; }
.sf-root .sfx-ed-head p { margin-top: 20px; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.6; color: var(--sf-text-light); max-width: 48ch; font-style: italic; font-family: var(--sf-heading); }
.sf-root .sfx-ed-body { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: clamp(32px, 5vw, 56px); }
.sf-root .sfx-ed-body .sfx-prose p { font-size: 17px; line-height: 1.85; color: var(--sf-text); margin-bottom: 18px; }
.sf-root .sfx-ed-body .sfx-prose p:first-child::first-letter { float: left; font-family: var(--sf-heading); font-size: 64px; line-height: .8; padding: 8px 10px 0 0; color: var(--sf-primary); font-weight: 700; }
.sf-root .sfx-pull { border-left: 3px solid var(--sf-accent); padding: 6px 0 6px 20px; font-family: var(--sf-heading); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--sf-text); font-style: italic; }
.sf-root .sfx-ed-aside { display: grid; gap: 16px; align-content: start; }
@media (min-width: 960px) { .sf-root .sfx-ed-body { grid-template-columns: 1.55fr 1fr; gap: 64px; } .sf-root .sfx-ed-aside { position: sticky; top: 96px; } }
.sf-root .sfx-figures { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.sf-root .sfx-figures a { display: block; }
.sf-root .sfx-figures img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sf-radius); }
.sf-root .sfx-figures figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.sf-root .sfx-figures figcaption strong { color: var(--sf-text); }
.sf-root .sfx-figures figcaption span { color: var(--sf-accent); font-weight: 700; white-space: nowrap; }

/* ── About: ZIGZAG ──────────────────────────────────────────────────────── */
.sf-root .sfx-zig { display: grid; gap: clamp(28px, 5vw, 56px); }
.sf-root .sfx-zig__row { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.sf-root .sfx-zig__media { aspect-ratio: 4 / 3; border-radius: calc(var(--sf-radius) + 8px); overflow: hidden; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .sfx-zig__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-root .sfx-zig__copy h2 { font-family: var(--sf-heading); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; margin-bottom: 12px; color: var(--sf-text); }
.sf-root .sfx-zig__copy p { font-size: 16px; line-height: 1.75; color: var(--sf-text-light); }
@media (min-width: 900px) { .sf-root .sfx-zig__row { grid-template-columns: 1fr 1fr; gap: 64px; } .sf-root .sfx-zig__row:nth-child(even) .sfx-zig__media { order: 2; } }

/* ── About: MANIFESTO ───────────────────────────────────────────────────── */
.sf-root .sfx-mani-head { background: color-mix(in srgb, var(--sf-text) 94%, #000); color: #fff; padding: clamp(64px, 10vw, 140px) 0 clamp(40px, 6vw, 72px); }
.sf-root .sfx-mani-head h1 { font-family: var(--sf-heading); font-size: clamp(44px, 9vw, 120px); line-height: .92; letter-spacing: -0.04em; text-transform: uppercase; color: #fff; max-width: 12ch; overflow-wrap: anywhere; }
.sf-root .sfx-mani-head p { margin-top: 22px; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: rgba(255,255,255,.76); max-width: 50ch; }
.sf-root .sfx-mani-list { list-style: none; counter-reset: mani; }
.sf-root .sfx-mani-list li { counter-increment: mani; display: grid; grid-template-columns: 1fr; gap: 8px; padding: clamp(22px, 3vw, 32px) 0; border-bottom: 2px solid var(--sf-text); }
.sf-root .sfx-mani-list li::before { content: counter(mani, decimal-leading-zero); font-family: var(--sf-heading); font-weight: 800; font-size: 15px; color: var(--sf-accent); }
.sf-root .sfx-mani-list p { font-family: var(--sf-heading); font-size: clamp(20px, 2.8vw, 30px); line-height: 1.3; color: var(--sf-text); font-weight: 600; }
@media (min-width: 800px) { .sf-root .sfx-mani-list li { grid-template-columns: 90px 1fr; gap: 24px; } }
.sf-root .sfx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 2px; background: var(--sf-text); border: 2px solid var(--sf-text); }
.sf-root .sfx-stats > div { background: var(--sf-bg); padding: 22px; }
.sf-root .sfx-stats dt { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-light); }
.sf-root .sfx-stats dd { margin-top: 6px; font-family: var(--sf-heading); font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.2; color: var(--sf-text); }

/* ── About / Contact: BENTO ─────────────────────────────────────────────── */
.sf-root .sfx-bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sf-root .sfx-bento > * { min-width: 0; }
.sf-root .sfx-tile { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: calc(var(--sf-radius) + 6px); padding: clamp(20px, 2.8vw, 28px); }
.sf-root .sfx-tile h2, .sf-root .sfx-tile h3 { font-family: var(--sf-heading); font-size: 19px; margin-bottom: 10px; color: var(--sf-text); line-height: 1.25; }
.sf-root .sfx-tile p { font-size: 15px; line-height: 1.7; color: var(--sf-text-light); }
.sf-root .sfx-tile--brand { background: var(--sf-primary); border-color: transparent; color: #fff; }
.sf-root .sfx-tile--brand h1, .sf-root .sfx-tile--brand h2, .sf-root .sfx-tile--brand h3 { color: #fff; }
.sf-root .sfx-tile--brand p { color: rgba(255,255,255,.86); }
.sf-root .sfx-tile--brand h1 { font-family: var(--sf-heading); font-size: clamp(32px, 5vw, 54px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 14px; }
.sf-root .sfx-tile--photo { padding: 0; overflow: hidden; min-height: 240px; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .sfx-tile--accent { background: color-mix(in srgb, var(--sf-accent) 14%, var(--sf-surface)); border-color: color-mix(in srgb, var(--sf-accent) 30%, var(--sf-border)); }
.sf-root .sfx-tile .sfx-big { font-family: var(--sf-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--sf-primary); line-height: 1.15; display: inline-block; margin: 4px 0 8px; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .sf-root .sfx-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sf-root .sfx-span-6 { grid-column: span 6; } .sf-root .sfx-span-4 { grid-column: span 4; } .sf-root .sfx-span-3 { grid-column: span 3; } .sf-root .sfx-span-2 { grid-column: span 2; }
}
@media (min-width: 760px) and (max-width: 1023px) { .sf-root .sfx-span-2 { grid-column: span 3; } .sf-root .sfx-span-4 { grid-column: span 6; } }

/* ── About / Contact: MINIMAL ───────────────────────────────────────────── */
.sf-root .sfx-min { max-width: 760px; margin: 0 auto; text-align: center; }
.sf-root .sfx-min-head { padding: clamp(56px, 9vw, 120px) 0 clamp(20px, 3vw, 32px); }
.sf-root .sfx-min-head .sfx-kicker { justify-content: center; }
.sf-root .sfx-min-head h1 { font-family: var(--sf-heading); font-weight: 500; font-size: clamp(38px, 6vw, 72px); line-height: 1.04; letter-spacing: .005em; color: var(--sf-text); }
.sf-root .sfx-min-orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--sf-accent); margin: 28px 0; }
.sf-root .sfx-min-orn::before, .sf-root .sfx-min-orn::after { content: ''; width: 60px; height: 1px; background: currentColor; }
.sf-root .sfx-min p.sfx-min-lead { font-size: 17.5px; line-height: 1.85; color: var(--sf-text-light); }
.sf-root .sfx-min .sfx-dl { text-align: left; margin-top: 18px; }
.sf-root .sfx-min-cta { margin-top: 34px; display: flex; justify-content: center; }

/* ── About: CHAPTERS ────────────────────────────────────────────────────── */
.sf-root .sfx-chapters { list-style: none; display: grid; gap: 0; counter-reset: ch; }
.sf-root .sfx-chapters > li { counter-increment: ch; display: grid; grid-template-columns: 1fr; gap: 12px; padding: clamp(26px, 4vw, 44px) 0; border-top: 1px solid var(--sf-border); }
.sf-root .sfx-chapters__num::before { content: 'Chapter ' counter(ch); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .sfx-chapters h2 { font-family: var(--sf-heading); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: var(--sf-text); margin-top: 6px; }
.sf-root .sfx-chapters p { font-size: 16.5px; line-height: 1.8; color: var(--sf-text-light); max-width: 62ch; }
@media (min-width: 900px) { .sf-root .sfx-chapters > li { grid-template-columns: 1fr 1.6fr; gap: 56px; } }

/* ── Contact: CONCIERGE ─────────────────────────────────────────────────── */
.sf-root .sfx-con-head { text-align: center; padding: clamp(52px, 8vw, 104px) 0 clamp(24px, 4vw, 40px); }
.sf-root .sfx-con-head h1 { font-family: var(--sf-heading); font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--sf-text); }
.sf-root .sfx-con-head p { margin: 14px auto 0; font-size: 17px; line-height: 1.65; color: var(--sf-text-light); max-width: 52ch; }
.sf-root .sfx-actiontiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.sf-root .sfx-actiontile { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(18px, 2.6vw, 26px); border-radius: calc(var(--sf-radius) + 6px); background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sf-root .sfx-actiontile:hover { transform: translateY(-3px); border-color: var(--sf-primary); box-shadow: 0 16px 36px rgba(16,24,40,.1); }
.sf-root .sfx-actiontile strong { font-family: var(--sf-heading); font-size: 18px; line-height: 1.2; }
.sf-root .sfx-actiontile span { font-size: 14px; color: var(--sf-text-light); overflow-wrap: anywhere; }
.sf-root .sfx-actiontile .sfx-actiontile__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--sf-on-primary, #fff); background: var(--sf-primary); }
@media (min-width: 900px) { .sf-root .sfx-actiontiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* ── Contact: TICKET ────────────────────────────────────────────────────── */
.sf-root .sfx-ticket-wrap { padding: clamp(36px, 6vw, 80px) 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)) 0 14px, var(--sf-bg) 14px 28px); }
.sf-root .sfx-ticket { position: relative; max-width: 620px; margin: 0 auto; background: var(--sf-surface); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.14); overflow: hidden; }
.sf-root .sfx-ticket__top { background: var(--sf-primary); color: #fff; padding: 26px clamp(20px, 4vw, 34px); text-align: center; }
.sf-root .sfx-ticket__top p { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.sf-root .sfx-ticket__top h1 { font-family: var(--sf-heading); text-transform: uppercase; font-size: clamp(30px, 5vw, 46px); line-height: 1; margin-top: 8px; color: #fff; overflow-wrap: anywhere; }
.sf-root .sfx-ticket__tear { position: relative; height: 0; border-top: 2px dashed var(--sf-border); margin: 0 22px; }
.sf-root .sfx-ticket__tear::before, .sf-root .sfx-ticket__tear::after { content: ''; position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-bg); }
.sf-root .sfx-ticket__tear::before { left: -36px; } .sf-root .sfx-ticket__tear::after { right: -36px; }
.sf-root .sfx-ticket__body { padding: clamp(18px, 4vw, 30px) clamp(20px, 4vw, 34px); }
.sf-root .sfx-ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--sf-border); font-size: 15px; }
.sf-root .sfx-ticket__row span:first-child { font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-light); white-space: nowrap; }
.sf-root .sfx-ticket__row span:last-child, .sf-root .sfx-ticket__row a { text-align: right; font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.sf-root .sfx-ticket__row a { color: var(--sf-primary); }
.sf-root .sfx-ticket__foot { display: grid; gap: 10px; padding: 0 clamp(20px, 4vw, 34px) clamp(22px, 4vw, 32px); }

/* ── Contact: DARK BAND ─────────────────────────────────────────────────── */
.sf-root .sfx-darkband { background: #0f0e0c; color: #f4efe6; padding: clamp(60px, 10vw, 132px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.sf-root .sfx-darkband p.sfx-darkband__eyebrow { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .sfx-darkband h1 { font-family: var(--sf-heading); font-weight: 500; font-size: clamp(34px, 6vw, 64px); line-height: 1.05; margin-top: 16px; color: #fff; }
.sf-root .sfx-darkband__tel { display: inline-block; margin-top: 26px; font-family: var(--sf-heading); font-size: clamp(28px, 5vw, 52px); color: var(--sf-accent) !important; letter-spacing: .02em; border-bottom: 1px solid color-mix(in srgb, var(--sf-accent) 50%, transparent); padding-bottom: 6px; }
.sf-root .sfx-darkband__lead { margin: 18px auto 0; max-width: 52ch; color: rgba(244,239,230,.72); line-height: 1.75; }
.sf-root .sfx-darkband-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .sf-root .sfx-darkband-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

/* ── Contact: MAP SPLIT ─────────────────────────────────────────────────── */
.sf-root .sfx-mapsplit { display: grid; grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-mapsplit__info { padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px); background: var(--sf-surface); }
.sf-root .sfx-mapsplit__info h1 { font-family: var(--sf-heading); font-size: clamp(32px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.02em; color: var(--sf-text); margin-bottom: 12px; }
.sf-root .sfx-mapsplit__info > p { font-size: 16px; line-height: 1.7; color: var(--sf-text-light); max-width: 50ch; }
.sf-root .sfx-mapsplit__map { min-height: 320px; background: var(--sf-border); }
.sf-root .sfx-mapsplit__map .sfx-map { height: 100% !important; min-height: 320px; border-radius: 0; }
.sf-root .sfx-mapsplit__noaddr { height: 100%; min-height: 320px; background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
@media (min-width: 960px) { .sf-root .sfx-mapsplit { grid-template-columns: 1fr 1.1fr; min-height: 560px; } }

/* ── Contact: CALL FIRST ────────────────────────────────────────────────── */
.sf-root .sfx-callhero { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); background: linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg)), var(--sf-bg)); }
.sf-root .sfx-callhero__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.sf-root .sfx-callhero h1 { font-family: var(--sf-heading); font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--sf-text); }
.sf-root .sfx-callhero p { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--sf-text-light); max-width: 50ch; }
.sf-root .sfx-callcard { background: var(--sf-primary); color: #fff; border-radius: calc(var(--sf-radius) + 8px); padding: clamp(22px, 4vw, 36px); box-shadow: 0 24px 60px color-mix(in srgb, var(--sf-primary) 30%, transparent); }
.sf-root .sfx-callcard small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.sf-root .sfx-callcard a.sfx-callcard__tel { display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 12px; font-family: var(--sf-heading); font-size: clamp(26px, 4.6vw, 42px); font-weight: 700; color: #fff !important; line-height: 1.1; overflow-wrap: anywhere; }
.sf-root .sfx-callcard p { color: rgba(255,255,255,.84); font-size: 14.5px; line-height: 1.6; margin: 0; }
@media (min-width: 900px) { .sf-root .sfx-callhero__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

/* ── FAQ (every Contact layout) ─────────────────────────────────────────── */
.sf-root .sfx-faq { display: grid; gap: 10px; }
.sf-root .sfx-faq details { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 0 18px; }
.sf-root .sfx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; min-height: 48px; }
.sf-root .sfx-faq summary::-webkit-details-marker { display: none; }
.sf-root .sfx-faq summary h3 { font-size: 15.5px; font-weight: 700; color: var(--sf-text); line-height: 1.4; }
.sf-root .sfx-faq summary::after { content: '+'; font-size: 22px; color: var(--sf-primary); flex: 0 0 auto; transition: transform .2s ease; }
.sf-root .sfx-faq details[open] summary::after { transform: rotate(45deg); }
.sf-root .sfx-faq details p { padding: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--sf-text-light); max-width: 68ch; }

/* ── More sheet (bottom tab bar) ────────────────────────────────────────── */
.sf-root .sfx-sheet { position: fixed; inset: 0; z-index: 1200; display: none; }
.sf-root .sfx-sheet.open { display: block; }
.sf-root .sfx-sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); border: 0; width: 100%; height: 100%; }
.sf-root .sfx-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto; background: var(--sf-surface); border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -18px 50px rgba(0,0,0,.25); animation: sfx-up .22s ease-out; }
@keyframes sfx-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sf-root .sfx-sheet__grab { display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--sf-border); margin: 4px auto 12px; }
.sf-root .sfx-sheet__title { font-family: var(--sf-heading); font-size: 18px; font-weight: 700; margin: 0 4px 8px; color: var(--sf-text); }
.sf-root .sfx-sheet__list { list-style: none; display: grid; }
.sf-root .sfx-sheet__list a, .sf-root .sfx-sheet__list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 12px 6px; background: none; font-size: 16px; font-weight: 600; color: var(--sf-text); text-align: left; border-bottom: 1px solid var(--sf-border); }
.sf-root .sfx-sheet__list li:last-child a, .sf-root .sfx-sheet__list li:last-child button { border-bottom: 0; }
.sf-root .sfx-sheet__list a.active { color: var(--sf-primary); }
.sf-root .sfx-sheet__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg)); color: var(--sf-primary); flex: 0 0 auto; }
.sf-root .sfx-sheet__ic svg { width: 19px; height: 19px; }
.sf-root .sfx-sheet__legal { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: 13px; color: var(--sf-text-light); }
@media (min-width: 769px) { .sf-root .sfx-sheet { display: none !important; } }

/* A server-rendered page's More menu is a <details>, so it needs no script.
   Open, its summary turns into the full-screen scrim (tap outside to close) and
   the sheet lets taps through everywhere except its panel. The bar's backdrop
   filter would make it the containing block for these fixed layers, so it is
   dropped while the menu is open. */
.sf-root details.sf-tab-more { flex: 1 1 0; min-width: 0; display: flex; }
.sf-root details.sf-tab-more > summary { width: 100%; list-style: none; }
.sf-root details.sfx-more > summary::-webkit-details-marker { display: none; }
.sf-root details.sfx-more > summary::marker { content: ''; }
.sf-root details.sfx-more[open] > summary { position: fixed; inset: 0; z-index: 1199; background: rgba(0,0,0,.42); margin: 0; border-radius: 0; }
.sf-root details.sfx-more[open] > summary > * { visibility: hidden; }
.sf-root details.sfx-more[open] > .sfx-sheet { display: block; pointer-events: none; }
.sf-root details.sfx-more[open] > .sfx-sheet .sfx-sheet__panel { pointer-events: auto; }
.sf-root .sf-tabbar:has(details[open]) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── shared pieces ──────────────────────────────────────────────────────── */
.sf-root .bx-photo-fallback { display: block; background-color: var(--sf-primary-dark); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bx-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; line-height: 1.2; }
.sf-root .bx-tag--glass { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-root .bx-tag--solid { background: var(--sf-primary); color: var(--sf-on-primary, #fff); }
.sf-root .bx-tag--ink { background: #141414; color: #fff; }
.sf-root .bx-tag--sun { background: #F2B632; color: #1b1405; }
.sf-root .bx-tag--soft { background: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-surface)); color: var(--sf-primary); }
.sf-root .bx-open { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #16a34a 10%, var(--sf-surface)); color: #067647; }
.sf-root .bx-open.is-closed { background: color-mix(in srgb, #dc2626 10%, var(--sf-surface)); color: #b42318; }
.sf-root .bx-open__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.sf-root .bx-open--dark { background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.sf-root .bx-burst { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--sf-heading); line-height: 1.05; background: var(--sf-primary); color: #fff !important; padding: 18px;
  clip-path: polygon(50% 0, 61% 12%, 75% 6%, 78% 21%, 93% 25%, 88% 39%, 100% 50%, 88% 61%, 93% 75%, 78% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 22% 79%, 7% 75%, 12% 61%, 0 50%, 12% 39%, 7% 25%, 22% 21%, 25% 6%, 39% 12%); }
.sf-root .bx-zigzag { position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: linear-gradient(-45deg, var(--sf-bg) 8px, transparent 0) 0 100% / 16px 16px repeat-x, linear-gradient(45deg, var(--sf-bg) 8px, transparent 0) 0 100% / 16px 16px repeat-x; }
.sf-root .bx-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: radial-gradient(circle at 20px 22px, var(--sf-bg) 20px, transparent 21px) 0 0 / 40px 22px repeat-x; }
.sf-root .bx-tiles { display: block; height: 26px; background: repeating-conic-gradient(from 45deg, var(--sf-primary) 0 25%, #fff 0 50%) 0 0 / 26px 26px; border-top: 4px solid var(--sf-accent); }
.sf-root .bx-checker { display: block; height: 34px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 34px 34px; }
@keyframes bx-kenburns { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes bx-spin { to { transform: rotate(360deg); } }
@keyframes bx-flicker { 0% { opacity: .7; } 50% { opacity: 1; } 100% { opacity: .82; } }
@keyframes bx-float { 50% { transform: translateY(-12px); } }
@keyframes bx-morph { to { border-radius: 58% 42% 30% 70% / 55% 45% 55% 45%; transform: rotate(24deg); } }
@keyframes bx-neon { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .55; } 92% { opacity: 1; } 95% { opacity: .75; } 96% { opacity: 1; } }
.sf-root [class^="bx-"] h1, .sf-root [class*=" bx-"] h1 { overflow-wrap: anywhere; text-wrap: balance; }
/* Phones: a first guess at a size that lets the longest word of the name fit
   (--sf-longest is set by BoldHero); useFitHeadline then measures and corrects
   it for the actual font. Without this, "RESTAURANT" broke as "RESTAURAN / T". */
@media (max-width: 899px) { .sf-root .bx-fit { --sf-fit: calc((100vw - 40px) / (var(--sf-longest, 6) * .72)); } }

/* ── CINEMA (Classic) ───────────────────────────────────────────────────── */
.sf-root .bx-cinema { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #140d0a; }
.sf-root .bx-cinema__media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(12,7,5,.3) 0%, rgba(12,7,5,.3) 38%, rgba(12,7,5,.9) 100%), var(--sf-hero-photo, none); background-size: cover; background-position: center; animation: bx-kenburns 18s ease-out both; }
.sf-root .bx-cinema__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: end; padding-top: 110px; padding-bottom: clamp(28px, 6vw, 64px); }
.sf-root .bx-cinema h1 { font-family: var(--sf-heading); font-weight: 900; font-size: min(clamp(52px, 10vw, 132px), var(--sf-fit, 1000px)); line-height: .9; letter-spacing: -0.04em; color: #fff; margin: 18px 0; }
.sf-root .bx-cinema .sfx-hero-lead { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; color: rgba(255,255,255,.88); max-width: 46ch; margin-bottom: 26px; }
.sf-root .bx-cinema .sf-btn { box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.sf-root .bx-cinema__card { width: 100%; max-width: 390px; background: var(--sf-surface); color: var(--sf-text); border-radius: calc(var(--sf-radius) + 8px); padding: 20px; box-shadow: 0 34px 80px rgba(0,0,0,.45); }
.sf-root .bx-cinema__card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.sf-root .bx-cinema__today { font-size: 13px; color: var(--sf-text-light); font-weight: 600; }
.sf-root .bx-cinema__fav { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--sf-radius); background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface)); margin-bottom: 14px; color: var(--sf-text); }
.sf-root .bx-cinema__fav-img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.sf-root .bx-cinema__fav em { display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-primary); }
.sf-root .bx-cinema__fav strong { display: block; font-family: var(--sf-heading); font-size: 18px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.sf-root .bx-cinema__fav b { font-size: 15px; color: var(--sf-primary); }
.sf-root .bx-cinema__card .sfx-chips { margin-top: 12px; }
@media (min-width: 900px) { .sf-root .bx-cinema__grid { grid-template-columns: 1.45fr .8fr; } .sf-root .bx-cinema__card { justify-self: end; } }

/* ── COVER (Editorial) ──────────────────────────────────────────────────── */
.sf-root .bx-cover { position: relative; min-height: min(94vh, 880px); display: flex; color: #fff; overflow: hidden; background: #111; }
.sf-root .bx-cover__media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.2) 56%, rgba(0,0,0,.88) 100%), var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bx-cover__inner { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: 26px; padding-bottom: clamp(28px, 5vw, 48px); }
.sf-root .bx-cover__issue { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; border-top: 3px solid #fff; border-bottom: 1px solid rgba(255,255,255,.6); padding: 10px 0; }
.sf-root .bx-cover__mast { font-family: var(--sf-heading); font-weight: 900; font-size: clamp(60px, 14.5vw, 214px); line-height: .82; letter-spacing: -0.045em; text-transform: uppercase; color: #fff; margin: 16px 0 0; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.sf-root .bx-cover__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: end; margin-top: auto; padding-top: 48px; }
.sf-root .bx-cover__line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.4); color: #fff; }
.sf-root .bx-cover__line:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.sf-root .bx-cover__n { font-family: var(--sf-heading); font-style: italic; font-size: 26px; color: #ffb3a8; }
.sf-root .bx-cover__line strong { font-family: var(--sf-heading); font-style: italic; font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.sf-root .bx-cover__line em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-root .bx-cover__foot .sfx-hero-lead { font-family: var(--sf-heading); font-size: clamp(18px, 2vw, 24px); line-height: 1.4; color: #fff; margin-bottom: 20px; max-width: 40ch; }
.sf-root .bx-cover .sf-btn { background: var(--sf-accent); color: #fff !important; border-radius: 2px; }
.sf-root .bx-cover__seal { position: absolute; right: clamp(16px, 4vw, 56px); top: clamp(120px, 20vw, 230px); width: 118px; height: 118px; border-radius: 50%; background: var(--sf-accent); color: #fff !important; display: grid; place-items: center; text-align: center; padding: 14px; font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 14px 34px rgba(0,0,0,.4); }
@media (max-width: 700px) { .sf-root .bx-cover__seal { width: 86px; height: 86px; font-size: 11px; top: auto; bottom: 24px; } }
@media (min-width: 900px) { .sf-root .bx-cover__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ── AWNING (Patisserie) ────────────────────────────────────────────────── */
.sf-root .bx-awning { position: relative; padding-bottom: clamp(52px, 7vw, 100px); overflow: hidden; background: radial-gradient(700px 420px at 90% 40%, color-mix(in srgb, var(--sf-accent) 14%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .bx-awning__stripes { position: relative; display: block; height: 58px; background: repeating-linear-gradient(90deg, var(--sf-primary) 0 44px, #fff 44px 88px); }
.sf-root .bx-awning__stripes::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: radial-gradient(circle at 22px 0, var(--sf-primary) 21px, transparent 22px) 0 0 / 88px 22px repeat-x, radial-gradient(circle at 66px 0, #fff 21px, transparent 22px) 0 0 / 88px 22px repeat-x; filter: drop-shadow(0 5px 4px rgba(0,0,0,.12)); }
.sf-root .bx-awning__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; padding-top: clamp(56px, 8vw, 96px); }
.sf-root .bx-awning__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-awning h1 { font-family: var(--sf-heading); font-style: italic; font-weight: 700; font-size: min(clamp(58px, 9.5vw, 128px), var(--sf-fit, 1000px)); line-height: .9; color: var(--sf-primary); margin: 14px 0 20px; }
.sf-root .bx-awning .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 44ch; margin-bottom: 26px; }
.sf-root .bx-awning__window { position: relative; justify-self: center; width: min(calc(100% - 40px), 440px); aspect-ratio: 4 / 5; }
.sf-root .bx-awning__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 26px 26px; box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--sf-border), 0 36px 70px rgba(80,20,40,.2); }
.sf-root .bx-awning__tag { position: absolute; z-index: 1; display: grid; gap: 2px; max-width: 190px; padding: 12px 16px; background: #fff; color: var(--sf-text); border-radius: 14px; box-shadow: 0 16px 34px rgba(80,20,40,.16); transition: transform .2s ease; }
.sf-root .bx-awning__tag:hover { transform: translateY(-3px); }
.sf-root .bx-awning__tag strong { font-family: var(--sf-heading); font-style: italic; font-size: 19px; font-weight: 700; line-height: 1.15; }
.sf-root .bx-awning__tag em { font-style: normal; font-weight: 700; color: var(--sf-accent); }
.sf-root .bx-awning__tag0 { left: -22px; top: 20%; }
.sf-root .bx-awning__tag1 { right: -22px; bottom: 14%; }
@media (min-width: 900px) { .sf-root .bx-awning__grid { grid-template-columns: 1.05fr .95fr; } }

/* ── STAMP (Bakehouse) ──────────────────────────────────────────────────── */
.sf-root .bx-stamp { padding: clamp(52px, 7vw, 104px) 0; overflow: hidden; background: radial-gradient(520px 420px at 78% 50%, color-mix(in srgb, var(--sf-accent) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 7%, var(--sf-bg)), var(--sf-bg)); }
.sf-root .bx-stamp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-root .bx-stamp__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-primary); border: 2px solid currentColor; border-radius: 999px; padding: 6px 14px; }
.sf-root .bx-stamp h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(54px, 9vw, 118px), var(--sf-fit, 1000px)); line-height: .95; letter-spacing: -0.02em; color: var(--sf-text); margin: 20px 0; }
.sf-root .bx-stamp .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 46ch; margin-bottom: 26px; }
.sf-root .bx-stamp__art { position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 1; }
.sf-root .bx-stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: bx-spin 30s linear infinite; }
.sf-root .bx-stamp__ring text { font-family: var(--sf-body); font-size: 11px; font-weight: 700; letter-spacing: 3px; fill: var(--sf-primary); }
.sf-root .bx-stamp__photo { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 8px var(--sf-surface), 0 30px 60px rgba(60,30,5,.3); }
.sf-root .bx-stamp .bx-open { position: absolute; right: 4%; bottom: 10%; }
@media (min-width: 900px) { .sf-root .bx-stamp__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* ── CRATE (Corner Market) ──────────────────────────────────────────────── */
.sf-root .bx-crate { padding: clamp(40px, 6vw, 88px) 0; overflow: hidden; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sf-primary) 16%, transparent) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, color-mix(in srgb, var(--sf-primary) 10%, var(--sf-bg)), var(--sf-bg) 85%); }
.sf-root .bx-crate__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-root .bx-crate h1 { font-family: var(--sf-heading); font-weight: 800; font-size: min(clamp(48px, 7.6vw, 96px), var(--sf-fit, 1000px)); line-height: .95; letter-spacing: -0.045em; color: var(--sf-text); margin: 18px 0; }
.sf-root .bx-crate h1 mark { color: var(--sf-primary); background: linear-gradient(transparent 62%, #F7D046 62%, #F7D046 92%, transparent 92%); padding: 0 .06em; }
.sf-root .bx-crate .sfx-hero-lead { font-size: 18px; line-height: 1.65; color: var(--sf-text-light); max-width: 46ch; margin-bottom: 24px; }
.sf-root .bx-crate__aisles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sf-root .bx-crate__aisles a { padding: 9px 15px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--sf-surface); border: 1.5px solid var(--sf-border); font-weight: 700; font-size: 13.5px; color: var(--sf-text); transition: border-color .15s ease, background .15s ease; }
.sf-root .bx-crate__aisles a:hover { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-surface)); }
.sf-root .bx-crate__tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 10px; }
.sf-root .bx-crate__tile { position: relative; display: block; aspect-ratio: 1; border-radius: calc(var(--sf-radius) + 6px); overflow: hidden; background: var(--sf-surface); border: 6px solid #fff; box-shadow: 0 20px 44px rgba(20,60,30,.18); transition: transform .25s ease; }
.sf-root .bx-crate__tile0 { transform: rotate(-3deg); }
.sf-root .bx-crate__tile1 { transform: rotate(2.5deg) translateY(18px); }
.sf-root .bx-crate__tile2 { transform: rotate(2deg) translateY(-6px); }
.sf-root .bx-crate__tile3 { transform: rotate(-2deg) translateY(12px); }
.sf-root .bx-crate__tile:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.sf-root .bx-crate__img { width: 100%; height: 100%; object-fit: cover; }
.sf-root .bx-crate__label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.95); color: var(--sf-text); font-size: 13px; }
.sf-root .bx-crate__label strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .bx-crate__label em { flex: 0 0 auto; font-style: normal; font-weight: 800; color: #fff; background: var(--sf-accent); padding: 3px 9px; border-radius: 999px; }
.sf-root .bx-crate__burst { position: absolute; right: -6px; top: -12px; width: 100px; height: 100px; font-size: 15px; background: var(--sf-accent); transform: rotate(12deg); z-index: 3; }
@media (min-width: 900px) { .sf-root .bx-crate__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ── BURST (Smash Burger) ───────────────────────────────────────────────── */
.sf-root .bx-burstx { position: relative; overflow: hidden; background: radial-gradient(rgba(0,0,0,.08) 1.3px, transparent 1.7px) 0 0 / 18px 18px, #FFC72C; color: #1A120E; padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 8vw, 112px); }
.sf-root .bx-burstx__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.sf-root .bx-burstx h1 { display: flex; flex-direction: column; font-family: var(--sf-heading); font-weight: 400; text-transform: uppercase; font-size: min(clamp(56px, 11vw, 156px), var(--sf-fit, 1000px)); line-height: .86; letter-spacing: -0.01em; color: var(--sf-primary); margin: 18px 0 20px; }
.sf-root .bx-burstx h1 .is-outline { color: transparent; -webkit-text-stroke: 3px #1A120E; }
.sf-root .bx-burstx .sfx-hero-lead { font-size: 18px; line-height: 1.6; font-weight: 500; color: #3a2a1c; max-width: 44ch; margin-bottom: 26px; }
.sf-root .bx-burstx .sf-btn { background: var(--sf-primary); color: #fff !important; border: 3px solid #1A120E; box-shadow: 5px 5px 0 #1A120E; }
.sf-root .bx-burstx .sf-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #1A120E; }
.sf-root .bx-burstx .sfx-btn-ghost--dark { border: 3px solid #1A120E; background: #fff; }
.sf-root .bx-burstx__art { position: relative; justify-self: center; width: min(calc(100% - 20px), 470px); aspect-ratio: 1; }
.sf-root .bx-burstx__photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 10px solid #fff; box-shadow: 14px 14px 0 #1A120E; }
.sf-root .bx-burstx__price { position: absolute; left: -14px; bottom: 2%; width: 138px; height: 138px; font-size: 28px; transform: rotate(-10deg); }
.sf-root .bx-burstx__price small { display: block; max-width: 84px; font-family: var(--sf-body); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
@media (min-width: 900px) { .sf-root .bx-burstx__grid { grid-template-columns: 1.15fr .85fr; } }

/* ── STEAM (Roastery) ───────────────────────────────────────────────────── */
.sf-root .bx-steam { position: relative; overflow: hidden; color: #F5EBDD; padding: clamp(56px, 8vw, 112px) 0 clamp(84px, 9vw, 136px); background: radial-gradient(900px 520px at 85% 15%, rgba(154,91,46,.38), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(217,160,107,.12), transparent 60%), #1B120C; }
.sf-root .bx-steam__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: center; }
.sf-root .bx-steam__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #D9A06B; }
.sf-root .bx-steam h1 { font-family: var(--sf-heading); font-style: italic; font-weight: 400; font-size: min(clamp(56px, 9vw, 122px), var(--sf-fit, 1000px)); line-height: .92; color: #fff; margin: 16px 0 0; }
.sf-root .bx-steam__rule { display: block; width: 84px; height: 2px; background: #D9A06B; margin: 26px 0; }
.sf-root .bx-steam .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: rgba(245,235,221,.82); max-width: 46ch; margin-bottom: 28px; }
.sf-root .bx-steam .sf-btn { background: #D9A06B; color: #1B120C !important; box-shadow: none; }
.sf-root .bx-steam__art { position: relative; justify-self: center; width: min(calc(100% - 24px), 430px); }
.sf-root .bx-steam__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 220px 220px 18px 18px; outline: 1px solid rgba(217,160,107,.65); outline-offset: 14px; }
.sf-root .bx-steam__board { position: absolute; left: -34px; bottom: -34px; width: min(80%, 290px); background: #F5EBDD; color: #1B120C; border-radius: 14px; padding: 16px 18px; box-shadow: 0 26px 54px rgba(0,0,0,.5); }
.sf-root .bx-steam__board p { font-family: var(--sf-heading); font-style: italic; font-size: 22px; margin-bottom: 4px; }
.sf-root .bx-steam__board ul { list-style: none; }
.sf-root .bx-steam__board a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; color: #1B120C; font-size: 14px; font-weight: 600; }
.sf-root .bx-steam__board a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .bx-steam__board i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #b59a82; }
.sf-root .bx-steam__board b { font-weight: 800; }
@media (max-width: 700px) { .sf-root .bx-steam__board { left: 8px; bottom: -40px; } }
@media (min-width: 900px) { .sf-root .bx-steam__grid { grid-template-columns: 1fr .9fr; gap: 80px; } }

/* ── FIESTA (Taqueria) ──────────────────────────────────────────────────── */
.sf-root .bx-fiesta { position: relative; min-height: min(86vh, 800px); display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--sf-primary-dark); }
.sf-root .bx-fiesta__media { position: absolute; inset: 0; background-image: linear-gradient(100deg, color-mix(in srgb, var(--sf-primary-dark) 94%, transparent) 0%, color-mix(in srgb, var(--sf-primary) 62%, transparent) 55%, rgba(0,0,0,.12) 100%), var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bx-fiesta__bunting { position: absolute; top: 10px; left: -2%; right: -2%; z-index: 1; display: flex; justify-content: space-between; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
.sf-root .bx-fiesta__bunting::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.7); }
.sf-root .bx-fiesta__bunting span { width: 4.8%; min-width: 30px; aspect-ratio: 1 / 1.15; clip-path: polygon(0 0, 100% 0, 100% 72%, 84% 82%, 67% 72%, 50% 86%, 33% 72%, 16% 82%, 0 72%);
  -webkit-mask: radial-gradient(circle at 30% 30%, transparent 3.5px, #000 4px), radial-gradient(circle at 70% 30%, transparent 3.5px, #000 4px), radial-gradient(circle at 50% 55%, transparent 4.5px, #000 5px); -webkit-mask-composite: source-in; mask-composite: intersect; }
.sf-root .bx-fiesta__inner { position: relative; padding-top: 120px; padding-bottom: 72px; }
.sf-root .bx-fiesta h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(62px, 12vw, 164px), var(--sf-fit, 1000px)); line-height: .9; color: #fff; text-shadow: 5px 5px 0 var(--sf-accent), 10px 10px 0 #E8A317; margin: 18px 0 26px; max-width: 12ch; }
.sf-root .bx-fiesta .sfx-hero-lead { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 46ch; margin-bottom: 28px; }
.sf-root .bx-fiesta .sf-btn { background: var(--sf-accent); color: #fff !important; }
.sf-root .bx-fiesta__sticker { position: absolute; right: clamp(16px, 6vw, 96px); bottom: clamp(28px, 7vw, 84px); width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 16px; background: #E8A317; color: #231A12 !important; font-family: var(--sf-heading); font-size: 22px; line-height: 1; transform: rotate(10deg); box-shadow: 0 0 0 6px #fff, 0 18px 36px rgba(0,0,0,.35); }
@media (max-width: 760px) { .sf-root .bx-fiesta__sticker { display: none; } }

/* ── EMBER (Smokehouse) ─────────────────────────────────────────────────── */
.sf-root .bx-ember { position: relative; min-height: min(90vh, 840px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #0c0a09; }
.sf-root .bx-ember__media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(12,10,9,.55), rgba(12,10,9,.3) 42%, rgba(12,10,9,.96)), var(--sf-hero-photo, none); background-size: cover; background-position: center; filter: saturate(1.15) contrast(1.05); }
.sf-root .bx-ember__glow { position: absolute; left: -10%; right: -10%; bottom: -34%; height: 74%; background: radial-gradient(closest-side, rgba(234,88,12,.55), rgba(194,65,12,.18) 60%, transparent); filter: blur(12px); animation: bx-flicker 5s ease-in-out infinite alternate; }
.sf-root .bx-ember__inner { position: relative; padding-top: 120px; padding-bottom: clamp(40px, 7vw, 84px); }
.sf-root .bx-ember__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #FDBA74; }
.sf-root .bx-ember__eyebrow i { width: 44px; height: 2px; background: var(--sf-accent); }
.sf-root .bx-ember h1 { font-family: var(--sf-heading); font-weight: 700; text-transform: uppercase; font-size: min(clamp(66px, 13.5vw, 190px), var(--sf-fit, 1000px)); line-height: .84; letter-spacing: -0.01em; color: #fff; margin: 18px 0 22px; text-shadow: 0 8px 50px rgba(0,0,0,.55); }
.sf-root .bx-ember .sfx-hero-lead { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 50ch; margin-bottom: 28px; }
.sf-root .bx-ember .sf-btn { background: var(--sf-accent); color: #fff !important; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 10px 30px rgba(194,65,12,.45); }
.sf-root .bx-ember .sfx-btn-ghost--light { border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; }
.sf-root .bx-ember__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); }

/* ── ARCHES (Mezze) ─────────────────────────────────────────────────────── */
.sf-root .bx-arches { position: relative; overflow: hidden; text-align: center; padding-top: clamp(52px, 7vw, 100px); background: radial-gradient(900px 420px at 50% 0%, color-mix(in srgb, var(--sf-primary) 12%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .bx-arches__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-arches h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(56px, 9.5vw, 128px), var(--sf-fit, 1000px)); line-height: .95; color: var(--sf-primary); margin: 16px auto; max-width: 14ch; }
.sf-root .bx-arches .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 52ch; margin: 0 auto 28px; }
.sf-root .bx-arches .sfx-actions { justify-content: center; }
.sf-root .bx-arches__row { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(10px, 2vw, 24px); align-items: end; max-width: 1000px; margin: clamp(40px, 6vw, 64px) auto 0; }
.sf-root .bx-arches__win { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; border: 6px solid #fff; border-bottom: 0; box-shadow: 0 -12px 40px color-mix(in srgb, var(--sf-primary) 18%, transparent); }
.sf-root .bx-arches__win1 { aspect-ratio: 3 / 4.5; }
.sf-root .bx-arches__win0, .sf-root .bx-arches__win2 { filter: saturate(1.05); }

/* ── NEON SIGN (Diner) ──────────────────────────────────────────────────── */
.sf-root .bx-neon { position: relative; overflow: hidden; color: #fff; padding-top: clamp(48px, 7vw, 96px); background: radial-gradient(700px 420px at 15% 15%, rgba(200,16,46,.28), transparent 70%), linear-gradient(180deg, #103433, #0B2423); }
.sf-root .bx-neon__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; padding-bottom: clamp(48px, 7vw, 80px); }
.sf-root .bx-neon__sign { border: 2px solid rgba(255,255,255,.85); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 0 0 6px rgba(200,16,46,.22), 0 0 34px rgba(255,64,96,.45), inset 0 0 34px rgba(255,64,96,.22); }
.sf-root .bx-neon__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #7EE8DF; }
.sf-root .bx-neon h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(52px, 8.5vw, 112px), var(--sf-fit, 1000px)); line-height: 1; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #ff2e55, 0 0 42px #ff2e55, 0 0 84px #c8102e; margin: 14px 0 20px; animation: bx-neon 5s infinite; }
.sf-root .bx-neon .sfx-hero-lead { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 44ch; margin-bottom: 26px; }
.sf-root .bx-neon .sf-btn { background: var(--sf-primary); color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.sf-root .bx-neon__plate { position: relative; justify-self: center; width: min(calc(100% - 24px), 420px); aspect-ratio: 1; }
.sf-root .bx-neon__photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 14px solid #E9EDF0; box-shadow: 0 0 0 4px #9AA5AD, 0 32px 64px rgba(0,0,0,.5); }
.sf-root .bx-neon__ticket { position: absolute; right: -10px; top: 6%; display: grid; gap: 2px; max-width: 190px; padding: 12px 16px; background: #FFF7EC; color: #1E1B18; border-radius: 6px; border-top: 6px solid var(--sf-primary); transform: rotate(6deg); box-shadow: 0 16px 34px rgba(0,0,0,.35); font-size: 13px; }
.sf-root .bx-neon__ticket small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-neon__ticket strong { font-family: var(--sf-heading); font-weight: 400; font-size: 18px; line-height: 1.15; }
.sf-root .bx-neon__ticket b { font-size: 16px; color: var(--sf-primary); }
@media (min-width: 900px) { .sf-root .bx-neon__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* ── BLOB (Fresh Bowl) ──────────────────────────────────────────────────── */
.sf-root .bx-blob { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 104px) 0; background: var(--sf-bg); }
.sf-root .bx-blob__a, .sf-root .bx-blob__b { position: absolute; border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: bx-morph 14s ease-in-out infinite alternate; }
.sf-root .bx-blob__a { width: 580px; height: 580px; left: -200px; top: -220px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sf-primary) 40%, #fff), color-mix(in srgb, var(--sf-primary) 12%, transparent)); opacity: .55; }
.sf-root .bx-blob__b { width: 520px; height: 520px; right: -160px; bottom: -240px; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--sf-accent) 42%, #fff), transparent 72%); opacity: .6; animation-delay: -6s; }
.sf-root .bx-blob__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-root .bx-blob h1 { font-family: var(--sf-heading); font-weight: 700; font-size: min(clamp(54px, 9vw, 118px), var(--sf-fit, 1000px)); line-height: .95; letter-spacing: -0.02em; color: var(--sf-text); margin: 18px 0; }
.sf-root .bx-blob .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 46ch; margin-bottom: 26px; }
.sf-root .bx-blob .sf-btn { background: linear-gradient(120deg, var(--sf-primary), color-mix(in srgb, var(--sf-primary) 60%, var(--sf-accent))); color: #fff !important; }
.sf-root .bx-blob__art { position: relative; justify-self: center; width: min(calc(100% - 20px), 470px); aspect-ratio: 1; }
.sf-root .bx-blob__photo { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; border-radius: 50%; object-fit: cover; box-shadow: 0 44px 80px color-mix(in srgb, var(--sf-primary) 32%, transparent); animation: bx-float 6s ease-in-out infinite; }
.sf-root .bx-blob__chip { position: absolute; z-index: 1; display: grid; gap: 1px; max-width: 176px; padding: 10px 14px; border-radius: 18px; background: #fff; color: var(--sf-text); font-size: 13px; box-shadow: 0 16px 32px rgba(40,20,90,.18); }
.sf-root .bx-blob__chip strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .bx-blob__chip em { font-style: normal; font-weight: 800; color: var(--sf-accent); }
.sf-root .bx-blob__chip0 { left: -4%; top: 10%; }
.sf-root .bx-blob__chip1 { right: -6%; top: 42%; }
.sf-root .bx-blob__chip2 { left: 6%; bottom: 0; }
@media (min-width: 900px) { .sf-root .bx-blob__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
/* ── GARDEN (Bloom, florist) ────────────────────────────────────────────── */
.sf-root .bx-garden { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 8vw, 110px); background: radial-gradient(620px 420px at 88% 30%, color-mix(in srgb, var(--sf-primary) 13%, transparent), transparent 70%), radial-gradient(520px 380px at 4% 96%, color-mix(in srgb, var(--sf-accent) 12%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .bx-garden__sprig { position: absolute; width: 180px; height: 180px; opacity: .5; pointer-events: none; background: radial-gradient(ellipse 14px 34px at 50% 30%, color-mix(in srgb, var(--sf-accent) 55%, transparent) 98%, transparent) , radial-gradient(ellipse 14px 34px at 30% 55%, color-mix(in srgb, var(--sf-accent) 45%, transparent) 98%, transparent), radial-gradient(ellipse 14px 34px at 70% 58%, color-mix(in srgb, var(--sf-accent) 45%, transparent) 98%, transparent); }
.sf-root .bx-garden__sprig--a { left: -40px; top: 40px; transform: rotate(-24deg); }
.sf-root .bx-garden__sprig--b { right: 4%; bottom: -50px; transform: rotate(160deg); }
.sf-root .bx-garden__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: center; }
.sf-root .bx-garden__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-garden__eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.sf-root .bx-garden h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(54px, 9vw, 120px), var(--sf-fit, 1000px)); line-height: .96; letter-spacing: -0.01em; color: var(--sf-primary); margin: 16px 0 20px; }
.sf-root .bx-garden .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 46ch; margin-bottom: 26px; }
.sf-root .bx-garden__occasions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.sf-root .bx-garden__occasions a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sf-primary); background: var(--sf-surface); border: 1px solid var(--sf-border); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.sf-root .bx-garden__occasions a:hover, .sf-root .bx-garden__occasions a:focus-visible { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary, #fff); }
.sf-root .bx-garden__frame { position: relative; justify-self: center; width: min(calc(100% - 28px), 460px); aspect-ratio: 4 / 5; }
.sf-root .bx-garden__frame::before { content: ''; position: absolute; inset: -14px; border-radius: 999px 999px 30px 30px; border: 1.5px solid color-mix(in srgb, var(--sf-accent) 55%, transparent); }
.sf-root .bx-garden__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 24px 24px; box-shadow: 0 0 0 8px var(--sf-surface), 0 40px 80px color-mix(in srgb, var(--sf-primary) 24%, transparent); }
.sf-root .bx-garden__card { position: absolute; z-index: 1; left: -20px; bottom: 26px; display: grid; gap: 3px; max-width: 220px; padding: 14px 18px; border-radius: 18px; background: var(--sf-surface); color: var(--sf-text); box-shadow: 0 18px 38px color-mix(in srgb, var(--sf-primary) 20%, transparent); transition: transform .2s ease; }
.sf-root .bx-garden__card:hover { transform: translateY(-3px); }
.sf-root .bx-garden__card small { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-garden__card strong { font-family: var(--sf-heading); font-weight: 400; font-size: 20px; line-height: 1.2; }
.sf-root .bx-garden__card em { font-style: normal; font-weight: 800; color: var(--sf-primary); }
/* The bundled florist art is a wide banner with its bouquet on the right; a
   portrait frame centred on it would show only the empty middle. */
.sf-root .bx-garden__photo.bx-photo-fallback, .sf-root .bx-pressed__photo.bx-photo-fallback { background-position: 88% 50%; background-color: #F6E3E0; }
@media (max-width: 700px) { .sf-root .bx-garden__sprig--a { display: none; } }
@media (max-width: 520px) { .sf-root .bx-garden__card { left: 8px; bottom: 12px; } }
@media (min-width: 900px) { .sf-root .bx-garden__grid { grid-template-columns: 1.05fr .95fr; gap: 72px; } }

/* ── PRESSED (Atelier, florist) ─────────────────────────────────────────── */
.sf-root .bx-pressed { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 92px) 0 clamp(60px, 8vw, 112px); background: linear-gradient(transparent 0 calc(100% - 1px), color-mix(in srgb, var(--sf-text) 6%, transparent) 0) 0 0 / 100% 34px, var(--sf-bg); border-bottom: 1px solid var(--sf-border); }
.sf-root .bx-pressed__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.sf-root .bx-pressed__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--sf-accent); padding-bottom: 10px; border-bottom: 2px solid currentColor; }
.sf-root .bx-pressed h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(56px, 10vw, 140px), var(--sf-fit, 1000px)); line-height: .9; letter-spacing: -0.025em; color: var(--sf-text); margin: 22px 0 22px; }
.sf-root .bx-pressed h1 em { font-style: italic; color: var(--sf-primary); }
.sf-root .bx-pressed .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 44ch; margin-bottom: 28px; }
.sf-root .bx-pressed__art { position: relative; justify-self: center; width: min(calc(100% - 24px), 440px); padding-bottom: 60px; }
.sf-root .bx-pressed__print { position: relative; margin: 0; padding: 14px 14px 18px; background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: 0 30px 60px color-mix(in srgb, var(--sf-text) 16%, transparent); transform: rotate(-2.2deg); }
.sf-root .bx-pressed__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sf-root .bx-pressed__print figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-top: 14px; font-family: var(--sf-heading); font-style: italic; font-size: 19px; color: var(--sf-text); }
.sf-root .bx-pressed__print figcaption a { color: inherit; }
.sf-root .bx-pressed__print figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sf-root .bx-pressed__print figcaption span { font-family: var(--sf-body); font-style: normal; font-weight: 800; font-size: 15px; color: var(--sf-primary); }
.sf-root .bx-pressed__tape { position: absolute; z-index: 1; top: -12px; width: 92px; height: 26px; background: color-mix(in srgb, var(--sf-accent) 26%, rgba(255,255,255,.55)); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sf-root .bx-pressed__tape--l { left: -18px; transform: rotate(-32deg); }
.sf-root .bx-pressed__tape--r { right: -18px; transform: rotate(30deg); }
.sf-root .bx-pressed__note { position: absolute; right: -14px; bottom: 0; width: min(230px, 70%); padding: 16px 18px; background: var(--sf-primary); color: #fff; box-shadow: 0 22px 44px color-mix(in srgb, var(--sf-primary) 36%, transparent); transform: rotate(2.5deg); }
.sf-root .bx-pressed__note small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 8px; }
.sf-root .bx-pressed__note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sf-root .bx-pressed__note li { font-family: var(--sf-heading); font-size: 17px; line-height: 1.25; color: #fff; }
.sf-root .bx-pressed__note li::before { content: '\2014\00a0'; opacity: .7; }
@media (max-width: 520px) { .sf-root .bx-pressed__art { padding-bottom: 0; } .sf-root .bx-pressed__note { position: relative; right: auto; bottom: auto; width: 82%; margin: -18px -6px 0 auto; } }
@media (min-width: 900px) { .sf-root .bx-pressed__grid { grid-template-columns: 1.15fr .85fr; gap: 80px; } }

/* ── Signature family ───────────────────────────────────────────────────── */

/* Long names wrap between words and never mid-word; a single word longer than
   the line (rare) still breaks rather than overflowing the screen. */
.sf-root .bx-lux h1, .sf-root .bx-bento h1, .sf-root .bx-forno h1, .sf-root .bx-sol h1, .sf-root .bx-spot h1 { word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }

/* lux · Maison: ivory, a tall framed photo, brass hairlines. */
.sf-root .bx-lux { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 112px); background: linear-gradient(90deg, var(--sf-bg) 0 58%, color-mix(in srgb, var(--sf-primary) 6%, var(--sf-bg)) 58%); }
.sf-root .bx-lux__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.sf-root .bx-lux__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-lux__eyebrow i { width: 40px; height: 1px; background: currentColor; }
.sf-root .bx-lux h1 { font-family: var(--sf-heading); font-weight: 500; font-size: min(clamp(52px, 7vw, 116px), var(--sf-fit, 1000px)); line-height: .92; letter-spacing: -0.015em; color: var(--sf-primary); margin: 20px 0 22px; }
.sf-root .bx-lux__rule { display: block; width: 88px; height: 1px; background: var(--sf-accent); margin-bottom: 24px; }
.sf-root .bx-lux .sfx-hero-lead { font-size: 18px; line-height: 1.75; color: var(--sf-text-light); max-width: 44ch; margin-bottom: 30px; }
.sf-root .bx-lux .sf-btn { background: var(--sf-primary); color: #fff !important; border-radius: 2px; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; padding: 17px 30px; box-shadow: none; }
.sf-root .bx-lux .sf-btn:hover { background: var(--sf-accent); }
.sf-root .bx-lux .sfx-btn-ghost--dark { border-radius: 2px; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.sf-root .bx-lux__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--sf-border); font-size: 14px; font-weight: 600; color: var(--sf-text-light); }
.sf-root .bx-lux__art { position: relative; justify-self: center; width: min(calc(100% - 28px), 480px); aspect-ratio: 4 / 5; }
.sf-root .bx-lux__frame { position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--sf-accent); pointer-events: none; }
.sf-root .bx-lux__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 40px 80px -20px rgba(20,30,25,.35); }
.sf-root .bx-lux__card { position: absolute; z-index: 1; left: -28px; bottom: 34px; display: grid; gap: 4px; max-width: 240px; padding: 18px 22px; background: var(--sf-surface); color: var(--sf-text); border-top: 2px solid var(--sf-accent); box-shadow: 0 24px 48px -12px rgba(20,30,25,.28); transition: transform .25s ease; }
.sf-root .bx-lux__card:hover { transform: translateY(-3px); }
.sf-root .bx-lux__card small { font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-lux__card strong { font-family: var(--sf-heading); font-weight: 600; font-size: 22px; line-height: 1.15; }
.sf-root .bx-lux__card em { font-style: normal; font-weight: 700; color: var(--sf-primary); }
@media (max-width: 520px) { .sf-root .bx-lux__card { left: 10px; bottom: 14px; } .sf-root .bx-lux__frame { inset: 10px -10px -10px 10px; } }
@media (max-width: 899px) { .sf-root .bx-lux { background: var(--sf-bg); } }
@media (min-width: 900px) { .sf-root .bx-lux__grid { grid-template-columns: 1.15fr .85fr; gap: 88px; } }

/* bento · Urban Kitchen: a bento grid of name, dish tiles and facts. */
.sf-root .bx-bento { padding: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); background: var(--sf-bg); }
.sf-root .bx-bento__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sf-root .bx-bento__main { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: clamp(28px, 4vw, 52px); border-radius: 24px; color: #fff; background: radial-gradient(520px 300px at 100% 0%, color-mix(in srgb, var(--sf-accent) 38%, transparent), transparent 70%), var(--sf-primary); }
.sf-root .bx-bento__eyebrow { display: inline-flex; align-self: flex-start; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.sf-root .bx-bento h1 { font-family: var(--sf-heading); font-weight: 700; font-size: min(clamp(42px, 5.2vw, 80px), var(--sf-fit, 1000px)); line-height: .92; letter-spacing: -0.035em; color: #fff; margin: 18px 0 16px; }
.sf-root .bx-bento .sfx-hero-lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 46ch; margin-bottom: 24px; }
.sf-root .bx-bento .sf-btn { background: var(--sf-accent); color: #fff !important; border-radius: 12px; box-shadow: 0 10px 26px color-mix(in srgb, var(--sf-accent) 40%, transparent); }
.sf-root .bx-bento .sfx-btn-ghost--light { border-radius: 12px; }
.sf-root .bx-bento__dish { position: relative; overflow: hidden; min-height: 220px; border-radius: 24px; background: var(--sf-surface); }
.sf-root .bx-bento__link { position: absolute; inset: 0; display: block; color: #fff; }
.sf-root .bx-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sf-root .bx-bento__dish:hover .bx-bento__img { transform: scale(1.05); }
.sf-root .bx-bento__link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(3,7,18,.78)); }
.sf-root .bx-bento__label { position: absolute; z-index: 1; left: 18px; right: 70px; bottom: 16px; display: grid; gap: 2px; }
.sf-root .bx-bento__label strong { font-family: var(--sf-heading); font-weight: 700; font-size: 19px; line-height: 1.2; }
.sf-root .bx-bento__label em { font-style: normal; font-weight: 700; font-size: 15px; color: rgba(255,255,255,.88); }
.sf-root .bx-bento__add { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 14px; border: 0; background: #fff; color: var(--sf-text); font-size: 26px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .15s ease, background .15s ease; }
.sf-root .bx-bento__add:hover { background: var(--sf-accent); color: #fff; }
.sf-root .bx-bento__add:active { transform: scale(.94); }
.sf-root .bx-bento__add:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-root .bx-bento__info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 22px 24px; border-radius: 24px; background: var(--sf-surface); border: 1px solid var(--sf-border); }
.sf-root .bx-bento__info p { display: grid; gap: 2px; margin: 0; }
.sf-root .bx-bento__info small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-light); }
.sf-root .bx-bento__info strong { font-family: var(--sf-heading); font-size: 17px; font-weight: 700; color: var(--sf-text); }
@media (min-width: 700px) { .sf-root .bx-bento__grid { grid-template-columns: 1fr 1fr; } .sf-root .bx-bento__main, .sf-root .bx-bento__info { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .sf-root .bx-bento__grid { grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr auto; }
  .sf-root .bx-bento__main { grid-column: 1; grid-row: 1 / span 2; min-height: 540px; }
  .sf-root .bx-bento__dish { grid-row: 1; }
  .sf-root .bx-bento__info { grid-column: 2 / -1; grid-row: 2; }
}

/* forno · Forno: a round pie on a tomato disc, ringed by prices. */
.sf-root .bx-forno { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 92px) 0 clamp(64px, 8vw, 112px); background: radial-gradient(700px 500px at 80% 40%, color-mix(in srgb, var(--sf-primary) 9%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .bx-forno__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: center; }
.sf-root .bx-forno__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-forno__eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-primary); box-shadow: 14px 0 0 var(--sf-accent); margin-right: 14px; }
.sf-root .bx-forno h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(48px, 6.4vw, 104px), var(--sf-fit, 1000px)); line-height: .94; letter-spacing: -0.02em; color: var(--sf-text); margin: 18px 0 20px; }
.sf-root .bx-forno h1 em { font-style: italic; color: var(--sf-primary); }
.sf-root .bx-forno .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 44ch; margin-bottom: 28px; }
.sf-root .bx-forno .sf-btn { background: var(--sf-primary); color: #fff !important; box-shadow: 0 14px 30px color-mix(in srgb, var(--sf-primary) 32%, transparent); }
.sf-root .bx-forno__art { position: relative; justify-self: center; width: min(calc(100% - 40px), 500px); aspect-ratio: 1; }
.sf-root .bx-forno__disc { position: absolute; inset: 4%; border-radius: 50%; background: var(--sf-primary); transform: translate(5%, 5%); }
.sf-root .bx-forno__pie { position: absolute; inset: 4%; width: 92%; height: 92%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 10px var(--sf-surface), 0 40px 80px -10px rgba(60,20,10,.35); animation: bx-forno-spin 60s linear infinite; }
@keyframes bx-forno-spin { to { transform: rotate(360deg); } }
.sf-root .bx-forno__tag { position: absolute; z-index: 1; display: grid; gap: 1px; max-width: 190px; padding: 11px 16px; border-radius: 16px; background: var(--sf-surface); color: var(--sf-text); font-size: 13px; box-shadow: 0 16px 34px rgba(60,20,10,.18); transition: transform .2s ease; }
.sf-root .bx-forno__tag:hover { transform: translateY(-3px); }
.sf-root .bx-forno__tag strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .bx-forno__tag em { font-style: normal; font-weight: 800; color: var(--sf-primary); }
.sf-root .bx-forno__tag0 { left: -6%; top: 12%; }
.sf-root .bx-forno__tag1 { right: -8%; top: 46%; }
.sf-root .bx-forno__tag2 { left: 4%; bottom: 2%; }
.sf-root .bx-forno__stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, var(--sf-accent) 0 33.3%, #fff 33.3% 66.6%, var(--sf-primary) 66.6%); }
@media (max-width: 520px) { .sf-root .bx-forno__tag0 { left: 0; } .sf-root .bx-forno__tag1 { right: 0; } }
@media (min-width: 900px) { .sf-root .bx-forno__grid { grid-template-columns: 1.05fr .95fr; gap: 72px; } }

/* sol · Casa: a sunset gradient, a sun behind an arched photo, a wave. */
.sf-root .bx-sol { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 100px) 0 clamp(90px, 10vw, 140px); color: #fff; background: linear-gradient(160deg, var(--sf-primary-dark) 0%, var(--sf-primary) 48%, #E9952B 100%); }
.sf-root .bx-sol__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: center; }
.sf-root .bx-sol__eyebrow { display: inline-flex; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.sf-root .bx-sol h1 { font-family: var(--sf-heading); font-weight: 900; font-size: min(clamp(46px, 6vw, 100px), var(--sf-fit, 1000px)); line-height: .92; letter-spacing: -0.03em; color: #fff; margin: 20px 0; text-shadow: 0 6px 30px rgba(80,20,0,.25); }
.sf-root .bx-sol .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); max-width: 46ch; margin-bottom: 28px; }
.sf-root .bx-sol .sf-btn { background: #fff; color: var(--sf-primary-dark) !important; box-shadow: 0 14px 30px rgba(80,20,0,.25); }
.sf-root .bx-sol .sf-btn:hover { background: #FFF1DC; }
.sf-root .bx-sol__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sf-root .bx-sol__cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; border: 1.5px solid rgba(255,255,255,.55); transition: background .2s ease, color .2s ease; }
.sf-root .bx-sol__cats a:hover, .sf-root .bx-sol__cats a:focus-visible { background: #fff; color: var(--sf-primary-dark); }
.sf-root .bx-sol__art { position: relative; justify-self: center; width: min(calc(100% - 28px), 460px); aspect-ratio: 4 / 5; }
.sf-root .bx-sol__sun { position: absolute; width: 74%; aspect-ratio: 1; right: -12%; top: -8%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFD66B, #F4A72C 60%, transparent 61%); opacity: .95; }
.sf-root .bx-sol__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 28px 28px; box-shadow: 0 0 0 8px rgba(255,255,255,.9), 0 40px 80px rgba(80,20,0,.35); }
.sf-root .bx-sol__badge { position: absolute; z-index: 1; left: -18px; bottom: 30px; display: grid; gap: 2px; max-width: 220px; padding: 14px 18px; border-radius: 18px; background: #fff; color: var(--sf-text); box-shadow: 0 18px 40px rgba(80,20,0,.28); transition: transform .2s ease; }
.sf-root .bx-sol__badge:hover { transform: translateY(-3px); }
.sf-root .bx-sol__badge small { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-sol__badge strong { font-family: var(--sf-heading); font-weight: 800; font-size: 18px; line-height: 1.2; }
.sf-root .bx-sol__badge em { font-style: normal; font-weight: 800; color: var(--sf-primary); }
.sf-root .bx-sol__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 80px); fill: var(--sf-bg); }
@media (max-width: 520px) { .sf-root .bx-sol__badge { left: 8px; bottom: 12px; } }
@media (min-width: 900px) { .sf-root .bx-sol__grid { grid-template-columns: 1.1fr .9fr; gap: 72px; } }

/* spotlight · Midnight: a spotlit plate on deep night, a champagne ring. */
.sf-root .bx-spot { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 8vw, 110px); color: #F4EFE6; background: radial-gradient(1200px 700px at 50% 120%, #1D1E25, transparent 60%), var(--sf-primary); text-align: center; }
.sf-root .bx-spot__beam { position: absolute; left: 50%; top: -30%; width: 1100px; height: 130%; transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255,236,200,.13) 18deg, rgba(255,236,200,.05) 30deg, transparent 40deg); pointer-events: none; }
.sf-root .bx-spot__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.sf-root .bx-spot__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: #D9BE86; }
.sf-root .bx-spot h1 { font-family: var(--sf-heading); font-weight: 500; font-size: min(clamp(46px, 7.5vw, 120px), var(--sf-fit, 1000px)); line-height: .95; letter-spacing: -0.01em; color: #fff; margin: 18px 0 34px; }
.sf-root .bx-spot__plate { position: relative; width: min(70vw, 360px); aspect-ratio: 1; margin-bottom: 34px; border-radius: 50%; padding: 10px; background: conic-gradient(from 0deg, #8C6A2E, #E8CF96, #8C6A2E, #E8CF96, #8C6A2E); box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 120px rgba(232,207,150,.18); }
.sf-root .bx-spot__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 6px solid var(--sf-primary); }
.sf-root .bx-spot .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: rgba(244,239,230,.78); max-width: 48ch; margin: 0 auto 28px; }
.sf-root .bx-spot .sfx-hero-actions, .sf-root .bx-spot .sfx-actions { justify-content: center; }
.sf-root .bx-spot .sf-btn { background: linear-gradient(180deg, #E8CF96, #B8934F); color: #16130D !important; box-shadow: 0 14px 34px rgba(184,147,79,.3); }
.sf-root .bx-spot__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; font-size: 14px; font-weight: 600; color: rgba(244,239,230,.75); }
/* ── Taqueria family ────────────────────────────────────────────────────── */
.sf-root .bx-tala h1, .sf-root .bx-trompo h1 { word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }

/* talavera · Cantina: a tiled band, a tile-framed photo, a printed board. The
   tile is drawn in the brand colour, so an owner's colour re-tiles it. */
.sf-root .bx-tala { --tile: var(--sf-primary); position: relative; overflow: hidden; padding: 0 0 clamp(56px, 7vw, 96px); background: radial-gradient(900px 520px at 85% 30%, color-mix(in srgb, var(--sf-primary) 7%, transparent), transparent 70%), var(--sf-bg); }
.sf-root .bx-tala__tiles, .sf-root .bx-tala__frame { background-color: #fff; background-image:
    radial-gradient(circle at 50% 50%, #E8A317 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, var(--tile) 0 22%, transparent 23%),
    radial-gradient(circle at 0 0, var(--tile) 0 24%, transparent 25%),
    radial-gradient(circle at 100% 0, var(--tile) 0 24%, transparent 25%),
    radial-gradient(circle at 0 100%, var(--tile) 0 24%, transparent 25%),
    radial-gradient(circle at 100% 100%, var(--tile) 0 24%, transparent 25%),
    conic-gradient(from 45deg at 50% 50%, transparent 0 25%, color-mix(in srgb, var(--tile) 22%, #fff) 0 50%, transparent 0 75%, color-mix(in srgb, var(--tile) 22%, #fff) 0);
  background-size: 44px 44px; }
.sf-root .bx-tala__tiles { display: block; height: 44px; border-bottom: 4px solid var(--sf-accent); margin-bottom: clamp(36px, 5vw, 72px); }
.sf-root .bx-tala__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-root .bx-tala__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-tala__eyebrow::before { content: ''; width: 18px; height: 18px; border-radius: 4px; background: radial-gradient(circle, #E8A317 0 22%, var(--sf-primary) 23% 60%, transparent 61%), #fff; box-shadow: inset 0 0 0 2px var(--sf-primary); }
.sf-root .bx-tala h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(46px, 6.6vw, 104px), var(--sf-fit, 1000px)); line-height: .98; letter-spacing: -0.01em; color: var(--sf-primary); margin: 18px 0 20px; text-shadow: 4px 4px 0 color-mix(in srgb, var(--sf-accent) 22%, transparent); }
.sf-root .bx-tala .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: var(--sf-text-light); max-width: 46ch; margin-bottom: 28px; }
.sf-root .bx-tala .sf-btn { background: var(--sf-accent); color: #fff !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--sf-accent) 30%, transparent); }
.sf-root .bx-tala__art { position: relative; justify-self: center; width: min(100%, 520px); padding-bottom: 40px; }
.sf-root .bx-tala__frame { position: relative; width: 82%; aspect-ratio: 4 / 5; padding: 16px; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(20,30,70,.45); background-size: 32px 32px; }
.sf-root .bx-tala__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 5px #fff; }
.sf-root .bx-tala__board { position: absolute; right: 0; bottom: 0; width: min(84%, 360px); padding: 18px 18px 14px; border-radius: 12px; background: var(--sf-surface); color: var(--sf-text); border: 2px solid var(--sf-primary); box-shadow: 8px 8px 0 var(--sf-primary), 0 26px 50px -18px rgba(20,30,70,.4); }
.sf-root .bx-tala__board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 2px dashed color-mix(in srgb, var(--sf-primary) 35%, transparent); }
.sf-root .bx-tala__board-head > span { font-family: var(--sf-heading); font-size: 22px; color: var(--sf-primary); }
.sf-root .bx-tala__board ul { list-style: none; margin: 0; padding: 0; }
.sf-root .bx-tala__board li { display: flex; align-items: center; gap: 8px; }
.sf-root .bx-tala__board li a { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sf-text); }
.sf-root .bx-tala__board li a span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.sf-root .bx-tala__board li a i { flex: 1; min-width: 12px; border-bottom: 2px dotted color-mix(in srgb, var(--sf-text) 28%, transparent); transform: translateY(4px); }
.sf-root .bx-tala__board li a b { font-weight: 800; color: var(--sf-accent); white-space: nowrap; }
.sf-root .bx-tala__board li a:hover span, .sf-root .bx-tala__board li a:focus-visible span { color: var(--sf-primary); text-decoration: underline; text-underline-offset: 3px; }
.sf-root .bx-tala__add { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; border: 0; cursor: pointer; font-size: 22px; font-weight: 700; line-height: 1; background: color-mix(in srgb, var(--sf-primary) 10%, var(--sf-surface)); color: var(--sf-primary); transition: background .15s ease, color .15s ease; }
.sf-root .bx-tala__add:hover, .sf-root .bx-tala__add:focus-visible { background: var(--sf-primary); color: #fff; }
.sf-root .bx-tala__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--sf-primary); }
@media (max-width: 560px) { .sf-root .bx-tala__frame { width: 100%; } .sf-root .bx-tala__board { position: relative; width: auto; margin: -36px 8px 0 18px; } .sf-root .bx-tala__art { padding-bottom: 8px; } }
@media (min-width: 900px) { .sf-root .bx-tala__grid { grid-template-columns: 1.05fr .95fr; gap: 72px; } }

/* trompo · Trompo: a charcoal grill at night, lime type, order tickets. */
.sf-root .bx-trompo { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 104px) 0 clamp(76px, 9vw, 124px); color: #F4F4EF; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px), var(--sf-primary); }
.sf-root .bx-trompo__glow { position: absolute; right: -10%; top: -20%; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.30), rgba(249,115,22,0) 65%); pointer-events: none; }
.sf-root .bx-trompo__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.sf-root .bx-trompo__eyebrow { display: inline-flex; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: #A3E635; color: #14210A; }
.sf-root .bx-trompo h1 { font-family: var(--sf-heading); font-weight: 400; font-size: min(clamp(50px, 7.4vw, 124px), var(--sf-fit, 1000px)); line-height: .9; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 20px 0; }
.sf-root .bx-trompo h1::first-line { color: #A3E635; }
.sf-root .bx-trompo .sfx-hero-lead { font-size: 18px; line-height: 1.7; color: rgba(244,244,239,.82); max-width: 46ch; margin-bottom: 28px; }
.sf-root .bx-trompo .sf-btn { background: #A3E635; color: #14210A !important; box-shadow: 0 14px 34px rgba(163,230,53,.25); }
.sf-root .bx-trompo .sf-btn:hover { background: #BEF264; }
.sf-root .bx-trompo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; font-size: 14px; font-weight: 600; color: rgba(244,244,239,.75); }
.sf-root .bx-trompo__rail { display: grid; gap: 14px; }
.sf-root .bx-trompo__rail-head { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #A3E635; }
.sf-root .bx-trompo__ticket { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; padding-right: 64px; border-radius: 18px; background: #fff; color: var(--sf-text); box-shadow: 0 22px 44px -18px rgba(0,0,0,.6); transition: transform .2s ease; }
.sf-root .bx-trompo__ticket::before { content: ''; position: absolute; left: 96px; top: 10px; bottom: 10px; border-left: 2px dashed var(--sf-border); }
.sf-root .bx-trompo__ticket:hover { transform: translateX(-4px); }
.sf-root .bx-trompo__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 22px; color: inherit; }
.sf-root .bx-trompo__img { flex-shrink: 0; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.sf-root .bx-trompo__txt { min-width: 0; display: grid; gap: 2px; }
.sf-root .bx-trompo__txt small { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent); }
.sf-root .bx-trompo__txt strong { font-size: 17px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .bx-trompo__txt em { font-style: normal; font-weight: 800; color: var(--sf-text-light); }
.sf-root .bx-trompo__add { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font-size: 24px; font-weight: 700; line-height: 1; background: var(--sf-primary); color: #A3E635; transition: background .15s ease, color .15s ease; }
.sf-root .bx-trompo__add:hover, .sf-root .bx-trompo__add:focus-visible { background: #A3E635; color: #14210A; }
.sf-root .bx-trompo__solo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; object-fit: cover; box-shadow: 0 0 0 6px #A3E635; }
.sf-root .bx-trompo__edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; background: linear-gradient(-45deg, var(--sf-bg) 9px, transparent 0) 0 100% / 18px 18px repeat-x, linear-gradient(45deg, var(--sf-bg) 9px, transparent 0) 0 100% / 18px 18px repeat-x; }
@media (min-width: 900px) {
  .sf-root .bx-trompo__grid { grid-template-columns: 1.1fr .9fr; gap: 72px; }
  .sf-root .bx-trompo__ticket1 { margin-left: 28px; }
  .sf-root .bx-trompo__ticket2 { margin-left: 56px; }
}

.sf-root .sw {
  --p: 0;
  /* the opening gets the first third of the story; the zoom waits for it */
  --open: clamp(0, calc(var(--p) / .3), 1);
  --zoom: clamp(0, calc((var(--p) - .22) / .43), 1);
  --copy: clamp(0, calc(1 - var(--p) / .16), 1);
  --cap: clamp(0, min(calc((var(--p) - .34) / .08), calc((.66 - var(--p)) / .08)), 1);
  --zmax: 1.75;
  --sw-awning: var(--sf-primary);
  --sw-awning-2: #FBF6EE;
  --sw-glow: #FFD58A;
  position: relative;
  background: var(--sf-bg);
}
.sf-root .sw__track { height: 320vh; height: 320svh; position: relative; }
.sf-root .sw__stage {
  contain: layout paint;
  position: sticky; top: var(--sw-top, 70px); height: calc(100vh - var(--sw-top, 70px)); height: calc(100svh - var(--sw-top, 70px)); overflow: hidden;
  isolation: isolate;
}

/* ── sky by time of day ───────────────────────────────────────────────── */
.sf-root .sw__sky { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #9FCBE8 0%, #D9ECF5 55%, #F4EEE3 100%); transition: background .8s ease; }
.sf-root .sw[data-daypart="dawn"] .sw__sky { background: linear-gradient(180deg, #F3B3A0 0%, #F8D6B4 45%, #FBEBDD 100%); }
.sf-root .sw[data-daypart="dusk"] .sw__sky { background: linear-gradient(180deg, #4A4E8C 0%, #C8728A 50%, #F2B48C 100%); }
.sf-root .sw[data-daypart="night"] .sw__sky { background: linear-gradient(180deg, #0E1630 0%, #1F2A4D 60%, #3A3B5C 100%); }

/* ── the scene: one picture, placed, then zoomed ──────────────────────── */
.sf-root .sw__scene-pos {
  position: absolute; left: 58%; top: 50%;
  width: max(100vw, 150vh); width: max(100vw, 150svh); aspect-ratio: 3 / 2;
  /* moved with transform, never with left: layout work every frame stutters */
  transform: translate(calc(-50% - 8vw * var(--zoom)), -50%);
}
.sf-root .sw__scene {
  position: absolute; inset: 0; container-type: inline-size;
  transform-origin: 50% 64.4%;
  transform: scale(calc(1 + var(--zoom) * (var(--zmax) - 1)));
  will-change: transform;
}
.sf-root .sw__facade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }

/* window opening = 330..870 × 380..650 of 1200×800 */
.sf-root .sw__window, .sf-root .sw__display, .sf-root .sw__shutter-clip {
  position: absolute; left: 27.5%; top: 47.5%; width: 45%; height: 33.75%;
}
.sf-root .sw__window { z-index: 1; background: var(--sw-inside); overflow: hidden; }
.sf-root .sw__window-light { position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 20%, color-mix(in srgb, var(--sw-glow) 70%, transparent), transparent 70%); }
.sf-root .sw[data-daypart="night"] .sw__window-light, .sf-root .sw[data-daypart="dusk"] .sw__window-light {
  background: radial-gradient(80% 100% at 50% 25%, var(--sw-glow), color-mix(in srgb, var(--sw-glow) 30%, transparent) 70%); }
.sf-root .sw__lamp { opacity: .35; }
.sf-root .sw[data-daypart="night"] .sw__lamp, .sf-root .sw[data-daypart="dusk"] .sw__lamp,
.sf-root .sw[data-daypart="night"] .sw__bulb, .sf-root .sw[data-daypart="dusk"] .sw__bulb { opacity: 1; filter: drop-shadow(0 0 6px var(--sw-glow)); }

/* the products: above the facade so they can lift out of the window */
.sf-root .sw__display { z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: 1.4cqw 2cqw 1.2cqw; gap: .6cqw 1.6cqw; align-items: end; justify-items: center; pointer-events: none; }
.sf-root .sw__display--florist { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); padding: 1.2cqw 1.4cqw 0; gap: 0 .7cqw; }
.sf-root .sw__ledge { position: absolute; left: 0; right: 0; height: .8cqw; top: calc(50% - .2cqw);
  background: var(--sw-shelf); box-shadow: 0 .4cqw .6cqw rgba(0,0,0,.18); z-index: -1; }
.sf-root .sw__display--florist .sw__ledge { display: none; }
.sf-root .sw__good {
  --l: clamp(0, calc((var(--p) - .58 - var(--i) * .025) / .22), 1);
  position: relative; display: flex; flex-direction: column; align-items: center;
  transform: translate(calc(var(--l) * var(--dx) * var(--sx, 1)), calc(var(--l) * var(--ldy, var(--dy)))) rotate(calc(var(--l) * var(--rot))) scale(calc(1 + var(--l) * (var(--lscale, 1.35) - 1)));
  will-change: transform;
}
.sf-root .sw__good img, .sf-root .sw__good-blank {
  width: 8.4cqw; height: 8.4cqw; object-fit: cover; border-radius: 1cqw; display: block;
  /* a fixed shadow: an animated one repaints every product on every frame */
  box-shadow: 0 1cqw 2cqw rgba(30,15,5,.3);
  background: var(--sf-surface);
}
.sf-root .sw__good-blank { display: grid; place-items: center; font: 700 3.4cqw/1 var(--sf-heading); color: var(--sf-primary); }
.sf-root .sw__display--florist .sw__good img, .sf-root .sw__display--florist .sw__good-blank {
  width: 6.2cqw; height: 6.2cqw; border-radius: 50%; border: .3cqw solid #fff; }
/* florist: each bouquet stands in a zinc bucket */
.sf-root .sw__display--florist .sw__tag { top: 6.6cqw; }
.sf-root .sw__display--florist .sw__good::after {
  content: ''; width: 4.6cqw; height: 5cqw; margin-top: -.7cqw; z-index: -1;
  background: linear-gradient(90deg, #8F9A9E, #C3CCCF 45%, #8F9A9E);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); opacity: calc(1 - var(--l));
}
.sf-root .sw__tag {
  position: absolute; top: calc(100% + .4cqw); left: 50%; transform: translateX(-50%); max-width: 10.5cqw; padding: .25cqw .7cqw; border-radius: 999px;
  font: 700 .85cqw/1.3 var(--sf-body); font-style: normal; color: var(--sf-text); background: rgba(255,255,255,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: clamp(0, calc((var(--zoom) - .55) * 3), 1);
}

/* the shutter / blind, clipped to the window */
.sf-root .sw__shutter-clip { z-index: 4; overflow: hidden; pointer-events: none; }
.sf-root .sw__shutter { position: absolute; inset: 0; transform: translateY(calc(var(--open) * -101%)); will-change: transform;
  display: grid; place-items: center; }
/* the drum the shutter coils onto: it thickens as the shutter winds up */
.sf-root .sw__drum { position: absolute; left: -1%; right: -1%; top: 0; z-index: 2; height: 1.6cqw; transform-origin: top;
  transform: scaleY(calc(1 + var(--open) * 1.4)); border-radius: 0 0 .8cqw .8cqw; box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.25); }
.sf-root .sw__drum--metal { background: linear-gradient(180deg, var(--sw-shutter-2), var(--sw-shutter) 55%, var(--sw-shutter-2)); }
.sf-root .sw__drum--blind { background: linear-gradient(180deg, #E4D7C3, #F6EFE3 50%, #DCCDB5); }
.sf-root .sw__shutter-text { opacity: calc(1 - var(--open) * 1.6); }

/* the door: a doorway behind the facade, a leaf that swings open on its hinge */
.sf-root .sw__doorway, .sf-root .sw__door { position: absolute; left: 76%; top: 51.5%; width: 7.1667%; height: 36.5%; }
.sf-root .sw__doorway { z-index: 1; background: var(--sw-inside); overflow: hidden; }
.sf-root .sw__doorway-light { position: absolute; inset: 0; opacity: var(--open);
  background: radial-gradient(120% 70% at 50% 30%, var(--sw-glow), color-mix(in srgb, var(--sw-glow) 25%, transparent) 75%); }
.sf-root .sw__door { z-index: 3; perspective: 30cqw; }
.sf-root .sw__door-leaf { position: absolute; inset: 0; transform-origin: left center; will-change: transform;
  transform: rotateY(calc(var(--open) * -80deg)); background: var(--sw-door);
  box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.18), calc(var(--open) * 1.5cqw) 0 2cqw rgba(0,0,0,calc(var(--open) * .35)); }
.sf-root .sw__door-glass { position: absolute; left: 14%; right: 14%; top: 5%; height: 55%; border-radius: .3cqw;
  background: linear-gradient(160deg, #CFE3EA, #9FBFCB 60%, #B8D2DB); box-shadow: inset 0 0 0 .25cqw rgba(0,0,0,.15); }
.sf-root .sw__door-handle { position: absolute; right: 9%; top: 58%; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--sw-brass); }
/* warm light spilling onto the pavement as the shop opens */
.sf-root .sw__spill { position: absolute; z-index: 1; left: 25%; right: 12%; top: 87%; height: 9%; pointer-events: none; opacity: calc(var(--open) * .85);
  background: radial-gradient(50% 100% at 45% 0, color-mix(in srgb, var(--sw-glow) 55%, transparent), transparent 70%); }
.sf-root .sw__shutter--metal {
  background: repeating-linear-gradient(180deg, var(--sw-shutter) 0 1.6cqw, var(--sw-shutter-2) 1.6cqw 1.85cqw);
  box-shadow: inset 0 -1.2cqw 0 var(--sw-shutter-2);
}
.sf-root .sw__shutter--blind {
  background: linear-gradient(180deg, #F6EFE3, #EFE4D2);
  border-bottom: .6cqw solid var(--sw-awning);
}
.sf-root .sw__shutter--blind::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2.2cqw; height: 1.6cqw;
  background: radial-gradient(circle at 50% 0, var(--sw-awning) 62%, transparent 64%) 0 0 / 2.6cqw 1.6cqw repeat-x; }
.sf-root .sw__shutter-text { font: 600 2.6cqw/1.1 var(--sf-heading); letter-spacing: .02em; color: var(--sw-shutter-ink);
  padding: .6cqw 2cqw; border: .2cqw solid currentColor; border-radius: .6cqw; text-align: center; max-width: 80%; }

/* sign and door */
.sf-root .sw__sign { position: absolute; z-index: 3; left: 19.67%; top: 29.25%; width: 60.67%; height: 7.75%;
  display: grid; place-items: center; padding: 0 3cqw; }
.sf-root .sw__sign { gap: 1.4cqw; grid-auto-flow: column; justify-content: center; }
.sf-root .sw__sign-logo { height: 5.6cqw; width: 5.6cqw; object-fit: contain; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: .3cqw solid var(--sw-sign-line); box-shadow: 0 .3cqw .8cqw rgba(0,0,0,.25); }
.sf-root .sw__sign .sw__sign-name { font: 700 3.5cqw/1 var(--sf-heading); color: var(--sw-sign-ink); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 .1cqw 0 rgba(0,0,0,.2); }
.sf-root .sw__door-sign { position: absolute; z-index: 1; left: 50%; top: 20%; transform: translateX(-50%);
  font: 800 .95cqw/1 var(--sf-body); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: #2F7D4A; padding: .45cqw .7cqw; border-radius: .3cqw; }
.sf-root .sw__door-sign.is-closed { background: #9B2C2C; }

/* florist petals drifting across the street */
.sf-root .sw__petals { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.sf-root .sw__petals i { position: absolute; top: -3%; left: calc(8% + var(--k) * 10%); width: .9cqw; height: .6cqw;
  border-radius: 60% 40% 60% 40%; background: #F4A7B9; opacity: .85;
  animation: sw-petal calc(9s + var(--k) * 1.3s) linear calc(var(--k) * -1.7s) infinite; }
.sf-root .sw__petals i:nth-child(3n) { background: #fff; }
.sf-root .sw__petals i:nth-child(4n) { background: #E26D8D; }
@keyframes sw-petal {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(6cqw, 32cqw) rotate(220deg); }
  100% { transform: translate(-2cqw, 68cqw) rotate(460deg); }
}
.sf-root .sw__neon { filter: drop-shadow(0 0 .5cqw var(--sw-neon)); }

/* ── copy, clock, caption, cue ────────────────────────────────────────── */
.sf-root .sw__copy {
  position: absolute; z-index: 6; left: max(16px, 4vw); top: 50%; width: min(440px, 36vw);
  transform: translateY(calc(-50% - (1 - var(--copy)) * 40px)); opacity: var(--copy);
  padding: 30px 30px 26px; border-radius: calc(var(--sf-radius, 16px) + 6px);
  background: color-mix(in srgb, var(--sf-surface) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 60px -30px rgba(20,10,5,.45); border: 1px solid color-mix(in srgb, var(--sf-border) 70%, transparent);
}
.sf-root .sw__eyebrow { display: inline-block; font: 700 12px/1 var(--sf-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-primary); }
.sf-root .sw__copy h1 { margin: 12px 0 10px; font-family: var(--sf-heading); font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.01em;
  color: var(--sf-text); overflow-wrap: break-word; text-wrap: balance; }
.sf-root .sw__copy .sfx-hero-lead { margin: 0 0 20px; color: var(--sf-text-light); font-size: 16px; line-height: 1.55; }
.sf-root .sw__clock { position: absolute; z-index: 6; right: max(16px, 3vw); top: 22px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px; background: rgba(20,14,10,.62); color: #fff; font: 600 14px/1 var(--sf-body);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-root .sw__clock b { font-variant-numeric: tabular-nums; }
.sf-root .sw__clock i { font-style: normal; font-size: 12px; }
.sf-root .sw__clock i.is-open::before, .sf-root .sw__clock i.is-closed::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #4ADE80; }
.sf-root .sw__clock i.is-closed::before { background: #F87171; }
.sf-root .sw__caption { position: absolute; z-index: 6; left: 50%; bottom: 9vh; width: min(92vw, 760px); margin: 0;
  transform: translate(-50%, calc((1 - var(--cap)) * 24px)); opacity: var(--cap); text-align: center;
  font: 600 clamp(24px, 3.2vw, 42px)/1.15 var(--sf-heading); color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.sf-root .sw__cue { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); opacity: var(--copy);
  display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 11px/1 var(--sf-body); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-text); }
.sf-root .sw__skip { position: absolute; z-index: 7; right: max(16px, 3vw); bottom: 22px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgba(20,14,10,.62); color: #fff; font: 700 13px/1 var(--sf-body); text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: calc(1 - var(--copy) * .4); }
.sf-root .sw__skip:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-root .sw__today { scroll-margin-top: 72px; }
.sf-root .sw__cue span { width: 2px; height: 28px; border-radius: 2px; background: currentColor; transform-origin: top; animation: sw-cue 1.8s ease-in-out infinite; }
@keyframes sw-cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── today's selection (plain page content) ───────────────────────────── */
.sf-root .sw__today { position: relative; z-index: 2; padding: 56px 0 64px; background: var(--sf-bg);
  border-radius: 28px 28px 0 0; margin-top: -28px; box-shadow: 0 -20px 40px -30px rgba(0,0,0,.35); }
.sf-root .sw__today-head h2 { margin: 0; font: 600 clamp(28px, 3.4vw, 44px)/1.1 var(--sf-heading); color: var(--sf-text); }
.sf-root .sw__today-head p { margin: 8px 0 26px; color: var(--sf-text-light); }
.sf-root .sw__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sf-root .sw__card { display: flex; flex-direction: column; background: var(--sf-surface); border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius, 16px); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.sf-root .sw__card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20,10,5,.45); }
.sf-root .sw__card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.sf-root .sw__card img, .sf-root .sw__card-blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sf-bg); }
.sf-root .sw[data-scene="florist"] .sw__card img, .sf-root .sw[data-scene="florist"] .sw__card-blank { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
.sf-root .sw__card-blank { display: grid; place-items: center; font: 700 44px/1 var(--sf-heading); color: var(--sf-primary); }
.sf-root .sw__card-body { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 4px; }
.sf-root .sw__card-body strong { font-size: 16px; line-height: 1.3; }
.sf-root .sw__card-desc { font-size: 13.5px; line-height: 1.45; color: var(--sf-text-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-root .sw__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 16px; }
.sf-root .sw__card-foot b { font-size: 15px; }
.sf-root .sw__add { min-height: 44px; min-width: 64px; padding: 0 16px; border: 0; border-radius: var(--sf-button-radius, 999px); cursor: pointer;
  background: var(--sf-primary); color: var(--sf-on-primary, #fff); font: 700 14px/1 var(--sf-body); margin-left: auto; }
.sf-root .sw__add:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.sf-root .sw__all { margin-top: 26px; display: inline-flex; }

/* the hanging sign: a bracket from the wall and a round board with the logo
   (left of the upstairs window, 215..295 × 150..250 of the 1200×800 drawing) */
.sf-root .sw__blade { position: absolute; z-index: 3; left: 16.6%; top: 17.5%; width: 7.5%; aspect-ratio: 1; pointer-events: none; }
.sf-root .sw__blade-arm { position: absolute; left: -12%; right: 30%; top: 0; height: .5cqw; background: var(--sw-frame); border-radius: .3cqw; }
.sf-root .sw__blade-arm::before, .sf-root .sw__blade-arm::after { content: ''; position: absolute; top: .4cqw; width: .25cqw; height: 1.4cqw; background: var(--sw-frame); }
.sf-root .sw__blade-arm::before { left: 38%; }
.sf-root .sw__blade-arm::after { left: 78%; }
.sf-root .sw__blade-disc { position: absolute; left: 6%; right: 6%; top: 1.6cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--sw-sign); border: .45cqw solid var(--sw-sign-line);
  box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.28); transform-origin: 50% -1.6cqw; animation: sw-sway 6s ease-in-out infinite; }
.sf-root .sw__blade-disc img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sf-root .sw__blade-disc b { font: 700 2.4cqw/1 var(--sf-heading); color: var(--sw-sign-ink); }
@keyframes sw-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .sf-root .sw__blade-disc { animation: none; } }

/* ── scenes: palettes for each kind of shop ───────────────────────────── */
.sf-root .sw[data-scene="florist"] { --sw-wall: #DCE6D5; --sw-trim: #F7F3EA; --sw-trim-2: #B9C9AE; --sw-upper: #9FB7C4; --sw-sign: #3F5A45; --sw-sign-line: #C9B27C; --sw-sign-ink: #FBF6EE;
  --sw-awning-2: #FBF6EE; --sw-frame: #3F5A45; --sw-riser: #C7D4BE; --sw-riser-line: #A9BBA0; --sw-door: #3F5A45; --sw-brass: #C9B27C; --sw-inside: #F3E9DE; --sw-shelf: #B9A27E;
  --sw-side: #E9D9CC; --sw-side-2: #D7C6D8; --sw-side-win: #B9C7CF; --sw-ground: #CFC7BC; --sw-ground-2: #B8AFA3; --sw-curb: #A39A8E; --sw-mortar: #c9bdb1; --sw-shutter-ink: #3F5A45; }
.sf-root .sw[data-scene="bakery"] { --sw-wall: #EFE4D2; --sw-trim: #2F4A3A; --sw-trim-2: #24392D; --sw-upper: #8FA6B2; --sw-sign: #2F4A3A; --sw-sign-line: #C9A35C; --sw-sign-ink: #F6E7C9;
  --sw-frame: #2F4A3A; --sw-riser: #E3D3BA; --sw-riser-line: #CDB892; --sw-door: #2F4A3A; --sw-brass: #C9A35C; --sw-inside: #4A3424; --sw-shelf: #8A5E36; --sw-glow: #FFC46B;
  --sw-side: #D9CBB8; --sw-side-2: #C9B7A0; --sw-side-win: #8FA6B2; --sw-ground: #B9AE9F; --sw-ground-2: #9E9284; --sw-curb: #8C8073; --sw-mortar: #cdbfa9;
  --sw-shutter: #6E7A73; --sw-shutter-2: #56605A; --sw-shutter-ink: #F1E7D2; }
.sf-root .sw[data-scene="dessert"] { --sw-wall: #FBE3EA; --sw-trim: #FFFFFF; --sw-trim-2: #F3C4D2; --sw-upper: #BFE6D6; --sw-sign: #D6587A; --sw-sign-line: #FFFFFF; --sw-sign-ink: #FFFFFF;
  --sw-awning-2: #FFFFFF; --sw-frame: #D6587A; --sw-riser: #F7CAD6; --sw-riser-line: #EBA9BC; --sw-door: #D6587A; --sw-brass: #F6C453; --sw-inside: #FFF7F0; --sw-shelf: #F3C4D2;
  --sw-side: #DDEFE8; --sw-side-2: #FFF1C9; --sw-side-win: #A8CFE0; --sw-ground: #E7DED8; --sw-ground-2: #D3C8C0; --sw-curb: #C3B6AD; --sw-mortar: #f0cfd8; --sw-shutter-ink: #D6587A; }
.sf-root .sw[data-scene="coffee"] { --sw-wall: #263A30; --sw-trim: #1A2821; --sw-trim-2: #C9A35C; --sw-upper: #6D8C99; --sw-sign: #14201A; --sw-sign-line: #C9A35C; --sw-sign-ink: #F2E6CF;
  --sw-frame: #14201A; --sw-riser: #1F3027; --sw-riser-line: #3E5447; --sw-door: #14201A; --sw-brass: #C9A35C; --sw-inside: #5A3E2B; --sw-shelf: #3A2A1E; --sw-glow: #FFCB7A; --sw-neon: #FFB45C;
  --sw-side: #C9BBA8; --sw-side-2: #8E8478; --sw-side-win: #6D8C99; --sw-ground: #A69C90; --sw-ground-2: #8B8176; --sw-curb: #75695E; --sw-mortar: #33493d;
  --sw-shutter: #3E4A44; --sw-shutter-2: #2C3531; --sw-shutter-ink: #F2E6CF; }
.sf-root .sw[data-scene="pizza"] { --sw-wall: #A8452F; --sw-trim: #F3E7D3; --sw-trim-2: #2F6B3B; --sw-upper: #8FA6B2; --sw-sign: #F3E7D3; --sw-sign-line: #B3261E; --sw-sign-ink: #B3261E;
  --sw-awning-2: #F3E7D3; --sw-frame: #2A2420; --sw-riser: #F3E7D3; --sw-riser-line: #D8C7AA; --sw-door: #2A2420; --sw-brass: #E0B354; --sw-inside: #3A2218; --sw-shelf: #6B4428; --sw-glow: #FFB04A;
  --sw-side: #D8C7AA; --sw-side-2: #8E9C8A; --sw-side-win: #8FA6B2; --sw-ground: #A9A096; --sw-ground-2: #8E857B; --sw-curb: #77706A; --sw-mortar: #c27a62;
  --sw-shutter: #6B6F72; --sw-shutter-2: #54585B; --sw-shutter-ink: #F3E7D3; }
.sf-root .sw[data-scene="grocery"] { --sw-wall: #F2EFE6; --sw-trim: #1F4E5F; --sw-trim-2: #173B48; --sw-upper: #9FB7C4; --sw-sign: #1F4E5F; --sw-sign-line: #E8C547; --sw-sign-ink: #FFFFFF;
  --sw-frame: #1F4E5F; --sw-riser: #DCD6C8; --sw-riser-line: #C4BCAA; --sw-door: #1F4E5F; --sw-brass: #E8C547; --sw-inside: #F7F3EA; --sw-shelf: #9C7A54;
  --sw-side: #D9CDBB; --sw-side-2: #BFC9C2; --sw-side-win: #9FB7C4; --sw-ground: #BDB5AA; --sw-ground-2: #A39A8F; --sw-curb: #8B8278; --sw-mortar: #ddd6c6;
  --sw-shutter: #7C8A8F; --sw-shutter-2: #63707A; --sw-shutter-ink: #FFFFFF; }
.sf-root .sw[data-scene="restaurant"] { --sw-wall: #6B4A3A; --sw-trim: #2A2522; --sw-trim-2: #C9A35C; --sw-upper: #8FA6B2; --sw-sign: #2A2522; --sw-sign-line: #C9A35C; --sw-sign-ink: #F3E7D3;
  --sw-awning-2: #F3E7D3; --sw-frame: #2A2522; --sw-riser: #3A322D; --sw-riser-line: #554A43; --sw-door: #2A2522; --sw-brass: #C9A35C; --sw-inside: #3A2A20; --sw-shelf: #5A4030; --sw-glow: #FFC07A;
  --sw-side: #C9BBA8; --sw-side-2: #9AA39A; --sw-side-win: #8FA6B2; --sw-ground: #A69C90; --sw-ground-2: #8B8176; --sw-curb: #75695E; --sw-mortar: #8a6654;
  --sw-shutter: #5E6266; --sw-shutter-2: #4A4E52; --sw-shutter-ink: #F3E7D3; }

/* ── the store's own brand on the shop front ──────────────────────────────
   Whatever the scene, the awning, sign board, frames, door and trim take the
   brand colour chosen in Website settings (--sf-primary, --sf-accent), and the
   walls a light tint of it, so every store's shop looks like theirs. The scene
   keeps its props (buckets, crates, string lights) and its street. */
.sf-root .sw[data-scene] {
  --sw-awning: var(--sf-primary);
  --sw-awning-2: color-mix(in srgb, var(--sf-primary) 6%, #FFFDF8);
  --sw-sign: var(--sf-primary);
  --sw-sign-ink: var(--sf-on-primary, #fff);
  --sw-sign-line: var(--sf-accent);
  --sw-brass: var(--sf-accent);
  --sw-frame: color-mix(in srgb, var(--sf-primary) 82%, #000);
  --sw-door: color-mix(in srgb, var(--sf-primary) 88%, #000);
  --sw-trim: color-mix(in srgb, var(--sf-primary) 10%, #FFFDF8);
  --sw-trim-2: color-mix(in srgb, var(--sf-primary) 30%, #FFFDF8);
  --sw-wall: color-mix(in srgb, var(--sf-primary) 16%, #F7F2EA);
  --sw-mortar: color-mix(in srgb, var(--sf-primary) 26%, #F7F2EA);
  --sw-riser: color-mix(in srgb, var(--sf-primary) 26%, #F7F2EA);
  --sw-riser-line: color-mix(in srgb, var(--sf-primary) 40%, #F7F2EA);
  --sw-shutter-ink: var(--sf-primary);
}
/* brick fronts (pizza, restaurant): a deeper brand-tinted brick */
.sf-root .sw[data-scene="pizza"], .sf-root .sw[data-scene="restaurant"] {
  --sw-wall: color-mix(in srgb, var(--sf-primary) 55%, #8A5A44);
  --sw-mortar: color-mix(in srgb, var(--sf-primary) 30%, #D9C7B5);
  --sw-trim: color-mix(in srgb, var(--sf-primary) 12%, #F3E7D3);
}
/* metal shutters carry light lettering */
.sf-root .sw[data-scene="bakery"], .sf-root .sw[data-scene="coffee"], .sf-root .sw[data-scene="pizza"],
.sf-root .sw[data-scene="grocery"], .sf-root .sw[data-scene="restaurant"] { --sw-shutter-ink: #F7F2EA; }
/* coffee: an espresso-dark front in the brand's hue */
.sf-root .sw[data-scene="coffee"] {
  --sw-wall: color-mix(in srgb, var(--sf-primary) 45%, #1C1A18);
  --sw-riser: color-mix(in srgb, var(--sf-primary) 40%, #141210);
  --sw-riser-line: color-mix(in srgb, var(--sf-primary) 50%, #3A3632);
  --sw-trim: color-mix(in srgb, var(--sf-primary) 30%, #141210);
}

/* ── phones: the shop front sits low, the copy above it ──────────────── */
@media (max-aspect-ratio: 1/1) {
  /* A thumb flick throws the page about two screens: give each stage roughly
     a full swipe, keep the zoomed window inside the screen, and keep the
     lifted products in view. */
  .sf-root .sw { --zmax: 1.45; --sx: .45; }
  .sf-root .sw__track { height: 430vh; height: 430svh; }
  /* products drop onto the pavement, big, each with its name and price */
  .sf-root .sw__good { --ldy: var(--mdy); --sx: 0; --lscale: 1.5; }
  .sf-root .sw__tag { font-size: 1.15cqw; max-width: 15cqw; padding: .3cqw .8cqw; opacity: var(--l); }
  .sf-root .sw__display--florist { padding: .8cqw .6cqw 0; gap: 0 .4cqw; }
  .sf-root .sw__display--florist .sw__good img, .sf-root .sw__display--florist .sw__good-blank { width: 8.2cqw; height: 8.2cqw; }
  .sf-root .sw__display--florist .sw__good::after { width: 5.4cqw; height: 4.6cqw; }
  .sf-root .sw__good img, .sf-root .sw__good-blank { width: 11.5cqw; height: 11.5cqw; }
  .sf-root .sw__skip { top: 12px; bottom: auto; right: 12px; font-size: 12.5px; opacity: calc(1 - var(--copy)); pointer-events: auto; }
  /* The shop front fills the top of the screen; as the story starts it
     moves down to the middle while it zooms. */
  .sf-root .sw__scene-pos { left: 50%; top: 0; width: 140vw; transform: translate(-50%, calc(var(--zoom) * 16svh)); }
  /* the street continues below the drawing */
  .sf-root .sw__scene-pos::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 99%; height: 100svh;
    background:
      linear-gradient(180deg, rgba(0,0,0,.08), transparent 18%),
      repeating-linear-gradient(90deg, transparent 0 calc(14vw - 1.5px), rgba(0,0,0,.07) calc(14vw - 1.5px) 14vw),
      repeating-linear-gradient(180deg, transparent 0 calc(9vw - 1.5px), rgba(0,0,0,.06) calc(9vw - 1.5px) 9vw),
      var(--sw-ground-2); }
  /* the name and buttons sit UNDER the shop front, compact, above the tab bar */
  .sf-root .sw__copy { left: 12px; right: 12px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); width: auto;
    transform: translateY(calc((1 - var(--copy)) * 40px)); padding: 16px 16px 14px; text-align: center;
    background: var(--sf-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sf-root .sw__eyebrow { font-size: 11px; }
  .sf-root .sw__copy h1 { font-size: clamp(26px, 7.5vw, 34px); margin: 6px 0 6px; }
  .sf-root .sw__copy .sfx-hero-lead { font-size: 14px; line-height: 1.45; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sf-root .sw__copy .sfx-hero-actions, .sf-root .sw__copy > div:last-child { justify-content: center; }
  /* the door sign already says open or closed; the bottom bar would cover these */
  .sf-root .sw__clock, .sf-root .sw__cue { display: none; }
  .sf-root .sw__caption { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); top: auto; font-size: 24px; }
  .sf-root .sw__today { padding: 40px 0 48px; }
  .sf-root .sw__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sf-root .sw__card-body { padding: 10px 12px 4px; }
  .sf-root .sw__card-foot { padding: 6px 12px 12px; }
}

/* ── reduced motion: nothing moves; the blind and the words fade instead ── */
@media (prefers-reduced-motion: reduce) {
  .sf-root .sw { --zoom: 0; }
  .sf-root .sw__track { height: 200vh; height: 200svh; }
  .sf-root .sw__good { --l: 0; }
  .sf-root .sw__shutter { transform: none; opacity: calc(1 - var(--open)); }
  .sf-root .sw__door-leaf { transform: none; opacity: calc(1 - var(--open)); }
  .sf-root .sw__drum { transform: none; }
  .sf-root .sw__copy { transform: translateY(-50%); }
  .sf-root .sw__caption { transform: translateX(-50%); }
  .sf-root .sw__petals, .sf-root .sw__cue { display: none; }
  .sf-root .sw__sky { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  .sf-root .sw__copy { transform: none; }
}

/* ═══ Scroll-driven layer ═════════════════════════════════════════════════
   Where the browser supports scroll-driven animations (iOS 26 Safari, Chrome,
   Edge, Android), every stage is a CSS animation on a view timeline of the
   track: it runs on the compositor, in step with the finger, with no script
   per frame. That is what makes a phone as smooth as a desktop. The --p rules
   above stay as the fallback for older browsers (the script drives them).
   Ranges: "contain" = while the pinned stage is on screen, 0% → 100%. */
@supports (animation-timeline: view()) {
  .sf-root .sw__track { view-timeline: --sw block; view-timeline-inset: var(--sw-top, 70px) 0px; }

  @keyframes sw-k-shutter { to { transform: translateY(-101%); } }
  @keyframes sw-k-drum { to { transform: scaleY(2.4); } }
  @keyframes sw-k-out { to { opacity: 0; } }
  @keyframes sw-k-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sw-k-spill { from { opacity: 0; } to { opacity: .85; } }
  @keyframes sw-k-door { to { transform: rotateY(-80deg); } }
  @keyframes sw-k-zoom { to { transform: scale(var(--zmax)); } }
  @keyframes sw-k-pos { from { transform: translate(-50%, -50%); } to { transform: translate(calc(-50% - 8vw), -50%); } }
  @keyframes sw-k-pos-m { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 16svh); } }
  @keyframes sw-k-copy { from { transform: translateY(-50%); opacity: 1; } to { transform: translateY(calc(-50% - 40px)); opacity: 0; } }
  @keyframes sw-k-copy-m { from { transform: none; opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
  @keyframes sw-k-cap {
    0% { opacity: 0; transform: translate(-50%, 24px); }
    25%, 75% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
  }
  @keyframes sw-k-lift { to { transform: translate(calc(var(--dx) * var(--sx, 1)), var(--ldy, var(--dy))) rotate(var(--rot)) scale(var(--lscale, 1.35)); } }

  @media (prefers-reduced-motion: no-preference) {
    .sf-root .sw__shutter { animation: sw-k-shutter linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
    .sf-root .sw__drum { animation: sw-k-drum linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
    .sf-root .sw__door-leaf { animation: sw-k-door linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
    .sf-root .sw__scene { animation: sw-k-zoom linear both; animation-timeline: --sw; animation-range: contain 22% contain 65%; }
    .sf-root .sw__scene-pos { animation: sw-k-pos linear both; animation-timeline: --sw; animation-range: contain 22% contain 65%; }
    .sf-root .sw__copy { animation: sw-k-copy linear both; animation-timeline: --sw; animation-range: contain 0% contain 16%; }
    .sf-root .sw__caption { animation: sw-k-cap linear both; animation-timeline: --sw; animation-range: contain 34% contain 66%; }
    .sf-root .sw__good {
      animation: sw-k-lift ease-out both; animation-timeline: --sw;
      animation-range: contain calc(58% + var(--i) * 2.5%) contain calc(80% + var(--i) * 2.5%);
    }
    .sf-root .sw__display--florist .sw__good::after {
      animation: sw-k-out linear both; animation-timeline: --sw;
      animation-range: contain calc(58% + var(--i) * 2.5%) contain calc(80% + var(--i) * 2.5%);
    }
  }
  .sf-root .sw__shutter-text { animation: sw-k-out linear both; animation-timeline: --sw; animation-range: contain 0% contain 18%; }
  .sf-root .sw__doorway-light { animation: sw-k-in linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
  .sf-root .sw__spill { animation: sw-k-spill linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
  .sf-root .sw__tag { animation: sw-k-in linear both; animation-timeline: --sw; animation-range: contain 46% contain 60%; }
  .sf-root .sw__cue { animation: sw-k-out linear both; animation-timeline: --sw; animation-range: contain 0% contain 16%; }
  .sf-root .sw__skip { opacity: 1; }

  @media (max-aspect-ratio: 1/1) {
    .sf-root .sw__tag { animation-range: contain 60% contain 80%; }
    .sf-root .sw__skip { animation: sw-k-in linear both; animation-timeline: --sw; animation-range: contain 0% contain 16%; }
  }
  @media (max-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference) {
    .sf-root .sw__scene-pos { animation-name: sw-k-pos-m; }
    .sf-root .sw__copy { animation-name: sw-k-copy-m; }
  }

  /* Reduce Motion: nothing moves; the shop opens and the words change by fading. */
  @media (prefers-reduced-motion: reduce) {
    .sf-root .sw__shutter, .sf-root .sw__door-leaf { animation: sw-k-out linear both; animation-timeline: --sw; animation-range: contain 0% contain 30%; }
    .sf-root .sw__copy { animation: sw-k-out linear both; animation-timeline: --sw; animation-range: contain 0% contain 16%; }
    .sf-root .sw__caption { opacity: 0; animation: sw-k-in linear both; animation-timeline: --sw; animation-range: contain 34% contain 42%; }
    .sf-root .sw__tag { animation: none; opacity: 0; }
  }
}

.sf-root .h3d {
  position: relative; height: 340vh;
  /* Everything on the stage follows the website's colours: a near-black
     tinted by the main colour, and a light tint of it for accents. */
  --h3d-ink: color-mix(in srgb, var(--sf-primary) 10%, #0B0908);
  --h3d-ink-2: color-mix(in srgb, var(--sf-primary) 24%, #1A1411);
  --h3d-hi: color-mix(in srgb, var(--sf-primary) 42%, #FFFFFF);
}
.sf-root .h3d__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.sf-root .h3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity .8s ease; }
.sf-root .h3d.is-ready .h3d__canvas { opacity: 1; }
.sf-root .h3d__copy { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: 72px; padding-bottom: calc(40px + var(--h3d-cut, 0px)); pointer-events: none; }
/* The outgoing chapter leaves quickly and is gone before the next one fades
   in, so two chapters never show on top of each other. */
.sf-root .h3d__step { grid-area: 1 / 1; max-width: min(640px, 46vw); min-width: 0; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .2s ease, transform .3s ease, visibility 0s linear .2s; }
.sf-root .h3d__step[data-on] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .45s ease .18s, transform .7s cubic-bezier(.2,.75,.2,1) .18s, visibility 0s linear 0s; }
.sf-root .h3d__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 18px; }
.sf-root .h3d__title, .sf-root .h3d__big { font-family: var(--sf-heading); margin: 0 0 20px; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.sf-root .h3d__title { font-size: clamp(48px, 6.6vw, 112px); line-height: .9; }
.sf-root .h3d__big { font-size: clamp(46px, 6.4vw, 108px); line-height: .9; }
.sf-root .h3d .sfx-hero-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; max-width: 44ch; margin: 0 0 26px; }
.sf-root .h3d__line { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 40ch; margin: 0 0 22px; }
.sf-root .h3d__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-root .h3d__chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.sf-root .h3d__dishes { list-style: none; margin: 0 0 22px; padding: 0; display: grid; }
.sf-root .h3d__dishes a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 16px 0; color: inherit; }
.sf-root .h3d__dishes strong { font-family: var(--sf-heading); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; font-weight: inherit; overflow-wrap: anywhere; }
.sf-root .h3d__dishes em { font-style: normal; font-weight: 800; font-size: 17px; }
.sf-root .h3d__n { font-size: 13px; font-weight: 800; letter-spacing: .1em; opacity: .7; }
.sf-root .h3d__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.sf-root .h3d__rail { position: absolute; z-index: 2; right: clamp(14px, 2.4vw, 32px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-root .h3d__rail li { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .3; transition: height .3s ease, opacity .3s ease; }
.sf-root .h3d__rail li.is-on { height: 26px; opacity: 1; }
.sf-root .h3d__cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; opacity: .75; transition: opacity .4s ease; display: grid; justify-items: center; gap: 8px; }
.sf-root .h3d__cue::after { content: ''; width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: h3d-cue 1.8s ease-in-out infinite; }
.sf-root .h3d:not([data-step="0"]) .h3d__cue { opacity: 0; }
@keyframes h3d-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Stack: the dark, cinematic stage. */
.sf-root .h3d--stack .h3d__stage { color: #fff; background: radial-gradient(1100px 760px at 72% 64%, var(--h3d-ink-2) 0%, color-mix(in srgb, var(--sf-primary) 8%, #16110E) 52%, var(--h3d-ink) 100%); }
.sf-root .h3d--stack .h3d__eyebrow { color: var(--h3d-hi); }
.sf-root .h3d--stack .h3d__title, .sf-root .h3d--stack .h3d__big { color: #fff; text-transform: uppercase; letter-spacing: .005em; }
.sf-root .h3d--stack .h3d__big { -webkit-text-stroke: 0; }
.sf-root .h3d--stack .sfx-hero-lead, .sf-root .h3d--stack .h3d__line { color: rgba(255,255,255,.82); }
.sf-root .h3d--stack .h3d__chips a { color: #fff; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.sf-root .h3d--stack .h3d__chips a:hover, .sf-root .h3d--stack .h3d__chips a:focus-visible { background: var(--sf-primary); color: var(--sf-on-primary, #fff); border-color: var(--sf-primary); }
.sf-root .h3d--stack .h3d__dishes li { border-top: 1px solid rgba(255,255,255,.18); }
.sf-root .h3d--stack .h3d__dishes li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.sf-root .h3d--stack .h3d__dishes strong { text-transform: uppercase; }
.sf-root .h3d--stack .h3d__dishes em, .sf-root .h3d--stack .h3d__more { color: var(--h3d-hi); }
.sf-root .h3d--stack .h3d__dishes a:hover strong { color: var(--h3d-hi); }
.sf-root .h3d--stack .h3d__rail li.is-on { background: var(--h3d-hi); }

/* Studio: the bright product-page stage. */
.sf-root .h3d--studio .h3d__stage { color: var(--sf-text); background: radial-gradient(1000px 720px at 70% 46%, #ffffff 0%, color-mix(in srgb, var(--sf-bg) 70%, #fff) 46%, color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg)) 100%); }
.sf-root .h3d--studio .h3d__eyebrow { color: var(--sf-primary); }
.sf-root .h3d--studio .h3d__title, .sf-root .h3d--studio .h3d__big { color: var(--sf-text); font-weight: 700; letter-spacing: -0.04em; }
.sf-root .h3d--studio .sfx-hero-lead, .sf-root .h3d--studio .h3d__line { color: var(--sf-text-light); }
.sf-root .h3d--studio .h3d__chips a { color: var(--sf-text); background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: 0 6px 18px -12px rgba(0,0,0,.3); }
.sf-root .h3d--studio .h3d__chips a:hover, .sf-root .h3d--studio .h3d__chips a:focus-visible { background: var(--sf-primary); color: var(--sf-on-primary, #fff); border-color: var(--sf-primary); }
.sf-root .h3d--studio .h3d__dishes li { border-top: 1px solid var(--sf-border); }
.sf-root .h3d--studio .h3d__dishes li:last-child { border-bottom: 1px solid var(--sf-border); }
.sf-root .h3d--studio .h3d__dishes em, .sf-root .h3d--studio .h3d__more { color: var(--sf-primary); }
.sf-root .h3d--studio .h3d__dishes a:hover strong { color: var(--sf-primary); }
.sf-root .h3d--studio .h3d__rail li.is-on { background: var(--sf-primary); }

/* Phones and tall tablets: the dish up top, the copy at the bottom, with a
   wash behind it so text stays readable over the scene. */
@media (max-width: 899px), (max-aspect-ratio: 23/20) {
  .sf-root .h3d { height: 300vh; }
  /* Clears the app tab bar and the floating chat button above it. */
  .sf-root .h3d__copy { align-items: end; padding-top: 0; padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px) + var(--h3d-cut, 0px)); }
  .sf-root .h3d__step { max-width: 620px; }
  .sf-root .h3d__stage::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 66%; pointer-events: none; }
  .sf-root .h3d--stack .h3d__stage { background: radial-gradient(900px 620px at 50% 30%, var(--h3d-ink-2) 0%, color-mix(in srgb, var(--sf-primary) 8%, #16110E) 52%, var(--h3d-ink) 100%); }
  .sf-root .h3d--stack .h3d__stage::after { background: linear-gradient(180deg, color-mix(in srgb, var(--h3d-ink) 0%, transparent) 0%, color-mix(in srgb, var(--h3d-ink) 88%, transparent) 30%, color-mix(in srgb, var(--h3d-ink) 96%, transparent) 100%); }
  .sf-root .h3d--studio .h3d__stage { background: radial-gradient(700px 520px at 50% 30%, #ffffff 0%, color-mix(in srgb, var(--sf-bg) 70%, #fff) 50%, color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg)) 100%); }
  .sf-root .h3d--studio .h3d__stage::after { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-bg) 0%, transparent) 0%, color-mix(in srgb, var(--sf-bg) 92%, transparent) 30%, var(--sf-bg) 100%); }
  .sf-root .h3d__title { font-size: clamp(44px, 12vw, 84px); }
  .sf-root .h3d__big { font-size: clamp(40px, 11vw, 76px); }
  .sf-root .h3d__eyebrow { margin-bottom: 12px; }
  .sf-root .h3d .sfx-hero-lead { margin-bottom: 18px; }
  .sf-root .h3d__dishes a { padding: 12px 0; }
  .sf-root .h3d__rail { top: 88px; transform: none; }
  /* Before the stage pins on a phone (bars above the hero still on screen),
     the status chips wait, so the dish and the buttons both fit. */
  .sf-root .h3d[data-under] .h3d__step .sfx-chips { display: none; }
  .sf-root .h3d[data-under] .sfx-hero-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sf-root .h3d__cue { display: none; }
}
@media (max-width: 380px) {
  .sf-root .h3d .sfx-hero-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Short phones (iPhone SE and smaller): the dish takes the top third, so
   each chapter has to fit in what is left. Drop the status chips, keep the
   lead to two lines and let the section links scroll sideways. */
@media (max-width: 899px) and (max-height: 720px) {
  .sf-root .h3d__copy { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px) + var(--h3d-cut, 0px)); }
  .sf-root .h3d__title { font-size: clamp(36px, 10.5vw, 48px); margin-bottom: 12px; }
  .sf-root .h3d__big { font-size: clamp(34px, 10vw, 46px); margin-bottom: 12px; }
  .sf-root .h3d__eyebrow { margin-bottom: 8px; }
  .sf-root .h3d .sfx-hero-lead { font-size: 15px; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sf-root .h3d__line { font-size: 15px; margin-bottom: 14px; }
  .sf-root .h3d__step .sfx-chips { display: none; }
  .sf-root .h3d__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .sf-root .h3d__chips a { flex: none; }
  .sf-root .h3d__dishes a { padding: 9px 0; }
  .sf-root .h3d__dishes strong { font-size: 20px; }
  .sf-root .h3d__stage::after { height: 70%; }
  .sf-root .h3d[data-under] .sfx-hero-lead, .sf-root .h3d[data-under] .h3d__line { display: none; }
}

/* Reduced motion, or no WebGL: an ordinary hero, not a pinned scroll. */
.sf-root .h3d.is-flat { height: auto; }
.sf-root .h3d.is-flat { --h3d-cut: 0px !important; }
.sf-root .h3d.is-flat .h3d__stage { position: relative; height: auto; min-height: min(92vh, 880px); }
.sf-root .h3d.is-flat .h3d__copy { min-height: inherit; }
.sf-root .h3d.is-flat .h3d__step:first-child { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.sf-root .h3d.is-flat .h3d__step:not(:first-child), .sf-root .h3d.is-flat .h3d__rail, .sf-root .h3d.is-flat .h3d__cue { display: none; }
.sf-root .h3d__fallback { position: absolute; z-index: 0; right: 5%; top: 50%; transform: translateY(-50%); width: min(44vw, 560px); aspect-ratio: 1; border-radius: 50%; background-color: var(--sf-primary-dark); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; box-shadow: 0 40px 90px rgba(0,0,0,.35); }
@media (max-width: 899px), (max-aspect-ratio: 23/20) {
  .sf-root .h3d.is-flat .h3d__copy { padding-top: min(78vw, 460px); padding-bottom: 32px; }
  .sf-root .h3d__fallback { right: auto; left: 50%; top: 96px; transform: translateX(-50%); width: min(72vw, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduce Motion: the stage still pins and the dish still comes apart as
     the visitor scrolls (they drive it), but chapters only fade, nothing
     slides, and the scroll cue does not pulse. */
  .sf-root .h3d__step, .sf-root .h3d__step[data-on] { transform: none; transition: opacity .25s linear, visibility 0s linear .25s; }
  .sf-root .h3d__step[data-on] { transition: opacity .25s linear .1s, visibility 0s linear 0s; }
  .sf-root .h3d__cue::after { animation: none; }
  .sf-root .h3d__canvas { transition: none; }
}