/* ==========================================================================
   Taj Restaurant & Banquet — components.css
   Header, footer, buttons, cards, forms, drawer, toast, tabs, lightbox.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icons — base sizing for every [data-icon] slot filled by site.js.
   Component rules further down (.icon-btn svg, .card-icon svg, …) override it.
   -------------------------------------------------------------------------- */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
[data-icon] > svg { width: 1.15em; height: 1.15em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--gold-200);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .82em 1.65em;
  min-height: 3rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-gold);
  opacity: 0;
  transform: translateY(102%);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

/* Primary — solid gold */
.btn-primary {
  --btn-fg: #16110a;
  --btn-bd: transparent;
  background: var(--grad-gold);
  background-size: 190% 100%;
  box-shadow: 0 12px 34px -16px color-mix(in oklab, var(--gold-400) 85%, transparent);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-position: 100% 50%;
  box-shadow: 0 18px 44px -14px color-mix(in oklab, var(--gold-400) 95%, transparent);
}

/* Ghost — gold outline that fills on hover */
.btn-ghost:hover::after, .btn-ghost:focus-visible::after { opacity: 1; transform: translateY(0); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: #16110a; border-color: transparent; }

/* Quiet — low-emphasis */
.btn-quiet {
  --btn-fg: var(--text-dim);
  --btn-bd: color-mix(in oklab, var(--cream) 16%, transparent);
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
}
.btn-quiet:hover { --btn-fg: var(--cream); --btn-bd: var(--line-strong); }

.btn-sm { padding: .55em 1.1em; min-height: 2.3rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1em 2.1em; min-height: 3.5rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; }

/* Icon-only round button */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-300);
  background: color-mix(in oklab, var(--ink-700) 70%, transparent);
  transition: color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
.icon-btn:hover { color: var(--gold-100); border-color: var(--line-strong); transform: translateY(-2px); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }

/* Theme toggle — the two icons share one grid cell and trade places, so the
   button shows the theme you are switching *to*, never the one you are in. */
.theme-toggle { overflow: hidden; }
.theme-toggle [data-icon] {
  grid-area: 1 / 1;
  transition: opacity var(--dur-2) var(--ease-out),
              rotate var(--dur-3) var(--ease-spring),
              scale var(--dur-3) var(--ease-spring);
}
.theme-toggle .ico-moon { opacity: 0; rotate: -60deg; scale: .4; }
:root[data-theme="light"] .theme-toggle .ico-sun  { opacity: 0; rotate: 60deg; scale: .4; }
:root[data-theme="light"] .theme-toggle .ico-moon { opacity: 1; rotate: 0deg; scale: 1; }

/* --------------------------------------------------------------------------
   Badges & pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .34em .85em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--gold-400) 8%, transparent);
  color: var(--gold-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-solid { background: var(--grad-gold); color: #16110a; border-color: transparent; }
.badge-soft  { background: color-mix(in oklab, var(--cream) 7%, transparent); color: var(--text-dim); border-color: color-mix(in oklab, var(--cream) 14%, transparent); }
.badge-veg::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--jade); }

.dot-sep { color: var(--gold-600); padding-inline: .5em; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
  box-shadow: 0 26px 60px -34px color-mix(in oklab, var(--gold-400) 70%, transparent);
}
.card-body { padding: clamp(1.15rem, .8rem + 1vw, 1.85rem); }
.card-media { position: relative; overflow: hidden; }
.card-media img { transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.06); }
.card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, color-mix(in oklab, var(--ink-900) 88%, transparent) 100%);
  pointer-events: none;
}

/* Card whose whole surface is a link */
.card-link::before { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Feature card with a gold corner flourish */
.card-feature .card-body { padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
.card-feature::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 84px; height: 84px;
  background:
    linear-gradient(225deg, color-mix(in oklab, var(--gold-400) 26%, transparent), transparent 58%);
  pointer-events: none;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 3.1rem; height: 3.1rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--gold-300);
  background: color-mix(in oklab, var(--gold-400) 10%, transparent);
}
.card-icon svg { width: 1.45rem; height: 1.45rem; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              backdrop-filter var(--dur-3);
}
.site-header.is-stuck {
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: clamp(4.5rem, 3.4rem + 3.2vw, 6.25rem);
  transition: min-height var(--dur-3) var(--ease-out);
}
.site-header.is-stuck .header-inner { min-height: clamp(4rem, 3.4rem + 1.6vw, 4.9rem); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--cream);
  flex: none;
}
.brand img {
  width: auto;
  height: clamp(2.7rem, 2rem + 2.4vw, 4.1rem);
  object-fit: contain;
  /* The wordmark PNG carries its own black field; rounding it makes that
     field read as a deliberate plaque rather than a stray square. */
  border-radius: 12px;
  transition: height var(--dur-3) var(--ease-out);
  filter: drop-shadow(0 4px 18px color-mix(in oklab, var(--gold-400) 45%, transparent));
}
.site-header.is-stuck .brand img { height: clamp(2.4rem, 2rem + 1.2vw, 3.2rem); }
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
}
.brand-name small {
  font-family: "Manrope", sans-serif;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.nav { display: none; }
@media (min-width: 62rem) { .nav { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.4vw, 2rem); } }

