/* Chef Urbano — Maqueta premium refinada (laboratorio) */

:root {
  /* Color system v2 (logo-based + UI derivatives) */
  --cu-yellow: #FCD000;
  --cu-yellow-hover: #EABF00;
  --cu-yellow-pressed: #D5A900;
  --cu-yellow-soft: #FFF6C7;
  --cu-yellow-softer: #FFFAE8;

  --cu-ink: #1D1913;
  --cu-ink-soft: #332D25;
  --cu-brown: #6B4D32;
  --cu-brown-soft: #9A7A5A;

  --cu-page: #FFF9EF;
  --cu-surface: #FFFFFF;
  --cu-surface-warm: #FFFDF8;
  --cu-surface-muted: #F6F1E8;

  --cu-border: #E9E0D3;
  --cu-border-strong: #D7C8B5;

  --cu-text: #1D1913;
  --cu-text-secondary: #675F56;
  --cu-text-muted: #8D857B;

  --cu-success: #3F8A56;
  --cu-success-soft: #EAF5ED;
  --cu-warning: #C98900;
  --cu-warning-soft: #FFF3D6;
  --cu-danger: #C94942;
  --cu-danger-soft: #FCECEA;
  --cu-info: #426F9B;
  --cu-info-soft: #EAF2F8;

  /* Typography scale */
  --cu-font-display: 32px;
  --cu-font-h1: 26px;
  --cu-font-h2: 22px;
  --cu-font-h3: 18px;
  --cu-font-body: 15px;
  --cu-font-small: 13px;
  --cu-font-caption: 11px;

  /* Icon scale */
  --cu-icon-xs: 16px;
  --cu-icon-sm: 18px;
  --cu-icon-md: 22px;
  --cu-icon-lg: 26px;
  --cu-icon-xl: 32px;
  --cu-icon-feature: 44px;

  /* Icon colors */
  --cu-icon-primary: var(--cu-ink);
  --cu-icon-secondary: var(--cu-text-secondary);
  --cu-icon-muted: var(--cu-text-muted);
  --cu-icon-active: var(--cu-ink);
  --cu-icon-active-bg: var(--cu-yellow-soft);

  /* legacy compatibility layer */
  --cu-brand-primary: var(--cu-yellow);
  --cu-brand-primary-hover: var(--cu-yellow-hover);
  --cu-brand-primary-soft: var(--cu-yellow-pressed);
  --cu-bg-page: var(--cu-page);
  --cu-bg-surface: var(--cu-surface-warm);
  --cu-bg-elevated: var(--cu-surface);
  --cu-text-primary: var(--cu-text);
  --cu-border-soft: var(--cu-border);

  --cream: var(--cu-surface-warm);
  --white: var(--cu-surface);
  --ivory: var(--cu-surface-warm);
  --warm-cream: var(--cu-yellow-softer);
  --champagne: #F3DFA4;
  --cart-yellow: var(--cu-yellow);
  --cart-yellow-top: var(--cu-yellow);
  --cart-yellow-deep: var(--cu-yellow-pressed);
  --ink: var(--cu-ink);
  --ink-soft: var(--cu-text-secondary);
  --ink-muted: var(--cu-text-muted);
  --line: var(--cu-border);
  --accent: var(--cu-yellow);
  --accent-deep: var(--cu-warning);
  --accent-warm: var(--cu-yellow-soft);
  --accent-bg: var(--cu-yellow-softer);
  --open: var(--cu-success);
  --discount: var(--cu-success);
  --shadow: 0 4px 14px rgba(37, 29, 21, 0.06);
  --shadow-elevated: 0 10px 26px rgba(37, 29, 21, 0.1);
  --cu-radius-card: 17px;
  --cu-shadow-card: 0 4px 14px rgba(37, 29, 21, 0.06);
  --radius-card: 17px;
  --radius-btn: 14px;
  --radius-input: 14px;
  --font: "Outfit", system-ui, -apple-system, sans-serif;
  --shell-w: 430px;
  --nav-h: 60px;
  --cartbar-h: 54px;
  --cart-cta-height: 72px;
  --dock-h: var(--nav-h);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --icon-stroke: 1.75;
  --motion-instant: 120ms;
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--cu-page);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "tnum" 1, "kern" 1;
}

body.lab-open {
  overflow: hidden;
}

.app-frame {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--cu-page);
  overflow-x: clip;
}

.app-shell {
  position: relative;
  width: min(100%, var(--shell-w));
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--cream);
  overflow-x: clip;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}

/* ── Screens — una sola visible, sin transform en padres ── */
.app-screen {
  width: 100%;
  min-height: 100dvh;
}

.app-screen[hidden] {
  display: none !important;
}

.screen {
  padding-bottom: calc(var(--dock-h) + var(--safe-bottom) + 16px);
}

.screen-home {
  padding-bottom: calc(var(--dock-h) + var(--safe-bottom) + 16px);
}

body.has-cart-bar .screen-home {
  padding-bottom: calc(var(--dock-h) + var(--cartbar-h) + var(--safe-bottom) + 8px);
}

.screen-cart {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  padding-bottom: 0;
  background: var(--cream);
  overflow: hidden;
}

body.mode-cart .screen-cart,
body.mode-checkout .screen-cart {
  padding-bottom: 0;
}

body.mode-cart .bottom-dock,
body.mode-checkout .bottom-dock,
body.mode-confirmation .bottom-dock,
.bottom-dock[hidden] {
  display: none !important;
}

.screen-order-confirm {
  padding: 32px 20px calc(24px + var(--safe-bottom));
  background: var(--cream);
  min-height: 100dvh;
}

.screen-order-confirm.confirm-enter {
  animation: confirmIn 180ms var(--ease-smooth) both;
}

@keyframes confirmIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen-club {
  padding-bottom: calc(var(--dock-h) + var(--safe-bottom) + 24px);
}

.cart-filled {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Escala única de espaciado del carrito — evita márgenes arbitrarios por tarjeta */
.screen-cart {
  --cart-gap-xs: 4px;
  --cart-gap-sm: 8px;
  --cart-gap-md: 12px;
  --cart-gap-lg: 16px;
  --cart-pad-x: 16px;
}

.cart-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

/* Contenedor único: el gap manda, las tarjetas no llevan margin propio */
.cart-body.cart-content {
  display: flex;
  flex-direction: column;
  gap: var(--cart-gap-sm);
  padding: var(--cart-gap-lg) var(--cart-pad-x) var(--cart-gap-md);
}

/* Grupo estrechamente relacionado: modalidad → info delivery → dirección */
.cart-mod-group {
  display: flex;
  flex-direction: column;
  gap: var(--cart-gap-xs);
}

/* Un poco más de aire al pasar de un grupo a otro */
.cart-mod-group + .cart-detail-card {
  margin-top: var(--cart-gap-xs);
}

/* Footer claro Chef Urbano — una sola fila: total + continuar */
.cart-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--cu-surface-warm, #fffdf7);
  border-top: 1px solid var(--cu-border-soft, rgba(63, 49, 28, 0.08));
  border-radius: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(63, 49, 28, 0.07);
}

/* Footer del carrito: NUNCA visible fuera de carrito/checkout */
body:not(.mode-cart):not(.mode-checkout) .cart-footer,
#screen-cart[hidden] .cart-footer,
#screen-cart:not(.active) .cart-footer,
#cartFilled.hidden .cart-footer,
#cartFilled[hidden] .cart-footer {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mode-cart #cartFilled:not(.hidden) .cart-footer,
body.mode-checkout #cartFilled:not(.hidden) .cart-footer {
  display: block;
  visibility: visible;
  pointer-events: auto;
}

.cart-footer-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cart-footer-total {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.cart-footer-total-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cu-text-muted, #8a7f70);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cart-footer-total-value {
  font-size: 21px;
  font-weight: 800;
  color: var(--cu-ink, #1a1712);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cart-confirm {
  position: static;
  transform: none;
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  min-height: 48px;
  padding: 6px 18px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--cu-yellow);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cu-text-primary);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(107, 77, 50, 0.14);
  white-space: normal;
}


/* ── Tap / press ── */
.tap {
  transition: transform var(--motion-fast) var(--ease-premium),
              box-shadow var(--motion-fast) var(--ease-premium),
              border-color var(--motion-fast) var(--ease-premium);
}

.tap:active:not(:disabled) { transform: scale(0.98); }

/* ── Header home ── */
.lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--cu-border-soft);
  background: var(--cu-surface-warm);
}

.lab-brand {
  font-family: var(--font);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--cu-ink);
}

.lab-brand::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--cu-yellow);
  vertical-align: middle;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--cu-border);
  background: var(--cu-surface);
  color: var(--cu-text-muted);
}

.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--open); }

/* ── Hero ── */
.hero-wrap { position: relative; margin: 0 16px; }

.hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #E8E4DC;
  box-shadow: var(--shadow);
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  transition: transform var(--motion-slow) var(--ease-premium);
}

.hero-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }

.hero-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(26,24,20,0.1); transition: all var(--motion-normal) var(--ease-premium); }

.hero-dots span.on { background: var(--accent); width: 16px; border-radius: 3px; }

/* ── Modalidad ── */
.mod-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -18px 16px 0;
  padding: 14px 14px;
  background: var(--cu-surface);
  border: 1px solid var(--cu-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(63, 49, 28, 0.055);
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.mod-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.3;
}

.mod-icon-wrap {
  flex-shrink: 0;
  padding: 3px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 216, 77, 0.35) 0%, rgba(233, 184, 18, 0.12) 100%);
}

.mod-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--cu-surface-warm);
  display: grid;
  place-items: center;
  color: var(--cu-icon-primary);
  box-shadow: inset 0 0 0 1px rgba(233, 184, 18, 0.12);
}

.mod-icon svg { width: 28px; height: 28px; }

.mod-body { flex: 1; min-width: 0; }

.mod-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.mod-select {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  appearance: none;
  cursor: pointer;
  letter-spacing: 0;
}

