/* Elevated SF — global stylesheet (every page). Ported from design/final/styles.css; class names are
   identical to the prototype. Area styles load only where needed: menu.css, product.css, deals.css,
   delivery.css, prose.css, blog.css (see inc/assets.php). Tokens come from theme.json. */

/* Metric-matched fallbacks, so text keeps its line count while the web fonts swap in on a slow first
   visit (size-adjust = average advance ratio over the site's own copy — uppercased for the display
   face; overrides = the web font's ascent/descent ÷ size-adjust). Families are listed in theme.json.
   Display (Big Shoulders): Helvetica Neue Condensed (macOS), Arial Narrow (Office), else Arial Bold
   or a metric twin (Liberation Sans, Arimo) on Windows / Linux / ChromeOS.
   Body (Archivo, one face per weight the site uses): Arial or a metric twin. */
@font-face{font-family:"Big Shoulders Fallback HN";src:local("HelveticaNeue-CondensedBold"),local("Helvetica Neue Condensed Bold");font-weight:800;size-adjust:84.3%;ascent-override:116.7%;descent-override:25.3%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback AN";src:local("ArialNarrow-Bold"),local("Arial Narrow Bold"),local("RobotoCondensed-Bold"),local("Roboto Condensed Bold");font-weight:800;size-adjust:80.3%;ascent-override:122.5%;descent-override:26.5%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback AB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:800;size-adjust:66.4%;ascent-override:148.2%;descent-override:32.1%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback AB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:700;size-adjust:61.8%;ascent-override:159.1%;descent-override:34.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Helvetica"),local("Roboto");font-weight:400;size-adjust:98.2%;ascent-override:89.4%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Helvetica"),local("Roboto");font-weight:500;size-adjust:99.8%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600;size-adjust:95.5%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:700;size-adjust:98.5%;ascent-override:89.2%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:800;size-adjust:103%;ascent-override:85.3%;descent-override:20.4%;line-gap-override:0%}

:root{color-scheme:light;
--ink:var(--wp--preset--color--ink,#0B0B0B);--ink-2:var(--wp--preset--color--ink-2,#1C1C1C);--ink-hover:var(--wp--preset--color--ink-hover,#2B2B2B);--ink-line:var(--wp--preset--color--ink-line,#2E2E2E);--paper:var(--wp--preset--color--paper,#FFFFFF);--fog:var(--wp--preset--color--fog,#F3F3F0);--concrete:var(--wp--preset--color--concrete,#E8E8E4);--rule:var(--wp--preset--color--rule,#D6D7D2);--field:var(--wp--preset--color--field,#85867F);--graphite:var(--wp--preset--color--graphite,#434548);--mute:var(--wp--preset--color--mute,#5E605B);--smoke:var(--wp--preset--color--smoke,#A6A7A2);--red:var(--wp--preset--color--red,#D4111B);--red-press:var(--wp--preset--color--red-press,#AE0E16);--flare:var(--wp--preset--color--flare,#FF4F4F);--go:var(--wp--preset--color--go,#1B7A42);--go-on-ink:var(--wp--preset--color--go-on-ink,#3FCB74);
--f-display:var(--wp--preset--font-family--display,"Big Shoulders Display","Big Shoulders Fallback HN","Big Shoulders Fallback AN","Big Shoulders Fallback AB","Arial Narrow",sans-serif);--f-stamp:var(--wp--preset--font-family--stamp,"Big Shoulders Stencil Display","Big Shoulders Display","Big Shoulders Fallback HN","Big Shoulders Fallback AN","Big Shoulders Fallback AB",sans-serif);--f-body:var(--wp--preset--font-family--body,Archivo,"Archivo Fallback",ui-sans-serif,system-ui,sans-serif);
--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-md:clamp(1.0625rem,1rem + .3vw,1.25rem);--fs-lg:clamp(1.125rem,1.05rem + .3vw,1.3125rem);--fs-xl:clamp(1.5rem,1.3rem + .8vw,2rem);--fs-2xl:clamp(2rem,1.5rem + 2.3vw,3.5rem);--fs-3xl:clamp(2.75rem,1.8rem + 4vw,5.25rem);--fs-hero:clamp(3.25rem,1.6rem + 7vw,7.5rem);
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--section:var(--wp--custom--section,clamp(2.5rem,1.6rem + 3.8vw,6rem));--gutter:var(--wp--custom--gutter,clamp(16px,4vw,40px));--max:1280px;--hdr:64px;--bar:64px;
--r-1:var(--wp--custom--radius--1,4px);--r-2:var(--wp--custom--radius--2,10px);--r-3:var(--wp--custom--radius--3,18px);--r-pill:999px;--sh-2:0 18px 36px -18px rgb(11 11 11/.32);--sh-bar:0 -10px 24px -14px rgb(11 11 11/.3);
--ease:var(--wp--custom--ease,cubic-bezier(.2,.7,.2,1));--d-1:140ms;--d-2:240ms;--d-3:560ms;--focus:var(--ink)}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px);scroll-padding-bottom:calc(var(--bar) + 16px)}
body{margin:0;background:var(--fog);color:var(--ink);font:400 var(--fs-base)/1.55 var(--f-body);font-stretch:100%;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role=list],ol[role=list],.drawer ul,.fcol ul,.nav__list,.legal-links,.steps{list-style:none;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
main:focus,.filters__h:focus{outline:none}
.sr-only,.screen-reader-text{position:absolute;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:-80px;z-index:100;padding:12px 16px;background:var(--ink);color:var(--paper);font-weight:700;border-radius:var(--r-1)}
.skip:focus{top:12px;box-shadow:0 0 0 2px var(--paper)}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:18px;height:18px}