.nav a {
  position: relative;
  padding: .35rem 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav a:hover, .nav a:focus-visible { color: var(--gold-200); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--gold-300); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-actions .btn { display: none; }
@media (min-width: 48rem) { .header-actions .btn { display: inline-flex; } }

/* Below 48rem the "Book the Hall" button is hidden, which would otherwise
   leave a phone with no call to action in the header at all. */
.header-order { display: inline-grid; }
@media (min-width: 48rem) { .header-order { display: none; } }

/* Three round buttons plus the full lock-up will not fit a phone. The
   widely-tracked "RESTAURANT & BANQUET" line is what costs the room, and the
   logo already says it — so below tablet width the name stands alone. */
@media (max-width: 34rem) {
  .brand-name small { display: none; }
  .brand-name { font-size: 1.35rem; }
}
@media (max-width: 22rem) {
  .brand-name { display: none; }
  .header-actions { gap: .4rem; }
}

.nav-toggle { display: inline-grid; }
@media (min-width: 62rem) { .nav-toggle { display: none; } }
/* The bars are drawn on exactly the grid the sprite glyphs are drawn on: a
   24-unit viewBox rendered at 1.15rem, lines running x=4→20 at y=6/12/18,
   stroked 1.7 units. Expressing it in those units rather than in pixels is
   what keeps this icon identical in weight to the bag and the sun beside it
   — and keeps it that way if the icon size is ever changed.

   `align-content` matters more than any of it: .icon-btn is a grid, and with
   the default value its three auto rows STRETCH to fill the 44px circle, so
   the margin below is ignored and the bars are flung to the rim. */
.nav-toggle {
  --u: calc(1.15rem / 24);
  align-content: center;
}
.nav-toggle span {
  display: block;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 1.7);
  background: currentColor;
  border-radius: var(--u);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
/* 6 units between centres, less the 1.7 the bar itself occupies. */
.nav-toggle span + span { margin-top: calc(var(--u) * 4.3); }
/* So 6 units is exactly how far the outer two travel to meet and cross. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--u) * 6)) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(var(--u) * -6)) rotate(-45deg); }

/* Scroll progress hairline */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  background: var(--grad-gold);
  opacity: .9;
  pointer-events: none;
}

/* Mobile panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.25rem var(--gutter) 2rem;
  background: color-mix(in oklab, var(--ink-900) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility var(--dur-2);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; }
/* Two round buttons plus a wide letter-spaced label do not fit a 360px
   phone. The buttons are the functional half, so the label tightens up —
   losing its leading rule and most of its tracking — and clips rather than
   shoving the close button off the screen. */
.mobile-nav-head { min-width: 0; }
.mobile-nav-head .eyebrow { min-width: 0; overflow: hidden; letter-spacing: .14em; }
.mobile-nav-head .eyebrow::before { display: none; }
.mobile-nav-head-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.mobile-nav-links { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.mobile-nav-links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--gold-400) 12%, transparent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem);
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
}
.mobile-nav-links a span { font-family: "Manrope", sans-serif; font-size: .72rem; color: var(--gold-500); letter-spacing: .18em; }
.mobile-nav-links a[aria-current="page"] { color: var(--gold-300); }
.mobile-nav-foot { display: grid; gap: .75rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  margin-top: var(--section-y);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ink-800) 88%, var(--gold-600)) 0%, var(--ink-900) 62%);
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.footer-grid .footer-brand { grid-column: span 1; }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.footer-title {
  margin-bottom: 1.1rem;
  font-family: "Manrope", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.footer-list { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.footer-list a { color: var(--text-dim); text-decoration: none; transition: color var(--dur-2), padding-left var(--dur-2); }
.footer-list a:hover { color: var(--gold-200); padding-left: .3rem; }
.footer-contact { display: grid; gap: .85rem; font-size: var(--fs-sm); color: var(--text-dim); }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 1.05rem; height: 1.05rem; margin-top: .28rem; color: var(--gold-400); flex: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { color: var(--text-faint); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-300); }
.social-row { display: flex; gap: .6rem; margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .5rem; }
.field > label, .label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  min-height: 3.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: color-mix(in oklab, var(--ink-850) 82%, transparent);
  color: var(--cream);
  font-size: var(--fs-base);
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
  appearance: none;
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--cream) 34%, transparent); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in oklab, var(--gold-400) 35%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background-color: color-mix(in oklab, var(--ink-800) 92%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-400) 18%, transparent);
}
.select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem;
}
.select option { background: var(--ink-800); color: var(--cream); }
.field-error { font-size: var(--fs-xs); color: var(--danger); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 16%, transparent);
}
.field-hint { font-size: var(--fs-xs); color: var(--text-faint); }
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

