/* ============================================================
   /lagniappe/, page-local styles (loaded after css/main.css).
   Menu cards reuse .card; chips reuse .router__chip; the order
   form reuses the intake field system; steps reuse .next-steps.
   ============================================================ */

/* .btn sets display:inline-flex, which would beat the UA [hidden] rule.
   Restate it so JS can hide buttons (invoice fallback, add-to-order). */
.lagniappe-page .btn[hidden] { display:none; }

/* ---------- Header ---------- */

.eyebrow__say { text-transform:none; letter-spacing:0.04em; color:var(--muted); }
.page-header__ctas { display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap; margin-top:var(--s-7); }
.page-header__status { margin-top:var(--s-5); color:var(--warning); }

/* ---------- How it works ---------- */

.next-steps__note { color:var(--muted); margin-top:var(--s-7); }

/* ---------- Menu ---------- */

.menu h2 { max-width:18ch; }
.menu__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); }
.menu__filters { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-7); }
.menu__status { color:var(--muted); margin:var(--s-4) 0 var(--s-6); }
.no-js .menu__filters, .no-js .menu__status { display:none; }

.menu__grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-4);
  align-items:stretch;
}
.sku[hidden] { display:none; }
.sku { position:relative; scroll-margin-top:calc(var(--header-h-condensed) + var(--s-6)); }
.sku--featured { border-color:rgba(59,232,132,0.35); }
.sku--featured::before {
  content:"Most chosen";
  position:absolute; top:var(--s-4); right:var(--s-4);
  font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--green-900); background:var(--green-600);
  padding:4px 8px; border-radius:var(--r-pill);
}
.sku.is-targeted { outline:2px solid var(--green-600); outline-offset:4px; }
.sku .card__eyebrow { padding-right:7rem; }
.sku__name { margin-bottom:var(--s-3); }
.sku__price { display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4); }
.sku__amount {
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height:1; letter-spacing:-0.02em;
  color:var(--ink);
}
.sku__unit { color:var(--muted); }
.sku__summary { color:var(--muted); margin-bottom:var(--s-5); }
.sku__includes { border-top:1px solid var(--border-light); padding-top:var(--s-4); margin-bottom:var(--s-4); }
.sku__includes-label { text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-3); }
.sku__includes ul { list-style:none; padding:0; margin:0; }
.sku__includes li {
  position:relative; padding-left:var(--s-5);
  color:var(--muted); font-size:var(--fs-small); line-height:1.5;
  margin-bottom:var(--s-2);
}
.sku__includes li::before {
  content:""; position:absolute; left:0; top:0.62em;
  width:10px; height:1px; background:var(--green-600);
}
.sku__extra {
  border-left:1px solid var(--green-600);
  padding-left:var(--s-4);
  color:var(--ink);
  font-size:var(--fs-small); line-height:1.5;
  margin-bottom:var(--s-5);
}
.sku__extra-tag { display:block; color:var(--green-600); margin-bottom:2px; }
.sku__actions { margin-top:auto; display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.sku__add { padding:13px 22px; min-height:44px; }
.sku.is-in-order .sku__add { display:none; }
.sku.is-in-order .qty { display:inline-flex; }

/* Quantity stepper: 44px targets, pill geometry to match the buttons */
.qty {
  display:inline-flex; align-items:center;
  border:1px solid var(--green-600); border-radius:var(--r-pill);
  background:rgba(59,232,132,0.10);
}
.qty[hidden] { display:none; }
.qty__btn {
  all:unset; cursor:pointer;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:1.125rem; font-weight:600; color:var(--ink);
  border-radius:var(--r-pill);
}
.qty__btn:hover { background:rgba(59,232,132,0.18); }
.qty__btn:focus-visible { outline:2px solid var(--green-600); outline-offset:-2px; }
.qty__n { min-width:2ch; text-align:center; font-weight:600; color:var(--ink); }
.qty--sm .qty__btn { width:36px; height:36px; font-size:1rem; }

.menu__nojs { color:var(--muted); margin-top:var(--s-6); }

/* ---------- Pairings ---------- */

.pairings__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-4); margin-top:var(--s-7); }
.pairing p { color:var(--muted); margin-bottom:var(--s-5); }
.pairing .btn { margin-top:auto; align-self:flex-start; }

