:root {
  --bg: #faf7f3;
  --card: #ffffff;
  --ink: #16130f;
  --muted: #837c70;
  --line: rgba(16,16,16,.09);
  /* Brand palette defaults — theme_style_tag() overrides them per tenant. */
  --accent: #FF6D00;
  --accent-rgb: 255,109,0;
  --accent-soft: rgba(255,109,0,.1);
  --accent-light: rgb(255,146,64);
  --accent-dark: rgb(217,93,0);
  --accent-ink: #ffffff;
  --radius: 16px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* App feel: no visible scrollbar, no rubber-band bounce past the top/bottom,
   momentum scroll on iOS — closer to a native app than a web page. */
/* overflow-x: hidden on BOTH html and body (rather than just html) turns
   body into a second scrolling container and breaks position:sticky for
   every sticky element on the page (topbar, chip rail) — the browser has
   nothing to stick to since it's no longer scrolling the element it
   expects. html alone is enough to stop horizontal page scroll. */
html { scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-y: contain; overflow-x: hidden; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--bg); color: var(--ink); padding-bottom: 96px; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; }
h1,h2,h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .02em; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
a { touch-action: manipulation; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.topbar { position: sticky; top: 0; z-index: 20; background: rgba(250,247,243,.92); backdrop-filter: blur(10px); padding: 13px 18px; box-shadow: 0 1px 0 var(--line), 0 6px 16px -12px rgba(16,16,16,.25); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Logo is its own fixed-size flex item so a long restaurant name can wrap
   onto a second line without the name text flowing oddly around the icon —
   name is capped at 2 lines (with auto-shrinking font) rather than
   overflowing or forcing a 3rd line. */
.topbar .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 1px 3px rgba(16,16,16,.15); }
/* order/status.php uses the same .brand/.brand-name classes but without
   this wrapper — .brand-name still renders fine as a single flex child
   there, it just doesn't get the live clock subtitle. */
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: clamp(13.5px, 4vw, 17px); font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.brand-datetime { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.brand-datetime svg { flex: none; opacity: .75; }

/* Live open/closed status — subtle tinted pill + a small pulsing dot when
   open, so the state reads at a glance without shouting for attention. */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 20px; white-space: nowrap; flex: none; }
.status-badge.is-open { background: rgba(47,168,79,.12); color: #1f8a45; }
.status-badge.is-closed { background: rgba(211,51,51,.1); color: #b33; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-badge.is-open .live-dot { animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(47,168,79,.5); }
  70% { box-shadow: 0 0 0 6px rgba(47,168,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,168,79,0); }
}

.notice { max-width: 1100px; width: calc(100% - 32px); margin: 14px auto; padding: 11px 15px; border-radius: 12px; background: #fff4e5; color: #9a5b00; font-size: 13px; font-weight: 700; border: 1px solid #ffe0b3; display: flex; align-items: center; gap: 8px; }
.notice svg { flex: none; }

/* Call-a-waiter strip. Sits above the sticky chips so it scrolls away —
   the guest needs it once, the menu is what they came for. Both pieces
   are compact and understated (a real app treats "call waiter" as a
   secondary utility, not a hero CTA) — a soft accent tint reads as
   "tappable" without the oversized shadow/height of a primary button. */
.call-waiter-bar { max-width: 1132px; margin: 0 auto; padding: 10px 16px 0; }
.call-waiter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.table-chip { flex: none; height: 38px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 0 13px; border-radius: 12px; white-space: nowrap; }
.call-waiter-btn { flex: none; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 15px; border-radius: 12px; border: 0; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; transition: background-color .15s ease, transform .15s ease; }
.call-waiter-btn:active { transform: scale(.96); }
.call-waiter-btn:disabled { opacity: .6; }
.call-waiter-btn.called { background: var(--ink); color: #fff; }
@media (hover: hover) { .call-waiter-btn:not(:disabled):hover { background: rgba(var(--accent-rgb),.18); } }
.call-waiter-msg { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #1a6b3a; text-align: center; }
.call-waiter-msg.is-error { color: #c02a2a; }

/* `top` comes from --topbar-h, MEASURED by assets/js/sticky-offset.js, not
   guessed — a hardcoded px value here didn't match the topbar's real
   height (varies with content and web-font load reflow), so the rail
   stuck a few pixels too high and visibly tucked under the topbar. The
   fallback (58px) only matters for the instant before JS runs. */
/* mask-image fades the rail's own right edge regardless of scroll position
   (it's applied to the element's box, not its scrolled content) — a visual
   hint that there are more categories to scroll to, not a layout cutoff. */
.chip-scroll { position: sticky; top: var(--topbar-h, 58px); z-index: 19; background: var(--bg); display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; max-width: 1132px; margin: 0 auto; padding: 12px 16px 14px; scrollbar-width: none; box-shadow: 0 10px 12px -10px rgba(16,16,16,.14);
               -webkit-mask-image: linear-gradient(to right, black 94%, transparent 100%); mask-image: linear-gradient(to right, black 94%, transparent 100%); }
.chip-scroll::-webkit-scrollbar { display: none; }
/* Simple, static chip: a plain round photo with its label underneath.
   Nothing about a chip's size, order, or background changes on activation
   (only text/ring color) — that stability is what stopped the rail from
   jittering during scroll; the capsule/reorder/scale version was cheap to
   look at but expensive to keep visually stable while IntersectionObserver
   was toggling classes on every scroll tick. */
.chip { flex: none; width: auto; min-width: 90px; max-width: 116px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: center; }
.chip-avatar { width: 68px; height: 68px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent-soft); color: var(--accent); transition: box-shadow .15s ease; }
.chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-label { white-space: normal; overflow: visible; line-height: 1.2; max-width: 110px; }
.chip:active .chip-avatar { transform: scale(.94); }
.chip.active { color: var(--accent); font-weight: 800; }
.chip.active .chip-avatar { box-shadow: 0 0 0 2px var(--accent); }

/* Clears the topbar + the sticky chip rail, both measured — see above. */
.cat-section { max-width: 1132px; margin: 0 auto; padding: 20px 16px 4px; scroll-margin-top: calc(var(--topbar-h, 58px) + var(--rail-h, 62px) + 10px); }
.cat-section h2 { font-size: 27px; margin: 0 0 2px; }

/* 1 column on mobile, 2 on tablet, 3 on desktop. */
/* minmax(0, 1fr), not bare 1fr — a plain 1fr track won't shrink below its
   content's intrinsic min-content width, so a long unbreakable string
   (e.g. the Bengali item name) was blowing the card past the grid column
   and off the right edge of the screen instead of wrapping inside it. */
.menu-item-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 6px; }
@media (min-width: 640px) { .menu-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .menu-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-note { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }

/* Tight, even inset on three sides so the image sits close to the card's
   rounded edge (matching its own border-radius); a visible thin border
   plus a soft resting shadow (deeper on hover) reads as an elevated card
   instead of a flat bordered list row. */
.menu-item { display: flex; gap: 12px; padding: 12px 44px 14px 12px; border: 1px solid rgba(16,16,16,.1); width: 100%; background: var(--card); text-align: left; align-items: flex-start; border-radius: 16px; box-shadow: 0 3px 10px -3px rgba(16,16,16,.12); position: relative; transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease; }
.menu-item:hover { border-color: rgba(16,16,16,.18); box-shadow: 0 8px 18px -6px rgba(16,16,16,.22); }
.menu-item:active { transform: scale(.98); }
/* Skeleton shimmer: a moving gradient sits behind the <img> as its CSS
   background. Once the real photo decodes it's opaque and fully covers
   the gradient (object-fit: cover), so the shimmer just disappears on its
   own — no JS "loaded" event needed to swap it out. */
@keyframes imgShimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.menu-item-img-wrap { position: relative; flex: none; }
.menu-item img { width: 104px; height: 104px; border-radius: 18px; object-fit: cover; flex: none; display: block;
                 background-image: linear-gradient(100deg, #ececec 30%, #f7f4ef 50%, #ececec 70%); background-size: 200% 100%; animation: imgShimmer 1.4s ease-in-out infinite; }
.menu-item .ph { width: 104px; height: 104px; border-radius: 18px; flex: none; background: #f0ece4; display: flex; align-items: center; justify-content: center; color: #b5ac9c; }
.menu-item .info { flex: 1; min-width: 0; padding-top: 2px; }
.menu-item .name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; color: var(--ink); line-height: 1.3; }
/* The corner badge is absolutely positioned, so it doesn't push text out of
   the way on its own — reserve room on the name's first line only (where
   the badge actually sits) so a long badge word never overlaps it. */
.menu-item:has(.menu-item-badge) .name { padding-right: 82px; }
.menu-item .desc { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A single-price item shows its price plain and bold (no pill) — reserve
   the pill treatment for when there's an actual choice (Half/Full) to
   distinguish between. */
.price-solo { font-size: 16px; font-weight: 900; color: var(--accent); margin-top: 6px; }
/* Veg/non-veg badge sits on the image itself — top-right, a hair of
   padding in from the corner, on a soft translucent chip so it stays
   readable over any photo. */
.veg-badge { position: absolute; top: 5px; right: 5px; background: rgba(255,255,255,.65); backdrop-filter: blur(2px); border-radius: 6px; padding: 3px; display: flex; align-items: center; justify-content: center; }
.veg-dot { width: 11px; height: 11px; border: 1.5px solid #2fa84f; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.veg-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #2fa84f; }
.veg-dot.nonveg { border-color: #d33; }
.veg-dot.nonveg::after { background: #d33; border-radius: 0; clip-path: polygon(50% 0,100% 100%,0 100%); width: 7px; height: 7px; }
/* Minimal price chips — each price option (e.g. Half/Full) gets its own
   small pill instead of collapsing to a single "From ₹x" line, so the
   options are visible without opening the item. */
.menu-item .price-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.price-chip { display: inline-flex; align-items: baseline; gap: 4px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; line-height: 1.6; }
.price-chip .lbl { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
/* .discount-badge shows the item's admin-typed badge_text (e.g. "Chef's
   Pick") — despite the name, it's no longer a discount indicator; that's
   now purely the per-row muted strikethrough next to whichever price
   display (solo or chip) is already there. Kept the class name to avoid
   touching every JS file that already references it. Used inline (item
   detail popup header, landing sync) — the item CARD uses .menu-item-badge
   instead, pinned to a corner, since it needs its own positioning. */
.discount-badge { display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
/* Pinned to the card's own top-right corner (mirrors .add-affordance at the
   bottom-right) instead of sitting inline in the price line, so it reads as
   a corner flag rather than competing with the price. Lighter weight + a
   gradient + a looping light sweep (::after) for a "premium" feel instead
   of the flat, heavier .discount-badge look used elsewhere. */
.menu-item-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(217,78,0,.55);
}
.menu-item-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.8), transparent);
  transform: skewX(-20deg);
  animation: menu-item-badge-shine 2.6s ease-in-out infinite;
}
@keyframes menu-item-badge-shine {
  0%, 15% { left: -60%; }
  65%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-item-badge::after { animation: none; }
}
.price-original { font-size: 11.5px; color: var(--muted); font-weight: 700; text-decoration: line-through; }
/* Solid, vibrant floating-action-style button, pinned to the card's own
   bottom-right corner (not vertically centered in the row) — a squircle
   rather than a circle, matching the reference. */
.add-affordance { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -4px rgba(var(--accent-rgb),.6); }

/* ---------- Cart bar ---------- */
/* Always laid out (not display:none) so the show/hide can be a real slide
   transition instead of an instant pop-in; translateY off-screen plus
   pointer-events:none keeps it invisible and unclickable while hidden. A
   slight overshoot easing gives it a native, springy feel. */
.cart-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; background: var(--ink); color: #fff; border-radius: 16px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 16px 34px -12px rgba(16,16,16,.4); transform: translateY(150%); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; }
.cart-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cart-bar .count { font-size: 12.5px; font-weight: 700; opacity: .8; }
.cart-bar .total { font-family: 'Bebas Neue', sans-serif; font-size: 21px; }
.cart-bar .view { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); padding: 9px 16px; border-radius: 10px; font-weight: 800; font-size: 13px; border: 0; color: var(--accent-ink); }

/* ---------- Sheets / modals ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(20,16,10,.45); display: none; align-items: flex-end; justify-content: center; z-index: 60; }
.sheet-backdrop.open { display: flex; }
.sheet { background: #fff; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 22px 22px 0 0; padding: 0 0 calc(20px + env(safe-area-inset-bottom)); position: relative; overscroll-behavior: contain; }
@media (min-width: 640px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: 22px; } }
.sheet h2 { margin: 20px 20px 14px; font-size: 20px; }
.sheet-close { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); border: 0; color: var(--ink); font-size: 18px; width: 32px; height: 32px; border-radius: 50%; line-height: 1; z-index: 2; box-shadow: 0 2px 8px rgba(16,16,16,.15); }
.sheet-drag { width: 38px; height: 4px; border-radius: 4px; background: var(--line); margin: 10px auto 0; }

/* item detail card */
/* Image sits beside the name/veg/description block in one row, rather than
   as a full-width banner stacked above it. */
.item-detail-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
/* .sheet-close sits at the sheet's own top-right corner (top:12px;right:12px
   on .sheet-close in this file) — anchoring the badge to the BOTTOM-right
   of the header instead of the top keeps it clear of that button. */
.item-detail-header .menu-item-badge { top: auto; bottom: 4px; right: 16px; }
.item-detail-img-wrap { position: relative; width: 100px; height: 100px; flex: none; border-radius: 16px; background: #f0ece4; overflow: hidden; }
.item-detail-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;
                             background-image: linear-gradient(100deg, #ececec 30%, #f7f4ef 50%, #ececec 70%); background-size: 200% 100%; animation: imgShimmer 1.4s ease-in-out infinite; }
.item-detail-img-wrap.ph { display: flex; align-items: center; justify-content: center; color: #b5ac9c; }
.item-detail-text { flex: 1; min-width: 0; }
.item-detail-body { padding: 10px 16px 0; }
.item-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.item-detail-name { font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.item-detail-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.price-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.price-pill { flex: 1; min-width: 150px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 12px; padding: 5px 5px 5px 12px; }
.price-pill .pp-info .pp-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.price-pill .pp-info .pp-amt { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pp-amt-original { font-size: 11px; font-weight: 700; color: var(--muted); text-decoration: line-through; }
/* +/- buttons are a dedicated tap target (not just decorative), sized well
   past the old 22px so they're easy to hit for anyone, including senior
   citizens — the pill's own padding stays tight so the row still reads
   compact overall. */
.stepper { display: flex; align-items: center; gap: 3px; background: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 1px 3px rgba(16,16,16,.1); }
.stepper button { width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; font-size: 19px; font-weight: 800; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.stepper button:active { background: var(--accent-soft); }
.stepper button:disabled { opacity: .3; }
.stepper span { min-width: 20px; text-align: center; font-weight: 800; font-size: 13.5px; }

.sheet-footer { padding: 10px 16px 0; }
.btn-add-cart { width: 100%; padding: 13px; border-radius: 13px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 10px 22px -8px rgba(var(--accent-rgb),.55); }
.btn-add-cart:disabled { background: #e4dfd6; color: #a39c8e; box-shadow: none; }
.btn-add-cart .icon { font-size: 16px; }

/* cart lines */
.cart-line { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cart-line .info { flex: 1; font-size: 13.5px; }
.cart-line .sub { color: var(--muted); font-size: 11.5px; }
.qty-stepper { display: flex; align-items: center; gap: 8px; background: #f0ece4; border-radius: 10px; padding: 3px 5px; }
.qty-stepper button { background: none; border: 0; color: var(--ink); font-size: 16px; width: 22px; height: 22px; font-weight: 800; }
.qty-stepper span { font-weight: 800; min-width: 14px; text-align: center; font-size: 13px; }
.cart-subtotal-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 13.5px; color: var(--muted); padding: 6px 0; }
.cart-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 16px; padding: 10px 0 14px; border-top: 1px dashed var(--line); margin-top: 4px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea { width: 100%; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14.5px; }
/* The cart sheet's footer is the one spot with two buttons side by side —
   .sheet-footer alone (used by the item-detail popup too) stays a single
   full-width button; this modifier turns it into a matched row. Both
   buttons share the same height/radius/weight so they read as one
   deliberate pair instead of two different-looking controls glued
   together — "high quality" here mostly means consistent, not flashy. */
.sheet-footer-row { display: flex; gap: 10px; }
.btn-add-more, .btn-place { padding: 14px; border-radius: 14px; border: 0; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-add-more { flex: 1; background: var(--accent-soft); color: var(--accent); }
.btn-add-more:hover { background: rgba(var(--accent-rgb),.18); }
.btn-place { flex: 1.5; width: auto; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -8px rgba(var(--accent-rgb),.55); }
.btn-place:disabled { background: #d8d2c8; color: #918a7d; box-shadow: none; }
.empty-cart { text-align: center; color: var(--muted); padding: 30px 0; }

.upsell-heading { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 4px 0 8px; }
.upsell-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: var(--accent-soft); border-radius: 12px; margin-bottom: 8px; }
.upsell-card .upsell-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.upsell-card .upsell-price { font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 2px; }
.upsell-add-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }