/* Tasty Pizza — one stylesheet for every page.

   Built phone-first, because that is where nearly every order starts.

   COLOUR RULES
     black  every piece of text and all structure
     red    one job — the thing you click, and the price
     green  one job — fresh, open, vegetarian, saving
     red and green never touch; white or black always separates them

   LAYOUT RULES (learned from the menus people already know how to use)
     * a dish is a card you can order from without opening anything
     * the way back and the way sideways are always on screen
     * a photo appears only when it is the shop's own food */

@font-face{font-family:'Archivo';src:url('fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --white:#FFFFFF; --paper:#FFFFFF; --wash:#F3F3F5;
  --ink:#111113; --ink-2:#4A4A50; --ink-3:#6B6B73;
  --red:#B70017; --red-hot:#DC0A22;
  --green:#0B5C3F; --green-soft:#EAF3EE;
  --line:rgba(17,17,19,.12);
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1280px; --bar:60px; --r:18px;
  --sh:0 1px 2px rgba(17,17,19,.06),0 10px 28px rgba(17,17,19,.07);
  --sh-lift:0 2px 6px rgba(17,17,19,.08),0 20px 46px rgba(17,17,19,.13);
  --ease:cubic-bezier(.22,.7,.28,1);
  --slide:cubic-bezier(.36,.02,.18,1); --rail:0px;
}

/* lenis 1.3.26's own stylesheet, inlined. It was a render-blocking request to
   unpkg costing ~840 ms of mobile LCP for 25 lines of CSS. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;
  transition-behavior:allow-discrete}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);
  font:400 clamp(15.5px,.4vw + 14.4px,17px)/1.6 var(--f);overflow-x:hidden}
/* clip, not hidden: hidden makes body a scroll container and quietly breaks
   every position:sticky on the page (the rail, the pizza). */
@supports (overflow:clip){body{overflow-x:clip}}
/* Barely-there grain. Pure white across a whole page looks like an unstyled
   document; this gives the paper a surface without tinting it. */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
/* only main needs lifting above the grain; the bar, cart, sheet and scrim are
   already positioned with their own z-index, and re-declaring position here
   turned the cart from fixed into an in-flow 420px block */
main{position:relative;z-index:1}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:.95}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--red);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- type */
.display{font-size:clamp(2.6rem,7.6vw,5.4rem);text-transform:uppercase;letter-spacing:-.042em;
  line-height:.87}
.display em{font-style:normal;color:var(--red)}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--red);flex:none}
.lede{font-size:clamp(.97rem,.4vw + .88rem,1.1rem);color:var(--ink-2);max-width:44ch}
h2.sec{font-size:clamp(1.55rem,3.2vw,2.5rem);text-transform:uppercase}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border:2px solid var(--ink);border-radius:999px;font-weight:700;
  cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background-color .18s var(--ease),color .18s,transform .18s var(--ease),
    box-shadow .18s var(--ease),border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff;box-shadow:var(--sh)}