/* Segmented control */
.segmented {
  display: inline-flex;
  padding: .3rem;
  gap: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-850) 80%, transparent);
}
.segmented button {
  padding: .55rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-dim);
  transition: color var(--dur-2), background var(--dur-2);
}
.segmented button[aria-pressed="true"], .segmented button.is-active {
  background: var(--grad-gold);
  color: #16110a;
}

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-850) 70%, transparent);
  overflow: hidden;
}
.qty button {
  width: 2.15rem; height: 2.15rem;
  display: grid; place-items: center;
  color: var(--gold-300);
  font-size: 1.05rem;
  line-height: 1;
  transition: background var(--dur-1), color var(--dur-1);
}
.qty button:hover { background: color-mix(in oklab, var(--gold-400) 16%, transparent); color: var(--gold-100); }
.qty output, .qty .qty-val {
  min-width: 2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* Range slider */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-400) var(--fill, 0%), color-mix(in oklab, var(--cream) 14%, transparent) var(--fill, 0%));
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--grad-gold);
  border: 2px solid var(--ink-900);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold-400) 22%, transparent);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--gold-400);
  border: 2px solid var(--ink-900);
  cursor: grab;
}

/* --------------------------------------------------------------------------
   Drawer + backdrop + toast
   -------------------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: color-mix(in oklab, var(--ink-900) 72%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(100%, 27rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 80px -40px var(--shadow-color);
  transform: translateX(103%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--line);
}
.drawer-body { overflow-y: auto; padding: 1.15rem 1.35rem; }
.drawer-foot { padding: 1.25rem 1.35rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in oklab, var(--ink-850) 80%, transparent); }

/* Floating cart button */
.cart-fab {
  position: fixed;
  right: clamp(1rem, .5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, .5rem + 1.5vw, 2rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: #16110a;
  font-weight: 800;
  font-size: var(--fs-sm);
  box-shadow: 0 18px 44px -16px color-mix(in oklab, var(--gold-400) 90%, transparent);
  transform: translateY(150%);
  transition: transform var(--dur-3) var(--ease-spring);
}
.cart-fab.is-visible { transform: none; }
.cart-fab svg { width: 1.15rem; height: 1.15rem; }
.cart-fab .count {
  display: grid; place-items: center;
  min-width: 1.45rem; height: 1.45rem;
  padding-inline: .35rem;
  border-radius: var(--r-pill);
  background: #16110a;
  color: var(--gold-300);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.cart-fab.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0%,100% { scale: 1; } 40% { scale: 1.09; } }

/* Toast */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, .5rem + 2vw, 2.5rem);
  translate: -50% 0;
  z-index: var(--z-toast);
  display: grid;
  gap: .6rem;
  width: min(100% - 2rem, 26rem);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -24px var(--shadow-color);
  font-size: var(--fs-sm);
  animation: toast-in .4s var(--ease-spring);
  pointer-events: auto;
}
.toast strong { display: block; color: var(--gold-200); font-size: var(--fs-sm); }
.toast.is-out { animation: toast-out .3s var(--ease-out) forwards; }
.toast-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--gold-300); margin-top: .12rem; }
.toast-error { border-color: color-mix(in oklab, var(--danger) 55%, transparent); }
.toast-error .toast-icon { color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------------------
   Tabs / filter chips
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-block: .3rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: .25rem;
  --fade: 1.5rem;
}
.chips::-webkit-scrollbar { display: none; }

/* Clipped flush at the container edge, a scroller looks like a bug rather
   than a scroller. Fading whichever side still has content behind it says
   "there is more this way"; site.js keeps the attribute in step with the
   scroll position, and sets "none" when everything already fits. */