/* ── Modalidad sheet ── */
.overlay-modality {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(8px);
  width: min(100vw, var(--shell-w));
  z-index: 255;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-smooth), transform 200ms var(--ease-smooth);
}

.overlay-modality.on {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.overlay-modality[hidden]:not(.on) { display: none !important; }

.mod-sheet {
  background: var(--cream);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(63, 49, 28, 0.08);
}

.mod-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(26, 24, 20, 0.12);
  margin: 4px auto 14px;
}

.mod-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.modality-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modality-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}

.modality-opt.on {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.14);
}

.modality-opt-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 216, 77, 0.12);
  color: var(--accent-deep);
}

.modality-opt-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modality-opt-body strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.modality-opt-body span {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.35;
}

.modality-opt-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  opacity: 0;
  transition: opacity 180ms;
}

.modality-opt.on .modality-opt-check { opacity: 1; }

/* ── Seating selector ── */
.overlay-seating {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(100vw, var(--shell-w));
  height: 100dvh;
  max-height: 100dvh;
  z-index: 256;
  background: var(--cream);
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-smooth), transform 200ms var(--ease-smooth);
  overflow: hidden;
}

.overlay-seating.on {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.overlay-seating[hidden]:not(.on) { display: none !important; }

.seating-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.seating-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.seating-head-text h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}

.seating-head-text p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.loc-zone-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}

.loc-zone-card {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
}

.loc-zone-card.on {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.18);
}

.loc-zone-card.loc-zone-night:not(.on) {
  border-color: rgba(198, 140, 40, 0.35);
  background: rgba(255, 248, 230, 0.9);
}

.loc-zone-icon { color: var(--accent-deep); }

.loc-zone-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}

.loc-zone-count { display: none; }

.loc-zone-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.2;
}

.premium-zone-row .loc-zone-card.on .loc-zone-hint {
  color: var(--accent-deep);
}

.loc-picker-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 8px;
  -webkit-overflow-scrolling: touch;
}

.loc-picker-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.loc-picker-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.loc-pick-chip {
  flex: 0 0 72px;
  min-height: 72px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  cursor: pointer;
  scroll-snap-align: center;
}

.loc-pick-chip:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.loc-pick-chip.status-selected {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.16);
}

.loc-pick-chip.status-occupied {
  background: #ece8e2;
  border-color: #e0dbd3;
}

.loc-pick-chip.status-reserved {
  background: #fff6eb;
  border-color: #f0dcc4;
}

.loc-pick-chip.status-tab_open {
  background: var(--white);
  border-color: #c9a020;
  border-width: 2px;
}

.loc-pick-short {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.loc-pick-chip.status-selected .loc-pick-short { color: #5c3d12; }

.loc-pick-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.2;
}

.loc-party-stepper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.loc-party-stepper button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
}

.loc-party-stepper span {
  min-width: 28px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.seating-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.seating-tab {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.seating-tab.on {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.18);
  color: var(--accent-deep);
}

.seating-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.seat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font);
  text-align: left;
  position: relative;
  cursor: pointer;
}

.seat-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.seat-card.status-available { border-color: var(--line); }

.seat-card.status-selected {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.16);
}

.seat-card.status-selected .seat-card-name { color: #5c3d12; }

.seat-card.status-occupied {
  background: #ece8e2;
  border-color: #e0dbd3;
}

.seat-card.status-reserved {
  background: #fff6eb;
  border-color: #f0dcc4;
}

.seat-card-icon { color: var(--accent-deep); }

.seat-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.seat-card-meta {
  font-size: 11px;
  color: var(--ink-muted);
}

.seat-check {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--accent-deep);
}

.bar-area { margin-bottom: 18px; }

.bar-area-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.bar-counter {
  background: linear-gradient(180deg, #f5efe3 0%, #ebe3d4 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
}

.bar-seats-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.bar-seat {
  flex: 0 0 56px;
  width: 56px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  cursor: pointer;
}

.bar-seat:disabled { cursor: not-allowed; opacity: 0.65; }

.bar-seat.status-selected {
  border-color: var(--accent);
  background: rgba(255, 216, 77, 0.2);
}

.bar-seat.status-selected .bar-seat-num { color: #5c3d12; }

.bar-seat.status-occupied { background: #ece8e2; }

.bar-seat.status-reserved { background: #fff6eb; }

.bar-seat-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.bar-seat-state {
  font-size: 9px;
  color: var(--ink-muted);
}

.bar-seat .seat-check {
  top: 4px;
  right: 4px;
}

.seating-confirm {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--white);
}

.seating-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.seating-summary-row small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
}

.seating-summary-row strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.cart-mod-detail {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.35;
}

.cart-mod-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(198, 74, 58, 0.08);
  border: 1px solid rgba(198, 74, 58, 0.18);
  font-size: 12px;
  font-weight: 500;
  color: #9a3b2e;
  line-height: 1.4;
}

.cart-dine-pay {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 248, 240, 0.9);
  border: 1px solid rgba(120, 72, 32, 0.12);
}

.cart-dine-pay-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.cart-dine-pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cart-dine-pay-opt {
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(120, 72, 32, 0.16);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.cart-dine-pay-opt-title {
  font-size: 12px;
  font-weight: 700;
}

.cart-dine-pay-opt-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.3;
}

.cart-dine-pay-opt.on {
  border-color: rgba(176, 92, 32, 0.45);
  background: rgba(255, 236, 214, 0.95);
  color: #8a4518;
}

.cart-dine-pay-opt.on .cart-dine-pay-opt-sub {
  color: rgba(138, 69, 24, 0.85);
}

.cart-dine-pay-opt--cuenta:not(.on) {
  border-color: rgba(176, 92, 32, 0.32);
  background: rgba(255, 252, 247, 0.98);
}

.cart-dine-pay-opt--cuenta:not(.on) .cart-dine-pay-opt-title {
  color: #8a4518;
}

.cart-mesa-cuenta-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.35;
  color: #7a5a00;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.22);
}

.cart-cuenta-banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* display:flex ganaba a [hidden] y dejaba una caja vacía ocupando alto */
.cart-cuenta-banner[hidden] {
  display: none !important;
}

.cart-local-guest[hidden],
.cart-delivery-row[hidden],
.cart-field-error[hidden] {
  display: none !important;
}

.cart-cuenta-banner strong {
  font-size: 13px;
  font-weight: 700;
}

.cart-cuenta-banner span {
  font-size: 11px;
  font-weight: 500;
}

.cart-cuenta-banner--pending {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.28);
  color: #7a5a00;
}

.cart-cuenta-banner--active {
  background: rgba(46, 125, 50, 0.1);
  border: 1px solid rgba(46, 125, 50, 0.22);
  color: #2e5e32;
}

.cart-cuenta-banner--rejected {
  background: rgba(198, 74, 58, 0.08);
  border: 1px solid rgba(198, 74, 58, 0.18);
  color: #9a3b2e;
}

.cart-cuenta-banner--closed {
  background: rgba(96, 96, 96, 0.08);
  border: 1px solid rgba(96, 96, 96, 0.2);
  color: #4a4a4a;
}

.cart-cuenta-banner--paid {
  background: rgba(33, 150, 243, 0.08);
  border: 1px solid rgba(33, 150, 243, 0.2);
  color: #1565c0;
}

.cart-cuenta-refresh-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(122, 90, 0, 0.35);
  background: rgba(255, 255, 255, 0.65);
  color: #7a5a00;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.cart-cuenta-refresh-btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.cart-cuenta-refresh-btn:focus-visible {
  outline: 2px solid rgba(122, 90, 0, 0.45);
  outline-offset: 2px;
}

/* Información anticipada de delivery — discreta, no es alerta ni cobro */
.cart-delivery-info {
  margin: 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(252, 208, 0, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: var(--cu-brown, #6b5344);
  line-height: 1.35;
}

.cart-delivery-info[hidden] {
  display: none !important;
}

/* Título de la sección de cargos dentro del detalle */
.cart-charges-title {
  margin: 6px 0 2px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cu-text-muted, #8a7f70);
}

.cart-delivery-row {
  margin: 0;
}

.cart-delivery-row label,
.cart-local-name label,
.cart-local-location__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

.cart-address-input,
.cart-guest-name-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  box-sizing: border-box;
}

.cart-address-input.is-invalid,
.cart-guest-name-input.is-invalid {
  border-color: rgba(198, 74, 58, 0.55);
  background: rgba(198, 74, 58, 0.04);
  box-shadow: 0 0 0 2px rgba(198, 74, 58, 0.08);
}

.cart-field-error {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #9a3b2e;
  line-height: 1.35;
}

.cart-local-guest {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.cart-local-name {
  margin: 0;
}

.cart-local-location {
  margin: 0;
}

.cart-local-location.is-invalid {
  border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(198, 74, 58, 0.12);
  padding: 8px;
  margin: -8px;
}

.cart-local-location__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-loc-group__label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cart-loc-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cart-loc-chips--barra {
  grid-template-columns: minmax(0, 1fr);
  max-width: 140px;
}

.cart-loc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 6px;
  border: 1.5px solid var(--cu-border-soft, rgba(63, 49, 28, 0.14));
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cart-loc-chip .cart-loc-chip__check {
  display: none;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.cart-loc-chip.on {
  border-color: var(--cu-yellow, #FCD000);
  background: var(--cu-yellow-softer, #FFFAE8);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(252, 208, 0, 0.35);
}

.cart-loc-chip.on .cart-loc-chip__check {
  display: inline;
}

.cart-loc-chip:focus-visible {
  outline: 2px solid var(--cu-yellow, #FCD000);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .cart-loc-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .cart-loc-chip {
    font-size: 11px;
    min-height: 38px;
    padding: 7px 4px;
  }
}

@media (max-width: 320px) {
  .cart-local-name label,
  .cart-local-location__title {
    font-size: 12px;
  }
  .cart-loc-chip {
    font-size: 10.5px;
  }
}

body.lab-mod-open,
body.lab-seat-open { overflow: hidden; }

.mod-hint {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.42;
}

.mod-chev { color: var(--ink-muted); flex-shrink: 0; display: grid; place-items: center; }

/* ── Sections ── */
.section { padding: 28px 16px 0; }

.section-title {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ink);
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}

.kicker-icon svg { width: 14px; height: 14px; }

/* ── Categories ── */
.cat-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.cat-row::-webkit-scrollbar { display: none; }

.cat-chip {
  flex: 0 0 auto;
  min-width: 88px;
  max-width: 108px;
  padding: 10px 10px 9px;
  border: 1px solid var(--cu-border-soft);
  border-radius: 16px;
  background: var(--white);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  scroll-snap-align: start;
  transition: border-color var(--motion-normal) var(--ease-premium),
              background var(--motion-normal) var(--ease-premium),
              transform var(--motion-fast) var(--ease-premium),
              box-shadow var(--motion-fast) var(--ease-premium);
}

.cat-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--cu-surface-warm);
  display: grid;
  place-items: center;
  transition: transform var(--motion-normal) var(--ease-spring),
              background var(--motion-normal) var(--ease-premium),
              box-shadow var(--motion-normal) var(--ease-premium);
  color: var(--cu-icon-primary);
  box-shadow: inset 0 0 0 1px rgba(233, 184, 18, 0.1);
}

.cat-icon svg {
  width: 30px;
  height: 30px;
  transition: transform var(--motion-normal) var(--ease-spring);
}

.cat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
}

.cat-chip::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 28px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--motion-normal) var(--ease-spring);
}

