/* LALA — Party Planning & Pre-Order.
   Mobile-first, no build step. Dark, warm, nightlife; gold is the only
   accent that ever means "do this". */

:root{
  --ink:#0c0a09;            /* page */
  --ink-2:#151211;          /* raised surface */
  --ink-3:#1e1a18;          /* cards */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --cream:#f6efe4;
  --muted:#a79c8e;
  --gold:#e0b64a;
  --gold-2:#f3d488;
  --rose:#e05a72;
  --ok:#5fb98a;
  --danger:#e2564a;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --max:1140px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bebas Neue','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--cream);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.stack>*+*{margin-top:14px}
.center{text-align:center}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.hide{display:none!important}
/* The HTML `hidden` attribute loses to any display rule, and .field-row sets
   display:grid at >=560px — a "hidden" row stayed on screen. */
[hidden]{display:none!important}

/* ── type ─────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.92;
  text-transform:uppercase;
}
h1.display{font-size:clamp(42px,11vw,84px);margin:0}
h2.display{font-size:clamp(30px,7vw,52px);margin:0}
h3.display{font-size:clamp(22px,5vw,30px);margin:0}
.script{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em}
.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 14px;
}
.lede{font-size:clamp(16px,4vw,19px);color:#e6dccd;max-width:60ch;margin:0 auto}

/* ── header ───────────────────────────────────────────────────────────── */
/* ONE HEIGHT PER SCREEN WIDTH, and never a transition on it. This bar is
   sticky, so when it grows it covers the text under it instead of pushing
   it down — and it used to grow and shrink on every scroll (a .compact
   class past 48px, see party.js). On iPhone Safari the address bar
   collapses and expands as you scroll, moving window.scrollY by itself, so
   the class flipped back and forth and the page shook. A media query
   decides the size before paint and nothing can flip it afterwards.

   OPAQUE, and no backdrop-filter, for the same family of reason: Safari
   does not reliably repaint a backdrop filter behind a sticky bar, and the
   14% of background that was see-through showed the page's own "LALA ST.
   PETE · PRIVATE KARAOKE" straight through it. The page is always exactly
   this colour behind the bar, so opaque looks the same and cannot fail.
   Same on .cartbar. */
.topbar{
  position:sticky;top:0;z-index:60;
  background:#0c0a09;
  border-bottom:1px solid var(--line);
}
.topbar .inner{display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 20px}
.logo{font-family:var(--display);font-size:26px;letter-spacing:.2em;line-height:1}
.logo small{
  display:block;font-family:var(--sans);font-size:7.5px;letter-spacing:.22em;
  color:var(--gold);margin-top:2px;font-weight:600;white-space:nowrap;
}
@media(max-width:400px){.logo{font-size:23px}.logo small{font-size:7px;letter-spacing:.16em}}
.topbar .spacer{flex:1}
/* An uploaded logo gets real room, sized to the screen: this wordmark's
   thin triple strokes smear below ~90px wide. The tagline stays under it
   at every width — up there, not only in the footer —
   so on a phone the wordmark itself is the thing that gives way, keeping a
   sticky bar off the screen. One size each, no transition: see .topbar. */
.logo-img{display:block;width:auto;height:auto;max-width:150px;max-height:42px;object-fit:contain}
@media(min-width:768px){.logo-img{max-width:210px;max-height:68px}}
@media(min-width:1100px){.logo-img{max-width:240px;max-height:78px}}
.topbar .logo:has(.logo-img){line-height:0}
.topbar .logo:has(.logo-img) small{margin-top:6px;line-height:1.2;font-size:8px}
@media(min-width:768px){.topbar .logo:has(.logo-img) small{font-size:9px;letter-spacing:.26em}}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-2);border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.04);
}
.pill:hover{border-color:var(--gold);color:var(--gold-2)}
.pill.cart{border-color:var(--gold);color:var(--gold)}
.pill .badge{
  background:var(--gold);color:#161206;border-radius:999px;
  min-width:19px;height:19px;display:inline-grid;place-items:center;
  font-size:11px;font-weight:800;padding:0 5px;
}
.navlinks{display:none;gap:22px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}
.navlinks a:hover{color:var(--gold)}
.navlinks a.on{color:var(--gold)}
/* a link out to the website, with the one thing to know before clicking */
.navlinks a.ext small{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:500;margin-top:2px;text-transform:none}
.chip.ext{text-align:center}
.chip.ext small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px;letter-spacing:0}
@media(min-width:860px){.navlinks{display:flex}}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 30px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:transform .12s ease,background .2s ease,box-shadow .2s ease;
  min-height:54px;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1305;
  box-shadow:0 8px 26px rgba(224,182,74,.28)}