/* WordPress wrappers: template parts and block wrappers never add boxes or gaps of their own */
.wp-site-blocks>*{margin-block:0}
.part{display:contents}
.wp-block-group:where(.section,.band,.hero,.wrap,.page-head){margin-block:0}
.wp-block-image:where(.hero__photo,.why__photo,.prose__fig){margin:0}

/* layout */
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
main{display:block;padding-bottom:var(--section)}
.section{padding-top:var(--section)}
.section--tight,.section--flush{padding-top:calc(var(--section)*.6)}
.section--first{padding-top:0}
.section--deal{padding-top:var(--s-6)}
.band{margin-top:var(--section);padding-bottom:var(--section)}
.band--concrete{background:var(--concrete)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn-row--stack{display:grid}
.split{display:grid;gap:var(--s-5)}
.split__note{margin-top:var(--s-3);color:var(--graphite);font-size:var(--fs-sm);max-width:22rem}

/* shared surfaces */
.panel,.is-style-panel,.card,.quote,.is-style-review,.rating,.cat,.fact,.step,.day,.offer,.post-card,.post-lead,.pdp__buy,.pdp__well,.nf__link,.state,.cta-band,.callout,.is-style-callout,.is-style-callout-deal,.dealday,.map__frame,.deal-strip{border:1px solid var(--rule);border-radius:var(--r-2);background:var(--paper)}
/* shared type families: the wide label (echoes SAN FRANCISCO) and the condensed display (echoes ELEVATED) */
.label,.is-style-label,.hero__kicker,.ticket__label,.fcol__h,.fgroup legend,.hours thead th,.fact dt,.stats dt,.bgroup h4,.link-arrow,.is-style-link-arrow a,.daytag,.licence,.card__brand{font:600 var(--fs-xs)/1.3 var(--f-body);font-stretch:125%;letter-spacing:.13em;text-transform:uppercase}
.h1,.h2,.hero__h,.panel__h,.cta-band__h,.signup__h,.gate__title,.pdp__name,.post-lead__h,.prose h2,.ticket__deal,.drawer__main a,.rail__d,.cat__count,.card__ph,.filters__h,.stats dd,.pdp__price b,.day__name,.offer .offer__big,.fact dd,.step::before,.nf__code::before,.rating__score{font-family:var(--f-display);font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.004em;text-wrap:balance}

/* type */
.label,.is-style-label{color:var(--graphite);margin-bottom:var(--s-2)}
/* the home H1's topic line (span.hero__kicker inside h1.hero__h) reads as the eyebrow label above it */
.hero__kicker{display:block;margin-bottom:var(--s-4);color:var(--graphite);text-wrap:pretty}
.hero__h:has(.hero__kicker){margin-top:0}
.label--light{color:var(--smoke)}
.h1{font-size:var(--fs-3xl);line-height:.9}
.h2{font-size:var(--fs-2xl);line-height:.92}
.h3{font:700 var(--fs-lg)/1.25 var(--f-body);text-transform:none;letter-spacing:0}
.lead,.is-style-lead{font-size:var(--fs-md);line-height:1.5;color:var(--graphite);max-width:40rem;text-wrap:pretty}
.fine,.is-style-fine{font-size:var(--fs-xs);color:var(--mute)}
.deal-text{color:var(--red)}
.nowrap{white-space:nowrap}

/* buttons, links, fields. core/button: default = primary; is-style-outline / -deal / -light / -ghost-light;
   size classes btn--sm / btn--lg / btn--block on the wp-block-button wrapper; has-arrow adds the arrow. */
.btn,.wp-block-button .wp-block-button__link{--bg:transparent;--fg:var(--ink);--bd:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid var(--bd);border-radius:var(--r-1);background:var(--bg);color:var(--fg);font:700 .8125rem/1.15 var(--f-body);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--d-1),color var(--d-1),border-color var(--d-1),transform var(--d-1)}
.btn--primary,.wp-block-button:not([class*=is-style-]) .wp-block-button__link,.wp-block-button.is-style-fill .wp-block-button__link{--bg:var(--ink);--fg:var(--paper)}
.btn--primary:hover,.wp-block-button:not([class*=is-style-]) .wp-block-button__link:hover,.wp-block-button.is-style-fill .wp-block-button__link:hover{--bg:var(--ink-hover);--bd:var(--ink-hover)}
.btn--outline:hover,.wp-block-button.is-style-outline .wp-block-button__link:hover{--bg:var(--ink);--fg:var(--paper)}
.wp-block-button.is-style-outline .wp-block-button__link{--bg:transparent;--fg:var(--ink);padding:0 20px;border-width:1.5px}
.btn--deal,.is-style-deal .wp-block-button__link{--bg:var(--red);--bd:var(--red);--fg:var(--paper)}
.btn--deal:hover,.is-style-deal .wp-block-button__link:hover{--bg:var(--red-press);--bd:var(--red-press)}
.btn--light,.is-style-light .wp-block-button__link{--bg:var(--paper);--bd:var(--paper);--fg:var(--ink)}
.btn--light:hover,.is-style-light .wp-block-button__link:hover{--bg:var(--concrete);--bd:var(--concrete)}
.btn--ghost-light,.is-style-ghost-light .wp-block-button__link{--bd:var(--field);--fg:var(--paper)}
.btn--ghost-light:hover,.is-style-ghost-light .wp-block-button__link:hover{--bd:var(--paper)}
.btn--sm:not(.wp-block-button),.wp-block-button.btn--sm .wp-block-button__link{min-height:44px;padding:0 16px}
.btn--lg:not(.wp-block-button),.wp-block-button.btn--lg .wp-block-button__link{min-height:56px;padding:0 26px;font-size:.875rem}
.btn--block,.wp-block-button.btn--block,.wp-block-button.btn--block .wp-block-button__link{width:100%}
.wp-block-buttons{gap:var(--s-2)}
.wp-block-buttons>.wp-block-button{margin:0}
.has-arrow .wp-block-button__link::after,.is-style-link-arrow a::after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/18px no-repeat;mask:var(--arrow) center/18px no-repeat;transition:transform var(--d-2) var(--ease)}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E")}
.btn__i,.link-arrow .i,.day__i,.faq__i,.more-brands .i{transition:transform var(--d-2) var(--ease)}
.btn:hover .btn__i,.link-arrow:hover .i,.has-arrow .wp-block-button__link:hover::after,.is-style-link-arrow a:hover::after{transform:translateX(3px)}
.link-arrow,.is-style-link-arrow a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;letter-spacing:.12em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.link-arrow--light{color:var(--paper)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-1);background:none;cursor:pointer}
.icon-btn:hover{background:var(--concrete)}
.field{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--field);border-radius:var(--r-1);background:var(--paper);color:var(--ink);font-size:1rem}
.field::placeholder{color:var(--mute)}
.field:focus-visible{outline-offset:0;border-color:var(--ink)}
.field--select{width:auto;min-height:44px;padding:0 34px 0 12px;appearance:none;font-size:var(--fs-sm);font-weight:600;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 18px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) right 12px center/6px 6px no-repeat,var(--paper)}
.field--dark{background:var(--ink-2);color:var(--paper)}
.field--dark::placeholder{color:var(--smoke)}
.field--dark:focus-visible{border-color:var(--paper)}
textarea.field{display:block;min-height:9rem;padding:12px 14px;line-height:1.5;resize:vertical}
.field[aria-invalid=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.field--dark[aria-invalid=true]{border-color:var(--flare);box-shadow:inset 0 0 0 1px var(--flare)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:progress}
.search:not(body){position:relative;display:flex;align-items:center;gap:var(--s-2)}
.search__i{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.search__input{flex:1;min-width:0;min-height:52px;padding-left:44px}
.search__go,.btn.search__go{flex:none;min-height:52px}

/* status + day tag */
.status{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-sm)}
.status::before,.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--go)}
.status::before{box-shadow:0 0 0 3px rgb(27 122 66/.18)}
.is-closed .status::before,.status.is-closed::before,.status.is-pending::before{background:var(--mute);box-shadow:none}
.daytag{display:inline-grid;place-items:center;flex:none;min-width:36px;padding:4px 6px;border-radius:var(--r-1);background:var(--red);color:var(--paper);font-weight:800;line-height:1;letter-spacing:.08em}