.cat-chip.on {
  border-color: var(--cu-yellow);
  background: var(--cu-yellow-soft);
  box-shadow: 0 2px 8px rgba(107, 77, 50, 0.08);
}

.cat-chip.on::after { transform: translateX(-50%) scaleX(1); }

.cat-chip.on .cat-icon {
  background: var(--cu-yellow-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(213, 169, 0, 0.16);
  border: 1px solid var(--cu-yellow);
}

.cat-chip.on .cat-icon svg { transform: scale(1.02); color: var(--cu-icon-active); }

.cat-chip.on .cat-label { color: var(--ink); font-weight: 600; }

.cat-chip:active { transform: scale(0.96); }

/* ── Cards ── */
.offer-card, .product-card {
  background: var(--cu-surface);
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-card);
  box-shadow: var(--cu-shadow-card);
  transition: transform var(--motion-fast) var(--ease-premium),
              border-color var(--motion-normal) var(--ease-premium),
              box-shadow var(--motion-fast) var(--ease-premium);
}

.offer-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

.offer-thumb, .product-thumb {
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}

.offer-thumb { width: 72px; height: 72px; }

.offer-thumb img, .product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--ease-premium);
}

.product-card:active .product-thumb img { transform: scale(1.015); }

.offer-name, .product-name {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--ink);
}

.offer-desc, .product-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 5px 0 0;
  line-height: 1.48;
  text-wrap: pretty;
}

.product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-foot, .product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.offer-price, .product-price {
  font-size: 19px;
  font-weight: 700;
  color: var(--cu-brown);
  font-variant-numeric: tabular-nums;
}

.btn-add-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--cu-yellow);
  color: var(--cu-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-add-sm .cu-svg { width: 14px; height: 14px; }

.product-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  min-height: 128px;
  max-height: 148px;
  margin-bottom: 12px;
  cursor: pointer;
}

.product-card:active {
  transform: scale(0.985);
  border-color: rgba(212, 160, 23, 0.3);
}

.product-thumb { width: 88px; align-self: stretch; }

.product-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.product-top { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }

.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--cu-danger);
  background: var(--cu-danger-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.product-badge .cu-svg { width: 12px; height: 12px; }

.product-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--cu-border);
  background: var(--cu-surface-warm);
  color: var(--cu-text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.product-meta-chip .cu-svg { width: 13px; height: 13px; }

/* ── Skeleton ── */
.skeleton-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  min-height: 128px;
}

.skeleton-block {
  background: linear-gradient(90deg, #F0EDE6 0%, #FAF8F4 50%, #F0EDE6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease infinite;
  border-radius: var(--radius-input);
}

.skeleton-block.thumb { width: 88px; flex-shrink: 0; }

.skeleton-block.line { height: 14px; margin-bottom: 8px; }

.skeleton-block.line.short { width: 60%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Qty controls ── */
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(60, 50, 38, 0.1);
  border-radius: 999px;
  background: var(--cream);
  height: 32px;
}

.qty-control button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  padding: 0;
}

.qty-control button svg { width: 18px; height: 18px; }

.qty-control span {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform var(--motion-fast) var(--ease-spring);
}

.qty-control span.bump { animation: qtyBump 280ms var(--ease-spring); }

@keyframes qtyBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.btn-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 0;
}

.btn-plus .cu-svg { width: 16px; height: 16px; }

.btn-plus.is-check {
  background: var(--open);
  border-color: var(--open);
  color: var(--white);
}

.btn-plus.is-check .cu-svg { stroke: var(--white); }
.btn-plus.press, .cat-chip.press { transform: scale(0.975); }

/* ── Bottom dock integrado (carrito + nav unificado) ── */
.bottom-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, var(--shell-w));
  z-index: 100;
  padding-bottom: var(--safe-bottom);
  background: var(--white);
  border-radius: 0;
  box-shadow: 0 -4px 18px rgba(63, 49, 28, 0.04);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.dock-cart-zone {
  max-height: 0;
  overflow: hidden;
  background: var(--cu-yellow);
  transition: max-height var(--motion-normal) var(--ease-out-premium);
}

.bottom-dock.has-cart .dock-cart-zone {
  max-height: var(--cartbar-h);
}

.cart-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--cartbar-h);
  margin: 0;
  padding: 0 14px 0 16px;
  background: var(--cu-yellow);
  border: none;
  border-radius: 14px 14px 0 0;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ink);
  text-align: left;
  transition: filter var(--motion-fast) var(--ease-premium), transform var(--motion-fast) var(--ease-premium);
}

.cart-bar.visible {
  display: flex;
}

.cart-bar.lift {
  filter: brightness(1.04);
  transform: scale(0.995);
}

.cart-bar-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  position: relative;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
}

.cart-bar-icon svg { width: 18px; height: 18px; color: var(--ink); }

.cart-bar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cart-bar-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-bar-sep {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.45;
  flex-shrink: 0;
}

.cart-bar-qty {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-bar-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cart-bar-total {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  position: relative;
  white-space: nowrap;
}

.cart-bar-total .price-inner {
  display: inline-block;
  transition: opacity var(--motion-fast) var(--ease-premium), transform var(--motion-fast) var(--ease-premium);
}

.cart-bar-total .price-inner.updating {
  opacity: 0;
  transform: translateY(6px);
}

.cart-bar-chev svg { width: 18px; height: 18px; opacity: 0.6; }

.bottom-nav {
  display: flex;
  justify-content: space-around;
  height: var(--nav-h);
  background: var(--white);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  transition: color var(--motion-normal) var(--ease-premium);
}

.nav-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  transition: transform var(--motion-normal) var(--ease-spring);
}

.nav-icon-wrap svg { width: 24px; height: 24px; color: var(--cu-icon-muted); }

.nav-dot {
  position: absolute;
  bottom: -4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cu-yellow);
  transform: scale(0);
  transition: transform var(--motion-normal) var(--ease-spring);
}

.nav-item.on { color: var(--cu-ink); font-weight: 600; }

.nav-item.on .nav-icon-wrap { transform: translateY(-2px); }

.nav-item.on .nav-dot { transform: scale(1); }

.nav-item.on svg { color: var(--cu-icon-active); }

.nav-item.garzon { margin-top: -10px; min-width: 64px; }

.nav-garzon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cu-yellow);
  border: 2px solid var(--white);
  box-shadow: 0 4px 14px rgba(63, 49, 28, 0.12);
  display: grid;
  place-items: center;
  transition: background var(--motion-normal) var(--ease-premium),
              border-color var(--motion-normal) var(--ease-premium),
              transform var(--motion-normal) var(--ease-spring),
              box-shadow var(--motion-normal) var(--ease-premium);
}

.nav-garzon-btn svg { width: 26px; height: 26px; color: var(--cu-ink); }

.garzon-ai-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cu-yellow);
  border: 1.5px solid var(--ivory);
}

.nav-item.garzon.on .nav-garzon-btn {
  background: var(--cu-yellow);
  border-color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(213, 169, 0, 0.28);
}

.nav-item.garzon.on .nav-garzon-btn svg { color: var(--cu-ink); }

.nav-item.garzon span:last-child { color: var(--ink); font-weight: 600; }

/* ── Cart screen ── */
/* Header claro — misma familia visual que el footer del carrito */
.cart-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  gap: 8px;
  background: var(--cu-surface-warm, #fffdf7);
  color: var(--cu-ink, #1a1712);
  border-bottom: 1px solid var(--cu-border-soft, rgba(63, 49, 28, 0.08));
  box-shadow: 0 2px 10px rgba(63, 49, 28, 0.04);
}

.cart-topbar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--cu-ink, #1a1712);
}

.cart-topbar .icon-btn.ghost {
  color: var(--cu-ink, #1a1712);
  background: transparent;
}

.cart-topbar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}

.icon-btn.icon-btn--touch {
  width: 44px;
  height: 44px;
}

.icon-btn.ghost { background: transparent; box-shadow: none; }

.icon-btn svg { width: 18px; height: 18px; }

.icon-btn.icon-btn--touch svg { width: 20px; height: 20px; }

.cart-body { padding-left: 16px; padding-right: 16px; }

.cart-mod-row svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--ink-soft); }

.cart-mod-row div { flex: 1; }

.cart-mod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0;
  box-shadow: none;
}

.cart-mod-row small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-muted);
}

.cart-mod-row strong { font-size: 14px; font-weight: 600; }

.cart-mod-row button {
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
}

.cart-item {
  display: flex;
  gap: 12px;
  min-height: 108px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: 11px;
  box-shadow: var(--shadow);
  animation: cartItemIn var(--motion-normal) var(--ease-premium) both;
}

.cart-item--compact {
  min-height: 0;
  gap: 0;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: none;
}