.btn-red:hover{background:var(--red-hot);border-color:var(--red-hot);box-shadow:var(--sh-lift)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{padding:.55rem 1rem;font-size:.88rem}
.btn-wide{width:100%}
.acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

.tag{display:inline-flex;align-items:center;align-self:flex-start;font-size:.62rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.24rem .5rem;
  border-radius:999px;background:var(--wash);color:var(--ink-2)}
.tag-veg{background:var(--green-soft);color:var(--green)}

.openpill{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;
  padding:.34rem .75rem;border-radius:999px;background:var(--green-soft);color:var(--green);
  white-space:nowrap}
.openpill::before{content:'';width:7px;height:7px;border-radius:99px;background:currentColor;
  animation:ping 2.4s var(--ease) infinite}
.openpill[data-shut]{background:#FBEAEC;color:#96101F}
.openpill[data-shut]::before{animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(11,92,63,.5)}70%{box-shadow:0 0 0 7px rgba(11,92,63,0)}100%{box-shadow:0 0 0 0 rgba(11,92,63,0)}}

/* ---------------------------------------------------------------- header */
.bar{position:sticky;top:0;z-index:60;height:var(--bar);display:flex;align-items:center;
  gap:1.2rem;padding:0 clamp(.9rem,3vw,2rem);background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .brand{flex:none;line-height:0}
.bar .brand img{height:38px;width:auto}
.bar nav{display:flex;gap:1.3rem;margin-left:auto;font-weight:600;font-size:.93rem}
.bar nav a{padding:.3rem 0;border-bottom:2px solid transparent}
.bar nav a:hover{border-color:var(--red)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:.55rem}
.bar nav + .bar-right{margin-left:0}
/* nav is display:none on a phone but still a sibling, so the rule above was
   cancelling the auto margin and parking the dots against the logo */
@media (max-width:900px){.bar nav + .bar-right{margin-left:auto}}

.dots{display:none;width:42px;height:42px;cursor:pointer;place-items:center;border-radius:999px}
.dots:hover{background:var(--wash)}
.dots i{display:block;width:5px;height:5px;border-radius:99px;background:var(--ink);
  box-shadow:0 -8px 0 var(--ink),0 8px 0 var(--ink)}

/* the order: one circle, top right, on every page; a count once it has something */
.cartbtn{position:relative;width:44px;height:44px;border-radius:999px;background:var(--ink);
  color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background-color .18s,transform .2s var(--ease)}
.cartbtn:hover{background:var(--red);transform:scale(1.05)}
.cartbtn svg{width:21px;height:21px}
.cartbtn b{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--white);font-variant-numeric:tabular-nums}
.cartbtn[data-bump]{animation:pop .42s var(--ease)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

.sheet{position:fixed;left:0;right:0;top:var(--bar);z-index:55;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-lift);padding:.4rem 1.1rem 1.1rem;
  display:grid;transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:transform .28s var(--ease),opacity .22s var(--ease)}
.sheet[data-open]{transform:none;opacity:1;pointer-events:auto}
.sheet a{display:flex;align-items:center;justify-content:space-between;padding:.85rem .2rem;
  border-bottom:1px solid var(--line);font-weight:700;font-size:1.02rem}
.sheet a::after{content:'\2192';color:var(--red);font-weight:400}
.sheet .openpill{margin:.8rem .2rem 0;justify-self:start}

/* ---------------------------------------------------------------- hero
   One screen. Everything needed to start an order, nothing that needs scrolling
   to make sense. What comes next is a new thing, not the rest of this one. */
/* height, not min-height: one screen is the brief, so the hero is told exactly
   how tall it is and everything inside is measured against that same height —
   hence --pie and the display size both carrying an svh term. Nothing of the
   next section is ever visible until you scroll. */
.hero{height:calc(100vh - var(--bar));display:grid;align-content:center;overflow:hidden;
  padding:clamp(.5rem,1.6vh,1.8rem) 0;--pie:min(72vw,33svh)}
@supports (height:100svh){.hero{height:calc(100svh - var(--bar))}}
/* Three blocks, not two, so the phone can slot the pizza between the sentence
   and the buttons: read what we are, see the thing, act. On a wide screen the
   copy and the buttons stack back up in the left column. */
.hero-in{display:grid;gap:clamp(.5rem,1.6vh,1rem) clamp(1rem,3vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-rows:auto auto}
.hero-copy{grid-column:1;grid-row:1;align-self:end}
.hero-cta{grid-column:1;grid-row:2;align-self:start}
.herofig{grid-column:2;grid-row:1 / span 2;min-width:0;display:grid;justify-items:center}
.stage{width:100%;display:grid;place-items:center}
@media (min-width:901px){.hero{--pie:min(40vw,56svh)}}
.hero h1{margin:.5rem 0 .5rem}
.hero .display{font-size:min(clamp(1.85rem,6.5vw,3.7rem),7.4svh)}
/* Three beats fit a wide column. A phone gets the same three ideas folded
   into two lines — "Fresh. Hot." carries what the first two lines said — so
   the headline stops eating the screen the pizza needs. */
.display .narrow{display:none}
.hero .lede{font-size:min(clamp(.95rem,.4vw + .86rem,1.08rem),2.5svh)}
.hero-facts{display:flex;flex-wrap:wrap;gap:.3rem .95rem;margin-top:.7rem;
  font-size:.82rem;font-weight:600;color:var(--ink-2)}
.hero-facts span{display:inline-flex;align-items:center;gap:.35rem}
.hero-facts b{color:var(--ink)}

/* No board, no plate. The pies are cut out on transparency, so they sit
   straight on the page's own white — which is the cleanest this has looked.
   What moves is the pizza; the ring of words and the price stay put. */
.turntable{position:relative;width:var(--pie,430px);max-width:100%;aspect-ratio:1;
  margin-inline:auto;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none}
.turntable:active{cursor:grabbing}

/* wide enough that a pizza leaves the frame before it reaches the text column */
.pieclip{position:absolute;inset:0 -28%;overflow:hidden;
  display:grid;place-items:center;pointer-events:none}
.pieclip>*{grid-area:1/1;width:calc(var(--pie,430px) * .78);aspect-ratio:1}
.pies{position:relative}
.disc{position:absolute;inset:0;opacity:0;
  transition:transform .72s var(--slide),opacity .4s var(--ease)}
.disc img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(17,17,19,.20))}
.disc.is-cur{opacity:1;transform:none}
/* right to left: the one on show leaves to the left, the next arrives from the
   right, with a little rotation so it reads as a hand sliding it across */
.disc.out-next{transform:translateX(-142%) rotate(-14deg) scale(.8);opacity:0}
.disc.in-next{transform:translateX(142%) rotate(14deg) scale(.8);opacity:0}
.disc.out-prev{transform:translateX(142%) rotate(14deg) scale(.8);opacity:0}
.disc.in-prev{transform:translateX(-142%) rotate(-14deg) scale(.8);opacity:0}
.turntable.is-drag .disc{transition:none}

/* the ring of words, turning slowly around the pizza. The viewBox is padded
   well past the circle so no ascender is ever clipped, and the ring sits
   outside the pie so the two never collide. */
.orbit{position:absolute;inset:-9%;pointer-events:none;z-index:2}
.orbit svg{width:100%;height:100%;overflow:visible}
/* drawn on a 360 grid, not 120: SVG text is sized in viewBox units, and
   Lighthouse read the 120-grid version as 4.6px "illegible" text although it
   renders at ~13px. Same ring, same size on screen, honest number. */
