/* Cerulean Blue site styles. Built from homepage concept 2, "Under One Roof" (see /concept).
   --cerulean-ink is the brand cerulean darkened for small text, so it passes contrast on white and paper. */

:root{
  --navy:#123256; --cerulean:#2484c6; --green:#24c666; --magenta:#c62484;
  --cool:#c6c5ca; --warm:#dcdcd5; --paper:#f4f4f0; --white:#fff;
  --ink:#123256; --muted:#4a5d74; --cerulean-ink:#1c6ca6; --sky:#9fd0f2; --mist:#eef5fb;
  --sans:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  --serif:"Palatino Linotype","Palatino","Book Antiqua","Lora",Georgia,serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
[hidden]{display:none !important}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cerulean);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

.menu-toggle{display:none;background:none;border:0;font:700 15px var(--sans);color:var(--navy);cursor:pointer;padding:10px 4px}
.wordmark{font-family:var(--sans);color:#fff;font-size:22px;letter-spacing:.24em;font-weight:300}
.wordmark b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--sky);font-size:26px;margin-top:-2px}
/* The official reversed logo for navy (Brand Standard): never recolored or stretched; clear space around it. */
.foot-logo{display:inline-block;padding:6px 0}
.foot-logo img{display:block;width:150px;height:auto}
.signup{display:flex;gap:12px;position:relative}
.signup input{flex:1;min-width:0;padding:12px 14px;border:0;border-radius:8px;font:inherit;color:var(--ink)}
.signup button{border:0;background:var(--cerulean-ink);color:#fff;font:700 15px var(--sans);padding:12px 22px;border-radius:8px;cursor:pointer}
.signup button:hover{background:var(--cerulean)}
.legal{border-top:1px solid #2a4a70;margin-top:56px;padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:14px}
.legal a{color:inherit}

:root{--r:10px}
.util{background:var(--paper);border-bottom:1px solid var(--warm);font-size:13px;color:var(--muted)}
.util .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.util a{color:var(--magenta);font-weight:700;text-decoration:none}
.util .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 var(--warm)}
.bar{display:flex;align-items:center;gap:28px;height:88px;position:relative}
.bar .logo img{height:84px;width:auto}
nav{flex:1}
nav ul{display:flex;justify-content:center;gap:4px;list-style:none}
nav a{display:flex;flex-direction:column;text-decoration:none;padding:8px 14px;border-radius:8px;font-weight:800;font-size:15px;color:var(--navy);line-height:1.2}
nav a small{font-weight:600;font-size:12px;color:var(--muted)}
nav a:hover{background:var(--mist)}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 var(--sans);text-decoration:none;padding:15px 22px;border-radius:999px;background:var(--navy);color:#fff;border:2px solid var(--navy);transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{background:var(--cerulean);border-color:var(--cerulean)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.mag{background:var(--magenta);border-color:var(--magenta)}
.btn.mag:hover{background:var(--navy);border-color:var(--navy)}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.light:hover{background:var(--cerulean);color:#fff;border-color:var(--cerulean)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin-bottom:16px}
.eyebrow.blue{color:var(--cerulean-ink)}
h1,.h2{font-family:var(--sans);font-weight:900;letter-spacing:-.02em;color:var(--navy)}
h1{font-size:clamp(42px,5.4vw,74px);line-height:1;margin-bottom:22px}
h1 em,.h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--cerulean)}
.h2{font-size:clamp(32px,3.6vw,50px);line-height:1.05;margin-bottom:14px}
.sub{color:var(--muted);font-size:18px;max-width:36em}
section{padding:96px 0}