/* utility bar + header */
.util{--focus:var(--paper);background:var(--ink);color:var(--paper);font-size:var(--fs-sm)}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:40px}
.util__deal{display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;font-weight:600;text-decoration:none}
.util__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.util__meta{display:none;align-items:center;gap:24px;color:var(--smoke)}
.util--nodeal .util__meta{display:flex;justify-content:space-between;width:100%}
.util__meta a{color:var(--paper);text-decoration:none}
.util .status::before{background:var(--go-on-ink);box-shadow:none}
.is-closed .util .status::before,.util .status.is-closed::before,.util .status.is-pending::before{background:var(--smoke)}
.site-header{position:sticky;top:0;z-index:40;background:var(--fog);border-bottom:1px solid transparent}
.admin-bar .site-header{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .site-header{top:0}}
.site-header.is-stuck{border-bottom-color:var(--rule);box-shadow:0 10px 24px -22px rgb(11 11 11/.6)}
.site-header__in{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hdr)}
.brand{flex:none;margin-right:auto}
.brand__img{width:clamp(124px,100px + 3.5vw,152px)}
.nav{display:none}
.nav__list{display:flex;gap:2px}
.nav__list a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.nav__list a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-2) var(--ease)}
.nav__list a:hover::after,.nav__list a[aria-current=page]::after{transform:scaleX(1)}
.site-header__phone{display:none;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer}
.burger__lines{display:grid;justify-items:end;gap:5px;width:24px}
.burger__lines i{display:block;height:2px;border-radius:1px;background:currentColor}
.burger__lines i:nth-child(1){width:24px}.burger__lines i:nth-child(2){width:17px}.burger__lines i:nth-child(3){width:10px}