.cart-item--compact .cart-item-name {
  font-size: 15px;
  font-weight: 650;
}

.cart-item--compact .cart-item-mods {
  margin: 2px 0 6px;
}

.cart-item--compact .cart-item-foot {
  margin-top: 6px;
  gap: 10px;
}

.cart-item-price-col {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.cart-item-unit {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.cart-item--compact .line-price {
  font-size: 14px;
}

.cart-item-rm {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.qty-control--compact {
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
}

.qty-control--compact button {
  width: 30px;
  height: 30px;
}

.qty-control--compact button svg {
  width: 12px;
  height: 12px;
}

.qty-control--compact span {
  min-width: 18px;
  font-size: 12.5px;
}

.cart-item.removing {
  animation: cartItemOut var(--motion-normal) var(--ease-premium) forwards;
}

@keyframes cartItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cartItemOut {
  to { opacity: 0; transform: translateX(-12px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
}

.cart-item img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-input);
  object-fit: cover;
  align-self: center;
}

.cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.cart-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }

.cart-item-name { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }

.cart-item-mods { margin: 4px 0 8px; padding: 0; list-style: none; }

.cart-item-mods li { font-size: 12px; font-weight: 500; color: var(--ink-muted); line-height: 1.35; }

.cart-item-foot { display: flex; justify-content: space-between; align-items: center; }

.line-price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--motion-fast) var(--ease-premium), transform var(--motion-fast) var(--ease-premium);
}

.line-price.updating { opacity: 0; transform: translateY(4px); }

.btn-add-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 14px;
  margin: 4px 0 14px;
  border: 1px dashed rgba(26,24,20,0.1);
  border-radius: var(--radius-card);
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.summary-card {
  background: var(--cu-surface-warm);
  border: 1px solid var(--cu-border);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 8px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.summary-row.discount { color: var(--discount); }

.summary-row.total {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.cart-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 260px;
  max-height: 340px;
  padding: 32px 32px;
  margin: 48px auto 0;
}

.cart-empty.visible { display: flex; }

.cart-empty .empty-icon svg { width: 46px; height: 46px; color: var(--ink-muted); margin-bottom: 16px; }

.cart-empty h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }

.cart-empty p { font-size: 13px; font-weight: 500; color: var(--ink-muted); margin: 0 0 20px; }

.btn-secondary {
  border: 1px solid var(--cu-border-strong);
  background: var(--cu-surface);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--cu-text-primary);
}

.btn-tertiary {
  border: none;
  background: transparent;
  color: var(--cu-warning);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
}

.btn-danger {
  border: none;
  background: var(--cu-danger);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.cart-filled.hidden { display: none; }

/* ── Backdrop + ficha overlay ── */
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(26, 24, 20, 0.32);
  opacity: 0;
  transition: opacity 280ms var(--ease-premium);
}

.sheet-backdrop.on {
  display: block;
  opacity: 1;
}

/* ── Product sheet ── */
.overlay-product,
.product-sheet {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(100vw, var(--shell-w));
  height: 100dvh;
  max-height: 100dvh;
  z-index: 250;
  background: var(--cream);
  flex-direction: column;
  opacity: 0;
  transition: opacity 220ms var(--ease-smooth), transform 220ms var(--ease-smooth);
  pointer-events: none;
  overflow: hidden;
}

.overlay-product.on,
.product-sheet.on {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.overlay-product.closing,
.product-sheet.closing {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

.overlay-product[hidden],
.product-sheet[hidden] {
  display: none !important;
}

.sheet-full { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.sheet-scroll-area { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sheet-hero {
  position: relative;
  height: 38vh;
  min-height: 220px;
  max-height: 340px;
  background: #E8E4DC;
}

.sheet-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.sheet-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  z-index: 2;
}

.sheet-qty-wrap {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.sheet-content {
  padding: 28px 18px 110px;
  background: var(--white);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  margin-top: -12px;
  position: relative;
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-premium);
}

.overlay-product.is-ready .sheet-content,
.product-sheet.is-ready .sheet-content {
  opacity: 1;
}

.sheet-ingredients-list {
  margin: 0 0 14px;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.5;
}

.sheet-ingredients-list li { margin-bottom: 4px; }

.sheet-title { font-size: 23px; font-weight: 600; margin: 0 0 8px; line-height: 1.22; text-wrap: balance; }

.sheet-desc { font-size: 14px; font-weight: 500; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }

.sheet-price-inline { font-size: 19px; font-weight: 700; color: var(--accent); margin-bottom: 16px; }

.sheet-group { border-top: 1px solid var(--line); }

.sheet-group summary {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sheet-group summary::-webkit-details-marker { display: none; }

.sheet-group p { font-size: 13px; font-weight: 500; color: var(--ink-muted); line-height: 1.5; margin: 0 0 14px; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}

.inline-icon svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }

.toggle {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: #DDD;
  border: none;
  position: relative;
  cursor: pointer;
}

.toggle.on { background: var(--accent); }

.toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--motion-normal) var(--ease-spring);
}

.toggle.on::after { transform: translateX(18px); }

.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.menu-row .icon svg { width: 22px; height: 22px; color: var(--cu-ink); }

.menu-row div { flex: 1; }

.menu-row strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

.menu-row small { font-size: 12px; font-weight: 400; color: var(--ink-muted); line-height: 1.4; }

.toggle-row span strong { display: block; font-size: 14px; font-weight: 600; }
.toggle-row span small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }

.sheet-group summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.sheet-group-label { font-size: 14px; font-weight: 600; flex: 1; }
.sheet-group-hint { font-size: 11.5px; font-weight: 400; color: var(--ink-muted); width: 100%; }

/* Upselling ficha */
.sheet-upsell {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sheet-upsell-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sheet-upsell-head p {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-muted);
}

.sheet-upsell-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.sheet-upsell-row::-webkit-scrollbar { display: none; }

.upsell-chip {
  flex: 0 0 auto;
  width: 108px;
  padding: 12px 10px;
  border: 1px solid rgba(233, 184, 18, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  cursor: pointer;
  text-align: center;
  font-family: var(--font);
  position: relative;
  transition: transform var(--motion-fast) var(--ease-premium), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.upsell-chip:active { transform: scale(0.96); }

.upsell-chip.added {
  border-color: var(--open);
  background: linear-gradient(180deg, #F0FAF4 0%, var(--white) 100%);
}

.upsell-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: var(--cu-surface-warm);
  color: var(--cu-ink);
  overflow: hidden;
}

.upsell-icon svg { width: 22px; height: 22px; }

.upsell-icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.upsell-name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}

.upsell-price {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.upsell-add {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background var(--motion-fast);
}
.upsell-add .cu-svg { width: 12px; height: 12px; }

.upsell-chip.added .upsell-add { background: var(--open); color: var(--white); }

.upsell-post-sheet {
  /* Above .sheet-backdrop (240) and .overlay-modality default (255) */
  z-index: 260;
}

.upsell-post-backdrop {
  z-index: 250;
}

.upsell-post-panel {
  max-height: min(86dvh, 560px);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.upsell-post-head {
  padding: 4px 18px 12px;
}

.upsell-post-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.35;
}

.upsell-post-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 10px;
  display: grid;
  gap: 10px;
}

/* ── Extras picker (reutilizable) ── */
.extras-picker-grid {
  display: grid;
  gap: 10px;
}

.extras-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--cu-border);
  background: var(--cu-surface);
  box-shadow: none;
}

.extras-card.is-active {
  border-color: rgba(33, 143, 68, 0.35);
  background: rgba(33, 143, 68, 0.04);
}

.extras-card__visual {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #F3EDE3, #E5DDD1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.extras-card__photo,
.extras-card__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.extras-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(252, 208, 0, 0.18), transparent 55%),
    linear-gradient(145deg, #F3EDE3, #E5DDD1);
}

.extras-card__ph-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px dashed rgba(107, 77, 50, 0.35);
  background: rgba(255, 255, 255, 0.45);
}

.extras-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.extras-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cu-ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.extras-card__sub {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.3;
}

.extras-card__price {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cu-brown);
}

.extras-card__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border: 1px solid var(--cu-border);
  border-radius: 999px;
  background: var(--cu-surface-warm);
  overflow: hidden;
}

.extras-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cu-ink);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.extras-qty-btn:active {
  transform: none;
  background: var(--cu-yellow-soft);
}

.extras-qty-val {
  min-width: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--cu-ink);
}

.extras-summary {
  margin: 0;
  padding: 8px 18px 4px;
}

.extras-summary__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cu-brown);
}

.extras-summary__list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  color: var(--cu-text-secondary);
  line-height: 1.45;
}

.extras-summary__total {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cu-ink);
}

.extras-cta {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  font-weight: 700;
}

.extras-empty {
  margin: 8px 0;
  font-size: 13px;
  color: var(--cu-text-muted);
  text-align: center;
}

/* ── Upsell dentro del carrito (accordion) ── */
.cart-upsell {
  margin: 0;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(252, 208, 0, 0.45);
  background:
    linear-gradient(165deg, rgba(252, 208, 0, 0.22) 0%, rgba(252, 208, 0, 0.08) 42%, rgba(255, 253, 247, 0.98) 100%),
    var(--cu-surface-warm, #fffdf7);
  box-shadow: 0 4px 14px rgba(63, 49, 28, 0.07);
  overflow: hidden;
}

.cart-upsell__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  color: inherit;
}

.cart-upsell__toggle-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-upsell__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--cu-ink);
  line-height: 1.25;
}

.cart-upsell__hint {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cu-brown, #6b5344);
}

.cart-upsell__toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-upsell__badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--cu-ink, #1a1712);
  background: rgba(252, 208, 0, 0.42);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.cart-upsell__chev {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(252, 208, 0, 0.28);
  font-size: 18px;
  font-weight: 700;
  color: var(--cu-ink);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 220ms var(--ease-premium, ease);
}

.cart-upsell.is-open .cart-upsell__chev {
  transform: rotate(90deg);
}

