/* ───────────────────────────────────────────────────────────────────────────
   SITE CHROME (static) — header, footer, newsletter band, newsletter popup.
   Static twin of SiteHeader / SiteFooter / Newsletter / NewsletterPopup in
   shared.jsx. Palette + fonts come from theme.css (load it BEFORE this file).

   Markup is emitted by tools/gen-chrome.js; behaviour lives in chrome.js
   (plain JS, no React/Babel). Desktop and mobile header variants are BOTH in
   the HTML and chosen by CSS, so nothing about layout depends on JS.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── HIRING BANNER ─────────────────────────────────────────────────────────
   Thin honey-gold bar ABOVE the sticky header (outside <header>, so it scrolls away
   and the header still sticks at top:0). Hidden by html.ss-hire-off, which
   theme.js sets in <head> when SS_HIRING is false or the visitor dismissed it.
   The a:hover rule is 0,2,1 so it beats each page's generic a:hover (0,1,1),
   which would otherwise repaint the label pink on gold. Text is INK on gold
   (9.9:1); white on gold fails contrast. */
.ss-hire{position:relative;background:var(--ss-hire);text-align:center;padding:9px 52px}
html.ss-hire-off .ss-hire{display:none}
.ss-hire a,.ss-hire a:hover{color:var(--ss-ink);text-decoration:none;font-family:var(--ss-body);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.ss-hire a:hover{text-decoration:underline;text-underline-offset:4px}
.ss-hire-arr{display:inline-block;transition:transform .2s}
.ss-hire a:hover .ss-hire-arr{transform:translateX(3px)}
.ss-hire-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--ss-ink);font-size:22px;line-height:1;cursor:pointer;opacity:.75}
.ss-hire-x:hover{opacity:1}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.ss-hd{background:var(--ss-cream);position:sticky;top:0;z-index:50}
.ss-hd a{text-decoration:none}
/* Utility bar (dark) */
.ss-hd-util{background:var(--ss-ink);border-bottom:1px solid var(--ss-rule);padding:10px 64px}
.ss-hd-util-in{display:flex;justify-content:space-between;align-items:center}
.ss-hd-hours{font-family:var(--ss-body);font-size:11px;color:rgba(250,239,241,.72);letter-spacing:.18em;text-transform:uppercase}
.ss-hd-hours .ss-hd-accent{color:var(--ss-blush);font-weight:600}
.ss-hd-util-right{display:flex;align-items:center;gap:28px}
.ss-hd-socials{display:flex;align-items:center;gap:16px}
.ss-hd-socials a{color:var(--ss-blush);display:inline-flex;align-items:center}
.ss-hd-pipe{width:1px;height:14px;background:rgba(250,239,241,.22)}
.ss-hd-call{display:inline-flex;align-items:center;gap:12px}
.ss-hd-call-label{font-family:var(--ss-body);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ss-blush);font-weight:600}
.ss-hd-call-num{font-family:var(--ss-display);font-style:italic;font-size:18px;letter-spacing:.01em;color:var(--ss-blush);font-weight:500}
.ss-hd-shop{background:var(--ss-wine);color:var(--ss-cream);padding:8px 22px;font-family:var(--ss-body);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
/* Main nav row */
.ss-hd-main{background:var(--ss-cream);padding:15px 64px 13px;border-bottom:1px solid var(--ss-rule)}
.ss-hd-main-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
.ss-hd-nav{display:flex;gap:32px}
.ss-hd-nav--right{justify-content:flex-end}
.ss-hd-nav a{font-family:var(--ss-body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ss-ink)}
.ss-hd-logo{justify-self:center}
.ss-hd-logo img{display:block}

/* Mobile header (hidden on desktop) */
.ss-hd-mob{display:none}
.ss-hd-mob-util{background:var(--ss-ink);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ss-hd-mob-tel{font-family:var(--ss-display);font-style:italic;font-size:15px;color:var(--ss-blush);font-weight:500}
/* Mobile utility bar as a permanent TAP TO CALL: the phone number, socials and
   Online Store button give way to one full-width tap target, and the logo bar
   below it tightens up to pay for the extra height. Opt in per page with
   `data-ss-tapbar` on <html>; chrome.js injects the link. Mobile only — the
   rules live in the max-width media query below. */
.ss-hd-mob-tap{display:none}
.ss-hd-mob-cta{display:none}
.ss-hd-mob-bar{padding:14px 16px;border-bottom:1px solid var(--ss-rule);display:flex;justify-content:space-between;align-items:center}
.ss-hd-burger{background:none;border:none;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.ss-hd-burger span{width:22px;height:1.5px;background:var(--ss-ink);transition:transform 200ms,opacity 200ms;display:block}
.ss-hd[data-menu="1"] .ss-hd-burger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ss-hd[data-menu="1"] .ss-hd-burger span:nth-child(2){opacity:0}
.ss-hd[data-menu="1"] .ss-hd-burger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.ss-hd-spacer{width:38px}
.ss-hd-scrim{position:fixed;inset:0;background:rgba(42,20,32,.55);opacity:0;pointer-events:none;transition:opacity 280ms;z-index:100}
.ss-hd[data-menu="1"] .ss-hd-scrim{opacity:1;pointer-events:auto}
.ss-hd-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:360px;background:var(--ss-cream);transform:translateX(-100%);transition:transform 320ms cubic-bezier(.4,0,.2,1);z-index:101;display:flex;flex-direction:column;overflow-y:auto}
.ss-hd[data-menu="1"] .ss-hd-drawer{transform:translateX(0);box-shadow:0 0 60px rgba(42,20,32,.25)}
.ss-hd-drawer-top{padding:22px 24px 18px;border-bottom:1px solid var(--ss-rule);display:flex;justify-content:center;align-items:center;position:relative}
.ss-hd-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;padding:8px;cursor:pointer;font-family:var(--ss-display);font-size:28px;color:var(--ss-wine);line-height:1}
.ss-hd-drawer-links{padding:8px 0;flex:1}
.ss-hd-drawer-links a{display:block;padding:18px 24px;font-family:var(--ss-body);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--ss-ink);border-bottom:1px solid var(--ss-rule)}
.ss-hd-drawer-social{display:flex;gap:30px;padding:30px 24px}
.ss-hd-drawer-social a{color:var(--ss-wine);display:inline-flex;align-items:center;border:none;padding:0}
.ss-hd-drawer-foot{padding:24px;border-top:1px solid var(--ss-rule);background:var(--ss-cream-warm)}
.ss-hd-drawer-hours{margin-bottom:10px}
.ss-hd-drawer-hours .ss-hd-accent2{font-family:var(--ss-body);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ss-sage-deep);font-weight:700}
.ss-hd-drawer-hours .ss-hd-detail{font-family:var(--ss-body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-sage-deep);font-weight:500;margin-top:3px}
.ss-hd-drawer-tel{display:block;font-family:var(--ss-display);font-style:italic;font-size:22px;color:var(--ss-wine);margin-bottom:16px}
.ss-hd-drawer-shop{display:block;text-align:center;background:var(--ss-wine);color:var(--ss-cream);padding:14px 0;font-family:var(--ss-body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
/* Shopify CTAs stay hidden until the shop is live (see chrome.js SS_SHOP_LIVE) */
.ss-shop-cta{display:none}
.ss-shop-live .ss-shop-cta{display:inline-block}
.ss-shop-live .ss-hd-drawer-shop{display:block}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.ss-ft{background:var(--ss-ink);color:var(--ss-cream)}
.ss-ft a{text-decoration:none}
.ss-ft-news{max-width:1440px;margin:0 auto;padding:48px 64px;display:flex;flex-wrap:wrap;gap:36px 56px;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(248,215,222,.16)}
.ss-ft-news-copy{flex:1 1 340px}
.ss-ft-kicker{font-family:var(--ss-body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ss-blush);font-weight:600;margin-bottom:12px}
.ss-ft-news h2{font-family:var(--ss-display);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-.01em;color:var(--ss-cream);margin:0}
.ss-ft-news h2 em{font-style:italic;color:var(--ss-blush)}
.ss-ft-news p{font-family:var(--ss-body);font-weight:300;font-size:14px;line-height:1.65;color:rgba(250,239,241,.7);margin:12px 0 0;max-width:440px}
.ss-ft-news-form{flex:1 1 380px}
.ss-ft-news form{display:flex;flex-wrap:wrap;gap:12px}
.ss-ft-news input{flex:1 1 220px;min-width:0;font-family:var(--ss-body);font-size:14px;padding:13px 16px;border:1px solid rgba(248,215,222,.28);background:rgba(248,215,222,.06);color:var(--ss-cream);outline:none}
.ss-ft-news button{font-family:var(--ss-body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:13px 26px;border:none;background:var(--ss-wine);color:var(--ss-cream)}
.ss-ft-thanks{font-family:var(--ss-display);font-style:italic;font-size:22px;color:var(--ss-blush);margin:0}

.ss-foot-top{padding:80px 64px 56px;max-width:1440px;margin:0 auto}
.ss-foot-grid{display:grid;grid-template-columns:1.5fr 1.3fr 1fr 1fr 1.1fr;gap:56px;align-items:start}
.ss-ft-tagline{font-family:var(--ss-display);font-style:italic;font-size:20px;color:var(--ss-blush);margin:22px 0 28px;line-height:1.35;max-width:280px}
.ss-ft-review{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(250,239,241,.35);padding:12px 18px;font-family:var(--ss-body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ss-cream)}
.ss-ft-stars{display:inline-flex;gap:2px;color:var(--ss-blush)}
.ss-ft-collabel{font-family:var(--ss-body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ss-blush);font-weight:600;margin-bottom:18px}
.ss-ft-link{font-family:var(--ss-body);font-size:13px;line-height:2;color:rgba(250,239,241,.82);display:block}
.ss-ft-addr{font-family:var(--ss-body);font-size:13px;line-height:1.85;color:rgba(250,239,241,.82);margin-bottom:6px}
.ss-ft-map{display:inline-flex;align-items:center;gap:6px;font-family:var(--ss-body);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ss-blush);margin-bottom:18px}
.ss-ft-hours{font-family:var(--ss-body);font-size:12.5px;color:rgba(250,239,241,.72);line-height:1.85;margin-bottom:14px;display:grid;grid-template-columns:max-content max-content;column-gap:14px}
.ss-ft-hours span:nth-child(even){color:rgba(250,239,241,.55)}
.ss-ft-tel{font-family:var(--ss-display);font-style:italic;font-size:22px;color:var(--ss-blush);letter-spacing:.01em}
.ss-ft-connect a{display:flex;align-items:center;gap:12px;line-height:2.2;font-family:var(--ss-body);font-size:13px;color:rgba(250,239,241,.82)}
.ss-ft-connect a>span:first-child{color:var(--ss-blush);display:inline-flex;align-items:center}
.ss-foot-band{border-top:1px solid rgba(250,239,241,.14);padding:26px 64px;font-family:var(--ss-body);font-size:12px;color:rgba(250,239,241,.62);text-align:center;line-height:1.7}
.ss-foot-band .ss-ft-area{letter-spacing:.22em;text-transform:uppercase;color:var(--ss-blush);font-size:9.5px;font-weight:600;margin-right:12px}
.ss-foot-copy{border-top:1px solid rgba(250,239,241,.14);padding:20px 64px;display:flex;justify-content:space-between;align-items:center;font-family:var(--ss-body);font-size:11px;color:rgba(250,239,241,.5);flex-wrap:wrap;gap:16px}
.ss-foot-copy .ss-ft-baked{font-style:italic;font-family:var(--ss-display);font-size:14px;color:rgba(250,239,241,.6)}

/* ── NEWSLETTER POPUP ────────────────────────────────────────────────────── */
.ss-pop{position:fixed;inset:0;z-index:9999;background:rgba(38,12,18,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.ss-pop[hidden]{display:none}
.ss-pop-card{position:relative;background:var(--ss-cream);color:var(--ss-ink);max-width:460px;width:100%;padding:48px 40px 40px;box-shadow:0 24px 70px rgba(38,12,18,.35);text-align:center}
.ss-pop-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:transparent;color:var(--ss-ink-soft);font-size:22px;line-height:1;cursor:pointer}
.ss-pop-kicker{font-family:var(--ss-body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ss-sage-deep);font-weight:600;margin-bottom:16px}
.ss-pop h2{font-family:var(--ss-display);font-weight:400;font-size:38px;line-height:1.08;letter-spacing:-.01em;color:var(--ss-ink);margin:0}
.ss-pop h2 em{font-style:italic;color:var(--ss-wine)}
.ss-pop p{font-family:var(--ss-body);font-weight:300;font-size:15px;line-height:1.7;color:var(--ss-ink-soft);margin:16px auto 24px;max-width:340px}
.ss-pop form{display:flex;flex-direction:column;gap:12px}
.ss-pop input{font-family:var(--ss-body);font-size:15px;padding:14px 16px;border:1px solid rgba(122,74,82,.25);background:#fff;color:var(--ss-ink);outline:none;text-align:center}
.ss-pop button[type="submit"]{font-family:var(--ss-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:15px 32px;border:1px solid var(--ss-wine);background:var(--ss-wine);color:var(--ss-cream)}
.ss-pop-no{margin-top:16px;background:transparent;border:none;cursor:pointer;font-family:var(--ss-body);font-size:12px;letter-spacing:.08em;color:var(--ss-ink-soft);text-decoration:underline}
/* Hiring strip at the foot of the popup card. Full-bleed via negative margins
   that cancel .ss-pop-card's 40px side/bottom padding. Same gold + ink as the
   site banner; hidden with it (SS_HIRING off or the visitor's 30-day dismiss). */
.ss-pop-hire,.ss-pop-hire:hover{display:block;margin:28px -40px -40px;padding:13px 20px;background:var(--ss-hire);color:var(--ss-ink);font-family:var(--ss-body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.ss-pop-hire:hover{text-decoration:underline;text-underline-offset:4px}
html.ss-hire-off .ss-pop-hire{display:none}
.ss-pop-thanks{font-family:var(--ss-display);font-style:italic;font-size:26px;color:var(--ss-wine);margin:12px 0}

@media (max-width:1023px){
 .ss-hd-util,.ss-hd-main{padding-left:32px!important;padding-right:32px!important}
 .ss-hd-nav{gap:20px!important}
 .ss-hd-main-in{gap:20px!important}
 .ss-foot-top{padding:56px 32px 40px!important}
 /* minmax(0,1fr), not 1fr: a bare `1fr` floors at the content's min-width, so an
    unbreakable item (the hours grid's max-content columns, the italic phone
    number) can force its track wider than its share and overflow the row. */
 .ss-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:40px 32px!important}
 .ss-foot-band,.ss-foot-copy,.ss-ft-news{padding-left:32px!important;padding-right:32px!important}
}
@media (max-width:767px){
 .ss-hire{padding:10px 46px}
 .ss-hire a{font-size:11px;letter-spacing:.12em}
 .ss-hire-x{right:4px;width:40px;height:40px}
 /* swap to the mobile header */
 .ss-hd-util,.ss-hd-main{display:none!important}
 .ss-hd-mob{display:block!important}
 html[data-ss-tapbar] .ss-hd-mob-tel,
 html[data-ss-tapbar] .ss-hd-mob-util .ss-hd-util-right{display:none}
 html[data-ss-tapbar] .ss-hd-mob-util{padding:14px 16px}
 html[data-ss-tapbar] .ss-hd-mob-tap{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;font-family:var(--ss-body);font-size:15px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ss-blush);text-decoration:none}
 html[data-ss-tapbar] .ss-hd-mob-tap svg{flex:none}
 /* Utility bar carries the call action now, so the logo bar can give back room */
 html[data-ss-tapbar] .ss-hd-mob-bar{padding:8px 16px}
 html[data-ss-tapbar] .ss-hd-mob-bar img{width:76px;height:56px}
 /* DOCK mode (`data-ss-tapbar="dock"`): the two primary actions move OUT of the
    header to a fixed bar at the bottom of the screen, in the thumb arc. The
    header keeps its normal utility row (phone, socials, Online Store), so this
    mode adds the actions rather than replacing anything. Always visible. */
 html[data-ss-tapbar="dock"] .ss-hd-mob-tel,
 html[data-ss-tapbar="dock"] .ss-hd-mob-util .ss-hd-util-right{display:flex}
 html[data-ss-tapbar="dock"] .ss-hd-mob-util{padding:6px 16px}
 /* The dock carries the shop-adjacent action now, so the mobile utility bar
    drops the Online Store button. Desktop keeps it. */
 html[data-ss-tapbar="dock"] .ss-hd-mob-util .ss-hd-shop{display:none}
 html[data-ss-tapbar="dock"] .ss-hd-mob-tel{font-size:14px}
 html[data-ss-tapbar="dock"] .ss-hd-mob-bar{padding:9px 16px}
 html[data-ss-tapbar="dock"] .ss-hd-mob-bar img{width:71px;height:52px}
 html[data-ss-tapbar="dock"] .ss-dock{display:flex}
 /* Keep the footer clear of the dock */
 html[data-ss-tapbar="dock"] body{padding-bottom:58px}
}
/* Fixed bottom action dock. Hidden on desktop; shown on mobile only in dock
    mode. Deliberately quiet: one hairline top edge, no shadow, no rounding, so it
   reads as part of the page rather than an app bar or an ad. Permanent — the
   transform/transition are kept only so the class can be animated if a future
   page wants a scroll-triggered variant. */
.ss-dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ss-ink);border-top:1px solid rgba(255,255,255,.14);transform:translateY(100%);transition:transform .26s ease;padding-bottom:env(safe-area-inset-bottom);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Every generated page sets `body{overflow-x:hidden}` to guard against sideways
   scroll. On iOS Safari that makes <body> a scroll container, which becomes the
   containing block for fixed children — the dock then anchors to the PAGE, not
   the screen, and only snaps into place once scrolling starts. `clip` gives the
   same overflow protection without creating a scroll container. Scoped to dock
   pages so nothing else changes. */
html[data-ss-tapbar="dock"] body{overflow-x:clip}
/* `translateZ(0)` rather than `none`: iOS Safari does not promote a fixed
   element to its own layer until something forces it, so before the first scroll
   it is painted against the page and only snaps to the screen once scrolling
   triggers a composite. Forcing the layer up front fixes that. */
.ss-dock[data-in]{transform:translateZ(0);-webkit-transform:translateZ(0)}
.ss-dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;font-family:var(--ss-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-decoration:none}
.ss-dock .ss-dock-call{color:var(--ss-blush)}
.ss-dock .ss-dock-cta{background:var(--ss-wine);color:#fff}
.ss-dock svg{flex:none}
/* DUO mode rules are mobile-only, so they belong inside the mobile query. This
   wrapper was missing, which left the `}` below stray — a top-level `}` is a
   parse error, and it made the browser DISCARD the whole @media (max-width:640px)
   block that follows. That block is what collapses the footer to one column, so
   without it the footer kept a 2-column grid at phone widths and overflowed
   ~38px to the right, making the entire page swipe sideways. */
@media (max-width:767px){
 /* DUO mode (`data-ss-tapbar="duo"`): the ink bar splits into the two primary
    actions, side by side and always visible. The call side stays ghost-on-ink so
    the wine inquiry slab reads as the primary of the two; the slab bleeds to the
    full height and right edge of the bar so it looks built-in, not pasted on. */
 html[data-ss-tapbar="duo"] .ss-hd-mob-util{padding:0;gap:0}
 html[data-ss-tapbar="duo"] .ss-hd-mob-tap{flex:1;gap:8px;padding:13px 10px;font-size:12.5px;letter-spacing:.14em;width:auto}
 html[data-ss-tapbar="duo"] .ss-hd-mob-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;background:var(--ss-wine);color:#fff;font-family:var(--ss-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-decoration:none;align-self:stretch}
 html[data-ss-tapbar="duo"] .ss-hd-mob-cta svg{flex:none}
}
@media (max-width:640px){
 .ss-foot-top{padding:44px 20px 32px!important}
 .ss-foot-grid{grid-template-columns:1fr!important;gap:34px!important}
 .ss-foot-band,.ss-foot-copy,.ss-ft-news{padding-left:20px!important;padding-right:20px!important}
 .ss-foot-copy{justify-content:center!important;text-align:center!important}
}