.chips[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.chips[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}
.chips[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.chip {
  flex: none;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-800) 70%, transparent);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--dur-2), background var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.chip:hover { color: var(--gold-200); border-color: var(--line-strong); transform: translateY(-2px); }
.chip[aria-selected="true"], .chip.is-active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #16110a;
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-2);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold-200); }
.accordion summary::after {
  content: "";
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / .8rem no-repeat;
  transition: rotate var(--dur-2) var(--ease-out);
}
.accordion details[open] summary::after { rotate: 135deg; }
.accordion .accordion-body { padding-bottom: 1.35rem; color: var(--text-dim); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, .5rem + 2vw, 3rem);
  background: color-mix(in oklab, var(--ink-900) 92%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 1100px);
  max-height: 82dvh;
  width: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 100px -40px var(--shadow-color);
  animation: lb-in .45s var(--ease-spring);
}
@keyframes lb-in { from { opacity: 0; scale: .95; } }
.lightbox-caption { margin-top: 1rem; text-align: center; color: var(--text-dim); font-size: var(--fs-sm); }
.lightbox-close { position: absolute; top: 1.1rem; right: 1.1rem; }
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox-nav.prev { left: clamp(.5rem, .2rem + 1vw, 1.5rem); }
.lightbox-nav.next { right: clamp(.5rem, .2rem + 1vw, 1.5rem); }

/* --------------------------------------------------------------------------
   Back-to-top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  left: clamp(1rem, .5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, .5rem + 1.5vw, 2rem);
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity var(--dur-2), visibility var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty {
  display: grid;
  place-items: center;
  gap: .85rem;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1rem;
  text-align: center;
  color: var(--text-faint);
}
.empty svg { width: 2.6rem; height: 2.6rem; color: var(--gold-600); }


/* ==========================================================================
   Light theme corrections

   The token inversion in base.css carries almost every component across on
   its own. These are the places where a value was baked in rather than
   tokenised, or where "darker" and "lighter" are not simply mirror images.
   ========================================================================== */

/* Cards lose their contrast when the page is paper, so they earn depth from
   a shadow instead. */