.btn-gold:hover{box-shadow:0 10px 34px rgba(224,182,74,.42)}
.btn-ghost{border-color:var(--line-2);color:var(--cream);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-sm{padding:11px 18px;min-height:42px;font-size:12px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:64px 0 56px;isolation:isolate;
  background-size:cover;background-position:center}
/* with a photo, the gradient becomes a dark veil so the type stays readable */
.hero.has-img::before{
  background:
    linear-gradient(180deg,rgba(12,10,9,.55) 0%,rgba(12,10,9,.72) 60%,var(--ink) 100%),
    radial-gradient(70% 55% at 85% 15%,rgba(224,182,74,.18),transparent 62%);
}
.hero.has-img{padding:88px 0 64px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 60% at 20% 0%,rgba(224,90,114,.22),transparent 60%),
    radial-gradient(70% 55% at 85% 15%,rgba(224,182,74,.20),transparent 62%),
    linear-gradient(180deg,#171311 0%,var(--ink) 78%);
}
.hero::after{
  /* soft light beams — motion kept slow enough to read as ambience */
  content:"";position:absolute;inset:-40% -20%;z-index:-1;opacity:.5;
  background:conic-gradient(from 210deg at 50% 0%,transparent 0deg,
    rgba(224,182,74,.14) 22deg,transparent 44deg,
    rgba(224,90,114,.12) 70deg,transparent 96deg);
  animation:sweep 26s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none}}
.hero h1{margin:0 0 18px;max-width:15ch}
.hero .lede{margin:0 0 10px}
.hero .ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px}
@media(min-width:640px){.hero .ctas{flex-direction:row;flex-wrap:wrap}}
.hero-note{
  margin-top:24px;padding:13px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:14px;color:#e6dccd;display:inline-flex;gap:9px;align-items:flex-start;
  max-width:56ch;text-align:left;
}
.promise{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:30px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.promise span{display:inline-flex;align-items:center;gap:8px}
.promise span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

.booked-band{
  display:inline-flex;gap:10px;align-items:flex-start;margin:0 0 22px;
  padding:12px 18px;border-radius:999px;font-size:14.5px;
  background:rgba(224,182,74,.13);border:1px solid rgba(224,182,74,.45);
}
.booked-band strong{color:var(--gold-2)}
.panel.booked{border-color:rgba(224,182,74,.42);background:rgba(224,182,74,.06)}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding:56px 0}
section.tight{padding:36px 0}
.section-head{margin-bottom:28px}
.section-head h2{margin-bottom:12px}

.cards{display:grid;gap:18px}
@media(min-width:760px){.cards.two{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.cards.three{grid-template-columns:repeat(3,1fr)}}

.card{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;overflow:hidden;
}
.card.feature{padding:0;display:flex;flex-direction:column}
.card.feature .body{padding:26px;display:flex;flex-direction:column;flex:1}
.card.feature .body .btn-block{margin-top:auto}
.card .kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:10px}
.card p{color:#ddd2c2;margin:0 0 18px}
.card-media{aspect-ratio:16/10;background:#241f1c;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media.placeholder{
  display:grid;place-items:center;font-family:var(--display);font-size:60px;
  color:rgba(224,182,74,.28);
  background:radial-gradient(70% 70% at 50% 20%,rgba(224,182,74,.14),#241f1c);
}

/* the two revenue cards get a gold edge */
.card.primary{border-color:rgba(224,182,74,.42)}
.card.primary::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--rose));
}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps{display:grid;gap:16px;counter-reset:step}
@media(min-width:700px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;background:rgba(255,255,255,.03);
}
.step .n{
  font-family:var(--display);font-size:40px;line-height:1;color:var(--gold);
  display:block;margin-bottom:10px;
}
.step h4{margin:0 0 6px;font-size:16px;letter-spacing:.02em}
.step p{margin:0;font-size:14px;color:var(--muted)}

/* ── product grid ─────────────────────────────────────────────────────── */
.catgroup{margin-bottom:44px}
.catgroup h3{margin:0 0 4px}
.catgroup .blurb{color:var(--muted);margin:0 0 20px;font-size:15px}
.grid{display:grid;gap:16px}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}

.item{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.item.in-cart{border-color:var(--gold)}
.item .thumb{aspect-ratio:4/3;background:#241f1c;position:relative}
.item .thumb img{width:100%;height:100%;object-fit:cover}
.item .thumb.placeholder{
  /* Until a real photo is uploaded, a short band beats a big empty rectangle:
     an item list with no images should still read as a menu, not as gaps. */
  aspect-ratio:auto;height:74px;display:grid;place-items:center;font-size:28px;opacity:.55;
  background:radial-gradient(80% 100% at 50% 0%,rgba(224,182,74,.13),#241f1c);
  border-bottom:1px solid var(--line)}
.card-media.placeholder{aspect-ratio:16/7}
.card-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.item .body{padding:18px;display:flex;flex-direction:column;flex:1;gap:8px}
.item h4{margin:0;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.item .desc{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.item .serves{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.item .foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:27px;letter-spacing:.02em;line-height:1}
.price small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
.tag{
  display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);
}
.tag.gold{border-color:rgba(224,182,74,.5);color:var(--gold)}
.ribbon{
  position:absolute;top:12px;left:12px;background:var(--gold);color:#1a1305;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}

/* quantity stepper — thumb-sized on purpose */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);
  border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.stepper button{
  width:46px;height:46px;border:0;background:transparent;color:var(--cream);
  font-size:21px;cursor:pointer;line-height:1;
}
.stepper button:hover{color:var(--gold)}
.stepper .q{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
/* Safari draws its own up/down spinner inside type=number inputs, right on
   top of these custom −/+ buttons — hide it so only ours shows. */
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ── sticky cart bar ──────────────────────────────────────────────────── */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#120f0e;          /* opaque: see the .topbar note above */
  border-top:1px solid rgba(224,182,74,.35);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
  transform:translateY(120%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.cartbar.show{transform:none}
.cartbar .sum{flex:1;min-width:0}
.cartbar .sum b{display:block;font-size:17px;line-height:1.2}
.cartbar .sum span{font-size:12px;color:var(--muted)}
body.has-cartbar{padding-bottom:96px}

/* ── forms ────────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:15px 16px;font-size:16px;/* 16px = no iOS zoom */
  color:var(--cream);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.08)}
.field textarea{min-height:92px;resize:vertical}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field-row{display:grid;gap:0 14px}
@media(min-width:560px){.field-row.two{grid-template-columns:1fr 1fr}}
@media(min-width:560px){.field-row.three{grid-template-columns:1fr 1fr 1fr}}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#ddd2c2}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--gold)}

.notice{
  border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);margin-bottom:18px;
}
.notice.warn{border-color:rgba(224,182,74,.45);background:rgba(224,182,74,.09)}
.notice.bad{border-color:rgba(226,86,74,.5);background:rgba(226,86,74,.11)}
.notice.good{border-color:rgba(95,185,138,.45);background:rgba(95,185,138,.10)}
.notice ul{margin:8px 0 0;padding-left:20px}
.notice strong{color:var(--gold-2)}
/* A package choice left short: its message sits on the group itself, in
   words behind a ▲ — the colour only repeats what the shape already says
   (never colour alone). Long product names wrap instead of pushing
   the page sideways on a 375px phone. The box at the top of a refused page
   lists them, each a link to its group; the group stops short of the sticky
   bar when the link lands on it. */
.need{margin:6px 0 0;padding:8px 12px;border:1px solid rgba(226,86,74,.5);
  background:rgba(226,86,74,.11);border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;color:var(--gold-2);overflow-wrap:anywhere}
.notice ul.needs-list{margin:0;padding:0;list-style:none}
.needs-list li+li{margin-top:6px}
.needs-list a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.choice-group{scroll-margin-top:120px;scroll-margin-bottom:110px}

/* ── totals ───────────────────────────────────────────────────────────── */
.panel{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.lines{width:100%;border-collapse:collapse}
.lines td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lines tr:last-child td{border-bottom:0}
.lines .qty{color:var(--gold);font-weight:700;white-space:nowrap}
.lines .amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* A Party Package's own lines, set apart from the ordinary items around
   them so it reads as one bundle, not several unrelated rows. */
.package-group-head td{padding-top:20px;border-bottom:1px dashed var(--line)}
.package-group-head:first-child td{padding-top:12px}
.totals{width:100%;margin-top:14px;font-variant-numeric:tabular-nums}
.totals td{padding:5px 0}
.totals td:last-child{text-align:right}
.totals .grand td{padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--display);font-size:26px;letter-spacing:.02em}
.totals .grand td:first-child{padding-top:18px}

.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line-2);border-radius:999px;padding:11px 17px;
  font-size:14px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.04);
}
.chip.on,.chip:has(input:checked){border-color:var(--gold);background:rgba(224,182,74,.15);color:var(--gold-2)}
.chip:has(input:disabled){opacity:.45}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;
  color:var(--muted);font-size:13.5px}