.orbit text{font-size:13.8px;font-weight:800;letter-spacing:.34em;fill:var(--ink-3);
  text-transform:uppercase}
.orbit g{transform-origin:180px 180px;animation:orbit 54s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}

/* the price, stuck on the rim. It belongs to the pizza, not to a card. */
.badge{position:absolute;z-index:5;background:var(--red);color:#fff;border-radius:50%;
  width:clamp(74px,calc(var(--pie,430px) * .3),116px);aspect-ratio:1;
  display:grid;place-content:center;gap:.05rem;text-align:center;
  right:-4%;top:1%;rotate:-7deg;box-shadow:0 12px 26px -6px rgba(183,0,23,.45)}
.badge i{font-style:normal;font-size:.56rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;opacity:.9}
.badge b{font-size:clamp(1rem,calc(var(--pie,430px) * .092),1.5rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
/* full white: at 74% opacity the old price fell below 4.5:1 on the red */
.badge s{font-size:.7rem;font-weight:600}
.badge[data-pop]{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.62);opacity:0}60%{transform:scale(1.07)}100%{transform:none}}

/* the timer bars: where you are, and that it is about to move on */
.ticks{display:flex;gap:.3rem;justify-content:center;margin-top:1.1rem}
.ticks button{width:24px;height:4px;border-radius:99px;background:var(--line);cursor:pointer;
  position:relative;overflow:hidden;flex:none;padding:0;border:0}
.ticks button::after{content:'';position:absolute;inset:0;background:var(--ink);
  transform-origin:left;transform:scaleX(0)}
.ticks button[data-on]::after{transform:scaleX(1);transition:transform .22s var(--ease)}
.ticks button[data-run]::after{animation:fill var(--hold,2000ms) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the offer, set on the page itself rather than boxed off from it */
.deal{display:grid;gap:.2rem;min-width:0;margin-top:.9rem;color:inherit;
  text-decoration:none;cursor:pointer;border-radius:14px;
  transition:background-color .18s var(--ease)}
/* hover only where there is a pointer to hover with: on a phone a tap leaves
   :hover stuck, which left a grey box behind the offer after tapping it */
@media (hover:hover){.deal:hover{background:var(--wash)}}
.dealgo{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:800;
  letter-spacing:.02em;color:var(--red);margin-top:.15rem}
.dealgo::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);
  transition:transform .18s var(--ease)}
.deal:hover .dealgo::after{transform:rotate(-45deg) translate(2px,2px)}
.turntable{cursor:pointer}
.deal[data-flash] .dealin{animation:dealin .46s var(--ease)}
@keyframes dealin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.dealin{display:grid;gap:.22rem;min-width:0;align-content:start}
.kicker{display:flex;align-items:center;gap:.45rem;font-size:.6rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.kicker.is-green{color:var(--green)}
.kicker.is-grey{color:var(--ink-3)}
.kicker::after{content:'';height:1px;flex:1;background:var(--line);min-width:12px}
.deal h2{font-size:min(clamp(1.1rem,4.2vw,1.7rem),4.4svh);letter-spacing:-.028em;
  text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* Every offer has a different amount to say. Left to itself the tallest one
   pushed the headline up and the buttons down as the carousel turned, so the
   text is clamped and the block holds one height for all five. */
.deal .sub{font-size:min(.86rem,2.2svh);color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dealin{min-height:7.2rem}
.saveline{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;font-size:.84rem}
.saveline .was{color:var(--ink-3);text-decoration:line-through;font-weight:600;margin:0}
.saveline .save{color:var(--green);font-weight:800}
.saveline .unit{color:var(--ink-3);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .disc{transition:opacity .2s linear!important}
  .orbit g{animation:none}
  .disc[class*="out-"],.disc[class*="in-"]{transform:none!important}
  .ticks button[data-run]::after{animation:none;transform:scaleX(1)}
}


/* ---------------------------------------------------------------- pizza drawing (build page) */
.peel{position:relative;width:min(100%,300px);aspect-ratio:1;display:grid;place-items:center}
.peel-board{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#D6A96E,#B0814A 62%,#94683A);
  box-shadow:0 18px 40px rgba(17,17,19,.24),inset 0 0 0 3px rgba(255,255,255,.1)}
.dough{position:relative;width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#F3DCAE,#E7C58A 70%,#D9AE6B);
  box-shadow:inset 0 -6px 16px rgba(140,90,40,.3),0 4px 14px rgba(0,0,0,.2);
  transition:width .45s var(--ease)}
.sauce{position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 44% 40%,#D33A22,#A8240F);opacity:0;transition:opacity .35s}
.cheese{position:absolute;inset:10%;border-radius:50%;opacity:0;transition:opacity .4s;
  background:
    radial-gradient(circle at 28% 30%,rgba(255,255,255,.5) 0 5%,transparent 6%),
    radial-gradient(circle at 66% 24%,rgba(255,255,255,.4) 0 4%,transparent 5%),
    radial-gradient(circle at 74% 62%,rgba(255,255,255,.42) 0 5%,transparent 6%),
    radial-gradient(circle at 34% 72%,rgba(255,255,255,.38) 0 4%,transparent 5%),
    radial-gradient(circle at 44% 40%,#F7D882,#EDBF55 62%,#DCA637);
  box-shadow:inset 0 -4px 12px rgba(160,95,20,.35)}
.dough[data-topped] .sauce,.dough[data-topped] .cheese{opacity:1}
.tops{position:absolute;inset:6%;border-radius:50%;overflow:hidden}
.bit{position:absolute;width:var(--w,20px);height:var(--w,20px);line-height:0;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  filter:drop-shadow(0 1.5px 1.5px rgba(96,48,10,.42));
  animation:drop .46s cubic-bezier(.3,1.5,.5,1) both}
.bit svg{width:100%;height:100%}
@keyframes drop{
  0%{opacity:0;transform:translate(-50%,-340%) rotate(calc(var(--rot,0deg) - 50deg)) scale(1.45)}
  58%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.82)}
  78%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.06)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}}
.ctrl{margin-bottom:1.1rem}
.ctrl h3{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.5rem;display:flex;gap:.55rem;align-items:baseline}
.ctrl h3 em{font-style:normal;color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:2px solid var(--line);border-radius:999px;padding:.46rem .9rem;font-weight:700;
  font-size:.88rem;cursor:pointer;transition:border-color .16s,background-color .16s,color .16s}
.chip:hover{border-color:var(--ink)}
.chip[data-on]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip em{font-style:normal;opacity:.65;font-size:.74rem;margin-left:.25rem}
.ctrl-hint{font-size:.78rem;color:var(--ink-3);margin:-.3rem 0 .55rem}

/* A topping is a row you can tap once, or step up and down. Nothing is ever
   disabled: past the allowance the price simply appears on every topping, so
   the choice stays the customer's and the cost stops being a surprise. */
.tops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:.4rem}
.topbtn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  text-align:left;cursor:pointer;border:2px solid var(--line);border-radius:12px;
  padding:.36rem .4rem .36rem .6rem;font-size:.85rem;font-weight:500;
  transition:border-color .16s,background-color .16s,color .16s}