/* Pantallas angostas: el título se mantiene en una línea junto al badge */
@media (max-width: 360px) {
  .cart-upsell__toggle { padding: 12px 12px; gap: 8px; }
  .cart-upsell__title { font-size: 13px; }
  .cart-upsell__hint { font-size: 11.5px; }
  .cart-upsell__badge { font-size: 10px; padding: 3px 7px; }
  .cart-upsell__toggle-meta { gap: 6px; }
  .cart-upsell__chev { width: 24px; height: 24px; font-size: 17px; }
}

/* Señal sutil solo la primera vez que se ve el accordion en la sesión */
.cart-upsell--nudge:not(.is-open) .cart-upsell__chev {
  animation: cu-upsell-chev-nudge 1.1s ease-out 0.4s 1 both;
}

@keyframes cu-upsell-chev-nudge {
  0% { transform: translateX(0); }
  35% { transform: translateX(3px); }
  70% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-upsell--nudge:not(.is-open) .cart-upsell__chev {
    animation: none;
  }
}

/* Forma de pago — selector compacto tipo chips horizontales */
.cart-payment {
  margin: 0;
  padding: 11px 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--cu-border-soft, rgba(63, 49, 28, 0.1));
  background: #fff;
}

.cart-payment__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cu-text-muted, #8a7f70);
}

/* 3 columnas iguales: nunca se recortan las etiquetas */
.cart-payment__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.cart-payment__chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 5px;
  border-radius: 14px;
  border: 1px solid var(--cu-border, #ebe4d8);
  background: #fff;
  font-family: var(--font);
  font-weight: 700;
  color: var(--cu-ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.cart-payment__chip.on {
  border-color: rgba(252, 208, 0, 0.95);
  background: rgba(252, 208, 0, 0.14);
  box-shadow: 0 2px 8px rgba(63, 49, 28, 0.06);
}

.cart-payment__ico {
  font-size: 21px;
  line-height: 1;
  flex-shrink: 0;
}

/* Texto siempre completo: puede envolver, nunca recortarse */
.cart-payment__name {
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Check discreto en la esquina de la tarjeta seleccionada */
.cart-payment__check {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cu-yellow, #fcd000);
  color: var(--cu-ink, #1a1712);
  font-size: 10px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
}

.cart-payment__chip.on .cart-payment__check {
  display: block;
}

/* Delivery: confirmación informativa compacta (no selector) */
.cart-payment--delivery {
  padding: 10px 12px 10px;
}

.cart-payment__options--confirm,
.cart-payment__options--single {
  display: block;
  grid-template-columns: none;
}

.cart-payment__confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(63, 49, 28, 0.08);
  background: var(--cu-surface-warm, #fffdf7);
  box-shadow: 0 1px 2px rgba(63, 49, 28, 0.03);
  pointer-events: none;
  user-select: none;
}

.cart-payment__confirm-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(252, 208, 0, 0.55);
  color: var(--cu-ink, #1a1712);
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.cart-payment__confirm-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cart-payment__confirm-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cu-ink, #1a1712);
}

.cart-payment__confirm-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cu-text-muted, #8a7f70);
}

/* 360 px y menos: baja el tipo lo justo, la etiqueta sigue completa */
@media (max-width: 374px) {
  .cart-payment__chip { padding: 9px 3px; gap: 4px; }
  .cart-payment__name { font-size: 11.5px; }
  .cart-payment__ico { font-size: 20px; }
  .cart-payment__confirm { padding: 9px 11px; }
  .cart-payment__confirm-title { font-size: 13.5px; }
  .cart-payment__confirm-sub { font-size: 11.5px; }
}

@media (max-width: 344px) {
  .cart-payment { padding-left: 10px; padding-right: 10px; }
  .cart-payment__options { gap: 6px; }
  .cart-payment__chip { min-height: 62px; padding: 8px 2px; }
  .cart-payment__name { font-size: 11px; }
}

/* ── Detalle del pedido (maqueta) ── */
.cart-detail-card {
  background: #fff;
  border: 1px solid var(--cu-border, #ebe4d8);
  border-radius: 18px;
  padding: 12px 12px 10px;
  margin: 0;
}

.cart-detail-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.cart-detail-card__icon {
  font-size: 16px;
}

.cart-detail-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--cu-ink);
}

.cart-detail-list {
  display: grid;
  gap: 0;
}

.cart-detail-charges {
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

/* display:grid ganaba a [hidden]: dejaba una línea punteada y alto muerto */
.cart-detail-charges[hidden] {
  display: none !important;
}

.cart-charge-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
}

.cart-charge-line__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cart-charge-line__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cu-ink);
}

.cart-charge-line__meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--cu-text-muted);
}

.cart-charge-line__total {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  animation: cartItemIn var(--motion-normal) var(--ease-premium) both;
}

.cart-line:first-child {
  border-top: none;
}

.cart-line__thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #eee7db;
  flex-shrink: 0;
}

.cart-line__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-line__thumb.product-thumb--empty {
  background:
    linear-gradient(135deg, rgba(252, 208, 0, 0.18), transparent 55%),
    #eee7db;
}

.cart-line__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cart-line__name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cu-ink);
}

.cart-line__week {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cu-text-muted);
}

/* Burger 4PM — jerarquía limpia */
.burger4pm-card__body {
  display: grid;
  gap: 4px;
}

.burger4pm-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cu-ink);
  line-height: 1.2;
}

.burger4pm-card__weekly-name {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--cu-ink);
  line-height: 1.15;
  word-break: break-word;
}

.burger4pm-card__weekly-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cu-text-muted);
}

.burger4pm-card__includes {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cu-ink-soft, #4a4338);
}

.burger4pm-card__price {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cu-ink);
}

.burger4pm-card__days,
.burger4pm-card__hours {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cu-text-muted);
}

.burger4pm-card__hours {
  margin-top: 2px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.burger4pm-card__foot {
  margin-top: 10px;
}

.burger4pm-card__cta {
  width: 100%;
  justify-content: center;
}

.burger4pm-card__state {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
}

.burger4pm-card__state-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--cu-ink);
  white-space: normal;
}

.burger4pm-card__state-sub,
.burger4pm-card__state-time,
.burger4pm-card__state-line,
.burger4pm-card__state-kicker {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cu-text-muted);
}

.burger4pm-card__state-kicker {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}

.burger4pm-card__state--after .burger4pm-card__state-title {
  font-size: 12.5px;
}

.burger4pm-card.is-locked .burger4pm-card__price {
  opacity: 0.85;
}

/* Modal instalación PWA — NO barra inferior negra */
.cu-pwa-install {
  display: none !important;
}

.cu-pwa-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.cu-pwa-modal[hidden] {
  display: none !important;
}

.cu-pwa-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cu-pwa-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 8, 0.42);
}

.cu-pwa-modal__sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  margin: 0 auto;
  padding: 22px 20px 18px;
  border-radius: 20px 20px 16px 16px;
  background: #fff9ef;
  color: #1a1712;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(18px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cu-pwa-modal.is-visible .cu-pwa-modal__sheet {
  transform: translateY(0);
}

.cu-pwa-modal__title {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.cu-pwa-modal__desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #5a5044;
}

.cu-pwa-modal__steps {
  margin: 14px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.55;
  color: #3f372c;
}

.cu-pwa-modal__steps li + li {
  margin-top: 6px;
}

.cu-pwa-modal__actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.cu-pwa-modal__primary {
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  background: #fcd000;
  color: #1a1712;
  cursor: pointer;
}

.cu-pwa-modal__primary:disabled {
  opacity: 0.65;
  cursor: wait;
}

.cu-pwa-modal__secondary {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: #6b6156;
  cursor: pointer;
}

body.cu-pwa-modal-open {
  overflow: hidden;
}

.cart-line__unit {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cu-text-secondary);
}

.cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.cart-line__total {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cu-ink);
  white-space: nowrap;
}

/* Acción secundaria compacta, después del total */
.cart-detail-card .btn-add-more {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px dashed rgba(63, 49, 28, 0.22);
  color: var(--cu-brown, #6b5344);
  justify-content: center;
  gap: 6px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
}

.btn-clear-cart {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--cu-text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Upsell — tarjetas de selección (sin − qty +) */
.extras-picker-grid--add,
.cart-upsell__grid.extras-picker-grid--add {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
}

.upsell-pick {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(63, 49, 28, 0.08);
  background: #fff;
  box-shadow: 0 1px 3px rgba(63, 49, 28, 0.04);
}

.upsell-pick.is-added {
  border-color: rgba(252, 208, 0, 0.45);
  background: rgba(255, 253, 247, 0.98);
}

.upsell-pick__visual {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: #eee7db;
  flex-shrink: 0;
}

.upsell-pick__visual .extras-card__photo,
.upsell-pick__visual .extras-card__photo img,
.upsell-pick__visual .extras-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.upsell-pick__visual .extras-card__placeholder {
  background:
    linear-gradient(135deg, rgba(252, 208, 0, 0.2), transparent 55%),
    #eee7db;
}

.upsell-pick__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.upsell-pick__name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--cu-ink, #1a1712);
}

.upsell-pick__desc {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cu-text-muted, #8a7f70);
}

.upsell-pick__price {
  font-size: 13px;
  font-weight: 800;
  color: var(--cu-brown, #6b5344);
  font-variant-numeric: tabular-nums;
}

.upsell-pick__btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: var(--cu-yellow, #fcd000);
  color: var(--cu-ink, #1a1712);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(63, 49, 28, 0.08);
}

.upsell-pick__btn:active {
  transform: scale(0.97);
}

.upsell-pick__status {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(252, 208, 0, 0.22);
  color: var(--cu-ink, #1a1712);
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 360px) {
  .upsell-pick {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }
  .upsell-pick__visual { width: 48px; height: 48px; border-radius: 11px; }
  .upsell-pick__name { font-size: 13px; }
  .upsell-pick__desc { font-size: 11.5px; }
  .upsell-pick__btn,
  .upsell-pick__status {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .upsell-pick {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .upsell-pick__btn,
  .upsell-pick__status {
    grid-column: 2;
    justify-self: start;
  }
}

/* Upsell compact rows (legacy qty mode — otros usos) */
.extras-picker-grid--compact {
  display: grid;
  gap: 0;
}

.extras-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.extras-row:first-child {
  border-top: none;
}

.extras-row__visual {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
}

.extras-row__visual .extras-card__photo,
.extras-row__visual .extras-card__photo img,
.extras-row__visual .extras-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.extras-row__body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.extras-row__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cu-ink);
}

.extras-row__price {
  font-size: 12px;
  font-weight: 700;
  color: var(--cu-brown);
}

.extras-row__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(60, 50, 38, 0.12);
  border-radius: 10px;
  background: #fff;
  height: 30px;
}

.extras-row__qty .extras-qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.extras-row__qty .extras-qty-val {
  min-width: 18px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
}

/* Total del pedido dentro del Detalle (única sección de cobro) */
.cart-detail-total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cu-border-soft, rgba(63, 49, 28, 0.1));
  display: grid;
  gap: 6px;
}

.cart-detail-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.cart-detail-total__row[hidden] {
  display: none !important;
}

.cart-detail-total__row--discount {
  font-size: 13px;
  font-weight: 600;
  color: var(--discount, #2e7d32);
}

.cart-detail-total__label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cu-ink);
}