/* native <dialog>s */
.drawer,.gate{max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--ink)}
.drawer::backdrop{background:rgb(11 11 11/.5)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);height:100%;padding:0 var(--gutter) var(--s-6);background:var(--fog);overflow-y:auto;overscroll-behavior:contain}
/* the page behind an open drawer or filter sheet does not scroll */
html:has(.drawer[open],.sheet[open]){overflow:hidden}
.drawer[open]{display:flex;flex-direction:column}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hdr);margin-bottom:var(--s-3)}
.drawer__main a{display:block;padding:10px 0;border-bottom:1px solid var(--rule);font-size:2.25rem;text-decoration:none}
.drawer__more{display:flex;flex-wrap:wrap;gap:0 20px;margin:var(--s-4) 0 var(--s-6)}
.drawer__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.drawer__foot{display:grid;gap:var(--s-3);margin-top:auto;color:var(--graphite);font-size:var(--fs-sm)}
.drawer__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.gate{--focus:var(--paper);position:fixed;inset:0;width:100%;height:100%;padding:var(--gutter);background:var(--ink);color:var(--paper)}
/* top-anchored at about the centre (content is ~370–430 px tall), not re-centred on its own height:
   a late font swap that changes the legal line's length must not move the question or buttons */
.gate[open]{display:grid;justify-items:center;align-items:start;padding-top:max(var(--gutter),calc(50vh - 12rem));padding-top:max(var(--gutter),calc(50svh - 12rem))}
.gate::backdrop{background:var(--ink)}
.gate__in{display:grid;justify-items:center;gap:var(--s-4);width:min(100%,400px);text-align:center}
.gate__logo{width:210px;margin-bottom:var(--s-4)}
.gate__title{font-size:var(--fs-2xl);line-height:.95}
.gate__desc,.gate__leave,.gate__legal{color:var(--smoke)}
.gate__actions{display:grid;gap:10px;width:100%;margin-top:var(--s-2)}
.gate__leave{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.gate__legal{margin-top:var(--s-4);font-size:var(--fs-xs);text-wrap:balance}

/* mobile action bar */
.actionbar{position:fixed;inset:auto 0 0 0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgb(255 255 255/.97);border-top:1px solid var(--rule);box-shadow:var(--sh-bar)}
.actionbar__item{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:52px;border-radius:var(--r-2);font:600 .75rem/1 var(--f-body);text-decoration:none}
.actionbar__item .i{width:22px;height:22px}
.actionbar__item--primary{--focus:var(--red);background:var(--ink);color:var(--paper)}
.actionbar__item[aria-current=page]:not(.actionbar__item--primary){background:var(--concrete)}
.actionbar__badge{position:absolute;top:3px;left:calc(50% + 5px);min-width:0;padding:3px 4px;font-size:.6875rem}

/* section head, hero */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-5)}
/* The heading's flex basis is its longest word (basis 0, content minimum), so the link stays beside
   it whenever that fits and drops under it only when even one word per line would not ("Brands in
   concentrates" + "All 110 brands" at 320 px) — never wider than the screen. */