:root[data-theme="light"] .card:not(.is-featured),
:root[data-theme="light"] .dish,
:root[data-theme="light"] .hero-chip,
:root[data-theme="light"] .toast { box-shadow: var(--shadow-card); }
:root[data-theme="light"] .card:not(.is-featured):hover,
:root[data-theme="light"] .dish:hover {
  box-shadow: 0 1px 2px color-mix(in oklab, #4a3813 8%, transparent),
              0 26px 48px -26px color-mix(in oklab, #4a3813 55%, transparent);
}

/* A translucent tint over near-black reads as a raised disc; over ivory it
   reads as nothing. Light mode gives these buttons an actual surface. */
:root[data-theme="light"] .icon-btn {
  background: #fffdf8;
  box-shadow: 0 1px 2px color-mix(in oklab, #4a3813 8%, transparent);
}
:root[data-theme="light"] .icon-btn:hover {
  background: #fff;
  box-shadow: 0 6px 14px -8px color-mix(in oklab, #4a3813 55%, transparent);
}

/* The wordmark is gold on a black field, baked into the PNG. Rather than
   pretend that black is not there, light mode frames it — rounded, ringed in
   gold, sitting on the page like an enamel plaque. The gold drop-shadow that
   makes it glow on near-black only smudges yellow on ivory, so it goes. */
:root[data-theme="light"] .brand img {
  border-radius: 12px;
  filter: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold-500) 55%, transparent),
              0 8px 20px -12px color-mix(in oklab, #4a3813 65%, transparent);
}

/* Gold hairlines are invisible on ivory; these want the bronze end instead. */
:root[data-theme="light"] .nav a::after,
:root[data-theme="light"] .scroll-progress {
  background: linear-gradient(90deg, var(--gold-300), var(--gold-500));
}

/* Two control glyphs are inline SVG with the gold stroke written into the
   data URI, so they need re-encoding rather than a token. */
:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a17c1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .accordion summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a17c1c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Inputs read as recessed wells on paper, not as translucent panes. */
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .textarea { background-color: #fffefb; }
:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .select:focus,
:root[data-theme="light"] .textarea:focus { background-color: #fff; }
/* …except the search field, which is a well in the toolbar rather than a
   form control on a card, and looked like a slab of white when painted so. */
:root[data-theme="light"] .search-field .input { background-color: #efe8d9; }
:root[data-theme="light"] .search-field .input:focus { background-color: #f6f1e7; }

/* The basket count sits on a near-black pill in both themes, so its type has
   to stay light even when the rest of the gold ramp goes dark. */
:root[data-theme="light"] .cart-fab .count { color: #f3e2a4; }

/* A scrim's job is to push the page back. Lightening a light page does not do
   that, so the drawer, mobile panel and lightbox keep a dark veil. */
:root[data-theme="light"] .backdrop { background: color-mix(in oklab, #1a140c 42%, transparent); }
:root[data-theme="light"] .lightbox { background: color-mix(in oklab, #16110a 90%, transparent); }
:root[data-theme="light"] .lightbox-caption { color: #d8cfbe; }
:root[data-theme="light"] .lightbox .icon-btn {
  color: #f3e2a4;
  border-color: color-mix(in oklab, #d4af37 40%, transparent);
  background: color-mix(in oklab, #fbf3d8 12%, transparent);
}
:root[data-theme="light"] .lightbox .icon-btn:hover { color: #fbf3d8; border-color: color-mix(in oklab, #d4af37 70%, transparent); }
:root[data-theme="light"] .lightbox img { border-color: color-mix(in oklab, #d4af37 34%, transparent); }

/* The footer sits a shade below the page so it still reads as a base. */
:root[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, #f1e9d7 0%, #ece2cc 100%);
}


/* --------------------------------------------------------------------------
   Hand-off list — the channels a composed request can actually be sent
   through. Rows are deliberately large: on a phone this is the last step of
   an order, and it is the step that must not be fiddly.
   -------------------------------------------------------------------------- */
.handoff-list { display: grid; gap: .6rem; }
.handoff {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 70%, transparent);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2),
              transform var(--dur-2) var(--ease-spring);
}
.handoff:hover, .handoff:focus-visible {
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--gold-400) 8%, transparent);
  transform: translateY(-2px);
  color: var(--text);
}
.handoff.is-primary {
  border-color: transparent;
  background: var(--grad-gold);
  color: #16110a;
  box-shadow: 0 12px 30px -18px color-mix(in oklab, var(--gold-400) 85%, transparent);
}
.handoff.is-primary:hover, .handoff.is-primary:focus-visible {
  background: var(--grad-gold);
  color: #16110a;
  box-shadow: 0 16px 38px -16px color-mix(in oklab, var(--gold-400) 95%, transparent);
}
.handoff-ico { flex: none; color: var(--gold-300); }
.handoff-ico svg { width: 1.35rem; height: 1.35rem; }
.handoff.is-primary .handoff-ico { color: #16110a; }
.handoff-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.handoff-text strong { font-size: var(--fs-sm); font-weight: 700; }
.handoff-text small { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.35; }
.handoff.is-primary .handoff-text small { color: color-mix(in oklab, #16110a 72%, transparent); }
.handoff-go { flex: none; opacity: .45; }
.handoff-go svg { width: 1rem; height: 1rem; }
.handoff:hover .handoff-go { opacity: 1; }

/* The composed request itself — shown, because nobody should be asked to
   send something they have not been allowed to read. */
.handoff-preview {
  margin: 0;
  max-height: 11rem;
  overflow: auto;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ink-900) 55%, transparent);
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   Running quote bar

   The tray list is long and the quote card sits beside it — which on a phone
   means underneath it, several screens away. This keeps the estimate in view
   while you are actually adding trays, and gets out of the way at the width
   where the sticky quote card appears instead.
   -------------------------------------------------------------------------- */
.quote-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--ink-800) 95%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -22px 50px -30px var(--shadow-color);
  transform: translateY(115%);
  transition: transform var(--dur-3) var(--ease-spring);
}
.quote-bar.is-visible { transform: none; }
@media (min-width: 64rem) { .quote-bar { display: none; } }

.quote-bar-info { display: grid; gap: .1rem; min-width: 0; }
.quote-bar-info strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold-200);
  font-variant-numeric: lining-nums tabular-nums;
}
.quote-bar-info small {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quote-bar .btn { flex: none; }
/* The figure often moves by a few dollars, so the kick is what tells you the
   tap registered — not the number itself. */
.quote-bar.bump .quote-bar-info strong { animation: bump .45s var(--ease-spring); }

/* Keep the last of the page clear of the bar. */
body.has-quote-bar { padding-bottom: 5.5rem; }
@media (min-width: 64rem) { body.has-quote-bar { padding-bottom: 0; } }