.cart-detail-total__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--cu-ink);
  font-variant-numeric: tabular-nums;
}

.summary-grand-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--cu-ink);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cart-confirm .confirm-label {
  color: #121212;
  font-weight: 800;
}

.cart-upsell__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 280ms var(--ease-premium, ease), opacity 220ms ease;
}

/* Cerrado del todo: sin residuo de alto (el JS quita [hidden] antes de abrir) */
.cart-upsell__panel[hidden] {
  display: none !important;
}

.cart-upsell__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.cart-upsell__panel > * {
  overflow: hidden;
  min-height: 0;
}

.cart-upsell__grid {
  gap: 8px;
  padding: 0 10px 12px;
}

.cart-upsell .extras-card {
  box-shadow: none;
  background: var(--cu-surface);
}

.summary-card--finance {
  padding: 14px 14px 12px;
}

.summary-card--finance .summary-row.total {
  /* Total vive en footer sticky — aquí queda discreto */
  font-size: 15px;
  margin-top: 8px;
  padding-top: 10px;
}

/* Resumen de cobro detallado (legacy helpers) */
.summary-section-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cu-brown);
}

.summary-lines {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.summary-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.summary-line-label {
  min-width: 0;
  color: var(--cu-ink);
  font-weight: 500;
}

.summary-line-price {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--cu-ink);
}

.summary-extras-block {
  margin-top: 4px;
}

.summary-divider {
  height: 1px;
  background: var(--cu-border);
  margin: 8px 0 10px;
}

.summary-empty {
  margin: 0;
  font-size: 13px;
  color: var(--cu-text-muted);
}

.summary-modality {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cu-text-secondary);
}

.upsell-post-row {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 18px 8px;
}

.upsell-post-foot {
  padding: 10px 18px 0;
  border-top: 1px solid var(--line);
}

.upsell-post-foot .btn-secondary,
.upsell-post-foot .btn-primary,
.upsell-post-foot .extras-cta {
  width: 100%;
  min-height: 52px;
}

body.lab-upsell-open {
  overflow: hidden;
}

.sheet-upsell[hidden] { display: none !important; }

.sheet-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px calc(12px + var(--safe-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  z-index: 260;
}

.sheet-footer .price { font-size: 20px; font-weight: 700; color: var(--accent); min-width: 88px; }

.btn-primary {
  flex: 1;
  border: none;
  background: var(--cu-yellow);
  color: var(--cu-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  height: 52px;
  box-shadow: 0 3px 10px rgba(107, 77, 50, 0.14);
}

.btn-primary:hover:not(:disabled),
.cart-confirm:hover:not(:disabled) {
  background: var(--cu-yellow-hover);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  background: var(--cu-surface-muted);
  color: var(--cu-text-muted);
  border-color: var(--cu-border);
  cursor: not-allowed;
}

.btn-primary:active:not(:disabled),
.cart-confirm:active:not(:disabled),
.btn-add-sm:active:not(:disabled) {
  background: var(--cu-yellow-pressed);
}

/* ── Garzón — estilo Gemini premium ── */
.overlay-garzon {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(47, 43, 38, 0.22);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-premium);
}

.overlay-garzon.on {
  display: block;
  opacity: 1;
}

.overlay-garzon[hidden] {
  display: none !important;
}

.sheet-garzon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  bottom: 0;
  width: min(100%, var(--shell-w));
  max-height: 88dvh;
  background: var(--white);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 40px rgba(63, 49, 28, 0.1);
  transition: transform 320ms var(--ease-premium);
}

.overlay-garzon.on .sheet-garzon,
.sheet-garzon.garzon-enter {
  transform: translateX(-50%) translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(60, 50, 38, 0.1);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.garzon-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 100%);
}

.garzon-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.garzon-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--warm-cream);
  border: 2px solid rgba(233, 184, 18, 0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.garzon-avatar-hamburguesito {
  background: linear-gradient(145deg, #FFF8E8 0%, #FFEAA0 100%);
  border: 2px solid rgba(233, 184, 18, 0.4);
}

.garzon-avatar-hamburguesito svg { width: 48px; height: 48px; }

.garzon-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--open);
  border: 2px solid var(--white);
}

.garzon-meta { flex: 1; min-width: 0; }

.garzon-meta h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.garzon-sub {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.3;
}

.garzon-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--open);
}

.garzon-online .online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--open);
}

.garzon-close {
  margin-left: auto;
  background: rgba(247, 245, 240, 0.9) !important;
  box-shadow: none !important;
}

.garzon-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  max-height: 42dvh;
  background: var(--cream);
}

.bubble {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  animation: bubbleIn 240ms var(--ease-premium) both;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.bubble.ai {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow);
}

.bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #FFF8E8 0%, #F3DFA4 100%);
  border: 1px solid rgba(233, 184, 18, 0.22);
  color: var(--ink);
  border-bottom-right-radius: 6px;
}

.garzon-chips {
  display: flex;
  gap: 8px;
  padding: 10px 18px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--white);
  border-top: 1px solid var(--line);
}

.garzon-chips::-webkit-scrollbar { display: none; }

.garzon-chips button {
  flex: 0 0 auto;
  border: 1px solid rgba(233, 184, 18, 0.28);
  background: var(--ivory);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--motion-fast) var(--ease-premium), transform var(--motion-fast) var(--ease-premium);
}

.garzon-chips button:active {
  transform: scale(0.97);
  background: var(--warm-cream);
}

.garzon-input {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
}

.garzon-input input {
  flex: 1;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 0 18px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  background: var(--cream);
  transition: border-color var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-premium);
}

.garzon-input input:focus {
  border-color: rgba(233, 184, 18, 0.45);
  box-shadow: 0 0 0 3px rgba(233, 184, 18, 0.1);
  background: var(--white);
}

.btn-send {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--cart-yellow-top) 0%, var(--cart-yellow-deep) 100%);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(233, 184, 18, 0.28);
  transition: transform var(--motion-fast) var(--ease-premium);
}

.btn-send:active { transform: scale(0.94); }

.btn-send svg { width: 18px; height: 18px; }

/* ── Mi Club ── */
.club-header {
  background: linear-gradient(152deg, #FFF9EC 0%, #FFE082 38%, #F5C842 100%);
  color: var(--ink);
  padding: 22px 18px 36px;
  border-radius: 0 0 24px 24px;
  min-height: 210px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.club-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.35) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.2) 0%, transparent 40%);
  opacity: 0.08;
  pointer-events: none;
}

.club-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none'%3E%3Cpath d='M0 60c20-15 40-15 60 0s40 15 60 0' stroke='%232F2B26' stroke-opacity='0.06'/%3E%3Ccircle cx='90' cy='30' r='3' fill='%232F2B26' fill-opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
}

.club-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.club-header h1 {
  font-size: 23px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.club-link {
  border: none;
  background: rgba(255,255,255,0.45);
  color: var(--accent-deep);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.club-greeting {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}

.club-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.club-level { color: var(--accent-deep); }

.club-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(47, 43, 38, 0.25); }

.club-points-header { font-variant-numeric: tabular-nums; color: var(--ink); }

.club-body { padding: 0 16px 24px; margin-top: -36px; position: relative; z-index: 2; }

.membership-card {
  perspective: 800px;
  margin-bottom: 24px;
  animation: clubCardIn var(--motion-slow) var(--ease-premium) both;
}

@keyframes clubCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(-8px); }
}

.membership-card-inner {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF8 45%, #FFF4D6 100%);
  border: 1.5px solid rgba(233, 184, 18, 0.35);
  border-radius: 18px;
  padding: 22px 20px;
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(233, 184, 18, 0.12), 0 2px 8px rgba(63, 49, 28, 0.04);
  overflow: hidden;
  transition: transform var(--motion-normal) var(--ease-premium);
}

.membership-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.45) 48%, transparent 100%);
  transform: skewX(-12deg);
  animation: cardShine 1.2s var(--ease-premium) 400ms both;
}

@keyframes cardShine {
  from { left: -60%; opacity: 0; }
  to { left: 120%; opacity: 1; }
}

.membership-seal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  color: var(--accent-deep);
  opacity: 0.85;
}

.membership-card:hover .membership-card-inner {
  transform: translateY(-2px);
}

.membership-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent-deep);
  margin-bottom: 12px;
}

.membership-name { font-size: 22px; font-weight: 600; margin-bottom: 8px; }

.membership-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ink-soft);
}

.membership-footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.membership-accent {
  position: absolute;
  bottom: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 184, 18, 0.18) 0%, transparent 70%);
}

.club-section { margin-bottom: 24px; animation: clubSectionIn var(--motion-slow) var(--ease-premium) both; }

.club-section:nth-child(2) { animation-delay: 80ms; }
.club-section:nth-child(3) { animation-delay: 120ms; }
.club-section:nth-child(4) { animation-delay: 160ms; }
.club-section:nth-child(5) { animation-delay: 200ms; }