/* ---------- Your order ---------- */

.order__layout {
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--s-8);
  align-items:start;
}
.order__panel { padding:var(--card-pad); position:sticky; top:calc(var(--header-h-condensed) + var(--s-5)); }
.order__panel h2 { margin-bottom:var(--s-5); }
.order__empty { color:var(--muted); }
.order__list { list-style:none; margin:0; padding:0; }
.order__row {
  display:grid; grid-template-columns:1fr auto; gap:var(--s-3) var(--s-4);
  padding:var(--s-4) 0; border-top:1px solid var(--border-light);
  align-items:center;
}
.order__row-name { font-weight:600; color:var(--ink); }
.order__row-meta { color:var(--muted); font-size:var(--fs-small); }
.order__row-price { font-family:var(--font-serif); font-size:1.125rem; color:var(--ink); text-align:right; }
.order__row-controls { display:flex; align-items:center; gap:var(--s-3); grid-column:1 / -1; }
.order__remove { all:unset; cursor:pointer; color:var(--muted); font-size:var(--fs-small); text-decoration:underline; text-underline-offset:3px; padding:var(--s-2) 0; }
.order__remove:hover { color:var(--error); }
.order__remove:focus-visible { outline:2px solid var(--green-600); outline-offset:3px; border-radius:var(--r-xs); }
.order__totals { border-top:1px solid var(--line-hi); padding-top:var(--s-4); margin-top:var(--s-2); }
.order__total-row { display:flex; justify-content:space-between; align-items:baseline; }
.order__total-row .mono { color:var(--muted); }
.order__total { font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:500; color:var(--ink); }
.order__tax-note { color:var(--muted); margin-top:var(--s-3); }

.order__form { max-width:none; }
.order__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.order__actions { flex-wrap:wrap; }
.order__actions .btn[disabled] { opacity:0.5; cursor:not-allowed; box-shadow:none; }
.order__status { margin-top:var(--s-4); min-height:1.5em; color:var(--muted); }
.order__status[data-state="error"] { color:var(--error); }
.order__status[data-state="busy"] { color:var(--ink); }
.order__secure { color:var(--muted); margin-top:var(--s-3); }
.order__confirmation { grid-column:1 / -1; }

/* ---------- Floating order pill ---------- */

.order-pill {
  all:unset; cursor:pointer;
  position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:60;
  display:inline-flex; align-items:center; gap:var(--s-3);
  padding:0 var(--s-5) 0 var(--s-2); min-height:52px;
  background:var(--green-600); color:var(--green-900);
  border-radius:var(--r-pill);
  font-family:var(--font-sans); font-weight:600; font-size:0.9375rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(4,20,11,0.15) inset;
  transition:transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.order-pill[hidden] { display:none; }
.order-pill:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(59,232,132,0.28); }
.order-pill:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.order-pill__count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--green-900); color:var(--green-600);
  font-family:var(--font-mono); font-size:0.8125rem;
}
.order-pill__total { font-family:var(--font-serif); font-size:1.125rem; }

/* ---------- Narrow viewports ---------- */

@media (max-width:1024px) {
  .menu__grid, .pairings__grid { grid-template-columns:repeat(2, 1fr); }
  .order__layout { grid-template-columns:1fr; gap:var(--s-6); }
  .order__panel { position:static; }
}
@media (max-width:720px) {
  .menu__grid, .pairings__grid { grid-template-columns:1fr; }
  .sku .card__eyebrow { padding-right:0; padding-top:var(--s-6); }
  .sku--featured::before { top:var(--s-4); left:var(--s-5); right:auto; }
  .order-pill {
    right:var(--s-4); left:var(--s-4); bottom:var(--s-4);
    justify-content:space-between;
  }
  .order-pill__label { flex:1; }
  .lagniappe-page .footer__base { padding-bottom:calc(72px + var(--s-6)); }
}