.sec-head>:not(.link-arrow):not(.is-style-link-arrow){flex:1 1 0;overflow-wrap:break-word}
.sec-head .link-arrow,.sec-head .is-style-link-arrow{flex:none;margin-bottom:-10px}
.hero{padding-top:var(--s-5)}
.hero__grid,.hero__side{display:grid;gap:var(--s-4)}
.hero__h{font-size:var(--fs-hero);line-height:.86;margin-top:var(--s-2)}
.hero__cta,.wp-block-buttons.hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.hero__cta .btn--lg{grid-column:1/-1}
.points .h3+p{margin-top:4px}
.hero__cta .wp-block-button{width:100%}
.hero__cta .wp-block-button .wp-block-button__link{width:100%}
.hero__status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;color:var(--graphite);font-size:var(--fs-sm)}
.hero__photo{margin-top:var(--s-5)}
.hero__photo picture{display:block}
.hero__photo img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 45%}

/* rails (phones) */
.scroller{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller:focus-visible{outline-offset:-3px}

/* why, duo panels, reviews */
.why__grid,.visit__grid{display:grid;gap:var(--s-5)}
.why__photo{display:none}
.why .lead{margin-top:var(--s-3)}
.points{margin-top:var(--s-5);border-top:1px solid var(--rule)}
.points li,.points>.wp-block-group{padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}
.points p{margin-top:4px;color:var(--graphite);font-size:var(--fs-sm)}
.duo,.deliv-grid{display:grid;gap:var(--s-3)}
.panel,.is-style-panel,.is-style-panel-ink{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-5)}
.panel .label,.panel .is-style-label{margin-bottom:0}
.panel__h{font-size:var(--fs-xl)}
.panel p{color:var(--graphite)}
.panel .facts{display:flex;flex-wrap:wrap;gap:2px 8px;color:var(--ink);font-size:var(--fs-sm)}
.panel .facts--hours{display:block}
.panel .link-arrow,.panel .is-style-link-arrow{margin-top:auto}
.panel--ink,.is-style-panel-ink{--focus:var(--paper);border:1px solid var(--ink);border-radius:var(--r-2);background:var(--ink);color:var(--paper)}
.panel--ink p,.is-style-panel-ink p{color:var(--smoke)}
.ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.rating{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 6px;height:100%;padding:12px;text-decoration:none}
.rating:hover{border-color:var(--ink)}
.rating__score{font-size:2rem}
.rating__star{width:18px;height:18px}
.rating__src{grid-column:1/-1;color:var(--mute);font-size:var(--fs-xs);line-height:1.35}
.rating__src b{display:block;color:var(--ink);font-size:.8125rem}
.reviews .fine{margin:var(--s-2) 0 var(--s-4)}
.quotes{display:grid;gap:var(--s-3)}
.quote,.is-style-review{display:flex;flex-direction:column;gap:var(--s-4);height:100%;padding:var(--s-5)}
.quote figcaption,.is-style-review cite{display:grid;gap:2px;margin-top:auto;color:var(--mute);font-size:.8125rem;font-style:normal}
.quote figcaption b{color:var(--ink)}
.wp-block-quote.is-style-review{margin:0;border-left:1px solid var(--rule)}
.quotes>li{margin:0}
.quotes--grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.reviews__more{margin-top:var(--s-3)}
.reviews__more a{white-space:nowrap}