@keyframes clubSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.club-section-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.club-progress-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.45; }

/* Recorrido interactivo Mi Club */
.club-journey {
  padding: 8px 4px 4px;
}

.club-journey-track {
  position: relative;
  height: 36px;
  margin-bottom: 16px;
}

.club-journey-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 999px;
  background: rgba(243, 223, 164, 0.55);
  box-shadow: inset 0 1px 2px rgba(63, 49, 28, 0.06);
}

.club-journey-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFD84D 0%, #E9B812 55%, #F5C842 100%);
  transition: width 1s var(--ease-premium);
  box-shadow: 0 0 12px rgba(233, 184, 18, 0.35);
}

.club-journey-runner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  box-shadow: 0 4px 12px rgba(233, 184, 18, 0.35);
  display: grid;
  place-items: center;
  transition: left 1s var(--ease-premium);
  z-index: 2;
}

.club-journey-runner svg { width: 18px; height: 18px; }

.club-journey.animate .club-journey-runner {
  animation: journeyBounce 1s var(--ease-premium) 350ms;
}

@keyframes journeyBounce {
  0%, 100% { transform: translateY(-50%); }
  40% { transform: translateY(-58%); }
  70% { transform: translateY(-48%); }
}

.club-journey-milestones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.journey-milestone {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.journey-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(113, 107, 99, 0.25);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(60, 50, 38, 0.08);
}

.journey-milestone.done .journey-dot { background: var(--open); box-shadow: 0 0 0 2px rgba(39, 137, 82, 0.2); }
.journey-milestone.next .journey-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(233, 184, 18, 0.25); animation: pulseDot 1.4s ease infinite; }

@keyframes pulseDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.journey-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.25;
  max-width: 72px;
}

.journey-milestone.next .journey-label { color: var(--ink); font-weight: 600; }

.journey-pts {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.benefit-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.benefit-card.benefit-available {
  background: linear-gradient(135deg, var(--ivory) 0%, #FFFBF0 100%);
  border-color: rgba(233, 184, 18, 0.32);
  padding: 16px;
  gap: 14px;
}

.benefit-body { flex: 1; min-width: 0; }

.benefit-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
}

.benefit-body small { font-size: 12px; font-weight: 400; color: var(--ink-muted); line-height: 1.35; }

.benefit-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(63, 49, 28, 0.06);
}

.benefit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.btn-redeem.loading { opacity: 0.7; pointer-events: none; }

.btn-redeem.done { background: var(--open); color: var(--white); box-shadow: none; }

.btn-redeem {
  border: none;
  background: linear-gradient(145deg, var(--cart-yellow-top) 0%, var(--cart-yellow-deep) 100%);
  color: var(--ink);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  min-width: 76px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(233, 184, 18, 0.2);
  transition: transform var(--motion-fast) var(--ease-premium);
}

.btn-redeem:active { transform: scale(0.97); }

.benefits-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

.timeline-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-height: 88px;
}

.timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  padding-top: 18px;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px rgba(233, 184, 18, 0.2);
  flex-shrink: 0;
}

.timeline-card.ready .timeline-dot { background: var(--open); box-shadow: 0 0 0 2px rgba(39, 137, 82, 0.2); }
.timeline-card.locked .timeline-dot { background: rgba(113, 107, 99, 0.3); box-shadow: none; }

.timeline-line-seg {
  flex: 1;
  width: 2px;
  min-height: 24px;
  background: linear-gradient(180deg, rgba(233, 184, 18, 0.35) 0%, rgba(243, 223, 164, 0.5) 100%);
  margin: 4px 0;
}

.timeline-body {
  flex: 1;
  min-width: 0;
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 10px;
  align-items: start;
}

.timeline-card.locked .timeline-body {
  background: linear-gradient(135deg, var(--white) 0%, var(--cream) 100%);
}

.timeline-icon {
  grid-row: 1 / 4;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(233, 184, 18, 0.12);
  display: grid;
  place-items: center;
  align-self: center;
}

.timeline-icon svg { width: 22px; height: 22px; color: var(--accent-deep); }

.timeline-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  word-wrap: break-word;
}

.timeline-pts {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.timeline-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.35;
}

.timeline-card.ready .timeline-status { color: var(--open); font-weight: 600; }

.club-history {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.history-row:last-child { border-bottom: none; }

.history-row.latest { background: linear-gradient(90deg, rgba(255, 216, 77, 0.08) 0%, transparent 100%); }

.history-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(247, 245, 240, 0.9);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.history-icon svg { width: 16px; height: 16px; color: var(--accent-deep); }

.history-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.history-date {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-muted);
}

.history-row .pts {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}

.history-row .pts.earn { color: var(--open); }

.history-row .pts.redeem { color: var(--ink-muted); }

/* ── Boot splash (logo transparente, sin caja) ── */
.cu-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--cu-page, #FFF9EF);
  transition: opacity 240ms ease, visibility 240ms ease;
}

.cu-boot-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cu-boot-splash__logo {
  position: relative;
  z-index: 1;
  width: min(62vw, 260px);
  height: auto;
  display: block;
  object-fit: contain;
  animation: splashLogoIn 640ms var(--ease-premium, ease) both;
}

.cu-boot-splash__msg {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cu-text-muted, #8D857B);
  animation: splashMsgIn 720ms ease 120ms both;
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes splashMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cu-boot-splash__logo,
  .cu-boot-splash__msg { animation: none; }
}

.cu-inline-loader {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--cu-surface, #fff);
  border: 1px solid var(--cu-border, #E9E0D3);
}

.cu-inline-loader__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.cu-inline-loader__msg {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--cu-text-muted, #8D857B);
}

/* ── Product image placeholders ── */
.product-thumb,
.cart-item-thumb,
.offer-thumb {
  background: linear-gradient(135deg, #F3EDE3 0%, #E8E0D4 100%);
}

.product-thumb img,
.cart-item-thumb img,
.offer-thumb img {
  background: transparent;
}

/* ── Loader ── */
.lab-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
  background: rgba(250, 248, 244, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-premium);
}

.lab-loader.on {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

.lab-loader[hidden] {
  display: none !important;
}

.burger-loader {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
}
.burger-loader-icon .cu-svg { width: 30px; height: 30px; }
.lab-loader.on .burger-loader-icon .cu-svg {
  animation: iconPop 520ms var(--ease-premium) infinite alternate;
}

/* ── Dock pulse (add to cart) ── */
.bottom-dock.dock-pulse {
  transform: translateY(-2px);
  transition: transform 140ms var(--ease-smooth);
}

/* Checkout */
.cart-confirm.processing { pointer-events: none; }
.cart-confirm.processing .confirm-label { opacity: 0; }
.cart-confirm.processing .confirm-burger-loader { display: grid !important; }
.cart-confirm.success { background: var(--open); color: var(--white); }
.cart-confirm.success .confirm-label { opacity: 0; }
.cart-confirm.success .confirm-check { display: grid !important; }

.confirm-burger-loader,
.confirm-check {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}
.confirm-loader-icon .cu-svg { width: 18px; height: 18px; }
.cart-confirm.processing .confirm-loader-icon .cu-svg {
  animation: spinSoft 900ms linear infinite;
}
.cart-bar-qty.fade { opacity: 0.4; transition: opacity var(--motion-fast); }

.cart-confirm .confirm-label {
  transition: opacity var(--motion-fast);
}

@keyframes spinSoft {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes iconPop {
  from { transform: scale(0.96); opacity: 0.85; }
  to { transform: scale(1.04); opacity: 1; }
}

.cart-confirm { position: relative; }

.order-confirm-wrap {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  padding-top: 24px;
}

.order-confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #E8F8EE 0%, #D4F0DE 100%);
  display: grid;
  place-items: center;
  color: var(--open);
}

.order-confirm-icon .cu-svg { width: 32px; height: 32px; }

.order-confirm-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.order-confirm-id {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.order-confirm-meta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.order-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ink-soft);
  padding: 6px 0;
}

.order-meta-row.total {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 600;
  color: var(--ink);
}

.order-meta-row.total strong {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.screen-order-confirm .btn-primary,
.screen-order-confirm .btn-secondary {
  width: 100%;
  margin-bottom: 10px;
}

/* Toast */
.lab-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + var(--safe-bottom) + 16px);
  transform: translateX(-50%) translateY(12px);
  z-index: 250;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 550;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out-premium), transform var(--motion-fast) var(--ease-out-premium);
}

.lab-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Sheet accordion */
.sheet-group summary { transition: color var(--motion-fast); }
.sheet-group[open] summary [data-icon] .cu-svg { transform: rotate(90deg); display: inline-block; }
.sheet-group summary [data-icon] .cu-svg { transition: transform 200ms var(--ease-smooth); }
.sheet-ingredients-list { animation: contentFade 240ms var(--ease-out-premium); }
@keyframes contentFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.toggle.on + .toggle-hint,
.toggle-row .toggle.on ~ span .toggle-hint { display: block; }

/* Garzón typing */
.bubble.typing span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: typingDot 1s infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ── Placeholder ── */
.placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-muted);
}

.placeholder-screen h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

.orders-shell {
  padding: 18px 16px 120px;
}
.orders-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.orders-header p {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--ink-muted);
}
.order-track-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 14px;
}
.order-track-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.order-track-id {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.order-track-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.order-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.order-step.current {
  border-color: var(--cu-warning);
  background: var(--cu-warning-soft);
}
.order-step.done {
  border-color: rgba(63, 138, 86, 0.35);
  background: var(--cu-success-soft);
}
.order-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--cu-yellow-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.order-step-icon .cu-svg { width: 21px; height: 21px; color: var(--cu-ink); }
.order-step-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.order-step-main strong {
  font-size: 13px;
  color: var(--ink);
}
.order-step-main small {
  font-size: 11px;
  color: var(--ink-muted);
}
.order-step-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--cu-surface-muted);
}
.orders-history-wrap {
  margin-top: 14px;
}
.orders-history-wrap h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
.orders-history {
  display: grid;
  gap: 8px;
}
.order-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
}
.order-history-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--cu-surface-warm);
  display: grid;
  place-items: center;
}

