.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; }
/* Catering: the owner's "We offer catering" card, on the home and contact pages. */
.sf-catering { scroll-margin-top: 96px; }
.sf-catering-card { max-width: 760px; margin: 0 auto; text-align: center; background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 44px 32px; box-shadow: 0 12px 32px color-mix(in srgb, var(--sf-text) 8%, transparent); }
.sf-catering-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-surface)); color: var(--sf-primary); }
.sf-catering .sf-section-title { color: var(--sf-text); }
.sf-catering-text { white-space: pre-line; font-size: 16.5px; line-height: 1.65; color: var(--sf-text-light); max-width: 620px; margin: 0 auto 28px; overflow-wrap: anywhere; }
.sf-catering-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.sf-catering-actions .sf-btn { min-height: 48px; }
.sf-catering-note { margin-top: 16px; font-size: 14px; color: var(--sf-text-light); }
@media (max-width: 520px) { .sf-catering-card { padding: 32px 20px; } .sf-catering-actions .sf-btn { width: 100%; } }

/* 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; }
}


/* ═══ Shared ═════════════════════════════════════════════════════════════ */
.sf-root .bxm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; }
.sf-root .bxm-tat h1, .sf-root .bxm-zay h1, .sf-root .bxm-kef h1, .sf-root .bxm-night h1 { word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.sf-root .bxm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; font-size: 14px; font-weight: 500; }
.sf-root .bxm-dish { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; background: var(--sf-surface); color: var(--sf-text); box-shadow: 0 1px 2px rgba(16,12,8,.06), 0 18px 40px -20px rgba(16,12,8,.4); }
.sf-root .bxm-dish__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; color: inherit; min-height: 56px; }
.sf-root .bxm-dish__img { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: block; background-color: color-mix(in srgb, var(--sf-primary) 14%, var(--sf-bg)); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bxm-dish__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.sf-root .bxm-dish__txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-light); }
.sf-root .bxm-dish__txt strong { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-root .bxm-dish__txt em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--sf-primary); }
.sf-root .bxm-dish__add { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sf-primary) 30%, transparent); cursor: pointer; font-size: 20px; font-weight: 500; line-height: 1; background: transparent; color: var(--sf-primary); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.sf-root .bxm-dish__add:hover, .sf-root .bxm-dish__add:focus-visible { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }
.sf-root .bxm-photo-fill { background-color: var(--sf-primary); background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }

/* ═══ Tatreez ════════════════════════════════════════════════════════════ */
.sf-root .bxm-tat { position: relative; overflow: hidden; color: #F3E8D2; background: radial-gradient(110% 90% at 78% 42%, #55301A 0%, #2A1A12 52%, #1C110B 100%); }
.sf-root .bxm-tat::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath fill='%23EFE2C6' d='M5 2h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1zM15 13h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM13 15h1v1h-1zM14 15h1v1h-1zM16 15h1v1h-1zM17 15h1v1h-1zM14 16h1v1h-1zM15 16h1v1h-1zM16 16h1v1h-1zM15 17h1v1h-1z'/%3E%3C/svg%3E") center / 60px 60px; opacity: .05; pointer-events: none; }
.sf-root .bxm-tat__band { position: relative; display: block; height: 61px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='27' viewBox='0 0 24 27' shape-rendering='crispEdges'%3E%3Crect width='24' height='27' fill='%232A1A12'/%3E%3Cpath fill='%23D8672A' d='M3 1h1v1h-1zM4 1h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM11 7h1v1h-1zM12 7h1v1h-1zM15 1h1v1h-1zM16 1h1v1h-1zM14 2h1v1h-1zM15 2h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM12 4h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM14 6h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM16 7h1v1h-1zM19 1h1v1h-1zM20 1h1v1h-1zM18 2h1v1h-1zM19 2h1v1h-1zM17 3h1v1h-1zM18 3h1v1h-1zM16 4h1v1h-1zM17 4h1v1h-1zM17 5h1v1h-1zM18 5h1v1h-1zM18 6h1v1h-1zM19 6h1v1h-1zM19 7h1v1h-1zM20 7h1v1h-1zM23 1h1v1h-1zM0 1h1v1h-1zM22 2h1v1h-1zM23 2h1v1h-1zM21 3h1v1h-1zM22 3h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM21 5h1v1h-1zM22 5h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM23 7h1v1h-1zM0 7h1v1h-1zM0 12h1v1h-1zM23 13h1v1h-1zM1 13h1v1h-1zM22 14h1v1h-1zM2 14h1v1h-1zM21 15h1v1h-1zM3 15h1v1h-1zM22 16h1v1h-1zM2 16h1v1h-1zM23 17h1v1h-1zM1 17h1v1h-1zM0 18h1v1h-1z'/%3E%3Cpath fill='%23EFE2C6' d='M0 9h1v1h-1zM1 25h1v1h-1zM2 9h1v1h-1zM3 25h1v1h-1zM4 9h1v1h-1zM5 25h1v1h-1zM6 9h1v1h-1zM7 25h1v1h-1zM8 9h1v1h-1zM9 25h1v1h-1zM10 9h1v1h-1zM11 25h1v1h-1zM12 9h1v1h-1zM13 25h1v1h-1zM14 9h1v1h-1zM15 25h1v1h-1zM16 9h1v1h-1zM17 25h1v1h-1zM18 9h1v1h-1zM19 25h1v1h-1zM20 9h1v1h-1zM21 25h1v1h-1zM22 9h1v1h-1zM23 25h1v1h-1zM0 23h1v1h-1zM1 23h1v1h-1zM1 22h1v1h-1zM2 22h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM4 19h1v1h-1zM5 19h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM6 17h1v1h-1zM7 17h1v1h-1zM7 16h1v1h-1zM8 16h1v1h-1zM8 15h1v1h-1zM9 15h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM12 11h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1zM14 12h1v1h-1zM14 13h1v1h-1zM15 13h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM16 15h1v1h-1zM17 15h1v1h-1zM17 16h1v1h-1zM18 16h1v1h-1zM18 17h1v1h-1zM19 17h1v1h-1zM19 18h1v1h-1zM20 18h1v1h-1zM20 19h1v1h-1zM21 19h1v1h-1zM21 20h1v1h-1zM22 20h1v1h-1zM22 21h1v1h-1zM23 21h1v1h-1zM23 22h1v1h-1zM0 22h1v1h-1zM12 15h1v1h-1zM11 16h1v1h-1zM13 16h1v1h-1zM10 17h1v1h-1zM14 17h1v1h-1zM9 18h1v1h-1zM15 18h1v1h-1zM10 19h1v1h-1zM14 19h1v1h-1zM11 20h1v1h-1zM13 20h1v1h-1zM12 21h1v1h-1zM0 14h1v1h-1zM23 15h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM0 16h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M12 17h1v1h-1zM11 18h1v1h-1zM12 18h1v1h-1zM13 18h1v1h-1zM12 19h1v1h-1z'/%3E%3C/svg%3E") repeat-x left top / 54px 61px; border-bottom: 3px solid #D8672A; }
.sf-root .bxm-tat__trees { position: relative; display: block; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' shape-rendering='crispEdges'%3E%3Crect width='12' height='14' fill='%23EFE2C6'/%3E%3Cpath fill='%235E7A34' d='M5 1h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M5 9h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM9 6h1v1h-1z'/%3E%3Cpath fill='%232A1A12' d='M0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1z'/%3E%3C/svg%3E") repeat-x left center / 27px 32px; border-top: 3px solid #D8672A; }
.sf-root .bxm-tat__side { display: none; position: absolute; top: 64px; bottom: 35px; width: 33px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' shape-rendering='crispEdges'%3E%3Crect width='11' height='18' fill='%232A1A12'/%3E%3Cpath fill='%23D8672A' d='M0 0h1v1h-1zM10 0h1v1h-1zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM0 8h1v1h-1zM10 8h1v1h-1zM0 9h1v1h-1zM10 9h1v1h-1zM0 10h1v1h-1zM10 10h1v1h-1zM0 11h1v1h-1zM10 11h1v1h-1zM0 12h1v1h-1zM10 12h1v1h-1zM0 13h1v1h-1zM10 13h1v1h-1zM0 14h1v1h-1zM10 14h1v1h-1zM0 15h1v1h-1zM10 15h1v1h-1zM0 16h1v1h-1zM10 16h1v1h-1zM0 17h1v1h-1zM10 17h1v1h-1zM5 10h1v1h-1zM4 11h1v1h-1zM6 11h1v1h-1zM3 12h1v1h-1zM7 12h1v1h-1zM4 13h1v1h-1zM6 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23EFE2C6' d='M1 0h1v1h-1zM9 0h1v1h-1zM1 2h1v1h-1zM9 2h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 6h1v1h-1zM9 6h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 10h1v1h-1zM9 10h1v1h-1zM1 12h1v1h-1zM9 12h1v1h-1zM1 14h1v1h-1zM9 14h1v1h-1zM1 16h1v1h-1zM9 16h1v1h-1zM5 1h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M5 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%235E7A34' d='M5 11h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM5 13h1v1h-1z'/%3E%3C/svg%3E") repeat-y center top / 33px 54px; }
.sf-root .bxm-tat__side--l { left: 0; border-right: 2px solid #D8672A; }
.sf-root .bxm-tat__side--r { right: 0; border-left: 2px solid #D8672A; }
.sf-root .bxm-tat__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 96px); }
.sf-root .bxm-tat__eyebrow { color: #F2A772; }
.sf-root .bxm-tat__sprig { flex-shrink: 0; width: 44px; height: 16px; color: #B5C77E; }
.sf-root .bxm-tat h1 { font-family: var(--sf-heading); font-weight: 700; font-size: min(clamp(46px, 6.4vw, 96px), var(--sf-fit, 1000px)); line-height: 1.05; color: #F8EDD7; margin: 20px 0 0; }
.sf-root .bxm-tat__rule { display: block; width: 168px; height: 15px; margin: 26px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='5' viewBox='0 0 14 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8672A' d='M2 0h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1z'/%3E%3Cpath fill='%23EFE2C6' d='M9 0h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM9 4h1v1h-1z'/%3E%3C/svg%3E") repeat-x left center / 42px 15px; }
.sf-root .bxm-tat .sfx-hero-lead { font-size: 18px; line-height: 1.75; color: #E4D6BC; max-width: 44ch; margin-bottom: 32px; }
.sf-root .bxm-tat .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #D8672A; color: #1C110B !important; font-weight: 700; border-radius: 6px; box-shadow: 0 10px 24px -12px rgba(216,103,42,.8); }
.sf-root .bxm-tat .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #EE7B3B; }
.sf-root .bxm-tat__meta { color: #D9CAB0; }
.sf-root .bxm-tat__art { position: relative; justify-self: center; width: min(100%, 440px); padding: 18px 0 48px; }
.sf-root .bxm-tat__medal { position: relative; aspect-ratio: 4 / 5; border-radius: 50%; padding: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' shape-rendering='crispEdges'%3E%3Crect width='11' height='18' fill='%232A1A12'/%3E%3Cpath fill='%23D8672A' d='M0 0h1v1h-1zM10 0h1v1h-1zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM0 8h1v1h-1zM10 8h1v1h-1zM0 9h1v1h-1zM10 9h1v1h-1zM0 10h1v1h-1zM10 10h1v1h-1zM0 11h1v1h-1zM10 11h1v1h-1zM0 12h1v1h-1zM10 12h1v1h-1zM0 13h1v1h-1zM10 13h1v1h-1zM0 14h1v1h-1zM10 14h1v1h-1zM0 15h1v1h-1zM10 15h1v1h-1zM0 16h1v1h-1zM10 16h1v1h-1zM0 17h1v1h-1zM10 17h1v1h-1zM5 10h1v1h-1zM4 11h1v1h-1zM6 11h1v1h-1zM3 12h1v1h-1zM7 12h1v1h-1zM4 13h1v1h-1zM6 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23EFE2C6' d='M1 0h1v1h-1zM9 0h1v1h-1zM1 2h1v1h-1zM9 2h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 6h1v1h-1zM9 6h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 10h1v1h-1zM9 10h1v1h-1zM1 12h1v1h-1zM9 12h1v1h-1zM1 14h1v1h-1zM9 14h1v1h-1zM1 16h1v1h-1zM9 16h1v1h-1zM5 1h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M5 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%235E7A34' d='M5 11h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM5 13h1v1h-1z'/%3E%3C/svg%3E") center / 22px 36px; box-shadow: 0 0 0 3px #D8672A, 0 0 0 10px #2A1A12, 0 0 0 12px #EFE2C6, 0 50px 90px -40px rgba(0,0,0,.85); }
.sf-root .bxm-tat__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px #EFE2C6; background-color: #4A2A17; background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bxm-tat__olive { position: absolute; left: -12%; top: -2%; width: 58%; transform: rotate(-14deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); pointer-events: none; }
.sf-root .bxm-tat__fav { position: absolute; right: 0; bottom: 0; width: min(84%, 320px); border-radius: 8px; border-top: 4px solid #D8672A; }
.sf-root .bxm-tat__fav .bxm-dish__txt em { color: #B04A1A; }
@media (min-width: 600px) {
  .sf-root .bxm-tat__band { height: 81px; background-size: 72px 81px; }
  .sf-root .bxm-tat__trees { height: 42px; background-size: 36px 42px; }
  .sf-root .bxm-tat__side { top: 84px; bottom: 45px; }
}
@media (min-width: 900px) { .sf-root .bxm-tat__grid { grid-template-columns: 1.08fr .92fr; gap: 72px; } .sf-root .bxm-tat__fav { right: -8%; } }
@media (min-width: 1100px) { .sf-root .bxm-tat__side { display: block; } .sf-root .bxm-tat__grid { padding-left: 64px; padding-right: 64px; } }

/* ═══ Zaytoun ════════════════════════════════════════════════════════════ */
.sf-root .bxm-zay { position: relative; overflow: hidden; background: #F3ECDD; color: #26281A; }
.sf-root .bxm-zay__stone { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23EDE3CF'/%3E%3Crect x='1' y='1' width='68' height='38' rx='2' fill='%23E9DEC7'/%3E%3Crect x='71' y='1' width='88' height='38' rx='2' fill='%23EFE6D3'/%3E%3Crect x='-34' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='126' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='41' y='41' width='63' height='38' rx='2' fill='%23E7DBC2'/%3E%3Crect x='106' y='41' width='88' height='38' rx='2' fill='%23ECE2CC'/%3E%3C/svg%3E") center / 160px 80px; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.sf-root .bxm-zay__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: clamp(44px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.sf-root .bxm-zay__eyebrow { color: #4A5C24; }
.sf-root .bxm-zay__sprig { flex-shrink: 0; width: 44px; height: 16px; color: #6E8236; }
.sf-root .bxm-zay h1 { font-family: var(--sf-heading); font-weight: 700; font-size: min(clamp(52px, 7vw, 110px), var(--sf-fit, 1000px)); line-height: 1; color: #2F3B18; margin: 18px 0 0; }
.sf-root .bxm-zay__garland { display: block; width: 192px; height: 22px; margin: 22px 0 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11H64' stroke='%235B6E2E' stroke-width='1.2'/%3E%3Cpath d='M6 11c4-6 12-8 18-6-4 5-11 7-18 6z' fill='%235B6E2E'/%3E%3Cpath d='M36 11c4 6 12 8 18 6-4-5-11-7-18-6z' fill='%235B6E2E'/%3E%3Cpath d='M22 11c3-4 8-5 12-4-3 3-7 4-12 4z' fill='%235B6E2E' opacity='.7'/%3E%3Cellipse cx='56' cy='7' rx='3.2' ry='4' fill='%233A2B3C'/%3E%3Cpath d='M55 11l1-1' stroke='%235B6E2E'/%3E%3C/svg%3E") repeat-x left center / 64px 22px; }
.sf-root .bxm-zay .sfx-hero-lead { font-size: 18px; line-height: 1.75; color: #55573F; max-width: 44ch; margin-bottom: 32px; }
.sf-root .bxm-zay .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #55692B; box-shadow: 0 12px 26px -14px rgba(47,59,24,.7); }
.sf-root .bxm-zay .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #46581F; }
.sf-root .bxm-zay__meta { color: #55573F; }
.sf-root .bxm-zay__art { position: relative; justify-self: center; width: min(100%, 440px); padding: 36px 0 52px; }
.sf-root .bxm-zay__arch { position: relative; aspect-ratio: 3 / 4; padding: 14px; border-radius: 999px 999px 0 0; background: linear-gradient(160deg, #EADDC1, #D6C29C); box-shadow: inset 0 0 0 1px rgba(90,70,30,.2), 0 44px 80px -40px rgba(47,59,24,.6); }
.sf-root .bxm-zay__arch::before { content: ''; position: absolute; left: 50%; top: 2px; width: 26px; height: 18px; margin-left: -13px; border-radius: 0 0 6px 6px; background: #CDB78F; box-shadow: inset 0 0 0 1px rgba(90,70,30,.25); }
.sf-root .bxm-zay__arch::after { content: ''; position: absolute; inset: 7px; border-radius: 999px 999px 0 0; border: 1px solid rgba(85,105,43,.5); pointer-events: none; }
.sf-root .bxm-zay__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; background-color: #55692B; background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bxm-zay__olive { position: absolute; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(47,59,24,.3)); }
.sf-root .bxm-zay__olive--top { right: -16%; top: 0; width: 72%; transform: scaleX(-1) rotate(-6deg); }
.sf-root .bxm-zay__olive--low { left: -16%; bottom: 32%; width: 46%; transform: rotate(-30deg); }
.sf-root .bxm-zay__fav { position: absolute; left: -4%; bottom: 0; width: min(86%, 320px); }
.sf-root .bxm-zay__fav .bxm-dish__txt small { color: #4A5C24; }
.sf-root .bxm-zay__hem { position: relative; display: block; height: 40px; background: #2F3B18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11H64' stroke='%23C9D1A3' stroke-width='1.2'/%3E%3Cpath d='M6 11c4-6 12-8 18-6-4 5-11 7-18 6z' fill='%23C9D1A3'/%3E%3Cpath d='M36 11c4 6 12 8 18 6-4-5-11-7-18-6z' fill='%23C9D1A3'/%3E%3Cpath d='M22 11c3-4 8-5 12-4-3 3-7 4-12 4z' fill='%23C9D1A3' opacity='.7'/%3E%3Cellipse cx='56' cy='7' rx='3.2' ry='4' fill='%23E8D9A0'/%3E%3Cpath d='M55 11l1-1' stroke='%23C9D1A3'/%3E%3C/svg%3E") repeat-x center / 64px 22px; }
@media (min-width: 900px) { .sf-root .bxm-zay__grid { grid-template-columns: 1.1fr .9fr; gap: 80px; } .sf-root .bxm-zay__fav { left: -14%; } }

/* ═══ Falastin ═══════════════════════════════════════════════════════════ */
.sf-root .bxm-kef { position: relative; overflow: hidden; background: #F6F2E9; color: #151515; }
.sf-root .bxm-kef__edge { display: block; height: 58px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='76'%3E%3Crect width='56' height='76' fill='%23F6F2E9'/%3E%3Crect y='4' width='56' height='7' fill='%23151515'/%3E%3Crect y='15' width='56' height='2.5' fill='%23151515'/%3E%3Cpath d='M0 38 Q7 24 14 38 T28 38 T42 38 T56 38' stroke='%23151515' stroke-width='3' fill='none'/%3E%3Cellipse cx='8' cy='30' rx='8.5' ry='3.6' transform='rotate(-35 8 30)' fill='%23151515'/%3E%3Cellipse cx='22' cy='46' rx='8.5' ry='3.6' transform='rotate(35 22 46)' fill='%23151515'/%3E%3Cellipse cx='36' cy='30' rx='8.5' ry='3.6' transform='rotate(-35 36 30)' fill='%23151515'/%3E%3Cellipse cx='50' cy='46' rx='8.5' ry='3.6' transform='rotate(35 50 46)' fill='%23151515'/%3E%3Crect y='58.5' width='56' height='2.5' fill='%23151515'/%3E%3Crect y='65' width='56' height='7' fill='%23151515'/%3E%3C/svg%3E") repeat-x center / 42px 57px; }
.sf-root .bxm-kef__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 96px); }
.sf-root .bxm-kef__eyebrow { color: #1C6E34; }
.sf-root .bxm-flag { position: relative; flex-shrink: 0; width: 30px; height: 20px; border-radius: 2px; overflow: hidden; background: linear-gradient(180deg, #151515 0 33.34%, #FFFFFF 33.34% 66.67%, #1C7A3A 66.67%); box-shadow: 0 0 0 1px rgba(21,21,21,.22); }
.sf-root .bxm-flag::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 48%; background: #C8102E; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sf-root .bxm-kef h1 { font-family: var(--sf-heading); font-weight: 800; font-size: min(clamp(48px, 6.6vw, 104px), var(--sf-fit, 1000px)); line-height: 1.04; letter-spacing: -.01em; color: #151515; margin: 20px 0 0; }
.sf-root .bxm-kef__rule { display: block; width: 168px; height: 14px; margin: 26px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x left center / 17px 14px; }
.sf-root .bxm-kef .sfx-hero-lead { font-size: 18px; line-height: 1.75; color: #4A4741; max-width: 44ch; margin-bottom: 32px; }
.sf-root .bxm-kef .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #151515; color: #fff !important; border-radius: 4px; }
.sf-root .bxm-kef .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #B01E28; }
.sf-root .bxm-kef__meta { color: #4A4741; }
.sf-root .bxm-kef__scarf { position: relative; justify-self: center; width: min(100%, 480px); padding: 26px 26px 64px; background: #F6F2E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 0L26 26M26 0L0 26' stroke='%23151515' stroke-width='2.4'/%3E%3Crect x='10.2' y='10.2' width='5.6' height='5.6' transform='rotate(45 13 13)' fill='%23151515'/%3E%3Ccircle cx='13' cy='2.6' r='1.5' fill='%23151515'/%3E%3Ccircle cx='13' cy='23.4' r='1.5' fill='%23151515'/%3E%3Ccircle cx='2.6' cy='13' r='1.5' fill='%23151515'/%3E%3Ccircle cx='23.4' cy='13' r='1.5' fill='%23151515'/%3E%3C/svg%3E") center / 26px 26px; box-shadow: inset 0 0 0 2px #151515, inset 0 0 0 10px #F6F2E9, inset 0 0 0 12px #151515; }
.sf-root .bxm-kef__mat { position: relative; aspect-ratio: 4 / 5; padding: 10px; background: #fff; box-shadow: 0 34px 60px -30px rgba(0,0,0,.55); }
.sf-root .bxm-kef__mat::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 8px; background: linear-gradient(90deg, #151515 0 33.34%, #fff 33.34% 66.67%, #1C7A3A 66.67%); }
.sf-root .bxm-kef__photo { display: block; width: 100%; height: 100%; object-fit: cover; background-color: #2a2a2a; background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .bxm-kef__olive { position: absolute; left: -10%; top: -6%; width: 54%; transform: rotate(-20deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); pointer-events: none; }
.sf-root .bxm-kef__fav { position: absolute; right: 12px; left: 12px; bottom: -22px; max-width: 340px; margin-left: auto; border-radius: 6px; border-left: 4px solid #B01E28; }
.sf-root .bxm-kef__fav .bxm-dish__add { color: #151515; border-color: rgba(21,21,21,.25); }
.sf-root .bxm-kef__fav .bxm-dish__add:hover { background: #151515; color: #fff; }
.sf-root .bxm-kef__fav .bxm-dish__txt em { color: #B01E28; }
.sf-root .bxm-kef__strip { display: block; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect width='22' height='18' fill='%23121212'/%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x center / 22px 18px; }
@media (min-width: 600px) { .sf-root .bxm-kef__edge { height: 76px; background-size: 56px 76px; } }
@media (min-width: 900px) { .sf-root .bxm-kef__grid { grid-template-columns: 1fr 1fr; gap: 80px; } .sf-root .bxm-kef__scarf { justify-self: end; } .sf-root .bxm-kef__fav { left: auto; right: -28px; width: 320px; } }

/* ═══ Arabian Nights ═════════════════════════════════════════════════════ */
.sf-root .bxm-night { position: relative; overflow: hidden; text-align: center; color: #F1E7D0; background: radial-gradient(90% 70% at 50% 0%, #3B2B72 0%, #1F1752 46%, #100C30 100%); }
.sf-root .bxm-night__stars { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='0.0' cy='202.6' r='0.82' fill='%23FFF6DD' opacity='0.48'/%3E%3Ccircle cx='160.5' cy='117.2' r='0.86' fill='%23FFF6DD' opacity='0.80'/%3E%3Ccircle cx='166.1' cy='119.4' r='1.25' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='179.7' cy='53.2' r='0.91' fill='%23FFF6DD' opacity='0.77'/%3E%3Ccircle cx='153.6' cy='11.9' r='1.25' fill='%23FFF6DD' opacity='0.63'/%3E%3Ccircle cx='202.9' cy='177.6' r='0.64' fill='%23FFF6DD' opacity='0.66'/%3E%3Ccircle cx='203.1' cy='151.5' r='1.21' fill='%23FFF6DD' opacity='0.70'/%3E%3Ccircle cx='200.6' cy='199.8' r='0.91' fill='%23FFF6DD' opacity='0.55'/%3E%3Ccircle cx='184.2' cy='73.1' r='0.67' fill='%23FFF6DD' opacity='0.53'/%3E%3Ccircle cx='94.3' cy='64.9' r='1.53' fill='%23FFF6DD' opacity='0.68'/%3E%3Ccircle cx='160.4' cy='193.1' r='0.56' fill='%23FFF6DD' opacity='0.51'/%3E%3Ccircle cx='123.3' cy='111.9' r='0.96' fill='%23FFF6DD' opacity='0.47'/%3E%3Ccircle cx='200.0' cy='12.1' r='0.90' fill='%23FFF6DD' opacity='0.56'/%3E%3Ccircle cx='146.2' cy='203.4' r='1.07' fill='%23FFF6DD' opacity='0.45'/%3E%3Ccircle cx='89.2' cy='62.4' r='0.90' fill='%23FFF6DD' opacity='0.60'/%3E%3Ccircle cx='73.2' cy='117.0' r='1.18' fill='%23FFF6DD' opacity='0.49'/%3E%3Ccircle cx='199.4' cy='100.7' r='1.45' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='139.6' cy='113.6' r='1.06' fill='%23FFF6DD' opacity='0.76'/%3E%3Ccircle cx='206.7' cy='87.3' r='1.28' fill='%23FFF6DD' opacity='0.50'/%3E%3Ccircle cx='129.1' cy='77.1' r='0.86' fill='%23FFF6DD' opacity='0.58'/%3E%3Ccircle cx='174.8' cy='193.1' r='0.62' fill='%23FFF6DD' opacity='0.84'/%3E%3Ccircle cx='17.1' cy='89.5' r='0.67' fill='%23FFF6DD' opacity='0.40'/%3E%3Ccircle cx='219.2' cy='48.4' r='1.20' fill='%23FFF6DD' opacity='0.44'/%3E%3Ccircle cx='100.6' cy='130.4' r='0.65' fill='%23FFF6DD' opacity='0.90'/%3E%3Ccircle cx='194.6' cy='195.9' r='1.47' fill='%23FFF6DD' opacity='0.89'/%3E%3Ccircle cx='167.4' cy='60.6' r='0.51' fill='%23FFF6DD' opacity='0.50'/%3E%3Cpath d='M60 40l1.6 5.4L67 47l-5.4 1.6L60 54l-1.6-5.4L53 47l5.4-1.6z' fill='%23F6D98E'/%3E%3Cpath d='M170 150l1.2 4L175 155l-3.8 1.2L170 160l-1.2-3.8L165 155l3.8-1z' fill='%23F6D98E' opacity='.8'/%3E%3C/svg%3E") 0 0 / 220px 220px; pointer-events: none; animation: bxm-twinkle 5s ease-in-out infinite alternate; }
.sf-root .bxm-night__lattice { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23C9A253' stroke-width='1.1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Cpath d='M32 0v12.2M32 51.8v12.2M0 32h12.2M51.8 32h12.2M0 0l12 12M64 0l-12 12M0 64l12-12M64 64l-12-12'/%3E%3C/g%3E%3C/svg%3E") center / 64px 64px; opacity: .1; pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 70%, #000, transparent); mask-image: radial-gradient(60% 50% at 50% 70%, #000, transparent); }
.sf-root .bxm-night__moon { position: absolute; top: 28px; right: 6%; width: clamp(56px, 8vw, 112px); height: auto; filter: drop-shadow(0 0 26px rgba(246,217,142,.55)); }
.sf-root .bxm-night__lantern { position: absolute; top: 0; height: auto; transform-origin: 50% 0; animation: bxm-sway 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 16px rgba(255,186,92,.65)); }
.sf-root .bxm-night__lantern--a { left: 5%; width: clamp(34px, 4vw, 56px); }
.sf-root .bxm-night__lantern--b { left: 14%; width: clamp(26px, 3vw, 40px); top: -34px; animation-delay: -2s; display: none; }
.sf-root .bxm-night__lantern--c { right: 20%; width: clamp(28px, 3.2vw, 44px); top: -20px; animation-delay: -1s; display: none; }
@keyframes bxm-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes bxm-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .sf-root .bxm-night__stars, .sf-root .bxm-night__lantern { animation: none; } }
.sf-root .bxm-night__inner { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: clamp(118px, 11vw, 150px); padding-bottom: clamp(96px, 11vw, 150px); }
.sf-root .bxm-night__eyebrow { color: #E9C978; }
.sf-root .bxm-night h1 { font-family: var(--sf-heading); font-weight: 700; font-size: min(clamp(50px, 7.4vw, 116px), var(--sf-fit, 1000px)); line-height: 1.04; margin: 18px 0 0; color: #EBC873;
  background: linear-gradient(180deg, #FCEBB8 0%, #E3B652 58%, #BE8B30 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
.sf-root .bxm-night__rule { position: relative; display: block; width: 220px; height: 1px; margin: 26px auto; background: linear-gradient(90deg, transparent, #D9A947 30%, #D9A947 70%, transparent); }
.sf-root .bxm-night__rule i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #D9A947; transform: rotate(45deg); box-shadow: 0 0 0 4px #1F1752, 0 0 0 5px #D9A947; }
.sf-root .bxm-night .sfx-hero-lead { font-size: 18px; line-height: 1.75; color: #DDD4EC; max-width: 50ch; margin: 0 auto 30px; }
.sf-root .bxm-night__cta .sfx-actions { justify-content: center; }
.sf-root .bxm-night .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #D9A947; color: #1A1633 !important; font-weight: 700; box-shadow: 0 0 30px -6px rgba(217,169,71,.6); }
.sf-root .bxm-night .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #EDC062; }
.sf-root .bxm-night__meta { justify-content: center; color: #CFC5E0; }
.sf-root .bxm-night__stage { position: relative; width: 100%; max-width: 1060px; margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; align-items: end; }
.sf-root .bxm-night__arch { position: relative; width: min(100%, 340px); aspect-ratio: 100 / 130; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(217,169,71,.25)); }
.sf-root .bxm-night__arch-in { position: absolute; inset: 0; background: linear-gradient(180deg, #F8E2A0, #C4912F 60%, #9A6E22); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V58C0 34 22 26 38 14C45 9 49 4 50 0C51 4 55 9 62 14C78 26 100 34 100 58V130Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V58C0 34 22 26 38 14C45 9 49 4 50 0C51 4 55 9 62 14C78 26 100 34 100 58V130Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sf-root .bxm-night__photo { position: absolute; inset: 9px; display: block; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; background-color: #2A1F5C; background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V58C0 34 22 26 38 14C45 9 49 4 50 0C51 4 55 9 62 14C78 26 100 34 100 58V130Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V58C0 34 22 26 38 14C45 9 49 4 50 0C51 4 55 9 62 14C78 26 100 34 100 58V130Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sf-root .bxm-night__dish { width: min(100%, 320px); background: rgba(18,14,48,.78); color: #F1E7D0; border: 1px solid rgba(217,169,71,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); }
.sf-root .bxm-night__dish .bxm-dish__txt small { color: #CFC5E0; }
.sf-root .bxm-night__dish .bxm-dish__txt em { color: #EBC873; }
.sf-root .bxm-night__dish .bxm-dish__add { color: #EBC873; border-color: rgba(235,200,115,.45); }
.sf-root .bxm-night__dish .bxm-dish__add:hover { background: #D9A947; color: #1A1633; border-color: #D9A947; }
.sf-root .bxm-night__skyline { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(64px, 9vw, 118px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='404' height='120' viewBox='0 0 404 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V96V96H26V70H29V44H27V40H30L32 28L34 40H37V44H35V70H38V96V92H56V84C56 66 60.480000000000004 68 81 52L84 38L87 52C107.52 68 112 66 112 84V96V98H134V86Q151 64 168 86V96V90H182V70H185V44H183V40H186L188 28L190 40H193V44H191V70H194V96V96H224V80C224 62 230.08 52 259 36L262 22L265 36C293.92 52 300 62 300 80V96V94H318V86Q332 64 346 86V96V98H366V70H369V44H367V40H370L372 28L374 40H377V44H375V70H378V96V95H404H404V120Z' fill='%230C0A26'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%; pointer-events: none; }
@media (min-width: 760px) { .sf-root .bxm-night__lantern--b, .sf-root .bxm-night__lantern--c { display: block; } }
@media (min-width: 900px) {
  .sf-root .bxm-night__stage { grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); gap: 36px; }
  .sf-root .bxm-night__dish { width: 100%; max-width: 300px; }
  .sf-root .bxm-night__dish--l { justify-self: end; margin-bottom: 64px; }
  .sf-root .bxm-night__dish--r { justify-self: start; margin-bottom: 128px; }
}

/* ═══ The four designs on every page ═════════════════════════════════════ */
/* Tatreez */
.sf-root[data-template="template45-cairo"] .sf-nav { background: #2A1A12; border-bottom: 3px solid #D8672A; }
.sf-root[data-template="template45-cairo"] .sf-nav, .sf-root[data-template="template45-cairo"] .sf-nav a, .sf-root[data-template="template45-cairo"] .sf-nav button { color: #F3E8D2; }
.sf-root[data-template="template45-cairo"] .sf-burger span { background: #F3E8D2; }
.sf-root[data-template="template45-cairo"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F2A772 !important; }
.sf-root[data-template="template45-cairo"] .sf-nav-links a.active { color: #F2A772; }
.sf-root[data-template="template45-cairo"] .sf-section-title, .sf-root[data-template="template45-cairo"] .sf-menu-cat h2 { font-weight: 700; color: #2A1A12; letter-spacing: 0; }
.sf-root[data-template="template45-cairo"] .sf-section-title::after { width: 84px; height: 15px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='5' viewBox='0 0 14 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23A8242A' d='M2 0h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1z'/%3E%3Cpath fill='%235E7A34' d='M9 0h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM9 4h1v1h-1z'/%3E%3C/svg%3E") repeat-x center / 42px 15px; }
.sf-root[data-template="template45-cairo"] .sf-section.alt { background: #F1E4CB; }
.sf-root[data-template="template45-cairo"] .sf-card { border-radius: 10px; border: 0; box-shadow: 0 0 0 1px #E8D8BC, 0 14px 30px -18px rgba(42,26,18,.45); }
.sf-root[data-template="template45-cairo"] .sf-card:hover { box-shadow: 0 0 0 2px #D8672A, 0 20px 40px -18px rgba(42,26,18,.5); }
.sf-root[data-template="template45-cairo"] .sf-price { color: #B04A1A; font-weight: 800; }
.sf-root[data-template="template45-cairo"] :where(.sf-btn:not(.sf-btn-outline)) { background: #B04A1A; }
.sf-root[data-template="template45-cairo"] .sf-cat.active { background: #2A1A12; }
.sf-root[data-template="template45-cairo"] .sfx-ticker { background: #2A1A12; color: #EFE2C6; font-family: var(--sf-heading); border-bottom: 3px solid #D8672A; }
.sf-root[data-template="template45-cairo"] .sf-footer { background: #2A1A12; border-top: 0; position: relative; padding-top: 112px; }
.sf-root[data-template="template45-cairo"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 81px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='27' viewBox='0 0 24 27' shape-rendering='crispEdges'%3E%3Crect width='24' height='27' fill='%232A1A12'/%3E%3Cpath fill='%23D8672A' d='M3 1h1v1h-1zM4 1h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM11 7h1v1h-1zM12 7h1v1h-1zM15 1h1v1h-1zM16 1h1v1h-1zM14 2h1v1h-1zM15 2h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM12 4h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM14 6h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM16 7h1v1h-1zM19 1h1v1h-1zM20 1h1v1h-1zM18 2h1v1h-1zM19 2h1v1h-1zM17 3h1v1h-1zM18 3h1v1h-1zM16 4h1v1h-1zM17 4h1v1h-1zM17 5h1v1h-1zM18 5h1v1h-1zM18 6h1v1h-1zM19 6h1v1h-1zM19 7h1v1h-1zM20 7h1v1h-1zM23 1h1v1h-1zM0 1h1v1h-1zM22 2h1v1h-1zM23 2h1v1h-1zM21 3h1v1h-1zM22 3h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM21 5h1v1h-1zM22 5h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM23 7h1v1h-1zM0 7h1v1h-1zM0 12h1v1h-1zM23 13h1v1h-1zM1 13h1v1h-1zM22 14h1v1h-1zM2 14h1v1h-1zM21 15h1v1h-1zM3 15h1v1h-1zM22 16h1v1h-1zM2 16h1v1h-1zM23 17h1v1h-1zM1 17h1v1h-1zM0 18h1v1h-1z'/%3E%3Cpath fill='%23EFE2C6' d='M0 9h1v1h-1zM1 25h1v1h-1zM2 9h1v1h-1zM3 25h1v1h-1zM4 9h1v1h-1zM5 25h1v1h-1zM6 9h1v1h-1zM7 25h1v1h-1zM8 9h1v1h-1zM9 25h1v1h-1zM10 9h1v1h-1zM11 25h1v1h-1zM12 9h1v1h-1zM13 25h1v1h-1zM14 9h1v1h-1zM15 25h1v1h-1zM16 9h1v1h-1zM17 25h1v1h-1zM18 9h1v1h-1zM19 25h1v1h-1zM20 9h1v1h-1zM21 25h1v1h-1zM22 9h1v1h-1zM23 25h1v1h-1zM0 23h1v1h-1zM1 23h1v1h-1zM1 22h1v1h-1zM2 22h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM4 19h1v1h-1zM5 19h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM6 17h1v1h-1zM7 17h1v1h-1zM7 16h1v1h-1zM8 16h1v1h-1zM8 15h1v1h-1zM9 15h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM12 11h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1zM14 12h1v1h-1zM14 13h1v1h-1zM15 13h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM16 15h1v1h-1zM17 15h1v1h-1zM17 16h1v1h-1zM18 16h1v1h-1zM18 17h1v1h-1zM19 17h1v1h-1zM19 18h1v1h-1zM20 18h1v1h-1zM20 19h1v1h-1zM21 19h1v1h-1zM21 20h1v1h-1zM22 20h1v1h-1zM22 21h1v1h-1zM23 21h1v1h-1zM23 22h1v1h-1zM0 22h1v1h-1zM12 15h1v1h-1zM11 16h1v1h-1zM13 16h1v1h-1zM10 17h1v1h-1zM14 17h1v1h-1zM9 18h1v1h-1zM15 18h1v1h-1zM10 19h1v1h-1zM14 19h1v1h-1zM11 20h1v1h-1zM13 20h1v1h-1zM12 21h1v1h-1zM0 14h1v1h-1zM23 15h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM0 16h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M12 17h1v1h-1zM11 18h1v1h-1zM12 18h1v1h-1zM13 18h1v1h-1zM12 19h1v1h-1z'/%3E%3C/svg%3E") repeat-x left top / 72px 81px; border-bottom: 3px solid #D8672A; }
.sf-root[data-template="template45-cairo"] .sf-page-header { background: #2A1A12; background-image: radial-gradient(90% 120% at 80% 30%, rgba(216,103,42,.28), transparent 60%), linear-gradient(rgba(42,26,18,.8), rgba(42,26,18,.8)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath fill='%23EFE2C6' d='M5 2h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1zM15 13h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM13 15h1v1h-1zM14 15h1v1h-1zM16 15h1v1h-1zM17 15h1v1h-1zM14 16h1v1h-1zM15 16h1v1h-1zM16 16h1v1h-1zM15 17h1v1h-1z'/%3E%3C/svg%3E"); background-size: auto, auto, 60px 60px; padding-bottom: calc(clamp(40px, 6vw, 72px) + 42px); }
.sf-root[data-template="template45-cairo"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' shape-rendering='crispEdges'%3E%3Crect width='12' height='14' fill='%23EFE2C6'/%3E%3Cpath fill='%235E7A34' d='M5 1h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1z'/%3E%3Cpath fill='%23A8242A' d='M5 9h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM9 6h1v1h-1z'/%3E%3Cpath fill='%232A1A12' d='M0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1z'/%3E%3C/svg%3E") repeat-x center / 36px 42px; border-top: 3px solid #D8672A; }
.sf-root[data-template="template45-cairo"] .sfx-con-head::after, .sf-root[data-template="template45-cairo"] .sfx-ed-head::after { content: ''; display: block; width: 126px; height: 15px; margin: 24px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='5' viewBox='0 0 14 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23A8242A' d='M2 0h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1z'/%3E%3Cpath fill='%235E7A34' d='M9 0h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM9 4h1v1h-1z'/%3E%3C/svg%3E") repeat-x center / 42px 15px; }
.sf-root[data-template="template45-cairo"] .sfx-ed-head::after { margin-left: 0; }

/* Zaytoun */
.sf-root[data-template="template46-damascus"] .sf-nav { background: #FBF7EE; border-bottom: 1px solid #E2D8C2; }
.sf-root[data-template="template46-damascus"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #2F3B18; font-size: 26px; }
.sf-root[data-template="template46-damascus"] .sf-nav-links a.active { color: #55692B; }
.sf-root[data-template="template46-damascus"] .sf-section-title, .sf-root[data-template="template46-damascus"] .sf-menu-cat h2 { font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: 0; color: #2F3B18; }
.sf-root[data-template="template46-damascus"] .sf-section-title::after { width: 128px; height: 22px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11H64' stroke='%235B6E2E' stroke-width='1.2'/%3E%3Cpath d='M6 11c4-6 12-8 18-6-4 5-11 7-18 6z' fill='%235B6E2E'/%3E%3Cpath d='M36 11c4 6 12 8 18 6-4-5-11-7-18-6z' fill='%235B6E2E'/%3E%3Cpath d='M22 11c3-4 8-5 12-4-3 3-7 4-12 4z' fill='%235B6E2E' opacity='.7'/%3E%3Cellipse cx='56' cy='7' rx='3.2' ry='4' fill='%233A2B3C'/%3E%3Cpath d='M55 11l1-1' stroke='%235B6E2E'/%3E%3C/svg%3E") repeat-x center / 64px 22px; }
.sf-root[data-template="template46-damascus"] .sf-section.alt { background: linear-gradient(rgba(236,227,207,.88), rgba(236,227,207,.88)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23EDE3CF'/%3E%3Crect x='1' y='1' width='68' height='38' rx='2' fill='%23E9DEC7'/%3E%3Crect x='71' y='1' width='88' height='38' rx='2' fill='%23EFE6D3'/%3E%3Crect x='-34' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='126' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='41' y='41' width='63' height='38' rx='2' fill='%23E7DBC2'/%3E%3Crect x='106' y='41' width='88' height='38' rx='2' fill='%23ECE2CC'/%3E%3C/svg%3E") center / 160px 80px; }
.sf-root[data-template="template46-damascus"] .sf-card, .sf-root[data-template="template46-damascus"] .sf-menu-item { border-radius: 14px; border: 1px solid #E2D8C2; box-shadow: 0 1px 2px rgba(47,59,24,.05); }
.sf-root[data-template="template46-damascus"] .sf-card:hover { border-color: #55692B; box-shadow: 0 18px 36px -22px rgba(47,59,24,.45); }
.sf-root[data-template="template46-damascus"] .sf-price { color: #55692B; font-weight: 800; }
.sf-root[data-template="template46-damascus"] :where(.sf-btn:not(.sf-btn-outline)) { background: #55692B; }
.sf-root[data-template="template46-damascus"] .sf-cat.active { background: #55692B; }
.sf-root[data-template="template46-damascus"] .sfx-ticker { background: #2F3B18; color: #EDE6CF; font-family: var(--sf-heading); }
.sf-root[data-template="template46-damascus"] .sf-footer { background: #2F3B18; position: relative; padding-top: 72px; }
.sf-root[data-template="template46-damascus"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11H64' stroke='%23C9D1A3' stroke-width='1.2'/%3E%3Cpath d='M6 11c4-6 12-8 18-6-4 5-11 7-18 6z' fill='%23C9D1A3'/%3E%3Cpath d='M36 11c4 6 12 8 18 6-4-5-11-7-18-6z' fill='%23C9D1A3'/%3E%3Cpath d='M22 11c3-4 8-5 12-4-3 3-7 4-12 4z' fill='%23C9D1A3' opacity='.7'/%3E%3Cellipse cx='56' cy='7' rx='3.2' ry='4' fill='%23E8D9A0'/%3E%3Cpath d='M55 11l1-1' stroke='%23C9D1A3'/%3E%3C/svg%3E") repeat-x center / 64px 22px; border-bottom: 1px solid rgba(201,209,163,.25); }
.sf-root[data-template="template46-damascus"] .sfx-menu-type, .sf-root[data-template="template46-damascus"] .sfx-con-head, .sf-root[data-template="template46-damascus"] .sfx-ed-head { background: linear-gradient(rgba(243,236,221,.82), rgba(243,236,221,.82)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23EDE3CF'/%3E%3Crect x='1' y='1' width='68' height='38' rx='2' fill='%23E9DEC7'/%3E%3Crect x='71' y='1' width='88' height='38' rx='2' fill='%23EFE6D3'/%3E%3Crect x='-34' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='126' y='41' width='73' height='38' rx='2' fill='%23F0E7D5'/%3E%3Crect x='41' y='41' width='63' height='38' rx='2' fill='%23E7DBC2'/%3E%3Crect x='106' y='41' width='88' height='38' rx='2' fill='%23ECE2CC'/%3E%3C/svg%3E") center / 160px 80px; }
.sf-root[data-template="template46-damascus"] .sfx-menu-type::after, .sf-root[data-template="template46-damascus"] .sfx-con-head::after, .sf-root[data-template="template46-damascus"] .sfx-ed-head::after { content: ''; display: block; width: 192px; height: 22px; margin-top: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 11H64' stroke='%235B6E2E' stroke-width='1.2'/%3E%3Cpath d='M6 11c4-6 12-8 18-6-4 5-11 7-18 6z' fill='%235B6E2E'/%3E%3Cpath d='M36 11c4 6 12 8 18 6-4-5-11-7-18-6z' fill='%235B6E2E'/%3E%3Cpath d='M22 11c3-4 8-5 12-4-3 3-7 4-12 4z' fill='%235B6E2E' opacity='.7'/%3E%3Cellipse cx='56' cy='7' rx='3.2' ry='4' fill='%233A2B3C'/%3E%3Cpath d='M55 11l1-1' stroke='%235B6E2E'/%3E%3C/svg%3E") repeat-x left center / 64px 22px; }
.sf-root[data-template="template46-damascus"] .sfx-con-head::after { margin-left: auto; margin-right: auto; }

/* Falastin */
.sf-root[data-template="template47-falastin"] .sf-nav { background: #F6F2E9; border-bottom: 0; }
.sf-root[data-template="template47-falastin"] .sf-nav::after { content: ''; display: block; height: 6px; background: linear-gradient(90deg, #C8102E 0 72px, transparent 72px), linear-gradient(180deg, #151515 0 33.34%, #FFFFFF 33.34% 66.67%, #1C7A3A 66.67%); }
.sf-root[data-template="template47-falastin"] .sf-logo { font-family: var(--sf-heading); font-weight: 800; color: #151515; }
.sf-root[data-template="template47-falastin"] .sf-nav-links a.active { color: #B01E28; }
.sf-root[data-template="template47-falastin"] .sf-section-title, .sf-root[data-template="template47-falastin"] .sf-menu-cat h2 { font-weight: 800; letter-spacing: 0; color: #151515; }
.sf-root[data-template="template47-falastin"] .sf-section-title::after { width: 90px; height: 10px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x center / 12px 10px; }
.sf-root[data-template="template47-falastin"] .sf-section.alt { background: linear-gradient(color-mix(in srgb, #F6F2E9 94%, transparent), color-mix(in srgb, #F6F2E9 94%, transparent)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 0L26 26M26 0L0 26' stroke='%23151515' stroke-width='2.4'/%3E%3Crect x='10.2' y='10.2' width='5.6' height='5.6' transform='rotate(45 13 13)' fill='%23151515'/%3E%3Ccircle cx='13' cy='2.6' r='1.5' fill='%23151515'/%3E%3Ccircle cx='13' cy='23.4' r='1.5' fill='%23151515'/%3E%3Ccircle cx='2.6' cy='13' r='1.5' fill='%23151515'/%3E%3Ccircle cx='23.4' cy='13' r='1.5' fill='%23151515'/%3E%3C/svg%3E") center / 26px 26px; }
.sf-root[data-template="template47-falastin"] .sf-card, .sf-root[data-template="template47-falastin"] .sf-menu-item { border-radius: 6px; border: 1px solid #E2DCCF; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sf-root[data-template="template47-falastin"] .sf-card:hover { border-color: #151515; box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); }
.sf-root[data-template="template47-falastin"] .sf-price { color: #B01E28; font-weight: 800; }
.sf-root[data-template="template47-falastin"] :where(.sf-btn:not(.sf-btn-outline)) { background: #151515; border-radius: 4px; }
.sf-root[data-template="template47-falastin"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B01E28; }
.sf-root[data-template="template47-falastin"] .sf-btn-outline { border-radius: 4px; }
.sf-root[data-template="template47-falastin"] .sf-cat.active { background: #151515; }
.sf-root[data-template="template47-falastin"] .sfx-ticker { background: #151515; color: #F6F2E9; font-family: var(--sf-heading); }
.sf-root[data-template="template47-falastin"] .sf-footer { background: #121212; position: relative; padding-top: 112px; }
.sf-root[data-template="template47-falastin"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 76px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='76'%3E%3Crect width='56' height='76' fill='%23F6F2E9'/%3E%3Crect y='4' width='56' height='7' fill='%23151515'/%3E%3Crect y='15' width='56' height='2.5' fill='%23151515'/%3E%3Cpath d='M0 38 Q7 24 14 38 T28 38 T42 38 T56 38' stroke='%23151515' stroke-width='3' fill='none'/%3E%3Cellipse cx='8' cy='30' rx='8.5' ry='3.6' transform='rotate(-35 8 30)' fill='%23151515'/%3E%3Cellipse cx='22' cy='46' rx='8.5' ry='3.6' transform='rotate(35 22 46)' fill='%23151515'/%3E%3Cellipse cx='36' cy='30' rx='8.5' ry='3.6' transform='rotate(-35 36 30)' fill='%23151515'/%3E%3Cellipse cx='50' cy='46' rx='8.5' ry='3.6' transform='rotate(35 50 46)' fill='%23151515'/%3E%3Crect y='58.5' width='56' height='2.5' fill='%23151515'/%3E%3Crect y='65' width='56' height='7' fill='%23151515'/%3E%3C/svg%3E") repeat-x center / 56px 76px; }
.sf-root[data-template="template47-falastin"] .sf-footer::after { content: ''; position: absolute; top: 76px; left: 0; right: 0; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect width='22' height='18' fill='%23121212'/%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x center / 22px 18px; }
.sf-root[data-template="template47-falastin"] .sfx-menu-block { background: #121212 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E %3Cpath d='M0 0L26 26M26 0L0 26' stroke='%23F6F2E9' stroke-opacity='.16' stroke-width='2.4'/%3E %3Crect x='10.2' y='10.2' width='5.6' height='5.6' transform='rotate(45 13 13)' fill='%23F6F2E9' fill-opacity='.16'/%3E%3C/svg%3E") center / 26px 26px; position: relative; padding-bottom: calc(clamp(36px, 5vw, 60px) + 40px); }
.sf-root[data-template="template47-falastin"] .sfx-menu-block::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect width='22' height='18' fill='%23121212'/%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x center / 32px 26px; border-top: 2px solid #2b2b2b; }
.sf-root[data-template="template47-falastin"] .sfx-menu-block__tag { background: #B01E28; color: #fff; }
.sf-root[data-template="template47-falastin"] .sfx-menu-block__photo { box-shadow: 0 0 0 4px #F6F2E9, 10px 10px 0 4px #B01E28; }
.sf-root[data-template="template47-falastin"] .sfx-con-head::after, .sf-root[data-template="template47-falastin"] .sfx-ed-head::after { content: ''; display: block; width: 176px; height: 14px; margin: 22px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M10.0 2.0l2 2m-2 0l2 -2M7.0 5.0l2 2m-2 0l2 -2M10.0 5.0l2 2m-2 0l2 -2M13.0 5.0l2 2m-2 0l2 -2M4.0 8.0l2 2m-2 0l2 -2M7.0 8.0l2 2m-2 0l2 -2M13.0 8.0l2 2m-2 0l2 -2M16.0 8.0l2 2m-2 0l2 -2M7.0 11.0l2 2m-2 0l2 -2M10.0 11.0l2 2m-2 0l2 -2M13.0 11.0l2 2m-2 0l2 -2M10.0 14.0l2 2m-2 0l2 -2' stroke='%23C8242E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10.0 8.0l2 2m-2 0l2 -2' stroke='%237E9A45' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x center / 17px 14px; }
.sf-root[data-template="template47-falastin"] .sfx-ed-head::after { margin-left: 0; }

/* Arabian Nights */
.sf-root[data-template="template48-majlis"] .sf-nav { background: #100C30; border-bottom: 1px solid rgba(217,169,71,.45); }
.sf-root[data-template="template48-majlis"] .sf-nav, .sf-root[data-template="template48-majlis"] .sf-nav a, .sf-root[data-template="template48-majlis"] .sf-nav button { color: #F1E7D0; }
.sf-root[data-template="template48-majlis"] .sf-burger span { background: #F1E7D0; }
.sf-root[data-template="template48-majlis"] .sf-signin { background: #D9A947; color: #1A1633 !important; box-shadow: none; }
.sf-root[data-template="template48-majlis"] .sf-signin:hover { background: #EDC062; }
.sf-root[data-template="template48-majlis"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #EBC873 !important; letter-spacing: .02em; }
.sf-root[data-template="template48-majlis"] .sf-nav-links a.active { color: #EBC873; }
.sf-root[data-template="template48-majlis"] .sf-section-title, .sf-root[data-template="template48-majlis"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #2A1F5C; }
.sf-root[data-template="template48-majlis"] .sf-section-title::after { width: 140px; height: 12px; border-radius: 0; background: linear-gradient(45deg, transparent 42%, #B98A2E 42% 58%, transparent 58%) center / 12px 12px no-repeat, linear-gradient(90deg, transparent, #B98A2E 30%, #B98A2E 70%, transparent) center / 100% 1px no-repeat; }
.sf-root[data-template="template48-majlis"] .sf-section.alt { background: #EFE7F0; }
.sf-root[data-template="template48-majlis"] .sf-card { border-radius: 18px; border: 1px solid #E3D6C0; }
.sf-root[data-template="template48-majlis"] .sf-card:hover { border-color: #B98A2E; box-shadow: 0 18px 40px -22px rgba(42,31,92,.45); }
.sf-root[data-template="template48-majlis"] .sf-price { color: #8A6A1E; font-weight: 800; }
.sf-root[data-template="template48-majlis"] :where(.sf-btn:not(.sf-btn-outline)) { background: #2A1F5C; }
.sf-root[data-template="template48-majlis"] .sf-cat.active { background: #2A1F5C; }
.sf-root[data-template="template48-majlis"] .sfx-ticker { background: #100C30; color: #EBC873; font-family: var(--sf-heading); }
.sf-root[data-template="template48-majlis"] .sf-footer { background: #100C30 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='0.0' cy='202.6' r='0.82' fill='%23FFF6DD' opacity='0.48'/%3E%3Ccircle cx='160.5' cy='117.2' r='0.86' fill='%23FFF6DD' opacity='0.80'/%3E%3Ccircle cx='166.1' cy='119.4' r='1.25' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='179.7' cy='53.2' r='0.91' fill='%23FFF6DD' opacity='0.77'/%3E%3Ccircle cx='153.6' cy='11.9' r='1.25' fill='%23FFF6DD' opacity='0.63'/%3E%3Ccircle cx='202.9' cy='177.6' r='0.64' fill='%23FFF6DD' opacity='0.66'/%3E%3Ccircle cx='203.1' cy='151.5' r='1.21' fill='%23FFF6DD' opacity='0.70'/%3E%3Ccircle cx='200.6' cy='199.8' r='0.91' fill='%23FFF6DD' opacity='0.55'/%3E%3Ccircle cx='184.2' cy='73.1' r='0.67' fill='%23FFF6DD' opacity='0.53'/%3E%3Ccircle cx='94.3' cy='64.9' r='1.53' fill='%23FFF6DD' opacity='0.68'/%3E%3Ccircle cx='160.4' cy='193.1' r='0.56' fill='%23FFF6DD' opacity='0.51'/%3E%3Ccircle cx='123.3' cy='111.9' r='0.96' fill='%23FFF6DD' opacity='0.47'/%3E%3Ccircle cx='200.0' cy='12.1' r='0.90' fill='%23FFF6DD' opacity='0.56'/%3E%3Ccircle cx='146.2' cy='203.4' r='1.07' fill='%23FFF6DD' opacity='0.45'/%3E%3Ccircle cx='89.2' cy='62.4' r='0.90' fill='%23FFF6DD' opacity='0.60'/%3E%3Ccircle cx='73.2' cy='117.0' r='1.18' fill='%23FFF6DD' opacity='0.49'/%3E%3Ccircle cx='199.4' cy='100.7' r='1.45' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='139.6' cy='113.6' r='1.06' fill='%23FFF6DD' opacity='0.76'/%3E%3Ccircle cx='206.7' cy='87.3' r='1.28' fill='%23FFF6DD' opacity='0.50'/%3E%3Ccircle cx='129.1' cy='77.1' r='0.86' fill='%23FFF6DD' opacity='0.58'/%3E%3Ccircle cx='174.8' cy='193.1' r='0.62' fill='%23FFF6DD' opacity='0.84'/%3E%3Ccircle cx='17.1' cy='89.5' r='0.67' fill='%23FFF6DD' opacity='0.40'/%3E%3Ccircle cx='219.2' cy='48.4' r='1.20' fill='%23FFF6DD' opacity='0.44'/%3E%3Ccircle cx='100.6' cy='130.4' r='0.65' fill='%23FFF6DD' opacity='0.90'/%3E%3Ccircle cx='194.6' cy='195.9' r='1.47' fill='%23FFF6DD' opacity='0.89'/%3E%3Ccircle cx='167.4' cy='60.6' r='0.51' fill='%23FFF6DD' opacity='0.50'/%3E%3Cpath d='M60 40l1.6 5.4L67 47l-5.4 1.6L60 54l-1.6-5.4L53 47l5.4-1.6z' fill='%23F6D98E'/%3E%3Cpath d='M170 150l1.2 4L175 155l-3.8 1.2L170 160l-1.2-3.8L165 155l3.8-1z' fill='%23F6D98E' opacity='.8'/%3E%3C/svg%3E") 0 0 / 220px 220px; position: relative; padding-top: 124px; border-top: 0; }
.sf-root[data-template="template48-majlis"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 84px; background: var(--sf-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='404' height='120' viewBox='0 0 404 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V96V96H26V70H29V44H27V40H30L32 28L34 40H37V44H35V70H38V96V92H56V84C56 66 60.480000000000004 68 81 52L84 38L87 52C107.52 68 112 66 112 84V96V98H134V86Q151 64 168 86V96V90H182V70H185V44H183V40H186L188 28L190 40H193V44H191V70H194V96V96H224V80C224 62 230.08 52 259 36L262 22L265 36C293.92 52 300 62 300 80V96V94H318V86Q332 64 346 86V96V98H366V70H369V44H367V40H370L372 28L374 40H377V44H375V70H378V96V95H404H404V120Z' fill='%230F0C2E'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%; }
.sf-root[data-template="template48-majlis"] .sfx-menu-noir, .sf-root[data-template="template48-majlis"] .sfx-mani-head { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='0.0' cy='202.6' r='0.82' fill='%23FFF6DD' opacity='0.48'/%3E%3Ccircle cx='160.5' cy='117.2' r='0.86' fill='%23FFF6DD' opacity='0.80'/%3E%3Ccircle cx='166.1' cy='119.4' r='1.25' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='179.7' cy='53.2' r='0.91' fill='%23FFF6DD' opacity='0.77'/%3E%3Ccircle cx='153.6' cy='11.9' r='1.25' fill='%23FFF6DD' opacity='0.63'/%3E%3Ccircle cx='202.9' cy='177.6' r='0.64' fill='%23FFF6DD' opacity='0.66'/%3E%3Ccircle cx='203.1' cy='151.5' r='1.21' fill='%23FFF6DD' opacity='0.70'/%3E%3Ccircle cx='200.6' cy='199.8' r='0.91' fill='%23FFF6DD' opacity='0.55'/%3E%3Ccircle cx='184.2' cy='73.1' r='0.67' fill='%23FFF6DD' opacity='0.53'/%3E%3Ccircle cx='94.3' cy='64.9' r='1.53' fill='%23FFF6DD' opacity='0.68'/%3E%3Ccircle cx='160.4' cy='193.1' r='0.56' fill='%23FFF6DD' opacity='0.51'/%3E%3Ccircle cx='123.3' cy='111.9' r='0.96' fill='%23FFF6DD' opacity='0.47'/%3E%3Ccircle cx='200.0' cy='12.1' r='0.90' fill='%23FFF6DD' opacity='0.56'/%3E%3Ccircle cx='146.2' cy='203.4' r='1.07' fill='%23FFF6DD' opacity='0.45'/%3E%3Ccircle cx='89.2' cy='62.4' r='0.90' fill='%23FFF6DD' opacity='0.60'/%3E%3Ccircle cx='73.2' cy='117.0' r='1.18' fill='%23FFF6DD' opacity='0.49'/%3E%3Ccircle cx='199.4' cy='100.7' r='1.45' fill='%23FFF6DD' opacity='0.73'/%3E%3Ccircle cx='139.6' cy='113.6' r='1.06' fill='%23FFF6DD' opacity='0.76'/%3E%3Ccircle cx='206.7' cy='87.3' r='1.28' fill='%23FFF6DD' opacity='0.50'/%3E%3Ccircle cx='129.1' cy='77.1' r='0.86' fill='%23FFF6DD' opacity='0.58'/%3E%3Ccircle cx='174.8' cy='193.1' r='0.62' fill='%23FFF6DD' opacity='0.84'/%3E%3Ccircle cx='17.1' cy='89.5' r='0.67' fill='%23FFF6DD' opacity='0.40'/%3E%3Ccircle cx='219.2' cy='48.4' r='1.20' fill='%23FFF6DD' opacity='0.44'/%3E%3Ccircle cx='100.6' cy='130.4' r='0.65' fill='%23FFF6DD' opacity='0.90'/%3E%3Ccircle cx='194.6' cy='195.9' r='1.47' fill='%23FFF6DD' opacity='0.89'/%3E%3Ccircle cx='167.4' cy='60.6' r='0.51' fill='%23FFF6DD' opacity='0.50'/%3E%3Cpath d='M60 40l1.6 5.4L67 47l-5.4 1.6L60 54l-1.6-5.4L53 47l5.4-1.6z' fill='%23F6D98E'/%3E%3Cpath d='M170 150l1.2 4L175 155l-3.8 1.2L170 160l-1.2-3.8L165 155l3.8-1z' fill='%23F6D98E' opacity='.8'/%3E%3C/svg%3E") 0 0 / 220px 220px, radial-gradient(90% 90% at 50% 0%, #3B2B72, #100C30); padding-bottom: calc(clamp(48px, 7vw, 96px) + 56px); }
.sf-root[data-template="template48-majlis"] .sfx-menu-noir::after, .sf-root[data-template="template48-majlis"] .sfx-mani-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='404' height='120' viewBox='0 0 404 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V96V96H26V70H29V44H27V40H30L32 28L34 40H37V44H35V70H38V96V92H56V84C56 66 60.480000000000004 68 81 52L84 38L87 52C107.52 68 112 66 112 84V96V98H134V86Q151 64 168 86V96V90H182V70H185V44H183V40H186L188 28L190 40H193V44H191V70H194V96V96H224V80C224 62 230.08 52 259 36L262 22L265 36C293.92 52 300 62 300 80V96V94H318V86Q332 64 346 86V96V98H366V70H369V44H367V40H370L372 28L374 40H377V44H375V70H378V96V95H404H404V120Z' fill='%230C0A26'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%; pointer-events: none; }
.sf-root[data-template="template48-majlis"] .sfx-menu-noir > *, .sf-root[data-template="template48-majlis"] .sfx-mani-head > * { position: relative; }
.sf-root[data-template="template48-majlis"] .sfx-menu-noir h1, .sf-root[data-template="template48-majlis"] .sfx-mani-head h1 { color: #EBC873; }
.sf-root[data-template="template48-majlis"] .sfx-menu-noir__eyebrow, .sf-root[data-template="template48-majlis"] .sfx-darkband__eyebrow { color: #EBC873; opacity: 1; text-shadow: 0 1px 8px rgba(16,12,48,.9); }

/* ═══ The heritage heroes (.hx) ══════════════════════════════════════════
   One structure for all: a national ribbon on top, the country's scene along
   the bottom (centred, never stretched; the ground carries on to both edges),
   the copy on the left and the framed photo with its emblem on the right. */
.sf-root .hx { --hx-scene-w: min(max(100vw, 1100px), 1920px); position: relative; overflow: hidden; isolation: isolate; padding-bottom: calc(var(--hx-scene-w) * 0.15); color: var(--hx-text); }
.sf-root .hx__band { display: block; position: relative; z-index: 2; }
.sf-root .hx__scene { position: absolute; z-index: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--hx-scene-w); aspect-ratio: 1600 / 420; background: var(--hx-scene) center bottom / 100% 100% no-repeat; pointer-events: none; }
.sf-root .hx__ground { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(var(--hx-scene-w) * var(--hx-ground-k)); background: var(--hx-ground); }
.sf-root .hx__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: clamp(36px, 6vw, 84px); padding-bottom: 24px; }
.sf-root .hx h1 { font-family: var(--sf-heading); color: var(--hx-ink); font-weight: 700; margin: 18px 0 0; line-height: 1.04; font-size: min(clamp(44px, 6.2vw, 96px), var(--sf-fit, 1000px)); word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.sf-root .hx__eyebrow { color: var(--hx-eyebrow); }
.sf-root .hx__mark { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; background: var(--hx-mark) center / contain no-repeat; }
.sf-root .hx__rule { display: block; width: 180px; height: 16px; margin: 22px 0; background: var(--hx-rule); }
.sf-root .hx .sfx-hero-lead { font-size: 18px; line-height: 1.75; max-width: 44ch; margin-bottom: 30px; color: var(--hx-text); }
.sf-root .hx__meta { color: var(--hx-text); }
.sf-root .hx .sfx-actions .sf-btn:not(.sf-btn-outline) { background: var(--hx-btn); color: var(--hx-btn-text) !important; }
.sf-root .hx .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: var(--hx-btn-hover); }
.sf-root .hx__art { position: relative; justify-self: center; width: min(100%, 400px); padding-bottom: 44px; }
.sf-root .hx__photo { display: block; width: 100%; height: 100%; object-fit: cover; background-color: #2a2a2a; background-image: var(--sf-hero-photo, none); background-size: cover; background-position: center; }
.sf-root .hx__emblem { position: absolute; pointer-events: none; height: auto; }
.sf-root .hx__fav { position: absolute; z-index: 4; right: -10px; bottom: 0; width: min(300px, 88%); }
.sf-root .hx .bxm-dish__txt em { color: var(--hx-price); }
@media (min-width: 900px) {
  .sf-root .hx__grid { grid-template-columns: 1.05fr .95fr; gap: 64px; }
  .sf-root .hx__art { justify-self: end; width: min(100%, 440px); }
}
@media (max-width: 599px) { .sf-root .hx__fav { right: 0; left: 0; margin: 0 auto; } }

/* ── Nile (Egypt) ── */
.sf-root .hx--nile { --hx-scene: url('/heritage-giza.svg'); --hx-ground: linear-gradient(#C98F4A 0 30%, #2A5CA8 30%, #132F66); --hx-ground-k: 0.0425;
  --hx-ink: #F7EBCB; --hx-text: #DCE3F2; --hx-eyebrow: #E9C46A; --hx-btn: #E9B43E; --hx-btn-text: #0E2347; --hx-btn-hover: #F6D27A; --hx-price: #1B3F7A;
  --hx-mark: url('/heritage-ankh.svg'); --hx-rule: url('/heritage-hiero.svg') left center / auto 100% repeat-x;
  background: radial-gradient(34% 40% at 72% 86%, rgba(255,205,120,.85), transparent 70%), linear-gradient(180deg, #0B1C40 0%, #1E3A78 44%, #9A6A54 74%, #E2A85C 100%); }
.sf-root .hx--nile .hx__band { height: 42px; background: url('/heritage-hiero.svg') left center / auto 100% repeat-x; box-shadow: 0 3px 0 #C8962E; }
.sf-root .hx--nile .hx__rule { height: 26px; width: 210px; box-shadow: 0 0 0 2px #C8962E; }
.sf-root .hx--nile h1 { letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sf-root .hx-cartouche { position: relative; z-index: 2; width: min(76%, 290px); aspect-ratio: 3 / 5; margin-left: auto; padding: 12px; border-radius: 999px; background: linear-gradient(135deg, #FCE08A, #E9B43E 30%, #B07A18 55%, #F6D27A 75%, #9A6514); box-shadow: 0 0 0 2px #7A520E, 0 36px 60px -24px rgba(0,0,0,.7); }
.sf-root .hx-cartouche::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -16px; height: 18px; border-radius: 6px; background: linear-gradient(90deg, #B07A18, #FCE08A 50%, #B07A18); box-shadow: inset 0 0 0 3px #16336E, 0 0 0 2px #7A520E; }
.sf-root .hx-cartouche__in { height: 100%; padding: 5px; border-radius: 999px; background: #16336E; }
.sf-root .hx-cartouche__in .hx__photo { border-radius: 999px; }

/* ── Al-Quds (Palestine) ── */
.sf-root .hx--quds { --hx-scene: url('/heritage-quds.svg'); --hx-ground: linear-gradient(#E6D2A8, #C8AE7C); --hx-ground-k: 0.0525;
  --hx-ink: #2B1E16; --hx-text: #4C3B2E; --hx-eyebrow: #9C1F28; --hx-btn: #161210; --hx-btn-text: #fff; --hx-btn-hover: #9C1F28; --hx-price: #9C1F28;
  --hx-mark: none; --hx-rule: url('/heritage-tatreez.svg') left center / 16px 16px repeat-x;
  background: radial-gradient(30% 40% at 50% 88%, rgba(255,228,160,.9), transparent 70%), linear-gradient(180deg, #8FB0D6 0%, #D9B49A 42%, #EDC489 70%, #F6D7A6 100%); }
.sf-root .hx--quds .hx__band { height: 48px; background: url('/heritage-keffiyeh-band.svg') left center / 36px 48px repeat-x; }
.sf-root .hx--quds .hx__mark { width: 30px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, #151515 0 33.34%, #FFFFFF 33.34% 66.67%, #1C7A3A 66.67%); box-shadow: 0 0 0 1px rgba(21,21,21,.25); clip-path: none; position: relative; }
.sf-root .hx--quds .hx__mark::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 48%; background: #C8102E; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sf-root .hx--quds .hx__rule { height: 16px; width: 176px; }
.sf-root .hx-thobe { position: relative; z-index: 2; width: min(80%, 320px); margin-left: auto; padding: 20px; background: #161210 url('/heritage-tatreez.svg') 0 0 / 26px 26px; box-shadow: 0 0 0 3px #E9B43E, 0 0 0 7px #161210, 0 36px 60px -24px rgba(40,20,10,.6); }
.sf-root .hx-thobe__in { aspect-ratio: 4 / 5; padding: 6px; background: #F4EAD4; }
.sf-root .hx-keffiyeh { position: absolute; z-index: 1; left: 0; top: 10%; width: 60%; height: 80%; background: url('/heritage-keffiyeh-band.svg') left bottom / 30px 40px repeat-x, url('/heritage-keffiyeh.svg') 0 0 / 22px 22px; transform: rotate(-7deg); box-shadow: 0 22px 40px -20px rgba(0,0,0,.45); }
.sf-root .hx-keffiyeh::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: repeating-linear-gradient(90deg, #141414 0 3px, transparent 3px 8px); }
.sf-root .hx__emblem--olive { z-index: 3; right: -6%; top: -6%; width: 56%; transform: rotate(-10deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.sf-root .hx--quds .hx__fav { right: auto; left: -10px; border-left: 4px solid #9C1F28; }

/* ── Sana'a (Yemen) ── */
.sf-root .hx--sanaa { --hx-scene: url('/heritage-yemen-souq.svg'); --hx-ground: #6B5243; --hx-ground-k: 0.005;
  --hx-ink: #3A1E10; --hx-text: #4A3022; --hx-eyebrow: #2C6FB0; --hx-btn: #6E3320; --hx-btn-text: #fff; --hx-btn-hover: #2C6FB0; --hx-price: #6E3320;
  --hx-mark: none; --hx-rule: url('/heritage-yemen-weave.svg') left center / auto 100% repeat-x;
  background: linear-gradient(180deg, #6FA6DC 0%, #A9CBEA 42%, #F2E2BE 100%); }
.sf-root .hx--sanaa .hx__band { height: 34px; background: url('/heritage-yemen-weave.svg') left center / auto 100% repeat-x; box-shadow: 0 2px 0 #6E3320; }
.sf-root .hx--sanaa .hx__mark { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#C8322F 0 25%, #E8B33A 0 50%, #2C6FB0 0 75%, #3E8E4F 0); box-shadow: 0 0 0 2px #FBF6EC, 0 0 0 3px #6E3320; }
.sf-root .hx--sanaa .hx__rule { height: 20px; width: 192px; }
.sf-root .hx-window { position: relative; z-index: 2; width: min(78%, 310px); margin-left: auto; padding: 14px; border-radius: 999px 999px 10px 10px; background: linear-gradient(90deg, #C98B4C, #E4AE6C 50%, #B97A3E); box-shadow: inset 0 0 0 3px #8A5426, 0 36px 60px -24px rgba(40,20,10,.6); }
.sf-root .hx-window__in { display: flex; flex-direction: column; border-radius: 999px 999px 4px 4px; overflow: hidden; background: #3A2212; box-shadow: 0 0 0 3px #8A5426; }
.sf-root .hx-window__transom { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.sf-root .hx-window__bar { display: block; height: 12px; background: linear-gradient(#8A5426, #D9A35E 50%, #8A5426); }
.sf-root .hx-window__in .hx__photo { height: auto; aspect-ratio: 1 / 1; }
.sf-root .hx__emblem--table { z-index: 3; left: -26%; bottom: 13%; width: 62%; filter: drop-shadow(0 16px 20px rgba(40,20,10,.4)); }
.sf-root .hx--sanaa .hx__fav { right: auto; left: -10px; border-left: 4px solid #2C6FB0; }

/* ── Shibam (Yemen) ── */
.sf-root .hx--shibam { --hx-scene: url('/heritage-yemen-wadi.svg'); --hx-ground: #D9A262; --hx-ground-k: 0.03;
  --hx-ink: #FFF1D6; --hx-text: #F2DEC0; --hx-eyebrow: #F2B85A; --hx-btn: #F2B85A; --hx-btn-text: #2A160C; --hx-btn-hover: #FFD27F; --hx-price: #8A4E1C;
  --hx-mark: none; --hx-rule: linear-gradient(90deg, #F2B85A, #F2B85A 60%, transparent) left center / 100% 3px no-repeat;
  background: radial-gradient(28% 36% at 80% 80%, rgba(255,190,100,.55), transparent 70%), linear-gradient(180deg, #2A160C 0%, #5A2E16 36%, #B4652A 72%, #E0A866 100%); }
.sf-root .hx--shibam .hx__band { height: 28px; background: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x; box-shadow: 0 2px 0 #D8DDE2; }
.sf-root .hx--shibam .hx__mark { width: 12px; height: 17px; border-radius: 50%; background: #F2B85A; box-shadow: inset -3px 0 0 #8A4E1C; transform: rotate(-20deg); }
.sf-root .hx--shibam h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sf-root .hx-door { position: relative; z-index: 2; width: min(76%, 300px); margin-left: auto; padding: 16px; border-radius: 10px; background: linear-gradient(90deg, #4A2A14, #6B3E1E 50%, #3E2210); box-shadow: inset 0 0 0 3px #2A160C, inset 0 0 0 8px #7A4A24, 0 36px 60px -24px rgba(0,0,0,.7); }
.sf-root .hx-door__lintel { display: block; height: 42px; margin-bottom: 12px; border: 3px solid #2A160C; background: radial-gradient(circle, #E9B66A 0 3px, transparent 3.5px) 11px 11px / 22px 20px, repeating-linear-gradient(45deg, #3E2210 0 6px, #5A3418 6px 12px); }
.sf-root .hx-door__in { aspect-ratio: 3 / 4; border-radius: 140px 140px 4px 4px; overflow: hidden; box-shadow: 0 0 0 4px #2A160C, 0 0 0 7px #C98B4C; }
.sf-root .hx__emblem--coffee { z-index: 3; left: -28%; bottom: 7%; width: 66%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }

/* ── Nubia (Egypt) ── */
.sf-root .hx--nubia { --hx-scene: url('/heritage-nubia.svg'); --hx-ground: linear-gradient(#2E7FB8, #1A5486); --hx-ground-k: 0.0475;
  --hx-ink: #1E2A4A; --hx-text: #3A3F52; --hx-eyebrow: #C8322F; --hx-btn: #13786C; --hx-btn-text: #fff; --hx-btn-hover: #1D5C9E; --hx-price: #C8322F;
  --hx-mark: none; --hx-rule: url('/heritage-nubia-band.svg') left center / auto 100% repeat-x;
  background: radial-gradient(30% 34% at 78% 84%, rgba(255,214,140,.7), transparent 70%), linear-gradient(180deg, #8EC5EA 0%, #CFE6F2 46%, #F6E3BE 100%); }
.sf-root .hx--nubia .hx__band { height: 32px; background: url('/heritage-nubia-band.svg') left center / auto 100% repeat-x; }
.sf-root .hx--nubia .hx__mark { width: 20px; height: 18px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #2C6FB0 0 33%, #E8A92A 33% 66%, #C8322F 66%); }
.sf-root .hx--nubia .hx__rule { height: 18px; width: 180px; }
.sf-root .hx-nubiadoor { position: relative; z-index: 2; width: min(78%, 310px); margin-left: auto; padding: 18px; border-radius: 170px 170px 10px 10px; background: url('/heritage-nubia-band.svg') 0 0 / 30px 16px, #F7F1E6; box-shadow: inset 0 0 0 4px #2C6FB0, 0 36px 60px -24px rgba(30,40,60,.5); }
.sf-root .hx-nubiadoor__in { aspect-ratio: 4 / 5; border-radius: 150px 150px 4px 4px; overflow: hidden; box-shadow: 0 0 0 5px #1E9A8A, 0 0 0 10px #F7F1E6, 0 0 0 13px #C8322F; }
.sf-root .hx__emblem--basket { z-index: 3; left: -22%; bottom: 7%; width: 48%; filter: drop-shadow(0 14px 18px rgba(30,40,60,.35)); }
.sf-root .hx--nubia .hx__fav { right: auto; left: -10px; border-left: 4px solid #1E9A8A; }

/* ── Pharaoh (Egypt) ── */
.sf-root .hx--pharaoh { --hx-scene: url('/heritage-pharaoh-karnak.svg'); --hx-ground: linear-gradient(#C08A4A, #8E5E2C); --hx-ground-k: 0.0425;
  --hx-ink: #F7E3A3; --hx-text: #D9DCEB; --hx-eyebrow: #5FD6CF; --hx-btn: #E9B43E; --hx-btn-text: #0B1430; --hx-btn-hover: #F6D27A; --hx-price: #14306E;
  --hx-mark: url('/heritage-pharaoh-eye.svg'); --hx-rule: url('/heritage-pharaoh-band.svg') left center / auto 100% repeat-x;
  background: radial-gradient(circle at 93% 12%, #FFF4CC 0 26px, rgba(255,228,160,.28) 28px, transparent 110px), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'160'%20viewBox%3D'0%200%20240%20160'%3E%3Ccircle%20cx%3D'117'%20cy%3D'145'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'132'%20cy%3D'152'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'207'%20cy%3D'133'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'26'%20cy%3D'116'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'139'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'117'%20cy%3D'42'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'214'%20cy%3D'137'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'50'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'201'%20cy%3D'120'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'153'%20cy%3D'52'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'77'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'171'%20cy%3D'23'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'143'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'60'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'19'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'29'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'6'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'55'%20cy%3D'15'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'183'%20cy%3D'103'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'146'%20cy%3D'52'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'81'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'32'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'182'%20cy%3D'27'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'121'%20cy%3D'126'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'116'%20cy%3D'132'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'109'%20cy%3D'100'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E") 0 0 / 240px 160px, linear-gradient(180deg, #060B1E 0%, #10204A 45%, #2A2A5A 75%, #4A3550 100%); }
@media (max-width: 599px) { .sf-root .hx--pharaoh { background: radial-gradient(circle at 88% 50%, #FFF4CC 0 20px, rgba(255,228,160,.24) 22px, transparent 80px), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'160'%20viewBox%3D'0%200%20240%20160'%3E%3Ccircle%20cx%3D'117'%20cy%3D'145'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'132'%20cy%3D'152'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'207'%20cy%3D'133'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'26'%20cy%3D'116'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'139'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'117'%20cy%3D'42'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'214'%20cy%3D'137'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'50'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'201'%20cy%3D'120'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'153'%20cy%3D'52'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'77'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'171'%20cy%3D'23'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'143'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'60'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'19'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'29'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'6'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'55'%20cy%3D'15'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'183'%20cy%3D'103'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'146'%20cy%3D'52'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'81'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'32'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'182'%20cy%3D'27'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'121'%20cy%3D'126'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'116'%20cy%3D'132'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'109'%20cy%3D'100'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E") 0 0 / 240px 160px, linear-gradient(180deg, #060B1E 0%, #10204A 45%, #2A2A5A 75%, #4A3550 100%); } }
.sf-root .hx--pharaoh .hx__band { height: 44px; background: url('/heritage-pharaoh-band.svg') left center / auto 100% repeat-x; box-shadow: 0 3px 0 #D4A437; }
.sf-root .hx--pharaoh .hx__mark { width: 30px; height: 21px; }
.sf-root .hx--pharaoh .hx__rule { height: 26px; width: 216px; }
.sf-root .hx--pharaoh h1 { letter-spacing: .02em; color: #F7E3A3; background: linear-gradient(180deg, #FFF3C2 8%, #F2C24E 55%, #C08A1E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.sf-root .hx-temple { position: relative; z-index: 2; width: min(74%, 300px); margin: 64px 0 0 auto; padding: 0 14px 14px; background: repeating-linear-gradient(160deg, rgba(122,82,14,.4) 0 2px, transparent 2px 9px), linear-gradient(135deg, #FCE08A, #E9B43E 30%, #B07A18 55%, #F6D27A 75%, #9A6514); box-shadow: 0 0 0 2px #7A520E, 0 36px 60px -24px rgba(0,0,0,.8); }
.sf-root .hx-temple__cornice { display: block; height: 30px; margin: 0 -26px 12px; background: repeating-linear-gradient(90deg, #1E4D9A 0 10px, #F2C24E 10px 13px, #C8322F 13px 23px, #F2C24E 23px 26px, #1FA3A0 26px 36px, #F2C24E 36px 39px); border-top: 6px solid #F6D27A; border-bottom: 5px solid #B07A18; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%); }
.sf-root .hx-temple__in { aspect-ratio: 3 / 4; padding: 6px; background: #0B1A40; box-shadow: inset 0 0 0 2px #F2C24E; }
.sf-root .hx-temple__sun { position: absolute; z-index: 3; left: 50%; top: -60px; width: 128%; height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sf-root .hx__emblem--scarab { z-index: 4; left: -6%; bottom: 16%; width: 52%; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.sf-root .hx--pharaoh .hx__fav { border-left: 4px solid #D4A437; }

/* ── Sufra: the photo behind a drawn arch (.hx-pane) ── */
.sf-root .hx-pane { position: relative; z-index: 2; width: min(80%, 320px); aspect-ratio: 300 / 380; margin-left: auto; filter: drop-shadow(0 30px 40px rgba(20,30,40,.35)); }
.sf-root .hx-pane .hx__photo { position: absolute; inset: 0; }
.sf-root .hx-pane__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── Sufra (Arab food) ── */
.sf-root .hx--sufra { --hx-scene: url('/heritage-sufra.svg'); --hx-ground: #3E2410; --hx-ground-k: 0.03;
  --hx-ink: #FBEFD2; --hx-text: #D7E4DC; --hx-eyebrow: #E0A526; --hx-btn: #E0A526; --hx-btn-text: #0A2A24; --hx-btn-hover: #F2C45A; --hx-price: #0F4D3F;
  --hx-mark: url('/heritage-sufra-star.svg'); --hx-rule: url('/heritage-sufra-band.svg') left center / auto 100% repeat-x;
  background: radial-gradient(26% 30% at 84% 20%, rgba(255,200,110,.22), transparent 70%), radial-gradient(22% 26% at 12% 16%, rgba(255,200,110,.16), transparent 70%), linear-gradient(180deg, #0A2A24 0%, #0F4D3F 60%, #1E5A48 100%); }
.sf-root .hx--sufra .hx__band { height: 36px; background: url('/heritage-sufra-band.svg') left center / auto 100% repeat-x; }
.sf-root .hx--sufra .hx__mark { width: 22px; height: 22px; }
.sf-root .hx--sufra .hx__rule { height: 24px; width: 192px; }
.sf-root .hx__emblem--dates { z-index: 3; left: -24%; bottom: 8%; width: 58%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.sf-root .hx--sufra .hx__fav { border-left: 4px solid #E0A526; }

/* ── Marrakech (Morocco) ── */
.sf-root .hx--mkech { --hx-scene: url('/heritage-marrakech.svg'); --hx-ground: linear-gradient(#C9673F, #A44A2A); --hx-ground-k: 0.05625;
  --hx-ink: #FFF4E4; --hx-text: #FBE6D4; --hx-eyebrow: #F4D58E; --hx-btn: #1F6E5A; --hx-btn-text: #fff; --hx-btn-hover: #145545; --hx-price: #B24A2E;
  --hx-mark: url('/heritage-zellige.svg'); --hx-rule: url('/heritage-kilim.svg') left center / auto 100% repeat-x;
  background: radial-gradient(32% 40% at 70% 86%, rgba(255,214,150,.75), transparent 70%), linear-gradient(180deg, #6E2A44 0%, #A8463E 40%, #D9774A 72%, #F2B27A 100%); }
.sf-root .hx--mkech .hx__band { height: 32px; background: url('/heritage-kilim.svg') left center / auto 100% repeat-x; }
.sf-root .hx--mkech .hx__mark { width: 22px; height: 22px; border-radius: 3px; }
.sf-root .hx--mkech .hx__rule { height: 24px; width: 192px; box-shadow: 0 0 0 2px #F4D58E; }
.sf-root .hx-alfiz { position: relative; z-index: 2; width: min(80%, 320px); margin-left: auto; padding: 18px; background: #F7F1E6 url('/heritage-zellige.svg') 0 0 / 40px 40px; box-shadow: inset 0 0 0 4px #F4D58E, 0 0 0 4px #1F6E5A, 0 36px 60px -24px rgba(60,20,10,.6); }
.sf-root .hx-alfiz__arch { padding: 12px 12px 0; border-radius: 999px 999px 0 0; background: radial-gradient(circle, #D8BE92 0 2px, transparent 2.6px) 0 0 / 11px 11px, #F3E6D0; box-shadow: inset 0 0 0 2px #C9A46A; }
.sf-root .hx-alfiz__in { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; box-shadow: 0 0 0 3px #B88A4A; }
.sf-root .hx__emblem--tagine { z-index: 3; left: -14%; bottom: 4%; width: 44%; filter: drop-shadow(0 14px 18px rgba(60,20,10,.4)); }

/* ── Chefchaouen (Morocco) ── */
.sf-root .hx--blue { --hx-scene: url('/heritage-chaouen.svg'); --hx-ground: #3E6DB5; --hx-ground-k: 0.0175;
  --hx-ink: #13294F; --hx-text: #233F6E; --hx-eyebrow: #1F4A8C; --hx-btn: #2F5FA8; --hx-btn-text: #fff; --hx-btn-hover: #C9633A; --hx-price: #2F5FA8;
  --hx-mark: none; --hx-rule: linear-gradient(90deg, #C9633A 0 28%, transparent 28% 34%, #2F5FA8 34% 100%) left center / 100% 6px no-repeat;
  background: linear-gradient(180deg, #A9C9EE 0%, #D6E6F7 50%, #EEF4FB 100%); }
.sf-root .hx--blue .hx__band { height: 10px; background: repeating-linear-gradient(90deg, #2F5FA8 0 22px, #F4F8FD 22px 26px); }
.sf-root .hx--blue .hx__mark { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #C9633A; box-shadow: inset 0 0 0 3px #EEF4FB; }
.sf-root .hx--blue .hx__rule { height: 6px; width: 170px; }
.sf-root .hx-bluedoor { position: relative; z-index: 2; width: min(72%, 290px); margin-left: auto; margin-right: 12%; padding: 14px 14px 0; border-radius: 999px 999px 0 0; background: #F4F8FD; box-shadow: 0 0 0 6px #DCE8F7, 0 36px 60px -24px rgba(19,41,79,.5); }
.sf-root .hx-bluedoor__in { aspect-ratio: 3 / 4.2; padding: 12px 12px 0; border-radius: 999px 999px 0 0; background: radial-gradient(circle, #DCE6F2 0 2.4px, transparent 3px) 0 0 / 22px 22px, #2F5FA8; }
.sf-root .hx-bluedoor__in .hx__photo { border-radius: 999px 999px 0 0; }
.sf-root .hx-bluedoor__knock { display: none; }
.sf-root .hx__emblem--pot-l, .sf-root .hx__emblem--pot-r { z-index: 3; bottom: 36px; width: 92px; filter: drop-shadow(0 10px 10px rgba(19,41,79,.3)); }
.sf-root .hx__emblem--pot-l { left: 0; }
.sf-root .hx__emblem--pot-r { right: -4%; width: 76px; }
.sf-root .hx--blue .hx__fav { right: auto; left: 0; }


@media (max-width: 899px) {
  .sf-root .hx-cartouche, .sf-root .hx-thobe, .sf-root .hx-window, .sf-root .hx-door, .sf-root .hx-alfiz, .sf-root .hx-nubiadoor, .sf-root .hx-temple, .sf-root .hx-pane { margin-right: 4%; }
}
@media (max-width: 420px) {
  .sf-root .hx__emblem--tagine { left: -6%; width: 40%; }
  .sf-root .hx__emblem--coffee { left: -8%; width: 56%; }
  .sf-root .hx__emblem--table { left: -6%; width: 52%; }
  .sf-root .hx__emblem--basket { left: -6%; width: 40%; }
  .sf-root .hx__emblem--scarab { left: -2%; width: 44%; }
  .sf-root .hx__emblem--manoushe, .sf-root .hx__emblem--tabbouleh, .sf-root .hx__emblem--dates { left: -6%; width: 44%; }
}

/* ═══ The designs on every page ═════════════════════════════════════════ */

.sf-root[data-template="template49-nile"] .sf-nav { background: #0E2347; border-bottom: 4px solid #C8962E; }
.sf-root[data-template="template49-nile"] .sf-nav, .sf-root[data-template="template49-nile"] .sf-nav a, .sf-root[data-template="template49-nile"] .sf-nav button { color: #F3E9D2; }
.sf-root[data-template="template49-nile"] .sf-burger span { background: #F3E9D2; }
.sf-root[data-template="template49-nile"] .sf-signin { background: #C8962E; color: #0E2347 !important; box-shadow: none; }
.sf-root[data-template="template49-nile"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #E9C46A !important; }
.sf-root[data-template="template49-nile"] .sf-nav-links a.active { color: #E9C46A; }
.sf-root[data-template="template49-nile"] .sf-section-title, .sf-root[data-template="template49-nile"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0E2347; }
.sf-root[data-template="template49-nile"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Crect%20width%3D'48'%20height%3D'48'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M0%200h12L0%2012zM48%200h-12L48%2012zM0%2048h12L0%2036zM48%2048h-12L48%2036z'%20fill%3D'%23C8962E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%20transform%3D'rotate(45%2024%2024)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'7'%20fill%3D'%231B3F7A'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M24%200v5M24%2043v5M0%2024h5M43%2024h5'%20stroke%3D'%231B3F7A'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") repeat-x center / 16px 16px; }
.sf-root[data-template="template49-nile"] .sf-section.alt { background: #ECE0C4; }
.sf-root[data-template="template49-nile"] .sf-card, .sf-root[data-template="template49-nile"] .sf-menu-item { border-radius: 12px; border: 1px solid #E2D3B0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template49-nile"] .sf-card:hover { border-color: #C8962E; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template49-nile"] .sf-price { color: #B3262E; font-weight: 800; }
.sf-root[data-template="template49-nile"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1B3F7A; }
.sf-root[data-template="template49-nile"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B3262E; }
.sf-root[data-template="template49-nile"] .sf-cat.active { background: #1B3F7A; }
.sf-root[data-template="template49-nile"] .sfx-ticker { background: #0E2347; color: #E9C46A; font-family: var(--sf-heading); }
.sf-root[data-template="template49-nile"] .sf-footer { background: #0E2347; border-top: 0; position: relative; padding-top: 88px; }
.sf-root[data-template="template49-nile"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Crect%20width%3D'48'%20height%3D'48'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M0%200h12L0%2012zM48%200h-12L48%2012zM0%2048h12L0%2036zM48%2048h-12L48%2036z'%20fill%3D'%23C8962E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%20transform%3D'rotate(45%2024%2024)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'7'%20fill%3D'%231B3F7A'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M24%200v5M24%2043v5M0%2024h5M43%2024h5'%20stroke%3D'%231B3F7A'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") repeat-x left center / 48px 48px; }
.sf-root[data-template="template49-nile"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'600'%20height%3D'120'%20viewBox%3D'0%200%20600%20120'%3E%3Cpath%20fill%3D'%2306102A'%20d%3D'M0%20120V98h18l44-66%2044%2066h8l28-40%2028%2040h12v-16h5V50l4-12%204%2012v32h5v16h18a28%2028%200%200%201%2056%200h8V74h4V36l3-9%203%209v38h4v24h26l50-74%2050%2074h26a22%2022%200%200%201%2044%200h14V58l4-13%204%2013v40h34l30-44%2030%2044h22V120z'%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / 600px 120px, radial-gradient(70% 120% at 70% 30%, #24508F, #0B1C40); padding-bottom: calc(clamp(40px, 6vw, 72px) + 28px); }
.sf-root[data-template="template49-nile"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Crect%20width%3D'48'%20height%3D'48'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M0%200h12L0%2012zM48%200h-12L48%2012zM0%2048h12L0%2036zM48%2048h-12L48%2036z'%20fill%3D'%23C8962E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%20transform%3D'rotate(45%2024%2024)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'7'%20fill%3D'%231B3F7A'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M24%200v5M24%2043v5M0%2024h5M43%2024h5'%20stroke%3D'%231B3F7A'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") repeat-x left center / 28px 28px; }
.sf-root[data-template="template49-nile"] .sfx-con-head::after, .sf-root[data-template="template49-nile"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Crect%20width%3D'48'%20height%3D'48'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M0%200h12L0%2012zM48%200h-12L48%2012zM0%2048h12L0%2036zM48%2048h-12L48%2036z'%20fill%3D'%23C8962E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'22'%20height%3D'22'%20fill%3D'%23B3262E'%20transform%3D'rotate(45%2024%2024)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'7'%20fill%3D'%231B3F7A'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%23F3E9D2'%2F%3E%3Cpath%20d%3D'M24%200v5M24%2043v5M0%2024h5M43%2024h5'%20stroke%3D'%231B3F7A'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") repeat-x center / 16px 16px; }
.sf-root[data-template="template49-nile"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template50-quds"] .sf-nav { background: #F1E7D3; border-bottom: 3px solid #9C1F28; }

.sf-root[data-template="template50-quds"] .sf-signin { background: #1C5A8C; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template50-quds"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1C5A8C !important; }
.sf-root[data-template="template50-quds"] .sf-nav-links a.active { color: #9C1F28; }
.sf-root[data-template="template50-quds"] .sf-section-title, .sf-root[data-template="template50-quds"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #2B1E16; }
.sf-root[data-template="template50-quds"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'14'%20viewBox%3D'0%200%2018%2014'%3E%3Cpath%20d%3D'M2%203l4%204m-4%200l4-4M8%207l4%204m-4%200l4-4M14%203l4%204m-4%200l4-4'%20stroke%3D'%239C1F28'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") repeat-x center / 18px 14px; }
.sf-root[data-template="template50-quds"] .sf-section.alt { background: #EADCC2; }
.sf-root[data-template="template50-quds"] .sf-card, .sf-root[data-template="template50-quds"] .sf-menu-item { border-radius: 8px; border: 1px solid #E0D2B6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template50-quds"] .sf-card:hover { border-color: #1C5A8C; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template50-quds"] .sf-price { color: #9C1F28; font-weight: 800; }
.sf-root[data-template="template50-quds"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1C5A8C; }
.sf-root[data-template="template50-quds"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #9C1F28; }
.sf-root[data-template="template50-quds"] .sf-cat.active { background: #1C5A8C; }
.sf-root[data-template="template50-quds"] .sfx-ticker { background: #1C5A8C; color: #F7DD8C; font-family: var(--sf-heading); }
.sf-root[data-template="template50-quds"] .sf-footer { background: #2B1E16; border-top: 0; position: relative; padding-top: 58px; }
.sf-root[data-template="template50-quds"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'18'%20viewBox%3D'0%200%2024%2018'%3E%3Crect%20width%3D'24'%20height%3D'18'%20fill%3D'%239C1F28'%2F%3E%3Cpath%20d%3D'M12%203l3%203-3%203-3-3zM4%209l3%203-3%203-3-3zM20%209l3%203-3%203-3-3z'%20fill%3D'none'%20stroke%3D'%23F1E7D3'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011v4'%20stroke%3D'%23D9A63A'%20stroke-width%3D'1.4'%2F%3E%3C%2Fsvg%3E") repeat-x left center / 24px 18px; }
.sf-root[data-template="template50-quds"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'600'%20height%3D'90'%20viewBox%3D'0%200%20600%2090'%3E%3Cpath%20fill%3D'%235A463A'%20d%3D'M0%2090V52h30v-14h10v14h40v-22h8v-24l5-12%205%2012v24h8v22h60v-8h12v8h70v-16h14v16h40v-28h6v28h30v-12h40v-10h10v10h50v-20h8v-28l5-12%205%2012v28h8v20h60v-12h12v12h40V90z'%2F%3E%3Cpath%20fill%3D'%236B5546'%20d%3D'M0%2090V64h600v26z'%2F%3E%3Cpath%20fill%3D'%236B5546'%20d%3D'M0%2064h600v-6h-10v-5h-10v5h-12v-5h-10v5h-12v-5h-10v5H0z'%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / 480px 72px, radial-gradient(60% 120% at 50% 100%, #F6D9A0, transparent 70%), linear-gradient(180deg, #2B4F75, #8C5A3C 75%, #C98B50); padding-bottom: calc(clamp(40px, 6vw, 72px) + 18px); }
.sf-root[data-template="template50-quds"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'18'%20viewBox%3D'0%200%2024%2018'%3E%3Crect%20width%3D'24'%20height%3D'18'%20fill%3D'%239C1F28'%2F%3E%3Cpath%20d%3D'M12%203l3%203-3%203-3-3zM4%209l3%203-3%203-3-3zM20%209l3%203-3%203-3-3z'%20fill%3D'none'%20stroke%3D'%23F1E7D3'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011v4'%20stroke%3D'%23D9A63A'%20stroke-width%3D'1.4'%2F%3E%3C%2Fsvg%3E") repeat-x left center / 24px 18px; }
.sf-root[data-template="template50-quds"] .sfx-con-head::after, .sf-root[data-template="template50-quds"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'14'%20viewBox%3D'0%200%2018%2014'%3E%3Cpath%20d%3D'M2%203l4%204m-4%200l4-4M8%207l4%204m-4%200l4-4M14%203l4%204m-4%200l4-4'%20stroke%3D'%239C1F28'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") repeat-x center / 18px 14px; }
.sf-root[data-template="template50-quds"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template51-sanaa"] .sf-nav { background: #6E3320; border-bottom: 0; }
.sf-root[data-template="template51-sanaa"] .sf-nav, .sf-root[data-template="template51-sanaa"] .sf-nav a, .sf-root[data-template="template51-sanaa"] .sf-nav button { color: #FBF6EC; }
.sf-root[data-template="template51-sanaa"] .sf-burger span { background: #FBF6EC; }
.sf-root[data-template="template51-sanaa"] .sf-signin { background: #FBF6EC; color: #6E3320 !important; box-shadow: none; }
.sf-root[data-template="template51-sanaa"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F2CF7A !important; }
.sf-root[data-template="template51-sanaa"] .sf-nav-links a.active { color: #F2CF7A; }
.sf-root[data-template="template51-sanaa"] .sf-section-title, .sf-root[data-template="template51-sanaa"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #6E3320; }
.sf-root[data-template="template51-sanaa"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-yemen-weave.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template51-sanaa"] .sf-section.alt { background: #F2E6D6; }
.sf-root[data-template="template51-sanaa"] .sf-card, .sf-root[data-template="template51-sanaa"] .sf-menu-item { border-radius: 6px; border: 1px solid #E8D7C2; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template51-sanaa"] .sf-card:hover { border-color: #2C6FB0; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template51-sanaa"] .sf-price { color: #C8322F; font-weight: 800; }
.sf-root[data-template="template51-sanaa"] :where(.sf-btn:not(.sf-btn-outline)) { background: #6E3320; }
.sf-root[data-template="template51-sanaa"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #2C6FB0; }
.sf-root[data-template="template51-sanaa"] .sf-cat.active { background: #6E3320; }
.sf-root[data-template="template51-sanaa"] .sfx-ticker { background: #6E3320; color: #F2CF7A; font-family: var(--sf-heading); }
.sf-root[data-template="template51-sanaa"] .sf-footer { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'20'%20viewBox%3D'0%200%2040%2020'%3E%3Crect%20width%3D'40'%20height%3D'20'%20fill%3D'%237A3B22'%2F%3E%3Cpath%20d%3D'M0%2010h40M0%2020h40M10%200v10M30%2010v10'%20stroke%3D'%236A311B'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E") 0 0 / 40px 20px, #7A3B22; border-top: 0; position: relative; padding-top: 70px; }
.sf-root[data-template="template51-sanaa"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: url('/heritage-yemen-weave.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template51-sanaa"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'60'%20height%3D'60'%20viewBox%3D'0%200%2060%2060'%3E%3Crect%20width%3D'60'%20height%3D'60'%20fill%3D'none'%2F%3E%3Crect%20x%3D'22'%20y%3D'18'%20width%3D'16'%20height%3D'22'%20rx%3D'1'%20fill%3D'none'%20stroke%3D'%23FBF6EC'%20stroke-width%3D'2'%20opacity%3D'.07'%2F%3E%3Cpath%20d%3D'M22%2018a8%208%200%200%201%2016%200'%20fill%3D'none'%20stroke%3D'%23FBF6EC'%20stroke-width%3D'2'%20opacity%3D'.07'%2F%3E%3C%2Fsvg%3E") 0 0 / 60px 60px, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'20'%20viewBox%3D'0%200%2040%2020'%3E%3Crect%20width%3D'40'%20height%3D'20'%20fill%3D'%237A3B22'%2F%3E%3Cpath%20d%3D'M0%2010h40M0%2020h40M10%200v10M30%2010v10'%20stroke%3D'%236A311B'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E") 0 0 / 40px 20px, #7A3B22; padding-bottom: calc(clamp(40px, 6vw, 72px) + 30px); }
.sf-root[data-template="template51-sanaa"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url('/heritage-yemen-weave.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template51-sanaa"] .sfx-con-head::after, .sf-root[data-template="template51-sanaa"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-yemen-weave.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template51-sanaa"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template52-shibam"] .sf-nav { background: #2A160C; border-bottom: 3px solid #D88A1E; }
.sf-root[data-template="template52-shibam"] .sf-nav, .sf-root[data-template="template52-shibam"] .sf-nav a, .sf-root[data-template="template52-shibam"] .sf-nav button { color: #F7E7C8; }
.sf-root[data-template="template52-shibam"] .sf-burger span { background: #F7E7C8; }
.sf-root[data-template="template52-shibam"] .sf-signin { background: #F2B85A; color: #2A160C !important; box-shadow: none; }
.sf-root[data-template="template52-shibam"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F2B85A !important; }
.sf-root[data-template="template52-shibam"] .sf-nav-links a.active { color: #F2B85A; }
.sf-root[data-template="template52-shibam"] .sf-section-title, .sf-root[data-template="template52-shibam"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #3A2215; }
.sf-root[data-template="template52-shibam"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(90deg, #D88A1E, #D88A1E 70%, transparent) center / 100% 3px no-repeat; }
.sf-root[data-template="template52-shibam"] .sf-section.alt { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20fill%3D'%234A2A17'%20opacity%3D'.16'%3E%3Cellipse%20cx%3D'10'%20cy%3D'10'%20rx%3D'5'%20ry%3D'7'%20transform%3D'rotate(-30%2010%2010)'%2F%3E%3Cellipse%20cx%3D'30'%20cy%3D'30'%20rx%3D'5'%20ry%3D'7'%20transform%3D'rotate(30%2030%2030)'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M7%205q4%205%206%2010M27%2025q4%205%206%2010'%20stroke%3D'%23F2E2C4'%20stroke-width%3D'1'%20opacity%3D'.4'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E") 0 0 / 40px 40px, #EAD6B0; }
.sf-root[data-template="template52-shibam"] .sf-card, .sf-root[data-template="template52-shibam"] .sf-menu-item { border-radius: 14px; border: 1px solid #E2CBA2; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template52-shibam"] .sf-card:hover { border-color: #D88A1E; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template52-shibam"] .sf-price { color: #A85A14; font-weight: 800; }
.sf-root[data-template="template52-shibam"] :where(.sf-btn:not(.sf-btn-outline)) { background: #3A2215; }
.sf-root[data-template="template52-shibam"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #A85A14; }
.sf-root[data-template="template52-shibam"] .sf-cat.active { background: #3A2215; }
.sf-root[data-template="template52-shibam"] .sfx-ticker { background: #2A160C; color: #F2B85A; font-family: var(--sf-heading); }
.sf-root[data-template="template52-shibam"] .sf-footer { background: #2A160C; border-top: 0; position: relative; padding-top: 66px; }
.sf-root[data-template="template52-shibam"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: url('/heritage-yemen-filigree.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template52-shibam"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'600'%20height%3D'260'%20viewBox%3D'0%200%20600%20260'%3E%3Cg%20fill%3D'%232B170C'%3E%3Cpath%20d%3D'M0%20260V150h34v-10h6v120zM40%20260V96h40v164zM86%20260V128h30v-8h8v140zM130%20260V70h44v190zM180%20260V112h36v148zM222%20260V60h48v200zM276%20260V104h38v156zM320%20260V82h42v178zM368%20260V138h30v122zM404%20260V74h46v186zM456%20260V120h34v140zM496%20260V90h44v170zM546%20260V130h54v130z'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23EADBC0'%20opacity%3D'.9'%3E%3Cpath%20d%3D'M40%2096h40v6H40zM130%2070h44v6h-44zM222%2060h48v6h-48zM320%2082h42v6h-42zM404%2074h46v6h-46zM496%2090h44v6h-44zM180%20112h36v5h-36zM276%20104h38v5h-38z'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23F2B85A'%20opacity%3D'.85'%3E%3Crect%20x%3D'52'%20y%3D'120'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'64'%20y%3D'150'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'144'%20y%3D'100'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'158'%20y%3D'130'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'238'%20y%3D'90'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'252'%20y%3D'126'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'334'%20y%3D'110'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'420'%20y%3D'100'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'434'%20y%3D'140'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'510'%20y%3D'118'%20width%3D'5'%20height%3D'7'%2F%3E%3Crect%20x%3D'194'%20y%3D'140'%20width%3D'5'%20height%3D'7'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left bottom / 300px 130px, linear-gradient(180deg, #2A160C, #8A4A20 70%, #C9874A); padding-bottom: calc(clamp(40px, 6vw, 72px) + 26px); }
.sf-root[data-template="template52-shibam"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: url('/heritage-yemen-filigree.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template52-shibam"] .sfx-con-head::after, .sf-root[data-template="template52-shibam"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(90deg, #D88A1E, #D88A1E 70%, transparent) center / 100% 3px no-repeat; }
.sf-root[data-template="template52-shibam"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template53-marrakech"] .sf-nav { background: #8A3420; border-bottom: 4px solid #F4D58E; }
.sf-root[data-template="template53-marrakech"] .sf-nav, .sf-root[data-template="template53-marrakech"] .sf-nav a, .sf-root[data-template="template53-marrakech"] .sf-nav button { color: #FBEFE2; }
.sf-root[data-template="template53-marrakech"] .sf-burger span { background: #FBEFE2; }
.sf-root[data-template="template53-marrakech"] .sf-signin { background: #F4D58E; color: #5A1E10 !important; box-shadow: none; }
.sf-root[data-template="template53-marrakech"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F4D58E !important; }
.sf-root[data-template="template53-marrakech"] .sf-nav-links a.active { color: #F4D58E; }
.sf-root[data-template="template53-marrakech"] .sf-section-title, .sf-root[data-template="template53-marrakech"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #8A3420; }
.sf-root[data-template="template53-marrakech"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20width%3D'40'%20height%3D'40'%20fill%3D'%23F7F1E6'%2F%3E%3Cg%20fill%3D'%231F6E5A'%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%20transform%3D'rotate(45%2020%2020)'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'4'%20fill%3D'%23F7F1E6'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'2'%20fill%3D'%23D49A2A'%2F%3E%3Cpath%20d%3D'M0%200h7L0%207zM40%200h-7L40%207zM0%2040h7L0%2033zM40%2040h-7L40%2033z'%20fill%3D'%231D4E89'%2F%3E%3Cg%20fill%3D'%23B24A2E'%3E%3Ccircle%20cx%3D'20'%20cy%3D'2.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'37.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'2.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'37.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x center / 16px 16px; }
.sf-root[data-template="template53-marrakech"] .sf-section.alt { background: #F1E1CC; }
.sf-root[data-template="template53-marrakech"] .sf-card, .sf-root[data-template="template53-marrakech"] .sf-menu-item { border-radius: 16px; border: 1px solid #E6D2B8; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template53-marrakech"] .sf-card:hover { border-color: #1F6E5A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template53-marrakech"] .sf-price { color: #B24A2E; font-weight: 800; }
.sf-root[data-template="template53-marrakech"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1F6E5A; }
.sf-root[data-template="template53-marrakech"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B24A2E; }
.sf-root[data-template="template53-marrakech"] .sf-cat.active { background: #1F6E5A; }
.sf-root[data-template="template53-marrakech"] .sfx-ticker { background: #1F6E5A; color: #F4D58E; font-family: var(--sf-heading); }
.sf-root[data-template="template53-marrakech"] .sf-footer { background: #123F35; border-top: 0; position: relative; padding-top: 80px; }
.sf-root[data-template="template53-marrakech"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20width%3D'40'%20height%3D'40'%20fill%3D'%23123F35'%2F%3E%3Cg%20fill%3D'%23D49A2A'%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'14'%20height%3D'14'%2F%3E%3Crect%20x%3D'13'%20y%3D'13'%20width%3D'14'%20height%3D'14'%20transform%3D'rotate(45%2020%2020)'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'3.5'%20fill%3D'%23123F35'%2F%3E%3Cpath%20d%3D'M0%200h7L0%207zM40%200h-7L40%207zM0%2040h7L0%2033zM40%2040h-7L40%2033z'%20fill%3D'%23F7F1E6'%20opacity%3D'.85'%2F%3E%3C%2Fsvg%3E") repeat-x left center / 40px 40px; }
.sf-root[data-template="template53-marrakech"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'80'%20height%3D'80'%20viewBox%3D'0%200%2080%2080'%3E%3Crect%20width%3D'80'%20height%3D'80'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M8%2014q10-4%2018%202M50%2040q12-6%2022%200M20%2064q8-4%2016%200'%20stroke%3D'%23FFFFFF'%20stroke-width%3D'1.2'%20opacity%3D'.05'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E") 0 0 / 80px 80px, radial-gradient(80% 120% at 70% 30%, #D0704A, #8A3420); padding-bottom: calc(clamp(40px, 6vw, 72px) + 32px); }
.sf-root[data-template="template53-marrakech"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20width%3D'40'%20height%3D'40'%20fill%3D'%23F7F1E6'%2F%3E%3Cg%20fill%3D'%231F6E5A'%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%20transform%3D'rotate(45%2020%2020)'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'4'%20fill%3D'%23F7F1E6'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'2'%20fill%3D'%23D49A2A'%2F%3E%3Cpath%20d%3D'M0%200h7L0%207zM40%200h-7L40%207zM0%2040h7L0%2033zM40%2040h-7L40%2033z'%20fill%3D'%231D4E89'%2F%3E%3Cg%20fill%3D'%23B24A2E'%3E%3Ccircle%20cx%3D'20'%20cy%3D'2.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'37.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'2.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'37.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left center / 32px 32px; }
.sf-root[data-template="template53-marrakech"] .sfx-con-head::after, .sf-root[data-template="template53-marrakech"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20width%3D'40'%20height%3D'40'%20fill%3D'%23F7F1E6'%2F%3E%3Cg%20fill%3D'%231F6E5A'%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'16'%20height%3D'16'%20transform%3D'rotate(45%2020%2020)'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'4'%20fill%3D'%23F7F1E6'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'2'%20fill%3D'%23D49A2A'%2F%3E%3Cpath%20d%3D'M0%200h7L0%207zM40%200h-7L40%207zM0%2040h7L0%2033zM40%2040h-7L40%2033z'%20fill%3D'%231D4E89'%2F%3E%3Cg%20fill%3D'%23B24A2E'%3E%3Ccircle%20cx%3D'20'%20cy%3D'2.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'37.5'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'2.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'37.5'%20cy%3D'20'%20r%3D'2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x center / 16px 16px; }
.sf-root[data-template="template53-marrakech"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template54-chaouen"] .sf-nav { background: #F2F7FD; border-bottom: 4px solid #2F5FA8; }

.sf-root[data-template="template54-chaouen"] .sf-signin { background: #2F5FA8; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template54-chaouen"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #2F5FA8 !important; }
.sf-root[data-template="template54-chaouen"] .sf-nav-links a.active { color: #C9633A; }
.sf-root[data-template="template54-chaouen"] .sf-section-title, .sf-root[data-template="template54-chaouen"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #17325E; }
.sf-root[data-template="template54-chaouen"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(90deg, #C9633A 0 28%, transparent 28% 34%, #2F5FA8 34% 100%) center / 100% 6px no-repeat; }
.sf-root[data-template="template54-chaouen"] .sf-section.alt { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Crect%20width%3D'120'%20height%3D'120'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M10%2020q20-8%2040%200M70%2060q18-10%2040-2M20%2096q16-6%2034%200'%20stroke%3D'%23FFFFFF'%20stroke-width%3D'3'%20opacity%3D'.09'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") 0 0 / 120px 120px, #DCE8F7; }
.sf-root[data-template="template54-chaouen"] .sf-card, .sf-root[data-template="template54-chaouen"] .sf-menu-item { border-radius: 18px; border: 1px solid #C9DAF0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template54-chaouen"] .sf-card:hover { border-color: #2F5FA8; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template54-chaouen"] .sf-price { color: #C9633A; font-weight: 800; }
.sf-root[data-template="template54-chaouen"] :where(.sf-btn:not(.sf-btn-outline)) { background: #2F5FA8; }
.sf-root[data-template="template54-chaouen"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #17325E; }
.sf-root[data-template="template54-chaouen"] .sf-cat.active { background: #2F5FA8; }
.sf-root[data-template="template54-chaouen"] .sfx-ticker { background: #2F5FA8; color: #F2F7FD; font-family: var(--sf-heading); }
.sf-root[data-template="template54-chaouen"] .sf-footer { background: #17325E; border-top: 0; position: relative; padding-top: 100px; }
.sf-root[data-template="template54-chaouen"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'70'%20viewBox%3D'0%200%20240%2070'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2070V58h40V46h40V34h40V22h40V12h80v58z'%20fill%3D'%232F5FA8'%2F%3E%3Cpath%20d%3D'M0%2058h40M40%2046h40M80%2034h40M120%2022h40M160%2012h80'%20stroke%3D'%23F2F7FD'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") left bottom / 100% 100% no-repeat, #9DBFE9; }
.sf-root[data-template="template54-chaouen"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Crect%20width%3D'120'%20height%3D'120'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M10%2020q20-8%2040%200M70%2060q18-10%2040-2M20%2096q16-6%2034%200'%20stroke%3D'%23FFFFFF'%20stroke-width%3D'3'%20opacity%3D'.09'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") 0 0 / 120px 120px, linear-gradient(160deg, #6E9BD8, #2F5FA8); padding-bottom: calc(clamp(40px, 6vw, 72px) + 48px); }
.sf-root[data-template="template54-chaouen"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'70'%20viewBox%3D'0%200%20240%2070'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2070V58h40V46h40V34h40V22h40V12h80v58z'%20fill%3D'%232F5FA8'%2F%3E%3Cpath%20d%3D'M0%2058h40M40%2046h40M80%2034h40M120%2022h40M160%2012h80'%20stroke%3D'%23F2F7FD'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") left bottom / 100% 100% no-repeat; }
.sf-root[data-template="template54-chaouen"] .sfx-con-head::after, .sf-root[data-template="template54-chaouen"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(90deg, #C9633A 0 28%, transparent 28% 34%, #2F5FA8 34% 100%) center / 100% 6px no-repeat; }
.sf-root[data-template="template54-chaouen"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template55-nubia"] .sf-nav { background: #F7F1E6; border-bottom: 0; }

.sf-root[data-template="template55-nubia"] .sf-signin { background: #13786C; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template55-nubia"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1E2A4A !important; }
.sf-root[data-template="template55-nubia"] .sf-nav-links a.active { color: #C8322F; }
.sf-root[data-template="template55-nubia"] .sf-section-title, .sf-root[data-template="template55-nubia"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1E2A4A; }
.sf-root[data-template="template55-nubia"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-nubia-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template55-nubia"] .sf-section.alt { background: #EAF3F7; }
.sf-root[data-template="template55-nubia"] .sf-card, .sf-root[data-template="template55-nubia"] .sf-menu-item { border-radius: 16px; border: 1px solid #D6E6EC; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template55-nubia"] .sf-card:hover { border-color: #1E9A8A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template55-nubia"] .sf-price { color: #C8322F; font-weight: 800; }
.sf-root[data-template="template55-nubia"] :where(.sf-btn:not(.sf-btn-outline)) { background: #13786C; }
.sf-root[data-template="template55-nubia"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #1D5C9E; }
.sf-root[data-template="template55-nubia"] .sf-cat.active { background: #13786C; }
.sf-root[data-template="template55-nubia"] .sfx-ticker { background: #13786C; color: #F7F1E6; font-family: var(--sf-heading); }
.sf-root[data-template="template55-nubia"] .sf-footer { background: #1E2A4A; border-top: 0; position: relative; padding-top: 68px; }
.sf-root[data-template="template55-nubia"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px; background: url('/heritage-nubia-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template55-nubia"] .sf-page-header { background: linear-gradient(180deg, #8EC5EA, #F6E3BE); padding-bottom: calc(clamp(40px, 6vw, 72px) + 28px); }
.sf-root[data-template="template55-nubia"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: url('/heritage-nubia-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template55-nubia"] .sfx-con-head::after, .sf-root[data-template="template55-nubia"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-nubia-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template55-nubia"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template56-pharaoh"] .sf-nav { background: #0B1430; border-bottom: 4px solid #D4A437; }
.sf-root[data-template="template56-pharaoh"] .sf-nav, .sf-root[data-template="template56-pharaoh"] .sf-nav a, .sf-root[data-template="template56-pharaoh"] .sf-nav button { color: #F3E6C4; }
.sf-root[data-template="template56-pharaoh"] .sf-burger span { background: #F3E6C4; }
.sf-root[data-template="template56-pharaoh"] .sf-signin { background: #F2C24E; color: #0B1430 !important; box-shadow: none; }
.sf-root[data-template="template56-pharaoh"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F2C24E !important; }
.sf-root[data-template="template56-pharaoh"] .sf-nav-links a.active { color: #F2C24E; }
.sf-root[data-template="template56-pharaoh"] .sf-section-title, .sf-root[data-template="template56-pharaoh"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0B1430; }
.sf-root[data-template="template56-pharaoh"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-pharaoh-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template56-pharaoh"] .sf-section.alt { background: #EFE3C6; }
.sf-root[data-template="template56-pharaoh"] .sf-card, .sf-root[data-template="template56-pharaoh"] .sf-menu-item { border-radius: 6px; border: 1px solid #E4D3AE; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template56-pharaoh"] .sf-card:hover { border-color: #C9971E; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template56-pharaoh"] .sf-price { color: #B3392A; font-weight: 800; }
.sf-root[data-template="template56-pharaoh"] :where(.sf-btn:not(.sf-btn-outline)) { background: #14306E; }
.sf-root[data-template="template56-pharaoh"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B3392A; }
.sf-root[data-template="template56-pharaoh"] .sf-cat.active { background: #14306E; }
.sf-root[data-template="template56-pharaoh"] .sfx-ticker { background: #0B1430; color: #F2C24E; font-family: var(--sf-heading); }
.sf-root[data-template="template56-pharaoh"] .sf-footer { background: #0B1430; border-top: 0; position: relative; padding-top: 84px; }
.sf-root[data-template="template56-pharaoh"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44px; background: url('/heritage-pharaoh-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template56-pharaoh"] .sf-page-header { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'160'%20viewBox%3D'0%200%20240%20160'%3E%3Ccircle%20cx%3D'117'%20cy%3D'145'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'132'%20cy%3D'152'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'207'%20cy%3D'133'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'26'%20cy%3D'116'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'139'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'117'%20cy%3D'42'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'214'%20cy%3D'137'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'50'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'201'%20cy%3D'120'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'153'%20cy%3D'52'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'77'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'171'%20cy%3D'23'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'143'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'60'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'19'%20r%3D'1.3'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'29'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'6'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'55'%20cy%3D'15'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3Ccircle%20cx%3D'183'%20cy%3D'103'%20r%3D'1'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'146'%20cy%3D'52'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'81'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'32'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'182'%20cy%3D'27'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'121'%20cy%3D'126'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'116'%20cy%3D'132'%20r%3D'0.8'%20fill%3D'%23FFF6DA'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'109'%20cy%3D'100'%20r%3D'0.6'%20fill%3D'%23FFF6DA'%20opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E") 0 0 / 240px 160px, radial-gradient(60% 120% at 50% 110%, #4A3550, transparent 70%), linear-gradient(180deg, #060B1E, #14245A); padding-bottom: calc(clamp(40px, 6vw, 72px) + 44px); }
.sf-root[data-template="template56-pharaoh"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: url('/heritage-pharaoh-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template56-pharaoh"] .sfx-con-head::after, .sf-root[data-template="template56-pharaoh"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-pharaoh-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template56-pharaoh"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template57-beirut"] .sf-nav { background: #FAF5EC; border-bottom: 3px solid #C2452D; }

.sf-root[data-template="template57-beirut"] .sf-signin { background: #1F5F8B; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template57-beirut"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1F5F8B !important; }
.sf-root[data-template="template57-beirut"] .sf-nav-links a.active { color: #B23A24; }
.sf-root[data-template="template57-beirut"] .sf-section-title, .sf-root[data-template="template57-beirut"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1C2B3A; }
.sf-root[data-template="template57-beirut"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-beirut-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template57-beirut"] .sf-section.alt { background: #EEF4F8; }
.sf-root[data-template="template57-beirut"] .sf-card, .sf-root[data-template="template57-beirut"] .sf-menu-item { border-radius: 14px; border: 1px solid #E2D8C6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template57-beirut"] .sf-card:hover { border-color: #1F5F8B; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template57-beirut"] .sf-price { color: #B23A24; font-weight: 800; }
.sf-root[data-template="template57-beirut"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1F5F8B; }
.sf-root[data-template="template57-beirut"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B23A24; }
.sf-root[data-template="template57-beirut"] .sf-cat.active { background: #1F5F8B; }
.sf-root[data-template="template57-beirut"] .sfx-ticker { background: #1F5F8B; color: #FAF5EC; font-family: var(--sf-heading); }
.sf-root[data-template="template57-beirut"] .sf-footer { background: #14405E; border-top: 0; position: relative; padding-top: 66px; }
.sf-root[data-template="template57-beirut"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: url('/heritage-beirut-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template57-beirut"] .sf-page-header { background: linear-gradient(180deg, rgba(12,20,32,.55), rgba(12,20,32,.8)), url('/photo-lbmezze-800.webp') center / cover no-repeat, #14405E; padding-bottom: calc(clamp(40px, 6vw, 72px) + 26px); }
.sf-root[data-template="template57-beirut"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: url('/heritage-beirut-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template57-beirut"] .sfx-con-head::after, .sf-root[data-template="template57-beirut"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-beirut-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template57-beirut"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template58-cedars"] .sf-nav { background: #1F5A3A; border-bottom: 0; }
.sf-root[data-template="template58-cedars"] .sf-nav, .sf-root[data-template="template58-cedars"] .sf-nav a, .sf-root[data-template="template58-cedars"] .sf-nav button { color: #F7F4EC; }
.sf-root[data-template="template58-cedars"] .sf-burger span { background: #F7F4EC; }
.sf-root[data-template="template58-cedars"] .sf-signin { background: #FFFFFF; color: #1F5A3A !important; box-shadow: none; }
.sf-root[data-template="template58-cedars"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FFFFFF !important; }
.sf-root[data-template="template58-cedars"] .sf-nav-links a.active { color: #F6E7C8; }
.sf-root[data-template="template58-cedars"] .sf-section-title, .sf-root[data-template="template58-cedars"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1F5A3A; }
.sf-root[data-template="template58-cedars"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-arz-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template58-cedars"] .sf-section.alt { background: #EEF2EA; }
.sf-root[data-template="template58-cedars"] .sf-card, .sf-root[data-template="template58-cedars"] .sf-menu-item { border-radius: 10px; border: 1px solid #DCD6C4; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template58-cedars"] .sf-card:hover { border-color: #1F5A3A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template58-cedars"] .sf-price { color: #B81E25; font-weight: 800; }
.sf-root[data-template="template58-cedars"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1F5A3A; }
.sf-root[data-template="template58-cedars"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B81E25; }
.sf-root[data-template="template58-cedars"] .sf-cat.active { background: #1F5A3A; }
.sf-root[data-template="template58-cedars"] .sfx-ticker { background: #B81E25; color: #FFFFFF; font-family: var(--sf-heading); }
.sf-root[data-template="template58-cedars"] .sf-footer { background: #143D27; border-top: 0; position: relative; padding-top: 70px; }
.sf-root[data-template="template58-cedars"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: url('/heritage-arz-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template58-cedars"] .sf-page-header { background: linear-gradient(180deg, rgba(20,61,39,.7), rgba(20,61,39,.9)), url('/photo-hummus-520.webp') center 45% / cover no-repeat, #143D27; padding-bottom: calc(clamp(40px, 6vw, 72px) + 30px); }
.sf-root[data-template="template58-cedars"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url('/heritage-arz-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template58-cedars"] .sfx-con-head::after, .sf-root[data-template="template58-cedars"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-arz-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template58-cedars"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template59-sufra"] .sf-nav { background: #0A3329; border-bottom: 4px solid #E0A526; }
.sf-root[data-template="template59-sufra"] .sf-nav, .sf-root[data-template="template59-sufra"] .sf-nav a, .sf-root[data-template="template59-sufra"] .sf-nav button { color: #FBEFD2; }
.sf-root[data-template="template59-sufra"] .sf-burger span { background: #FBEFD2; }
.sf-root[data-template="template59-sufra"] .sf-signin { background: #E0A526; color: #0A3329 !important; box-shadow: none; }
.sf-root[data-template="template59-sufra"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #E0A526 !important; }
.sf-root[data-template="template59-sufra"] .sf-nav-links a.active { color: #E0A526; }
.sf-root[data-template="template59-sufra"] .sf-section-title, .sf-root[data-template="template59-sufra"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0F4D3F; }
.sf-root[data-template="template59-sufra"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-sufra-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template59-sufra"] .sf-section.alt { background: #F2EAD8; }
.sf-root[data-template="template59-sufra"] .sf-card, .sf-root[data-template="template59-sufra"] .sf-menu-item { border-radius: 12px; border: 1px solid #E6D9BE; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template59-sufra"] .sf-card:hover { border-color: #E0A526; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template59-sufra"] .sf-price { color: #B5282E; font-weight: 800; }
.sf-root[data-template="template59-sufra"] :where(.sf-btn:not(.sf-btn-outline)) { background: #0F4D3F; }
.sf-root[data-template="template59-sufra"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B5282E; }
.sf-root[data-template="template59-sufra"] .sf-cat.active { background: #0F4D3F; }
.sf-root[data-template="template59-sufra"] .sfx-ticker { background: #0A3329; color: #E0A526; font-family: var(--sf-heading); }
.sf-root[data-template="template59-sufra"] .sf-footer { background: #0A3329; border-top: 0; position: relative; padding-top: 74px; }
.sf-root[data-template="template59-sufra"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 34px; background: url('/heritage-sufra-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template59-sufra"] .sf-page-header { background: radial-gradient(40% 80% at 80% 20%, rgba(255,200,110,.2), transparent 70%), linear-gradient(180deg, #0A2A24, #0F4D3F); padding-bottom: calc(clamp(40px, 6vw, 72px) + 34px); }
.sf-root[data-template="template59-sufra"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: url('/heritage-sufra-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template59-sufra"] .sfx-con-head::after, .sf-root[data-template="template59-sufra"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-sufra-band.svg') repeat-x left center / auto 100%; }
.sf-root[data-template="template59-sufra"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template60-palestine3d"] .sf-nav { background: #FBF7EF; border-bottom: 3px solid #B3122A; }

.sf-root[data-template="template60-palestine3d"] .sf-signin { background: #B3122A; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template60-palestine3d"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #B3122A !important; }
.sf-root[data-template="template60-palestine3d"] .sf-nav-links a.active { color: #1E7A3E; }
.sf-root[data-template="template60-palestine3d"] .sf-section-title, .sf-root[data-template="template60-palestine3d"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1B1714; }
.sf-root[data-template="template60-palestine3d"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-tatreez.svg') repeat-x left center / 16px 16px; }
.sf-root[data-template="template60-palestine3d"] .sf-section.alt { background: #EFE6D4; }
.sf-root[data-template="template60-palestine3d"] .sf-card, .sf-root[data-template="template60-palestine3d"] .sf-menu-item { border-radius: 10px; border: 1px solid #E3D7C4; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template60-palestine3d"] .sf-card:hover { border-color: #B3122A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template60-palestine3d"] .sf-price { color: #B3122A; font-weight: 800; }
.sf-root[data-template="template60-palestine3d"] :where(.sf-btn:not(.sf-btn-outline)) { background: #B3122A; }
.sf-root[data-template="template60-palestine3d"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #1E7A3E; }
.sf-root[data-template="template60-palestine3d"] .sf-cat.active { background: #B3122A; }
.sf-root[data-template="template60-palestine3d"] .sfx-ticker { background: #1E7A3E; color: #FBF7EF; font-family: var(--sf-heading); }
.sf-root[data-template="template60-palestine3d"] .sf-footer { background: #1E5631; border-top: 0; position: relative; padding-top: 62px; }
.sf-root[data-template="template60-palestine3d"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: url('/heritage-keffiyeh-band.svg') repeat-x left center / auto 100%, #FFFFFF; }
.sf-root[data-template="template60-palestine3d"] .sf-page-header { background: linear-gradient(135deg, rgba(179,18,42,.9), rgba(126,12,29,.88)), url('/grill-cooked-960.webp') center / cover no-repeat, #B3122A; padding-bottom: calc(clamp(40px, 6vw, 72px) + 22px); }
.sf-root[data-template="template60-palestine3d"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: url('/heritage-keffiyeh-band.svg') repeat-x left center / auto 100%, #FFFFFF; }
.sf-root[data-template="template60-palestine3d"] .sfx-con-head::after, .sf-root[data-template="template60-palestine3d"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-tatreez.svg') repeat-x left center / 16px 16px; }
.sf-root[data-template="template60-palestine3d"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template61-palestine-door"] .sf-nav { background: #FFFFFF; border-bottom: 3px solid #1E7A3E; }

.sf-root[data-template="template61-palestine-door"] .sf-signin { background: #1E7A3E; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template61-palestine-door"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1E7A3E !important; }
.sf-root[data-template="template61-palestine-door"] .sf-nav-links a.active { color: #C8102E; }
.sf-root[data-template="template61-palestine-door"] .sf-section-title, .sf-root[data-template="template61-palestine-door"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1B1714; }
.sf-root[data-template="template61-palestine-door"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-tatreez.svg') repeat-x left center / 16px 16px; }
.sf-root[data-template="template61-palestine-door"] .sf-section.alt { background: #F1E7D4; }
.sf-root[data-template="template61-palestine-door"] .sf-card, .sf-root[data-template="template61-palestine-door"] .sf-menu-item { border-radius: 12px; border: 1px solid #E6D8C0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template61-palestine-door"] .sf-card:hover { border-color: #1E7A3E; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template61-palestine-door"] .sf-price { color: #C8102E; font-weight: 800; }
.sf-root[data-template="template61-palestine-door"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1E7A3E; }
.sf-root[data-template="template61-palestine-door"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #C8102E; }
.sf-root[data-template="template61-palestine-door"] .sf-cat.active { background: #1E7A3E; }
.sf-root[data-template="template61-palestine-door"] .sfx-ticker { background: #C8102E; color: #FFFFFF; font-family: var(--sf-heading); }
.sf-root[data-template="template61-palestine-door"] .sf-footer { background: #134A2A; border-top: 0; position: relative; padding-top: 62px; }
.sf-root[data-template="template61-palestine-door"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: url('/heritage-keffiyeh-band.svg') repeat-x left center / auto 100%, #FFFFFF; }
.sf-root[data-template="template61-palestine-door"] .sf-page-header { background: linear-gradient(135deg, rgba(30,122,62,.92), rgba(19,74,42,.9)), url('/heritage-tatreez.svg') 0 0 / 28px 28px, #1E7A3E; padding-bottom: calc(clamp(40px, 6vw, 72px) + 22px); }
.sf-root[data-template="template61-palestine-door"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: url('/heritage-keffiyeh-band.svg') repeat-x left center / auto 100%, #FFFFFF; }
.sf-root[data-template="template61-palestine-door"] .sfx-con-head::after, .sf-root[data-template="template61-palestine-door"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-tatreez.svg') repeat-x left center / 16px 16px; }
.sf-root[data-template="template61-palestine-door"] .sfx-ed-head::after { margin-left: 0; }


/* ═══ Photographic heroes (.ph) ═══ */
.sf-root .ph { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: min(88svh, 860px); color: #fff; background: #10161D; }
.sf-root .ph__band { display: block; position: relative; z-index: 3; flex-shrink: 0; }
.sf-root .ph__media { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.sf-root .ph__img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.sf-root .ph__shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.sf-root .ph__grid { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 28px; padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(28px, 5vw, 64px); }
.sf-root .ph__copy { min-width: 0; max-width: 640px; }
.sf-root .ph h1 { font-family: var(--sf-heading); color: inherit; font-weight: 700; margin: 18px 0 0; line-height: 1.02; font-size: min(clamp(46px, 7vw, 108px), var(--sf-fit, 1000px)); letter-spacing: -.01em; overflow-wrap: break-word; text-wrap: balance; }
.sf-root .ph__eyebrow { color: var(--ph-eyebrow, #F6C987); }
.sf-root .ph__mark { display: inline-block; flex-shrink: 0; width: 26px; height: 2px; background: currentColor; }
.sf-root .ph__rule { display: block; width: 168px; height: 4px; margin: 22px 0; background: var(--ph-rule, currentColor); }
.sf-root .ph .sfx-hero-lead { font-size: 18px; line-height: 1.7; max-width: 46ch; margin-bottom: 28px; color: var(--ph-text, rgba(255,255,255,.88)); }
.sf-root .ph__meta { color: var(--ph-text, rgba(255,255,255,.88)); }
.sf-root .ph .sfx-actions .sf-btn:not(.sf-btn-outline) { background: var(--ph-btn, var(--sf-primary)); color: var(--ph-btn-text, #fff) !important; box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }
.sf-root .ph .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: var(--ph-btn-hover, var(--sf-primary-dark)); }
.sf-root .ph__fav { width: min(340px, 100%); justify-self: start; }
.sf-root .ph .bxm-dish__txt em { color: var(--ph-price, var(--sf-primary)); }
@media (min-width: 900px) {
  .sf-root .ph__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
  .sf-root .ph__fav { justify-self: end; }
}

/* ── Beirut: a Lebanese mezze table, full bleed ── */
.sf-root .ph--beirut { --ph-eyebrow: #F6C987; --ph-rule: url('/heritage-beirut-band.svg') left center / auto 100% repeat-x; --ph-btn: #C2452D; --ph-btn-hover: #A3361F; --ph-price: #C2452D; }
.sf-root .ph--beirut .ph__band { height: 14px; background: url('/heritage-beirut-band.svg') left center / auto 100% repeat-x; }
.sf-root .ph--beirut .ph__img { object-position: 55% 50%; }
.sf-root .ph--beirut .ph__shade { background: linear-gradient(180deg, rgba(12,20,32,.35) 0%, rgba(12,20,32,0) 30%, rgba(12,20,32,.25) 55%, rgba(10,16,26,.88) 100%), linear-gradient(90deg, rgba(10,16,26,.55) 0%, rgba(10,16,26,0) 60%); }
.sf-root .ph--beirut .ph__rule { height: 12px; }
.sf-root .ph--beirut h1 { text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.sf-root .ph--beirut .ph__fav { background: rgba(255,250,242,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.sf-root .ph--beirut .ph__fav .bxm-dish__txt small { color: #F6C987; }
.sf-root .ph--beirut .ph__fav .bxm-dish__txt em { color: #FFD9A0; }
.sf-root .ph--beirut .ph__fav .bxm-dish__add { color: #fff; border-color: rgba(255,255,255,.5); }
.sf-root .ph--beirut .ph__fav .bxm-dish__add:hover { background: #C2452D; border-color: #C2452D; }

/* ── Cedars: a bowl of hummus beside a cedar-green panel ── */
.sf-root .ph--arz { --ph-eyebrow: #E2C27A; --ph-text: rgba(247,244,236,.86); --ph-rule: linear-gradient(180deg, #D2232A 0 30%, #F7F4EC 30% 70%, #D2232A 70%); --ph-btn: #D2232A; --ph-btn-hover: #A81A20; --ph-price: #B81E25; background: #143D27; color: #F7F4EC; }
.sf-root .ph--arz .ph__band { height: 6px; background: linear-gradient(90deg, #D2232A 0 33.3%, #F7F4EC 33.3% 66.6%, #D2232A 66.6%); }
.sf-root .ph--arz .ph__mark { width: 18px; height: 18px; background: url('/heritage-cedar.svg') center / contain no-repeat; }
.sf-root .ph--arz .ph__rule { width: 120px; height: 10px; }
.sf-root .ph--arz .ph__img { object-position: 50% 45%; }
.sf-root .ph--arz .ph__shade { background: linear-gradient(180deg, rgba(20,61,39,0) 0%, rgba(20,61,39,.15) 35%, rgba(20,61,39,.92) 70%, #143D27 100%); }
.sf-root .ph--arz .ph__fav { border-left: 4px solid #D2232A; }
@media (max-width: 899px) {
  .sf-root .ph--arz .ph__media { bottom: auto; height: 62%; }
  .sf-root .ph--arz .ph__shade { background: linear-gradient(180deg, rgba(20,61,39,0) 18%, rgba(20,61,39,.8) 44%, #143D27 60%); }
}
@media (min-width: 900px) {
  .sf-root .ph--arz { background: #143D27 radial-gradient(60% 80% at 0% 100%, rgba(226,194,122,.12), transparent 70%); }
  .sf-root .ph--arz .ph__media { left: 50%; }
  .sf-root .ph--arz .ph__shade { background: linear-gradient(90deg, #143D27 50%, rgba(20,61,39,.6) 56%, rgba(20,61,39,0) 70%); }
  .sf-root .ph--arz .ph__grid { align-content: center; }
  .sf-root .ph--arz .ph__copy { max-width: calc(50vw - 72px); }
  .sf-root .ph--arz h1 { font-size: min(clamp(44px, 5.6vw, 92px), var(--sf-fit, 1000px)); }
  .sf-root .ph--arz .ph__fav { align-self: end; }
}

/* ── Mezze: the table from above, the copy on a frosted card ── */
.sf-root .ph--levant { --ph-eyebrow: #8A6420; --ph-text: #4A3E36; --ph-rule: repeating-linear-gradient(90deg, #2B2420 0 14px, #E9C46A 14px 28px); --ph-btn: #2B2420; --ph-btn-hover: #8A6420; --ph-price: #8A6420; color: #2B2420; background: #6E8F86; }
.sf-root .ph--levant .ph__band { height: 10px; background: repeating-linear-gradient(90deg, #2B2420 0 18px, #F3EBDA 18px 36px); }
.sf-root .ph--levant .ph__mark { width: 14px; height: 14px; border-radius: 50%; background: #4E7A3A; box-shadow: 0 0 0 3px #F3EBDA, 0 0 0 4px #4E7A3A; }
.sf-root .ph--levant .ph__img { object-position: 50% 60%; }
.sf-root .ph--levant .ph__shade { background: linear-gradient(180deg, rgba(30,40,36,0) 40%, rgba(30,40,36,.45) 100%); }
.sf-root .ph--levant .ph__rule { height: 6px; }
.sf-root .ph--levant .ph__copy { padding: clamp(24px, 4vw, 44px); border-radius: 22px; background: rgba(250,246,238,.9); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 70px -30px rgba(20,24,20,.6); border-top: 10px solid transparent; border-image: repeating-linear-gradient(90deg, #2B2420 0 18px, #F3EBDA 18px 36px) 10; }
.sf-root .ph--levant .ph__meta { margin-top: 20px; }
@media (min-width: 900px) { .sf-root .ph--levant .ph__grid { align-content: center; } .sf-root .ph--levant .ph__fav { align-self: end; } }

/* Small screens: the photo stays visible above the copy. */
@media (max-width: 599px) {
  .sf-root .ph { min-height: 92svh; }
  .sf-root .ph__grid { padding-top: 34svh; }
  .sf-root .ph--arz .ph__grid { padding-top: 46svh; }
  .sf-root .ph--levant .ph__grid { padding-top: 30svh; }
  .sf-root .ph .sfx-hero-lead { font-size: 16px; margin-bottom: 22px; }
  .sf-root .ph__fav { width: 100%; }
}

/* Motion: a slow drift of the photo; the copy rises in once. */
@media (prefers-reduced-motion: no-preference) {
  .sf-root .ph__img { animation: ph-drift 26s ease-in-out infinite alternate; will-change: transform; }
  .sf-root .ph__copy, .sf-root .ph__fav { animation: ph-rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .sf-root .ph__fav { animation-delay: .25s; }
}
@keyframes ph-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes ph-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ═══ Palestine 3D: the grill hero (.gr) ═══ */
.sf-root .gr { --gr-p: 0; --gr-nav: 64px; --gr-tab: 0px; position: relative; isolation: isolate; color: #1B1714; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Cpath%20d%3D'M0%2020L20%200l20%2020-20%2020z'%20fill%3D'none'%20stroke%3D'%231B1714'%20stroke-width%3D'1.2'%20opacity%3D'.07'%2F%3E%3Crect%20x%3D'18'%20y%3D'18'%20width%3D'4'%20height%3D'4'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%231B1714'%20opacity%3D'.07'%2F%3E%3C%2Fsvg%3E") 0 0 / 40px 40px, radial-gradient(80% 60% at 85% 10%, rgba(30,122,62,.08), transparent 70%), #F6F0E4; }
.sf-root .gr__band { display: block; height: 22px; background: url('/heritage-keffiyeh-band.svg') left center / auto 100% repeat-x; border-bottom: 3px solid #B3122A; }
.sf-root .gr__track { position: relative; height: 240vh; height: 240svh; }
.sf-root .gr__stage { position: sticky; top: var(--gr-nav); height: calc(100vh - var(--gr-nav)); height: calc(100svh - var(--gr-nav)); overflow: hidden; }
.sf-root .gr__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding-top: 14px; padding-bottom: calc(var(--gr-tab) + 14px); }

/* The photo in its embroidered frame. */
.sf-root .gr__frame { position: relative; margin: 0; min-height: 0; padding: 10px; border-radius: 26px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Crect%20width%3D'28'%20height%3D'28'%20fill%3D'%23FBF5EA'%2F%3E%3Cg%20stroke%3D'%23B3122A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M13%204l2%202m-2%200l2-2M10%207l2%202m-2%200l2-2M16%207l2%202m-2%200l2-2M7%2010l2%202m-2%200l2-2M19%2010l2%202m-2%200l2-2M4%2013l2%202m-2%200l2-2M22%2013l2%202m-2%200l2-2M7%2016l2%202m-2%200l2-2M19%2016l2%202m-2%200l2-2M10%2019l2%202m-2%200l2-2M16%2019l2%202m-2%200l2-2M13%2022l2%202m-2%200l2-2'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M13%2013l2%202m-2%200l2-2'%20stroke%3D'%231E7A3E'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") 0 0 / 28px 28px; box-shadow: 0 0 0 1px rgba(179,18,42,.25), 0 30px 60px -30px rgba(80,30,20,.45); }
.sf-root .gr__window { position: relative; display: block; height: 100%; border-radius: 18px; overflow: hidden; background: #3A3430; box-shadow: 0 0 0 3px #FBF5EA, 0 0 0 5px #1B1714; }
.sf-root .gr__img, .sf-root .gr__canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; display: block; }
.sf-root .gr__img--cooked { opacity: var(--gr-p); }
.sf-root .gr__canvas { opacity: 0; transition: opacity .5s ease; }
.sf-root .gr.is-ready .gr__canvas { opacity: 1; }
.sf-root .gr__olive { position: absolute; z-index: 2; right: -10px; top: -18px; width: 92px; height: 92px; background: url('/heritage-olive.svg') center / contain no-repeat; transform: rotate(-12deg); filter: drop-shadow(0 6px 8px rgba(40,60,20,.25)); pointer-events: none; }

/* Smoke for phones without WebGL: soft puffs that drift up, swell and fade.
   Where the canvas runs it draws the fire, sparks and smoke itself. */
.sf-root .gr.is-ready .gr__smoke { display: none; }
.sf-root .gr__smoke { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: calc(.75 + .25 * var(--gr-p)); }
.sf-root .gr__smoke i { position: absolute; height: 0; border-radius: 50%; opacity: 0; transform: translate3d(-50%, 0, 0) scale(.5); background: radial-gradient(closest-side, rgba(248,246,243,.85), rgba(238,235,231,.5) 45%, rgba(235,232,228,0) 100%), radial-gradient(40% 30% at 30% 40%, rgba(255,255,255,.5), transparent 70%), radial-gradient(35% 28% at 70% 65%, rgba(255,255,255,.4), transparent 70%); will-change: transform, opacity; }
.sf-root .gr__smoke i:nth-child(1) { left: 30%; bottom: 8%; width: 60%; padding-bottom: 60%; animation-duration: 7.2s; animation-delay: -0s; }
.sf-root .gr__smoke i:nth-child(2) { left: 44%; bottom: 4%; width: 68%; padding-bottom: 68%; animation-duration: 8.4s; animation-delay: -1.6s; }
.sf-root .gr__smoke i:nth-child(3) { left: 58%; bottom: 10%; width: 57%; padding-bottom: 57%; animation-duration: 6.8s; animation-delay: -3.1s; }
.sf-root .gr__smoke i:nth-child(4) { left: 70%; bottom: 6%; width: 65%; padding-bottom: 65%; animation-duration: 7.8s; animation-delay: -0.8s; }
.sf-root .gr__smoke i:nth-child(5) { left: 38%; bottom: 14%; width: 52%; padding-bottom: 52%; animation-duration: 9.0s; animation-delay: -4.4s; }
.sf-root .gr__smoke i:nth-child(6) { left: 64%; bottom: 16%; width: 73%; padding-bottom: 73%; animation-duration: 8.8s; animation-delay: -2.4s; }
.sf-root .gr__smoke i:nth-child(7) { left: 52%; bottom: 2%; width: 78%; padding-bottom: 78%; animation-duration: 7.4s; animation-delay: -5.6s; }
.sf-root .gr__smoke i:nth-child(8) { left: 78%; bottom: 12%; width: 55%; padding-bottom: 55%; animation-duration: 8.0s; animation-delay: -6.4s; }
.sf-root .gr__smoke i { animation-name: gr-smoke; animation-timing-function: cubic-bezier(.3,.1,.4,1); animation-iteration-count: infinite; }
.sf-root .gr__smoke i:nth-child(even) { animation-name: gr-smoke-r; }
@keyframes gr-smoke {
  0% { opacity: 0; transform: translate3d(-50%, 10%, 0) scale(.45) rotate(0deg); }
  18% { opacity: 1; }
  60% { opacity: .7; transform: translate3d(-30%, -150%, 0) scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: translate3d(-65%, -300%, 0) scale(1.9) rotate(50deg); }
}
@keyframes gr-smoke-r {
  0% { opacity: 0; transform: translate3d(-50%, 10%, 0) scale(.45) rotate(0deg); }
  18% { opacity: .95; }
  60% { opacity: .65; transform: translate3d(-70%, -140%, 0) scale(1.2) rotate(-20deg); }
  100% { opacity: 0; transform: translate3d(-30%, -290%, 0) scale(2) rotate(-45deg); }
}

/* "Scroll to cook": shown until the meat is well on its way. */
.sf-root .gr__hint { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(251,247,239,.92); color: #1B1714; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); pointer-events: none; transition: opacity .4s ease; }
.sf-root .gr__hint i { width: 9px; height: 9px; border-right: 2px solid #B3122A; border-bottom: 2px solid #B3122A; transform: rotate(45deg) translate(-2px, -2px); }
.sf-root .gr[data-cooked] .gr__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sf-root .gr__hint i { animation: gr-nudge 1.4s ease-in-out infinite; }
}
@keyframes gr-nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }

/* The copy. */
.sf-root .gr__copy { min-width: 0; }
.sf-root .gr__eyebrow { color: #1E7A3E; }
.sf-root .gr__flag { position: relative; display: inline-block; flex-shrink: 0; width: 28px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #151515 0 33.34%, #FFFFFF 33.34% 66.67%, #1E7A3E 66.67%); box-shadow: 0 0 0 1px rgba(21,21,21,.2); overflow: hidden; }
.sf-root .gr__flag::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; background: #C8102E; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sf-root .gr h1 { font-family: var(--sf-heading); color: #1B1714; font-weight: 700; margin: 10px 0 0; line-height: 1.04; font-size: min(clamp(32px, 9vw, 92px), var(--sf-fit, 1000px)); overflow-wrap: break-word; text-wrap: balance; }
.sf-root .gr__rule { display: block; width: 168px; height: 14px; margin: 14px 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Crect%20width%3D'28'%20height%3D'28'%20fill%3D'%23FBF5EA'%2F%3E%3Cg%20stroke%3D'%23B3122A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M13%204l2%202m-2%200l2-2M10%207l2%202m-2%200l2-2M16%207l2%202m-2%200l2-2M7%2010l2%202m-2%200l2-2M19%2010l2%202m-2%200l2-2M4%2013l2%202m-2%200l2-2M22%2013l2%202m-2%200l2-2M7%2016l2%202m-2%200l2-2M19%2016l2%202m-2%200l2-2M10%2019l2%202m-2%200l2-2M16%2019l2%202m-2%200l2-2M13%2022l2%202m-2%200l2-2'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M13%2013l2%202m-2%200l2-2'%20stroke%3D'%231E7A3E'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") left center / 14px 14px repeat-x; }
.sf-root .gr .sfx-hero-lead { font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0 0 16px; color: #4A3F37; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-root .gr .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #B3122A; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(179,18,42,.7); }
.sf-root .gr .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #1E7A3E; }

/* Doneness: a caption per stretch of the scroll and a bar from raw to done. */
.sf-root .gr__cook { display: block; margin-top: 16px; max-width: 420px; }
.sf-root .gr__caption { position: relative; display: block; height: 22px; font-family: var(--sf-heading); font-size: 15px; font-weight: 700; color: #B3122A; }
.sf-root .gr__caption > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sf-root .gr__caption > span.is-on { opacity: 1; transform: none; }
.sf-root .gr__meter { position: relative; display: block; height: 8px; margin-top: 8px; border-radius: 99px; background: #E8DCC6; overflow: hidden; }
.sf-root .gr__meter i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: left center; transform: scaleX(max(.04, var(--gr-p))); border-radius: inherit; background: linear-gradient(90deg, #D9536A, #C9822F 55%, #7A3E1A); }
.sf-root .gr__scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6B5E52; }
.sf-root .gr__meta { margin-top: 14px; color: #4A3F37; }
.sf-root .gr__fav { display: none; }
.sf-root .gr .bxm-dish__txt em { color: #B3122A; }

/* Phones: the photo on top, the copy under it, all inside one screen. */
@media (max-width: 899px) {
  .sf-root .gr__track { height: 320vh; height: 320svh; }
  .sf-root .gr__olive { width: 64px; height: 64px; right: -4px; top: -12px; }
  .sf-root .gr__meta { display: none; }
}
@media (max-width: 899px) {
  .sf-root .gr__grid { grid-template-rows: minmax(38svh, 1fr) auto; }
  .sf-root .gr .sfx-actions { flex-wrap: nowrap; gap: 8px; }
  .sf-root .gr .sfx-actions > * { white-space: nowrap; }
  .sf-root .gr__cook { margin-top: 12px; }
}
@media (max-width: 899px) and (max-height: 780px) {
  .sf-root .gr .sfx-hero-lead, .sf-root .gr__eyebrow { display: none; }
  .sf-root .gr h1 { margin-top: 0; font-size: min(clamp(28px, 8vw, 40px), var(--sf-fit, 1000px)); }
  .sf-root .gr__rule { margin: 8px 0 12px; }
}

/* Wide screens: copy on the left, the photo large on the right. */
@media (min-width: 900px) {
  .sf-root .gr__track { height: 260vh; height: 260svh; }
  .sf-root .gr__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 32px; padding-bottom: 32px; }
  .sf-root .gr__frame { grid-column: 2; grid-row: 1; width: 100%; height: auto; max-height: 100%; aspect-ratio: 5 / 4; align-self: center; padding: 14px; border-radius: 34px; }
  .sf-root .gr__window { border-radius: 24px; }
  .sf-root .gr__copy { grid-column: 1; grid-row: 1; }
  .sf-root .gr h1 { font-size: min(clamp(44px, 5.4vw, 92px), var(--sf-fit, 1000px)); }
  .sf-root .gr .sfx-hero-lead { font-size: 18px; -webkit-line-clamp: 4; margin-bottom: 24px; }
  .sf-root .gr__fav { display: flex; margin-top: 20px; max-width: 380px; }
  .sf-root .gr__olive { width: 120px; height: 120px; right: -26px; top: -30px; }
}

/* Reduce Motion: the scroll still cooks the meat, nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .sf-root .gr__caption > span { transition: none; transform: none; }
  .sf-root .gr__canvas { transition: none; }
}

/* ═══ Palestine Store Door: the shop-front hero (.pd) ═══ */
.sf-root .pd { --p: 0; --pd-nav: 64px; --pd-tab: 0px; --pd-d: clamp(0, calc((var(--p) - 0) / 0.3), 1); --pd-l: clamp(0, calc((var(--p) - 0.6) / 0.4), 1); position: relative; isolation: isolate; color: #1B1714; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Cpath%20d%3D'M0%2020L20%200l20%2020-20%2020z'%20fill%3D'none'%20stroke%3D'%231B1714'%20stroke-width%3D'1.2'%20opacity%3D'.07'%2F%3E%3Crect%20x%3D'18'%20y%3D'18'%20width%3D'4'%20height%3D'4'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%231B1714'%20opacity%3D'.07'%2F%3E%3C%2Fsvg%3E") 0 0 / 40px 40px, radial-gradient(80% 60% at 85% 10%, rgba(30,122,62,.08), transparent 70%), #F8F2E7; }
.sf-root .pd__band { display: block; height: 22px; background: url('/heritage-keffiyeh-band.svg') left center / auto 100% repeat-x; border-bottom: 3px solid #1E7A3E; }
.sf-root .pd__track { position: relative; height: 240vh; height: 240svh; }
.sf-root .pd__stage { position: sticky; top: var(--pd-nav); height: calc(100vh - var(--pd-nav)); height: calc(100svh - var(--pd-nav)); overflow: hidden; }
.sf-root .pd__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding-top: 14px; padding-bottom: calc(var(--pd-tab) + 14px); }

/* The shop front in its embroidered frame. */
.sf-root .pd__frame { position: relative; margin: 0; min-height: 0; padding: 10px; border-radius: 26px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Crect%20width%3D'28'%20height%3D'28'%20fill%3D'%23FBF5EA'%2F%3E%3Cg%20stroke%3D'%23B3122A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M13%204l2%202m-2%200l2-2M10%207l2%202m-2%200l2-2M16%207l2%202m-2%200l2-2M7%2010l2%202m-2%200l2-2M19%2010l2%202m-2%200l2-2M4%2013l2%202m-2%200l2-2M22%2013l2%202m-2%200l2-2M7%2016l2%202m-2%200l2-2M19%2016l2%202m-2%200l2-2M10%2019l2%202m-2%200l2-2M16%2019l2%202m-2%200l2-2M13%2022l2%202m-2%200l2-2'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M13%2013l2%202m-2%200l2-2'%20stroke%3D'%231E7A3E'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") 0 0 / 28px 28px; box-shadow: 0 0 0 1px rgba(179,18,42,.25), 0 30px 60px -30px rgba(80,30,20,.45); }
.sf-root .pd__window { position: relative; display: block; height: 100%; border-radius: 18px; overflow: hidden; background: #F6E2C2; box-shadow: 0 0 0 3px #FBF5EA, 0 0 0 5px #1E7A3E; }
.sf-root .pd__svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.sf-root .pd__name { font-family: var(--sf-heading); font-weight: 700; }

/* The camera walks up to the door over the last stretch of the scroll. */
.sf-root .pd__cam { transform-origin: 600px 560px; transform: scale(calc(1 + var(--pd-l) * .25)); }

/* The door swings open on its hinges over the first stretch. */
.sf-root .pd__leaf { transform-box: fill-box; }
.sf-root .pd__leaf--l { transform-origin: left center; transform: scaleX(calc(1 - .85 * var(--pd-d))) skewY(calc(var(--pd-d) * -5deg)); }
.sf-root .pd__leaf--r { transform-origin: right center; transform: scaleX(calc(1 - .85 * var(--pd-d))) skewY(calc(var(--pd-d) * 5deg)); }
.sf-root .pd__shade { opacity: calc(var(--pd-d) * .4); }

/* Warm light spills onto the street as it opens; the lanterns brighten. */
.sf-root .pd__spill { opacity: var(--pd-d); }
.sf-root .pd__flame { opacity: calc(.45 + .55 * var(--pd-d)); }
.sf-root .pd__lamp { opacity: var(--pd-d); }
.sf-root .pd__dust circle { opacity: calc(var(--pd-d) * .85); transform: translateY(calc(var(--p) * -90px)); }
.sf-root .pd__cloud { transform: translateX(calc(var(--p) * 70px)); }
.sf-root .pd__cloud--2 { transform: translateX(calc(var(--p) * -50px)); }
.sf-root .pd__steam { opacity: .75; }

/* The dishes come out of the door to the doorstep, then rise with their names and prices. */

.sf-root .pd__dish--0 { --o: clamp(0, calc((var(--p) - 0.22) / 0.2), 1); opacity: var(--o); transform: translate(calc((1 - var(--o)) * 0px), calc((1 - var(--o)) * -68px)) scale(calc(.15 + .85 * var(--o))); }
.sf-root .pd__lift--0 { transform: translate(calc(var(--pd-l) * 0px), calc(var(--pd-l) * -190px)); }
.sf-root .pd__dish--1 { --o: clamp(0, calc((var(--p) - 0.26) / 0.2), 1); opacity: var(--o); transform: translate(calc((1 - var(--o)) * 112px), calc((1 - var(--o)) * -90px)) scale(calc(.15 + .85 * var(--o))); }
.sf-root .pd__lift--1 { transform: translate(calc(var(--pd-l) * -70px), calc(var(--pd-l) * -150px)); }
.sf-root .pd__dish--2 { --o: clamp(0, calc((var(--p) - 0.3) / 0.2), 1); opacity: var(--o); transform: translate(calc((1 - var(--o)) * -112px), calc((1 - var(--o)) * -90px)) scale(calc(.15 + .85 * var(--o))); }
.sf-root .pd__lift--2 { transform: translate(calc(var(--pd-l) * 70px), calc(var(--pd-l) * -150px)); }
.sf-root .pd__dish--3 { --o: clamp(0, calc((var(--p) - 0.34) / 0.2), 1); opacity: var(--o); transform: translate(calc((1 - var(--o)) * 208px), calc((1 - var(--o)) * -124px)) scale(calc(.15 + .85 * var(--o))); }
.sf-root .pd__lift--3 { transform: translate(calc(var(--pd-l) * -30px), calc(var(--pd-l) * -30px)); }
.sf-root .pd__dish--4 { --o: clamp(0, calc((var(--p) - 0.38) / 0.2), 1); opacity: var(--o); transform: translate(calc((1 - var(--o)) * -208px), calc((1 - var(--o)) * -124px)) scale(calc(.15 + .85 * var(--o))); }
.sf-root .pd__lift--4 { transform: translate(calc(var(--pd-l) * 30px), calc(var(--pd-l) * -30px)); }
.sf-root .pd__tag { opacity: calc(var(--pd-l) * 2); }

/* "Scroll to open the door": shown until the visitor starts scrolling. */
.sf-root .pd__hint { position: absolute; z-index: 3; left: 50%; top: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(251,247,239,.94); color: #1B1714; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); pointer-events: none; transition: opacity .4s ease; }
.sf-root .pd__hint i { width: 9px; height: 9px; border-right: 2px solid #1E7A3E; border-bottom: 2px solid #1E7A3E; transform: rotate(45deg) translate(-2px, -2px); }
.sf-root .pd[data-inside] .pd__hint { opacity: 0; }

/* The copy. */
.sf-root .pd__copy { min-width: 0; }
.sf-root .pd__eyebrow { color: #1E7A3E; }
.sf-root .pd__flag { position: relative; display: inline-block; flex-shrink: 0; width: 28px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #151515 0 33.34%, #FFFFFF 33.34% 66.67%, #1E7A3E 66.67%); box-shadow: 0 0 0 1px rgba(21,21,21,.2); overflow: hidden; }
.sf-root .pd__flag::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; background: #C8102E; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sf-root .pd h1 { font-family: var(--sf-heading); color: #1B1714; font-weight: 700; margin: 10px 0 0; line-height: 1.04; font-size: min(clamp(32px, 9vw, 92px), var(--sf-fit, 1000px)); overflow-wrap: break-word; text-wrap: balance; }
.sf-root .pd__rule { display: block; width: 168px; height: 14px; margin: 14px 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Crect%20width%3D'28'%20height%3D'28'%20fill%3D'%23FBF5EA'%2F%3E%3Cg%20stroke%3D'%23B3122A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M13%204l2%202m-2%200l2-2M10%207l2%202m-2%200l2-2M16%207l2%202m-2%200l2-2M7%2010l2%202m-2%200l2-2M19%2010l2%202m-2%200l2-2M4%2013l2%202m-2%200l2-2M22%2013l2%202m-2%200l2-2M7%2016l2%202m-2%200l2-2M19%2016l2%202m-2%200l2-2M10%2019l2%202m-2%200l2-2M16%2019l2%202m-2%200l2-2M13%2022l2%202m-2%200l2-2'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M13%2013l2%202m-2%200l2-2'%20stroke%3D'%231E7A3E'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") left center / 14px 14px repeat-x; }
.sf-root .pd .sfx-hero-lead { font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0 0 16px; color: #4A3F37; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-root .pd .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #1E7A3E; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(30,122,62,.7); }
.sf-root .pd .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #B3122A; }
.sf-root .pd__caption { position: relative; display: block; height: 22px; margin-top: 14px; font-family: var(--sf-heading); font-size: 15px; font-weight: 700; color: #B3122A; }
.sf-root .pd__caption > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sf-root .pd__caption > span.is-on { opacity: 1; transform: none; }
.sf-root .pd__meta { margin-top: 12px; color: #4A3F37; }
.sf-root .pd__fav { display: none; }
.sf-root .pd .bxm-dish__txt em { color: #B3122A; }

/* Phones: the shop front on top, the copy under it, all inside one screen. */
@media (max-width: 899px) {
  .sf-root .pd__grid { grid-template-rows: minmax(38svh, 1fr) auto; }
  .sf-root .pd .sfx-actions { flex-wrap: nowrap; gap: 8px; }
  .sf-root .pd .sfx-actions > * { white-space: nowrap; }
  .sf-root .pd__meta { display: none; }
}
@media (max-width: 899px) and (max-height: 780px) {
  .sf-root .pd .sfx-hero-lead, .sf-root .pd__eyebrow { display: none; }
  .sf-root .pd h1 { margin-top: 0; font-size: min(clamp(28px, 8vw, 40px), var(--sf-fit, 1000px)); }
  .sf-root .pd__rule { margin: 8px 0 12px; }
  .sf-root .pd__caption { margin-top: 10px; }
}

/* Wide screens: copy on the left, the shop front large on the right. */
@media (min-width: 900px) {
  .sf-root .pd__track { height: 240vh; height: 240svh; }
  .sf-root .pd__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 32px; padding-bottom: 32px; }
  .sf-root .pd__frame { grid-column: 2; grid-row: 1; width: 100%; height: auto; max-height: 100%; aspect-ratio: 5 / 4; align-self: center; padding: 14px; border-radius: 34px; }
  .sf-root .pd__window { border-radius: 24px; }
  .sf-root .pd__copy { grid-column: 1; grid-row: 1; }
  .sf-root .pd h1 { font-size: min(clamp(44px, 5.4vw, 92px), var(--sf-fit, 1000px)); }
  .sf-root .pd .sfx-hero-lead { font-size: 18px; -webkit-line-clamp: 4; margin-bottom: 24px; }
  .sf-root .pd__fav { display: flex; margin-top: 20px; max-width: 380px; }
}

/* Reduce Motion: no camera zoom; the scroll still opens the door. */
@media (prefers-reduced-motion: reduce) {
  .sf-root .pd__cam { transform: none; }
  .sf-root .pd__caption > span { transition: none; transform: none; }
}

/* ═══ The shawarma heroes (.shw) ══════════════════════════════════════════ */
.sf-root .shw { position: relative; overflow: hidden; isolation: isolate; }
.sf-root .shw__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(36px, 6vw, 80px); }
.sf-root .shw__copy { position: relative; z-index: 2; min-width: 0; }
.sf-root .shw h1 { font-family: var(--sf-heading); margin: 12px 0 0; line-height: 1; font-size: min(clamp(44px, 11vw, 112px), var(--sf-fit, 1000px)); overflow-wrap: break-word; text-wrap: balance; }
.sf-root .shw__rule { display: block; width: 165px; height: 22px; margin: 16px 0; }
.sf-root .shw .sfx-hero-lead { font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 0 0 22px; }
.sf-root .shw__meta { margin-top: 18px; }
.sf-root .shw__art { position: relative; z-index: 1; min-width: 0; }
.sf-root .shw__mark { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; }

/* ── The menu board: Wrap Street's real dishes and Catch of the Day's catch ── */
.sf-root .shw-board { position: relative; z-index: 1; margin: 0 0 0 auto; max-width: 480px; padding: 20px 20px 22px; border-radius: 18px; background: #1F1712; color: #FFF3D6; border: 6px solid #3A2A20; box-shadow: 0 0 0 2px #C62828, 0 30px 50px -24px rgba(42,26,18,.6); }
.sf-root .shw-board__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--sf-heading); font-size: 22px; font-weight: 800; color: #FFC93C; letter-spacing: .02em; }
.sf-root .shw-board__head i { flex: 1; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #FFC93C 0 10px, transparent 10px 16px); opacity: .6; }
.sf-root .shw-board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sf-root .shw-board li { display: flex; align-items: center; gap: 10px; }
.sf-root .shw-board__row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; color: inherit !important; text-decoration: none; }
.sf-root .shw-board__row:hover { background: rgba(255,201,60,.1); }
.sf-root .shw-board__pic { flex-shrink: 0; display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #3A2A20; box-shadow: 0 0 0 2px #FFC93C; }
.sf-root .shw-board__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-root .shw-board__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; }
.sf-root .shw-board__dots { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(255,243,214,.35); transform: translateY(4px); }
.sf-root .shw-board__price { flex-shrink: 0; font-weight: 800; color: #FFC93C; font-size: 16px; }
.sf-root .shw-board__add { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #C62828; color: #fff; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.sf-root .shw-board__add:hover { background: #FFC93C; color: #2A1A12; }
.sf-root .shw-board__photo { display: block; aspect-ratio: 4 / 3; border-radius: 12px; }

@media (max-width: 899px) {
  .sf-root .shw-board { margin: 0 auto; }
  /* The badge seal sits in the top-right corner: the eyebrow wraps clear of it. */
  .sf-root .sf-hero-badged .shw__eyebrow { max-width: calc(100% - 112px); }
}
@media (min-width: 900px) {
  .sf-root .shw__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .sf-root .shw h1 { font-size: min(clamp(56px, 6.4vw, 112px), var(--sf-fit, 1000px)); }
  .sf-root .shw .sfx-hero-lead { font-size: 18px; }
}

/* ═══ The designs on every page ═════════════════════════════════════════ */

.sf-root[data-template="template62-shawarma-spit"] .sf-nav { background: #17110E; border-bottom: 3px solid #E25822; }
.sf-root[data-template="template62-shawarma-spit"] .sf-nav, .sf-root[data-template="template62-shawarma-spit"] .sf-nav a, .sf-root[data-template="template62-shawarma-spit"] .sf-nav button { color: #EFE3D6; }
.sf-root[data-template="template62-shawarma-spit"] .sf-burger span { background: #EFE3D6; }
.sf-root[data-template="template62-shawarma-spit"] .sf-signin { background: #E25822; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template62-shawarma-spit"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F2B134 !important; }
.sf-root[data-template="template62-shawarma-spit"] .sf-nav-links a.active { color: #F2B134; }
.sf-root[data-template="template62-shawarma-spit"] .sf-section-title, .sf-root[data-template="template62-shawarma-spit"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #17110E; }
.sf-root[data-template="template62-shawarma-spit"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(90deg, #E25822, #F2B134) left center / 100% 4px no-repeat; }
.sf-root[data-template="template62-shawarma-spit"] .sf-section.alt { background: #F1E6DA; }
.sf-root[data-template="template62-shawarma-spit"] .sf-card, .sf-root[data-template="template62-shawarma-spit"] .sf-menu-item { border-radius: 10px; border: 1px solid #E6D6C6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template62-shawarma-spit"] .sf-card:hover { border-color: #E25822; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template62-shawarma-spit"] .sf-price { color: #C2410C; font-weight: 800; }
.sf-root[data-template="template62-shawarma-spit"] :where(.sf-btn:not(.sf-btn-outline)) { background: #E25822; }
.sf-root[data-template="template62-shawarma-spit"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #17110E; }
.sf-root[data-template="template62-shawarma-spit"] .sf-cat.active { background: #17110E; }
.sf-root[data-template="template62-shawarma-spit"] .sfx-ticker { background: #E25822; color: #17110E; font-family: var(--sf-heading); }
.sf-root[data-template="template62-shawarma-spit"] .sf-footer { background: #17110E; border-top: 0; position: relative; padding-top: 45px; }
.sf-root[data-template="template62-shawarma-spit"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #E25822, #F2B134, #E25822); }
.sf-root[data-template="template62-shawarma-spit"] .sf-page-header { background: radial-gradient(60% 70% at 50% 40%, rgba(14,7,5,.9), rgba(14,7,5,.5) 60%, rgba(14,7,5,.15)), url('/heritage-shawarma-spit.svg') 74% 60% / cover no-repeat, #0E0705; padding-bottom: calc(clamp(40px, 6vw, 72px) + 5px); }
.sf-root[data-template="template62-shawarma-spit"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #E25822, #F2B134, #E25822); }
.sf-root[data-template="template62-shawarma-spit"] .sfx-con-head::after, .sf-root[data-template="template62-shawarma-spit"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(90deg, #E25822, #F2B134) left center / 100% 4px no-repeat; }
.sf-root[data-template="template62-shawarma-spit"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template63-shawarma-wrap"] .sf-nav { background: #FFFFFF; border-bottom: 4px solid #C62828; }

.sf-root[data-template="template63-shawarma-wrap"] .sf-signin { background: #C62828; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #C62828 !important; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-nav-links a.active { color: #C62828; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-section-title, .sf-root[data-template="template63-shawarma-wrap"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #2A1A12; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'14'%20viewBox%3D'0%200%2028%2014'%3E%3Crect%20width%3D'28'%20height%3D'14'%20fill%3D'%23FFFFFF'%2F%3E%3Cpath%20d%3D'M-7%2014L7%200h7L0%2014zM7%2014L21%200h7L14%2014z'%20fill%3D'%23C62828'%2F%3E%3C%2Fsvg%3E") left center / 24px 12px repeat-x; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-section.alt { background: #FFF0CF; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-card, .sf-root[data-template="template63-shawarma-wrap"] .sf-menu-item { border-radius: 16px; border: 1px solid #F0DDB8; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template63-shawarma-wrap"] .sf-card:hover { border-color: #C62828; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template63-shawarma-wrap"] .sf-price { color: #C62828; font-weight: 800; }
.sf-root[data-template="template63-shawarma-wrap"] :where(.sf-btn:not(.sf-btn-outline)) { background: #C62828; }
.sf-root[data-template="template63-shawarma-wrap"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #2A1A12; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-cat.active { background: #C62828; }
.sf-root[data-template="template63-shawarma-wrap"] .sfx-ticker { background: #FFC93C; color: #2A1A12; font-family: var(--sf-heading); }
.sf-root[data-template="template63-shawarma-wrap"] .sf-footer { background: #2A1A12; border-top: 0; position: relative; padding-top: 80px; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'40'%20viewBox%3D'0%200%2048%2040'%3E%3Crect%20width%3D'48'%20height%3D'28'%20fill%3D'%23FFFFFF'%2F%3E%3Crect%20width%3D'24'%20height%3D'28'%20fill%3D'%23C62828'%2F%3E%3Cpath%20d%3D'M0%2028a12%2012%200%200%200%2024%200z'%20fill%3D'%23C62828'%2F%3E%3Cpath%20d%3D'M24%2028a12%2012%200%200%200%2024%200z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E") left top / 48px 40px repeat-x; }
.sf-root[data-template="template63-shawarma-wrap"] .sf-page-header { background: radial-gradient(60% 70% at 50% 40%, rgba(42,52,102,.9), rgba(42,52,102,.5) 60%, rgba(42,52,102,.15)), url('/heritage-shawarma-street.svg') 72% 70% / cover no-repeat, #2A3466; padding-bottom: calc(clamp(40px, 6vw, 72px) + 40px); }
.sf-root[data-template="template63-shawarma-wrap"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'40'%20viewBox%3D'0%200%2048%2040'%3E%3Crect%20width%3D'48'%20height%3D'28'%20fill%3D'%23FFFFFF'%2F%3E%3Crect%20width%3D'24'%20height%3D'28'%20fill%3D'%23C62828'%2F%3E%3Cpath%20d%3D'M0%2028a12%2012%200%200%200%2024%200z'%20fill%3D'%23C62828'%2F%3E%3Cpath%20d%3D'M24%2028a12%2012%200%200%200%2024%200z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E") left top / 48px 40px repeat-x; }
.sf-root[data-template="template63-shawarma-wrap"] .sfx-con-head::after, .sf-root[data-template="template63-shawarma-wrap"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'14'%20viewBox%3D'0%200%2028%2014'%3E%3Crect%20width%3D'28'%20height%3D'14'%20fill%3D'%23FFFFFF'%2F%3E%3Cpath%20d%3D'M-7%2014L7%200h7L0%2014zM7%2014L21%200h7L14%2014z'%20fill%3D'%23C62828'%2F%3E%3C%2Fsvg%3E") left center / 24px 12px repeat-x; }
.sf-root[data-template="template63-shawarma-wrap"] .sfx-ed-head::after { margin-left: 0; }

.sf-root[data-template="template62-shawarma-spit"] .sf-page-header, .sf-root[data-template="template63-shawarma-wrap"] .sf-page-header { padding-bottom: clamp(56px, 8vw, 120px); }
.sf-root[data-template="template62-shawarma-spit"] .sf-page-header h1 { text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
/* The rating line sits under the taller pattern underline, not across it. */
.sf-root[data-template="template62-shawarma-spit"] .sfx-rating, .sf-root[data-template="template63-shawarma-wrap"] .sfx-rating { margin-top: 0; }

/* ═══ Yemen, Egypt, Palestine: one full scene behind the copy (.nx) ═══════ */
.sf-root .nx { --nx-hem-h: 22px; --nx-ph: min(84vw, 340px); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  min-height: clamp(600px, 82vh, 860px); color: var(--nx-text); background: var(--nx-sky); }
.sf-root .nx__scene { position: absolute; z-index: -2; left: 0; right: 0; top: 0; bottom: var(--nx-hem-h); background: var(--nx-scene) var(--nx-x, 72%) 100% / cover no-repeat; pointer-events: none; }
.sf-root .nx__veil { position: absolute; z-index: -1; inset: 0; background: var(--nx-veil); pointer-events: none; }
.sf-root .nx__grid { flex: 1; display: flex; align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.sf-root .nx__copy { width: 100%; max-width: 560px; }
.sf-root .nx__eyebrow { color: var(--nx-eyebrow); }
.sf-root .nx__flag { position: relative; display: inline-block; flex-shrink: 0; width: 24px; height: 16px; border-radius: 2px; overflow: hidden; background: var(--nx-flag); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.sf-root .nx h1 { font-family: var(--sf-heading); color: var(--nx-ink); font-weight: var(--nx-h1-weight, 600); margin: 16px 0 0; line-height: 1.03; letter-spacing: -.01em;
  font-size: min(clamp(46px, 6vw, 92px), var(--sf-fit, 1000px)); word-break: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.sf-root .nx__orn { display: flex; align-items: center; gap: 12px; width: 168px; margin: 22px 0; }
.sf-root .nx__orn::before, .sf-root .nx__orn::after { content: ''; flex: 1; height: 1.5px; background: var(--nx-orn); }
.sf-root .nx__orn i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--nx-orn); box-shadow: 0 0 0 3px var(--nx-sky-solid, transparent), 0 0 0 4.5px var(--nx-orn); }
.sf-root .nx .sfx-hero-lead { font-size: 18px; line-height: 1.7; max-width: 42ch; margin-bottom: 28px; color: var(--nx-text); }
.sf-root .nx__meta { margin-top: 18px; color: var(--nx-text); }
.sf-root .nx .sfx-actions .sf-btn:not(.sf-btn-outline) { background: var(--nx-btn); color: var(--nx-btn-text) !important; box-shadow: 0 14px 30px -16px var(--nx-btn); }
.sf-root .nx .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: var(--nx-btn-hover); }
.sf-root .nx__fav { margin-top: 28px; max-width: 420px; color: var(--nx-ink); background: var(--nx-card); border: 1px solid var(--nx-card-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 24px 48px -28px rgba(0,0,0,.55); }
.sf-root .nx__fav .bxm-dish__img { width: 72px; height: 72px; }
.sf-root .nx .bxm-dish__txt small { color: var(--nx-eyebrow); }
.sf-root .nx .bxm-dish__txt em { color: var(--nx-price); }
.sf-root .nx .bxm-dish__add { color: var(--nx-btn); border-color: color-mix(in srgb, var(--nx-btn) 40%, transparent); }
.sf-root .nx .bxm-dish__add:hover { background: var(--nx-btn); color: var(--nx-btn-text); }
.sf-root .nx__hem { position: relative; z-index: 1; display: block; height: var(--nx-hem-h); background: var(--nx-hem); }
@media (max-width: 760px) {
  /* The phone: the whole scene first, as a picture across the top that melts into its own sky, then the copy. */
  .sf-root .nx { display: block; min-height: 0; }
  .sf-root .nx__veil { display: none; }
  .sf-root .nx__scene { bottom: auto; height: var(--nx-ph); background-position: var(--nx-px, 72%) 100%; background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .sf-root .nx__grid { display: block; padding-top: calc(var(--nx-ph) - 28px); padding-bottom: 36px; }
  .sf-root .nx__eyebrow { font-size: 11px; letter-spacing: .14em; }
  .sf-root .nx h1 { margin-top: 12px; }
  .sf-root .nx .sfx-hero-lead { font-size: 16.5px; margin-bottom: 22px; }
  .sf-root .nx__orn { margin: 18px 0; }
  .sf-root .nx__fav { margin-top: 22px; max-width: none; }
}

/* Yemen, Haraz: golden hour, ochre and umber, the flag's red, silver filigree */
.sf-root .nx--haraz { --nx-scene: url('/heritage-haraz-vista.svg'); --nx-sky: #3E3A6A; --nx-sky-solid: #45406E; --nx-x: 80%; --nx-px: 82%;
  --nx-veil: linear-gradient(90deg, rgba(44,34,70,.9) 0%, rgba(44,34,70,.72) 30%, rgba(44,34,70,.22) 50%, rgba(44,34,70,0) 62%);
  --nx-ink: #FFF3E2; --nx-text: #EADBD6; --nx-eyebrow: #F6C27A; --nx-orn: #F6C27A; --nx-btn: #C8202F; --nx-btn-text: #FFFFFF; --nx-btn-hover: #E23A44; --nx-price: #F6C27A;
  --nx-card: rgba(44,30,52,.8); --nx-card-line: rgba(246,194,122,.32);
  --nx-flag: linear-gradient(180deg, #CE1126 0 33.3%, #FFFFFF 33.3% 66.6%, #151515 66.6%);
  --nx-hem: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x, #2A160C; }
.sf-root .nx--haraz .bxm-dish__txt strong { color: #FFF3E2; }
/* Egypt, Cairo Nights: Ramadan indigo and lantern gold, khayamiya at the hem */
.sf-root .nx--cairo { --nx-scene: url('/heritage-cairo-ramadan.svg'); --nx-sky: #050A1F; --nx-sky-solid: #0A1430; --nx-x: 70%; --nx-px: 68%; --nx-hem-h: 26px;
  --nx-veil: linear-gradient(90deg, rgba(5,10,31,.92) 0%, rgba(5,10,31,.8) 30%, rgba(5,10,31,.3) 50%, rgba(5,10,31,0) 64%);
  --nx-ink: #FFF3D6; --nx-text: #D4D9EA; --nx-eyebrow: #E8B85A; --nx-orn: #E8B85A; --nx-btn: #E8B85A; --nx-btn-text: #0A1430; --nx-btn-hover: #FFD98A; --nx-price: #E8B85A;
  --nx-card: rgba(14,24,58,.78); --nx-card-line: rgba(232,184,90,.35);
  --nx-flag: radial-gradient(circle at 50% 50%, #C8A23A 0 2.6px, transparent 3px), linear-gradient(180deg, #CE1126 0 33.3%, #FFFFFF 33.3% 66.6%, #151515 66.6%);
  --nx-hem: url('/heritage-khayamiya-band.svg') left center / auto 100% repeat-x, #F3E6C8; }
.sf-root .nx--cairo .bxm-dish__txt strong { color: #FFF3D6; }
/* Palestine, Olive Harvest: warm stone and olive, tatreez red */
.sf-root .nx--olive { --nx-scene: url('/heritage-olive-terraces.svg'); --nx-sky: #EFD9AE; --nx-sky-solid: #F8EBD0; --nx-x: 66%; --nx-px: 62%; --nx-hem-h: 30px; --nx-h1-weight: 700;
  --nx-veil: linear-gradient(90deg, rgba(250,240,220,.95) 0%, rgba(250,240,220,.86) 30%, rgba(250,240,220,.35) 48%, rgba(250,240,220,0) 62%);
  --nx-ink: #1B1714; --nx-text: #4A3F37; --nx-eyebrow: #1E6B3A; --nx-orn: #B5121B; --nx-btn: #1E6B3A; --nx-btn-text: #FFFFFF; --nx-btn-hover: #B5121B; --nx-price: #B5121B;
  --nx-card: rgba(255,251,242,.86); --nx-card-line: rgba(30,107,58,.2);
  --nx-flag: linear-gradient(180deg, #151515 0 33.3%, #FFFFFF 33.3% 66.6%, #149954 66.6%);
  --nx-hem: url('/heritage-tatreez-hem.svg') left center / auto 100% repeat-x, #F7EEDC; }
.sf-root .nx--olive .nx__flag::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; background: #E4312B; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Shawarma Spit: night at the counter, ember and steel */
.sf-root .nx--spit { --nx-scene: url('/heritage-shawarma-spit.svg'); --nx-sky: #0E0705; --nx-sky-solid: #1A0D08; --nx-x: 74%; --nx-px: 74%; --nx-hem-h: 6px;
  --nx-veil: linear-gradient(90deg, rgba(14,7,5,.94) 0%, rgba(14,7,5,.82) 30%, rgba(14,7,5,.3) 50%, rgba(14,7,5,0) 64%);
  --nx-ink: #FFFFFF; --nx-text: #D9C8B8; --nx-eyebrow: #F2B134; --nx-orn: #E25822; --nx-btn: #E25822; --nx-btn-text: #FFFFFF; --nx-btn-hover: #F2B134; --nx-price: #F2B134;
  --nx-card: rgba(30,18,12,.8); --nx-card-line: rgba(242,177,52,.3); --nx-h1-weight: 400;
  --nx-flag: radial-gradient(circle at 50% 60%, #FFD27A 0 3px, #F2742A 4px 6px, #9A2A0A 7px);
  --nx-hem: linear-gradient(90deg, #E25822, #F2B134, #E25822); }
.sf-root .nx--spit h1 { text-transform: uppercase; letter-spacing: .02em; }
.sf-root .nx--spit .nx__flag { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 12px rgba(242,116,42,.8); }
.sf-root .nx--spit .bxm-dish__txt strong { color: #FFFFFF; }
/* Wrap Street: dusk on the corner, the striped awning, the board of real dishes */
.sf-root .nx--street { --nx-scene: url('/heritage-shawarma-street.svg'); --nx-sky: #2A3466; --nx-sky-solid: #333C70; --nx-x: 72%; --nx-px: 70%; --nx-hem-h: 14px;
  --nx-veil: linear-gradient(90deg, rgba(36,42,86,.94) 0%, rgba(36,42,86,.8) 30%, rgba(36,42,86,.3) 50%, rgba(36,42,86,0) 64%);
  --nx-ink: #FFF6E6; --nx-text: #E2DAEC; --nx-eyebrow: #F6D27A; --nx-orn: #F6D27A; --nx-btn: #C8202F; --nx-btn-text: #FFFFFF; --nx-btn-hover: #E23A44; --nx-price: #F6D27A;
  --nx-card: rgba(26,30,60,.82); --nx-card-line: rgba(246,210,122,.3); --nx-h1-weight: 800;
  --nx-flag: repeating-linear-gradient(90deg, #C8202F 0 4px, #FBF3E4 4px 8px);
  --nx-hem: repeating-linear-gradient(90deg, #C8202F 0 34px, #FBF3E4 34px 68px); }
.sf-root .nx--street .nx__flag { width: 22px; height: 14px; }
.sf-root .nx__board { margin: 26px 0 0; max-width: 460px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(22,28,40,.86); }
@media (max-width: 760px) { .sf-root .nx__board { max-width: none; } }

/* ── Harbor (seafood): the pier, the boats and the lighthouse ── */
.sf-root .hx--harbor { --hx-scene: url('/heritage-harbor.svg'); --hx-ground: #1F4E79; --hx-ground-k: 0.004;
  --hx-ink: #0E2A47; --hx-text: #2E4A63; --hx-eyebrow: #D7263D; --hx-btn: #1F4E79; --hx-btn-text: #fff; --hx-btn-hover: #D7263D; --hx-price: #D7263D;
  --hx-mark: url('/heritage-lifering.svg'); --hx-rule: url('/heritage-rope-band.svg') left center / 32px 100% repeat-x;
  background: linear-gradient(180deg, #E8F5FC 0%, #CBE7F6 55%, #BFE3F5 100%); }
.sf-root .hx--harbor .hx__band { height: 20px; background: url('/heritage-rope-band.svg') left center / 32px 100% repeat-x; }
.sf-root .hx--harbor .hx__rule { height: 12px; width: 160px; }
.sf-root .hx-porthole { position: relative; z-index: 2; width: min(72%, 290px); aspect-ratio: 1; margin-left: auto; margin-right: 8%; padding: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F2D289, #B8862E 70%); box-shadow: 0 0 0 6px #8C6420, 0 30px 60px -24px rgba(14,42,71,.55); }
.sf-root .hx-porthole::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #6E4C18 0 4px, transparent 4.5px) 50% 0 / 9px 9px no-repeat, radial-gradient(circle, #6E4C18 0 4px, transparent 4.5px) 50% 100% / 9px 9px no-repeat,
    radial-gradient(circle, #6E4C18 0 4px, transparent 4.5px) 0 50% / 9px 9px no-repeat, radial-gradient(circle, #6E4C18 0 4px, transparent 4.5px) 100% 50% / 9px 9px no-repeat; }
.sf-root .hx-porthole__in { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 4px #0E2A47; }
.sf-root .hx-porthole__in .hx__photo { border-radius: 50%; }
.sf-root .hx__emblem--ring { z-index: 3; left: -6%; bottom: 10%; width: 32%; filter: drop-shadow(0 12px 14px rgba(14,42,71,.35)); }

@media (max-width: 899px) {
  .sf-root .hx-porthole { margin-right: 4%; }
}
@media (max-width: 420px) {
  .sf-root .hx__emblem--ring { left: -2%; width: 28%; }
}

/* ── Catch of the Day (seafood): the board of today's catch over ice ── */
.sf-root .shw--catch { color: #0B2E3A; background: radial-gradient(50% 60% at 80% 60%, rgba(14,138,154,.18), transparent 70%), linear-gradient(180deg, #F2FAFB, #E1F2F4); }
.sf-root .shw--catch .shw__awning { display: block; height: 20px; background: url('/heritage-waves-band.svg') left center / 40px 100% repeat-x; border-bottom: 3px solid #0E8A9A; }
.sf-root .shw--catch h1 { color: #0B2E3A; font-weight: 400; letter-spacing: -.01em; }
.sf-root .shw--catch .shw__eyebrow { color: #E2553F; }
.sf-root .shw--catch .shw__mark { border-radius: 50%; background: #F7D046; box-shadow: inset 0 0 0 4px #E2553F; }
.sf-root .shw--catch .shw__rule { height: 14px; background: url('/heritage-waves-band.svg') left center / 28px 14px repeat-x; }
.sf-root .shw--catch .sfx-hero-lead, .sf-root .shw--catch .shw__meta { color: #2F5562; }
.sf-root .shw--catch .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #0E8A9A; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(14,138,154,.8); }
.sf-root .shw--catch .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #E2553F; }
.sf-root .shw--catch .shw-board { background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%), #12313B; border-color: #1D4652; box-shadow: 0 0 0 2px #0E8A9A, 0 30px 50px -24px rgba(11,46,58,.6); }
.sf-root .shw--catch .shw-board__head { color: #F7D046; }
.sf-root .shw--catch .shw-board__head i { background: repeating-linear-gradient(90deg, #8FD3DC 0 10px, transparent 10px 16px); }
.sf-root .shw--catch .shw-board__pic { box-shadow: 0 0 0 2px #8FD3DC; background: #1D4652; }
.sf-root .shw--catch .shw-board__price { color: #F7D046; }
.sf-root .shw--catch .shw-board__add { background: #E2553F; }
.sf-root .shw--catch .shw-board__add:hover { background: #F7D046; color: #0B2E3A; }
.sf-root .shw--catch .shw-board__row:hover { background: rgba(143,211,220,.12); }
.sf-root .shw-fish { position: absolute; z-index: 2; left: -30px; bottom: -40px; width: 190px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 16px 16px rgba(11,46,58,.3)); }
@media (max-width: 899px) { .sf-root .shw-fish { left: auto; right: -10px; bottom: -46px; width: 140px; } }

/* ═══ On every page ═════════════════════════════════════════════════════ */

.sf-root[data-template="template64-haraz"] .sf-nav { background: #3B1F12; border-bottom: 4px solid #CE1126; }
.sf-root[data-template="template64-haraz"] .sf-nav, .sf-root[data-template="template64-haraz"] .sf-nav a, .sf-root[data-template="template64-haraz"] .sf-nav button { color: #F4EBDD; }
.sf-root[data-template="template64-haraz"] .sf-burger span { background: #F4EBDD; }
.sf-root[data-template="template64-haraz"] .sf-signin { background: #E8B85A; color: #3B1F12 !important; box-shadow: none; }
.sf-root[data-template="template64-haraz"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #E8B85A !important; }
.sf-root[data-template="template64-haraz"] .sf-nav-links a.active { color: #E8B85A; }
.sf-root[data-template="template64-haraz"] .sf-section-title, .sf-root[data-template="template64-haraz"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #3B1F12; }
.sf-root[data-template="template64-haraz"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template64-haraz"] .sf-section.alt { background: #F3E6D6; }
.sf-root[data-template="template64-haraz"] .sf-card, .sf-root[data-template="template64-haraz"] .sf-menu-item { border-radius: 8px; border: 1px solid #E8D7C2; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template64-haraz"] .sf-card:hover { border-color: #B0182A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template64-haraz"] .sf-price { color: #B0182A; font-weight: 800; }
.sf-root[data-template="template64-haraz"] :where(.sf-btn:not(.sf-btn-outline)) { background: #3B1F12; }
.sf-root[data-template="template64-haraz"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #B0182A; }
.sf-root[data-template="template64-haraz"] .sf-cat.active { background: #3B1F12; }
.sf-root[data-template="template64-haraz"] .sfx-ticker { background: #B0182A; color: #FFFFFF; font-family: var(--sf-heading); }
.sf-root[data-template="template64-haraz"] .sf-footer { background: #2A160C; border-top: 0; position: relative; padding-top: 62px; }
.sf-root[data-template="template64-haraz"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x, #2A160C; }
.sf-root[data-template="template64-haraz"] .sf-page-header { background: radial-gradient(60% 70% at 50% 40%, rgba(44,34,70,.9), rgba(44,34,70,.5) 60%, rgba(44,34,70,.15)), url('/heritage-haraz-vista.svg') 80% 46% / cover no-repeat, #3E3A6A; padding-bottom: calc(clamp(40px, 6vw, 72px) + 22px); }
.sf-root[data-template="template64-haraz"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x, #2A160C; }
.sf-root[data-template="template64-haraz"] .sfx-con-head::after, .sf-root[data-template="template64-haraz"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-yemen-filigree.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template64-haraz"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template65-cairo-nights"] .sf-nav { background: #0B1834; border-bottom: 4px solid #E2B04A; }
.sf-root[data-template="template65-cairo-nights"] .sf-nav, .sf-root[data-template="template65-cairo-nights"] .sf-nav a, .sf-root[data-template="template65-cairo-nights"] .sf-nav button { color: #F3E6C4; }
.sf-root[data-template="template65-cairo-nights"] .sf-burger span { background: #F3E6C4; }
.sf-root[data-template="template65-cairo-nights"] .sf-signin { background: #E2B04A; color: #0B1834 !important; box-shadow: none; }
.sf-root[data-template="template65-cairo-nights"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #E2B04A !important; }
.sf-root[data-template="template65-cairo-nights"] .sf-nav-links a.active { color: #E2B04A; }
.sf-root[data-template="template65-cairo-nights"] .sf-section-title, .sf-root[data-template="template65-cairo-nights"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0B1834; }
.sf-root[data-template="template65-cairo-nights"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-khayamiya-band.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template65-cairo-nights"] .sf-section.alt { background: #EEF0F6; }
.sf-root[data-template="template65-cairo-nights"] .sf-card, .sf-root[data-template="template65-cairo-nights"] .sf-menu-item { border-radius: 14px; border: 1px solid #DCE0EA; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template65-cairo-nights"] .sf-card:hover { border-color: #E2B04A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template65-cairo-nights"] .sf-price { color: #C8102E; font-weight: 800; }
.sf-root[data-template="template65-cairo-nights"] :where(.sf-btn:not(.sf-btn-outline)) { background: #0B1834; }
.sf-root[data-template="template65-cairo-nights"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #C8102E; }
.sf-root[data-template="template65-cairo-nights"] .sf-cat.active { background: #0B1834; }
.sf-root[data-template="template65-cairo-nights"] .sfx-ticker { background: #0B1834; color: #E2B04A; font-family: var(--sf-heading); }
.sf-root[data-template="template65-cairo-nights"] .sf-footer { background: #050C22; border-top: 0; position: relative; padding-top: 66px; }
.sf-root[data-template="template65-cairo-nights"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: url('/heritage-khayamiya-band.svg') left center / auto 100% repeat-x, #F3E6C8; }
.sf-root[data-template="template65-cairo-nights"] .sf-page-header { background: radial-gradient(60% 70% at 50% 40%, rgba(5,10,31,.9), rgba(5,10,31,.5) 60%, rgba(5,10,31,.15)), url('/heritage-cairo-ramadan.svg') 68% 64% / cover no-repeat, #050A1F; padding-bottom: calc(clamp(40px, 6vw, 72px) + 26px); }
.sf-root[data-template="template65-cairo-nights"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: url('/heritage-khayamiya-band.svg') left center / auto 100% repeat-x, #F3E6C8; }
.sf-root[data-template="template65-cairo-nights"] .sfx-con-head::after, .sf-root[data-template="template65-cairo-nights"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-khayamiya-band.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template65-cairo-nights"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template66-olive-harvest"] .sf-nav { background: #FBF7EF; border-bottom: 3px solid #1E7A3E; }

.sf-root[data-template="template66-olive-harvest"] .sf-signin { background: #1E7A3E; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template66-olive-harvest"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1E7A3E !important; }
.sf-root[data-template="template66-olive-harvest"] .sf-nav-links a.active { color: #C8102E; }
.sf-root[data-template="template66-olive-harvest"] .sf-section-title, .sf-root[data-template="template66-olive-harvest"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1B1714; }
.sf-root[data-template="template66-olive-harvest"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-tatreez-hem.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template66-olive-harvest"] .sf-section.alt { background: #F2EAD6; }
.sf-root[data-template="template66-olive-harvest"] .sf-card, .sf-root[data-template="template66-olive-harvest"] .sf-menu-item { border-radius: 16px; border: 1px solid #E3D7C0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template66-olive-harvest"] .sf-card:hover { border-color: #1E7A3E; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template66-olive-harvest"] .sf-price { color: #C8102E; font-weight: 800; }
.sf-root[data-template="template66-olive-harvest"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1E7A3E; }
.sf-root[data-template="template66-olive-harvest"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #C8102E; }
.sf-root[data-template="template66-olive-harvest"] .sf-cat.active { background: #1E7A3E; }
.sf-root[data-template="template66-olive-harvest"] .sfx-ticker { background: #1E7A3E; color: #FBF7EF; font-family: var(--sf-heading); }
.sf-root[data-template="template66-olive-harvest"] .sf-footer { background: #1B1714; border-top: 0; position: relative; padding-top: 70px; }
.sf-root[data-template="template66-olive-harvest"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: url('/heritage-tatreez-hem.svg') left center / auto 100% repeat-x, #F7EEDC; }
.sf-root[data-template="template66-olive-harvest"] .sf-page-header { background: radial-gradient(60% 70% at 50% 40%, rgba(250,240,220,.94), rgba(250,240,220,.55) 60%, rgba(250,240,220,.1)), url('/heritage-olive-terraces.svg') 60% 52% / cover no-repeat, #EFD9AE; padding-bottom: calc(clamp(40px, 6vw, 72px) + 30px); }
.sf-root[data-template="template66-olive-harvest"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url('/heritage-tatreez-hem.svg') left center / auto 100% repeat-x, #F7EEDC; }
.sf-root[data-template="template66-olive-harvest"] .sfx-con-head::after, .sf-root[data-template="template66-olive-harvest"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-tatreez-hem.svg') left center / auto 100% repeat-x; }
.sf-root[data-template="template66-olive-harvest"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template67-harbor"] .sf-nav { background: #0E2A47; border-bottom: 4px solid #D7263D; }
.sf-root[data-template="template67-harbor"] .sf-nav, .sf-root[data-template="template67-harbor"] .sf-nav a, .sf-root[data-template="template67-harbor"] .sf-nav button { color: #EAF4FB; }
.sf-root[data-template="template67-harbor"] .sf-burger span { background: #EAF4FB; }
.sf-root[data-template="template67-harbor"] .sf-signin { background: #FFFFFF; color: #0E2A47 !important; box-shadow: none; }
.sf-root[data-template="template67-harbor"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FFFFFF !important; }
.sf-root[data-template="template67-harbor"] .sf-nav-links a.active { color: #FFE08A; }
.sf-root[data-template="template67-harbor"] .sf-section-title, .sf-root[data-template="template67-harbor"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0E2A47; }
.sf-root[data-template="template67-harbor"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-rope-band.svg') left center / 24px 100% repeat-x; }
.sf-root[data-template="template67-harbor"] .sf-section.alt { background: #E8F3FA; }
.sf-root[data-template="template67-harbor"] .sf-card, .sf-root[data-template="template67-harbor"] .sf-menu-item { border-radius: 12px; border: 1px solid #D3E5F0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template67-harbor"] .sf-card:hover { border-color: #1F4E79; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template67-harbor"] .sf-price { color: #D7263D; font-weight: 800; }
.sf-root[data-template="template67-harbor"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1F4E79; }
.sf-root[data-template="template67-harbor"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #D7263D; }
.sf-root[data-template="template67-harbor"] .sf-cat.active { background: #1F4E79; }
.sf-root[data-template="template67-harbor"] .sfx-ticker { background: #D7263D; color: #FFFFFF; font-family: var(--sf-heading); }
.sf-root[data-template="template67-harbor"] .sf-footer { background: #0E2A47; border-top: 0; position: relative; padding-top: 60px; }
.sf-root[data-template="template67-harbor"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: url('/heritage-rope-band.svg') left center / 32px 100% repeat-x; }
.sf-root[data-template="template67-harbor"] .sf-page-header { background: url('/heritage-harbor.svg') center bottom / max(100%, 1000px) auto no-repeat, linear-gradient(180deg, #E8F5FC, #BFE3F5); padding-bottom: calc(clamp(40px, 6vw, 72px) + 20px); }
.sf-root[data-template="template67-harbor"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: url('/heritage-rope-band.svg') left center / 32px 100% repeat-x; }
.sf-root[data-template="template67-harbor"] .sfx-con-head::after, .sf-root[data-template="template67-harbor"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-rope-band.svg') left center / 24px 100% repeat-x; }
.sf-root[data-template="template67-harbor"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template68-catch"] .sf-nav { background: #FFFFFF; border-bottom: 3px solid #0E8A9A; }

.sf-root[data-template="template68-catch"] .sf-signin { background: #0E8A9A; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template68-catch"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #0E8A9A !important; }
.sf-root[data-template="template68-catch"] .sf-nav-links a.active { color: #E2553F; }
.sf-root[data-template="template68-catch"] .sf-section-title, .sf-root[data-template="template68-catch"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0B2E3A; }
.sf-root[data-template="template68-catch"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: url('/heritage-waves-band.svg') left center / 24px 100% repeat-x; }
.sf-root[data-template="template68-catch"] .sf-section.alt { background: #E6F4F5; }
.sf-root[data-template="template68-catch"] .sf-card, .sf-root[data-template="template68-catch"] .sf-menu-item { border-radius: 18px; border: 1px solid #CFE6E9; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template68-catch"] .sf-card:hover { border-color: #0E8A9A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template68-catch"] .sf-price { color: #E2553F; font-weight: 800; }
.sf-root[data-template="template68-catch"] :where(.sf-btn:not(.sf-btn-outline)) { background: #0E8A9A; }
.sf-root[data-template="template68-catch"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #0B2E3A; }
.sf-root[data-template="template68-catch"] .sf-cat.active { background: #0E8A9A; }
.sf-root[data-template="template68-catch"] .sfx-ticker { background: #12313B; color: #F7D046; font-family: var(--sf-heading); }
.sf-root[data-template="template68-catch"] .sf-footer { background: #12313B; border-top: 0; position: relative; padding-top: 60px; }
.sf-root[data-template="template68-catch"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: url('/heritage-waves-band.svg') left center / 40px 100% repeat-x; }
.sf-root[data-template="template68-catch"] .sf-page-header { background: radial-gradient(50% 120% at 85% 50%, rgba(143,211,220,.5), transparent 70%), linear-gradient(180deg, #F2FAFB, #DDF0F2); padding-bottom: calc(clamp(40px, 6vw, 72px) + 20px); }
.sf-root[data-template="template68-catch"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: url('/heritage-waves-band.svg') left center / 40px 100% repeat-x; }
.sf-root[data-template="template68-catch"] .sfx-con-head::after, .sf-root[data-template="template68-catch"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: url('/heritage-waves-band.svg') left center / 24px 100% repeat-x; }
.sf-root[data-template="template68-catch"] .sfx-ed-head::after { margin-left: 0; }

/* Light page headers read in dark ink; the scenes sit low enough to keep the title clear. */
.sf-root[data-template="template66-olive-harvest"] .sf-page-header, .sf-root[data-template="template66-olive-harvest"] .sf-page-header h1,
.sf-root[data-template="template67-harbor"] .sf-page-header, .sf-root[data-template="template67-harbor"] .sf-page-header h1,
.sf-root[data-template="template68-catch"] .sf-page-header, .sf-root[data-template="template68-catch"] .sf-page-header h1 { color: #1B1714; text-shadow: none; }
.sf-root[data-template="template66-olive-harvest"] .sf-page-header p,
.sf-root[data-template="template67-harbor"] .sf-page-header p, .sf-root[data-template="template68-catch"] .sf-page-header p { color: #4A3F37; }
.sf-root[data-template="template67-harbor"] .sf-page-header { padding-bottom: calc(clamp(40px, 6vw, 72px) + clamp(130px, 19vw, 270px)); }
/* The About page opens on the country too (Haraz: chapters, Cairo Nights: manifesto). */
.sf-root[data-template="template64-haraz"] .sfx-hero-type { background: radial-gradient(70% 80% at 30% 35%, rgba(44,34,70,.92), rgba(44,34,70,.6) 60%, rgba(44,34,70,.15)), url('/heritage-haraz-vista.svg') 80% 46% / cover no-repeat, #3E3A6A; padding-bottom: clamp(120px, 16vw, 240px); }
.sf-root[data-template="template64-haraz"] .sfx-hero-type, .sf-root[data-template="template64-haraz"] .sfx-hero-type :is(h1, p, .sfx-kicker) { color: #FFF3E2; }
.sf-root[data-template="template65-cairo-nights"] .sfx-mani-head { background: radial-gradient(70% 80% at 30% 35%, rgba(5,10,31,.92), rgba(5,10,31,.55) 60%, rgba(5,10,31,.15)), url('/heritage-cairo-ramadan.svg') 68% 64% / cover no-repeat, #050A1F; padding-bottom: clamp(120px, 16vw, 240px); }
/* The country scenes fill the page header: the title on the sky, the scene below it. */
.sf-root[data-template="template64-haraz"] .sf-page-header, .sf-root[data-template="template65-cairo-nights"] .sf-page-header,
.sf-root[data-template="template66-olive-harvest"] .sf-page-header { padding-bottom: clamp(56px, 8vw, 120px); }
.sf-root[data-template="template64-haraz"] .sfx-rating, .sf-root[data-template="template65-cairo-nights"] .sfx-rating, .sf-root[data-template="template66-olive-harvest"] .sfx-rating,
.sf-root[data-template="template67-harbor"] .sfx-rating, .sf-root[data-template="template68-catch"] .sfx-rating { margin-top: 0; }

/* ═══ The pizza heroes (.pz, on the .nx full-scene frame) ═══════════════ */
.sf-root .pz__mark { position: relative; display: inline-block; flex-shrink: 0; width: 16px; height: 18px; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: radial-gradient(circle at 36% 40%, #B71C1C 0 2.2px, transparent 2.6px), radial-gradient(circle at 64% 30%, #B71C1C 0 2.2px, transparent 2.6px), radial-gradient(circle at 50% 62%, #B71C1C 0 1.8px, transparent 2.2px), linear-gradient(180deg, #D7974A 0 22%, #F7D46A 22%); }
.sf-root .pz .nx__eyebrow { display: inline-flex; align-items: center; gap: 10px; }

/* Wood Fire: night, ember and brick, a mosaic ring at the hem */
.sf-root .pz--woodfire { --nx-scene: url('/heritage-pizza-forno.svg'); --nx-sky: #120806; --nx-sky-solid: #1A0C07; --nx-x: 74%; --nx-px: 70%; --nx-hem-h: 14px;
  --nx-veil: linear-gradient(90deg, rgba(14,6,4,.9) 0%, rgba(14,6,4,.72) 30%, rgba(14,6,4,.2) 50%, rgba(14,6,4,0) 60%);
  --nx-ink: #FFF3E6; --nx-text: #E8D5C4; --nx-eyebrow: #FFB04A; --nx-orn: #E8590C; --nx-btn: #C2410C; --nx-btn-text: #FFFFFF; --nx-btn-hover: #E0590F; --nx-price: #FFB04A;
  --nx-card: rgba(30,14,8,.82); --nx-card-line: rgba(255,176,74,.3); --nx-h1-weight: 600;
  --nx-hem: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root .pz--woodfire h1 { font-style: italic; }
.sf-root .pz--woodfire .bxm-dish__txt strong { color: #FFF3E6; }

/* New York Corner: neon red on a night street, subway tile at the hem */
.sf-root .pz--nycorner { --nx-scene: url('/heritage-pizza-brooklyn.svg'); --nx-sky: #0A0E24; --nx-sky-solid: #10142C; --nx-x: 86%; --nx-px: 88%; --nx-hem-h: 16px;
  --nx-veil: linear-gradient(90deg, rgba(10,14,36,.92) 0%, rgba(10,14,36,.76) 32%, rgba(10,14,36,.24) 52%, rgba(10,14,36,0) 62%);
  --nx-ink: #FFFFFF; --nx-text: #D4D6E8; --nx-eyebrow: #FF5A6B; --nx-orn: #FF4458; --nx-btn: #D41F35; --nx-btn-text: #FFFFFF; --nx-btn-hover: #F0334A; --nx-price: #FFD24A;
  --nx-card: rgba(14,14,22,.86); --nx-card-line: rgba(255,68,88,.35); --nx-h1-weight: 700;
  --nx-hem: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root .pz--nycorner h1 { text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 0 28px rgba(255,68,88,.35); }
.sf-root .pz--nycorner .pz__board { background: rgba(10,10,14,.9); border-color: #22222C; box-shadow: 0 0 0 2px #FF4458, 0 0 30px -6px rgba(255,68,88,.55), 0 30px 50px -24px rgba(0,0,0,.7); }
.sf-root .pz--nycorner .shw-board__head { color: #FFD24A; text-transform: uppercase; letter-spacing: .06em; }
.sf-root .pz--nycorner .shw-board__head i { background: repeating-linear-gradient(90deg, #FF4458 0 10px, transparent 10px 16px); }
.sf-root .pz--nycorner .shw-board__pic { box-shadow: 0 0 0 2px #FFD24A; }
.sf-root .pz--nycorner .shw-board__price { color: #FFD24A; }
.sf-root .pz--nycorner .shw-board__add { background: #D41F35; }
.sf-root .pz--nycorner .shw-board__add:hover { background: #FFD24A; color: #0A0E24; }

/* Amalfi: sea blue and lemon on warm cream, majolica at the hem */
.sf-root .pz--amalfi { --nx-scene: url('/heritage-pizza-amalfi.svg'); --nx-sky: #F7EBD8; --nx-sky-solid: #FBF3E4; --nx-x: 76%; --nx-px: 78%; --nx-hem-h: 22px;
  --nx-veil: linear-gradient(90deg, rgba(255,250,240,.9) 0%, rgba(255,250,240,.75) 30%, rgba(255,250,240,.2) 48%, rgba(255,250,240,0) 58%);
  --nx-ink: #12324A; --nx-text: #3E5566; --nx-eyebrow: #1A5E8F; --nx-orn: #E0A800; --nx-btn: #1A5E8F; --nx-btn-text: #FFFFFF; --nx-btn-hover: #C21F35; --nx-price: #C21F35;
  --nx-card: rgba(255,252,244,.9); --nx-card-line: rgba(26,94,143,.22); --nx-h1-weight: 700;
  --nx-hem: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root .pz--amalfi h1 { font-style: italic; }

/* Pizza Pop: ink on yellow, a sticker card, checker at the hem */
.sf-root .pz--pop { --nx-scene: url('/heritage-pizza-pop.svg'); --nx-sky: #FFF4C8; --nx-sky-solid: #FFF4C8; --nx-x: 76%; --nx-px: 74%; --nx-hem-h: 18px;
  --nx-veil: linear-gradient(90deg, rgba(255,244,200,.9) 0%, rgba(255,244,200,.7) 30%, rgba(255,244,200,0) 46%);
  --nx-ink: #1A1A1A; --nx-text: #33302A; --nx-eyebrow: #C21F15; --nx-orn: #1A1A1A; --nx-btn: #1A1A1A; --nx-btn-text: #FFFFFF; --nx-btn-hover: #C21F15; --nx-price: #C21F15;
  --nx-card: #FFFFFF; --nx-card-line: #1A1A1A; --nx-h1-weight: 400;
  --nx-hem: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root .pz--pop h1 { text-transform: uppercase; text-shadow: 5px 5px 0 #FF4A3D; letter-spacing: .01em; line-height: 1.02; }
.sf-root .pz--pop .pz__fav { border: 3px solid #1A1A1A; border-radius: 18px; box-shadow: 7px 7px 0 #1A1A1A; transform: rotate(-1.5deg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sf-root .pz--pop .pz__fav .bxm-dish__img { border: 3px solid #1A1A1A; }
.sf-root .pz--pop .nx__orn i { box-shadow: none; }
.sf-root .pz--pop .sfx-actions .sf-btn:not(.sf-btn-outline) { box-shadow: 4px 4px 0 #FF4A3D; }

/* From the Board: dark slate, basil green and tomato, the tricolore at the hem */
.sf-root .pz--flatlay { --nx-scene: url('/heritage-pizza-flatlay.svg'); --nx-sky: #141517; --nx-sky-solid: #1B1C1F; --nx-x: 72%; --nx-px: 70%; --nx-hem-h: 8px;
  --nx-veil: linear-gradient(90deg, rgba(20,21,23,.92) 0%, rgba(20,21,23,.74) 30%, rgba(20,21,23,.18) 46%, rgba(20,21,23,0) 56%);
  --nx-ink: #F6F1E7; --nx-text: #CFCBC2; --nx-eyebrow: #9CCC65; --nx-orn: #E53935; --nx-btn: #2E7D32; --nx-btn-text: #FFFFFF; --nx-btn-hover: #C62828; --nx-price: #F2C14E;
  --nx-card: rgba(28,30,33,.86); --nx-card-line: rgba(156,204,101,.28); --nx-h1-weight: 600;
  --nx-hem: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root .pz--flatlay h1 { text-transform: uppercase; letter-spacing: .06em; }
.sf-root .pz--flatlay .bxm-dish__txt strong { color: #F6F1E7; }

/* Pizza Parlor: a 70s sunburst, brown and mustard, a diner board */
.sf-root .pz--parlor { --nx-scene: url('/heritage-pizza-parlor.svg'); --nx-sky: #FBEFD4; --nx-sky-solid: #FBEFD4; --nx-x: 74%; --nx-px: 74%; --nx-hem-h: 24px;
  --nx-veil: linear-gradient(90deg, rgba(251,239,212,.92) 0%, rgba(251,239,212,.74) 30%, rgba(251,239,212,0) 46%);
  --nx-ink: #A8361B; --nx-text: #5E3A22; --nx-eyebrow: #7A3B1E; --nx-orn: #E8692A; --nx-btn: #A8361B; --nx-btn-text: #FFFFFF; --nx-btn-hover: #7A3B1E; --nx-price: #A8361B;
  --nx-card: rgba(255,248,232,.92); --nx-card-line: rgba(122,59,30,.25); --nx-h1-weight: 400;
  --nx-hem: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root .pz--parlor h1 { text-shadow: 4px 4px 0 #F2A93B; }
.sf-root .pz--parlor .pz__board { background: #5A2A12; border-color: #7A3B1E; color: #FBEFD4; box-shadow: 0 0 0 3px #F2A93B, 0 30px 50px -24px rgba(90,42,18,.6); }
.sf-root .pz--parlor .shw-board__head { color: #F2A93B; }
.sf-root .pz--parlor .shw-board__head i { background: repeating-linear-gradient(90deg, #E8692A 0 10px, transparent 10px 16px); }
.sf-root .pz--parlor .shw-board__pic { box-shadow: 0 0 0 2px #F2A93B; }
.sf-root .pz--parlor .shw-board__price { color: #F2A93B; }
.sf-root .pz--parlor .shw-board__dots { border-bottom-color: rgba(251,239,212,.35); }
.sf-root .pz--parlor .shw-board__add { background: #E8692A; }
.sf-root .pz--parlor .shw-board__add:hover { background: #F2A93B; color: #5A2A12; }

/* ═══ On every page ═════════════════════════════════════════════════════ */

.sf-root[data-template="template69-woodfire"] .sf-nav { background: #140906; border-bottom: 4px solid #C2410C; }
.sf-root[data-template="template69-woodfire"] .sf-nav, .sf-root[data-template="template69-woodfire"] .sf-nav a, .sf-root[data-template="template69-woodfire"] .sf-nav button { color: #F6E7D6; }
.sf-root[data-template="template69-woodfire"] .sf-burger span { background: #F6E7D6; }
.sf-root[data-template="template69-woodfire"] .sf-signin { background: #FFB04A; color: #140906 !important; box-shadow: none; }
.sf-root[data-template="template69-woodfire"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FFB04A !important; }
.sf-root[data-template="template69-woodfire"] .sf-nav-links a.active { color: #FFB04A; }
.sf-root[data-template="template69-woodfire"] .sf-section-title, .sf-root[data-template="template69-woodfire"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #2A120A; }
.sf-root[data-template="template69-woodfire"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root[data-template="template69-woodfire"] .sf-section.alt { background: #F6ECE2; }
.sf-root[data-template="template69-woodfire"] .sf-card, .sf-root[data-template="template69-woodfire"] .sf-menu-item { border-radius: 10px; border: 1px solid #EADBC9; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template69-woodfire"] .sf-card:hover { border-color: #C2410C; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template69-woodfire"] .sf-price { color: #B23A0C; font-weight: 800; }
.sf-root[data-template="template69-woodfire"] :where(.sf-btn:not(.sf-btn-outline)) { background: #C2410C; }
.sf-root[data-template="template69-woodfire"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #2A120A; }
.sf-root[data-template="template69-woodfire"] .sf-cat.active { background: #2A120A; }
.sf-root[data-template="template69-woodfire"] .sfx-ticker { background: #2A120A; color: #FFB04A; font-family: var(--sf-heading); }
.sf-root[data-template="template69-woodfire"] .sf-footer { background: #140906; border-top: 0; position: relative; padding-top: 54px; }
.sf-root[data-template="template69-woodfire"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root[data-template="template69-woodfire"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(14,6,4,.92), rgba(14,6,4,.6) 60%, rgba(14,6,4,.2)), url('/heritage-pizza-forno.svg') 70% 60% / cover no-repeat, #120806; padding-bottom: calc(clamp(40px, 6vw, 72px) + 14px); }
.sf-root[data-template="template69-woodfire"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root[data-template="template69-woodfire"] .sfx-con-head::after, .sf-root[data-template="template69-woodfire"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root[data-template="template69-woodfire"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template70-ny-corner"] .sf-nav { background: #0A0E24; border-bottom: 4px solid #FF4458; }
.sf-root[data-template="template70-ny-corner"] .sf-nav, .sf-root[data-template="template70-ny-corner"] .sf-nav a, .sf-root[data-template="template70-ny-corner"] .sf-nav button { color: #FFFFFF; }
.sf-root[data-template="template70-ny-corner"] .sf-burger span { background: #FFFFFF; }
.sf-root[data-template="template70-ny-corner"] .sf-signin { background: #FFD24A; color: #0A0E24 !important; box-shadow: none; }
.sf-root[data-template="template70-ny-corner"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FF5A6B !important; }
.sf-root[data-template="template70-ny-corner"] .sf-nav-links a.active { color: #FFD24A; }
.sf-root[data-template="template70-ny-corner"] .sf-section-title, .sf-root[data-template="template70-ny-corner"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0A0E24; }
.sf-root[data-template="template70-ny-corner"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root[data-template="template70-ny-corner"] .sf-section.alt { background: #F1F2F6; }
.sf-root[data-template="template70-ny-corner"] .sf-card, .sf-root[data-template="template70-ny-corner"] .sf-menu-item { border-radius: 6px; border: 1px solid #DCDEE6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template70-ny-corner"] .sf-card:hover { border-color: #D41F35; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template70-ny-corner"] .sf-price { color: #C8102E; font-weight: 800; }
.sf-root[data-template="template70-ny-corner"] :where(.sf-btn:not(.sf-btn-outline)) { background: #D41F35; }
.sf-root[data-template="template70-ny-corner"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #0A0E24; }
.sf-root[data-template="template70-ny-corner"] .sf-cat.active { background: #0A0E24; }
.sf-root[data-template="template70-ny-corner"] .sfx-ticker { background: #D41F35; color: #FFFFFF; font-family: var(--sf-heading); }
.sf-root[data-template="template70-ny-corner"] .sf-footer { background: #0A0E24; border-top: 0; position: relative; padding-top: 56px; }
.sf-root[data-template="template70-ny-corner"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root[data-template="template70-ny-corner"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(10,14,36,.92), rgba(10,14,36,.6) 60%, rgba(10,14,36,.2)), url('/heritage-pizza-brooklyn.svg') 88% 40% / cover no-repeat, #0A0E24; padding-bottom: calc(clamp(40px, 6vw, 72px) + 16px); }
.sf-root[data-template="template70-ny-corner"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root[data-template="template70-ny-corner"] .sfx-con-head::after, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root[data-template="template70-ny-corner"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template71-amalfi"] .sf-nav { background: #FFFAF0; border-bottom: 3px solid #1A5E8F; }

.sf-root[data-template="template71-amalfi"] .sf-signin { background: #1A5E8F; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template71-amalfi"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1A5E8F !important; }
.sf-root[data-template="template71-amalfi"] .sf-nav-links a.active { color: #C21F35; }
.sf-root[data-template="template71-amalfi"] .sf-section-title, .sf-root[data-template="template71-amalfi"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #12324A; }
.sf-root[data-template="template71-amalfi"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root[data-template="template71-amalfi"] .sf-section.alt { background: #F3ECDD; }
.sf-root[data-template="template71-amalfi"] .sf-card, .sf-root[data-template="template71-amalfi"] .sf-menu-item { border-radius: 16px; border: 1px solid #E6DCC8; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template71-amalfi"] .sf-card:hover { border-color: #1A5E8F; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template71-amalfi"] .sf-price { color: #C21F35; font-weight: 800; }
.sf-root[data-template="template71-amalfi"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1A5E8F; }
.sf-root[data-template="template71-amalfi"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #C21F35; }
.sf-root[data-template="template71-amalfi"] .sf-cat.active { background: #1A5E8F; }
.sf-root[data-template="template71-amalfi"] .sfx-ticker { background: #1A5E8F; color: #FFF3C4; font-family: var(--sf-heading); }
.sf-root[data-template="template71-amalfi"] .sf-footer { background: #12324A; border-top: 0; position: relative; padding-top: 62px; }
.sf-root[data-template="template71-amalfi"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root[data-template="template71-amalfi"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(255,250,240,.94), rgba(255,250,240,.6) 60%, rgba(255,250,240,.1)), url('/heritage-pizza-amalfi.svg') 76% 50% / cover no-repeat, #F7EBD8; padding-bottom: calc(clamp(40px, 6vw, 72px) + 22px); }
.sf-root[data-template="template71-amalfi"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root[data-template="template71-amalfi"] .sfx-con-head::after, .sf-root[data-template="template71-amalfi"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root[data-template="template71-amalfi"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template72-pizza-pop"] .sf-nav { background: #FFD23F; border-bottom: 4px solid #1A1A1A; }

.sf-root[data-template="template72-pizza-pop"] .sf-signin { background: #1A1A1A; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template72-pizza-pop"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #1A1A1A !important; }
.sf-root[data-template="template72-pizza-pop"] .sf-nav-links a.active { color: #C21F15; }
.sf-root[data-template="template72-pizza-pop"] .sf-section-title, .sf-root[data-template="template72-pizza-pop"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root[data-template="template72-pizza-pop"] .sf-section.alt { background: #FFF4C8; }
.sf-root[data-template="template72-pizza-pop"] .sf-card, .sf-root[data-template="template72-pizza-pop"] .sf-menu-item { border-radius: 18px; border: 1px solid #1A1A1A; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template72-pizza-pop"] .sf-card:hover { border-color: #C21F15; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template72-pizza-pop"] .sf-price { color: #C21F15; font-weight: 800; }
.sf-root[data-template="template72-pizza-pop"] :where(.sf-btn:not(.sf-btn-outline)) { background: #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #C21F15; }
.sf-root[data-template="template72-pizza-pop"] .sf-cat.active { background: #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-ticker { background: #1A1A1A; color: #FFD23F; font-family: var(--sf-heading); }
.sf-root[data-template="template72-pizza-pop"] .sf-footer { background: #1A1A1A; border-top: 0; position: relative; padding-top: 58px; }
.sf-root[data-template="template72-pizza-pop"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root[data-template="template72-pizza-pop"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(255,244,200,.94), rgba(255,244,200,.6) 60%, rgba(255,244,200,.1)), url('/heritage-pizza-pop.svg') 76% 50% / cover no-repeat, #FFD23F; padding-bottom: calc(clamp(40px, 6vw, 72px) + 18px); }
.sf-root[data-template="template72-pizza-pop"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root[data-template="template72-pizza-pop"] .sfx-con-head::after, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root[data-template="template72-pizza-pop"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template73-from-board"] .sf-nav { background: #141517; border-bottom: 3px solid #2E7D32; }
.sf-root[data-template="template73-from-board"] .sf-nav, .sf-root[data-template="template73-from-board"] .sf-nav a, .sf-root[data-template="template73-from-board"] .sf-nav button { color: #F6F1E7; }
.sf-root[data-template="template73-from-board"] .sf-burger span { background: #F6F1E7; }
.sf-root[data-template="template73-from-board"] .sf-signin { background: #2E7D32; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template73-from-board"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #F6F1E7 !important; }
.sf-root[data-template="template73-from-board"] .sf-nav-links a.active { color: #9CCC65; }
.sf-root[data-template="template73-from-board"] .sf-section-title, .sf-root[data-template="template73-from-board"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #141517; }
.sf-root[data-template="template73-from-board"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root[data-template="template73-from-board"] .sf-section.alt { background: #F1EEE7; }
.sf-root[data-template="template73-from-board"] .sf-card, .sf-root[data-template="template73-from-board"] .sf-menu-item { border-radius: 8px; border: 1px solid #E2DDD2; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template73-from-board"] .sf-card:hover { border-color: #2E7D32; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template73-from-board"] .sf-price { color: #B71C1C; font-weight: 800; }
.sf-root[data-template="template73-from-board"] :where(.sf-btn:not(.sf-btn-outline)) { background: #2E7D32; }
.sf-root[data-template="template73-from-board"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #141517; }
.sf-root[data-template="template73-from-board"] .sf-cat.active { background: #141517; }
.sf-root[data-template="template73-from-board"] .sfx-ticker { background: #141517; color: #9CCC65; font-family: var(--sf-heading); }
.sf-root[data-template="template73-from-board"] .sf-footer { background: #141517; border-top: 0; position: relative; padding-top: 48px; }
.sf-root[data-template="template73-from-board"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root[data-template="template73-from-board"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(20,21,23,.92), rgba(20,21,23,.6) 60%, rgba(20,21,23,.2)), url('/heritage-pizza-flatlay.svg') 72% 50% / cover no-repeat, #141517; padding-bottom: calc(clamp(40px, 6vw, 72px) + 8px); }
.sf-root[data-template="template73-from-board"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root[data-template="template73-from-board"] .sfx-con-head::after, .sf-root[data-template="template73-from-board"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root[data-template="template73-from-board"] .sfx-ed-head::after { margin-left: 0; }


.sf-root[data-template="template74-parlor"] .sf-nav { background: #FBEFD4; border-bottom: 4px solid #E8692A; }

.sf-root[data-template="template74-parlor"] .sf-signin { background: #A8361B; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template74-parlor"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #A8361B !important; }
.sf-root[data-template="template74-parlor"] .sf-nav-links a.active { color: #A8361B; }
.sf-root[data-template="template74-parlor"] .sf-section-title, .sf-root[data-template="template74-parlor"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #5A2A12; }
.sf-root[data-template="template74-parlor"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root[data-template="template74-parlor"] .sf-section.alt { background: #F7E6C2; }
.sf-root[data-template="template74-parlor"] .sf-card, .sf-root[data-template="template74-parlor"] .sf-menu-item { border-radius: 20px; border: 1px solid #EBD5AA; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template74-parlor"] .sf-card:hover { border-color: #E8692A; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template74-parlor"] .sf-price { color: #A8361B; font-weight: 800; }
.sf-root[data-template="template74-parlor"] :where(.sf-btn:not(.sf-btn-outline)) { background: #A8361B; }
.sf-root[data-template="template74-parlor"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #5A2A12; }
.sf-root[data-template="template74-parlor"] .sf-cat.active { background: #5A2A12; }
.sf-root[data-template="template74-parlor"] .sfx-ticker { background: #5A2A12; color: #F2A93B; font-family: var(--sf-heading); }
.sf-root[data-template="template74-parlor"] .sf-footer { background: #5A2A12; border-top: 0; position: relative; padding-top: 64px; }
.sf-root[data-template="template74-parlor"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root[data-template="template74-parlor"] .sf-page-header { background: radial-gradient(60% 80% at 30% 40%, rgba(251,239,212,.95), rgba(251,239,212,.6) 60%, rgba(251,239,212,.1)), url('/heritage-pizza-parlor.svg') 74% 50% / cover no-repeat, #FBEFD4; padding-bottom: calc(clamp(40px, 6vw, 72px) + 24px); }
.sf-root[data-template="template74-parlor"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root[data-template="template74-parlor"] .sfx-con-head::after, .sf-root[data-template="template74-parlor"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root[data-template="template74-parlor"] .sfx-ed-head::after { margin-left: 0; }

/* Light page headers read in dark ink, dark ones in cream. */
.sf-root[data-template="template71-amalfi"] .sf-page-header, .sf-root[data-template="template71-amalfi"] .sf-page-header h1 { color: #12324A; text-shadow: none; }
.sf-root[data-template="template72-pizza-pop"] .sf-page-header, .sf-root[data-template="template72-pizza-pop"] .sf-page-header h1 { color: #1A1A1A; text-shadow: none; }
.sf-root[data-template="template74-parlor"] .sf-page-header, .sf-root[data-template="template74-parlor"] .sf-page-header h1 { color: #5A2A12; text-shadow: none; }
.sf-root[data-template="template71-amalfi"] .sf-page-header p { color: #3E5566; }
.sf-root[data-template="template72-pizza-pop"] .sf-page-header p { color: #33302A; }
.sf-root[data-template="template74-parlor"] .sf-page-header p { color: #5E3A22; }
.sf-root[data-template="template69-woodfire"] .sf-page-header, .sf-root[data-template="template69-woodfire"] .sf-page-header h1,
.sf-root[data-template="template70-ny-corner"] .sf-page-header, .sf-root[data-template="template70-ny-corner"] .sf-page-header h1,
.sf-root[data-template="template73-from-board"] .sf-page-header, .sf-root[data-template="template73-from-board"] .sf-page-header h1 { color: #FFF6EA; }
.sf-root[data-template="template69-woodfire"] .sf-page-header p, .sf-root[data-template="template70-ny-corner"] .sf-page-header p, .sf-root[data-template="template73-from-board"] .sf-page-header p { color: #E2D8CC; }
/* Signature touches carried onto every page. */
.sf-root[data-template="template70-ny-corner"] .sf-section-title, .sf-root[data-template="template70-ny-corner"] .sf-menu-cat h2,
.sf-root[data-template="template73-from-board"] .sf-section-title, .sf-root[data-template="template73-from-board"] .sf-menu-cat h2,
.sf-root[data-template="template72-pizza-pop"] .sf-section-title, .sf-root[data-template="template72-pizza-pop"] .sf-menu-cat h2 { text-transform: uppercase; }
.sf-root[data-template="template72-pizza-pop"] .sf-card, .sf-root[data-template="template72-pizza-pop"] .sf-menu-item { border-width: 3px; box-shadow: 5px 5px 0 #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sf-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #C21F15; }
.sf-root[data-template="template74-parlor"] .sf-section-title, .sf-root[data-template="template74-parlor"] .sf-menu-cat h2 { color: #A8361B; text-shadow: 2px 2px 0 #F2A93B; font-weight: 400; }
.sf-root[data-template="template71-amalfi"] .sf-section-title, .sf-root[data-template="template71-amalfi"] .sf-menu-cat h2,
.sf-root[data-template="template69-woodfire"] .sf-section-title, .sf-root[data-template="template69-woodfire"] .sf-menu-cat h2 { font-style: italic; }
/* ═══ Inner pages carry the scene ═══════════════════════════════════════ */

.sf-root[data-template="template69-woodfire"] .sfx-menu-mast, .sf-root[data-template="template69-woodfire"] .sfx-menu-type, .sf-root[data-template="template69-woodfire"] .sfx-hero-type, .sf-root[data-template="template69-woodfire"] .sfx-page-photo, .sf-root[data-template="template69-woodfire"] .sfx-mani-head, .sf-root[data-template="template69-woodfire"] .sfx-ed-head { background: linear-gradient(90deg, rgba(14,6,4,.96) 0%, rgba(14,6,4,.84) 38%, rgba(14,6,4,.2) 72%, rgba(14,6,4,0)), url('/heritage-pizza-forno.svg') 72% 58% / cover no-repeat, rgb(14,6,4); }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir, .sf-root[data-template="template69-woodfire"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(14,6,4,.93), rgba(14,6,4,.72) 70%, rgba(14,6,4,.5)), url('/heritage-pizza-forno.svg') 72% 58% / cover no-repeat, rgb(14,6,4); }
@media (max-width: 699px) { .sf-root[data-template="template69-woodfire"] .sfx-menu-noir, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast, .sf-root[data-template="template69-woodfire"] .sfx-menu-type, .sf-root[data-template="template69-woodfire"] .sfx-hero-type, .sf-root[data-template="template69-woodfire"] .sfx-page-photo, .sf-root[data-template="template69-woodfire"] .sfx-mani-head, .sf-root[data-template="template69-woodfire"] .sfx-ed-head, .sf-root[data-template="template69-woodfire"] .sfx-con-head { background: linear-gradient(180deg, rgba(14,6,4,.78), rgba(14,6,4,.9)), url('/heritage-pizza-forno.svg') 72% 58% / cover no-repeat, rgb(14,6,4); } }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast, .sf-root[data-template="template69-woodfire"] .sfx-menu-type, .sf-root[data-template="template69-woodfire"] .sfx-hero-type, .sf-root[data-template="template69-woodfire"] .sfx-page-photo, .sf-root[data-template="template69-woodfire"] .sfx-mani-head, .sf-root[data-template="template69-woodfire"] .sfx-ed-head, .sf-root[data-template="template69-woodfire"] .sfx-con-head { position: relative; color: #FFF6EA; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 14px); }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir::after, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast::after, .sf-root[data-template="template69-woodfire"] .sfx-menu-type::after, .sf-root[data-template="template69-woodfire"] .sfx-hero-type::after, .sf-root[data-template="template69-woodfire"] .sfx-page-photo::after, .sf-root[data-template="template69-woodfire"] .sfx-mani-head::after, .sf-root[data-template="template69-woodfire"] .sfx-ed-head::after, .sf-root[data-template="template69-woodfire"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #1F5F7A 0 14px, #F2E6C8 14px 28px, #C9A24A 28px 42px, #F2E6C8 42px 56px); }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir h1, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast h1, .sf-root[data-template="template69-woodfire"] .sfx-menu-type h1, .sf-root[data-template="template69-woodfire"] .sfx-hero-type h1, .sf-root[data-template="template69-woodfire"] .sfx-page-photo h1, .sf-root[data-template="template69-woodfire"] .sfx-mani-head h1, .sf-root[data-template="template69-woodfire"] .sfx-ed-head h1, .sf-root[data-template="template69-woodfire"] .sfx-con-head h1 { color: #FFF6EA; text-shadow: none; }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir p, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast p, .sf-root[data-template="template69-woodfire"] .sfx-menu-type p, .sf-root[data-template="template69-woodfire"] .sfx-hero-type p, .sf-root[data-template="template69-woodfire"] .sfx-page-photo p, .sf-root[data-template="template69-woodfire"] .sfx-mani-head p, .sf-root[data-template="template69-woodfire"] .sfx-ed-head p, .sf-root[data-template="template69-woodfire"] .sfx-con-head p { color: #E8D5C4; }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template69-woodfire"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template69-woodfire"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template69-woodfire"] .sfx-con-head .sfx-mast__bar { color: #FFB04A !important; }
.sf-root[data-template="template69-woodfire"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template69-woodfire"] .sfx-con-head .sfx-rule { background: #FFB04A; }
.sf-root[data-template="template69-woodfire"] .sfx-mast__bar { border-color: rgba(255,255,255,.35); }
.sf-root[data-template="template69-woodfire"] .sfx-zig__media, .sf-root[data-template="template69-woodfire"] .sfx-tile--photo { background-color: rgb(14,6,4); background-image: var(--sf-hero-photo, url('/heritage-pizza-forno.svg')); background-position: 72% 58%; }

.sf-root[data-template="template70-ny-corner"] .sfx-menu-mast, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head { background: linear-gradient(90deg, rgba(10,14,36,.96) 0%, rgba(10,14,36,.84) 38%, rgba(10,14,36,.2) 72%, rgba(10,14,36,0)), url('/heritage-pizza-brooklyn.svg') 88% 40% / cover no-repeat, rgb(10,14,36); }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir, .sf-root[data-template="template70-ny-corner"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(10,14,36,.93), rgba(10,14,36,.72) 70%, rgba(10,14,36,.5)), url('/heritage-pizza-brooklyn.svg') 88% 40% / cover no-repeat, rgb(10,14,36); }
@media (max-width: 699px) { .sf-root[data-template="template70-ny-corner"] .sfx-menu-noir, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head, .sf-root[data-template="template70-ny-corner"] .sfx-con-head { background: linear-gradient(180deg, rgba(10,14,36,.78), rgba(10,14,36,.9)), url('/heritage-pizza-brooklyn.svg') 88% 40% / cover no-repeat, rgb(10,14,36); } }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head, .sf-root[data-template="template70-ny-corner"] .sfx-con-head { position: relative; color: #FFFFFF; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 16px); }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir::after, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast::after, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type::after, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type::after, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo::after, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head::after, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head::after, .sf-root[data-template="template70-ny-corner"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 46px, #9AA0AE 46px 48px), linear-gradient(180deg, #F4F5F8 0 46%, #9AA0AE 46% 54%, #F4F5F8 54%); }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir h1, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast h1, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type h1, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type h1, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo h1, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head h1, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head h1, .sf-root[data-template="template70-ny-corner"] .sfx-con-head h1 { color: #FFFFFF; text-shadow: none; }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir p, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast p, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type p, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type p, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo p, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head p, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head p, .sf-root[data-template="template70-ny-corner"] .sfx-con-head p { color: #D4D6E8; }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template70-ny-corner"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template70-ny-corner"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template70-ny-corner"] .sfx-con-head .sfx-mast__bar { color: #FFD24A !important; }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template70-ny-corner"] .sfx-con-head .sfx-rule { background: #FFD24A; }
.sf-root[data-template="template70-ny-corner"] .sfx-mast__bar { border-color: rgba(255,255,255,.35); }
.sf-root[data-template="template70-ny-corner"] .sfx-zig__media, .sf-root[data-template="template70-ny-corner"] .sfx-tile--photo { background-color: rgb(10,14,36); background-image: var(--sf-hero-photo, url('/heritage-pizza-brooklyn.svg')); background-position: 88% 40%; }

.sf-root[data-template="template71-amalfi"] .sfx-menu-mast, .sf-root[data-template="template71-amalfi"] .sfx-menu-type, .sf-root[data-template="template71-amalfi"] .sfx-hero-type, .sf-root[data-template="template71-amalfi"] .sfx-page-photo, .sf-root[data-template="template71-amalfi"] .sfx-mani-head, .sf-root[data-template="template71-amalfi"] .sfx-ed-head { background: linear-gradient(90deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.84) 38%, rgba(255,250,240,.2) 72%, rgba(255,250,240,0)), url('/heritage-pizza-amalfi.svg') 78% 50% / cover no-repeat, rgb(255,250,240); }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir, .sf-root[data-template="template71-amalfi"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(255,250,240,.93), rgba(255,250,240,.72) 70%, rgba(255,250,240,.5)), url('/heritage-pizza-amalfi.svg') 78% 50% / cover no-repeat, rgb(255,250,240); }
@media (max-width: 699px) { .sf-root[data-template="template71-amalfi"] .sfx-menu-noir, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast, .sf-root[data-template="template71-amalfi"] .sfx-menu-type, .sf-root[data-template="template71-amalfi"] .sfx-hero-type, .sf-root[data-template="template71-amalfi"] .sfx-page-photo, .sf-root[data-template="template71-amalfi"] .sfx-mani-head, .sf-root[data-template="template71-amalfi"] .sfx-ed-head, .sf-root[data-template="template71-amalfi"] .sfx-con-head { background: linear-gradient(180deg, rgba(255,250,240,.78), rgba(255,250,240,.9)), url('/heritage-pizza-amalfi.svg') 78% 50% / cover no-repeat, rgb(255,250,240); } }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast, .sf-root[data-template="template71-amalfi"] .sfx-menu-type, .sf-root[data-template="template71-amalfi"] .sfx-hero-type, .sf-root[data-template="template71-amalfi"] .sfx-page-photo, .sf-root[data-template="template71-amalfi"] .sfx-mani-head, .sf-root[data-template="template71-amalfi"] .sfx-ed-head, .sf-root[data-template="template71-amalfi"] .sfx-con-head { position: relative; color: #12324A; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 22px); }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir::after, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast::after, .sf-root[data-template="template71-amalfi"] .sfx-menu-type::after, .sf-root[data-template="template71-amalfi"] .sfx-hero-type::after, .sf-root[data-template="template71-amalfi"] .sfx-page-photo::after, .sf-root[data-template="template71-amalfi"] .sfx-mani-head::after, .sf-root[data-template="template71-amalfi"] .sfx-ed-head::after, .sf-root[data-template="template71-amalfi"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 50% 50%, #F2C230 0 5px, transparent 5.5px) 0 0 / 28px 100%, repeating-linear-gradient(90deg, #1F6FA8 0 14px, #F7EFE0 14px 28px); }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir h1, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast h1, .sf-root[data-template="template71-amalfi"] .sfx-menu-type h1, .sf-root[data-template="template71-amalfi"] .sfx-hero-type h1, .sf-root[data-template="template71-amalfi"] .sfx-page-photo h1, .sf-root[data-template="template71-amalfi"] .sfx-mani-head h1, .sf-root[data-template="template71-amalfi"] .sfx-ed-head h1, .sf-root[data-template="template71-amalfi"] .sfx-con-head h1 { color: #12324A; text-shadow: none; }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir p, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast p, .sf-root[data-template="template71-amalfi"] .sfx-menu-type p, .sf-root[data-template="template71-amalfi"] .sfx-hero-type p, .sf-root[data-template="template71-amalfi"] .sfx-page-photo p, .sf-root[data-template="template71-amalfi"] .sfx-mani-head p, .sf-root[data-template="template71-amalfi"] .sfx-ed-head p, .sf-root[data-template="template71-amalfi"] .sfx-con-head p { color: #3E5566; }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template71-amalfi"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template71-amalfi"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template71-amalfi"] .sfx-con-head .sfx-mast__bar { color: #1A5E8F !important; }
.sf-root[data-template="template71-amalfi"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template71-amalfi"] .sfx-con-head .sfx-rule { background: #1A5E8F; }
.sf-root[data-template="template71-amalfi"] .sfx-mast__bar { border-color: rgba(0,0,0,.25); }
.sf-root[data-template="template71-amalfi"] .sfx-zig__media, .sf-root[data-template="template71-amalfi"] .sfx-tile--photo { background-color: rgb(255,250,240); background-image: var(--sf-hero-photo, url('/heritage-pizza-amalfi.svg')); background-position: 78% 50%; }

.sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head { background: linear-gradient(90deg, rgba(255,244,200,.96) 0%, rgba(255,244,200,.84) 38%, rgba(255,244,200,.2) 72%, rgba(255,244,200,0)), url('/heritage-pizza-pop.svg') 80% 50% / cover no-repeat, rgb(255,244,200); }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(255,244,200,.93), rgba(255,244,200,.72) 70%, rgba(255,244,200,.5)), url('/heritage-pizza-pop.svg') 80% 50% / cover no-repeat, rgb(255,244,200); }
@media (max-width: 699px) { .sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head { background: linear-gradient(180deg, rgba(255,244,200,.78), rgba(255,244,200,.9)), url('/heritage-pizza-pop.svg') 80% 50% / cover no-repeat, rgb(255,244,200); } }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head { position: relative; color: #1A1A1A; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 18px); }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir::after, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast::after, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type::after, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type::after, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo::after, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head::after, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head::after, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, #1A1A1A 0 18px, #FFD23F 18px 36px); }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir h1, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast h1, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type h1, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type h1, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo h1, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head h1, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head h1, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head h1 { color: #1A1A1A; text-shadow: none; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir p, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast p, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type p, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type p, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo p, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head p, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head p, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head p { color: #33302A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head .sfx-mast__bar { color: #C21F15 !important; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template72-pizza-pop"] .sfx-con-head .sfx-rule { background: #C21F15; }
.sf-root[data-template="template72-pizza-pop"] .sfx-mast__bar { border-color: rgba(0,0,0,.25); }
.sf-root[data-template="template72-pizza-pop"] .sfx-zig__media, .sf-root[data-template="template72-pizza-pop"] .sfx-tile--photo { background-color: rgb(255,244,200); background-image: var(--sf-hero-photo, url('/heritage-pizza-pop.svg')); background-position: 80% 50%; }

.sf-root[data-template="template73-from-board"] .sfx-menu-mast, .sf-root[data-template="template73-from-board"] .sfx-menu-type, .sf-root[data-template="template73-from-board"] .sfx-hero-type, .sf-root[data-template="template73-from-board"] .sfx-page-photo, .sf-root[data-template="template73-from-board"] .sfx-mani-head, .sf-root[data-template="template73-from-board"] .sfx-ed-head { background: linear-gradient(90deg, rgba(20,21,23,.96) 0%, rgba(20,21,23,.84) 38%, rgba(20,21,23,.2) 72%, rgba(20,21,23,0)), url('/heritage-pizza-flatlay.svg') 74% 50% / cover no-repeat, rgb(20,21,23); }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir, .sf-root[data-template="template73-from-board"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(20,21,23,.93), rgba(20,21,23,.72) 70%, rgba(20,21,23,.5)), url('/heritage-pizza-flatlay.svg') 74% 50% / cover no-repeat, rgb(20,21,23); }
@media (max-width: 699px) { .sf-root[data-template="template73-from-board"] .sfx-menu-noir, .sf-root[data-template="template73-from-board"] .sfx-menu-mast, .sf-root[data-template="template73-from-board"] .sfx-menu-type, .sf-root[data-template="template73-from-board"] .sfx-hero-type, .sf-root[data-template="template73-from-board"] .sfx-page-photo, .sf-root[data-template="template73-from-board"] .sfx-mani-head, .sf-root[data-template="template73-from-board"] .sfx-ed-head, .sf-root[data-template="template73-from-board"] .sfx-con-head { background: linear-gradient(180deg, rgba(20,21,23,.78), rgba(20,21,23,.9)), url('/heritage-pizza-flatlay.svg') 74% 50% / cover no-repeat, rgb(20,21,23); } }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir, .sf-root[data-template="template73-from-board"] .sfx-menu-mast, .sf-root[data-template="template73-from-board"] .sfx-menu-type, .sf-root[data-template="template73-from-board"] .sfx-hero-type, .sf-root[data-template="template73-from-board"] .sfx-page-photo, .sf-root[data-template="template73-from-board"] .sfx-mani-head, .sf-root[data-template="template73-from-board"] .sfx-ed-head, .sf-root[data-template="template73-from-board"] .sfx-con-head { position: relative; color: #F6F1E7; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 8px); }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir::after, .sf-root[data-template="template73-from-board"] .sfx-menu-mast::after, .sf-root[data-template="template73-from-board"] .sfx-menu-type::after, .sf-root[data-template="template73-from-board"] .sfx-hero-type::after, .sf-root[data-template="template73-from-board"] .sfx-page-photo::after, .sf-root[data-template="template73-from-board"] .sfx-mani-head::after, .sf-root[data-template="template73-from-board"] .sfx-ed-head::after, .sf-root[data-template="template73-from-board"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, #2E7D32 0 33.3%, #F6F1E7 33.3% 66.6%, #C62828 66.6%); }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir h1, .sf-root[data-template="template73-from-board"] .sfx-menu-mast h1, .sf-root[data-template="template73-from-board"] .sfx-menu-type h1, .sf-root[data-template="template73-from-board"] .sfx-hero-type h1, .sf-root[data-template="template73-from-board"] .sfx-page-photo h1, .sf-root[data-template="template73-from-board"] .sfx-mani-head h1, .sf-root[data-template="template73-from-board"] .sfx-ed-head h1, .sf-root[data-template="template73-from-board"] .sfx-con-head h1 { color: #F6F1E7; text-shadow: none; }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir p, .sf-root[data-template="template73-from-board"] .sfx-menu-mast p, .sf-root[data-template="template73-from-board"] .sfx-menu-type p, .sf-root[data-template="template73-from-board"] .sfx-hero-type p, .sf-root[data-template="template73-from-board"] .sfx-page-photo p, .sf-root[data-template="template73-from-board"] .sfx-mani-head p, .sf-root[data-template="template73-from-board"] .sfx-ed-head p, .sf-root[data-template="template73-from-board"] .sfx-con-head p { color: #D6D0C4; }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template73-from-board"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template73-from-board"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template73-from-board"] .sfx-con-head .sfx-mast__bar { color: #9CCC65 !important; }
.sf-root[data-template="template73-from-board"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template73-from-board"] .sfx-con-head .sfx-rule { background: #9CCC65; }
.sf-root[data-template="template73-from-board"] .sfx-mast__bar { border-color: rgba(255,255,255,.35); }
.sf-root[data-template="template73-from-board"] .sfx-zig__media, .sf-root[data-template="template73-from-board"] .sfx-tile--photo { background-color: rgb(20,21,23); background-image: var(--sf-hero-photo, url('/heritage-pizza-flatlay.svg')); background-position: 74% 50%; }

.sf-root[data-template="template74-parlor"] .sfx-menu-mast, .sf-root[data-template="template74-parlor"] .sfx-menu-type, .sf-root[data-template="template74-parlor"] .sfx-hero-type, .sf-root[data-template="template74-parlor"] .sfx-page-photo, .sf-root[data-template="template74-parlor"] .sfx-mani-head, .sf-root[data-template="template74-parlor"] .sfx-ed-head { background: linear-gradient(90deg, rgba(251,239,212,.96) 0%, rgba(251,239,212,.84) 38%, rgba(251,239,212,.2) 72%, rgba(251,239,212,0)), url('/heritage-pizza-parlor.svg') 76% 50% / cover no-repeat, rgb(251,239,212); }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir, .sf-root[data-template="template74-parlor"] .sfx-con-head { background: radial-gradient(70% 100% at 50% 50%, rgba(251,239,212,.93), rgba(251,239,212,.72) 70%, rgba(251,239,212,.5)), url('/heritage-pizza-parlor.svg') 76% 50% / cover no-repeat, rgb(251,239,212); }
@media (max-width: 699px) { .sf-root[data-template="template74-parlor"] .sfx-menu-noir, .sf-root[data-template="template74-parlor"] .sfx-menu-mast, .sf-root[data-template="template74-parlor"] .sfx-menu-type, .sf-root[data-template="template74-parlor"] .sfx-hero-type, .sf-root[data-template="template74-parlor"] .sfx-page-photo, .sf-root[data-template="template74-parlor"] .sfx-mani-head, .sf-root[data-template="template74-parlor"] .sfx-ed-head, .sf-root[data-template="template74-parlor"] .sfx-con-head { background: linear-gradient(180deg, rgba(251,239,212,.78), rgba(251,239,212,.9)), url('/heritage-pizza-parlor.svg') 76% 50% / cover no-repeat, rgb(251,239,212); } }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir, .sf-root[data-template="template74-parlor"] .sfx-menu-mast, .sf-root[data-template="template74-parlor"] .sfx-menu-type, .sf-root[data-template="template74-parlor"] .sfx-hero-type, .sf-root[data-template="template74-parlor"] .sfx-page-photo, .sf-root[data-template="template74-parlor"] .sfx-mani-head, .sf-root[data-template="template74-parlor"] .sfx-ed-head, .sf-root[data-template="template74-parlor"] .sfx-con-head { position: relative; color: #5A2A12; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 24px); }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir::after, .sf-root[data-template="template74-parlor"] .sfx-menu-mast::after, .sf-root[data-template="template74-parlor"] .sfx-menu-type::after, .sf-root[data-template="template74-parlor"] .sfx-hero-type::after, .sf-root[data-template="template74-parlor"] .sfx-page-photo::after, .sf-root[data-template="template74-parlor"] .sfx-mani-head::after, .sf-root[data-template="template74-parlor"] .sfx-ed-head::after, .sf-root[data-template="template74-parlor"] .sfx-con-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(180deg, #7A3B1E 0 25%, #E8692A 25% 50%, #F2A93B 50% 75%, #F5E1B8 75%); }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir h1, .sf-root[data-template="template74-parlor"] .sfx-menu-mast h1, .sf-root[data-template="template74-parlor"] .sfx-menu-type h1, .sf-root[data-template="template74-parlor"] .sfx-hero-type h1, .sf-root[data-template="template74-parlor"] .sfx-page-photo h1, .sf-root[data-template="template74-parlor"] .sfx-mani-head h1, .sf-root[data-template="template74-parlor"] .sfx-ed-head h1, .sf-root[data-template="template74-parlor"] .sfx-con-head h1 { color: #5A2A12; text-shadow: none; }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir p, .sf-root[data-template="template74-parlor"] .sfx-menu-mast p, .sf-root[data-template="template74-parlor"] .sfx-menu-type p, .sf-root[data-template="template74-parlor"] .sfx-hero-type p, .sf-root[data-template="template74-parlor"] .sfx-page-photo p, .sf-root[data-template="template74-parlor"] .sfx-mani-head p, .sf-root[data-template="template74-parlor"] .sfx-ed-head p, .sf-root[data-template="template74-parlor"] .sfx-con-head p { color: #5E3A22; }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template74-parlor"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template74-parlor"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template74-parlor"] .sfx-con-head .sfx-mast__bar { color: #A8361B !important; }
.sf-root[data-template="template74-parlor"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template74-parlor"] .sfx-con-head .sfx-rule { background: #A8361B; }
.sf-root[data-template="template74-parlor"] .sfx-mast__bar { border-color: rgba(0,0,0,.25); }
.sf-root[data-template="template74-parlor"] .sfx-zig__media, .sf-root[data-template="template74-parlor"] .sfx-tile--photo { background-color: rgb(251,239,212); background-image: var(--sf-hero-photo, url('/heritage-pizza-parlor.svg')); background-position: 76% 50%; }
/* New York: the menu board is a lit sign over the corner. */
.sf-root[data-template="template70-ny-corner"] .sfx-menu-board__panel { background: linear-gradient(rgba(10,14,36,.86), rgba(10,14,36,.92)), url('/heritage-pizza-brooklyn.svg') 50% 62% / cover no-repeat, #0A0E24; box-shadow: 0 0 0 3px #FF4458, 0 0 28px rgba(255,68,88,.45), inset 0 0 0 8px rgba(255,255,255,.04); }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-board__panel h1 { color: #FFFFFF; text-shadow: 0 0 18px rgba(255,68,88,.7); }
.sf-root[data-template="template70-ny-corner"] .sfx-menu-board__panel p:first-child { color: #FFD24A; }
/* Pop: the menu header is a comic panel with the pie beside it. */
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-block { background: radial-gradient(circle, rgba(26,26,26,.13) 1.4px, transparent 1.8px) 0 0 / 14px 14px, #FFD23F; color: #1A1A1A; border-bottom: 4px solid #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-block h1 { color: #1A1A1A; text-shadow: 4px 4px 0 #FF4A3D; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-block p { color: #33302A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-block__tag { background: #1A1A1A; color: #FFD23F; }
.sf-root[data-template="template72-pizza-pop"] .sfx-menu-block__photo { background-color: #FF4A3D; background-image: var(--sf-hero-photo, url('/heritage-pizza-pop.svg')); background-position: 75% 50%; border: 3px solid #1A1A1A; box-shadow: 6px 6px 0 #1A1A1A; }
/* Pop: the About tiles are stickers, not the store colour. */
.sf-root[data-template="template72-pizza-pop"] .sfx-tile { border: 3px solid #1A1A1A; box-shadow: 5px 5px 0 #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--brand { background: #FFD23F; color: #1A1A1A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--brand h1 { color: #1A1A1A; text-shadow: 3px 3px 0 #FF4A3D; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--brand p { color: #33302A; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--brand .sfx-kicker { color: #C21F15 !important; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--brand .sfx-btn-invert { background: #1A1A1A; color: #FFFFFF !important; box-shadow: 4px 4px 0 #FF4A3D; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--accent { background: #FF4A3D; color: #FFFFFF; }
.sf-root[data-template="template72-pizza-pop"] .sfx-tile--accent h2, .sf-root[data-template="template72-pizza-pop"] .sfx-tile--accent p { color: #FFFFFF; }
/* A dish card with no photo yet shows a drawn slice on the design's colour. */
.sf-root .pz .bx-photo-fallback { background-image: var(--sf-hero-photo, none), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 26 Q50 12 82 26 L50 90Z' fill='%23F7C85A'/%3E%3Cpath d='M22 31 Q50 19 78 31 L50 84Z' fill='%23E9A23B' opacity='.35'/%3E%3Cpath d='M16 24 Q50 8 84 24 L82 31 Q50 17 18 31Z' fill='%23C9873F'/%3E%3Ccircle cx='40' cy='40' r='6' fill='%23C62828'/%3E%3Ccircle cx='60' cy='38' r='5.5' fill='%23C62828'/%3E%3Ccircle cx='50' cy='58' r='5' fill='%23C62828'/%3E%3Cpath d='M44 49 q4 -5 9 -1' stroke='%232E7D32' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: cover, 78%; background-position: center, 50% 55%; background-repeat: no-repeat; }
.sf-root .pz--woodfire .bx-photo-fallback { background-color: #3A1A0E; }
.sf-root .pz--nycorner .bx-photo-fallback { background-color: #1B2250; }
.sf-root .pz--amalfi .bx-photo-fallback { background-color: #DCEBF5; }
.sf-root .pz--pop .bx-photo-fallback { background-color: #FF4A3D; }
.sf-root .pz--flatlay .bx-photo-fallback { background-color: #2A2C30; }
.sf-root .pz--parlor .bx-photo-fallback { background-color: #E8692A; }

/* ═══ The Pass: the ticket printer ══════════════════════════════════════ */
.sf-root .sg { position: relative; overflow: hidden; isolation: isolate; }
.sf-root .sg-pass { background: #121416; color: #EDEBE6; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
.sf-root .sg-pass__counter { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), radial-gradient(60% 90% at 78% 0%, rgba(255,186,110,.16), transparent 70%), linear-gradient(180deg, #1D2024, #121416); }
.sf-root .sg-pass__counter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, #2B2F35, #0C0D0F); box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
.sf-root .sg-pass__lamp { position: absolute; z-index: -1; right: 6%; top: -40px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,120,.18), transparent 65%); pointer-events: none; }
.sf-root .sg-pass__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-root .sg-pass h1 { font-family: var(--sf-heading); font-weight: 700; color: #FAF7F0; margin: 18px 0 0; line-height: .94; letter-spacing: -.035em; font-size: min(clamp(46px, 6.6vw, 104px), var(--sf-fit, 1000px)); overflow-wrap: break-word; text-wrap: balance; }
.sf-root .sg-pass__eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #FF8A57; }
.sf-root .sg-pass__tick { display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: #E4572E; border-radius: 2px; animation: sg-blink 1.2s steps(2, jump-none) infinite; }
.sf-root .sg-pass .sfx-hero-lead { color: #BDB9B0; font-size: 18px; line-height: 1.7; max-width: 44ch; margin: 22px 0 30px; }
.sf-root .sg-pass__meta { color: #BDB9B0; margin-top: 22px; }
.sf-root .sg-pass .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #E4572E; color: #FFFFFF !important; border-radius: 4px; }
.sf-root .sg-pass .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #FF6B3D; }
.sf-root .sg-pass .sfx-actions .sf-btn-outline { border-radius: 4px; }
.sf-root .sg-pass__printer { position: relative; justify-self: center; width: min(100%, 440px); }
.sf-root .sg-pass__head { position: relative; z-index: 2; height: 66px; border-radius: 16px 16px 8px 8px; background: linear-gradient(180deg, #454B53, #262A30 70%, #1D2025); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 40px rgba(0,0,0,.5); display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9AA1AB; }
.sf-root .sg-pass__head span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-root .sg-pass__head b { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 7px; border-radius: 4px; background: #08090A; box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.1); }
.sf-root .sg-pass__led { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 2px; background: #5A2626; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.sf-root .sg-pass__led.is-on { background: #3DDC84; box-shadow: 0 0 10px 2px rgba(61,220,132,.65); }
.sf-root .sg-pass__paper { position: relative; z-index: 1; margin: -14px 22px 0; clip-path: inset(0 -60px -80px -60px); }
.sf-root .sg-pass__ticket { position: relative; padding: 34px 24px 34px; background: radial-gradient(120% 60% at 50% 0%, rgba(0,0,0,.05), transparent 30%), #FBF8F1; color: #1B1B1B; font-family: 'JetBrains Mono', ui-monospace, monospace; box-shadow: 0 34px 50px -24px rgba(0,0,0,.75);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 18px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 18px 9px repeat-x;
  animation: sg-print 1.9s cubic-bezier(.32, .72, .25, 1) .25s both; }
.sf-root .sg-pass__brand { margin: 0; text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.sf-root .sg-pass__line { margin: 6px 0 0; text-align: center; font-size: 12px; letter-spacing: .06em; color: #55585E; text-transform: uppercase; }
.sf-root .sg-pass__rule { height: 0; margin: 16px 0; border-top: 2px dashed #C9C2B3; }
.sf-root .sg-pass__label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #C2411C; }
.sf-root .sg-pass__rows { list-style: none; margin: 0; padding: 0; }
.sf-root .sg-pass__rows li { display: flex; align-items: center; gap: 8px; animation: sg-row .45s ease-out both; animation-delay: calc(1.2s + var(--i) * .14s); }
.sf-root .sg-pass__row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; color: inherit; text-decoration: none; font-size: 14px; }
.sf-root .sg-pass__row:hover .sg-pass__name { text-decoration: underline; text-underline-offset: 3px; }
.sf-root .sg-pass__row:focus-visible { outline: 2px solid #E4572E; outline-offset: 2px; border-radius: 4px; }
.sf-root .sg-pass__qty { color: #8B8579; font-size: 12px; }
.sf-root .sg-pass__name { font-family: var(--sf-heading); font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-root .sg-pass__dots { flex: 1; min-width: 16px; border-bottom: 2px dotted #C9C2B3; transform: translateY(-4px); }
.sf-root .sg-pass__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-root .sg-pass__add { position: relative; flex: none; width: 34px; height: 34px; border-radius: 6px; border: 2px solid #1B1B1B; background: transparent; color: #1B1B1B; font: 700 18px/1 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; transition: background .15s ease-out, color .15s ease-out; }
.sf-root .sg-pass__add::before { content: ''; position: absolute; inset: -6px; }
.sf-root .sg-pass__add:hover, .sf-root .sg-pass__add:focus-visible { background: #1B1B1B; color: #FBF8F1; outline: none; }
.sf-root .sg-pass__all { display: block; text-align: center; padding: 13px 0; border: 2px solid #1B1B1B; border-radius: 4px; color: #1B1B1B; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .15s ease-out, color .15s ease-out; }
.sf-root .sg-pass__all:hover, .sf-root .sg-pass__all:focus-visible { background: #1B1B1B; color: #FBF8F1; outline: none; }
.sf-root .sg-pass__barcode { display: block; width: 80%; height: 46px; margin: 22px auto 8px; background: repeating-linear-gradient(90deg, #1B1B1B 0 2px, transparent 2px 4px, #1B1B1B 4px 5px, transparent 5px 8px, #1B1B1B 8px 11px, transparent 11px 12px, #1B1B1B 12px 13px, transparent 13px 16px); }
.sf-root .sg-pass__foot { margin: 0; text-align: center; font-size: 10px; letter-spacing: .24em; color: #8B8579; }
.sf-root .sg-pass__thumb { display: none; }
.sf-root .sg-pass__stamp { position: absolute; right: 16px; top: 74px; transform: rotate(-12deg); border: 3px solid #E4572E; border-radius: 8px; padding: 7px 10px; color: #E4572E; font-family: var(--sf-heading); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .08em; text-align: center; opacity: .88; mix-blend-mode: multiply; animation: sg-stamp .35s cubic-bezier(.2, 1.4, .4, 1) 2.4s both; pointer-events: none; }
@media (min-width: 960px) {
  .sf-root .sg-pass__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
  .sf-root .sg-pass__printer { justify-self: end; }
  .sf-root .sg-pass__thumb { display: block; position: absolute; left: -46px; top: 120px; width: 96px; height: 96px; object-fit: cover; border: 5px solid #FFFFFF; box-shadow: 0 12px 24px rgba(0,0,0,.35); transform: rotate(-8deg); }
}
@keyframes sg-print { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes sg-row { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sg-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: .88; transform: rotate(-12deg) scale(1); } }
@keyframes sg-blink { 50% { opacity: .2; } }

/* ═══ Aurora: glass tiles under the northern lights ═════════════════════ */
.sf-root .sg-au { --au-x: 0; --au-y: 0; background: #0B0D17; color: #F4F5FA; padding: clamp(32px, 6vw, 88px) 0 clamp(44px, 7vw, 104px); }
.sf-root .sg-au__sky { position: absolute; inset: -12%; z-index: -2; filter: blur(70px) saturate(1.2); opacity: .95; pointer-events: none; }
.sf-root .sg-au__sky i { position: absolute; width: 58vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; animation: sg-drift 22s ease-in-out infinite alternate; }
.sf-root .sg-au__sky i:nth-child(1) { left: -12%; top: -18%; background: radial-gradient(circle, var(--sf-primary, #7C5CFF), transparent 65%); }
.sf-root .sg-au__sky i:nth-child(2) { right: -14%; top: -10%; background: radial-gradient(circle, #22D3EE, transparent 65%); animation-duration: 26s; animation-delay: -6s; }
.sf-root .sg-au__sky i:nth-child(3) { left: 22%; bottom: -30%; background: radial-gradient(circle, #F472B6, transparent 62%); animation-duration: 30s; animation-delay: -12s; opacity: .7; }
.sf-root .sg-au__sky i:nth-child(4) { right: 10%; bottom: -24%; background: radial-gradient(circle, #34D399, transparent 60%); animation-duration: 24s; animation-delay: -3s; opacity: .55; }
.sf-root .sg-au__stars { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 16%, #fff, transparent), radial-gradient(1px 1px at 78% 30%, #fff, transparent), radial-gradient(1px 1px at 90% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 6% 64%, #fff, transparent), radial-gradient(1px 1px at 46% 72%, #fff, transparent), radial-gradient(1px 1px at 70% 86%, #fff, transparent); }
.sf-root .sg-au__bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; perspective: 1400px; }
.sf-root .sg-au__tile { position: relative; min-width: 0; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -32px rgba(0,0,0,.7);
  transform: rotateX(calc(var(--au-y) * -5deg)) rotateY(calc(var(--au-x) * 6deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sf-root .sg-au__tile--name { padding: clamp(28px, 4.4vw, 56px); }
.sf-root .sg-au h1 { font-family: var(--sf-heading); font-weight: 800; margin: 16px 0 0; line-height: .94; letter-spacing: -.045em; font-size: min(clamp(46px, 6.4vw, 104px), var(--sf-fit, 1000px)); overflow-wrap: break-word; text-wrap: balance; background: linear-gradient(118deg, #FFFFFF 35%, #D9D0FF 62%, #A5F0FF 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-root .sg-au__eyebrow { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 22px; letter-spacing: 0; text-transform: none; color: #D9D0FF; }
.sf-root .sg-au__eyebrow i { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #A5F0FF; box-shadow: 0 0 12px #22D3EE; vertical-align: middle; }
.sf-root .sg-au .sfx-hero-lead { color: #C7C9D9; font-size: 18px; line-height: 1.7; max-width: 46ch; margin: 22px 0 30px; }
.sf-root .sg-au .sfx-actions .sf-btn:not(.sf-btn-outline) { background: #FFFFFF; color: #0B0D17 !important; }
.sf-root .sg-au .sfx-actions .sf-btn:not(.sf-btn-outline):hover { background: #E6E1FF; }
.sf-root .sg-au__state { display: flex; align-items: center; gap: 12px; font-family: var(--sf-heading); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.sf-root .sg-au__state i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #A5B4FC; }
.sf-root .sg-au__state.is-open i { background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: sg-pulse 2s ease-out infinite; }
.sf-root .sg-au__state.is-closed i { background: #F87171; }
.sf-root .sg-au__small { display: block; margin: 10px 0 0; font-size: 14px; color: #A9ACC2; }
.sf-root .sg-au__ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sf-root .sg-au__ways span { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); font-size: 13px; font-weight: 600; color: #F4F5FA; background: rgba(255,255,255,.05); }
.sf-root .sg-au__dish { display: block; color: inherit; text-decoration: none; }
.sf-root .sg-au__dish:focus-visible { outline: 2px solid #A5F0FF; outline-offset: 4px; border-radius: 18px; }
.sf-root .sg-au__pic { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); animation: sg-fade .7s ease-out both; }
.sf-root .sg-au__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-root .sg-au .bx-photo-fallback { display: block; width: 100%; height: 100%; background: var(--sf-hero-photo, none) center / cover no-repeat, linear-gradient(135deg, rgba(124,92,255,.55), rgba(34,211,238,.35)); }
.sf-root .sg-au__txt { display: block; margin-top: 16px; }
.sf-root .sg-au__txt small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A9ACC2; }
.sf-root .sg-au__txt strong { display: block; margin-top: 6px; font-family: var(--sf-heading); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.sf-root .sg-au__txt em { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: #A5F0FF; }
.sf-root .sg-au__add { position: absolute; right: 38px; top: 38px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #0B0D17; font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .15s ease-out; }
.sf-root .sg-au__add:hover { transform: scale(1.08); }
.sf-root .sg-au__add:focus-visible { outline: 2px solid #A5F0FF; outline-offset: 3px; }
.sf-root .sg-au__dots { display: flex; gap: 6px; margin-top: 14px; }
.sf-root .sg-au__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); transition: width .3s ease-out, background .3s ease-out; }
.sf-root .sg-au__dots i.is-on { width: 20px; background: #FFFFFF; }
.sf-root .sg-au__addr { margin: 8px 0 0; font-size: 17px; line-height: 1.5; }
.sf-root .sg-au__links { display: flex; gap: 18px; margin: 14px 0 0; }
.sf-root .sg-au__links a { display: inline-flex; align-items: center; min-height: 44px; color: #D9D0FF; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 760px) {
  .sf-root .sg-au__bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "name name name name status status" "name name name name dish dish" "visit visit visit visit dish dish"; }
  .sf-root .sg-au__bento:not(:has(.sg-au__tile--visit)) { grid-template-areas: "name name name name status status" "name name name name dish dish"; }
  .sf-root .sg-au__tile--name { grid-area: name; display: flex; flex-direction: column; justify-content: center; }
  .sf-root .sg-au__tile--status { grid-area: status; }
  .sf-root .sg-au__tile--dish { grid-area: dish; }
  .sf-root .sg-au__tile--visit { grid-area: visit; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
  .sf-root .sg-au__tile--visit .sg-au__addr { margin: 0; }
  .sf-root .sg-au__tile--visit .sg-au__links { margin: 0; }
}
@keyframes sg-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.15); } }
@keyframes sg-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 100% { box-shadow: 0 0 0 14px rgba(52,211,153,0); } }
@keyframes sg-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sf-root .sg-pass__ticket, .sf-root .sg-pass__rows li, .sf-root .sg-pass__stamp, .sf-root .sg-pass__tick,
  .sf-root .sg-au__sky i, .sf-root .sg-au__state.is-open i, .sf-root .sg-au__pic { animation: none; }
  .sf-root .sg-au__tile { transform: none; transition: none; }
}

/* ═══ Every page ═════════════════════════════════════════════════════════ */

.sf-root[data-template="template75-the-pass"] .sf-nav { background: #16181B; border-bottom: 3px solid #E4572E; }
.sf-root[data-template="template75-the-pass"] .sf-nav, .sf-root[data-template="template75-the-pass"] .sf-nav a, .sf-root[data-template="template75-the-pass"] .sf-nav button { color: #EDEBE6; }
.sf-root[data-template="template75-the-pass"] .sf-burger span { background: #EDEBE6; }
.sf-root[data-template="template75-the-pass"] .sf-signin { background: #E4572E; color: #FFFFFF !important; box-shadow: none; }
.sf-root[data-template="template75-the-pass"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FAF7F0 !important; }
.sf-root[data-template="template75-the-pass"] .sf-nav-links a.active { color: #FF8A57; }
.sf-root[data-template="template75-the-pass"] .sf-section-title, .sf-root[data-template="template75-the-pass"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #16181B; }
.sf-root[data-template="template75-the-pass"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: radial-gradient(circle at 8px 50%, #16181B 0 3px, transparent 3.5px) 0 0 / 16px 100%, #F4F1EA; }
.sf-root[data-template="template75-the-pass"] .sf-section.alt { background: #ECE7DC; }
.sf-root[data-template="template75-the-pass"] .sf-card, .sf-root[data-template="template75-the-pass"] .sf-menu-item { border-radius: 4px; border: 1px solid #DDD6C8; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template75-the-pass"] .sf-card:hover { border-color: #16181B; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template75-the-pass"] .sf-price { color: #C2411C; font-weight: 800; }
.sf-root[data-template="template75-the-pass"] :where(.sf-btn:not(.sf-btn-outline)) { background: #16181B; }
.sf-root[data-template="template75-the-pass"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #E4572E; }
.sf-root[data-template="template75-the-pass"] .sf-cat.active { background: #16181B; }
.sf-root[data-template="template75-the-pass"] .sfx-ticker { background: #16181B; color: #FF8A57; font-family: var(--sf-heading); }
.sf-root[data-template="template75-the-pass"] .sf-footer { background: #16181B; border-top: 0; position: relative; padding-top: 52px; }
.sf-root[data-template="template75-the-pass"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 8px 50%, #F4F1EA 0 2.5px, transparent 3px) 0 0 / 16px 100%, #E4572E; }
.sf-root[data-template="template75-the-pass"] .sf-page-header { background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), radial-gradient(60% 90% at 78% 0%, rgba(255,186,110,.16), transparent 70%), linear-gradient(180deg, #1D2024, #121416); padding-bottom: calc(clamp(40px, 6vw, 72px) + 14px); }
.sf-root[data-template="template75-the-pass"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(135deg, #F4F1EA 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, #F4F1EA 25%, transparent 25%) -8px 0 / 16px 16px; }
.sf-root[data-template="template75-the-pass"] .sfx-con-head::after, .sf-root[data-template="template75-the-pass"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: radial-gradient(circle at 8px 50%, #16181B 0 3px, transparent 3.5px) 0 0 / 16px 100%, #F4F1EA; }
.sf-root[data-template="template75-the-pass"] .sfx-ed-head::after { margin-left: 0; }

.sf-root[data-template="template75-the-pass"] .sf-section-title, .sf-root[data-template="template75-the-pass"] .sf-menu-cat h2 { text-transform: uppercase; letter-spacing: -.01em; }
.sf-root[data-template="template75-the-pass"] .sf-section-title::after { height: 10px; }
.sf-root[data-template="template75-the-pass"] .sf-price, .sf-root[data-template="template75-the-pass"] .sfx-board__price, .sf-root[data-template="template75-the-pass"] .sf-menu-item-price { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.sf-root[data-template="template75-the-pass"] .sf-card, .sf-root[data-template="template75-the-pass"] .sf-menu-item { background: #FBF8F1; border-style: dashed; border-width: 1.5px; }
.sf-root[data-template="template75-the-pass"] .sf-eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; }

.sf-root[data-template="template75-the-pass"] .sfx-menu-noir, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast, .sf-root[data-template="template75-the-pass"] .sfx-menu-type, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel, .sf-root[data-template="template75-the-pass"] .sfx-menu-block, .sf-root[data-template="template75-the-pass"] .sfx-hero-type, .sf-root[data-template="template75-the-pass"] .sfx-page-photo, .sf-root[data-template="template75-the-pass"] .sfx-mani-head, .sf-root[data-template="template75-the-pass"] .sfx-ed-head, .sf-root[data-template="template75-the-pass"] .sfx-con-head, .sf-root[data-template="template75-the-pass"] .sf-page-header { background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), radial-gradient(60% 90% at 78% 0%, rgba(255,186,110,.16), transparent 70%), linear-gradient(180deg, #1D2024, #121416); color: #FAF7F0; position: relative; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 14px); }
.sf-root[data-template="template75-the-pass"] .sfx-menu-noir::after, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast::after, .sf-root[data-template="template75-the-pass"] .sfx-menu-type::after, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel::after, .sf-root[data-template="template75-the-pass"] .sfx-menu-block::after, .sf-root[data-template="template75-the-pass"] .sfx-hero-type::after, .sf-root[data-template="template75-the-pass"] .sfx-page-photo::after, .sf-root[data-template="template75-the-pass"] .sfx-mani-head::after, .sf-root[data-template="template75-the-pass"] .sfx-ed-head::after, .sf-root[data-template="template75-the-pass"] .sfx-con-head::after, .sf-root[data-template="template75-the-pass"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(135deg, #F4F1EA 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, #F4F1EA 25%, transparent 25%) -8px 0 / 16px 16px; }
.sf-root[data-template="template75-the-pass"] .sfx-menu-noir h1, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast h1, .sf-root[data-template="template75-the-pass"] .sfx-menu-type h1, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel h1, .sf-root[data-template="template75-the-pass"] .sfx-menu-block h1, .sf-root[data-template="template75-the-pass"] .sfx-hero-type h1, .sf-root[data-template="template75-the-pass"] .sfx-page-photo h1, .sf-root[data-template="template75-the-pass"] .sfx-mani-head h1, .sf-root[data-template="template75-the-pass"] .sfx-ed-head h1, .sf-root[data-template="template75-the-pass"] .sfx-con-head h1, .sf-root[data-template="template75-the-pass"] .sf-page-header h1 { color: #FAF7F0; text-shadow: none; }
.sf-root[data-template="template75-the-pass"] .sfx-menu-noir p, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast p, .sf-root[data-template="template75-the-pass"] .sfx-menu-type p, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel p, .sf-root[data-template="template75-the-pass"] .sfx-menu-block p, .sf-root[data-template="template75-the-pass"] .sfx-hero-type p, .sf-root[data-template="template75-the-pass"] .sfx-page-photo p, .sf-root[data-template="template75-the-pass"] .sfx-mani-head p, .sf-root[data-template="template75-the-pass"] .sfx-ed-head p, .sf-root[data-template="template75-the-pass"] .sfx-con-head p, .sf-root[data-template="template75-the-pass"] .sf-page-header p { color: #BDB9B0; }
.sf-root[data-template="template75-the-pass"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-menu-block .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sf-page-header .sfx-kicker, .sf-root[data-template="template75-the-pass"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-menu-block .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sf-page-header .sfx-menu-noir__eyebrow, .sf-root[data-template="template75-the-pass"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-menu-block .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sfx-con-head .sfx-mast__bar, .sf-root[data-template="template75-the-pass"] .sf-page-header .sfx-mast__bar { color: #FF8A57 !important; }
.sf-root[data-template="template75-the-pass"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-menu-board__panel .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-menu-block .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template75-the-pass"] .sfx-con-head .sfx-rule, .sf-root[data-template="template75-the-pass"] .sf-page-header .sfx-rule { background: #FF8A57; }
.sf-root[data-template="template75-the-pass"] .sfx-mast__bar { border-color: rgba(255,255,255,.3); }
.sf-root[data-template="template75-the-pass"] .sfx-zig__media, .sf-root[data-template="template75-the-pass"] .sfx-tile--photo { background-color: #16181B; }


.sf-root[data-template="template76-aurora"] .sf-nav { background: #0B0D17; border-bottom: 1px solid rgba(255,255,255,.1); }
.sf-root[data-template="template76-aurora"] .sf-nav, .sf-root[data-template="template76-aurora"] .sf-nav a, .sf-root[data-template="template76-aurora"] .sf-nav button { color: #F4F5FA; }
.sf-root[data-template="template76-aurora"] .sf-burger span { background: #F4F5FA; }
.sf-root[data-template="template76-aurora"] .sf-signin { background: #FFFFFF; color: #0B0D17 !important; box-shadow: none; }
.sf-root[data-template="template76-aurora"] .sf-logo { font-family: var(--sf-heading); font-weight: 700; color: #FFFFFF !important; }
.sf-root[data-template="template76-aurora"] .sf-nav-links a.active { color: #D9D0FF; }
.sf-root[data-template="template76-aurora"] .sf-section-title, .sf-root[data-template="template76-aurora"] .sf-menu-cat h2 { font-weight: 700; letter-spacing: 0; color: #0E1020; }
.sf-root[data-template="template76-aurora"] .sf-section-title::after { width: 120px; height: 16px; border-radius: 0; background: linear-gradient(90deg, #7C5CFF, #22D3EE 35%, #34D399 60%, #F472B6); }
.sf-root[data-template="template76-aurora"] .sf-section.alt { background: #EEEEF7; }
.sf-root[data-template="template76-aurora"] .sf-card, .sf-root[data-template="template76-aurora"] .sf-menu-item { border-radius: 22px; border: 1px solid #E3E4EF; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sf-root[data-template="template76-aurora"] .sf-card:hover { border-color: #7C5CFF; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); }
.sf-root[data-template="template76-aurora"] .sf-price { color: #5B3FE0; font-weight: 800; }
.sf-root[data-template="template76-aurora"] :where(.sf-btn:not(.sf-btn-outline)) { background: #0E1020; }
.sf-root[data-template="template76-aurora"] :where(.sf-btn:not(.sf-btn-outline)):hover { background: #5B3FE0; }
.sf-root[data-template="template76-aurora"] .sf-cat.active { background: #0E1020; }
.sf-root[data-template="template76-aurora"] .sfx-ticker { background: #0B0D17; color: #D9D0FF; font-family: var(--sf-heading); }
.sf-root[data-template="template76-aurora"] .sf-footer { background: #0B0D17; border-top: 0; position: relative; padding-top: 44px; }
.sf-root[data-template="template76-aurora"] .sf-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #7C5CFF, #22D3EE 35%, #34D399 60%, #F472B6); }
.sf-root[data-template="template76-aurora"] .sf-page-header { background: radial-gradient(50% 120% at 15% 0%, rgba(124,92,255,.45), transparent 70%), radial-gradient(45% 110% at 85% 10%, rgba(34,211,238,.32), transparent 70%), radial-gradient(40% 90% at 60% 100%, rgba(244,114,182,.22), transparent 70%), #0B0D17; padding-bottom: calc(clamp(40px, 6vw, 72px) + 4px); }
.sf-root[data-template="template76-aurora"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #7C5CFF, #22D3EE 35%, #34D399 60%, #F472B6); }
.sf-root[data-template="template76-aurora"] .sfx-con-head::after, .sf-root[data-template="template76-aurora"] .sfx-ed-head::after { content: ''; display: block; width: 160px; height: 16px; margin: 24px auto 0; background: linear-gradient(90deg, #7C5CFF, #22D3EE 35%, #34D399 60%, #F472B6); }
.sf-root[data-template="template76-aurora"] .sfx-ed-head::after { margin-left: 0; }

.sf-root[data-template="template76-aurora"] .sf-section-title::after { width: 96px; height: 4px; border-radius: 4px; }
.sf-root[data-template="template76-aurora"] .sf-section-title, .sf-root[data-template="template76-aurora"] .sf-menu-cat h2 { font-weight: 800; letter-spacing: -.03em; }
.sf-root[data-template="template76-aurora"] .sf-card:hover { box-shadow: 0 24px 50px -24px rgba(91,63,224,.45); }
.sf-root[data-template="template76-aurora"] .sf-eyebrow, .sf-root[data-template="template76-aurora"] .sfx-eyebrow { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 20px; }

.sf-root[data-template="template76-aurora"] .sfx-menu-noir, .sf-root[data-template="template76-aurora"] .sfx-menu-mast, .sf-root[data-template="template76-aurora"] .sfx-menu-type, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel, .sf-root[data-template="template76-aurora"] .sfx-menu-block, .sf-root[data-template="template76-aurora"] .sfx-hero-type, .sf-root[data-template="template76-aurora"] .sfx-page-photo, .sf-root[data-template="template76-aurora"] .sfx-mani-head, .sf-root[data-template="template76-aurora"] .sfx-ed-head, .sf-root[data-template="template76-aurora"] .sfx-con-head, .sf-root[data-template="template76-aurora"] .sf-page-header { background: radial-gradient(50% 120% at 15% 0%, rgba(124,92,255,.45), transparent 70%), radial-gradient(45% 110% at 85% 10%, rgba(34,211,238,.32), transparent 70%), radial-gradient(40% 90% at 60% 100%, rgba(244,114,182,.22), transparent 70%), #0B0D17; color: #FFFFFF; position: relative; border-bottom: 0; padding-bottom: calc(clamp(40px, 6vw, 72px) + 4px); }
.sf-root[data-template="template76-aurora"] .sfx-menu-noir::after, .sf-root[data-template="template76-aurora"] .sfx-menu-mast::after, .sf-root[data-template="template76-aurora"] .sfx-menu-type::after, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel::after, .sf-root[data-template="template76-aurora"] .sfx-menu-block::after, .sf-root[data-template="template76-aurora"] .sfx-hero-type::after, .sf-root[data-template="template76-aurora"] .sfx-page-photo::after, .sf-root[data-template="template76-aurora"] .sfx-mani-head::after, .sf-root[data-template="template76-aurora"] .sfx-ed-head::after, .sf-root[data-template="template76-aurora"] .sfx-con-head::after, .sf-root[data-template="template76-aurora"] .sf-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #7C5CFF, #22D3EE 35%, #34D399 60%, #F472B6); }
.sf-root[data-template="template76-aurora"] .sfx-menu-noir h1, .sf-root[data-template="template76-aurora"] .sfx-menu-mast h1, .sf-root[data-template="template76-aurora"] .sfx-menu-type h1, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel h1, .sf-root[data-template="template76-aurora"] .sfx-menu-block h1, .sf-root[data-template="template76-aurora"] .sfx-hero-type h1, .sf-root[data-template="template76-aurora"] .sfx-page-photo h1, .sf-root[data-template="template76-aurora"] .sfx-mani-head h1, .sf-root[data-template="template76-aurora"] .sfx-ed-head h1, .sf-root[data-template="template76-aurora"] .sfx-con-head h1, .sf-root[data-template="template76-aurora"] .sf-page-header h1 { color: #FFFFFF; text-shadow: none; }
.sf-root[data-template="template76-aurora"] .sfx-menu-noir p, .sf-root[data-template="template76-aurora"] .sfx-menu-mast p, .sf-root[data-template="template76-aurora"] .sfx-menu-type p, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel p, .sf-root[data-template="template76-aurora"] .sfx-menu-block p, .sf-root[data-template="template76-aurora"] .sfx-hero-type p, .sf-root[data-template="template76-aurora"] .sfx-page-photo p, .sf-root[data-template="template76-aurora"] .sfx-mani-head p, .sf-root[data-template="template76-aurora"] .sfx-ed-head p, .sf-root[data-template="template76-aurora"] .sfx-con-head p, .sf-root[data-template="template76-aurora"] .sf-page-header p { color: #C7C9D9; }
.sf-root[data-template="template76-aurora"] .sfx-menu-noir .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-menu-mast .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-menu-type .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-menu-block .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-hero-type .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-page-photo .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-mani-head .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-ed-head .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-con-head .sfx-kicker, .sf-root[data-template="template76-aurora"] .sf-page-header .sfx-kicker, .sf-root[data-template="template76-aurora"] .sfx-menu-noir .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-menu-mast .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-menu-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-menu-block .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-hero-type .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-page-photo .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-mani-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-ed-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-con-head .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sf-page-header .sfx-menu-noir__eyebrow, .sf-root[data-template="template76-aurora"] .sfx-menu-noir .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-menu-mast .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-menu-type .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-menu-block .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-hero-type .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-page-photo .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-mani-head .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-ed-head .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sfx-con-head .sfx-mast__bar, .sf-root[data-template="template76-aurora"] .sf-page-header .sfx-mast__bar { color: #D9D0FF !important; }
.sf-root[data-template="template76-aurora"] .sfx-menu-noir .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-menu-mast .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-menu-type .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-menu-board__panel .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-menu-block .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-hero-type .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-page-photo .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-mani-head .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-ed-head .sfx-rule, .sf-root[data-template="template76-aurora"] .sfx-con-head .sfx-rule, .sf-root[data-template="template76-aurora"] .sf-page-header .sfx-rule { background: #D9D0FF; }
.sf-root[data-template="template76-aurora"] .sfx-mast__bar { border-color: rgba(255,255,255,.3); }
.sf-root[data-template="template76-aurora"] .sfx-zig__media, .sf-root[data-template="template76-aurora"] .sfx-tile--photo { background-color: #16181B; }

/* Hero frames that held the photo in an arch: square prints, rounded corners. */
.sf-root:not([data-locked]) .bx-awning__window, .sf-root:not([data-locked]) .bx-garden__frame, .sf-root:not([data-locked]) .bx-sol__art, .sf-root:not([data-locked]) .sfx-case__art { aspect-ratio: 1 / 1; }
.sf-root:not([data-locked]) .bx-awning__photo { border-radius: 24px; }
.sf-root:not([data-locked]) .bx-garden__frame::before { border-radius: 36px; }
.sf-root:not([data-locked]) .bx-garden__photo { border-radius: 26px; }
.sf-root:not([data-locked]) .bx-sol__photo { border-radius: 26px; }
.sf-root:not([data-locked]) .sfx-case__arch, .sf-root:not([data-locked]) .sfx-case__frame { border-radius: calc(var(--sf-radius) + 12px); }
.sf-root:not([data-locked]) .bx-steam__photo { aspect-ratio: 1 / 1; border-radius: 22px; }
.sf-root:not([data-locked]) .sfx-bill__photo { border-radius: calc(var(--sf-radius) + 12px); }
/* The three windows: framed prints in a row, the middle one a little taller. */
.sf-root:not([data-locked]) .bx-arches__win { aspect-ratio: 1 / 1; border-radius: 18px; border-bottom: 6px solid #fff; }
.sf-root:not([data-locked]) .bx-arches__win1 { aspect-ratio: 4 / 5; }

/* Country heroes: the doors, windows and keyholes become framed panels. */
.sf-root:not([data-locked]) .hx-window { border-radius: 22px; }
.sf-root:not([data-locked]) .hx-window__in { border-radius: 14px; }
.sf-root:not([data-locked]) .hx-door__in { aspect-ratio: 1 / 1; border-radius: 12px; }
.sf-root:not([data-locked]) .hx-nubiadoor { border-radius: 28px; }
.sf-root:not([data-locked]) .hx-nubiadoor__in { aspect-ratio: 1 / 1; border-radius: 16px; }
.sf-root:not([data-locked]) .hx-alfiz__arch { border-radius: 22px 22px 0 0; }
.sf-root:not([data-locked]) .hx-alfiz__in { aspect-ratio: 1 / 1; border-radius: 14px 14px 0 0; }
.sf-root:not([data-locked]) .hx-bluedoor { border-radius: 26px 26px 0 0; }
.sf-root:not([data-locked]) .hx-bluedoor__in { aspect-ratio: 1 / 1; border-radius: 18px 18px 0 0; }
.sf-root:not([data-locked]) .hx-bluedoor__in .hx__photo { border-radius: 12px 12px 0 0; }
.sf-root:not([data-locked]) .hx-temple__in { aspect-ratio: 1 / 1; }
/* The tall cartouche and the stitched oval: same gold and stitching, a square print inside. */
.sf-root:not([data-locked]) .hx-cartouche { aspect-ratio: 1 / 1; border-radius: 34px; }
.sf-root:not([data-locked]) .hx-cartouche__in, .sf-root:not([data-locked]) .hx-cartouche__in .hx__photo { border-radius: 24px; }
.sf-root:not([data-locked]) .bxm-tat__medal { aspect-ratio: 1 / 1; border-radius: 32px; }
.sf-root:not([data-locked]) .bxm-tat__photo { border-radius: 22px; }

/* Mediterranean: Zaytoun's stone arch and Arabian Nights' gilded arch. */
.sf-root:not([data-locked]) .bxm-zay__arch { aspect-ratio: 1 / 1; border-radius: 26px; }
.sf-root:not([data-locked]) .bxm-zay__arch::after { border-radius: 20px; }
.sf-root:not([data-locked]) .bxm-zay__photo { border-radius: 18px; }
.sf-root:not([data-locked]) .bxm-night__arch { aspect-ratio: 1 / 1; }
.sf-root:not([data-locked]) .bxm-night__arch-in { -webkit-mask: none; mask: none; border-radius: 24px; }
.sf-root:not([data-locked]) .bxm-night__photo { -webkit-mask: none; mask: none; border-radius: 17px; }

/* Dish cards and menu photos that were arch-topped. */
.sf-root:not([data-locked])[data-template="template19-patisserie"] .sf-card-img { border-radius: 14px; }
.sf-root:not([data-locked])[data-template="template30-mezze"] .sf-card-img { border-radius: 12px; }
.sf-root:not([data-locked])[data-template="template33-bloom"] .sf-card-img { border-radius: 16px; }
.sf-root:not([data-locked])[data-template="template33-bloom"] .sf-menu-item:not(.no-photo) .sf-menu-item-img { aspect-ratio: 1 / 1; border-radius: 18px; }
.sf-root:not([data-locked]) .sw[data-scene="florist"] .sw__card img, .sf-root:not([data-locked]) .sw[data-scene="florist"] .sw__card-blank { aspect-ratio: 1 / 1; border-radius: 18px; }
@media (hover: none) and (prefers-reduced-motion: no-preference) {.sf-scroll-row > .sf-card[data-sf-focus]{ transform: translateY(-4px); }.sf-card[data-sf-focus]{ transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16,24,40,.14); }.sf-value[data-sf-focus]{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16,24,40,.09); }.sf-root .sf-card[data-sf-focus] .sf-botanical{ transform: scale(1.05); }.sf-root[data-cards="flat"] .sf-card[data-sf-focus]{ box-shadow: none; transform: none; background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-surface)); }.sf-root[data-cards="bordered"] .sf-card[data-sf-focus]{ box-shadow: none; transform: none; border-color: var(--sf-primary); }.sf-root[data-template="classic"] .sf-card[data-sf-focus] .sf-card-img img{ transform: scale(1.06); }.sf-root[data-template="template22-corner-market"] .sf-card[data-sf-focus]{ border-color: var(--sf-primary); transform: translateY(-3px); }.sf-root[data-template="template25-smash-burger"] .sf-card[data-sf-focus]{ transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #1A120E; }.sf-root[data-template="template32-bowl"] .sf-card[data-sf-focus] .sf-card-img img{ transform: scale(1.07) rotate(-1deg); }.sf-root[data-template="template33-bloom"] .sf-card[data-sf-focus] .sf-card-img img{ transform: scale(1.06); }.sf-root[data-template="template44-studio3d"] .sf-card[data-sf-focus]{ transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(24,24,27,.4); }.sf-root[data-template="template33-bloom"] .sfx-cat:has(.sfx-cat__emoji)[data-sf-focus], .sf-root[data-template="template34-atelier"] .sfx-cat:has(.sfx-cat__emoji)[data-sf-focus]{ transform: translateY(-3px); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--sf-primary) 60%, transparent); }.sf-root .sf-card[data-sf-focus]{ transform: translateY(-3px); box-shadow: 0 16px 38px rgba(16,24,40,.12); }@media (prefers-reduced-motion: reduce){.sf-root .sf-card[data-sf-focus]{ transform: none; }}.sf-root .sfx-sticker[data-sf-focus]{ transform: rotate(-4deg) scale(1.04); }.sf-root .sfx-case__tag[data-sf-focus]{ transform: translateY(-3px); }.sf-root .sfx-aisle__tile[data-sf-focus]{ border-color: var(--sf-primary); transform: translateY(-2px); }@media (prefers-reduced-motion: reduce){.sf-root .sfx-aisle__tile[data-sf-focus], .sf-root .sfx-case__tag[data-sf-focus]{ transform: none; }}.sf-root .sfx-cat[data-sf-focus] img{ transform: scale(1.05); }.sf-root .sfx-gallery__tile[data-sf-focus] img{ transform: scale(1.06); }.sf-root .sfx-actiontile[data-sf-focus]{ transform: translateY(-3px); border-color: var(--sf-primary); box-shadow: 0 16px 36px rgba(16,24,40,.1); }.sf-root .bx-awning__tag[data-sf-focus]{ transform: translateY(-3px); }.sf-root .bx-crate__tile[data-sf-focus]{ transform: rotate(0) scale(1.03); z-index: 2; }.sf-root .bx-garden__card[data-sf-focus]{ transform: translateY(-3px); }.sf-root .bx-lux__card[data-sf-focus]{ transform: translateY(-3px); }.sf-root .bx-bento__dish[data-sf-focus] .bx-bento__img{ transform: scale(1.05); }.sf-root .bx-forno__tag[data-sf-focus]{ transform: translateY(-3px); }.sf-root .bx-sol__badge[data-sf-focus]{ transform: translateY(-3px); }.sf-root .bx-trompo__ticket[data-sf-focus]{ transform: translateX(-4px); }.sf-root .sw__card[data-sf-focus]{ transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20,10,5,.45); }.sf-root[data-template="template72-pizza-pop"] .sf-card[data-sf-focus]{ transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #C21F15; }.sf-root .sg-au__add[data-sf-focus]{ transform: scale(1.08); }.sf-root:not([data-locked]) :is(.sf-card, .sf-menu-item, .sf-btn, .sf-add, .sfx-cat, .sfx-gallery__tile, .sfx-actiontile):active { transform: scale(.97); transition-duration: .08s; }}
/* ── Make it yours: owner touches (lib/websiteStyle.ts) ── */
.sf-root[data-pattern] { background-attachment: fixed; }
.sf-root[data-pattern="dots"] { background-image: radial-gradient(color-mix(in srgb, var(--sf-text) 13%, transparent) 1.4px, transparent 1.6px); background-size: 22px 22px; }
.sf-root[data-pattern="grid"] { background-image: linear-gradient(color-mix(in srgb, var(--sf-text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sf-text) 7%, transparent) 1px, transparent 1px); background-size: 28px 28px; }
.sf-root[data-pattern="lines"] { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sf-text) 6%, transparent) 0 1px, transparent 1px 14px); }
.sf-root[data-pattern="checks"] { background-image: conic-gradient(color-mix(in srgb, var(--sf-primary) 7%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--sf-primary) 7%, transparent) 0 75%, transparent 0); background-size: 36px 36px; }
.sf-root[data-pattern="waves"] { background-image: radial-gradient(circle at 50% 120%, transparent 18px, color-mix(in srgb, var(--sf-primary) 9%, transparent) 19px 20px, transparent 21px); background-size: 40px 24px; }
.sf-root[data-pattern="grain"] { background-image: radial-gradient(color-mix(in srgb, var(--sf-text) 9%, transparent) 0.6px, transparent 0.8px), radial-gradient(color-mix(in srgb, var(--sf-text) 6%, transparent) 0.6px, transparent 0.8px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }

/* Top bar colour. The drawer and popups live outside .sf-nav, so they keep the template's colours. */
.sf-root[data-navbar] .sf-nav { box-shadow: 0 1px 0 rgba(0,0,0,.06) !important; }
.sf-root[data-navbar="light"] .sf-nav { background: #FFFFFF !important; border-bottom-color: rgba(0,0,0,.08) !important; }
.sf-root[data-navbar="light"] .sf-nav .sf-logo, .sf-root[data-navbar="light"] .sf-nav .sf-nav-links a { color: #16181D !important; }
.sf-root[data-navbar="light"] .sf-nav .sf-burger span { background: #16181D !important; }
.sf-root[data-navbar="dark"] .sf-nav { background: #121418 !important; border-bottom-color: rgba(255,255,255,.08) !important; }
.sf-root[data-navbar="brand"] .sf-nav { background: var(--sf-primary) !important; border-bottom-color: transparent !important; }
.sf-root[data-navbar="dark"] .sf-nav .sf-logo, .sf-root[data-navbar="dark"] .sf-nav .sf-nav-links a { color: #FFFFFF !important; }
.sf-root[data-navbar="brand"] .sf-nav .sf-logo, .sf-root[data-navbar="brand"] .sf-nav .sf-nav-links a { color: var(--sf-on-primary) !important; }
.sf-root[data-navbar="dark"] .sf-nav .sf-nav-links a.active { color: var(--sf-accent) !important; }
.sf-root[data-navbar="brand"] .sf-nav .sf-nav-links a.active { text-decoration: underline; text-underline-offset: 6px; }
.sf-root[data-navbar="dark"] .sf-nav .sf-burger span { background: #FFFFFF !important; }
.sf-root[data-navbar="brand"] .sf-nav .sf-burger span { background: var(--sf-on-primary) !important; }
.sf-root[data-navbar="dark"] .sf-nav .sf-cart-icon, .sf-root[data-navbar="dark"] .sf-nav .sf-nav-call,
.sf-root[data-navbar="brand"] .sf-nav .sf-cart-icon, .sf-root[data-navbar="brand"] .sf-nav .sf-nav-call, .sf-root[data-navbar="dark"] .sf-nav .sf-call-icon, .sf-root[data-navbar="brand"] .sf-nav .sf-call-icon { background: #FFFFFF !important; color: #16181D !important; }
.sf-root[data-navbar="dark"] .sf-nav .sf-cart-icon svg, .sf-root[data-navbar="dark"] .sf-nav .sf-nav-call svg, .sf-root[data-navbar="dark"] .sf-nav .sf-call-icon svg,
.sf-root[data-navbar="brand"] .sf-nav .sf-cart-icon svg, .sf-root[data-navbar="brand"] .sf-nav .sf-nav-call svg, .sf-root[data-navbar="brand"] .sf-nav .sf-call-icon svg { stroke: #16181D !important; }
.sf-root[data-navbar="brand"] .sf-nav .sf-signin { background: var(--sf-on-primary) !important; color: var(--sf-primary) !important; }
.sf-root[data-navbar="dark"] .sf-nav .sf-signin { background: var(--sf-primary) !important; color: var(--sf-on-primary) !important; }

/* Button and card shapes. */
.sf-root[data-buttons] .sf-btn, .sf-root[data-buttons] .sfx-btn-ghost, .sf-root[data-buttons] .sfx-btn-invert, .sf-root[data-buttons] .sf-signin { border-radius: var(--sf-btn-radius) !important; }
.sf-root[data-corners] .sf-card, .sf-root[data-corners] .sf-menu-item, .sf-root[data-corners] .sf-card-img { border-radius: var(--sf-radius) !important; }
.sf-root[data-corners] .sf-card .sf-card-img { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Hero tone: a colour layer that keeps every pixel's brightness, so text on the
   hero stays exactly as readable as the template made it. Inside its own
   isolated layer, so it never touches the top bar or anything outside. */
.sf-root .sf-hero-toned { position: relative; isolation: isolate; }
.sf-root .sf-hero-toned::after { content: ''; position: absolute; inset: 0; z-index: 2147483000; pointer-events: none; background: var(--sf-tone); opacity: var(--sf-tone-o); mix-blend-mode: color; }
.sf-root .sf-hero-toned.is-mono::after { mix-blend-mode: saturation; }