/* Ontabee storefront design system (2026-10-27 redesign).
 *
 * Shared by EVERY storefront page: index.html (landing + order app) and the
 * site-shell pages (about, gallery, contact, offers, reviews, book, gift card,
 * accessibility, ...). Page-specific layout stays in index.html's own <style>
 * and lib/site.css; anything two pages both draw lives here.
 *
 * Built on the tenant-controlled variables lib/theme.js injects into
 * <style id="theme-vars"> (--brand --on-brand --bg --surface --error
 * [--secondary --font-heading --font-body]). Everything else is DERIVED from
 * them with color-mix(), so one brand colour gives every tenant a coherent
 * tinted palette without asking them for more.
 *
 * Presets are `html[data-theme=<preset>]` (lib/theme.js PRESETS). Each one
 * restates a handful of tokens -- type, radius, canvas, button shape -- and
 * never re-declares components.
 *
 * Design spec: docs/superpowers/specs/2026-10-27-storefront-redesign-design.md
 */

/* ---------- Fonts (self-hosted, Latin, OFL — fonts/OFL-NOTICE.txt) ----------
   The browser only downloads a face a rendered element actually uses, so a
   tenant on the Fraunces presets never fetches Bricolage and vice versa. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/bricolage-700.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url("../fonts/fraunces-500-italic.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  /* Tenant-controlled (lib/theme.js overwrites these). --brand #c2410c is
     Ontabee orange (brand decision 2026-07-14); white-on-brand clears AA. */
  --brand:#c2410c;--on-brand:#fff;--bg:#fff;--surface:#fff;--error:#b91c1c;
  --ink:#16191f;--mute:#5b6570;
  --ok-bg:#dcfce7;--ok-fg:#166534;--err-bg:#fee2e2;--err-fg:#b91c1c;
  --warn-bg:#fef3c7;--warn-fg:#854d0e;

  /* Derived palette. --brand-ink is the brand pulled toward the ink colour:
     safe for TEXT on a light surface even when the brand itself is a pale
     yellow (lib/theme.js only guarantees on-brand vs brand contrast). */
  --line:color-mix(in srgb, var(--ink) 11%, transparent);
  --line-strong:color-mix(in srgb, var(--ink) 20%, transparent);
  --canvas:color-mix(in srgb, var(--brand) 3%, var(--bg));
  --tint:color-mix(in srgb, var(--brand) 8%, var(--surface));
  --tint-2:color-mix(in srgb, var(--brand) 15%, var(--surface));
  --brand-ink:color-mix(in srgb, var(--brand) 72%, var(--ink));
  --brand-deep:color-mix(in srgb, var(--brand) 62%, #0b0d10);
  --ink-soft:color-mix(in srgb, var(--ink) 78%, var(--bg));
  --star:#f5a524;

  /* Type */
  --font-display:var(--font-heading, var(--preset-heading-font, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif));
  --font-ui:var(--font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --display-weight:700;
  --display-tracking:-.025em;
  --fs-hero:clamp(2.6rem, 3.6vw + 1.6rem, 5.25rem);
  --fs-h2:clamp(1.75rem, 1.6vw + 1.25rem, 2.75rem);
  --fs-h3:clamp(1.15rem, .4vw + 1.05rem, 1.35rem);
  --eyebrow-case:uppercase;

  /* Shape + depth */
  --r-xs:8px;--r-sm:12px;--r:18px;--r-lg:26px;--r-btn:999px;--r-chip:999px;
  --radius:var(--r);
  --sh-1:0 1px 2px rgb(15 23 42 / .05),0 1px 3px rgb(15 23 42 / .06);
  --sh-2:0 2px 4px -1px rgb(15 23 42 / .05),0 10px 24px -6px rgb(15 23 42 / .12);
  --sh-3:0 30px 60px -18px rgb(15 23 42 / .30);
  --shadow:var(--sh-1);

  /* Layout */
  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 32px);
  --nav-h:68px;
  --section-y:clamp(56px, 7vw, 104px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:899px){:root{--nav-h:60px}}

/* ---------- Presets ---------- */
[data-theme="classic"]{--r:18px}
[data-theme="fresh"]{--r:26px;--r-lg:32px;--canvas:color-mix(in srgb, var(--brand) 6%, var(--bg));--tint:color-mix(in srgb, var(--brand) 11%, var(--surface))}
[data-theme="bold"]{--r:10px;--r-lg:14px;--r-btn:10px;--r-chip:8px;--display-weight:800;--display-tracking:-.035em;--canvas:#f3f3f1;--fs-hero:clamp(2.8rem, 4.6vw + 1.6rem, 6rem)}
[data-theme="elegant"]{--preset-heading-font:"Fraunces", Georgia, "Times New Roman", serif;--display-weight:600;--display-tracking:-.01em;--r:6px;--r-lg:8px;--r-btn:4px;--r-chip:4px;--canvas:color-mix(in srgb, #f3ece2 70%, var(--bg));--mute:#6f675f}
[data-theme="editorial"]{--preset-heading-font:"Fraunces", Georgia, "Times New Roman", serif;--display-weight:600;--display-tracking:-.02em;--r:2px;--r-lg:2px;--r-sm:2px;--r-btn:2px;--r-chip:2px;--canvas:color-mix(in srgb, #efe7da 75%, var(--bg));--sh-1:none;--sh-2:0 0 0 1px var(--line);--shadow:none}
[data-theme="appetite"]{--r:22px;--r-lg:30px;--display-weight:800;--canvas:color-mix(in srgb, #ffedd5 55%, var(--bg));--tint:color-mix(in srgb, var(--brand) 12%, #fff)}
[data-theme="modern"]{--r:12px;--r-lg:16px;--r-btn:10px;--r-chip:8px;--canvas:#f5f6f8;--eyebrow-case:none}
:root[data-theme="night"]{
  --bg:#0c0f14;--surface:#151a22;--ink:#eef2f7;--mute:#9aa6b6;
  --ok-bg:#12341f;--ok-fg:#a7f3c4;--err-bg:#3d1515;--err-fg:#fecaca;--warn-bg:#3a2a0b;--warn-fg:#fde68a;
  --canvas:var(--bg);--brand-ink:color-mix(in srgb, var(--brand) 55%, #fff);
  --sh-1:0 1px 2px rgb(0 0 0 / .4);--sh-2:0 12px 30px -10px rgb(0 0 0 / .6);--sh-3:0 30px 60px -18px rgb(0 0 0 / .7);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:16px/1.6 var(--font-ui);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh}
img,svg,video{max-width:100%;display:block}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,legend{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1.12;text-wrap:balance;color:var(--ink)}
p{text-wrap:pretty}
a{color:var(--brand-ink);text-underline-offset:3px}
a,button,input,textarea,select,summary{outline-offset:3px}
:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 70%, #1d4ed8);outline-offset:3px}
::selection{background:color-mix(in srgb, var(--brand) 25%, transparent)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--sh-2);font-weight:700;text-decoration:none;transition:top .15s var(--ease)}
.skip:focus{top:12px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Layout primitives ---------- */
.wrap,.ds-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.ds-section{padding-block:var(--section-y)}
.ds-section.tinted{background:var(--surface)}
.ds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(24px, 3vw, 40px)}
.ds-head h2{font-size:var(--fs-h2);max-width:20ch}
.ds-head p{color:var(--mute);max-width:56ch;margin-top:10px;font-size:1.05rem}
.eyebrow,.sec-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--brand-ink);font:700 .78rem/1.2 var(--font-ui);text-transform:var(--eyebrow-case);letter-spacing:.16em}
.eyebrow::before,.sec-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;flex:none}
[data-theme="modern"] .eyebrow,[data-theme="modern"] .sec-eyebrow{letter-spacing:.02em;font-size:.85rem}
.muted,.note{color:var(--mute)}
.note{font-size:.88rem;margin-top:8px}

/* ---------- Icons ---------- */
.ms-icon,.ds-icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-icon.filled{fill:currentColor;stroke:none}

/* ---------- Buttons ----------
   .btn is the system; the legacy .primary/.secondary class names the order
   app's markup and JS already use are styled as the same thing (index.html
   narrows them back to full-width form buttons where they act as such). */
.btn,.site-nav-cta,.pill-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:var(--r-btn);
  border:1px solid transparent;font:700 .95rem/1.2 var(--font-ui);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn:active,.site-nav-cta:active{transform:translateY(1px)}
.btn-primary,.site-nav-cta{background:var(--brand);color:var(--on-brand);box-shadow:0 1px 0 rgb(255 255 255 / .18) inset,0 6px 16px -6px color-mix(in srgb, var(--brand) 65%, transparent)}
.btn-primary:hover,.site-nav-cta:hover{background:color-mix(in srgb, var(--brand) 88%, #000);box-shadow:0 1px 0 rgb(255 255 255 / .18) inset,0 10px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent)}
.btn-ghost,.pill-link{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover,.pill-link:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{background:#fff;color:#111;box-shadow:0 10px 30px -10px rgb(0 0 0 / .45)}
.btn-light:hover{background:#f4f4f5}
.btn-glass{background:rgb(255 255 255 / .12);color:#fff;border-color:rgb(255 255 255 / .38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgb(255 255 255 / .22)}
.btn-lg{min-height:54px;padding:14px 28px;font-size:1.02rem}
.btn-sm{min-height:38px;padding:8px 14px;font-size:.86rem}
.btn .ds-icon{width:18px;height:18px}
[data-theme="elegant"] .btn,[data-theme="elegant"] .site-nav-cta,[data-theme="editorial"] .btn,[data-theme="editorial"] .site-nav-cta{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}

/* ---------- Chips + badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border-radius:var(--r-chip);background:var(--surface);border:1px solid var(--line);font:600 .82rem/1.2 var(--font-ui);color:var(--ink);white-space:nowrap}
.chip .ds-icon{width:15px;height:15px}
.chip-glass{background:rgb(255 255 255 / .14);border-color:rgb(255 255 255 / .28);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.badge{display:inline-flex;align-items:center;gap:6px;flex:none;border-radius:var(--r-chip);padding:4px 10px;font:700 .74rem/1.2 var(--font-ui);letter-spacing:.02em;white-space:nowrap;background:var(--tint);color:var(--brand-ink)}
.badge.open{background:var(--ok-bg);color:var(--ok-fg)}
.badge.open::before,.chip.open::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 25%, transparent)}
.badge.closed{background:var(--warn-bg);color:var(--warn-fg)}
.badge.rating{background:var(--ink);color:var(--surface)}
.stars{display:inline-flex;gap:1px;color:var(--star);letter-spacing:0}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card-lift{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

/* ---------- Forms ---------- */
label{display:block;margin:14px 0 6px;font-weight:600;font-size:.9rem}
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{min-height:96px;resize:vertical}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--mute) 80%, transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:18px;height:18px}
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6570' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 7px}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;margin-top:12px}
legend{font-size:.95rem;padding:0 4px}
.error{color:var(--error);margin-top:8px;font-size:.9rem;font-weight:600}
.ok-note{color:var(--ok-fg);font-weight:600}

/* ---------- Site header (nav) ----------
   Fixed height from the very first frame -- the bar used to be display:none
   until /storefront answered, then pushed the whole page down (mobile CLS
   0.55). The inner content fills in later; the box never moves. */
/* The frosted glass sits on a ::before, NOT on the nav: backdrop-filter makes
   its element the containing block for position:fixed descendants, which
   clipped the phone drawer (fixed, inside the nav) to the 60px bar. */
.site-nav{position:sticky;top:0;z-index:50;height:var(--nav-h);border-bottom:1px solid var(--line)}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb, var(--surface) 86%, transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
.site-nav-inner{height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:8px}
.site-brand{display:inline-flex;align-items:center;gap:10px;min-width:0;margin-inline-end:16px;text-decoration:none;color:var(--ink);font:var(--display-weight) 1.15rem/1.1 var(--font-display);letter-spacing:var(--display-tracking);flex:0 1 auto}
.site-brand img{height:40px;width:auto;max-width:170px;object-fit:contain}
.site-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-nav-links{display:flex;align-items:center;gap:2px;min-width:0}
.site-nav-links a{position:relative;padding:9px 13px;border-radius:var(--r-btn);color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.93rem;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)}
.site-nav-links a:hover{background:var(--tint);color:var(--ink)}
.site-nav-links a[aria-current="page"]{color:var(--brand-ink);background:var(--tint)}
.site-nav-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex:none}
.site-nav-cta{min-height:42px;padding:9px 18px;font-size:.9rem}
.site-lang-wrap{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);cursor:pointer;margin:0}
.site-lang-wrap:hover{border-color:var(--line-strong)}
.site-lang-wrap .lang-globe{display:inline-flex;color:var(--mute)}
.site-lang-wrap .lang-globe .ds-icon{width:16px;height:16px}
.site-lang-switch{appearance:none;-webkit-appearance:none;border:0;background:transparent;min-height:0;width:auto;padding:0 16px 0 0;box-shadow:none;font:600 .86rem var(--font-ui);color:var(--ink);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6570' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px}
.site-lang-switch:focus{box-shadow:none}
.acct-link,.site-acct{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);font:600 .86rem var(--font-ui);cursor:pointer;white-space:nowrap}
.acct-link:hover,.site-acct:hover{border-color:var(--line-strong)}
.site-nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.site-nav-toggle .ds-icon{width:22px;height:22px}
.site-nav-drawer{display:none}
.site-brand-skel{width:140px;height:22px;border-radius:6px;background:var(--line)}

@media (max-width:899px){
  .site-nav-links{display:none}
  .site-nav-toggle{display:inline-flex}
  .site-nav-actions .site-lang-wrap{display:none}
  /* Account stays reachable on a phone as an icon button; its label is
     clipped, not removed, so it is still the button's accessible name. */
  .site-nav-actions .acct-link{width:42px;padding:0;justify-content:center}
  .site-nav-actions .acct-link .acct-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-nav-cta{min-height:40px;padding:8px 14px}
  .site-brand{margin-inline-end:4px}
  .site-brand img{height:34px;max-width:132px}
  .site-nav-drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:49;display:flex;flex-direction:column;gap:6px;padding:16px var(--gutter) 32px;background:var(--surface);overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
  .site-nav[data-open="1"] .site-nav-drawer{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .site-nav-drawer a.dr-link{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:var(--display-weight) 1.35rem/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
  .site-nav-drawer a.dr-link[aria-current="page"]{color:var(--brand-ink)}
  .site-nav-drawer a.dr-link::after{content:"→";font-family:var(--font-ui);color:var(--mute);font-size:1rem}
  .site-nav-drawer .dr-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .site-nav-drawer .dr-row > *{flex:1 1 auto}
  .site-nav-drawer .acct-link,.site-nav-drawer .site-acct,.site-nav-drawer .site-lang-wrap{display:inline-flex;justify-content:center;min-height:48px}
  html.nav-open{overflow:hidden}
}
@media (max-width:380px){.site-nav-cta .cta-long{display:none}}

/* ---------- Page hero (site-shell pages) ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-deep));padding:clamp(56px, 8vw, 112px) 0 clamp(44px, 6vw, 80px)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--page-hero-img, none) center/cover no-repeat;opacity:.9;transform:scale(1.02)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 400px at 10% 0%, rgb(255 255 255 / .08), transparent 60%),
  linear-gradient(180deg, rgb(10 12 16 / .35), rgb(10 12 16 / .72))}
html:not(.has-page-hero-img) .page-hero::after{background:radial-gradient(900px 380px at 85% -10%, rgb(255 255 255 / .16), transparent 60%),radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.4px) 0 0/22px 22px}
.page-hero-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.page-hero h1{color:#fff;font-size:clamp(2.3rem, 3vw + 1.4rem, 4rem);max-width:18ch}
.page-hero .note,.page-hero p{color:rgb(255 255 255 / .86);font-size:clamp(1rem, .4vw + .95rem, 1.2rem);margin-top:12px;max-width:60ch}
/* The subtitle is filled in after /storefront answers: hold its line from
   the first frame so the page under the band does not drop when it lands. */
.page-hero .note:empty{display:block;min-height:1.6em}
@media (max-width:640px){.page-hero p.note,.page-hero .note:empty{min-height:3.2em}}
.page-hero .crumbs{display:flex;gap:8px;margin-bottom:16px;font-size:.85rem;color:rgb(255 255 255 / .75)}
.page-hero .crumbs a{color:#fff;text-decoration:none}

/* ---------- Footer (shared) ---------- */
.site-footer,#site-footer-band{background:#0f1216;color:#c9ced6;margin-top:0}
/* Not shown until renderFooter has filled it: an empty band on screen while
   the page loads was then pushed down by the content (CLS). */
.site-footer:has(> .site-footer-inner:empty){display:none}
[data-theme="night"] .site-footer,[data-theme="night"] #site-footer-band{background:#07090c}
.site-footer-inner,.foot-shell{max-width:var(--wrap);margin-inline:auto;padding:clamp(48px, 6vw, 80px) var(--gutter) 28px}
.sf-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:720px){.sf-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1024px){.sf-grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.sf-brand .sf-name{display:block;color:#fff;font:var(--display-weight) 1.6rem/1.15 var(--font-display);letter-spacing:var(--display-tracking)}
.sf-brand .sf-logo{height:48px;width:auto;max-width:190px;object-fit:contain;background:#fff;border-radius:10px;padding:6px 10px}
.sf-about{margin-top:14px;max-width:44ch;line-height:1.7;color:#a7aeb8;font-size:.93rem}
.sf-col h3{font:700 .74rem/1.2 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#7f8792;margin-bottom:16px}
.sf-links,.footer-links{display:flex;flex-direction:column;gap:11px}
.sf-links a,.footer-links a,.sf-contact a{color:#e6e9ee;text-decoration:none;font-size:.95rem}
.sf-links a:hover,.footer-links a:hover,.sf-contact a:hover{color:#fff;text-decoration:underline}
.sf-contact{display:flex;flex-direction:column;gap:12px;font-size:.95rem}
.sf-contact > *{display:flex;align-items:flex-start;gap:10px;color:#c9ced6}
.sf-contact .ds-icon{margin-top:3px;color:#7f8792}
.sf-hours{display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.sf-hours .sf-hrow{display:flex;justify-content:space-between;gap:16px;color:#a7aeb8}
.sf-hours .sf-hrow.today{color:#fff;font-weight:700}
.sf-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sf-social a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid rgb(255 255 255 / .16);color:#e6e9ee;text-decoration:none;font-size:.85rem;font-weight:600}
.sf-social a:hover{background:rgb(255 255 255 / .08);border-color:rgb(255 255 255 / .32)}
.sf-social .ds-icon{width:18px;height:18px}
.sf-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 36px;margin-bottom:36px;border-bottom:1px solid rgb(255 255 255 / .1)}
.sf-cta h2{color:#fff;font-size:clamp(1.5rem, 1.2vw + 1.1rem, 2.2rem);max-width:22ch}
.sf-base{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:1px solid rgb(255 255 255 / .1);color:#7f8792;font-size:.84rem}
.sf-base a{color:#c9ced6}
.powered a{color:#c9ced6}
/* Legacy footer pills from older shells (kept harmless). */
.contact-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.contact-links a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid rgb(255 255 255 / .16);color:#e6e9ee;text-decoration:none;font-size:.88rem}

/* ---------- Branch / location cards ---------- */
.branch-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){.branch-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (min-width:1100px){.branch-grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}}
.branch-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.branch-card:hover{box-shadow:var(--sh-2)}
.branch-card .b-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.branch-card .b-head strong{font:var(--display-weight) 1.3rem/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
.branch-card .b-addr,.branch-card .b-hours{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);font-size:.95rem}
.branch-card .b-addr .ds-icon,.branch-card .b-hours .ds-icon{margin-top:3px;color:var(--mute)}
.branch-card .b-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.branch-card .b-actions .btn{flex:1 1 auto;min-height:44px;padding-inline:16px}
.branch-card .b-actions .b-map{flex:0 0 auto}
.ms-hours-toggle,.hours-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:2px 0;color:var(--brand-ink);font:700 .86rem var(--font-ui);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ms-hours-week{display:flex;flex-direction:column;gap:4px;margin-top:4px;font-size:.9rem;color:var(--mute)}
.ms-hours-row,.b-hours-row{display:flex;justify-content:space-between;gap:16px;max-width:340px;padding:3px 0;border-bottom:1px dashed var(--line);font-size:.9rem;color:var(--mute)}

/* ---------- Gallery mosaic ---------- */
.mosaic,.gallery-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));grid-auto-rows:clamp(140px, 22vw, 260px);grid-auto-flow:dense;gap:clamp(8px, 1.2vw, 16px)}
@media (min-width:900px){.mosaic,.gallery-grid{grid-template-columns:repeat(4, minmax(0,1fr))}}
.mosaic > *,.gallery-grid > *{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tint);margin:0}
.mosaic img,.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);transition:transform .6s var(--ease)}
.mosaic > :hover img,.gallery-grid > img:hover{transform:scale(1.04)}
/* One 2x2 feature tile, then a hole-free grid for ANY photo count: the last
   tile widens to absorb whatever the final row is short (quantity queries on
   the total, read off the first child). 2 columns on a phone, 4 above. */
.mosaic > :first-child,.gallery-grid > :first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:899px){
  .mosaic > :first-child:nth-last-child(2n) ~ :last-child,
  .gallery-grid > :first-child:nth-last-child(2n) ~ :last-child{grid-column:span 2}
}
@media (min-width:900px){
  .mosaic > :first-child:nth-last-child(4n) ~ :last-child,
  .gallery-grid > :first-child:nth-last-child(4n) ~ :last-child{grid-column:span 2}
  .mosaic > :first-child:nth-last-child(4n+3) ~ :last-child,
  .gallery-grid > :first-child:nth-last-child(4n+3) ~ :last-child{grid-column:span 3}
  .mosaic > :first-child:nth-last-child(4n+2) ~ :last-child,
  .gallery-grid > :first-child:nth-last-child(4n+2) ~ :last-child{grid-column:span 4}
}

/* ---------- Reviews ---------- */
.review-card,.reviews-strip-card{display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.review-card .stars,.reviews-strip-card .stars{font-size:1.05rem}
.review-comment{font-size:1.02rem;line-height:1.65;color:var(--ink)}
.review-card .review-comment::before,.reviews-strip-card .review-comment::before{content:"\201C";display:block;height:.55em;font:700 3rem/1 var(--font-display);color:var(--tint-2)}
.review-meta{color:var(--mute);font-size:.88rem;font-weight:600}

/* ---------- Offer cards ---------- */
.offer-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:24px 22px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.offer-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #f59e0b))}
.offer-line{font:var(--display-weight) 1.6rem/1.1 var(--font-display);letter-spacing:var(--display-tracking);color:var(--brand-ink)}
.offer-name{font-weight:700}
.offer-expiry{color:var(--mute);font-size:.86rem}
.offer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-strong)}
.offer-code{background:var(--tint);border:1.5px dashed color-mix(in srgb, var(--brand) 60%, transparent);border-radius:var(--r-xs);padding:7px 14px;font:700 .92rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--ink)}
.offer-copy{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-btn);padding:7px 14px;font:700 .84rem var(--font-ui);cursor:pointer}
.offer-copy:hover{border-color:var(--ink)}
.offer-auto{font-size:.86rem;color:var(--ok-fg);font-weight:700}
.offer-emoji{position:absolute;top:18px;inset-inline-end:16px;font-size:1.4rem;line-height:1}

/* ---------- Dialog base ---------- */
dialog{border:none;border-radius:var(--r-lg);max-width:440px;width:calc(100vw - 24px);padding:24px;background:var(--surface);color:var(--ink);margin:auto;max-height:86vh;overflow:auto;box-shadow:var(--sh-3)}
dialog::backdrop{background:rgb(10 12 16 / .55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@media (prefers-reduced-motion:no-preference){dialog[open]{animation:ds-pop .22s var(--ease)}}
@keyframes ds-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.dlg-close{position:absolute;top:12px;inset-inline-end:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 92%, transparent);color:var(--ink);cursor:pointer;font-size:15px;line-height:1;padding:0;box-shadow:var(--sh-1)}
.dlg-close:hover{background:var(--surface);border-color:var(--line-strong)}

/* ---------- Empty states ---------- */
.empty-note,.ds-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 20px;color:var(--mute);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r)}
.ds-empty .ds-icon{width:36px;height:36px;color:var(--brand-ink)}

/* ---------- Reveal on scroll (progressive: content is visible without JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js-reveal .reveal.in{opacity:1;transform:none}
}