/* visit */
.visit__addr{margin:var(--s-3) 0 var(--s-4);color:var(--graphite)}
.hours{width:100%;margin:var(--s-3) 0 var(--s-5);border-collapse:collapse;font-size:var(--fs-sm)}
.hours th,.hours td{padding:9px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.hours th{font-weight:600}
.hours td,.hours thead th{text-align:right}
.hours thead th{padding-top:0;color:var(--mute);letter-spacing:.1em}
.hours .is-today th,.hours .is-today td{font-weight:700}
.hours--pending{color:var(--graphite);font-weight:600;border-collapse:separate}
.hours__note{margin:calc(-1*var(--s-3)) 0 var(--s-4);color:var(--mute)}
.hours__note+.hours__note{margin-top:calc(4px - var(--s-4))}
.hours .is-today th::after{content:"Today";margin-left:8px;padding:2px 6px;border-radius:var(--r-1);background:var(--ink);color:var(--paper);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}
.map__frame{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--concrete)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85)}
.map__fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--graphite);text-decoration:none;font-weight:600}
.map__fallback small{text-decoration:underline}

/* footer + the ElevatedSF List */
.site-footer{--focus:var(--paper);padding:var(--section) 0 calc(var(--bar) + var(--s-6) + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper)}
.site-footer a{text-decoration:none}
.site-footer a:hover,.site-footer__legal a{text-decoration:underline}
.signup{display:grid;gap:var(--s-4);padding-bottom:var(--s-6);border-bottom:1px solid var(--ink-line)}
.signup__h{font-size:var(--fs-2xl);line-height:.95}
.signup__form{display:grid;gap:var(--s-2)}
.signup__fine,.fcol__h{color:var(--smoke);font-size:var(--fs-xs)}
/* the "Get deals by text" link inside the fine print: paper + underlined, like the legal links (WCAG 1.4.1) */
.signup__fine a,.site-footer .signup__fine a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.signup__status:not(:empty){display:block;margin-top:6px;color:var(--paper);font-size:var(--fs-sm);font-weight:600}
.signup__status.is-ok{color:var(--go-on-ink)}
.signup__status.is-error{color:var(--flare)}
/* the band outside the footer (pattern newsletter-band): the same ink band, as a card */
.site-main .signup:not(.signup--page){--focus:var(--paper);padding:var(--s-6) var(--s-5);border:0;border-radius:var(--r-3);background:var(--ink);color:var(--paper)}
/* the /sign-up/ page variant (light): name, email, mobile, SMS opt-in */
.signup.signup--page{gap:var(--s-4);padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-2);background:var(--paper)}
.signup--page .signup__copy .label{margin-bottom:var(--s-2)}

/* forms (elevated/contact-form, the sign-up page): p.form__field > label.label + control + span.form__error */
.form{display:grid;gap:var(--s-4);margin:0}
.form__field{display:grid;gap:6px;margin:0}
.form__field .label{margin:0}
.form__field .field--select{width:100%;min-height:48px;padding-left:14px;font-size:1rem;font-weight:400}
.form__opt{font-stretch:100%;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--mute)}
.form__error{color:var(--red);font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.form__check{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--graphite);font-size:var(--fs-sm);line-height:1.45}
.form__check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.form__check label{cursor:pointer}
.form__fine{margin:0}
.form>.btn{justify-self:start;min-width:12rem}
.form__status{margin:0;padding:12px 16px;border:1px solid var(--rule);border-left:4px solid var(--field);border-radius:0 var(--r-2) var(--r-2) 0;background:var(--paper);font-size:var(--fs-sm);font-weight:600}
.form__status.is-ok{border-left-color:var(--go)}
.form__status.is-error{border-left-color:var(--red);color:var(--red)}
.form__status:empty{margin-top:calc(-1*var(--s-4));padding:0;border:0;background:none}
.form[aria-busy=true]{cursor:progress}

