:root {
  /* Kiosko: tamaños y espacios grandes para pantalla táctil */
  --sidebar-w: 290px;
  --footer-h: 80px;
  --header-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --modal-vvh: 100dvh;
  --footer-safe-h: calc(var(--footer-h) + var(--safe-b));
  --radius-lg: 28px; /* cards grandes tipo stitch */
  --radius-md: 18px;
  --shadow-sm: 0 6px 18px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 12px 30px rgba(17, 24, 39, 0.12);

  /* Paleta (copiada/interpretada del stitch) */
  --bg: #f8f6f7; /* background-light */
  --surface: #ffffff; /* card-light */
  --line: #e9e5e7;
  --text: #0f172a;
  --muted: #64748b;
  --soft: #94a3b8;
  --primary: #590c2a;
  --primary-700: #3f071e;
  --primary-soft: rgba(89, 12, 42, 0.12);
  --danger: #e53935; /* accent-red (precio / status) */
  --focus: rgba(89, 12, 42, 0.32);

  /* Quick add (+) button: consistent across browsers */
  --quick-add-size: 36px; /* ~5% smaller than 38px */
  --quick-add-right: 20px; /* a bit more to the left */
  --quick-add-bottom: 16px;
  --quick-add-icon: 20px;

  /* Footer / Checkout bar spacing */
  --checkout-gutter-x: 24px;
}

html.dark {
  --bg: #211117; /* background-dark */
  --surface: #1e1e1e; /* card-dark */
  --line: #2b1a21;
  --text: #f1f5f9;
  --muted: #b0a7ad;
  --soft: #8b8086;
  --primary-soft: rgba(89, 12, 42, 0.28);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* ==========================
   KDS / Kitchen Display (/kitchen)
   ========================== */

html.kds-mode body {
  padding-bottom: 0;
  padding-top: 0;
  overflow: hidden;
  background: #070d19;
  touch-action: pan-y;
  min-height: 100dvh;
}

html.kds-boot-pending #kdsBootShell {
  display: grid;
}

html.kds-boot-pending #kdsRoot {
  visibility: hidden;
  pointer-events: none;
}

.kds-boot-shell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25000;
  place-items: center;
  background:
    radial-gradient(900px 520px at 18% -12%, rgba(89, 12, 42, 0.36), transparent 64%),
    radial-gradient(780px 460px at 82% 0%, rgba(14, 165, 233, 0.10), transparent 58%),
    linear-gradient(180deg, #0a1020 0%, #080d18 100%);
  color: #e5edf8;
}

.kds-boot-shell__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  text-align: center;
}

.kds-boot-shell__title {
  font-weight: 950;
  letter-spacing: 0.12em;
  font-size: 13px;
  text-transform: uppercase;
  color: #f8fafc;
}

.kds-boot-shell__sub {
  font-weight: 800;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.72);
}

.kds-boot-shell__spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(34, 197, 94, 0.92);
  animation: kdsBootSpin 700ms linear infinite;
}

@keyframes kdsBootSpin {
  to { transform: rotate(360deg); }
}

html.kds-mode .app,
html.kds-mode .footer,
html.kds-mode .theme-toggle,
html.kds-mode #productModalMount,
html.kds-mode #checkoutModal,
html.kds-mode #orderCreatedPopup,
html.kds-mode #startPageOverlay,
html.kds-mode .kiosk-header {
  display: none !important;
}

#kdsRoot {
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(900px 520px at 18% -12%, rgba(89, 12, 42, 0.36), transparent 64%),
    radial-gradient(780px 460px at 82% 0%, rgba(14, 165, 233, 0.10), transparent 58%),
    linear-gradient(180deg, #0a1020 0%, #080d18 100%);
  color: #e5edf8;
  overflow: hidden;
}

#kdsRoot:empty {
  display: none;
}

.kds-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kds-meta__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.14);
  color: rgba(226, 232, 240, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.kds-meta__text {
  color: rgba(226, 232, 240, 0.8);
  font-weight: 800;
  font-size: 12px;
}

.kds-topbar {
  background: rgba(8, 13, 24, 0.92);
  color: #e2e8f0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 18px;
  gap: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
  backdrop-filter: blur(14px);
}

.kds-brand .kds-title {
  font-weight: 900;
  letter-spacing: 0.10em;
  font-size: 13px;
  color: #f8fafc;
}
.kds-brand .kds-sub {
  color: rgba(226, 232, 240, 0.75);
  font-weight: 700;
  font-size: 12px;
  margin-top: 2px;
}

.kds-topbar__center {
  display: inline-flex;
  gap: 10px;
  justify-content: center;
}
.kds-pill {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(2,6,23,0.25);
}
.kds-pill.is-active {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.95), rgba(21, 128, 61, 0.88));
  border-color: rgba(74, 222, 128, 0.42);
  color: #d1fae5;
}

.kds-topbar__right {
  justify-self: end;
  text-align: right;
}
.kds-clock {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.kds-avg {
  font-weight: 800;
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  margin-top: 2px;
}

.kds-board {
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}
.kds-board::-webkit-scrollbar {
  width: 10px;
}
.kds-board::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.kds-board__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
  gap: 18px;
}
.kds-board__empty {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
  font-weight: 900;
  color: rgba(226, 232, 240, 0.55);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.kds-card {
  width: 100%;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto;
  gap: 0;
  padding: 18px;
  position: relative;
  overflow: visible;
}

.kds-card--flash {
  animation: kdsFlash 900ms ease-out 1;
}

.kds-card--warn {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22), 0 14px 40px rgba(2, 6, 23, 0.36);
  border-color: rgba(249, 115, 22, 0.35);
}

.kds-card--danger {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22), 0 14px 40px rgba(2, 6, 23, 0.36);
  border-color: rgba(220, 38, 38, 0.35);
}

.kds-conn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.kds-conn--ok { background: rgba(34, 197, 94, 0.18); color: #d1fae5; border-color: rgba(34, 197, 94, 0.42); }
.kds-conn--bad { background: rgba(220, 38, 38, 0.18); color: #fee2e2; border-color: rgba(220, 38, 38, 0.35); }
.kds-conn--auth { background: rgba(59, 130, 246, 0.18); color: #dbeafe; border-color: rgba(59, 130, 246, 0.35); }

.kds-toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: min(520px, 92vw);
}
.kds-toast--ok { background: rgba(34, 197, 94, 0.92); color: #052e16; }
.kds-toast--info { background: rgba(51, 65, 85, 0.94); color: #e2e8f0; }
.kds-toast--warn { background: rgba(249, 115, 22, 0.94); color: #2a0f05; }
.kds-toast--error { background: rgba(220, 38, 38, 0.94); color: #fff; }

.kds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 18px;
}
.kds-overlay__panel {
  width: min(760px, 96vw);
  max-height: min(86vh, 760px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kds-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #0f172a;
  color: #e2e8f0;
}
.kds-overlay__title { font-weight: 950; letter-spacing: 0.04em; }
.kds-overlay__close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}
.kds-overlay__body {
  padding: 14px 16px;
  overflow: auto;
}
.kds-setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 800;
  color: #0f172a;
}
.kds-setrow input[type="number"] {
  width: 110px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 0 10px;
  font-weight: 900;
}

.kds-history__row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.kds-history__num { font-weight: 950; font-size: 16px; color: #0f172a; }
.kds-history__meta { margin-top: 4px; font-weight: 800; color: rgba(15, 23, 42, 0.62); font-size: 12px; }
.kds-history__items { margin-top: 6px; font-weight: 800; color: rgba(15, 23, 42, 0.78); font-size: 13px; }
.kds-history__empty { font-weight: 900; color: rgba(15, 23, 42, 0.6); padding: 10px 0; }
@keyframes kdsFlash {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0), 0 14px 40px rgba(2, 6, 23, 0.36); }
  30% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.28), 0 14px 40px rgba(2, 6, 23, 0.36); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0), 0 14px 40px rgba(2, 6, 23, 0.36); }
}

.kds-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.kds-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}
.kds-badge--new {
  background: rgba(89, 12, 42, 0.12);
  color: var(--primary);
  border-color: rgba(89, 12, 42, 0.22);
}
.kds-badge--prep {
  background: rgba(249, 115, 22, 0.14);
  color: #9a3412;
  border-color: rgba(249, 115, 22, 0.28);
}
.kds-badge--ready {
  background: rgba(34, 197, 94, 0.16);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.32);
}

.kds-time {
  text-align: right;
}
.kds-ago {
  font-weight: 900;
  color: rgba(15, 23, 42, 0.68);
  font-size: 12px;
}
.kds-at {
  font-weight: 800;
  color: rgba(15, 23, 42, 0.45);
  font-size: 11px;
  margin-top: 1px;
}

.kds-num {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  margin: 10px 2px 4px;
  color: #0f172a;
  line-height: 0.95;
}

/* Order # + service + customer: one block, no wasted gap */
.kds-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.kds-card__head .kds-num {
  margin: 0 0 10px;
  line-height: 1;
}

.kds-card__customer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.kds-card__customer .kds-meta__pill {
  background: rgba(22, 101, 52, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.4);
  text-shadow: none;
}

.kds-card__customerLine {
  flex: 1 1 100%;
  font-size: 1.05rem;
  font-weight: 750;
  color: #1e293b;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kds-items {
  overflow: visible;
  padding: 10px 2px 8px;
  min-height: 0;
}
.kds-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 10px;
  row-gap: 8px;
  align-items: start;
  padding: 10px 4px;
  border-radius: 14px;
  min-width: 0;
}
.kds-item > input {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  margin-top: 2px;
}
.kds-item__body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}
.kds-item__name {
  font-size: 15px;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kds-empty {
  padding: 18px 8px;
  text-align: center;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.45);
  font-size: 13px;
}
.kds-mod {
  margin-top: 4px;
  color: var(--danger);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kds-item__note {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
  padding: 12px 14px 13px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(254, 249, 231, 0.98), rgba(254, 240, 138, 0.45));
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-left: 4px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  width: 100%;
  box-sizing: border-box;
}

.kds-item__noteLabel {
  display: block;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 5px;
}

.kds-item__noteText {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #7c2d12;
  line-height: 1.45;
  letter-spacing: 0.015em;
  text-transform: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kds-done {
  margin-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.5);
  font-weight: 900;
}
.kds-done__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 950;
}

.kds-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 16px 14px;
  font-weight: 950;
  letter-spacing: 0.06em;
  cursor: pointer;
  min-height: 56px;
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.18);
}
.kds-btn--primary {
  background: linear-gradient(135deg, #067337, #0f8d46);
  color: #fff;
}
.kds-btn--ready {
  background: #22c55e;
  color: #052e16;
}
.kds-btn--dark {
  background: #334155;
  color: #e2e8f0;
}

.kds-bottombar {
  background: rgba(6, 95, 70, 0.96);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -18px 44px rgba(2, 6, 23, 0.25);
}
.kds-bottombar__left {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 900;
}
.kds-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.95;
  font-size: 12px;
}
.kds-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.kds-dot--new { background: rgba(255,255,255,0.9); }
.kds-dot--prep { background: rgba(249,115,22,0.9); }
.kds-dot--ready { background: rgba(34,197,94,0.9); }