.order-history-icon .cu-svg { width: 21px; height: 21px; color: var(--cu-ink); }
.order-history-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.order-history-main strong {
  font-size: 13px;
  color: var(--ink);
}
.order-history-main small {
  font-size: 11px;
  color: var(--ink-muted);
}
.order-history-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.empty-state.compact {
  min-height: auto;
  border: 1px dashed var(--cu-border-strong);
  border-radius: 12px;
  padding: 16px;
  background: var(--cu-surface-warm);
}

/* ── Iconos outline ── */
[data-icon] {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  line-height: 1;
}

.cu-svg {
  display: block;
  flex-shrink: 0;
}

[data-icon] .cu-icon,
[data-icon] .cu-svg {
  color: var(--ink-soft);
}

.nav-icon-wrap [data-icon] {
  width: 24px;
  height: 24px;
}

.nav-item.on [data-icon] .cu-svg {
  color: var(--cu-icon-active);
}

.cat-icon [data-icon] {
  width: 30px;
  height: 30px;
}

.cat-chip.on .cat-icon .cu-svg {
  color: var(--cu-icon-active);
}

.mod-icon [data-icon] .cu-svg {
  color: var(--cu-icon-primary);
}

.cart-bar-icon [data-icon] .cu-svg {
  color: var(--ink);
}

.nav-garzon-btn .cu-svg {
  color: var(--cu-ink);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
  }
  .screen { transform: none !important; animation: none !important; }
  .overlay-product, .product-sheet { transform: translateX(-50%) !important; }
  .overlay-product:not(.on), .product-sheet:not(.on) { display: none !important; }
  .overlay-product.on, .product-sheet.on { display: flex !important; opacity: 1; }
  .sheet-garzon { transform: translateX(-50%) !important; opacity: 1 !important; }
  .membership-card:hover .membership-card-inner { transform: none !important; }
  .burger-layer { opacity: 1; transform: none; }
  .burger-dot { animation: none; }
}

@media (min-width: 768px) {
  .app-shell { margin: 12px 0; min-height: calc(100dvh - 24px); border-radius: var(--radius-card); overflow-x: clip; }
}

@media (max-width: 359px) {
  .lab-brand { font-size: 27.5px; }
  .section-title { font-size: 26px; }
}

/* ── Ubicación premium (variante lab) ── */
.mod-sheet-sub {
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.premium-mod-opt {
  min-height: 96px;
  padding: 16px 18px;
  border-radius: 16px;
  border-width: 1.5px;
  gap: 14px;
}

.premium-mod-opt.on {
  border-color: var(--accent-deep);
  background: rgba(255, 216, 77, 0.12);
  box-shadow: 0 0 0 1px rgba(233, 184, 18, 0.15);
}

.premium-mod-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 216, 77, 0.14);
}

.modality-opt-cost {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  margin-top: 4px;
}

.modality-opt-radio {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 180ms, background 180ms;
}

.premium-mod-opt.on .modality-opt-radio {
  border-color: var(--accent-deep);
  background: var(--accent);
}

.premium-mod-opt .modality-opt-check {
  opacity: 0;
  color: #fff;
  width: 14px;
  height: 14px;
}

.premium-mod-opt.on .modality-opt-check { opacity: 1; }

.premium-zone-row .loc-zone-card {
  min-width: 76px;
  min-height: 52px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
}

.premium-zone-row .loc-zone-card.on {
  background: rgba(255, 216, 77, 0.22);
  border-color: var(--accent-deep);
}

.loc-area-heading {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.loc-area-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

.premium-pick-grid.is-table-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-bottom: 4px;
}

.premium-pick-grid.is-bar-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.premium-pick-card {
  flex: 0 0 auto;
  min-height: 96px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(60, 50, 38, 0.1);
  position: relative;
}

.is-bar-row .premium-pick-card { flex: 0 0 88px; width: 88px; }

.premium-pick-card.status-selected {
  background: linear-gradient(180deg, #ffd84d 0%, #e9b812 100%);
  border-color: #c99a0a;
  color: #fff;
}

.premium-pick-card.status-selected .loc-pick-short,
.premium-pick-card.status-selected .loc-pick-sub,
.premium-pick-card.status-selected .loc-pick-icon { color: #fff; }

.premium-pick-card.status-disabled {
  opacity: 0.45;
  border-style: dashed;
}

.loc-pick-icon {
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  margin-bottom: 4px;
}

.loc-pick-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
}

.loc-pick-badge.status-available { color: var(--open); }
.loc-pick-badge.status-occupied { color: #c44; }
.loc-pick-badge.status-reserved { color: #3a7bd5; }
.loc-pick-badge.status-tab_open { color: #c99a0a; }

.loc-pick-selected-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  color: var(--accent-deep);
}

.premium-seating-confirm {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--cream);
  flex-shrink: 0;
}

.seating-confirm-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}

.seating-picker-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.loc-ref-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.loc-ref-opt { font-weight: 400; color: var(--ink-muted); }

.loc-ref-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--white);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
}

.loc-summary-step {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.loc-summary-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.loc-summary-hero {
  text-align: center;
  margin-bottom: 24px;
}

.loc-summary-icon-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255, 216, 77, 0.16);
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  position: relative;
}

.loc-summary-main {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.loc-summary-zone {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-muted);
}

.loc-summary-details {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

.loc-summary-details div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.loc-summary-details div:last-child { border-bottom: none; }

.loc-summary-details dt {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}

.loc-summary-details dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.loc-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.summary-row .shipping-free {
  color: var(--open);
  font-weight: 600;
}

/* Panel admin ubicaciones */
body.admin-loc-open .app-shell { display: none; }

.admin-loc-panel {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100dvh;
  background: #f4f2ed;
  color: var(--ink);
  font-family: var(--font);
}

.admin-loc-panel[hidden] { display: none !important; }

.admin-loc-sidebar {
  background: #2f2b26;
  color: #f7f5f0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-loc-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-loc-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-tab {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(247, 245, 240, 0.75);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
}

.admin-tab.on {
  background: rgba(255, 216, 77, 0.18);
  color: #ffd84d;
  font-weight: 600;
}

.admin-loc-close {
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: transparent;
  color: #f7f5f0;
  font-family: var(--font);
  cursor: pointer;
}

.admin-loc-main {
  padding: 24px 28px;
  overflow-y: auto;
}

.admin-loc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-loc-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.admin-tab-panel h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.admin-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.admin-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.admin-stepper button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font);
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
}

.admin-mode-toggle,
.admin-daynight {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-mode-toggle button,
.admin-mode-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
}

.admin-mode-toggle button.on,
.admin-mode-chip.on {
  border-color: var(--accent-deep);
  background: rgba(255, 216, 77, 0.18);
  font-weight: 600;
}

.admin-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}

.admin-schedule input {
  margin-left: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font);
}

.admin-status-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.admin-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.admin-status-row select {
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font);
}

.admin-save-toast {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(39, 137, 82, 0.12);
  color: var(--open);
  font-size: 13px;
  font-weight: 600;
}

.admin-preview-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #e8e4dc;
  max-width: 460px;
}

.admin-preview-frame {
  width: 100%;
  height: 720px;
  border: none;
  display: block;
}

@media (max-width: 900px) {
  .admin-loc-panel { grid-template-columns: 1fr; }
  .admin-loc-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-loc-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .admin-loc-close { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay-modality,
  .overlay-seating { transition: opacity 120ms ease; transform: translateX(-50%) !important; }
}

/* Resumen aislado + focus premium ubicación */
#seatingPickerStep[hidden],
#seatingSummaryStep[hidden] {
  display: none !important;
}

.overlay-seating.is-summary-step #seatingPickerStep {
  display: none !important;
}

#seatingSummaryStep:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.loc-zone-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.premium-location button:focus-visible,
.premium-location [role="tab"]:focus-visible,
.premium-location .loc-pick-chip:focus-visible,
.premium-location .loc-ref-input:focus-visible,
.premium-location .btn-outline:focus-visible,
.premium-location .btn-primary:focus-visible,
.admin-loc-panel button:focus-visible,
.admin-loc-panel input:focus-visible,
.admin-loc-panel select:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

/* ── V3 producción: thumbs emoji + Club invitado compacto + mod sheets ── */
.thumb-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  font-size: 26px;
  line-height: 1;
}
.offer-thumb.thumb-emoji { width: 72px; height: 72px; font-size: 22px; }
.product-thumb.thumb-emoji { width: 88px; min-height: 88px; }
.cart-item-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--radius-input); overflow: hidden; align-self: center; }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb.thumb-emoji { font-size: 22px; }
.sheet-hero-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: var(--ivory);
  z-index: 0;
}
.club-header--guest {
  min-height: auto;
  padding: 18px 18px 14px;
  border-radius: 0 0 20px 20px;
}
.club-guest-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
  position: relative;
  z-index: 1;
}
.club-guest-body { padding-top: 12px; }
.club-guest-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.club-guest-benefits li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.club-guest-benefits li:last-child { border-bottom: none; }
.club-guest-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 0 18px 18px;
}
.screen-club.is-guest .club-header--member { display: none; }
.product-mod-backdrop {
  z-index: 258;
  position: fixed;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--shell-w));
}
.product-mod-overlay { z-index: 260; }
.product-mod-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.product-mod-head .mod-sheet-title { margin: 0; font-size: 18px; flex: 1; text-align: center; }
.product-mod-body { max-height: 50vh; overflow-y: auto; padding: 0 4px 8px; }
.mod-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
}
.mod-option input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.mod-option span { flex: 1; font-size: 14px; font-weight: 500; }
.mod-option em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent-deep); }
.mod-empty { font-size: 14px; color: var(--ink-muted); text-align: center; padding: 16px 8px; }
.mod-notes-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
}
.product-mod-foot { padding-top: 12px; }
.product-mod-foot .btn-primary { width: 100%; }