/* community timeline (elevated/community, layout "timeline"): newest year first */
.timeline{display:grid;gap:var(--s-6)}
.timeline__year{display:grid;gap:var(--s-3)}
.timeline .timeline__h{margin:0;font:800 var(--fs-xl)/1 var(--f-display);text-transform:uppercase;letter-spacing:.004em}
.timeline__list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.timeline__item{display:grid;gap:2px;margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
.timeline__name{font-weight:700;line-height:1.35}
.timeline .timeline__kind{order:-1;margin:0;color:var(--mute)}
.timeline__text{color:var(--graphite);font-size:var(--fs-sm)}
.timeline__text>*+*{margin-top:.5em}
.timeline--empty{color:var(--graphite)}
.site-footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5);padding:var(--s-6) 0}
.fbrand,.fcol--near{grid-column:1/-1}
.fbrand__logo{width:168px;margin-bottom:var(--s-4)}
.fbrand p{margin-top:var(--s-3);color:var(--smoke);font-size:var(--fs-sm)}
.fbrand a{color:var(--paper)}
.fcol__h{margin-bottom:var(--s-2)}
.fcol a{display:inline-flex;align-items:center;min-height:34px;font-size:var(--fs-sm)}
.fcol--near ul{display:flex;flex-wrap:wrap;gap:0 18px}
.site-footer__legal{display:grid;gap:var(--s-2);padding-top:var(--s-5);border-top:1px solid var(--ink-line);color:var(--smoke);font-size:var(--fs-xs)}
.licence{color:var(--ink);font-weight:700;font-stretch:112%;letter-spacing:.04em}
/* on ink surfaces (footer, black panels, gate, ticket, utility bar) the licence line is paper */
:is(.site-footer,.panel--ink,.is-style-panel-ink,.gate,.ticket,.util,.day.is-today) .licence{color:var(--paper)}
.legal-links{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:var(--s-2)}
.legal-links a{display:inline-flex;align-items:center;min-height:36px}

/* page head, breadcrumbs, deal strip, CTA band */
.page-head{padding:var(--s-3) 0 var(--s-6)}
.page-head .lead{margin-top:var(--s-4)}
.page-head__cta{margin-top:var(--s-5)}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 var(--s-3);padding:0;color:var(--mute);font-size:.8125rem}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";flex:none;margin:0 8px;color:var(--field)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
/* the current page (the H1 repeats it in full) keeps to one line: it takes what is left of the row, or
   a row of its own when less than ~9rem is left, and ends in an ellipsis */