.kds-bottombar__right {
  display: inline-flex;
  gap: 12px;
}
.kds-linkbtn {
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 44px;
}

@media (min-width: 1200px) {
  .kds-board__row {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

@media (max-width: 980px) {
  #kdsRoot {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .kds-topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand clock"
      "tabs tabs";
    align-items: start;
  }

  .kds-topbar__left { grid-area: brand; }
  .kds-topbar__center {
    grid-area: tabs;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .kds-topbar__right { grid-area: clock; }

  .kds-board {
    padding: 18px;
  }

  .kds-board__row {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* KDS: phone-first adjustments */
@media (max-width: 520px) {
  #kdsRoot {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .kds-topbar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .kds-topbar__left,
  .kds-topbar__right {
    justify-self: start;
    text-align: left;
  }

  .kds-topbar__center {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .kds-pill {
    padding: 8px 10px;
    min-height: 40px;
    font-size: 12px;
  }

  .kds-board {
    padding: 12px;
  }

  .kds-board__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 6px;
  }

  .kds-card {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .kds-num {
    font-size: 32px;
  }

  .kds-card__head .kds-num {
    font-size: clamp(1.75rem, 7vw, 2rem);
  }

  .kds-card__customerLine {
    font-size: 1rem;
  }

  .kds-bottombar {
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .kds-bottombar__right {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 380px) {
  .kds-card {
    width: 100%;
    min-width: 0;
  }
  .kds-pill {
    font-size: 11px;
  }
}

.kds-pin {
  min-height: 100dvh;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 30% 10%, rgba(89, 12, 42, 0.22), rgba(11, 18, 32, 0.92));
}
.kds-pin__panel {
  width: min(520px, 92vw);
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.55);
}
.kds-pin__title {
  font-weight: 950;
  font-size: 18px;
  color: #0f172a;
}
.kds-pin__sub {
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.62);
  font-weight: 800;
  font-size: 13px;
}
.kds-pin__err {
  margin-top: 10px;
  color: #b91c1c;
  font-weight: 900;
}
.kds-pin__row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.kds-pin__input {
  flex: 1;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.kds-fatal {
  padding: 20px;
  color: #fff;
}

/* ==========================
   Clock-in (/clockin)
   ========================== */

html.clockin-mode body {
  padding: 0;
  overflow: hidden;
  min-height: 100dvh;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(145deg, var(--primary, #590c2a), var(--primary-700, #3f0820));
  color: #fff;
  touch-action: pan-y;
}

html.clockin-mode .app,
html.clockin-mode .footer,
html.clockin-mode .theme-toggle,
html.clockin-mode #productModalMount,
html.clockin-mode #checkoutModal,
html.clockin-mode #orderCreatedPopup,
html.clockin-mode #startPageOverlay,
html.clockin-mode .kiosk-header,
html.clockin-mode .menu-update-gate,
html.clockin-mode #kdsBootShell {
  display: none !important;
}

html.kds-mode #clockinBootShell,
html.kds-mode #clockinRoot {
  display: none !important;
}

html.clockin-boot-pending #clockinBootShell {
  display: grid;
}

html.clockin-boot-pending #clockinRoot {
  visibility: hidden;
  pointer-events: none;
}

.clockin-boot-shell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25000;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(145deg, var(--primary, #590c2a), var(--primary-700, #3f0820));
  color: #fff;
}

.clockin-boot-shell__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  text-align: center;
}

.clockin-boot-shell__title {
  font-weight: 950;
  letter-spacing: 0.08em;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: #fff;
}

.clockin-boot-shell__sub {
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.clockin-boot-shell__spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.92);
  animation: kdsBootSpin 700ms linear infinite;
}

#clockinRoot {
  min-height: 100dvh;
}

#clockinRoot:empty {
  display: none;
}

body.clockin-page {
  margin: 0;
  min-height: 100dvh;
  font-family: "Epilogue", "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
}

.clockin {
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 46px);
}

.clockin__card {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 18px;
}

.clockin__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  margin: 0 0 6px;
}

.clockin__sub {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.clockin__pick {
  display: grid;
  gap: 10px;
}

.clockin__pickLabel {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}

.clockin__empList {
  display: grid;
  gap: 10px;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 2px;
}

.clockin__empBtn {
  width: 100%;
  text-align: left;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.clockin__empBtn.is-selected {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.clockin__empEmpty {
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.clockin__actions {
  margin-top: 14px;
}

.clockin__btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  padding: 0 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clockin__btn--in {
  background: rgba(34, 197, 94, 0.92);
  color: #062a14;
}

.clockin__btn--out {
  background: rgba(244, 97, 111, 0.92);
  color: #2b0a12;
}

.clockin__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.clockin__toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100% - 24px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(127, 29, 29, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.clockin__toast[hidden] {
  display: none;
}

.clockin__toastText {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
}

.clockin__toastClose {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.clockin__status {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.clockin__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.clockin__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.clockin__pill.is-in .clockin__dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

.clockin__pill.is-out .clockin__dot {
  background: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}

.clockin__log {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.clockin__logHead {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.clockin__logBody {
  background: rgba(255, 255, 255, 0.06);
}

.clockin__item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.clockin__type {
  font-weight: 900;
  text-align: center;
  border-radius: 12px;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.clockin__type.is-in {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.28);
}

.clockin__type.is-out {
  background: rgba(244, 97, 111, 0.2);
  border-color: rgba(244, 97, 111, 0.28);
}

.clockin__when {
  font-weight: 800;
  color: #fff;
}

.clockin__note {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.clockin-pin {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.clockin-pin__panel {
  width: min(420px, 100%);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.clockin-pin__title {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 8px;
  color: #fff;
}

.clockin-pin__sub {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.clockin-pin__err {
  color: #fecaca;
  font-weight: 700;
  margin-bottom: 12px;
}

.clockin-pin__row {
  display: flex;
  gap: 10px;
}

.clockin-pin__input {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  -webkit-text-fill-color: #fff;
  padding: 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
}

.clockin-pin__btn {
  height: 48px;
  border: none;
  border-radius: 14px;
  padding: 0 18px;
  font-weight: 800;
  background: #fff;
  color: var(--primary, #590c2a);
  cursor: pointer;
}

.clockin-fatal {
  padding: 24px;
  color: #fff;
  font-weight: 700;
}

@media (max-width: 560px) {
  .clockin-pin__row {
    flex-direction: column;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Work Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  overflow: hidden; /* el scroll se maneja dentro de paneles (kiosko) */
  padding-bottom: var(--footer-safe-h); /* espacio real para barra inferior fija (incluye safe-area) */
  padding-top: var(--header-h); /* espacio para header fijo (tablet/teléfono) */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: max(884px, 100dvh); /* como stitch */
}

/*
  When a modal is open, prevent background scrolling.
  CRITICAL: do NOT set `touch-action: none` on html/body — on iOS Safari that can
  cancel pan gestures inside the modal too. Use only overflow + overscroll-behavior.
*/
html.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Route vertical pan gestures into open modals (iOS needs this on the actual scroller). */
body.modal-open .modal[aria-hidden="false"] {
  touch-action: pan-y;
}

/* Prevent fixed UI from overlaying modals (iOS: can steal touches/scroll). */
body.modal-open .theme-toggle {
  opacity: 0;
  pointer-events: none;
}

body.modal-open .footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
  Mobile kiosk: .content scrolls the catalog — must not chain-scroll behind any modal.
  Only overflow: do NOT set touch-action here; iOS can apply it via parent-chain
  even though the modal is a body-level sibling.
*/
body.modal-open .app,
body.modal-open .content {
  overflow: hidden !important;
}

body.mobile-screen-modal-open {
  /* height:100% on html/body caps document height — footer (OK / Pay) stays off-screen */
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 0;
  padding-bottom: 0;
  touch-action: pan-y;
}

html.mobile-screen-modal-open {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto;
}

/* Force full-page modals to expand the document (beat desktop 100svh + nested list scroll). */
body.mobile-screen-modal-open .modal.order-sheet .order-sheet__panel,
body.mobile-screen-modal-open .modal.payment-modal .payment-modal__panel,
body.mobile-screen-modal-open .modal.ps2 .ps2__panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.mobile-screen-modal-open .modal.order-sheet .order-sheet__list {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-height: none !important;
}

body.mobile-screen-modal-open .app,
body.mobile-screen-modal-open .content {
  display: none;
}

body.mobile-screen-modal-open .kiosk-header,
body.mobile-screen-modal-open .footer,
body.mobile-screen-modal-open .theme-toggle {
  display: none;
}

body.start-page-active .theme-toggle {
  opacity: 0;
  pointer-events: none;
}

/* Hide catalog until start-page settings are known (prevents menu flash before rest screen). */
body.kiosk-boot-pending .app,
body.kiosk-boot-pending .footer,
body.kiosk-boot-pending .kiosk-header,
body.kiosk-boot-pending .theme-toggle {
  visibility: hidden;
}

.menu-update-gate {
  position: fixed;
  inset: 0;
  z-index: 110; /* below .start-page (120), above UI */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.menu-update-gate[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.menu-update-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(10px);
}

.menu-update-gate__card {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,0.2));
  background: color-mix(in srgb, var(--surface) 88%, rgba(255,255,255,0.15));
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
}

.menu-update-gate__panel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-update-gate__panel.hidden {
  display: none;
}

.menu-update-gate__panel--error {
  flex-wrap: wrap;
}

.menu-update-gate__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.menu-update-gate__icon--error {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
  border: 2px solid rgba(220, 38, 38, 0.35);
}

.menu-update-gate__retry,
.menu-load-error__retry {
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  flex: 0 0 auto;
}

.menu-update-gate__retry:hover,
.menu-load-error__retry:hover {
  filter: brightness(1.05);
}

.menu-load-error {
  position: fixed;
  top: calc(var(--header-h, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 109;
  width: min(720px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: color-mix(in srgb, #dc2626 8%, var(--surface));
  color: var(--text);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.14);
}

.menu-load-error.hidden {
  display: none;
}

.menu-load-error__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-load-error__title {
  font-size: 14px;
}

.menu-load-error__detail {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.menu-update-gate__spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, rgba(255,255,255,0.2));
  border-top-color: var(--primary);
  animation: menuGateSpin 0.85s linear infinite;
  flex: 0 0 auto;
}

@keyframes menuGateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.menu-update-gate__title {
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text);
}

.menu-update-gate__sub {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

body.menu-gated .app,
body.menu-gated .footer,
body.menu-gated .theme-toggle {
  pointer-events: none;
  user-select: none;
}

.start-page {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(145deg, var(--start-page-accent, var(--primary)), var(--primary-700));
}

.start-page[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.start-page__media,
.start-page__background,
.start-page__video,
.start-page__shade {
  position: absolute;
  inset: 0;
}

.start-page__background {
  background-position: center;
  background-size: cover;
  opacity: 0;
}

.start-page[data-background-mode="default"] .start-page__background,
.start-page[data-background-mode="custom"] .start-page__background {
  opacity: 0.95;
}

.start-page__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-page__shade {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.82)),
    linear-gradient(90deg, rgba(15, 23, 42, 0.48), transparent 60%);
}

.start-page__content {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: clamp(24px, 4vw, 48px);
  color: #fff;
}

.start-page[data-template="split_brand"] .start-page__content {
  max-width: min(560px, 100%);
}

.start-page__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.start-page__logoWrap {
  /* Start-page logo: fixed height, auto width, respects any logo proportion */
  width: auto;
  min-width: clamp(140px, 18vw, 280px);
  max-width: clamp(200px, 28vw, 380px);
  height: clamp(72px, 9vw, 120px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  flex-shrink: 0;
  /*
    Many uploaded "logos" are full banner images with large white margins and
    sometimes a footer line (e.g., address) baked into the asset.
    We keep object-fit:contain (no distortion) but zoom/shift inside the mask.
  */
  --logo-zoom: 1.62;
  --logo-y: 12%;
}

.start-page__logoWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(var(--logo-y, 0%)) scale(var(--logo-zoom, 1));
  transform-origin: 50% 50%;
}

.start-page__logoWrap svg {
  width: 44px;
  height: 44px;
}

.start-page__meta {
  display: grid;
  gap: 0.45rem;
}

.start-page__eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.start-page__meta h1,
.start-page__meta p,
.start-page__ctaMain,
.start-page__ctaSub {
  margin: 0;
}

.start-page__meta h1 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 0.95;
}

.start-page__meta p {
  max-width: 760px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.84);
}

.start-page__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.start-page__pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  font-weight: 700;
}

.start-page__pill[data-open="true"] {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.35);
}

.start-page__pill[data-open="false"] {
  color: #fecdd3;
  background: rgba(244, 97, 111, 0.22);
  border-color: rgba(244, 97, 111, 0.35);
}

.start-page__cta {
  display: grid;
  gap: 0.35rem;
  width: fit-content;
  min-width: min(420px, 100%);
  padding: 1rem 1.2rem;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}

.start-page__ctaMain {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 900;
}

.start-page__ctaSub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.96rem;
}

@media (max-width: 768px) {
  .start-page__content {
    align-content: end;
    padding: 18px;
  }

  .start-page__brand {
    align-items: flex-start;
  }

  .start-page__meta h1 {
    font-size: 2.1rem;
  }

  .start-page__cta {
    min-width: 100%;
  }
}

/* Layout principal: dos columnas como Imagen 1 */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  /* iOS fallback: 100vh first, then dvh when supported */
  height: calc(100vh - var(--footer-safe-h) - var(--header-h));
  height: calc(100dvh - var(--footer-safe-h) - var(--header-h));
  overflow: hidden;
}

/* Header superior (tablet/teléfono) */
.kiosk-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-h);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 55;
}

.kiosk-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kiosk-header__logo {
  /* Header logo: fixed height, auto width */
  width: auto;
  min-width: 56px;
  max-width: clamp(80px, 18vw, 180px);
  height: 48px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--primary);
  overflow: hidden;
  padding: 0;
  --logo-zoom: 1.62;
  --logo-y: 7%;
}

.kiosk-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(var(--logo-y, 0%)) scale(var(--logo-zoom, 1));
  transform-origin: 50% 50%;
}

.kiosk-header__logo svg {
  width: 28px;
  height: 28px;
}

.kiosk-header__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kiosk-header__name {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-header__tag {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-header__right {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.kiosk-header__addr {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.kiosk-header__status {
  padding: 7px 10px;
}

/* ═══════════════════════════════════════════
   SIDEBAR — diseño limpio estilo kiosk moderno
   ═══════════════════════════════════════════ */
.sidebar {
  background: color-mix(in srgb, var(--primary) 9%, #faf9f9);
  border-right: none;
  border-radius: 0 28px 28px 0;
  box-shadow: 8px 0 24px color-mix(in srgb, var(--primary) 14%, transparent);
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
}

html.dark .sidebar {
  background: color-mix(in srgb, var(--primary) 20%, #1a1117);
}

/* ── Cabecera de marca ── */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 28px 20px 20px;
  margin: 0;
  background: transparent;
  border-bottom: none;
  text-align: center;
}

.brand__logo {
  /* Logo container: fixed height, full sidebar width, no fixed aspect-ratio */
  width: calc(100% - 40px);
  height: 100px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid color-mix(in srgb, var(--primary) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 10%, transparent);
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--primary);
  margin-bottom: 14px;
  overflow: hidden;
  padding: 0;
  --logo-zoom: 1.62;
  --logo-y: 12%;
}

.brand__logo img {
  display: block;
  /* Fill the box completely; object-fit keeps proportions without distortion */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(var(--logo-y, 0%)) scale(var(--logo-zoom, 1));
  transform-origin: 50% 50%;
}

.brand__logo svg {
  width: 28px;
  height: 28px;
}

html.dark .brand__logo svg {
  filter: none;
}

.brand__meta {
  display: grid;
  gap: 2px;
  width: 100%;
  justify-items: center;
}

.brand__name {
  font-family: 'Epilogue', 'Work Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 17px;
  line-height: 1.2;
  color: var(--primary);
}

html.dark .brand__name {
  color: #f8d8db;
}

.brand__tagline {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Store card ── */
.store-card {
  background: color-mix(in srgb, var(--primary) 5%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 22px;
  padding: 14px 14px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  box-shadow: none;
  margin: 0 16px 16px;
}

html.dark .store-card {
  background: color-mix(in srgb, var(--primary) 22%, #1a1117);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.store-card__address {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}

.store-card__sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
}

/* ── Status pill ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9f1239;
  background: rgba(244, 97, 111, 0.12);
  border: 1px solid rgba(244, 97, 111, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  width: fit-content;
}

.status-pill[data-open="true"] {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
  animation: statusPulse 1.4s ease-in-out infinite;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}

.status-pill[data-open="true"] .status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

@keyframes statusPulse {
  0%,
  100% {
    filter: saturate(1);
    transform: translateZ(0);
  }
  50% {
    filter: saturate(1.25);
  }
}

.sidebar-tools {
  display: flex;
  gap: 10px;
  margin: 10px 0 12px;
}

.tool-btn {
  flex: 1 1 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(2, 6, 23, 0.04);
}

.tool-btn:active {
  transform: translateY(1px);
}

.tool-btn svg {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* ── Nav categories ── */
.nav {
  margin-top: 4px;
  flex: 1;
  padding: 0 12px;
}

.nav__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 4px 8px 10px;
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.cat-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: rgba(74, 74, 74, 0.95);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

html.dark .cat-btn {
  color: rgba(200, 185, 190, 0.92);
}

.cat-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

html.dark .cat-btn:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.cat-btn:active {
  transform: scale(0.99);
}

.cat-btn[aria-current="page"] {
  background: linear-gradient(135deg, var(--primary-700), var(--primary));
  border-color: transparent;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  color: #fff;
  font-weight: 700;
}

.cat-btn[aria-current="page"]::before {
  content: none;
}

.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

html.dark .cat-icon {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.cat-btn[aria-current="page"] .cat-icon {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.18);
}

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

.cat-icon__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  padding: 6px;
  border-radius: inherit;
  display: block;
}

/* Contenido principal (columna derecha) */
.content {
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  --content-pad-top: 22px;
  padding: var(--content-pad-top) 26px 30px;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr 520px;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  position: sticky;
  /* Stick to the very top of the scroll container (ignoring its padding). */
  top: calc(0px - var(--content-pad-top));
  z-index: 10;
  padding: 18px 0 14px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
}

.title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin:  0;
  line-height: 1.05;
}

.subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);
}

.search svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
  opacity: 0.8;
}

.search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
}

.search input::placeholder {
  color: var(--soft);
}

/* Secciones por categoría (Show All) */
.section {
  margin-top: 18px;
  padding-top: 12px;
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.section__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0;
}

.section__rule {
  height: 1px;
  background: var(--line);
  flex: 1 1 auto;
  margin-left: 14px;
}

/* Grid de productos (cards táctiles) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* Mobile category bar (teléfono) */
.mobile-cats {
  display: none;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 10px;
  margin: 0 0 8px;
  scrollbar-width: none;
}

.mobile-cats::-webkit-scrollbar {
  display: none;
}

.mobile-cat-btn {
  height: 44px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}

.mobile-cat-btn__icon svg {
  width: 18px;
  height: 18px;
}

.mobile-cat-btn__icon .cat-icon__img {
  width: 18px;
  height: 18px;
  padding: 0;
}

.mobile-cat-btn[aria-current="page"] {
  background: var(--primary);
  color: #fff;
  border-color: rgba(89, 12, 42, 0.35);
}

.mobile-cat-btn[aria-current="page"] .mobile-cat-btn__icon svg * {
  stroke: rgba(255, 255, 255, 0.95);
}

.mobile-cat-btn[aria-current="page"] .mobile-cat-btn__icon svg path[fill] {
  fill: rgba(255, 255, 255, 0.95);
}

.product {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 240px;
  position: relative;
  padding: 12px;
}

.product__open {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.product__open:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 14px;
}

.product__open:active {
  transform: translateY(1px);
}

.product:focus-visible {
  outline: none;
}

.product__media {
  position: relative;
  aspect-ratio: 1 / 1; /* stitch-like square image */
  background: rgba(89, 12, 42, 0.06);
  border-radius: 22px;
  overflow: hidden;
}

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

.product__limited-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(180, 83, 9, 0.92);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.product__limited-badge--modal {
  position: static;
  display: inline-block;
  margin: 0.35rem 0 0;
  text-transform: none;
  font-size: 0.75rem;
}

.product__body {
  padding: 12px 6px 6px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.product__name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.product__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.product__price {
  font-size: 16px;
  font-weight: 800;
  color: var(--danger);
  letter-spacing: 0.2px;
}

.product__hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.product__quick-add {
  position: absolute;
  right: var(--quick-add-right);
  bottom: var(--quick-add-bottom);
  width: var(--quick-add-size);
  height: var(--quick-add-size);
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--primary);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.product__quick-add:hover {
  background: var(--primary-700);
}

.product__quick-add:active {
  transform: translateY(1px);
}

.product__quick-add svg {
  width: var(--quick-add-icon);
  height: var(--quick-add-icon);
}

/* Desktop: quick-add must not overlap long product titles/prices */
@media (min-width: 769px) {
  :root {
    --quick-add-size: 34px;
    --quick-add-right: 14px;
    --quick-add-bottom: 18px;
    --quick-add-icon: 17px;
  }

  .product__body {
    padding-right: 42px;
    padding-bottom: 6px;
    min-height: 70px;
  }

  .product__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 2px;
  }

  .product__meta {
    margin-top: 4px;
  }
}

/* Barra inferior fija (Imagen 1) */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-safe-h);
  background: var(--primary);
  border-top: 0;
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  z-index: 30;
  padding: 0 var(--checkout-gutter-x) var(--safe-b);
  pointer-events: none; /* el bar es el click target */
  box-shadow: 0 -10px 30px rgba(89, 12, 42, 0.18);
}

/* Checkout bar (glass) inspirado en tu referencia */
.checkout-bar {
  pointer-events: auto;
  width: 100%;
  height: var(--footer-h);
  border-radius: 18px;
  padding: 12px 14px;
  border: 0;
  background: transparent; /* barra sólida: el color lo da el footer */
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-appearance: none;
  appearance: none;
}

html.dark .checkout-bar {
  background: transparent;
}

.checkout-bar:active:not(:disabled) {
  transform: scale(0.985);
}

.checkout-bar:disabled {
  cursor: not-allowed;
}

.checkout-bar:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06); /* hover suave sin “doble fondo” permanente */
}

.checkout-bar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.checkout-bar__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}

.checkout-bar__icon svg {
  width: 26px;
  height: 26px;
}

.checkout-bar__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.checkout-bar__title {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.05;
  color: #fff;
}

html.dark .checkout-bar__title {
  color: #fff;
}

.checkout-bar__sub {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-bar__divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
}

html.dark .checkout-bar__divider {
  background: rgba(255, 255, 255, 0.22);
}

.checkout-bar__right {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex: 0 0 auto;
}

.checkout-bar__amount {
  font-weight: 950;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #fff;
}

html.dark .checkout-bar__amount {
  color: #fff;
}

.checkout-bar__label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.62);
}

html.dark .checkout-bar__label {
  color: rgba(255, 255, 255, 0.62);
}

.checkout-bar__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: translateX(-120%);
  transition: transform 900ms ease;
  pointer-events: none;
}

.checkout-bar:hover:not(:disabled) .checkout-bar__shine {
  transform: translateX(120%);
}

.theme-toggle {
  position: fixed;
  top: calc(var(--header-h) + 4px);
  right: 16px;
  z-index: 80;
}

.theme-toggle button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.14);
  cursor: pointer;
  display: grid;
  place-items: center;
}

html.dark .theme-toggle button {
  border-color: #2b1a21;
  color: #facc15; /* amarillito como stitch */
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* Modal (producto + checkout). Simple, sin dependencias. */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  z-index: 60;
}

.modal[aria-hidden="false"] {
  display: grid;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  z-index: 0;
}

.modal__panel {
  position: relative;
  width: min(980px, 96vw);
  max-height: min(720px, 92vh);
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.34);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

/* -------------------------------------------------------
   Service type modal (Eat in place / To Go)
-------------------------------------------------------- */
.modal.service-type-modal {
  padding: 18px;
  z-index: 70; /* above other modals */
}

.service-type-modal__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 96vw);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.34);
  padding: 18px 18px 20px;
  overflow: hidden;
}

.service-type-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, #fff);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.14);
}

.service-type-modal__close span {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  transform: translateY(-1px);
}

.service-type-modal__head {
  padding: 2px 44px 14px 2px; /* leave room for close btn */
}

.service-type-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.service-type-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.service-type-modal__card {
  border: 4px solid var(--primary);
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 16px;
  display: grid;
  gap: 12px;
  place-items: center;
  cursor: pointer;
  min-height: 178px;
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.service-type-modal__card:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.16);
}

.service-type-modal__card:active {
  transform: scale(0.98);
}

.service-type-modal__card--eat-in {
  background: #ffffff;
  color: var(--primary);
}

.service-type-modal__card--to-go {
  background: var(--primary);
  color: #ffffff;
}

.service-type-modal__icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
}

.service-type-modal__icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.service-type-modal__label {
  font-weight: 950;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .service-type-modal__panel {
    padding: 18px 18px 20px;
  }
}

/* -------------------------------------------------------
   Product modal (Imagen 3) - mobile-first “customization”
   Markup vive en product-modal.html
-------------------------------------------------------- */
.modal.product-sheet {
  /* En teléfono queremos estilo “bottom sheet” y sin padding externo */
  padding: 0;
}

.modal.product-sheet[aria-hidden="false"] {
  place-items: end center;
}

.product-sheet__panel {
  position: relative;
  z-index: 1; /* ensure above .modal__backdrop (clicks work) */
  width: min(480px, 100%);
  height: min(100svh, 920px);
  max-height: 100svh;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 34px 34px 0 0;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.34);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* importante para scroll en navegadores distintos */
}

.product-sheet__media {
  position: relative;
  height: clamp(220px, 32svh, 320px);
  overflow: hidden;
  flex: 0 0 auto;
}

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

.product-sheet__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.18);
}

html.dark .product-sheet__close {
  background: rgba(30, 30, 30, 0.86);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
}

.product-sheet__close:active {
  transform: scale(0.96);
}

.product-sheet__close span {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  transform: translateY(-1px);
}

.product-sheet__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}

.product-sheet__body {
  padding: 18px 18px 10px;
  overflow: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-height: 0; /* FIX: permite que overflow: auto funcione en flex */
  overscroll-behavior: contain;
}

.product-sheet__body::-webkit-scrollbar {
  display: none;
}

.product-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.product-sheet__title {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.product-sheet__desc {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.product-sheet__price {
  color: var(--primary);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
}

.product-sheet__section {
  margin-top: 18px;
}

.product-sheet__sectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.product-sheet__sectionTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.product-sheet__sectionMeta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.product-sheet__selectCount {
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.product-sheet__required {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: color-mix(in srgb, var(--muted) 86%, transparent);
}

.product-sheet__optionList {
  display: grid;
  gap: 10px;
}

.option-btn {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

.option-btn:active {
  transform: scale(0.99);
}

.option-btn__icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--line) 85%, transparent);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 900;
}

.option-btn__label {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.option-btn.is-selected {
  border: 2px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.option-btn.is-selected .option-btn__icon {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.product-sheet__textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-weight: 600;
  font-size: 14px;
  outline: none;
  color: var(--text);
  resize: none;
}

.product-sheet__textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.product-sheet__footer {
  padding: 14px 18px 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background: var(--surface);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  flex: 0 0 auto;
}

.product-sheet__qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--line) 35%, transparent);
}

.product-sheet__qty button {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.product-sheet__qty strong {
  width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.product-sheet__addBtn {
  height: 64px;
  border-radius: 20px;
  border: 0;
  background: var(--primary);
  color: white;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 16px 34px rgba(89, 12, 42, 0.22);
}

.product-sheet__addBtn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.product-sheet__addBtn:active {
  transform: scale(0.985);
}

.product-sheet__cartIcon {
  filter: grayscale(1);
  opacity: 0.95;
}

/* En desktop/tablet lo mostramos centrado como tarjeta */
@media (min-width: 769px) {
  .modal.product-sheet {
    padding: 22px;
  }

  .modal.product-sheet[aria-hidden="false"] {
    place-items: center;
  }

  .product-sheet__panel {
    height: min(92vh, 820px);
    max-height: min(92vh, 820px);
    border-radius: 40px;
  }
}

.modal__media {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(2, 6, 23, 0.03));
  display: grid;
}

.modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal__content {
  padding: 22px 22px 20px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal__title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.icon-btn:hover {
  background: rgba(148, 163, 184, 0.08);
}

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

.modal__price {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-700);
}

.modal__desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfe;
}

.qty button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.qty button:active {
  transform: translateY(1px);
}

.qty strong {
  min-width: 36px;
  text-align: center;
  font-size: 18px;
}

.primary-btn {
  height: 56px;
  border-radius: 18px;
  border: 0;
  background: var(--primary);
  color: white;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 32px rgba(34, 197, 94, 0.25);
}

.primary-btn:hover {
  background: var(--primary-700);
}

.primary-btn:active {
  transform: translateY(1px);
}