.topbtn:hover{border-color:var(--ink)}
.topbtn.is-on{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:700}
.topname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topcost{grid-column:2;grid-row:2;font-size:.68rem;font-weight:800;color:var(--red);
  letter-spacing:.02em;margin-top:-.2rem}
.topbtn.is-on .topcost{color:#FF9AA6}
.topq{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:.1rem}
.topq button{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  cursor:pointer;font-weight:800;font-size:.95rem;line-height:1;
  border:1.5px solid var(--line);transition:background-color .14s,border-color .14s}
.topbtn.is-on .topq button{border-color:rgba(255,255,255,.34)}
.topq button:hover{background:var(--red);border-color:var(--red);color:#fff}
.topq b{min-width:1.1ch;text-align:center;font-variant-numeric:tabular-nums;font-size:.86rem}
.tdot{width:13px;height:13px;border-radius:99px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}


/* ---------------------------------------------------------------- order note */
.note-field{display:grid;gap:.35rem;margin-bottom:.2rem}
.note-field>span{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.note-field textarea{font:inherit;font-size:.88rem;width:100%;resize:vertical;
  border:2px solid var(--line);border-radius:12px;padding:.55rem .7rem;background:var(--white);
  color:inherit;transition:border-color .16s}
.note-field textarea:focus{border-color:var(--ink);outline:none}
.paynote{display:grid;gap:.15rem;border-left:3px solid var(--green);padding:.2rem .7rem;
  margin-bottom:.7rem}
.paynote b{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green)}
.paynote span{font-size:.86rem;color:var(--ink-2)}


/* ---------------------------------------------------------------- find us */
.find{display:grid;gap:clamp(1rem,2.6vw,2.4rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start}
.hours{display:grid;margin:1rem 0;border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:.93rem}
.hours div[data-today]{color:var(--red);font-weight:700}
.hours dt,.hours dd{margin:0}
.mapcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  background:var(--paper);box-shadow:var(--sh)}
.mapcard iframe{position:absolute;left:-9%;top:-7%;width:119%;height:119%;border:0;
  pointer-events:none;filter:saturate(.75) contrast(1.04)}
.mapcard .pin{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  background:var(--red);color:#fff;font-weight:700;padding:.68rem 1.2rem;border-radius:999px;
  box-shadow:var(--sh-lift);white-space:nowrap;font-size:.92rem}
.mapattr{position:absolute;right:.5rem;bottom:.35rem;font-size:.58rem;color:var(--ink-3);
  background:rgba(255,255,255,.85);padding:.1rem .3rem;border-radius:4px}
.areas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.areas span{font-size:.8rem;font-weight:600;padding:.3rem .65rem;border-radius:999px;
  background:var(--paper);color:var(--ink-2)}

/* ---------------------------------------------------------------- page frame */
.band{padding:clamp(1.8rem,4.4vw,3.6rem) 0}
.band-tiles{padding-top:clamp(1.4rem,3vw,2.6rem)}
.pagehead{display:grid;gap:.45rem;margin-bottom:clamp(1rem,2.4vw,1.6rem)}
.pagehead p{color:var(--ink-3);font-size:.95rem;max-width:60ch}
.sec-big{font-size:clamp(1.9rem,4.6vw,3.1rem);text-transform:uppercase;letter-spacing:-.04em}
h2.sec{font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--ink-3);
  margin:1.6rem 0 .7rem}
h2.sec:first-of-type{margin-top:0}
.find h2.sec{font-size:clamp(1.55rem,3.2vw,2.5rem);letter-spacing:-.03em;color:var(--ink);margin:0 0 .6rem}
.small{font-size:.84rem;color:var(--ink-3);margin-top:.8rem}
.narrowcol{max-width:760px}
.backlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;
  padding:.4rem .9rem .4rem .7rem;margin:0 0 1rem -.2rem;border-radius:999px;
  transition:background-color .16s}