footer .cols{display:grid;gap:26px}
@media(min-width:720px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer h5{margin:0 0 10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream)}
footer a:hover{color:var(--gold)}
.legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.7}
/* Terms and Privacy are set in the same colour as the sentence beside them,
   so nothing but the underline says they can be tapped — and the Terms link
   is now the only way to the terms page. Shape, never colour alone. */
.legal a{text-decoration:underline;text-underline-offset:2px}

/* ── misc ─────────────────────────────────────────────────────────────── */
.locpick{display:grid;gap:12px;max-width:520px;margin:0 auto}
@media(min-width:520px){.locpick{grid-template-columns:1fr 1fr}}
.locpick a{
  border:1px solid var(--line-2);border-radius:var(--radius);padding:22px;
  text-align:center;background:rgba(255,255,255,.03)}
.locpick a:hover{border-color:var(--gold)}
.locpick .n{font-family:var(--display);font-size:26px;display:block}
.locpick .a{font-size:13px;color:var(--muted);margin-top:6px;display:block}

.skip{position:absolute;left:-9999px}
/* The "Skip to content" LINK comes into view when focused. Only the link: every choice chip's
   own input carries .skip too (it hides it), and on a tap that input takes the focus — it used
   to jump to left:16px at full width and push a 375px phone 20px sideways. */
a.skip:focus{left:16px;top:12px;z-index:100;background:var(--gold);color:#1a1305;
  padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ── party size: the bar on the menus and the order page ─────────────── */
.partybar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
  padding:14px 18px;margin:0 0 22px;border:1px solid rgba(224,182,74,.42);border-radius:var(--radius);
  background:rgba(224,182,74,.06)}
.partybar-text{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0}
.partybar-text strong{color:var(--gold-2);font-size:15px}
.partybar-edit{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.partybar-edit input{width:78px;padding:9px 10px;font-size:16px;text-align:center;background:var(--ink);
  border:1px solid var(--line-2);color:var(--cream);border-radius:var(--radius-sm);font-family:var(--sans)}
.partybar-edit input:focus{outline:none;border-color:var(--gold)}
.dishes .nudge{color:var(--gold-2);font-weight:600}
.dishes .ok{color:var(--cream)}
.dishes a{margin-left:4px}
.item .rec{color:var(--cream);margin-bottom:4px}
.item .rec .tag{margin-left:6px;vertical-align:middle}
.fit{display:block;font-size:13px;margin-top:5px;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:500}
.fit.short{color:var(--gold-2);font-weight:600}
.fit.ok{color:var(--gold-2);font-weight:600}
.fit.pick{color:var(--cream);font-weight:600}
.fit a{font-weight:600}
/* the one line under a size picker no size of which covers the party */
.mix-advice{margin:12px 0 16px;font-size:14px;line-height:1.5;color:var(--cream);overflow-wrap:anywhere}
.mix-advice a{font-weight:600}
/* a size row on the item page: radio + text grow, the price keeps its column */
.chip.size-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;
  padding:14px 16px;font-size:15px;border-radius:var(--radius-sm)}
.size-main{display:flex;gap:10px;align-items:flex-start;flex:1 1 180px;min-width:0}
.size-text{min-width:0}
.size-row>.size-price{flex:none;margin-left:auto;text-align:right}
.item .rec .tag{display:inline-block;margin:4px 0 0}
@media (max-width:520px){.partybar{padding:12px 14px}.partybar-edit{width:100%;justify-content:flex-end}}

/* ── party packages: one block per copy ─────────────────────────────────── */
/* /cart#copy-2 (where an add lands) and a refused package page's
   #package-form sit clear of the 62px sticky top bar. */
.copy-anchor,#package-form{scroll-margin-top:80px}
/* "Edit this package · Remove this package" under a copy in the cart: wraps
   on a phone rather than pushing the page sideways. */
.copy-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12.5px}
.copy-actions form{margin:0}
/* the "Already in your order" list on a package's page: its heading in the
   site's small caps, each copy a row of its own (● and words, never colour
   alone), long choices wrapping inside the box */
.in-order-head{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:0 0 10px}
.notice ul.copy-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.copy-list li{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}