/* Popup: orden creada / error (Pay Now) */
.order-created-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}
.order-created-popup[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
}
.order-created-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.4);
  cursor: pointer;
}
.order-created-popup__box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.2);
  text-align: center;
}
.order-created-popup__title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.order-created-popup__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.order-created-popup__message {
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.order-created-popup__box.error .order-created-popup__title {
  color: var(--danger, #dc2626);
}
.order-created-popup__box.error .order-created-popup__badge {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  color: var(--danger, #dc2626);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 24%, var(--line));
}
.order-created-popup__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.order-created-popup__btn {
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.order-created-popup__btn--secondary {
  background: var(--surface);
  color: var(--text);
}
.order-created-popup__btn:hover {
  filter: brightness(1.08);
}

.modal.confirm-order-modal {
  z-index: 75;
}

.confirm-order-modal__panel {
  position: relative;
  z-index: 1;
  width: min(430px, 92vw);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: var(--surface);
  box-shadow: 0 26px 60px rgba(2, 6, 23, 0.30);
  padding: 18px;
}

.confirm-order-modal__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.confirm-order-modal__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-weight: 700;
}

.confirm-order-modal__line strong {
  font-size: 18px;
  font-weight: 950;
}

.confirm-order-modal__actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.confirm-order-modal__btn {
  height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.confirm-order-modal__btn--primary {
  border: 0;
  background: var(--primary);
  color: #fff;
}

.confirm-order-modal__btn--ghost {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.modal.customer-info-modal {
  z-index: 76;
}

.customer-info-modal__panel {
  position: relative;
  z-index: 1;
  width: min(900px, 96vw);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: var(--surface);
  box-shadow: 0 26px 60px rgba(2, 6, 23, 0.30);
  padding: 22px;
}

.customer-info-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-info-modal__title {
  margin: 0;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.customer-info-modal__close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: color-mix(in srgb, var(--muted) 90%, transparent);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.customer-info-modal__close span {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.customer-info-modal__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.customer-info-modal__field {
  display: grid;
  gap: 8px;
}

.customer-info-modal__field > span {
  font-size: 16px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 86%, transparent);
}

.customer-info-modal__field strong {
  font-size: 13px;
  color: var(--primary);
}

.customer-info-modal__field input {
  height: 50px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  padding: 0 14px;
  outline: none;
}

.customer-info-modal__field input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.customer-info-modal__error {
  font-size: 12px;
  font-weight: 800;
  color: #d11a2a;
}

.customer-info-modal__hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.customer-info-modal__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.customer-info-modal__btn {
  height: 44px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  padding: 0 16px;
  cursor: pointer;
}

.customer-info-modal__btn--primary {
  min-width: 92px;
  border: 0;
  background: var(--primary);
  color: #fff;
}

.customer-info-modal__btn--ghost {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

/* Checkout modal */
.checkout-panel {
  grid-template-columns: 1fr;
  width: min(860px, 96vw);
}

.modal.order-sheet {
  padding: 0;
}

.modal.order-sheet[aria-hidden="false"] {
  place-items: stretch;
}

.order-sheet__panel {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: min(560px, 92vw);
  height: 100svh;
  max-height: 100svh;
  background: var(--surface);
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 42px 0 0 42px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.34);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.order-sheet__grab {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 70px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
}

html.dark .order-sheet__grab {
  background: rgba(148, 163, 184, 0.28);
}

.order-sheet__header {
  padding: 22px 26px 10px;
}

.order-sheet__headRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.order-sheet__headActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.order-sheet__title {
  margin: 0;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.order-sheet__clear {
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.order-sheet__clear:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.order-sheet__close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: color-mix(in srgb, var(--muted) 90%, transparent);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.order-sheet__close span {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.order-sheet__location {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-weight: 700;
  font-size: 13px;
}

.order-sheet__location svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.order-sheet__service {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.order-sheet__serviceLabel {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.order-sheet__serviceValue {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-sheet__serviceChange {
  border: 0;
  border-radius: 10px;
  height: 32px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.order-sheet__list {
  list-style: none;
  margin: 0;
  padding: 6px 26px 10px;
  display: grid;
  /* Sin columna declarada, la implicita es `auto` = minmax(auto, max-content):
     se estira hasta el contenido mas ancho. Un solo plato de nombre largo
     ("*Virgin Pina Colada (Non-Alcoholic)") hacia 358px de columna en un
     contenedor de 319px, y empujaba el precio y el +/- de TODAS las filas
     fuera de la pantalla. minmax(0, 1fr) la ata al ancho disponible. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start; /* evita que el grid “estire” la fila y cree huecos */
  grid-auto-rows: max-content;
  overflow: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-height: 0;
}

.order-sheet__list::-webkit-scrollbar {
  display: none;
}

.order-sheet__empty {
  border: 1px dashed color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 26px;
  padding: 18px 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
}

.order-sheet__emptyTitle {
  font-weight: 900;
  font-size: 16px;
}

.order-sheet__emptySub {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.order-item {
  display: flex;
  gap: 12px;
  align-items: center;
  /* El nombre es nowrap: su ancho minimo es el texto entero, y sin esto la
     fila se niega a achicarse aunque la columna si pueda. */
  min-width: 0;
}

.order-item__thumb {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}

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

.order-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.order-item__name {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-item__sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-item__row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-item__price {
  font-weight: 950;
  font-size: 16px;
  color: var(--primary);
}

.qty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--line) 32%, transparent);
}

.qty-pill__btn {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: var(--surface);
  color: color-mix(in srgb, var(--muted) 90%, transparent);
  font-weight: 950;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.qty-pill__btn--plus {
  border: 0;
  background: var(--primary);
  color: #fff;
}

.qty-pill__count {
  width: 18px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

.order-sheet__summary {
  padding: 8px 18px 10px;
  background: color-mix(in srgb, var(--surface) 92%, rgba(148, 163, 184, 0.10));
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 28px 28px 0 0;
  flex: 0 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  align-items: start;
}

.order-sheet__block {
  margin: 0;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.order-sheet__blockTitle {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  margin-bottom: 4px;
}

.stripe-card {
  position: relative;
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.95), transparent 34%),
    linear-gradient(145deg, #fffaf7 0%, #ffffff 46%, color-mix(in srgb, var(--primary) 6%, #ffffff) 100%);
  box-shadow:
    0 18px 42px rgba(89, 12, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.stripe-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #a2466b, #f2c98b);
}

.stripe-card__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.stripe-card__eyebrow {
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--primary) 70%, var(--muted));
}

.stripe-card__title {
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #24111b;
}

.stripe-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(89, 12, 42, 0.08);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.stripe-card__badge span {
  color: #16a34a;
  font-size: 9px;
}

.stripe-card__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.stripe-card__trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(89, 12, 42, 0.08);
  color: #725d68;
  font-size: 10px;
  font-weight: 900;
}

.stripe-card__trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.stripe-card__element {
  position: relative;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(89, 12, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.stripe-skeleton {
  display: grid;
  gap: 10px;
}

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

.stripe-skeleton__line {
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    rgba(89, 12, 42, 0.06) 0%,
    rgba(89, 12, 42, 0.12) 35%,
    rgba(89, 12, 42, 0.06) 70%,
    rgba(89, 12, 42, 0.06) 100%
  );
  background-size: 220% 100%;
  animation: stripeShimmer 1.1s ease-in-out infinite;
}

.stripe-skeleton__line--lg {
  height: 52px;
}

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

@media (prefers-reduced-motion: reduce) {
  .stripe-skeleton__line {
    animation: none;
  }
}

/* Dedicated payment modal: isolated from the order sheet scroll model. */
.modal.payment-modal {
  z-index: 78;
  padding: 22px;
}

.modal.payment-modal[aria-hidden="false"] {
  place-items: center;
}

.payment-modal__panel {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  max-height: min(92dvh, calc(var(--modal-vvh) - 28px));
  background:
    radial-gradient(circle at 14% 0%, rgba(242, 201, 139, 0.22), transparent 30%),
    linear-gradient(145deg, #fffaf7 0%, #ffffff 48%, color-mix(in srgb, var(--primary) 5%, #ffffff) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 34px;
  box-shadow: 0 34px 92px rgba(2, 6, 23, 0.36);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.payment-modal__header,
.payment-modal__footer {
  flex: 0 0 auto;
  background: rgba(255, 250, 247, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.payment-modal__header {
  padding: 22px 24px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(89, 12, 42, 0.08);
}

.payment-modal__eyebrow {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 76%, var(--muted));
}

.payment-modal__title {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #24111b;
}

.payment-modal__close {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(89, 12, 42, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: var(--primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.payment-modal__close span {
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.payment-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 18px 24px 20px;
}

.payment-modal__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.payment-modal__summary > div {
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(89, 12, 42, 0.10);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(89, 12, 42, 0.07);
}

.payment-modal__summary span {
  display: block;
  color: #725d68;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.payment-modal__summary strong {
  display: block;
  margin-top: 5px;
  color: #24111b;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.payment-modal__card {
  margin: 0;
  grid-column: auto;
}

.payment-modal__status {
  margin: 12px 2px 0;
  color: #725d68;
  font-size: 13px;
  font-weight: 800;
}

.payment-modal__status.is-error {
  color: #b42318;
}

.payment-modal__footer {
  padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(180px, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(89, 12, 42, 0.08);
}

.payment-modal__secondary,
.payment-modal__primary {
  height: 54px;
  border-radius: 18px;
  font-weight: 950;
  cursor: pointer;
}

.payment-modal__secondary {
  border: 1px solid rgba(89, 12, 42, 0.14);
  background: rgba(255, 255, 255, 0.76);
  color: var(--primary);
}

.payment-modal__primary {
  border: 0;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 16px 32px rgba(89, 12, 42, 0.26);
}

.payment-modal__primary:disabled,
.payment-modal__secondary:disabled,
.payment-modal__close:disabled {
  opacity: 0.62;
  cursor: wait;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .payment-modal__panel {
    width: min(660px, calc(100vw - 36px));
    max-height: min(90dvh, calc(var(--modal-vvh) - 32px));
  }

  .payment-modal__title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  /*
    PHONE: payment modal should behave like checkout/product modals (document scroll).
    Fixed + nested scrollers can fail to pan/scroll on iOS when Stripe iframes are present.
  */
  .modal.payment-modal {
    padding: 0;
  }

  .modal.payment-modal[aria-hidden="false"] {
    display: block;
    position: static;
    padding: 0;
    overflow: visible;
    height: auto;
    max-height: none;
    touch-action: auto;
  }

  .modal.payment-modal .modal__backdrop {
    display: none;
  }

  .payment-modal__panel {
    position: static;
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }

  .payment-modal__header {
    padding: 18px 18px 12px;
    position: static;
  }

  .payment-modal__title {
    font-size: 30px;
  }

  .payment-modal__close {
    width: 42px;
    height: 42px;
  }

  .payment-modal__body {
    padding: 14px 18px 18px;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }

  .payment-modal__summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .payment-modal__summary > div {
    padding: 12px 14px;
    border-radius: 18px;
  }

  .payment-modal__summary strong {
    font-size: 18px;
  }

  .payment-modal__card {
    padding: 12px;
    border-radius: 22px;
  }

  .payment-modal__footer {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 1fr;
    position: static;
  }

  .payment-modal__secondary {
    order: 2;
  }

  .payment-modal__primary {
    order: 1;
  }
}

.pm-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--surface);
  cursor: pointer;
  font-weight: 900;
  font-size: 11px;
  color: var(--text);
}

.pm-pill input {
  width: 14px;
  height: 14px;
}

.tip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.tip-pill {
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--surface);
  color: var(--text);
  font-weight: 950;
  font-size: 11px;
  cursor: pointer;
}

.tip-pill.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  color: var(--primary);
}

.tip-custom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-weight: 900;
  color: var(--muted);
  font-size: 11px;
}

.tip-custom input {
  width: 108px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 10px;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  outline: none;
}

.tip-custom input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.order-sheet__breakdown {
  margin: 0;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.order-sheet__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}

.order-sheet__line strong {
  color: var(--text);
  font-weight: 950;
}

@media (max-width: 520px) {
  .tip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tip-custom input {
    width: 120px;
  }
}

/* Promo code (expandable) */
.order-coupon {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}

.order-coupon__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 14px;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-weight: 800;
  font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.order-coupon__summary::-webkit-details-marker {
  display: none;
}

.order-coupon__chev {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  background: color-mix(in srgb, var(--line) 28%, transparent);
  flex: 0 0 auto;
}

.order-coupon__chev svg {
  width: 16px;
  height: 16px;
}

.order-coupon[open] .order-coupon__chev {
  transform: rotate(180deg);
}

.order-coupon__body {
  padding: 6px 8px 4px;
}

.order-coupon__label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  margin-bottom: 4px;
}

.order-coupon__input {
  width: 100%;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 12px;
  font-weight: 700;
  font-size: 13px;
  outline: none;
  color: var(--text);
}

.order-coupon__input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.order-sheet__total {
  text-align: center;
  margin: 0;
  grid-column: 1 / -1;
}

.order-sheet__totalLabel {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.order-sheet__totalAmount {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.order-sheet__payBtn {
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 950;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 28px rgba(89, 12, 42, 0.24);
  grid-column: 1 / -1;
}

.order-sheet__payBtn:active {
  transform: scale(0.985);
}

.order-sheet__payIcon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
}

.order-sheet__payIcon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.order-sheet__secure {
  margin-top: 0;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.45;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  grid-column: 1 / -1;
}

#paymentBlock {
  grid-column: 1;
}

#tipBlock {
  grid-column: 2;
}

#stripePaymentBlock {
  grid-column: 1 / -1;
}

.payment-modal #stripePaymentBlock {
  grid-column: auto;
}

.payment-modal__wallet {
  margin-bottom: 12px;
}

.payment-modal__wallet[hidden] {
  display: none !important;
}

#stripe-express-checkout-element {
  min-height: 44px;
}

.order-sheet__breakdown {
  grid-column: 1 / -1;
}

.order-sheet__secure svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 769px) {
  .modal.order-sheet {
    padding: 22px;
  }

  .modal.order-sheet[aria-hidden="false"] {
    place-items: center;
  }

  .order-sheet__panel {
    margin-left: 0;
    width: min(760px, 96vw);
    height: min(92vh, 820px);
    max-height: min(92vh, 820px);
    border-radius: 34px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  }

  .order-sheet__grab {
    display: none;
  }
}

/* TABLET: ajustar densidad y proporciones */
@media (min-width: 769px) and (max-width: 1024px) {
  .order-sheet__panel {
    width: min(680px, 96vw);
    height: min(92vh, 820px);
    max-height: min(92vh, 820px);
  }

  .order-sheet__title {
    font-size: 32px;
  }

  .order-sheet__header {
    padding: 22px 22px 10px;
  }

  .order-sheet__list {
    padding: 6px 22px 10px;
    gap: 12px;
  }

  .order-item__thumb {
    width: 84px;
    height: 84px;
    border-radius: 22px;
  }

  .order-sheet__summary {
    padding: 8px 20px 10px;
    border-radius: 26px 26px 0 0;
  }

  .order-sheet__payBtn {
    height: 50px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .order-sheet__panel {
    /* Mantener estilo “sheet” también en teléfonos pequeños */
    width: min(520px, 92vw);
    border-radius: 44px 0 0 44px;
    border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }

  .order-sheet__header,
  .order-sheet__list,
  .order-sheet__summary {
    padding-left: 18px;
    padding-right: 18px;
  }

  .order-item__thumb {
    width: 96px;
    height: 96px;
    border-radius: 26px;
  }
}

/* TELÉFONO: más compacto y “sheet” consistente */
@media (max-width: 768px) {
  /*
    CHECKOUT + CUSTOMIZE (mobile iOS):
    .modal overflow hidden; .__panel position:absolute inset:0 + overflow-y:auto
    → ONE scroll surface (no nested grid/flex scroll — reliable on real iPhones).
  */
  .modal.order-sheet[aria-hidden="false"] {
    display: block;
    position: static;
    padding: 0;
    overflow: visible;
    height: auto;
    max-height: none;
    touch-action: auto;
  }

  .modal.order-sheet .modal__backdrop {
    display: none;
  }

  .order-sheet__panel {
    position: static;
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-y: auto;
    touch-action: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .order-sheet__header {
    flex: 0 0 auto;
    position: static;
    background: var(--surface);
    padding: 18px 20px 8px;
  }

  .order-sheet__title {
    font-size: 30px;
  }

  .order-sheet__close {
    width: 40px;
    height: 40px;
  }

  .order-sheet__list {
    padding: 6px 20px 10px;
    gap: 11px;
    flex: 0 0 auto;
    overflow: visible;
  }

  .order-item__thumb {
    width: 82px;
    height: 82px;
    border-radius: 22px;
  }

  .order-item__name {
    font-size: 15px;
  }

  .order-item__price {
    font-size: 15px;
  }

  .qty-pill__btn {
    width: 32px;
    height: 32px;
    border-radius: 13px;
  }

  .order-sheet__summary {
    flex: 0 0 auto;
    padding: 8px 18px calc(120px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    grid-template-columns: 1fr;
    background: var(--surface);
    box-shadow: none;
  }

  .order-sheet__totalAmount {
    font-size: 22px;
  }

  .order-sheet__payBtn {
    height: 50px;
    border-radius: 18px;
  }

  #paymentBlock,
  #tipBlock,
  .order-sheet__breakdown {
    grid-column: 1 / -1;
  }
}

.cart-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: 380px;
  overflow: auto;
}

.cart-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fbfcfe;
}

.cart-item__name {
  font-weight: 800;
}

.cart-item__sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.cart-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  height: 40px;
  padding: 0 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ghost-btn {
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  padding: 0 12px;
  font-weight: 800;
}

.ghost-btn:hover {
  background: rgba(148, 163, 184, 0.08);
}

.ghost-btn.danger {
  border-color: rgba(225, 29, 72, 0.25);
  color: #9f1239;
  background: rgba(225, 29, 72, 0.06);
}

.ghost-btn.danger:hover {
  background: rgba(225, 29, 72, 0.11);
}

/* Responsive: kiosk/tablet. Mantener NO-mobile-clásico, pero evitar romperse. */
/* TABLET (<=1024): header visible + sidebar compact icon-only */
@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
    --sidebar-w: 104px;
    --footer-h: 80px;
    --checkout-gutter-x: 18px;
  }

  /*
    Responsive shell contract:
    On tablet/phone the document is the only vertical page scroller.
    The previous kiosk model nested scroll inside .content while body was
    overflow:hidden, which is fragile on real iOS Safari.
  */
  body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100dvh;
    touch-action: pan-y;
  }

  .app {
    height: auto;
    min-height: calc(100dvh - var(--footer-safe-h) - var(--header-h));
    overflow: visible;
  }

  .content {
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-y: auto;
  }

  .kiosk-header {
    display: flex;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 34px;
  }

  .checkout-bar {
    border-radius: 20px;
    padding: 14px 16px;
  }

  .checkout-bar__title {
    font-size: 18px;
  }

  .checkout-bar__amount {
    font-size: 24px;
  }

  /* Sidebar compacto tablet */
  .brand__meta,
  .store-card,
  .sidebar-tools,
  .nav__title {
    display: none;
  }

  .sidebar {
    padding: 0 0 16px;
    border-radius: 0 20px 20px 0;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }

  .brand {
    padding: 20px 10px 16px;
    align-items: center;
  }

  .brand__logo {
    margin-bottom: 0;
    width: calc(100% - 12px);
    height: 60px;
    padding: 0;
    border-radius: 14px;
    background: #ffffff;
    --logo-zoom: 1.65;
    --logo-y: 11%;
  }

  .nav {
    padding: 0 6px;
  }

  .cat-btn {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 12px 6px;
    gap: 6px;
    border-radius: 22px;
  }

  .cat-btn span:last-child {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }
}

/* TELÉFONO (<=768): 1 columna + barra horizontal de categorías */
@media (max-width: 768px) {
  :root {
    /* Mantener categorías en sidebar izquierdo (como Imagen 2) */
    --sidebar-w: 92px;
    --footer-h: 76px;
    --header-h: 72px;
    --checkout-gutter-x: 12px;
    --phone-chrome-bottom: 12px;

    /* Quick add (+): 15% smaller on phone; nudged toward bottom-right corner */
    --quick-add-size: 29px;
    --quick-add-right: 12px;
    --quick-add-bottom: 8px;
    --quick-add-icon: 15px;
  }

  /*
    iOS: height:100% on html/body (global rule) caps scrollHeight — last sidebar
    categories stay under the fixed checkout bar when the product column is short.
  */
  html,
  body {
    height: auto;
    min-height: 100dvh;
  }

  .app {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: auto;
    min-height: calc(100dvh - var(--footer-safe-h) - var(--header-h));
    overflow: visible;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: manipulation;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    position: sticky;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h) - var(--footer-safe-h));
    max-height: calc(100dvh - var(--header-h) - var(--footer-safe-h));
    z-index: 5;
    min-height: 0;
    overflow: hidden;
    touch-action: auto;
  }

  .sidebar .brand {
    display: none;
  }

  .sidebar .nav {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar .nav__title {
    display: none;
  }

  .sidebar .cat-list {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* pan-y, no none: con none el dedo no puede desplazar esta misma lista
       (24 categorias, ~586px fuera de vista en telefono). */
    touch-action: pan-y;
    padding: 6px 0 calc(24px + var(--phone-chrome-bottom) + env(safe-area-inset-bottom, 0px));
  }

  .content {
    --content-pad-top: 16px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    overflow: visible;
    height: auto;
    min-height: auto;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
    overscroll-behavior-y: auto;
    padding: var(--content-pad-top) 16px 18px;
  }

  .search {
    display: none;
  }

  .mobile-cats {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    position: sticky;
    top: calc(0px - var(--content-pad-top));
    z-index: 9;
    margin: 0 0 12px;
    padding: 8px 0 12px;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-cats::-webkit-scrollbar {
    display: none;
  }

  .mobile-cat-btn {
    flex: 0 0 auto;
    min-height: 44px;
  }

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

  .product {
    border-radius: 26px;
    padding: 10px;
    min-height: 0;
  }

  .product__media {
    border-radius: 20px;
  }

  .product__name {
    font-size: 14px;
  }

  .product__price {
    font-size: 14px;
  }

  .checkout-bar {
    padding: 14px 14px;
    gap: 12px;
  }

  .checkout-bar__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .checkout-bar__title {
    font-size: 18px;
  }

  .checkout-bar__amount {
    font-size: 22px;
  }

  .order-coupon__input,
  .tip-custom input {
    font-size: 16px;
  }

  /* Modal en teléfono: full-width, 1 columna */
  .modal__panel {
    width: min(560px, 96vw);
    grid-template-columns: 1fr;
  }

  .modal__media {
    height: 240px;
  }

  .modal__media img {
    height: 240px;
  }

  /* Admin: use run.bat → /admin (React) */
}

/* TELÉFONO PEQUEÑO (<=420): 1 columna de productos para comodidad */
@media (max-width: 420px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------
   Responsive hardening (tablet + phone)
-------------------------------------------------------- */
@media (max-width: 1024px) {
  .service-type-modal__panel {
    width: min(500px, 94vw);
  }

  .service-type-modal__card {
    min-height: 164px;
  }

  .service-type-modal__label {
    font-size: 20px;
    letter-spacing: 0.1em;
  }

  .confirm-order-modal__panel {
    width: min(420px, 94vw);
  }

  .customer-info-modal__panel {
    width: min(760px, 96vw);
  }

  .customer-info-modal__title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .modal.service-type-modal[aria-hidden="false"],
  .modal.customer-info-modal[aria-hidden="false"],
  .modal.confirm-order-modal[aria-hidden="false"] {
    display: block;
    overflow: hidden;
    height: var(--modal-vvh, 100dvh);
    max-height: var(--modal-vvh, 100dvh);
    padding: 12px;
    touch-action: pan-y;
  }

  .modal.service-type-modal {
    padding: 12px;
  }

  .service-type-modal__panel {
    position: relative;
    z-index: 1;
    width: min(460px, 96vw);
    max-height: calc(var(--modal-vvh, 100dvh) - 24px);
    border-radius: 16px;
    padding: 14px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    margin: 0 auto;
  }

  .service-type-modal__head {
    padding: 2px 44px 10px 2px;
  }

  .service-type-modal__title {
    font-size: 16px;
  }

  .service-type-modal__card {
    min-height: 148px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .service-type-modal__icon {
    width: 66px;
    height: 66px;
  }

  .service-type-modal__icon img {
    width: 60px;
    height: 60px;
  }

  .service-type-modal__label {
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .order-sheet__service {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label action"
      "value action";
    gap: 8px 10px;
    padding: 10px;
  }

  .order-sheet__serviceLabel {
    grid-area: label;
  }

  .order-sheet__serviceValue {
    grid-area: value;
    font-size: 12px;
  }

  .order-sheet__serviceChange {
    grid-area: action;
    height: 34px; /* easier touch target */
    min-width: 74px;
  }

  .confirm-order-modal__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 96vw);
    max-height: calc(var(--modal-vvh, 100dvh) - 24px);
    border-radius: 16px;
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    margin: 0 auto;
  }

  .confirm-order-modal__title {
    font-size: 19px;
  }

  .confirm-order-modal__line {
    padding: 8px 0;
    font-size: 14px;
  }

  .confirm-order-modal__line strong {
    font-size: 16px;
  }

  .confirm-order-modal__actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .confirm-order-modal__btn {
    height: 48px;
  }

  .customer-info-modal__panel {
    position: absolute;
    inset: 12px;
    z-index: 1;
    width: auto;
    max-height: none;
    border-radius: 16px;
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .customer-info-modal__title {
    font-size: 22px;
  }

  .customer-info-modal__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .customer-info-modal__field > span {
    font-size: 14px;
  }

  .customer-info-modal__field input {
    height: 48px;
    font-size: 16px;
  }

  .customer-info-modal__actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .customer-info-modal__btn {
    height: 46px;
    width: 100%;
  }
}

/* Landscape phones / short viewport */
@media (max-height: 700px) {
  .service-type-modal__panel {
    max-height: 92vh;
    overflow: auto;
  }

  .service-type-modal__card {
    min-height: 124px;
  }

  .service-type-modal__icon {
    width: 56px;
    height: 56px;
  }

  .service-type-modal__icon img {
    width: 52px;
    height: 52px;
  }

  .customer-info-modal__panel {
    max-height: 92vh;
    overflow: auto;
  }
}

/* ================================================================
   NEW PRODUCT SHEET v2 — Two-column "Culinary Curator" design
   Markup lives in product-modal.html  (.ps2 namespace)
================================================================ */

/* Override base .modal for ps2 so it uses full-screen centering */
.modal.ps2 {
  padding: 0;
  z-index: 62;
}
@media (min-width: 769px) {
  .modal.ps2[aria-hidden="false"] {
    display: grid;
    place-items: center;
  }
}

/* Panel — desktop/tablet layout (mobile overrides below). */
@media (min-width: 769px) {
  .ps2__panel {
    position: relative;
    z-index: 1;
    width: min(810px, 96vw);
    max-height: min(88vh, 882px);
    height: min(88vh, 882px);
    background: var(--surface);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.36);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
  }
}

@media (min-width: 769px) {
  .ps2__header {
    grid-column: 1;
    grid-row: 1;
  }

  .ps2__productHead {
    grid-column: 1;
    grid-row: 2;
  }

  .ps2__body {
    grid-column: 1;
    grid-row: 3;
  }

  .ps2__right {
    grid-column: 2;
    grid-row: 1 / -1;
    border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
}

/* Sticky header bar (CUSTOMIZE + close) */
.ps2__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 18px 20px 14px;
  background: var(--primary);
  flex: 0 0 auto;
}

.ps2__headerLabel {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
}

.ps2__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ps2__close svg {
  width: 16px;
  height: 16px;
}

/* La X vive dentro de .ps2__header, que en el layout de dos columnas ocupa
   SOLO la columna de texto. Por eso quedaba a 296px del borde derecho del
   dialogo, flotando en la costura con la foto en vez de en la esquina.
   Poniendo el header en `static` la X se ancla al panel, que ya es relative. */
@media (min-width: 769px) {
  .ps2__header {
    position: static;
  }

  .ps2__close {
    top: 16px;
    right: 16px;
    transform: none;
    /* queda sobre la foto: necesita quedar por encima y leerse sobre
       cualquier imagen */
    z-index: 3;
    background: rgba(0, 0, 0, 0.42);
    border-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
  }
}

/* Product head (title + desc) */
.ps2__productHead {
  padding: 18px 20px 10px;
  flex: 0 0 auto;
}

.ps2__productTitle {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ps2__productDesc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Scrollable body — same contract as .order-sheet__list */
.ps2__body {
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 0 20px 16px;
  /* La barra estaba oculta (`scrollbar-width: none`). En un plato como Beef
     Kabob Platter quedan 900px de contenido abajo — incluido un grupo
     REQUERIDO, "Steak Doneness" — y nada en pantalla decia que hubiera mas:
     el contenido simplemente se cortaba en el borde. Una barra fina alcanza
     para que se note. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 45%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  align-content: start;
}

.ps2__body::-webkit-scrollbar {
  width: 6px;
}

.ps2__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
}

.ps2__body::-webkit-scrollbar-track {
  background: transparent;
}

/* Section headings */
.ps2__section {
  margin-top: 20px;
}

.ps2__sectionTitle {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

/* Option group container — same visual rhythm as .ps2__drinksSection (flat, no extra “card” box) */
.ps2__groupWrap {
  margin-top: 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.ps2__groupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ps2__groupTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}

.ps2__groupMeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ps2__groupOptional {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.ps2__groupRequired {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: color-mix(in srgb, var(--muted) 86%, transparent);
}

/* Collapse toggle button */
.ps2__groupToggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.15s ease;
}

.ps2__groupToggle[aria-expanded="false"] {
  /* minus → shown = body visible, so we start visible */
}

/* Option grid (2-column chips) */
.ps2__optionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Option chip button */
.ps2__optionBtn {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.ps2__optionBtn:active {
  transform: scale(0.98);
}

.ps2__optionBtn.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: var(--primary);
  font-weight: 800;
}

.ps2__optionCheck {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--line) 80%, transparent);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--primary);
  transition: border-color 0.12s ease;
}

.ps2__optionBtn.is-selected .ps2__optionCheck {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.ps2__optionLabel {
  flex: 1;
}

.ps2__optionPrice {
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  flex: 0 0 auto;
}

/* ── Rich image option cards (ps2__optionCard) ── */
.ps2__optionCardGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
}

.ps2__optionCard {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  position: relative;
}

.ps2__optionCard:active {
  transform: scale(0.97);
}

.ps2__optionCard.is-selected {
  border-color: var(--primary);
  border-width: 1.5px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

/* Square image thumbnail */
.ps2__optionCardThumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 72px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  display: block;
}

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

/* Placeholder when no image */
.ps2__optionCardPlaceholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface)),
    color-mix(in srgb, var(--primary) 5%, var(--surface))
  );
}

/* Unified placeholder used across cards */
.ps2__thumbPlaceholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120px 80px at 80% 20%, rgba(34, 165, 89, 0.12), transparent 60%),
    radial-gradient(140px 90px at 20% 70%, rgba(89, 12, 42, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(89, 12, 42, 0.08), rgba(233, 229, 231, 0.8));
}

/* Text body */
.ps2__optionCardBody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps2__optionCardName {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps2__optionCard.is-selected .ps2__optionCardName {
  color: var(--text);
}

.ps2__optionCardDesc {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price line in rich cards — same spacing as .ps2__drinkPrice */
.ps2__optionCardBody .ps2__optionPrice {
  margin-top: 2px;
  display: block;
}

/* Check badge — top-right corner */
.ps2__optionCardCheck {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.ps2__optionCardCheck svg {
  width: 13px;
  height: 13px;
}

/* Drink recommendation cards (horizontal scroll) */
.ps2__drinksSection {
  margin-top: 18px;
}

.ps2__drinkGrid {
  display: grid;
  /* `1fr` es minmax(auto, 1fr): la columna NO puede achicarse por debajo del
     ancho minimo de la tarjeta (miniatura de 72px + el nombre sin cortar). En
     el modal de un telefono eso hacia 484px de contenido en 335px, y la
     segunda columna — Water y S.Pellegrino — quedaba fuera de la pantalla,
     recortada por el overflow-x del cuerpo del modal y sin forma de tocarla.
     `auto-fit` + minmax(0, ...) deja que se achique, y baja a una sola columna
     cuando de verdad no entran dos. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

/* En un telefono dos columnas dejan 68px para el nombre y "Iced Arabic
   Limonade" queda en "Iced Ar...". Una sola columna le da el ancho entero. */
@media (max-width: 520px) {
  .ps2__drinkGrid {
    grid-template-columns: 1fr;
  }
}

.ps2__drinkCard {
  /* Sin esto la tarjeta impone su ancho minimo a la columna y vuelve el
     desborde, aunque la columna diga minmax(0, 1fr). */
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  position: relative;
  min-height: 96px;
}

.ps2__drinkCard:active {
  transform: scale(0.97);
}

.ps2__drinkCard.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.ps2__drinkThumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ps2__drinkThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps2__drinkInfo {
  flex: 1;
  min-width: 0;
}

.ps2__drinkName {
  /* Es un <span>, y en una caja inline `overflow: hidden` y los puntos
     suspensivos no hacen nada: "Iced Arabic Limonade" se desbordaba entero en
     vez de recortarse. Como bloque si recorta. */
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps2__drinkPrice {
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  margin-top: 2px;
}

/* Note textarea */
.ps2__textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-weight: 600;
  font-size: 14px;
  outline: none;
  color: var(--text);
  resize: none;
  font-family: inherit;
}

.ps2__textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* ── Right column ── */
.ps2__right {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-height: 0;
}

.ps2__media {
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
  max-height: 420px;
}

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

/* Order summary in right column */
.ps2__summary {
  padding: 14px 18px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  flex: 0 0 auto;
}

.ps2__summaryItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.ps2__summaryName {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.ps2__summaryPrice {
  font-size: 15px;
  font-weight: 900;
  color: var(--danger);
  white-space: nowrap;
  flex: 0 0 auto;
}

.ps2__summaryLine {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0 3px 10px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.ps2__summaryLineName {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
}

.ps2__summaryLinePrice {
  font-size: 12px;
  font-weight: 800;
  color: var(--danger);
  white-space: nowrap;
}

.ps2__summaryLinePrice.free {
  color: #16a34a;
}

/* Footer: qty + add button */
.ps2__footer {
  padding: 14px 18px 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
  background: var(--surface);
}

.ps2__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--line) 32%, transparent);
}

.ps2__qty button {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.ps2__qty strong {
  width: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.ps2__addBtn {
  height: 54px;
  border-radius: 16px;
  border: 0;
  background: #22a559;
  color: white;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(34, 165, 89, 0.22);
  transition: filter 0.12s ease, transform 0.1s ease;
}

.ps2__addBtn:hover {
  filter: brightness(1.07);
}

.ps2__addBtn:active {
  transform: scale(0.985);
}

.ps2__addBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/*
  MOBILE CUSTOMIZE (≤768px)
  ─────────────────────────────────────────────────────────────────
  iOS Safari rule: elements with `position:fixed` cannot be touch-
  scrolled even with overflow:auto.  The ONLY reliable pattern is:
    modal (fixed, overflow:hidden) → panel child (overflow-y:auto)
  This is the exact same contract the checkout uses (.order-sheet).
  ─────────────────────────────────────────────────────────────────
*/
@media (max-width: 768px) {
  /* 1 — Modal shell: fixed frame, no scroll */
  .modal.ps2 {
    padding: 0 !important;
  }

  .modal.ps2[aria-hidden="false"] {
    display: block !important;
    position: static;
    overflow: visible;
    height: auto;
    max-height: none;
    padding: 0;
    place-items: unset !important;
    touch-action: pan-y;
  }

  .modal.ps2 .modal__backdrop {
    display: none;
  }

  /* 2 — Panel: normal document flow; body owns the scroll on mobile. */
  .modal.ps2 .ps2__panel {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-y: auto;
    touch-action: auto;
    /* Extra bottom padding so OK clears Safari bottom chrome */
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  /* 3 — Children: normal flow inside the flex column (no overflow of their own).
     CRITICAL: must reset ALL overflow/scroll properties from the global .ps2__body rule.
     On iOS, -webkit-overflow-scrolling:touch on a non-scrolling element creates a ghost
     scroll context that consumes swipe gestures before they reach the parent scroller. */
  .modal.ps2 .ps2__body {
    flex: 0 0 auto;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
    touch-action: pan-y;
    min-height: 0;
    padding: 0 20px 16px;
  }

  .modal.ps2 .ps2__right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    background: var(--surface);
  }

  .ps2__media {
    display: none;
  }

  .ps2__summary {
    flex: 0 0 auto;
    border-top: none;
    padding: 10px 20px 6px;
    margin-top: 0;
    background: var(--surface);
  }

  .ps2__footer {
    flex: 0 0 auto;
    background: var(--surface);
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    padding: 10px 16px 12px;
  }

  /* 4 — Prevent iOS zoom on focus (font < 16px triggers it) */
  .modal.ps2 .ps2__textarea {
    font-size: 16px;
  }
}

body.modal-open .modal.order-sheet .order-sheet__panel,
body.modal-open .modal.ps2 .ps2__panel {
  touch-action: pan-y;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ps2__panel {
    width: min(740px, 96vw);
    height: min(86vh, 828px);
    max-height: min(86vh, 828px);
    grid-template-columns: 1fr 280px;
  }
}

/* Narrow screens: stack card grid to 1 column */
@media (max-width: 520px) {
  .ps2__optionCardGrid {
    grid-template-columns: 1fr;
  }

  .ps2__optionCardThumb {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
  }

  .ps2__drinkThumb {
    width: 60px;
    height: 60px;
  }
}


/* ---------------------------------------------------------------------------
   Tap to pay (Stripe Terminal)
   El cliente mira el lector, no la pantalla: la animacion solo tiene que decir
   "es ahora y es ahi". Nada de texto largo con la tarjeta en la mano.
--------------------------------------------------------------------------- */
.terminal-tap__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 148px;
  margin: 8px 0 4px;
}

.terminal-tap__card {
  width: 92px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3d2b36 0%, #590c2a 100%);
  box-shadow: 0 8px 20px rgba(89, 12, 42, 0.28);
  position: relative;
  z-index: 1;
  animation: terminalTapNudge 2.4s ease-in-out infinite;
}

.terminal-tap__card::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background: #e8c46a;
}

.terminal-tap__waves {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.terminal-tap__waves span {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(89, 12, 42, 0.35);
  opacity: 0;
  animation: terminalTapWave 2.4s ease-out infinite;
}

.terminal-tap__waves span:nth-child(2) { animation-delay: 0.6s; }
.terminal-tap__waves span:nth-child(3) { animation-delay: 1.2s; }

@keyframes terminalTapWave {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes terminalTapNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.terminal-tap__lead {
  margin: 4px 0 2px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #1f1720;
}

.terminal-tap__hint {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #7c6b74;
}

/* Quien pidio menos movimiento en el sistema no deberia recibir un anuncio
   parpadeando a 30 cm de la cara. */
@media (prefers-reduced-motion: reduce) {
  .terminal-tap__card,
  .terminal-tap__waves span {
    animation: none;
  }
  .terminal-tap__waves span { opacity: 0.4; }
}

/* ---------------------------------------------------------------------------
   Area tactil minima en tactil
   Varios botones se dibujan de 29-38px porque asi entran en el diseno, pero un
   dedo necesita ~44px. En vez de agrandarlos — cambiaria el diseno aprobado —
   se les extiende el area sensible con un pseudo-elemento invisible. El boton
   se ve igual y se acierta el doble de veces.
   Solo en punteros gruesos: con mouse los 29px se aciertan sin problema y un
   area invisible mas grande robaria clics a lo que tiene al lado.
--------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* OJO: aca solo van botones SIN posicion propia. `.product__quick-add` y
     `.ps2__close` ya son `absolute` — si se les pisa el position se salen de su
     rincon: la X de CUSTOMIZE terminaba pegada al titulo en vez de a la
     derecha. Al ser `absolute` ya son contenedor de su propio ::after, asi que
     no necesitan nada. */
  .qty-pill__btn,
  #modalMinus,
  #modalPlus {
    position: relative;
  }

  .product__quick-add::after,
  .qty-pill__btn::after,
  .ps2__close::after,
  #modalMinus::after,
  #modalPlus::after {
    content: "";
    position: absolute;
    /* centra un area de 44x44 sobre el boton, mida lo que mida */
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* no pinta nada y no intercepta el scroll */
    pointer-events: auto;
  }
}

/* ---------------------------------------------------------------------------
   Opciones obligatorias de un extra (sabor de la bebida, del jugo)
   Se piden dentro del mismo modal: tocar "Soda" sin elegir sabor hacia que el
   pedido se cayera al pagar, con un mensaje que hablaba de opciones bajo un
   titulo que decia "Payment failed".
--------------------------------------------------------------------------- */
.ps2__upsell {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.ps2__upsellHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.ps2__upsellReq {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ps2__upsellReq.is-missing {
  color: var(--danger);
}

.ps2__upsellChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps2__upsellChip {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.ps2__upsellChip.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Customize en tablet/escritorio: quien scrollea es el PANEL
   ---------------------------------------------------------------------------
   El propio contrato de este archivo dice que dentro de un modal `fixed` el
   scroller tiene que ser su HIJO DIRECTO. Aca no lo era:

     #productModal   position: fixed
       .ps2__panel   overflow-y: hidden     <- hijo directo, no scrolleaba
         #ps2Body    overflow-y: auto       <- el scroller, un nivel mas abajo

   Con `body.modal-open { overflow: hidden }` tampoco habia scroll de pagina de
   respaldo, asi que en los platos largos —Chicken Rice Bowl, los platters— no
   se podia llegar al final con el dedo. Solo se notaba ahi: en los cortos no
   hay nada que desplazar.

   Ahora scrollea el panel, y la columna derecha queda pegada arriba para que la
   foto y el boton OK no se vayan de pantalla.
--------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .ps2__panel {
    height: auto;
    max-height: min(88vh, 882px);
    overflow-y: auto;
    grid-template-rows: auto auto auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .ps2__body {
    overflow: visible;
    max-height: none;
  }

  .ps2__right {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: min(88vh, 882px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .ps2__media {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ps2__panel,
  .ps2__right {
    max-height: min(86vh, 828px);
  }
}

/* ---------------------------------------------------------------------------
   UN SOLO SCROLLER PARA LOS MODALES DE PANTALLA COMPLETA (<=768px)
   ---------------------------------------------------------------------------
   Antes el scroll dependia de que creciera el documento, y para lograrlo se
   ponia `overflow-y: auto` en `html` Y en `body` al mismo tiempo, encima de un
   `html, body { height: 100% }` global que peleaba con `height: auto`. Dos
   contenedores de scroll anidados y una altura en disputa.

   En Chrome de Android, tablet en vertical, esa combinacion capaba el documento
   (1236px medidos cuando el panel media ~1754) y el resto del modal quedaba
   recortado: no habia nada que desplazar. En telefono y en horizontal la cuenta
   daba distinto y funcionaba de casualidad.

   Ahora el scroller es uno solo y explicito: el propio modal, fijo a la
   pantalla. El fondo no scrollea, el documento no tiene que crecer, y no
   dependemos de dvh ni de que html y body se pongan de acuerdo.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html.mobile-screen-modal-open,
  body.mobile-screen-modal-open {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    /* NO poner touch-action: none aca. Ver el aviso de la linea ~1334: el
       navegador intersecta touch-action con TODA la cadena de ancestros, asi
       que un none aca anula el pan-y del modal y el dedo deja de desplazar,
       aunque el scroller este perfecto. overflow: hidden ya bloquea el fondo. */
  }

  /* El contenedor fijo SOLO posiciona: no desplaza nada.

     iOS Safari no desplaza de forma fiable con el dedo un position: fixed que
     es a la vez su propio contenedor de scroll. Medido en un iPhone: el gesto
     llegaba (touchmove, cancelado=false), habia 361px de recorrido y el
     scrollTop no se movia de 0. En Chrome esa misma estructura funciona, por
     eso paso la verificacion. El scroller tiene que ser un hijo en flujo. */
  body.mobile-screen-modal-open .modal.ps2[aria-hidden="false"],
  body.mobile-screen-modal-open .modal.order-sheet[aria-hidden="false"],
  body.mobile-screen-modal-open .modal.payment-modal[aria-hidden="false"] {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* El panel es el scroller: elemento normal, no fijo.
     min-height: 0 es imprescindible — sin el, un hijo flex no puede achicarse
     por debajo de su contenido y no se genera recorrido. */
  body.mobile-screen-modal-open .modal.ps2 .ps2__panel,
  body.mobile-screen-modal-open .modal.order-sheet .order-sheet__panel,
  body.mobile-screen-modal-open .modal.payment-modal .payment-modal__panel {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* El `display: flex` de la fila le gana al `[hidden]` del navegador (los
   estilos del autor pisan los del user-agent). Por eso una fila marcada como
   oculta desde JS se seguia viendo: "Discount $0.00" aparecia siempre, y la
   linea de impuesto quedaba a la vista aunque ya estuviera sumada arriba. */
.order-sheet__line[hidden] {
  display: none !important;
}