.backlink::before{content:'';width:8px;height:8px;border-left:2.4px solid currentColor;
  border-bottom:2.4px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.backlink:hover{background:var(--wash)}}
.bar nav a[aria-current]{border-color:var(--ink)}

/* ---------------------------------------------------------------- category doors
   Tall windows in a grid that fills the width: two across on a phone, more as
   the screen grows. The food fills the window; the name sits at its foot. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(42vw,190px),1fr));gap:.7rem}
.tile{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  background:var(--ink);color:#fff;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  transition:transform .6s var(--ease)}
.tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(17,17,19,0) 42%,rgba(17,17,19,.82))}
.tile-text{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.15rem;padding:.9rem .95rem}
.tile b{font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:800;letter-spacing:-.015em;line-height:1.1}
.tile small{font-size:.78rem;color:rgba(255,255,255,.8);font-weight:600}
@media (hover:hover){
  .tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
  .tile:hover img{transform:scale(1.05)}
}
.tile.is-deal::after{background:linear-gradient(180deg,rgba(183,0,23,.05) 30%,rgba(150,0,20,.9))}

/* ---------------------------------------------------------------- category rail
   Inside a category the way out (the arrow) and the way sideways (the pills)
   stay on screen all the way down, so a change of mind never costs a scroll. */
.rail{position:sticky;top:var(--bar);z-index:20;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.rail-in{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;min-width:0}
.rail-back{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  border:2px solid var(--line);transition:border-color .16s}
.rail-back i{width:8px;height:8px;border-left:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);
  transform:translateX(1px) rotate(45deg)}
@media (hover:hover){.rail-back:hover{border-color:var(--ink)}}
.rail-track{flex:1 1 0%;min-width:0;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;padding:.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 24px),transparent)}
.rail-track::-webkit-scrollbar{display:none}
.pill{flex:none;border:2px solid var(--line);border-radius:999px;padding:.34rem .85rem;
  font-size:.86rem;font-weight:700;white-space:nowrap;transition:border-color .16s}