.feature{background:linear-gradient(180deg,#fff 0,var(--paper) 100%);padding:64px 0 88px}
.feature .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.feature .lede{font-size:20px;color:var(--muted);max-width:28em;margin-bottom:30px}
.feature .ctas{display:flex;gap:12px;flex-wrap:wrap}
.event{display:flex;gap:18px;align-items:center;margin-top:36px;background:#fff;border:1px solid var(--warm);border-radius:var(--r);padding:16px 20px;max-width:30em}
.event .date{flex:none;text-align:center;background:var(--magenta);color:#fff;border-radius:8px;width:62px;padding:8px 0;line-height:1}
.event .date span{display:block;font-size:12px;font-weight:800;letter-spacing:.12em}
.event .date b{display:block;font-size:28px;font-weight:900;margin-top:4px}
.event strong{display:block;font-size:16px}
.event p{font-size:14px;color:var(--muted)}
.mosaic{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:240px 240px;gap:14px}
.mosaic figure{border-radius:var(--r);overflow:hidden;background:var(--warm)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .tall{grid-row:span 2}
/* Home holiday section: the brand wave, large and faint, behind everything in the section. */
.feature.has-wave{position:relative;overflow:hidden;isolation:isolate}
.feature.has-wave::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:max(1400px,118%);aspect-ratio:1120/427;transform:translate(-50%,-46%);background:url(/img/wave.svg) center/contain no-repeat;opacity:.045;pointer-events:none}

.doors-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.door{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);color:#fff;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .6s ease}
.door:hover img{transform:scale(1.04)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,50,86,0) 28%,rgba(18,50,86,.7) 50%,rgba(18,50,86,.93) 68%)}
.door .in{position:relative;z-index:1;padding:24px}
@media (min-width:981px){.door .in{min-height:272px}}
.door .num{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.door h3{font-size:28px;font-weight:900;letter-spacing:-.01em;margin:4px 0 6px;line-height:1.05}
.door p{font-size:15px;color:#d9e3ee;margin-bottom:14px}
.door ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.door li{font-size:13px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 11px}
.door.bags{background:#fff}
.door.bags img{object-fit:contain;object-position:50% 22%;padding:18px 10px 160px;background:#fff}

.menu{background:var(--paper)}
/* position:relative keeps absolutely positioned children (the sign-up card's hidden spam-trap field) inside
   the scrolling strip; without it they escape the clip and widen the whole page on phones. */
.rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:18px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.dish{scroll-snap-align:start;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--warm)}
.dish .ph{aspect-ratio:1/1;overflow:hidden;background:#fff}
.dish .ph img{width:100%;height:100%;object-fit:cover}
.dish .ph.cut img{object-fit:contain;padding:18px}
.dish .t{padding:16px 18px 18px}
.dish .tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cerulean-ink)}
.dish h3{font-size:18px;font-weight:800;margin-top:2px}
.dish.soon{background:var(--magenta);border-color:var(--magenta);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.dish.soon .tag{color:#fff}
.dish.soon h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;line-height:1.05;margin:8px 0}
.dish.soon p{font-size:15px;color:#fde8f3}
.dish.soon form{display:flex;margin-top:18px;background:#fff;border-radius:999px;padding:4px}
.dish.soon input{flex:1;min-width:0;border:0;background:transparent;padding:10px 12px;font:inherit;font-size:14px;color:var(--navy)}
.dish.soon button{border:0;background:var(--navy);color:#fff;border-radius:999px;font:800 13px var(--sans);padding:0 14px;cursor:pointer}
.menu-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.cater{background:var(--navy);color:#fff}
.cater .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cater .pics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cater .pics figure{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.cater .pics figure:last-child{margin-top:48px}
.cater .pics img{width:100%;height:100%;object-fit:cover}
.cater .h2{color:#fff}
.cater .h2 em{color:var(--sky)}
.cater .sub{color:#d5deea}
.quick{margin-top:30px;background:#fff;color:var(--navy);border-radius:var(--r);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}
.quick input,.quick select{font:inherit;font-size:15px;font-weight:400;padding:12px 12px;border:1px solid var(--cool);border-radius:8px;color:var(--navy);background:#fff}
.quick .full{grid-column:1/-1}
.quick .note{font-size:13px;color:var(--muted);font-weight:400}
.quick .btn{justify-content:center}

.give{background:var(--cerulean-ink);color:#fff;padding:56px 0}
.give .row{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.give h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.15;max-width:22em}
.give h2 b{font-family:var(--sans);font-weight:900}
.give .stat{margin-top:14px;font-size:16px;color:#e6f1fa;max-width:40em}
.give .stat b{color:#fff;font-weight:900}
.visit .photo{position:relative}
.visit .photo .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;font-family:var(--serif);font-style:italic;font-size:20px;color:#fff;background:linear-gradient(180deg,rgba(18,50,86,0),rgba(18,50,86,.85))}
footer .social{display:flex;gap:18px}
footer .social a{display:flex;color:#c9d4e2}
footer .social a:hover{color:#fff}

.visit .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.visit .photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.visit .photo img{width:100%;height:100%;object-fit:cover}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.cards div{background:var(--paper);border-radius:var(--r);padding:18px 20px}
.cards h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cerulean-ink);margin-bottom:4px}
.cards p{font-size:16px;font-weight:600}
.cards .wide{grid-column:1/-1}

footer{background:var(--navy);color:#c9d4e2;padding:0 0 36px;font-size:15px}
footer .foot-news{border-bottom:1px solid #2a4a70;padding:44px 0;margin-bottom:56px}
footer .foot-news .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}
footer .foot-news h2{font-size:22px;margin-bottom:6px}
footer .foot-news p{font-size:16px}
footer .foot-news .signup{flex:0 1 460px}
footer .cols{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px}
footer .foot-brand p{margin-top:14px;max-width:22em;font-size:16px;line-height:1.5}
footer .foot-brand .foot-towns{font-size:14px;color:#9fb3cc}
footer .foot-towns a{color:#c9d4e2;text-decoration:underline;text-underline-offset:2px}
footer h2{color:#fff;font-size:15px;font-weight:900;margin-bottom:14px}
footer .cols h2{color:#9fb3cc;font-weight:700}
footer .cols a{color:#fff;font-weight:600}
footer ul{list-style:none;display:grid;gap:10px}
footer a{text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:1080px){
  nav a small{display:none}
}
@media (max-width:980px){
  .menu-toggle{display:block}
  nav ul{display:none}
  header.open nav ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--warm);box-shadow:0 12px 24px rgba(18,50,86,.12);padding:8px 24px 16px;z-index:30}
  header.open nav ul a{display:block;padding:12px 0;border-bottom:1px solid var(--paper)}
  .bar .btn{display:none}
  .bar{justify-content:space-between}
  nav{flex:0}
  header.open nav ul a{flex-direction:row;padding:12px 0;border-radius:0}
  section{padding:64px 0}
  .feature{padding:40px 0 64px}
  .feature .grid,.cater .grid,.visit .grid{grid-template-columns:1fr;gap:36px}
  .mosaic{grid-template-rows:200px 200px;order:-1}
  .feature.has-wave::before{width:170%;top:66%}
  .doors{grid-template-columns:1fr 1fr}
  .door{min-height:380px}
  footer .cols{grid-template-columns:repeat(3,1fr)}
  footer .cols>div:first-child{grid-column:1/-1;max-width:420px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  header.open nav ul{padding:8px 16px 16px}
  .util .wrap>span:last-child{display:none}
  .bar{height:74px}
  .bar .logo img{height:60px}
  .doors{grid-template-columns:1fr}
  .door{min-height:340px}
  .quick{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cater .pics figure:last-child{margin-top:28px}
  footer .cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  footer .foot-news{padding:36px 0;margin-bottom:44px}
  footer .foot-news .signup{flex-basis:100%}
  .signup button{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* ── Inner pages ── */
nav a[aria-current="page"]{background:var(--mist)}
.page-hero{background:linear-gradient(180deg,#fff 0,var(--paper) 100%);padding:56px 0 80px}
.page-hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.page-hero.plain .grid{grid-template-columns:1fr}
.page-hero .lede{font-size:20px;color:var(--muted);max-width:30em;margin-bottom:30px}
.page-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.page-hero .photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--warm)}
.page-hero .photo img{width:100%;height:100%;object-fit:cover}
.page-hero .photo.bag{background:#fff;border:1px solid var(--warm)}
.page-hero .photo.bag img{object-fit:contain;padding:24px}
.crumbs{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--cerulean-ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.tint{background:var(--paper)}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}

.split .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.flip .photo{order:2}
.split .photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--warm)}
.split .photo img{width:100%;height:100%;object-fit:cover}
.split p{color:var(--muted);font-size:18px;margin-bottom:16px;max-width:34em}
.split .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.list{list-style:none;display:grid;gap:10px;margin:22px 0}
.list li{padding-left:28px;position:relative;font-size:17px}
.list li::before{content:"";position:absolute;left:0;top:.75em;width:14px;height:2px;background:var(--magenta)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.tile{background:#fff;border:1px solid var(--warm);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.tint .tile{border-color:#fff}
.tile .ph{margin:-26px -26px 22px;aspect-ratio:4/3;overflow:hidden;background:var(--warm)}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.space{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.space figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--warm)}
.space img{width:100%;height:100%;object-fit:cover}
.space + .tiles{margin-top:18px}
.tile .tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cerulean-ink);margin-bottom:6px}
.tile h3,.tile h2{font-size:21px;font-weight:900;line-height:1.15;margin-bottom:8px;letter-spacing:-.01em}
.tile p{color:var(--muted);font-size:15px}
.tile .list{margin:12px 0 0;gap:6px}
.tile .list li{font-size:15px;color:var(--muted)}
.tile .more{margin-top:auto;padding-top:16px;font-weight:800;font-size:14px;color:var(--cerulean-ink)}
a.tile{text-decoration:none;transition:border-color .15s,transform .15s}
a.tile:hover{border-color:var(--cerulean);transform:translateY(-2px)}
.step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--magenta);color:#fff;font-weight:900;margin-bottom:14px}

.bags{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.bag{background:#fff;border:1px solid var(--warm);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.bag .ph{background:#fff;aspect-ratio:1/1;padding:20px}
.bag .ph img{width:100%;height:100%;object-fit:contain}
.bag .t{padding:4px 22px 24px;display:flex;flex-direction:column;flex:1}
.bag .origin{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cerulean-ink)}
.bag h3{font-size:22px;font-weight:900;margin:2px 0 6px}
.bag p{color:var(--muted);font-size:15px;flex:1}
.bag .opts{font-size:13px;font-weight:700;color:var(--navy);margin-top:10px}
.bag .btn{align-self:flex-start;margin-top:16px}

.faq{max-width:820px;margin-top:32px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--warm);border-radius:var(--r);padding:18px 22px}
.faq summary{font-weight:800;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cerulean-ink);font-weight:900;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted)}

.quick textarea{font:inherit;font-size:15px;font-weight:400;padding:12px;border:1px solid var(--cool);border-radius:8px;color:var(--navy);background:#fff;min-height:110px;resize:vertical}
.cater .lead{color:#d5deea;font-size:18px;max-width:30em}
.cater.solo .grid{grid-template-columns:.9fr 1.1fr;align-items:start}

.prose{max-width:720px}
.prose h2{font-size:28px;font-weight:900;margin:44px 0 12px;line-height:1.15;letter-spacing:-.01em}
.prose h3{font-size:21px;font-weight:800;margin:30px 0 8px}
.prose p,.prose ul{margin-bottom:18px;font-size:18px;color:#24384f}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--cerulean-ink)}
.prose .meta{color:var(--muted);font-size:14px;margin-bottom:28px}
.prose blockquote{border-left:3px solid var(--magenta);padding:4px 0 4px 18px;margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--navy)}
.notice{background:var(--mist);border-radius:var(--r);padding:16px 20px;font-size:15px;color:var(--navy);max-width:720px}

@media (max-width:980px){
  .page-hero{padding:36px 0 56px}
  .page-hero .grid,.split .grid,.cater.solo .grid{grid-template-columns:1fr;gap:32px}
  .page-hero .photo{order:-1}
  .split.flip .photo{order:0}
  .tiles,.tiles.four,.bags{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tiles,.tiles.four,.tiles.two,.bags{grid-template-columns:1fr}
  .space{grid-template-columns:1fr}
  .prose p,.prose ul{font-size:17px}
}

/* ── Forms: sending, sent, errors (js/forms.js) ── */
.sr-only,.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button:disabled{cursor:default;opacity:.6}
.form-status{font-size:15px;font-weight:600;line-height:1.5}
.form-status:empty{display:none}
.form-status:focus{outline:none}
.form-status a{color:inherit;font-weight:800}
.form-status.is-error{color:#a3195b}
form.is-sent>:not(.form-status){display:none}
.quick.is-sent .form-status{font-size:19px;font-weight:700;color:var(--navy);padding:8px 2px}
.quick :is(input,select,textarea):user-invalid{border-color:var(--magenta)}
.signup{flex-wrap:wrap}
.signup .form-status{flex-basis:100%;margin-top:8px;color:#fff}
.signup .form-status.is-error{color:#ffc9e3}
.signup.is-sent .form-status{margin-top:0}

/* ── Craft Roasters store: size/grind picks, cart, order page (js/shop.js) ── */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:block;padding:8px 14px;border:1px solid var(--cool);border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:700;line-height:1.3}
.seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--cerulean);outline-offset:2px}
.seg input:disabled{cursor:default}
.seg input:disabled+span{opacity:.45;text-decoration:line-through}
.buy fieldset,.sub-pick fieldset,.cart-ful{border:0;min-width:0}
.buy legend,.sub-pick legend,.cart-ful legend{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bag .buy{display:grid;gap:12px;margin-top:14px}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{font-size:20px;font-weight:900;color:var(--navy);min-height:32px;line-height:32px}
.bag .buy .btn{margin-top:0;align-self:auto}
.shop-status{margin-top:12px;color:#a3195b;font-weight:600}
.shop-status:empty{display:none}
.shop-status a{color:inherit;font-weight:800}
.quick .seg label{display:block;font-size:inherit}
.sub-pick .price{font-size:22px}
.test-note{background:#fff7d6;color:var(--navy);border-radius:8px;padding:10px 14px;font-weight:600}

.cart-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 12px 9px 14px;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:800 15px/1 var(--sans);cursor:pointer;white-space:nowrap}
.cart-btn:hover{background:var(--mist)}
.cart-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--magenta);color:#fff;font-size:12px}
.cart-btn.bump{animation:cart-bump .45s ease}
@keyframes cart-bump{40%{transform:scale(1.1)}}
html.cart-open{overflow:hidden}
dialog.cart{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:100%;height:100%;max-height:none;border:0;padding:0;background:#fff;color:var(--navy);display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(18,50,86,.18)}
dialog.cart:not([open]){display:none}
dialog.cart::backdrop{background:rgba(18,50,86,.45)}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--warm)}
.cart-head h2{font-size:22px;font-weight:900;letter-spacing:-.01em}
.cart-close{background:none;border:0;color:var(--cerulean-ink);font:800 15px var(--sans);cursor:pointer;padding:8px 4px;text-decoration:underline}
.cart-test{margin:14px 22px 0;background:#fff7d6;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600}
.cart-body{flex:1;overflow:auto;padding:4px 22px}
.cart-empty{padding:28px 0;color:var(--muted)}
.cart-empty .btn{margin-top:14px}
.cart-empty a:not(.btn){color:var(--cerulean-ink);font-weight:800}
.cart-lines{list-style:none}
.cart-lines li{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:16px 0;border-bottom:1px solid var(--paper)}
.cart-lines .nm{font-weight:800}
.cart-lines .meta{font-size:14px;color:var(--muted)}
.cart-lines .amt{font-weight:800}
.cart-lines .ctl{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--cool);border-radius:999px}
.qty button{width:40px;height:40px;border:0;background:none;color:var(--navy);font:800 18px var(--sans);cursor:pointer;border-radius:999px}
.qty span{min-width:26px;text-align:center;font-weight:800}
.cart-remove{background:none;border:0;color:var(--cerulean-ink);font:700 14px var(--sans);text-decoration:underline;cursor:pointer;padding:8px 0}
.cart-foot{border-top:1px solid var(--warm);padding:16px 22px 22px;display:grid;gap:14px}
.cart-ful label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding:4px 0;cursor:pointer}
.cart-ful input{width:18px;height:18px;accent-color:var(--navy)}
.cart-sum{display:grid;gap:4px}
.cart-sum div{display:flex;justify-content:space-between;gap:12px}
.cart-sum dt{color:var(--muted)}
.cart-sum dd{font-weight:800}
.cart-foot .btn{justify-content:center}
.cart-status{font-size:14px;color:#a3195b;font-weight:600}
.cart-status:empty{display:none}
.cart-status a{color:inherit;font-weight:800}

.order .lede{margin-bottom:16px}
.order .ctas{margin-top:28px}
.order-items{list-style:none;display:grid;gap:6px;margin:6px 0 16px;font-size:18px;font-weight:700}
.order-total{font-size:18px;font-weight:800;margin-bottom:10px}
.order-note{color:var(--muted);font-size:17px;max-width:34em;margin-bottom:6px}
.order-note a{color:var(--cerulean-ink);font-weight:800}

/* Between the full nav and the mobile menu there's no room for the word: icon and count only. */
@media (min-width:981px) and (max-width:1180px){
  .cart-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cart-btn{padding:9px 10px}
  .bar:has(.cart-btn:not([hidden])){gap:14px}
  .bar:has(.cart-btn:not([hidden])) nav a{padding:8px 9px}
}
@media (max-width:980px){
  .cart-btn{margin-left:auto}
}
@media (max-width:560px){
  .cart-btn{padding:8px 10px 8px 12px;font-size:14px}
  .bar{gap:16px}
}

/* ── Controls in the Untitled UI style ─────────────────────────────────────
   Ported by hand from the Untitled UI React components the status page uses
   (input, select, textarea, button group, radio chips, badge, alert, date
   picker), so the website and the status page share one look. Same grays,
   radii, shadows and focus rings; brand = Cerulean's scale (brand-500 is
   --cerulean), exactly as in the status page's theme. No React here: the
   site stays plain HTML. Date picker and time slots: css/extra.css. */
:root{
  --ui-gray-50:#fafafa;--ui-gray-100:#f5f5f5;--ui-gray-200:#e9eaeb;--ui-gray-300:#d5d7da;--ui-gray-400:#a4a7ae;--ui-gray-500:#717680;--ui-gray-600:#535862;--ui-gray-700:#414651;
  --ui-brand-25:#f6fafd;--ui-brand-50:#eef5fb;--ui-brand-100:#d9eaf7;--ui-brand-200:#b8d8f0;--ui-brand-300:#87bde6;--ui-brand-500:#2484c6;--ui-brand-600:#1c6ca6;--ui-brand-700:#175889;
  --ui-warn-50:#fffaeb;--ui-warn-200:#fedf89;--ui-warn-700:#b54708;
  --ui-error:#d92d20;--ui-error-subtle:#fda29b;
  --ui-shadow-xs:0 1px 2px rgba(10,13,18,.05);
  --ui-shadow-lg:0 12px 16px -4px rgba(10,13,18,.08),0 4px 6px -2px rgba(10,13,18,.03),0 2px 2px -1px rgba(10,13,18,.04);
  --ui-shadow-xl:0 20px 24px -4px rgba(10,13,18,.08),0 8px 8px -4px rgba(10,13,18,.03),0 3px 3px -1.5px rgba(10,13,18,.04);
  --ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23a4a7ae' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Label + field (Untitled "Input", size md) */
.quick label,.pre-form .ui-label{gap:6px;font-size:14px;font-weight:600;color:var(--ui-gray-700)}
.quick :is(input:not([type=radio]):not([type=checkbox]):not(.ui-input),select:not(.ui-input),textarea){font:inherit;font-size:16px;font-weight:400;line-height:24px;padding:10px 14px;border:0;border-radius:8px;color:var(--navy);background:#fff;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);transition:box-shadow .1s linear}
.quick :is(input,select,textarea)::placeholder{color:var(--ui-gray-500)}
.quick :is(input:not([type=radio]):not([type=checkbox]):not(.ui-input),select:not(.ui-input),textarea):focus-visible{outline:0;box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-brand-500)}
.quick :is(input,select,textarea):user-invalid{box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-error-subtle)}
.quick :is(input,select,textarea):user-invalid:focus-visible{box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-error)}
.quick select:not(.ui-input){appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff var(--ui-chevron) no-repeat right 12px center/20px;cursor:pointer}
.quick textarea{min-height:128px}
.quick .note{font-size:14px;color:var(--ui-gray-600)}
/* Radio chips (Untitled radio "button group" look): sizes, grinds, plans */
.seg{gap:8px}
.seg span{padding:8px 14px;border:0;border-radius:8px;background:#fff;color:var(--ui-gray-700);font-size:14px;font-weight:600;line-height:20px;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);transition:background .1s linear,box-shadow .1s linear,color .1s linear}
.seg label:hover input:not(:checked):not(:disabled)+span{background:var(--ui-gray-50);color:var(--navy)}
.seg input:checked+span{background:var(--ui-brand-50);border:0;color:var(--ui-brand-700);box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-brand-500)}
.seg input:focus-visible+span{outline:2px solid var(--ui-brand-500);outline-offset:2px}
/* Quantity (Untitled "button group") */
.qty{border:0;border-radius:8px;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);background:#fff;overflow:hidden}
.qty button{width:40px;height:40px;border-radius:0;color:var(--ui-gray-700);font:600 18px var(--sans);transition:background .1s linear}
.qty button:first-child{box-shadow:inset -1px 0 0 var(--ui-gray-300)}
.qty button:last-child{box-shadow:inset 1px 0 0 var(--ui-gray-300)}
.qty button:hover{background:var(--ui-gray-50);color:var(--navy)}
.qty button:focus-visible{outline:2px solid var(--ui-brand-500);outline-offset:-2px}
.qty span{min-width:64px;padding:0 10px;text-align:center;font-weight:600;font-size:14px;color:var(--navy);font-variant-numeric:tabular-nums}
/* Checkbox (Untitled "Checkbox", sm) */
.cart-ful input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--ui-gray-300);cursor:pointer;flex:none;display:grid;place-items:center}
.cart-ful input:checked{background:var(--ui-brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 14 14'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.667 3.5 5.25 9.917 2.333 7'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.cart-ful input[type=radio]{border-radius:999px}
.cart-ful input[type=radio]:checked{background:#fff;box-shadow:inset 0 0 0 5px var(--ui-brand-500)}
/* Alerts (Untitled "Alert", floating style) */
.test-note,.cart-test{display:flex;gap:10px;align-items:flex-start;background:var(--ui-warn-50);color:var(--ui-warn-700);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;line-height:20px;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-warn-200)}
/* Badges (Untitled "Badge", pill-color, sm) */
.ui-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.ui-badge.warning{background:var(--ui-warn-50);color:var(--ui-warn-700);box-shadow:inset 0 0 0 1px var(--ui-warn-200)}
.ui-badge.brand{background:var(--ui-brand-50);color:var(--ui-brand-700);box-shadow:inset 0 0 0 1px var(--ui-brand-200)}
.ui-badge.gray{background:var(--ui-gray-50);color:var(--ui-gray-700);box-shadow:inset 0 0 0 1px var(--ui-gray-200)}
/* Date and time pickers (Untitled "Date time picker": DatePicker + Calendar + CalendarCell), js/datepicker.js */
.quick .ui-field,.pre-form .ui-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ui-gray-700);min-width:0}
.ui-dp{position:relative}
/* The trigger: Untitled's secondary button with a leading icon; the time in the quaternary grey. */
.ui-dp-trigger{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:8px;background:#fff;color:var(--ui-gray-700);font:600 14px/20px var(--sans);text-align:left;cursor:pointer;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);transition:box-shadow .1s linear,background .1s linear,color .1s linear}
.ui-dp-trigger svg{flex:none;color:var(--ui-gray-400)}
.ui-dp-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-dp-time{color:var(--ui-gray-500)}
.ui-dp-trigger:hover{background:var(--ui-gray-50);color:var(--navy)}
.ui-dp-trigger:hover svg{color:var(--ui-gray-500)}
.ui-dp-trigger:disabled{cursor:not-allowed;background:var(--ui-gray-50);color:var(--ui-gray-500)}
.ui-dp-trigger:focus-visible,.ui-dp.is-open .ui-dp-trigger{outline:0;box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-brand-500)}
.ui-dp-pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:max-content;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;box-shadow:var(--ui-shadow-xl),0 0 0 1px rgba(0,0,0,.08);color:var(--ui-gray-700);font-weight:400;text-align:left;animation:ui-pop .15s ease-out}
@keyframes ui-pop{from{opacity:0;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.ui-dp-pop{animation:none}}
.ui-dp-body{display:flex}
.ui-cal{display:flex;flex-direction:column;gap:12px;padding:20px 24px;width:328px;max-width:100%}
.ui-cal-head{display:flex;align-items:center;justify-content:space-between}
.ui-cal h3{font:600 14px/20px var(--sans);color:var(--ui-gray-700);margin:0}
.ui-cal-hint{margin:0;font-size:13px;line-height:18px;color:var(--ui-gray-600);text-align:center}
.ui-cal-tools{display:flex;flex-wrap:wrap;gap:12px}
.ui-datebox{display:flex;gap:12px;flex:1 1 100%;min-width:0}
.ui-datebox .ui-input{flex:1 1 auto;min-width:0;width:136px}
.ui-dp .ui-input{font:400 14px/20px var(--sans);padding:8px 12px;border:0;border-radius:8px;color:var(--navy);background:#fff;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);transition:box-shadow .1s linear}
.ui-dp .ui-input::placeholder{color:var(--ui-gray-500)}
.ui-dp .ui-input:focus-visible{outline:0;box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-brand-500)}
.ui-dp .ui-input[aria-invalid=true]{box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-error-subtle)}
.ui-dp .ui-input[aria-invalid=true]:focus-visible{box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-error)}
.ui-select-wrap{position:relative;flex:1 1 100%;display:flex}
.ui-select-wrap svg{position:absolute;left:12px;top:50%;margin-top:-10px;color:var(--ui-gray-500);pointer-events:none}
.ui-dp .ui-select{flex:1;width:100%;appearance:none;-webkit-appearance:none;padding-left:40px;padding-right:40px;background:#fff var(--ui-chevron) no-repeat right 12px center/20px;cursor:pointer}
.ui-dp .ui-select:disabled{color:var(--ui-gray-500);background-color:var(--ui-gray-50);cursor:not-allowed}
.ui-icon-btn{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--ui-gray-400);cursor:pointer;transition:background .1s linear,color .1s linear}
.ui-icon-btn:hover{background:var(--ui-gray-50);color:var(--ui-gray-500)}
.ui-icon-btn:disabled{opacity:.5;cursor:not-allowed;background:none}
.ui-icon-btn:focus-visible{outline:2px solid var(--ui-brand-500);outline-offset:2px}
.ui-cal-grid{border-collapse:separate;border-spacing:0 4px;margin:-4px auto;width:max-content}
.ui-cal-grid th{width:40px;height:40px;padding:0;font:500 14px/20px var(--sans);color:var(--ui-gray-700)}
.ui-cal-grid td{width:40px;height:40px;padding:0}
.ui-day{position:relative;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:none;color:var(--ui-gray-700);font:400 14px/20px var(--sans);cursor:pointer;transition:background .1s linear}
.ui-day:hover{background:var(--ui-gray-50);font-weight:600}
.ui-day.is-today{background:var(--ui-gray-100);font-weight:600}
.ui-day.is-today::after{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ui-brand-500)}
.ui-day.is-on{background:var(--ui-brand-600);color:#fff;font-weight:600}
.ui-day.is-on:hover{background:var(--ui-brand-700)}
.ui-day.is-on::after{background:#fff}
.ui-day.is-off{opacity:.5;cursor:default;background:none;font-weight:400}
.ui-day.is-off.is-today{background:var(--ui-gray-100)}
.ui-day:focus-visible{outline:2px solid var(--ui-brand-500);outline-offset:2px;z-index:1}
/* "Available times": a column beside the month (Untitled's w-50, buttons xs secondary). */
.ui-dp-times{display:flex;flex-direction:column;gap:16px;width:200px;min-height:0;border-left:1px solid var(--ui-gray-200)}
.ui-dp-times-head{padding:26px 20px 0;text-align:center;font:600 14px/20px var(--sans);color:var(--ui-gray-700)}
.ui-dp-times-scroll{position:relative;flex:1;min-height:200px}
.ui-dp-times-scroll .ui-times{position:absolute;inset:0;overflow-y:auto;padding:2px 20px 28px;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 98%);mask-image:linear-gradient(to bottom,#000 80%,transparent 98%)}
.ui-times{list-style:none;margin:0;display:flex;flex-direction:column;gap:6px}
.ui-time{flex:none;padding:6px 10px;border-radius:8px;background:#fff;color:var(--ui-gray-700);font:600 14px/20px var(--sans);text-align:center;cursor:pointer;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300);transition:background .1s linear,box-shadow .1s linear,color .1s linear}
.ui-time:hover{background:var(--ui-gray-50);color:var(--navy)}
.ui-time[aria-selected=true]{background:var(--ui-brand-50);color:var(--ui-brand-700);box-shadow:var(--ui-shadow-xs),inset 0 0 0 2px var(--ui-brand-500)}
.ui-time:focus-visible{outline:2px solid var(--ui-brand-500);outline-offset:2px}
.ui-times-empty{padding:8px 0;font-size:14px;line-height:20px;color:var(--ui-gray-600);text-align:center}
/* A time on its own: Untitled's Select dropdown, with a check on the chosen one. */
.ui-tp-pop{width:max(100%,180px);max-height:304px;overflow-y:auto;padding:4px 0;border-radius:8px;box-shadow:var(--ui-shadow-lg),0 0 0 1px rgba(0,0,0,.08)}
.ui-tp-pop .ui-times{gap:1px;padding:0 6px}
.ui-tp-pop .ui-time{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;font-weight:500;text-align:left;box-shadow:none;color:var(--navy)}
.ui-tp-pop .ui-time[aria-selected=true]{background:var(--ui-gray-50);box-shadow:none;color:var(--navy);font-weight:600}
.ui-tp-pop .ui-time[aria-selected=true]::after{content:"";width:12px;height:7px;margin:-3px 2px 0 8px;border-left:2px solid var(--ui-brand-600);border-bottom:2px solid var(--ui-brand-600);transform:rotate(-45deg)}
.ui-tp-pop .ui-time:focus-visible{outline-offset:-2px}
.ui-tp-pop .ui-times-empty{padding:8px 12px;text-align:left}
.ui-dp-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border-top:1px solid var(--ui-gray-200)}
.ui-dp.has-time .ui-dp-foot{display:flex}
.ui-dp.has-time .ui-dp-foot .ui-datebox{flex:0 1 auto;margin-right:auto}
.ui-dp.has-time .ui-dp-foot .ui-datebox .ui-input{width:136px;flex:none}
.ui-dp .wide-only{display:none}
@media (min-width:768px){
  .ui-dp .wide-only{display:flex}
  .ui-dp .phone-only{display:none}
}
@media (max-width:767px){
  .ui-dp.has-time .ui-dp-foot>.ui-btn{flex:1}
  .ui-dp .ui-input{font-size:16px;line-height:24px} /* 16px keeps phones from zooming in */
}
/* Buttons (Untitled "Button", md; .sm is size sm) for app-style controls; site CTAs keep .btn */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:0;border-radius:8px;font:600 14px/20px var(--sans);cursor:pointer;transition:background .1s linear,box-shadow .1s linear;white-space:nowrap}
.ui-btn.sm{padding:8px 12px}
.ui-btn.secondary{background:#fff;color:var(--ui-gray-700);box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px var(--ui-gray-300)}
.ui-btn.secondary:hover{background:var(--ui-gray-50);color:var(--navy)}
.ui-btn.primary{background:var(--ui-brand-600);color:#fff;box-shadow:var(--ui-shadow-xs),inset 0 0 0 1px rgba(255,255,255,.12)}
.ui-btn.primary:hover{background:var(--ui-brand-700)}
.ui-btn:focus-visible{outline:2px solid var(--ui-brand-500);outline-offset:2px}
@media (max-width:560px){.ui-cal{padding:16px;width:312px}}
/* The catering forms' "when": day and start time, then the end time (js/datepicker.js). */
.quick .when{border:0;margin:0;padding:0;min-width:0}
.quick .when legend{font-size:14px;font-weight:600;color:var(--ui-gray-700);margin-bottom:6px;padding:0}
.when-pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.quick .when-pair .ui-field{font-size:13px;font-weight:500;color:var(--ui-gray-600)}
.when [data-part]{min-height:44px}
@media (max-width:400px){.when-pair{grid-template-columns:1fr}}

/* ── Store cards: size chips carry their price; the 2 lb subscription dialog (js/shop.js) ── */
.bag{scroll-margin-top:110px}
.bag .seg.sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.sizes span{text-align:center;padding:7px 6px}
.seg.sizes small{display:block;font-size:12px;font-weight:500;line-height:16px;color:var(--ui-gray-600)}
.seg.sizes small:empty{display:none}
.seg.sizes input:checked+span small{color:var(--ui-brand-700)}
dialog.sub-dlg{margin:auto;width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;border:0;border-radius:16px;padding:0;background:#fff;color:var(--navy);box-shadow:var(--ui-shadow-xl),0 0 0 1px rgba(0,0,0,.08)}
dialog.sub-dlg::backdrop{background:rgba(18,50,86,.45)}
.sub-dlg-in{display:grid;gap:18px;padding:24px}
.sub-dlg-head{display:grid;gap:10px;justify-items:start}
.sub-dlg h2{font-size:22px;font-weight:900;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.sub-dlg-lede{color:var(--ui-gray-600);font-size:16px;margin-top:-8px}
.sub-dlg-facts{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--ui-gray-700)}
.sub-dlg-facts li{position:relative;padding-left:24px}
.sub-dlg-facts li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2px solid var(--ui-brand-500);border-bottom:2px solid var(--ui-brand-500);transform:rotate(-45deg)}
.sub-dlg-facts b{color:var(--navy);font-weight:800}
.sub-dlg fieldset{border:0;min-width:0}
.sub-dlg legend{font-size:14px;font-weight:600;color:var(--ui-gray-700);margin-bottom:6px}
.sub-dlg .qty span{min-width:48px}
.sub-dlg-total{font-weight:800;font-size:17px;color:var(--navy);padding-top:14px;border-top:1px solid var(--ui-gray-200);font-variant-numeric:tabular-nums}
.sub-dlg-btns{display:flex;gap:10px;flex-wrap:wrap}
.sub-dlg-btns .btn{flex:1 1 160px;justify-content:center}
.sub-dlg .cart-status{margin-top:-6px}
@media (max-width:560px){.sub-dlg-in{padding:20px 18px}.sub-dlg h2{font-size:20px}}
/* Events: each room tile ends in its own booking button. */
.tiles.rooms .tile .btn{margin-top:auto;align-self:flex-start}
.tiles.rooms .tile p{margin-bottom:18px}
.note-line{margin-top:16px;color:var(--muted);font-size:15px}
/* "Good to know" above the catering and truck form. */
.good-to-know{margin-top:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:18px 20px;max-width:30em}
.good-to-know h3{font-size:16px;font-weight:800;color:#fff;margin-bottom:8px}
.good-to-know ul{list-style:none;display:grid;gap:6px;font-size:15px;color:#d5deea}
.good-to-know li{position:relative;padding-left:22px}
.good-to-know li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--sky)}
/* Holiday hours, in the visit cards and beside the pre-order day picker (js/site.js hides past days). */
.cards .hh p{font-size:inherit;font-weight:inherit}
.hh-list{list-style:none;display:grid;gap:2px;margin-top:4px}
.hh-list li{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;padding:3px 0;border-top:1px solid rgba(18,50,86,.08)}
.hh-list li:first-child{border-top:0}
.hh-list li span:last-child{white-space:nowrap;color:var(--navy)}
.hh-list small{font-size:13px;font-weight:500;color:var(--muted)}
.pre-hh{background:var(--ui-gray-50);border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--ui-gray-200)}
.pre-hh .hh-note{margin:2px 0 6px;font-size:14px;color:var(--ui-gray-600)}
.pre-hh .hh-list li{font-size:14px;font-weight:500;color:var(--ui-gray-700)}
.note-line + .space{margin-top:24px}
.good-to-know p{font-size:15px;color:#d5deea;margin-bottom:8px}
/* Footer between the full layout and tablets: the logo and sign-up get their own row. */
@media (min-width:981px) and (max-width:1180px){
  footer .cols{grid-template-columns:repeat(5,1fr)}
  footer .cols>div:first-child{grid-column:1/-1;max-width:420px}
}
/* Book a room page: the phone line under the buttons (the popup is css/booking.css). */
.rooms-phone{margin-top:18px;color:var(--muted);font-size:16px}
.rooms-phone a{color:var(--cerulean-ink);font-weight:700;white-space:nowrap}

/* Google reviews (home) */
.reviews{background:#fff}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0 32px}
.q{margin:0;background:var(--mist);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px}
.q .stars{color:var(--cerulean-ink);font-size:15px;letter-spacing:3px}
.q blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;color:var(--navy)}
.q figcaption{margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.quotes{grid-template-columns:1fr}}

/* Blog: a photo inside the article text. */
.prose figure{margin:28px 0 30px}
.prose figure img{width:100%;height:auto;border-radius:var(--r)}
.prose figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

/* Catering: truck and catering questions side by side. */
.faq-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:start}
.faq-groups .faq{margin-top:12px;max-width:none}
.faq-h{font-size:18px;font-weight:800;color:var(--navy)}
@media (max-width:860px){.faq-groups{grid-template-columns:1fr}}