.crumbs li:last-child{flex:1 1 0;min-width:min(9rem,100%)}
.crumbs [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs a{color:var(--graphite)}
.deal-strip{display:flex;align-items:center;gap:var(--s-3);min-height:52px;margin-bottom:var(--s-5);padding:8px 14px 8px 8px;border:1.5px solid var(--red);font-size:var(--fs-sm);text-decoration:none}
.deal-strip b{color:var(--red)}
.deal-strip__go{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:700;white-space:nowrap}
.cta-band{display:grid;gap:var(--s-4);padding:var(--s-6) var(--s-5);border-radius:var(--r-3)}
.cta-band__h{font-size:var(--fs-2xl);line-height:.95}
.cta-band p{margin-top:var(--s-2);color:var(--graphite)}

/* motion (gated in JS: .motion is added only when reduced motion is not requested) */
.motion [data-reveal]{transition:opacity var(--d-3) var(--ease),transform var(--d-3) var(--ease)}
.motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(14px)}
@keyframes slide{from{opacity:0;transform:translateX(28px)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.drawer[open]{animation:slide .26s var(--ease)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* breakpoints */
@media (max-width:1023px){
.fcol a,.legal-links a{min-width:44px;min-height:44px}
.legal-links a{justify-content:center}
.legal-links{gap:0 12px}
.crumbs ol{margin-top:-6px;margin-bottom:calc(var(--s-3) - 6px)}
.crumbs a{min-height:44px}
.crumbs a{justify-content:center;min-width:44px;margin-inline:-5px;padding-inline:5px}}
@media (max-width:599px){.form>.btn{justify-self:stretch}
/* phones: the legal + listing links as three even columns, so none is left alone on a row */
.legal-links{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:0 20px}
.legal-links a{justify-content:flex-start}}
@media (max-width:767px){
.wrap--bleed-sm{padding-inline:0}
.wrap .wrap--bleed-sm{width:auto;max-width:none;margin-inline:calc(-1*var(--gutter))}
.wrap--bleed-sm>:not(.scroller){padding-inline:var(--gutter)}
.wrap--bleed-sm .scroller{scroll-padding-inline:var(--gutter)}
.duo,.quotes:not(.quotes--grid),.is-style-rail-sm{display:grid;grid-template-columns:none;grid-auto-flow:column;width:max-content;padding:4px var(--gutter) 10px}
.duo,.quotes:not(.quotes--grid),.is-style-rail-sm{grid-auto-columns:calc(100vw - 2*var(--gutter) - 36px)}
.duo>*,.quotes:not(.quotes--grid)>*,.is-style-rail-sm>*{scroll-snap-align:start}
.deal-strip__txt{display:none}
.rating__score{font-size:1.75rem}
.sec-head .link-arrow,.sec-head .is-style-link-arrow a{font-stretch:100%;letter-spacing:.08em}}
@media (min-width:600px){.signup__form{grid-template-columns:1fr auto}.signup__fine{grid-column:1/-1}.signup__form>a.btn{grid-column:1/-1;justify-self:start;min-width:12rem}
.form--contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form--contact>*{grid-column:1/-1}
.form--contact>.form__field:nth-child(-n+4){grid-column:auto}}
@media (min-width:768px){
.util__meta{display:flex}
.util--nodeal .util__meta{justify-content:flex-end}
.scroller{overflow:visible}
.duo,.deliv-grid{grid-template-columns:1fr 1fr;gap:var(--s-4)}
.quotes:not(.quotes--grid){grid-template-columns:repeat(3,minmax(0,1fr))}
.quotes{gap:var(--s-4)}
.site-main .signup:not(.signup--page){padding:var(--s-7)}
.signup.signup--page{padding:var(--s-6)}
.timeline__year{grid-template-columns:7rem minmax(0,1fr);gap:var(--s-5);align-items:start}
.timeline .timeline__h{position:sticky;top:calc(var(--hdr) + 16px);padding-top:10px}
.cta-band{padding:var(--s-6) var(--s-7)}}
@media (min-width:1024px){
:root{--hdr:76px}
html{scroll-padding-bottom:16px}
.actionbar,.burger{display:none}
.site-footer{padding-bottom:var(--s-6)}
.nav{display:block}
.hero{padding-top:var(--s-7)}
.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--s-7)}
.hero__photo{max-width:calc(var(--max) + 2*var(--gutter));margin:var(--s-6) auto 0;padding-inline:var(--gutter)}
.wp-block-image.hero__photo{margin:var(--s-6) auto 0}
.hero__photo img{aspect-ratio:3.25/1;border-radius:var(--r-2)}
.why__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--s-8)}
.why__photo{display:block}
.cta-band{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.map__frame{aspect-ratio:4/3}
.why__photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-2)}
.visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:var(--s-8)}
.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:var(--s-8)}
.split__head{position:sticky;top:calc(var(--hdr) + 16px)}
.signup{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s-7)}
.signup.signup--page{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s-5)}
.site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
.fbrand,.fcol--near{grid-column:auto}
.fcol--near ul{display:block}}
@media (min-width:1180px){.site-header__phone{display:inline-flex}}
.footer-legal{display:grid;gap:var(--s-2)}
.page-extra:not(:empty){padding-top:var(--section)}
.review-banner{padding-block:var(--s-3)}
.review-banner .callout{margin:0}
/* empty / error states (menu results, the home product rail, category grid): every page, because the
   rail's "Menu is updating" state renders on pages that never load menu.css */
.state{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-5);border:1.5px dashed var(--field);text-align:center}
.state p{max-width:30rem;color:var(--graphite)}
.state__i{width:40px;height:40px;color:var(--mute)}
.state--error{border-style:solid;border-color:var(--ink)}
.state .btn-row{justify-content:center}
/* no JavaScript = no age dialog: the 21+ notice as a strip above the utility bar (setup.php) */
.agenote{margin:0;padding:10px var(--gutter);background:var(--ink-2);color:var(--paper);font-size:var(--fs-sm);text-align:center}
/* core/image essentials (its own stylesheet is not loaded on the front end) */
.wp-block-image{margin:0 0 1em}
.wp-block-image img{box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom}
.wp-block-image.aligncenter,.wp-block-image .aligncenter{text-align:center;margin-inline:auto}
.wp-block-image.alignleft,.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}
.wp-block-image.alignright,.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}
.wp-block-image figcaption,.wp-element-caption{margin-top:var(--s-2);color:var(--mute);font-size:.8125rem}