.pill:first-child{margin-left:10px}
.pill:last-child{margin-right:20px}
@media (hover:hover){.pill:hover{border-color:var(--ink)}}
.pill[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------------------------------------------------------------- dish cards
   Name and words on the left, the shop's photo on the right, sizes as one row
   of choices, then quantity and Add. Everything needed to order is on the card. */
.band-menu{padding-top:clamp(1.2rem,3vw,2.2rem)}
.grouphead{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;margin:2.2rem 0 .8rem;scroll-margin-top:calc(var(--bar) + 70px)}
.pagehead + .grouphead{margin-top:.6rem}
.groupnote{font-size:.88rem;color:var(--ink-3);margin:-.4rem 0 .9rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.75rem}
.card{display:flex;flex-direction:column;gap:.85rem;padding:1rem;border:1px solid var(--line);
  border-radius:18px;background:var(--white);scroll-margin-top:calc(var(--bar) + 76px);
  transition:border-color .16s,box-shadow .2s var(--ease)}
@media (hover:hover){.card:hover{border-color:rgba(17,17,19,.28);box-shadow:var(--sh)}}
.card:target{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.9rem;row-gap:.35rem;
  align-items:start}
.card h3{grid-column:1;font-size:1.06rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;
  align-self:center}
.card-text{grid-column:1;min-width:0;display:grid;gap:.3rem;align-content:start}
.card-text p{font-size:.86rem;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.tag-deal{background:var(--red);color:#fff}
.tag-save{background:var(--green-soft);color:var(--green)}
.card-img{grid-column:2;grid-row:2 / span 2;justify-self:end;width:112px;height:112px;object-fit:cover;
  border-radius:14px;background:var(--wash)}
.card-foot{display:flex;align-items:center;gap:.5rem;margin-top:auto}
.card-foot .btn-add,.card-foot>.btn:only-child{margin-left:auto}
.btn-add{min-width:8.4rem;font-variant-numeric:tabular-nums}
.btn-add[data-done]{background:var(--green);border-color:var(--green)}
/* build-your-own is one card; it runs the full width as a banner instead of
   leaving two thirds of a row empty */
.card-build{grid-column:1 / -1;flex-direction:row;align-items:center;gap:1rem 1.6rem}
.card-build .card-top{flex:1}
.card-build .card-foot{margin:0}

/* The price box. One price is just the price. Several sizes show the smallest,
   and the box opens into every size with its price; picking one sets the card. */
.pbox{grid-column:2;grid-row:1;justify-self:end;position:relative;z-index:3}
.pbox.is-fixed{display:grid;justify-items:end;gap:.05rem;padding:.3rem .1rem 0}
.pbox.is-fixed small{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.pbox b{font-size:1.06rem;font-weight:800;font-variant-numeric:tabular-nums}
.pbox.is-deal b{color:var(--red);font-size:1.2rem}
.pbox.is-deal s{font-size:.8rem;font-weight:600;color:var(--ink-3)}
.pbox-btn{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.55rem;
  text-align:right;cursor:pointer;padding:.38rem .6rem .38rem .75rem;border:1.5px solid var(--line);
  border-radius:12px;background:var(--white);transition:border-color .15s,box-shadow .15s}
.pbox-btn small{grid-column:1;font-size:.64rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pbox-btn b{grid-column:1}
.pbox-btn .caret{grid-column:2;grid-row:1 / span 2;width:8px;height:8px;border-right:2.2px solid var(--ink);
  border-bottom:2.2px solid var(--ink);transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--ease)}
@media (hover:hover){.pbox-btn:hover{border-color:var(--ink)}}
.pbox-btn[aria-expanded="true"]{border-color:var(--ink);box-shadow:var(--sh)}
.pbox-btn[aria-expanded="true"] .caret{transform:translateY(2px) rotate(-135deg)}
.pbox-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:max(100%,190px);list-style:none;
  margin:0;padding:.3rem;background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-lift);animation:menuin .18s var(--ease)}
@keyframes menuin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pbox-menu button{display:flex;justify-content:space-between;gap:1.2rem;width:100%;text-align:left;
  padding:.62rem .7rem;border-radius:10px;cursor:pointer;font-size:.92rem;font-weight:600}
.pbox-menu button b{font-size:.92rem}
@media (hover:hover){.pbox-menu button:hover{background:var(--wash)}}
.pbox-menu button:focus-visible{outline-offset:-2px}
.pbox-menu button[aria-selected="true"]{background:var(--ink);color:#fff}
.card:has(.pbox-btn[aria-expanded="true"]){z-index:5;position:relative}

/* add-ons on a donair or sub: tick boxes that look like the size chips */
.addons{display:flex;flex-wrap:wrap;gap:.4rem}
.addon{position:relative;cursor:pointer}
.addon input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.addon span{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border:1.5px solid var(--line);
  border-radius:999px;font-size:.84rem;font-weight:700;transition:border-color .15s,background-color .15s,color .15s}
.addon b{font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (hover:hover){.addon:hover span{border-color:var(--ink)}}
.addon input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.addon input:checked + span b{color:rgba(255,255,255,.75)}
.addon input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}

/* choices on a dish (sauce, filling, crispy or grilled): a small label, then the
   same chips as the add-ons. One the dish needs says "Pick one" and turns red,
   with a nudge, if Add is pressed before it is picked. */
.opt{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.4rem}
.opt legend{padding:0;margin-bottom:.4rem;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.opt-req{margin-left:.35rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
.opt.is-missing legend,.opt.is-missing .opt-req{color:var(--red)}
.opt.is-missing .addons{animation:nudge .36s var(--ease)}
@keyframes nudge{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.addon input[type="radio"]:checked + span b{color:rgba(255,255,255,.75)}

/* quantity: minus, number, plus */
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;
  padding:.12rem;flex:none}
.stepper button{width:32px;height:32px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  font-size:1.1rem;font-weight:800;line-height:1;transition:background-color .14s}
@media (hover:hover){.stepper button:hover{background:var(--wash)}}
.stepper button:disabled{opacity:.3;cursor:default;background:none}
.stepper output{min-width:1.6rem;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- toast
   "Added" with the way to the order, then it gets out of the way. */
.toast{position:fixed;z-index:80;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,0);width:max-content;max-width:calc(100% - 2rem);
  display:flex;align-items:center;gap:1rem;padding:.75rem .8rem .75rem 1.1rem;border-radius:16px;
  background:var(--ink);color:#fff;font-weight:600;font-size:.92rem;box-shadow:var(--sh-lift);
  animation:toastin .32s var(--ease)}
.toast[data-out]{opacity:0;transform:translate(-50%,12px);transition:opacity .25s,transform .25s var(--ease)}
.toast a{flex:none;background:var(--white);color:var(--ink);font-weight:800;border-radius:999px;
  padding:.42rem .9rem;font-size:.84rem}
.toast span{min-width:0}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.cartbtn[data-bump]{animation:bounce .42s var(--ease)}
@keyframes bounce{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.cartbtn[aria-current]{background:var(--red)}

/* ---------------------------------------------------------------- build page */
.band-build{padding-top:clamp(1rem,2.4vw,1.8rem)}
.build-head{margin-bottom:1.2rem}
.build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(1.2rem,3vw,3rem);
  align-items:start}
.step{padding:1.2rem 0 1.4rem;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.step-h h2{font-size:1.12rem;font-weight:800;letter-spacing:-.015em;text-transform:none}
.step-h em{font-style:normal;font-size:.84rem;font-weight:700;color:var(--red)}
.step-n{width:26px;height:26px;border-radius:99px;background:var(--ink);color:#fff;font-size:.8rem;
  font-weight:800;display:grid;place-items:center;flex:none;align-self:center}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:2px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:700;
  font-size:.9rem;cursor:pointer;transition:border-color .16s,background-color .16s,color .16s}
@media (hover:hover){.chip:hover{border-color:var(--ink)}}
.chip[data-on]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:disabled{opacity:.4;cursor:default}
.chip em{font-style:normal;opacity:.7;font-size:.76rem;margin-left:.3rem}
.ctrl-hint{font-size:.84rem;color:var(--ink-3);margin:-.35rem 0 .7rem}
.tops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.4rem}
.topbtn{grid-template-columns:auto 1fr auto;gap:.1rem .55rem;border-width:1.5px;min-height:46px;
  padding:.35rem .4rem .35rem .65rem;font-size:.88rem}
.topq{gap:.15rem}
.topq button{width:28px;height:28px;font-size:1rem}
/* left half / whole / right half, under a chosen topping */
.sides{grid-column:1 / -1;display:flex;gap:.3rem}
.sides:empty{display:none}
.sides button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  color:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.25);transition:color .14s,border-color .14s}
.sides button svg{width:20px;height:20px}
.sides button[aria-pressed="true"]{color:#fff;border-color:#fff}
@media (hover:hover){.sides button:hover{color:#fff}}
.fixedslot{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border:1.5px dashed var(--line);
  border-radius:14px;font-weight:700;font-size:.92rem;margin-top:1rem}
.fixedslot::before{content:'Included';font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green)}
.seg{display:flex;gap:.3rem;padding:.25rem;background:var(--wash);border-radius:999px;margin-bottom:1.2rem;
  width:max-content;max-width:100%}
.seg button{border-radius:999px;padding:.5rem 1.1rem;font-weight:700;font-size:.9rem;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--white);box-shadow:var(--sh)}
.seg button[data-set]::after{content:'\2713';margin-left:.4rem;color:var(--green)}
.special{width:100%;font:inherit;font-size:.92rem;border:2px solid var(--line);border-radius:12px;
  padding:.6rem .75rem;resize:vertical;min-height:3.2rem}
.special:focus{border-color:var(--ink);outline:none}

/* the summary: the pizza as it is, what is on it, and the one button */
.summary{position:sticky;top:calc(var(--bar) + 1rem);display:grid;gap:1rem;padding:1.2rem;
  border:1px solid var(--line);border-radius:22px;background:var(--white);box-shadow:var(--sh)}
.summary-pie{display:grid;place-items:center}
.summary .peel{width:min(100%,250px);margin-inline:auto}
/* every pizza starts as sauce and cheese, so the drawing does too */
.summary .sauce,.summary .cheese{opacity:1}
.summary-which{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.4rem}
.summary-lines{margin:0;display:grid;gap:.25rem;font-size:.88rem}
.summary-lines div{display:flex;justify-content:space-between;gap:1rem}
.summary-lines dt{color:var(--ink-3);flex:none}
.summary-lines dd{margin:0;text-align:right;font-weight:600}
.summary-price{display:flex;justify-content:space-between;align-items:baseline;padding-top:.6rem;
  margin-top:.6rem;border-top:2px solid var(--ink)}
.summary-price span{font-weight:700}
.summary-price b{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.summary-price b[data-bump]{animation:bounce .3s var(--ease)}
.summary-foot{display:flex;gap:.6rem;align-items:center}
.summary-foot .btn{flex:1;white-space:nowrap}
.summary-foot .btn b{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- order page */
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(1.2rem,3vw,3rem);
  align-items:start}
.order-empty{display:grid;gap:1rem;justify-items:start;padding:.4rem 0 2rem;color:var(--ink-3);font-size:1.05rem}
.lines{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.4rem 1rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.line-n b{display:block;font-weight:800;letter-spacing:-.01em}
.line-n small{display:block;color:var(--ink-3);font-size:.84rem}
.line-p{font-weight:800;font-variant-numeric:tabular-nums;min-width:4.6rem;text-align:right}
.line-x{grid-column:1;justify-self:start;font-size:.8rem;font-weight:700;color:var(--ink-3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}
@media (hover:hover){.line-x:hover{color:var(--red)}}
.totals{position:sticky;top:calc(var(--bar) + 1rem);display:grid;gap:.55rem;padding:1.2rem;
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);background:var(--white)}
.tot{display:flex;justify-content:space-between;font-size:.94rem;color:var(--ink-2)}
.tot.grand{font-size:1.2rem;font-weight:800;color:var(--ink);padding-top:.55rem;border-top:2px solid var(--ink);
  margin:.2rem 0 .4rem}
.tot b{font-variant-numeric:tabular-nums}
.pay{display:grid;gap:.55rem;margin-top:.3rem}
.paybox{border:2px dashed var(--line);border-radius:16px;padding:1rem;display:grid;gap:.4rem}
.paybox h3{font-size:.95rem;text-transform:uppercase}
.paybox p{font-size:.86rem;color:var(--ink-3)}
.totals .small{margin-top:.2rem}

/* ---------------------------------------------------------------- about + faq */
.prose{display:grid;gap:1rem;font-size:1.05rem;color:var(--ink-2);max-width:62ch}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  padding:1.05rem 0;font-weight:800;font-size:1.04rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.4rem;font-weight:500;color:var(--red);flex:none;
  transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.1rem;color:var(--ink-2);max-width:62ch}

/* ---------------------------------------------------------------- footer */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:2.4rem 0 1.4rem;
  font-size:.9rem;margin-top:2rem}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot-logo{width:96px;height:auto;margin-bottom:.8rem}
.foot p{color:var(--ink-2)}
.foot a{font-weight:600}
@media (hover:hover){.foot a:hover{color:var(--red)}}
.foot-hours{margin:0;display:grid;gap:.25rem;align-content:start}
.foot-hours div{display:flex;justify-content:space-between;gap:1rem;max-width:240px}
.foot-hours dt{color:var(--ink-3)}
.foot-hours dd{margin:0;font-variant-numeric:tabular-nums}
.foot-links{display:grid;gap:.35rem;align-content:start}
.foot-fine{font-size:.78rem;color:var(--ink-3);margin-top:1.6rem}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){ .find{grid-template-columns:1fr} }
@media (max-width:900px){
  /* On a phone the pizza goes between the sentence and the buttons: you read
     what the place is, you see the food, and the buttons are the last thing
     under your thumb. The pizza takes whatever height is left (.stage is a
     size container), never a fixed share of a screen whose address bar varies. */
  .hero{align-content:stretch}
  .hero-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;
    gap:clamp(.4rem,1.4vh,.9rem);text-align:left;min-height:0}
  .hero-copy{grid-column:1;grid-row:1}
  .herofig{grid-column:1;grid-row:2;align-self:stretch;min-height:0;
    display:flex;flex-direction:column;align-items:center}
  .stage{flex:1 1 0;min-height:0;container-type:size}
  .stage .turntable{--pie:min(78cqw,84cqh)}
  .herofig .deal{align-self:stretch}
  .hero-cta{grid-column:1;grid-row:3}
  .hero .lede,.hero .eyebrow{display:none}
  .display .wide{display:none}
  .display .narrow{display:inline}
  .display{font-size:min(clamp(2rem,9vw,2.9rem),8.6svh)}
  .deal h2{font-size:min(1.32rem,4.6svh)}
  .deal .sub{font-size:.9rem;-webkit-line-clamp:1}
  .saveline{font-size:.92rem}
  .hero .acts{margin-top:.8rem;gap:.5rem}
  .hero .acts .btn{flex:1 1 auto;min-width:0;white-space:nowrap;padding-inline:1rem}
  /* the bar earns its 60px: mark, order, dots. Phone and open-status live in
     the sheet, where they are not competing with the order button. */
  .bar nav,.bar .openpill,.bar .btn-sm{display:none}
  .dots{display:grid}
  .bar{gap:.5rem}
  .build-grid,.order-grid{grid-template-columns:minmax(0,1fr)}
  .totals{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in>div:first-child{grid-column:1 / -1}

  /* The build page on a phone: the pizza sits at the top where you can watch
     it, the steps follow, and the price and Add stay under your thumb. */
  .build-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  /* The pizza and what is on it stay pinned under the header, so every tap
     below lands on a pizza you can still see. The Add button rides the bottom. */
  .summary{order:-1;position:sticky;top:var(--bar);z-index:30;display:grid;
    grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem;
    margin:0 -1.1rem 1rem;padding:.55rem 1.1rem;border:0;border-radius:0;
    border-bottom:1px solid var(--line);box-shadow:0 12px 16px -16px rgba(17,17,19,.45)}
  .summary .peel{width:min(34vw,150px)}
  .summary-text{min-width:0}
  .summary-which{margin-bottom:.2rem}
  .summary-lines{font-size:.8rem;gap:.1rem}
  .summary-lines div{justify-content:flex-start;gap:.4rem}
  .summary-lines dd{text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .summary-price{display:none}
  .summary-foot{position:fixed;z-index:40;left:0;right:0;bottom:0;padding:.7rem 1rem
    calc(.7rem + env(safe-area-inset-bottom,0px));background:var(--white);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(17,17,19,.25)}
  body[data-page="build"] main{padding-bottom:6rem}
  body[data-page="build"] .toast{bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}
}
@media (max-width:620px){
  .display{font-size:min(clamp(1.8rem,8vw,2.4rem),7.2svh)}
  .card{padding:.9rem;border-radius:16px}
  .card-img{width:88px;height:88px;border-radius:12px}
  .card-text p{-webkit-line-clamp:2}
  .card-foot .btn-add{flex:1;min-width:0}
  .card-build{flex-direction:column;align-items:stretch}
  /* deals ride in a strip you swipe, so the dishes start in the first screen */
  .cards-strip{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -1.1rem;
    padding:0 1.1rem .2rem;scroll-padding:0 1.1rem}
  .cards-strip::-webkit-scrollbar{display:none}
  .cards-strip>.card{scroll-snap-align:start}
  .card-foot .btn-line{padding-inline:.85rem}
  .tops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbtn{font-size:.84rem}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .line{grid-template-columns:minmax(0,1fr) auto}
  .line .stepper{grid-column:1;grid-row:2;justify-self:start}
  .line-p{grid-column:2;grid-row:1}
  .line-x{grid-column:2;grid-row:2;justify-self:end}
}

/* Short screens give up the address line and the pickup facts before they give
   up anything you would actually order with. */
@media (max-height:680px){
  .hero{--pie:min(58vw,29svh)}
  .hero .eyebrow,.hero-facts{display:none}
  .hero .lede{display:none}
  .deal .sub{display:none}
}
@media (max-height:560px){
  .hero{--pie:min(46vw,26svh)}
  .ticks{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}