/* ════════════════════════════════════════════════════════════════
   CITY POKÉ — SISTEMA DE DISEÑO v1.0
   Sigue las pautas de DISEÑO.md.
   Carga después de Bootstrap reset y Font Awesome.
   ════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════ */
:root {
  /* ── Color: marca ─────────────────────── */
  --cp-primary:        #F49D5F;
  --cp-primary-hover:  #E07F3F;
  --cp-primary-soft:   #FCEEDF;
  --cp-primary-dark:   #B85F1A;

  /* ── Color: neutros ───────────────────── */
  --cp-neutral-0:      #FFFFFF;
  --cp-neutral-50:     #FAFAFA;
  --cp-neutral-100:    #F4F4F5;
  --cp-neutral-200:    #E4E4E7;
  --cp-neutral-300:    #D4D4D8;
  --cp-neutral-400:    #A1A1AA;
  --cp-neutral-500:    #71717A;
  --cp-neutral-700:    #3F3F46;
  --cp-neutral-900:    #18181B;

  /* ── Color: semánticos ────────────────── */
  --cp-success:        #16A34A;
  --cp-success-soft:   #DCFCE7;
  --cp-warning:        #F59E0B;
  --cp-warning-soft:   #FEF3C7;
  --cp-danger:         #DC2626;
  --cp-danger-soft:    #FEE2E2;
  --cp-info:           #2563EB;
  --cp-info-soft:      #DBEAFE;

  /* ── Tipografía ───────────────────────── */
  --cp-font-body:    'Lato', system-ui, -apple-system, sans-serif;
  --cp-font-display: 'Patrick Hand', 'Lato', sans-serif;

  --cp-text-xs:    0.75rem;     /* 12px */
  --cp-text-sm:    0.875rem;    /* 14px */
  --cp-text-base:  1rem;        /* 16px */
  --cp-text-lg:    1.125rem;    /* 18px */
  --cp-text-xl:    1.25rem;     /* 20px */
  --cp-text-2xl:   1.5rem;      /* 24px */
  --cp-text-3xl:   2rem;        /* 32px */
  --cp-text-4xl:   2.625rem;    /* 42px */

  --cp-leading-tight:  1.2;
  --cp-leading-snug:   1.4;
  --cp-leading-normal: 1.6;

  --cp-weight-regular: 400;
  --cp-weight-bold:    700;
  --cp-weight-black:   900;

  /* ── Espaciado ────────────────────────── */
  --cp-space-1:  4px;
  --cp-space-2:  8px;
  --cp-space-3:  12px;
  --cp-space-4:  16px;
  --cp-space-6:  24px;
  --cp-space-8:  32px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-24: 96px;

  /* ── Radios ───────────────────────────── */
  --cp-radius-sm:   8px;
  --cp-radius-md:   12px;
  --cp-radius-lg:   16px;
  --cp-radius-xl:   24px;
  --cp-radius-full: 9999px;

  /* ── Sombras ──────────────────────────── */
  --cp-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
  --cp-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);
  --cp-shadow-lg: 0 12px 32px rgba(24, 24, 27, 0.12);
  --cp-shadow-focus: 0 0 0 3px rgba(244, 157, 95, 0.30);

  /* ── Transiciones ─────────────────────── */
  --cp-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --cp-transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --cp-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────── */
  --cp-header-height:        72px;
  --cp-banner-height:        40px;
  --cp-banner-height-mobile: 36px;
  --cp-sidebar-width:        240px;
  --cp-cart-width:           320px;
  --cp-container-max:        1280px;
}


/* ══════════════════════════════════════════
   2. RESET / BASE
   ══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-base);
  line-height: var(--cp-leading-normal);
  color: var(--cp-neutral-900);
  background: var(--cp-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--cp-transition-fast);
}
a:hover {
  color: var(--cp-primary-hover);
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
button:disabled {
  cursor: not-allowed;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--cp-weight-bold);
  line-height: var(--cp-leading-tight);
  color: var(--cp-neutral-900);
}

p { margin: 0; }


/* ══════════════════════════════════════════
   3. TIPOGRAFÍA GLOBAL — UTILIDADES
   ══════════════════════════════════════════ */
.cp-display {
  font-family: var(--cp-font-display);
  font-weight: var(--cp-weight-regular);
  letter-spacing: 0.01em;
}

.cp-h1 { font-size: var(--cp-text-4xl); line-height: var(--cp-leading-tight); }
.cp-h2 { font-size: var(--cp-text-3xl); line-height: var(--cp-leading-tight); }
.cp-h3 { font-size: var(--cp-text-2xl); line-height: var(--cp-leading-snug); }
.cp-h4 { font-size: var(--cp-text-xl);  line-height: var(--cp-leading-snug); }

.cp-text-muted   { color: var(--cp-neutral-500); }
.cp-text-primary { color: var(--cp-primary-dark); }
.cp-text-success { color: var(--cp-success); }
.cp-text-danger  { color: var(--cp-danger); }


/* ══════════════════════════════════════════
   4. LAYOUT BASE
   ══════════════════════════════════════════ */
.cp-container {
  max-width: var(--cp-container-max);
  margin: 0 auto;
  padding-left: var(--cp-space-4);
  padding-right: var(--cp-space-4);
}

.cp-section {
  padding-top: var(--cp-space-12);
  padding-bottom: var(--cp-space-12);
}


/* ══════════════════════════════════════════
   5. COMPONENTES
   ══════════════════════════════════════════ */

/* ── 5.1 Banner promocional ─────────────── */
.cp-promo-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  height: var(--cp-banner-height-mobile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cp-weight-bold);
  font-size: var(--cp-text-sm);
  padding: 0 var(--cp-space-4);
  gap: var(--cp-space-3);
}
.cp-promo-banner__icon { font-size: 1rem; }
.cp-promo-banner__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: var(--cp-weight-regular);
  opacity: 0.95;
}

@media (min-width: 768px) {
  .cp-promo-banner {
    height: var(--cp-banner-height);
    font-size: var(--cp-text-base);
  }
}

/* ── 5.2 Header ─────────────────────────── */
.cp-header {
  position: sticky;
  top: var(--cp-banner-height-mobile);
  z-index: 40;
  background: var(--cp-neutral-0);
  border-bottom: 1px solid var(--cp-neutral-200);
  height: var(--cp-header-height);
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .cp-header { top: var(--cp-banner-height); }
}

.cp-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cp-space-4);
  width: 100%;
  max-width: var(--cp-container-max);
  margin: 0 auto;
  padding: 0 var(--cp-space-4);
}

.cp-header__logo img {
  height: 48px;
  width: auto;
}
@media (min-width: 768px) {
  .cp-header__logo img { height: 56px; }
}

.cp-nav {
  display: none;
  justify-content: center;
  gap: var(--cp-space-6);
}
.cp-nav__link {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cp-neutral-700);
  padding: var(--cp-space-2) var(--cp-space-1);
  border-bottom: 2px solid transparent;
  transition: color var(--cp-transition-fast), border-color var(--cp-transition-fast);
}
.cp-nav__link:hover {
  color: var(--cp-primary-dark);
  border-bottom-color: var(--cp-primary);
}
@media (min-width: 1024px) {
  .cp-nav { display: flex; }
}

.cp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}

.cp-header__login {
  background: none;
  border: 0;
  color: var(--cp-neutral-700);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  padding: 8px 12px;
  cursor: pointer;
  transition: color var(--cp-transition-fast);
}
.cp-header__login:hover {
  color: var(--cp-primary-dark);
}

.cp-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cp-radius-full);
  color: var(--cp-neutral-700);
  font-size: 1.125rem;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
  position: relative;
}
.cp-icon-btn:hover {
  background: var(--cp-neutral-100);
  color: var(--cp-primary-dark);
}
.cp-icon-btn__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  font-size: 0.625rem;
  font-weight: var(--cp-weight-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--cp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Mobile: hamburguesa + drawer */
.cp-hamburger {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .cp-hamburger { display: none; }
}

.cp-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--cp-neutral-0);
  box-shadow: var(--cp-shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--cp-transition-base);
  z-index: 90;
  padding: var(--cp-space-4);
  display: flex;
  flex-direction: column;
}
.cp-mobile-drawer.is-open {
  transform: translateX(0);
}
.cp-mobile-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cp-transition-base);
  z-index: 80;
}
.cp-mobile-drawer__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cp-mobile-drawer__close {
  align-self: flex-end;
  margin-bottom: var(--cp-space-4);
}
.cp-mobile-drawer__nav { display: flex; flex-direction: column; gap: var(--cp-space-2); }
.cp-mobile-drawer__nav-link {
  display: block;
  padding: var(--cp-space-3) var(--cp-space-2);
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cp-neutral-700);
  border-bottom: 1px solid var(--cp-neutral-100);
}

/* ── 5.3 Footer ─────────────────────────── */
.cp-footer {
  background: var(--cp-neutral-900);
  color: var(--cp-neutral-300);
  padding: var(--cp-space-12) 0 var(--cp-space-6);
  margin-top: var(--cp-space-16);
}
.cp-footer__grid {
  display: grid;
  gap: var(--cp-space-8);
}
@media (min-width: 768px) {
  .cp-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.cp-footer__logo img {
  max-width: 180px;
  filter: brightness(0) invert(1);
}
.cp-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
  font-size: var(--cp-text-sm);
}
.cp-footer__links a:hover { color: var(--cp-primary); }
.cp-footer__social {
  display: flex;
  gap: var(--cp-space-3);
}
.cp-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: var(--cp-radius-full);
  background: rgba(255,255,255,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-neutral-0);
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}
.cp-footer__social a:hover {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}
.cp-footer__copy {
  margin-top: var(--cp-space-12);
  padding-top: var(--cp-space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-400);
  text-align: center;
}

/* ── 5.4 Botones ────────────────────────── */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-2);
  padding: 12px 24px;
  font-family: inherit;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  line-height: 1;
  border-radius: var(--cp-radius-full);
  transition: background var(--cp-transition-fast),
              color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.cp-btn:focus-visible {
  outline: none;
  box-shadow: var(--cp-shadow-focus);
}

.cp-btn--primary {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}
.cp-btn--primary:hover {
  background: var(--cp-primary-hover);
  color: var(--cp-neutral-0);
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-1px);
}
.cp-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--cp-shadow-sm);
}
.cp-btn--primary:disabled {
  background: var(--cp-neutral-200);
  color: var(--cp-neutral-400);
  transform: none;
  box-shadow: none;
}

.cp-btn--secondary {
  background: var(--cp-neutral-0);
  color: var(--cp-neutral-900);
  border-color: var(--cp-neutral-300);
}
.cp-btn--secondary:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary-dark);
}

.cp-btn--ghost {
  background: transparent;
  color: var(--cp-neutral-700);
}
.cp-btn--ghost:hover {
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-900);
}

.cp-btn--lg {
  padding: 16px 32px;
  font-size: var(--cp-text-lg);
}
.cp-btn--block {
  display: flex;
  width: 100%;
}

/* Botón circular para añadir al carrito */
.cp-btn-add {
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--cp-shadow-sm);
  transition: background var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-btn-add:hover {
  background: var(--cp-primary-hover);
  box-shadow: var(--cp-shadow-md);
  transform: scale(1.05);
}
@media (min-width: 768px) {
  .cp-btn-add { width: 40px; height: 40px; font-size: 1.125rem; }
}

/* ── 5.5 Inputs ─────────────────────────── */
.cp-input,
.cp-textarea,
.cp-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--cp-space-4);
  font-family: inherit;
  font-size: var(--cp-text-base);
  color: var(--cp-neutral-900);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast);
}
.cp-textarea {
  height: auto;
  min-height: 88px;
  padding: var(--cp-space-3) var(--cp-space-4);
  resize: vertical;
}
.cp-input:focus,
.cp-textarea:focus,
.cp-select:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: var(--cp-shadow-focus);
}
.cp-input::placeholder,
.cp-textarea::placeholder {
  color: var(--cp-neutral-400);
}

.cp-field {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}
.cp-label {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-700);
}
.cp-field-error {
  font-size: var(--cp-text-xs);
  color: var(--cp-danger);
  display: flex;
  align-items: center;
  gap: var(--cp-space-1);
}

/* ── 5.6 Cards ──────────────────────────── */
.cp-card {
  background: var(--cp-neutral-0);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-card--interactive {
  cursor: pointer;
}
.cp-card--interactive:hover {
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-2px);
}

/* Card grande de elección (where) */
.cp-choice-card {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  padding: var(--cp-space-6);
  background: var(--cp-neutral-0);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow-sm);
  transition: box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast),
              border-color var(--cp-transition-fast);
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.cp-choice-card:hover {
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--cp-primary-soft);
  color: inherit;
}
.cp-choice-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: background var(--cp-transition-fast),
              color var(--cp-transition-fast);
}
.cp-choice-card:hover .cp-choice-card__icon {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}
.cp-choice-card__body { flex: 1; min-width: 0; }
.cp-choice-card__title {
  font-size: var(--cp-text-xl);
  font-weight: var(--cp-weight-bold);
  margin-bottom: 2px;
}
.cp-choice-card__subtitle {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
}
.cp-choice-card__arrow {
  color: var(--cp-neutral-400);
  font-size: 1.125rem;
  transition: color var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-choice-card:hover .cp-choice-card__arrow {
  color: var(--cp-primary);
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .cp-choice-card { padding: var(--cp-space-8); gap: var(--cp-space-6); }
  .cp-choice-card__icon { width: 72px; height: 72px; font-size: 1.75rem; }
  .cp-choice-card__title { font-size: var(--cp-text-2xl); }
}

/* ── 5.7 Badges ─────────────────────────── */
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-1);
  padding: 2px 10px;
  height: 22px;
  font-size: 0.6875rem;
  font-weight: var(--cp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--cp-radius-full);
}
.cp-badge--veggie  { background: var(--cp-success-soft); color: var(--cp-success); }
.cp-badge--top     { background: var(--cp-primary-soft); color: var(--cp-primary-dark); }
.cp-badge--promo   { background: var(--cp-warning-soft); color: #92400E; }
.cp-badge--neutral { background: var(--cp-neutral-100); color: var(--cp-neutral-700); }

/* ── 5.8 Toast (legacy fixed) — DESACTIVADO 2026-06-01 ──────────
   Había DOS definiciones de .cp-toast (esta + línea ~2716 dentro del
   layer flex). Mezcladas hacían que el toast heredase position:fixed
   + bottom + transform de aquí, pero el translateX(-50%) era
   sobrescrito por la animación de la segunda regla → el toast salía
   fuera del viewport y el usuario nunca veía los mensajes de error
   ("No se pudo enviar el SMS…"), creyendo que el modal estaba
   bloqueado. La definición buena vive en .cp-toast-layer + .cp-toast
   más abajo. Mantenemos solo los modificadores de color por
   compatibilidad con cualquier toast antiguo. */
.cp-toast--warning { background: var(--cp-warning); color: var(--cp-neutral-900); }

/* ── 5.9 Spinner ─────────────────────────── */
.cp-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cp-spin 0.6s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════
   6. PÁGINAS — /where (entrada al flujo)
   ══════════════════════════════════════════ */
.cp-where {
  padding: var(--cp-space-12) 0;
  min-height: calc(100vh - var(--cp-header-height) - var(--cp-banner-height-mobile));
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cp-where__inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--cp-space-4);
}
.cp-where__back {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-500);
  margin-bottom: var(--cp-space-6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--cp-transition-fast);
}
.cp-where__back:hover { color: var(--cp-primary-dark); }
.cp-where__title {
  font-size: var(--cp-text-3xl);
  line-height: var(--cp-leading-tight);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin-bottom: var(--cp-space-8);
  max-width: 18ch;
}
.cp-where__list {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}

@media (min-width: 768px) {
  .cp-where { padding: var(--cp-space-16) 0; }
  .cp-where__title { font-size: var(--cp-text-4xl); }
}


/* ══════════════════════════════════════════
   6.B PÁGINAS — /recogida (collection)
   ══════════════════════════════════════════ */
.cp-collection {
  padding: var(--cp-space-8) 0 var(--cp-space-12);
}
.cp-collection__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--cp-space-4);
}
@media (min-width: 768px) {
  .cp-collection { padding: var(--cp-space-12) 0 var(--cp-space-16); }
}

/* Buscador */
.cp-search {
  position: relative;
  margin-bottom: var(--cp-space-6);
}
.cp-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-neutral-400);
  pointer-events: none;
  font-size: 1rem;
}
.cp-search__input {
  padding-left: 44px;
}

/* Lista de locales */
.cp-store-list {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}

.cp-store-card {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  padding: var(--cp-space-4) var(--cp-space-4);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-store-card:hover {
  border-color: var(--cp-primary);
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}
.cp-store-card.is-closed {
  background: var(--cp-neutral-50);
}
.cp-store-card.is-closed .cp-store-card__name {
  color: var(--cp-neutral-500);
}

.cp-store-card__status {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  justify-content: center;
}
.cp-store-card__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--cp-radius-full);
  display: inline-block;
}
.cp-store-card__dot.is-open   { background: var(--cp-success); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); }
.cp-store-card__dot.is-closed { background: var(--cp-danger);  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }

.cp-store-card__body { flex: 1; min-width: 0; }
.cp-store-card__name {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  line-height: 1.3;
  margin-bottom: 2px;
}
.cp-store-card__address {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  margin-bottom: var(--cp-space-1);
}
.cp-store-card__hours {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-store-card__hours.is-open    { color: var(--cp-success); }
.cp-store-card__hours.is-closed  { color: var(--cp-danger); }

.cp-store-card__arrow {
  color: var(--cp-neutral-400);
  font-size: 1rem;
  flex-shrink: 0;
  transition: color var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-store-card:hover .cp-store-card__arrow {
  color: var(--cp-primary);
  transform: translateX(4px);
}

/* Empty state */
.cp-empty {
  text-align: center;
  padding: var(--cp-space-16) var(--cp-space-4);
  color: var(--cp-neutral-500);
}
.cp-empty__icon {
  font-size: 2.5rem;
  color: var(--cp-neutral-300);
  margin-bottom: var(--cp-space-3);
  display: block;
}


/* ══════════════════════════════════════════
   6.C PÁGINAS — /entrega (delivery)
   ══════════════════════════════════════════ */

/* Alertas en línea */
.cp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cp-space-3);
  padding: var(--cp-space-4);
  border-radius: var(--cp-radius-md);
  font-size: var(--cp-text-sm);
  margin-bottom: var(--cp-space-6);
  border: 1px solid transparent;
}
.cp-alert i { flex-shrink: 0; font-size: 1rem; line-height: 1.5; }
.cp-alert--error   { background: var(--cp-danger-soft);  color: var(--cp-danger);   border-color: var(--cp-danger); }
.cp-alert--warning { background: var(--cp-warning-soft); color: #92400E;            border-color: var(--cp-warning); }
.cp-alert--info    { background: var(--cp-info-soft);    color: var(--cp-info);     border-color: var(--cp-info); }
.cp-alert--success { background: var(--cp-success-soft); color: var(--cp-success);  border-color: var(--cp-success); }

/* Opciones de la pantalla /entrega */
.cp-delivery-options {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}

.cp-delivery-option {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast);
}
.cp-delivery-option:hover { border-color: var(--cp-primary); }
.cp-delivery-option[open] { border-color: var(--cp-primary); box-shadow: var(--cp-shadow-sm); }

.cp-delivery-option__header,
.cp-delivery-option--link {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  padding: var(--cp-space-4);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  list-style: none;
}
/* Quita la flechita por defecto del <summary> */
.cp-delivery-option__header::-webkit-details-marker { display: none; }
.cp-delivery-option__header { user-select: none; }

.cp-delivery-option__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  transition: background var(--cp-transition-fast),
              color var(--cp-transition-fast);
}
.cp-delivery-option:hover .cp-delivery-option__icon,
.cp-delivery-option--link:hover .cp-delivery-option__icon {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}

.cp-delivery-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cp-delivery-option__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  line-height: 1.3;
}
.cp-delivery-option__subtitle {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  margin-top: 2px;
}

.cp-delivery-option__chev {
  color: var(--cp-neutral-400);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--cp-transition-fast),
              color var(--cp-transition-fast);
}
.cp-delivery-option[open] .cp-delivery-option__chev {
  transform: rotate(180deg);
  color: var(--cp-primary);
}
.cp-delivery-option--link:hover .cp-delivery-option__chev {
  color: var(--cp-primary);
  transform: translateX(4px);
}

/* Formulario inline dentro del <details> abierto */
.cp-delivery-form {
  padding: 0 var(--cp-space-4) var(--cp-space-4);
  border-top: 1px solid var(--cp-neutral-100);
  padding-top: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}

/* ── Autocomplete Google Places en /entrega (flujo Kefi) ── */
.cp-addr-ac {
  padding: var(--cp-space-4);
  border-top: 1px solid var(--cp-neutral-100);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
.cp-addr-ac__inputwrap {
  position: relative;
}
.cp-addr-ac__icon {
  position: absolute;
  left: var(--cp-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-neutral-500);
  pointer-events: none;
  font-size: var(--cp-text-sm);
}
.cp-addr-ac__inputwrap .cp-input {
  padding-left: calc(var(--cp-space-3) + 1.4em + var(--cp-space-2));
}
.cp-addr-ac__spinner {
  position: absolute;
  right: var(--cp-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-primary);
  font-size: var(--cp-text-sm);
}
.cp-addr-ac__results {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-sm);
  max-height: 280px;
  overflow-y: auto;
  background: var(--cp-neutral-0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.cp-addr-ac__item {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  padding: var(--cp-space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--cp-neutral-100);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-800);
}
.cp-addr-ac__item:last-child {
  border-bottom: none;
}
.cp-addr-ac__item:hover,
.cp-addr-ac__item.is-active {
  background: var(--cp-neutral-50);
}
.cp-addr-ac__item i {
  color: var(--cp-primary);
  flex-shrink: 0;
}
.cp-addr-ac__status {
  margin: 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-600);
}
.cp-addr-ac__status[data-type="warn"]  { color: #c89200; }
.cp-addr-ac__status[data-type="error"] { color: #c8362f; }
#cpAddrManualToggle {
  align-self: flex-start;
  margin-top: var(--cp-space-1);
}

.cp-form-row {
  display: grid;
  gap: var(--cp-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .cp-form-row--2-1 { grid-template-columns: 2fr 1fr; }
}


/* ══════════════════════════════════════════
   6.D PÁGINAS — /productos (menú principal)
   ══════════════════════════════════════════ */

/* Botón pequeño (variante de cp-btn) */
.cp-btn--sm {
  padding: 8px 16px;
  font-size: var(--cp-text-sm);
}

/* ── Top context bar: local actual + tipo de pedido ── */
.cp-menu__context-bar {
  background: var(--cp-neutral-0);
  border-bottom: 1px solid var(--cp-neutral-200);
  padding: var(--cp-space-3) 0;
  position: sticky;
  top: calc(var(--cp-banner-height-mobile) + var(--cp-header-height));
  z-index: 30;
}
@media (min-width: 768px) {
  .cp-menu__context-bar {
    top: calc(var(--cp-banner-height) + var(--cp-header-height));
  }
}

.cp-context-info {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  min-width: 0;
}
.cp-context-info__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.cp-context-info__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cp-context-info__label {
  font-size: var(--cp-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-neutral-500);
  font-weight: var(--cp-weight-bold);
}
.cp-context-info__store {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

/* ── Filtro de alérgenos en context-bar del menú ───────────────────
   El trigger queda al lado del botón "Cambiar". El panel se despliega
   por debajo en desktop (absolute) o en mobile ocupa ancho completo. */
.cp-context-actions {
  display: flex;
  gap: var(--cp-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.cp-allergen-filter__trigger {
  position: relative;
}
.cp-allergen-filter__trigger.is-active {
  border-color: var(--cp-primary, #f97316);
  color: var(--cp-primary, #f97316);
}
.cp-allergen-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cp-primary, #f97316);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

.cp-allergen-filter__panel {
  position: relative;
  margin: var(--cp-space-3) auto 0;
  max-width: 720px;
  background: #fff;
  border: 1px solid var(--cp-neutral-200, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: var(--cp-space-4);
  z-index: 5;
}
.cp-allergen-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cp-space-3);
}
.cp-allergen-filter__title {
  font-size: var(--cp-text-base, 1rem);
  font-weight: var(--cp-weight-bold, 700);
  color: var(--cp-neutral-900);
  margin: 0;
}
.cp-allergen-filter__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-neutral-500);
}
.cp-allergen-filter__close:hover { background: var(--cp-neutral-100); }
.cp-allergen-filter__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--cp-space-2);
}
.cp-allergen-filter__empty {
  grid-column: 1 / -1;
  color: var(--cp-neutral-500);
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: var(--cp-space-3) 0;
}
.cp-allergen-filter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cp-neutral-200, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.cp-allergen-filter__option:hover {
  border-color: var(--cp-primary, #f97316);
  background: var(--cp-neutral-50, #f9fafb);
}
.cp-allergen-filter__option input[type="checkbox"] {
  margin: 0;
  accent-color: var(--cp-primary, #f97316);
}
.cp-allergen-filter__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--cp-neutral-700);
}
.cp-allergen-filter__option-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cp-neutral-800);
}
.cp-allergen-filter__option input[type="checkbox"]:checked ~ .cp-allergen-filter__option-icon,
.cp-allergen-filter__option:has(input[type="checkbox"]:checked) {
  border-color: var(--cp-primary, #f97316);
  background: rgba(249, 115, 22, 0.08);
}
.cp-allergen-filter__foot {
  display: flex;
  gap: var(--cp-space-2);
  justify-content: flex-end;
  margin-top: var(--cp-space-3);
  padding-top: var(--cp-space-3);
  border-top: 1px solid var(--cp-neutral-100, #f3f4f6);
}
@media (max-width: 720px) {
  .cp-allergen-filter__panel {
    margin: var(--cp-space-2) var(--cp-space-3) 0;
    max-width: none;
  }
  .cp-allergen-filter__options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile cats: barra horizontal scrollable, sticky ── */
.cp-menu__mobile-cats {
  position: sticky;
  top: calc(var(--cp-banner-height-mobile) + var(--cp-header-height) + 56px);
  z-index: 25;
  background: var(--cp-neutral-0);
  border-bottom: 1px solid var(--cp-neutral-200);
  overflow: hidden;
}
.cp-menu__mobile-cats-track {
  display: flex;
  gap: var(--cp-space-2);
  padding: var(--cp-space-3) var(--cp-space-4);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cp-menu__mobile-cats-track::-webkit-scrollbar { display: none; }

.cp-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  padding: 8px 14px;
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-700);
  border-radius: var(--cp-radius-full);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  white-space: nowrap;
  transition: background var(--cp-transition-fast),
              color var(--cp-transition-fast);
  flex-shrink: 0;
}
.cp-cat-chip i { font-size: 0.875rem; }
.cp-cat-chip:hover { background: var(--cp-neutral-200); }
.cp-cat-chip.is-active {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}

/* Ocultar mobile-cats en desktop */
@media (min-width: 1024px) {
  .cp-menu__mobile-cats { display: none; }
}

/* ── Layout 3 columnas ── */
.cp-menu__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-space-6);
  padding-top: var(--cp-space-6);
  padding-bottom: var(--cp-space-12);
}

@media (min-width: 1024px) {
  .cp-menu__layout {
    grid-template-columns: var(--cp-sidebar-width) 1fr var(--cp-cart-width);
    gap: var(--cp-space-8);
    align-items: start;
  }
}

/* ── Sidebar de categorías (desktop) ── */
.cp-menu__sidebar {
  display: none;
}
@media (min-width: 1024px) {
  .cp-menu__sidebar {
    display: block;
    position: sticky;
    top: calc(var(--cp-banner-height) + var(--cp-header-height) + 56px + var(--cp-space-6));
    align-self: start;
    max-height: calc(100vh - var(--cp-banner-height) - var(--cp-header-height) - 56px - var(--cp-space-12));
    overflow-y: auto;
    padding-right: var(--cp-space-2);
  }
}

.cp-menu__sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-menu__sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-700);
  border-radius: var(--cp-radius-md);
  border-left: 4px solid transparent;
  transition: background var(--cp-transition-fast),
              color var(--cp-transition-fast),
              border-color var(--cp-transition-fast);
  cursor: pointer;
}
.cp-menu__sidebar-item i {
  width: 20px;
  text-align: center;
  color: var(--cp-neutral-400);
  flex-shrink: 0;
  transition: color var(--cp-transition-fast);
}

/* Iconos de categoría con imagen del cliente (sustituyen al FA en desktop) */
.cp-menu__sidebar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cp-menu__sidebar-item span:first-of-type { flex: 1; min-width: 0; }
.cp-menu__sidebar-item:hover {
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-900);
}
.cp-menu__sidebar-item:hover i { color: var(--cp-primary); }
.cp-menu__sidebar-item.is-active {
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  border-left-color: var(--cp-primary);
}
.cp-menu__sidebar-item.is-active i { color: var(--cp-primary-dark); }

.cp-menu__sidebar-count {
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-400);
  background: var(--cp-neutral-100);
  padding: 2px 8px;
  border-radius: var(--cp-radius-full);
  min-width: 22px;
  text-align: center;
}
.cp-menu__sidebar-item.is-active .cp-menu__sidebar-count {
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
}

/* ── Main: secciones del menú ── */
.cp-menu__main { min-width: 0; }

.cp-menu__section { margin-bottom: var(--cp-space-12); }
.cp-menu__section:last-child { margin-bottom: 0; }

.cp-menu__section-header {
  margin-bottom: var(--cp-space-4);
}
.cp-menu__section-title {
  font-family: var(--cp-font-display);
  font-size: var(--cp-text-3xl);
  line-height: var(--cp-leading-tight);
  color: var(--cp-neutral-900);
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
}
.cp-menu__section-title i {
  color: var(--cp-primary);
  font-size: var(--cp-text-2xl);
  font-family: 'Font Awesome 6 Free';
}
.cp-menu__section-desc {
  margin-top: var(--cp-space-1);
  color: var(--cp-neutral-500);
  font-size: var(--cp-text-sm);
}

/* Grid de cards */
.cp-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--cp-space-4);
}
@media (min-width: 1024px) {
  .cp-menu__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--cp-space-6);
  }
}

/* ── Product card ── */
.cp-product-card {
  display: flex;
  flex-direction: column;
  background: var(--cp-neutral-0);
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--cp-shadow-sm);
  transition: box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
  border: 1px solid var(--cp-neutral-100);
}
.cp-product-card:hover,
.cp-product-card:focus-visible {
  box-shadow: var(--cp-shadow-md);
  transform: translateY(-2px);
  outline: none;
}
.cp-product-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cp-neutral-100);
  overflow: hidden;
}
.cp-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cp-transition-base);
}
.cp-product-card:hover .cp-product-card__img img {
  transform: scale(1.05);
}
.cp-product-card__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--cp-neutral-300);
}
.cp-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--cp-space-4);
  gap: var(--cp-space-2);
}
.cp-product-card__name {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  line-height: 1.3;
  color: var(--cp-neutral-900);
  /* Truncar a 2 líneas con elipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-product-card__desc {
  font-size: var(--cp-text-sm);
  line-height: 1.4;
  color: var(--cp-neutral-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-product-card__bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-2);
  padding-top: var(--cp-space-3);
}
.cp-product-card__price {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
}

/* ── Carrito sticky (desktop) ── */
.cp-cart-panel {
  display: none;
}
@media (min-width: 1024px) {
  .cp-cart-panel {
    display: block;
    position: sticky;
    top: calc(var(--cp-banner-height) + var(--cp-header-height) + 56px + var(--cp-space-6));
    align-self: start;
  }
  .cp-cart-panel__inner {
    background: var(--cp-neutral-0);
    border: 1px solid var(--cp-neutral-200);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    overflow: hidden;
    max-height: calc(100vh - var(--cp-banner-height) - var(--cp-header-height) - 56px - var(--cp-space-12));
    display: flex;
    flex-direction: column;
  }
}
.cp-cart-panel__header {
  padding: var(--cp-space-4);
  border-bottom: 1px solid var(--cp-neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-cart-panel__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
}
.cp-cart-panel__count {
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-bold);
  padding: 2px 10px;
  border-radius: var(--cp-radius-full);
  min-width: 28px;
  text-align: center;
}
.cp-cart-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cp-space-4);
}
.cp-cart-empty {
  text-align: center;
  padding: var(--cp-space-6) 0;
  color: var(--cp-neutral-500);
}
.cp-cart-empty__icon {
  font-size: 2rem;
  color: var(--cp-neutral-300);
  display: block;
  margin-bottom: var(--cp-space-3);
}
.cp-cart-empty__title {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-700);
  margin-bottom: var(--cp-space-1);
}
.cp-cart-empty__subtitle {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
}

/* Items del carrito (renderizados por JS) */
.cp-cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}
.cp-cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cp-space-3);
  padding-bottom: var(--cp-space-3);
  border-bottom: 1px solid var(--cp-neutral-100);
}
.cp-cart-item:last-child { border-bottom: 0; }
.cp-cart-item__name {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  line-height: 1.3;
}
.cp-cart-item__price {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  white-space: nowrap;
}
.cp-cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  margin-top: var(--cp-space-1);
}
.cp-cart-item__qty-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-700);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cp-transition-fast);
}
.cp-cart-item__qty-btn:hover {
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
}
.cp-cart-item__qty-num {
  min-width: 18px;
  text-align: center;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
}
.cp-cart-item__remove {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-400);
  margin-left: var(--cp-space-2);
}
.cp-cart-item__remove:hover { color: var(--cp-danger); }

/* ── Mini-cart del panel sticky en /productos ─────────────
   Cada línea: cabecera nombre+precio, modifiers (texto pequeño)
   y una fila de acciones con stepper +/- y trash. Patrón Glovo:
   edición rápida sin salir del menú. */
.cp-cart-mini {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
  padding-bottom: var(--cp-space-3);
  border-bottom: 1px solid var(--cp-neutral-100);
}
.cp-cart-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-cart-mini__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cp-space-2);
}
.cp-cart-mini__name {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  line-height: 1.3;
}
.cp-cart-mini__price {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  white-space: nowrap;
}
.cp-cart-mini__mods {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-600);
  line-height: 1.4;
}
.cp-cart-mini__mods li::before { content: '· '; color: var(--cp-neutral-400); }
.cp-cart-mini__mod-price {
  color: var(--cp-neutral-700);
  font-variant-numeric: tabular-nums;
}
.cp-cart-mini__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-cart-mini__stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cp-neutral-100);
  border-radius: var(--cp-radius-full);
  padding: 2px;
}
.cp-cart-mini__step {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: var(--cp-radius-full);
  color: var(--cp-neutral-700);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}
.cp-cart-mini__step:hover {
  background: var(--cp-neutral-0);
  color: var(--cp-primary);
}
.cp-cart-mini__num {
  min-width: 18px;
  text-align: center;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
}
.cp-cart-mini__remove {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--cp-neutral-400);
  font-size: 0.85rem;
  border-radius: var(--cp-radius-sm);
  cursor: pointer;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}
.cp-cart-mini__remove:hover {
  background: #fef2f2;
  color: #ef4444;
}

.cp-cart-panel__footer {
  padding: var(--cp-space-4);
  border-top: 1px solid var(--cp-neutral-200);
  background: var(--cp-neutral-50);
}
.cp-cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--cp-text-base);
  margin-bottom: var(--cp-space-3);
}
.cp-cart-totals strong {
  font-size: var(--cp-text-xl);
  font-weight: var(--cp-weight-black);
}

/* ── Bottom bar móvil ── */
.cp-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--cp-neutral-0);
  border-top: 1px solid var(--cp-neutral-200);
  padding: var(--cp-space-3);
  box-shadow: 0 -4px 16px rgba(24, 24, 27, 0.08);
}
@media (min-width: 1024px) {
  .cp-cart-bar { display: none; }
}
.cp-cart-bar__btn {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  width: 100%;
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  padding: 14px 16px;
  border-radius: var(--cp-radius-md);
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
}
.cp-cart-bar__btn:hover { background: var(--cp-primary-hover); }
.cp-cart-bar__count {
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: var(--cp-radius-full);
  font-size: var(--cp-text-xs);
  min-width: 24px;
  text-align: center;
}
.cp-cart-bar__label { flex: 1; text-align: left; }
.cp-cart-bar__total { font-weight: var(--cp-weight-black); }


/* ══════════════════════════════════════════
   6.E COMPONENTE — Modal de modifiers
   ══════════════════════════════════════════ */

.cp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Subimos el z-index a 9999990/91 (modal=9999991, overlay=9999990) para
     garantizar que NADA queda por encima en ningún entorno. Antes 100/110
     dejaba paso a alguna capa fantasma reportada en checkout que tapaba
     el botón Continuar (cursor no cambiaba a pointer, modal "bloqueado"). */
  z-index: 9999990;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cp-transition-base);
}

/* Blindaje contra capas fantasma reportadas en checkout (Chrome, Firefox).
   Forzamos pointer-events:auto y un z-index obscenamente alto en el modal
   auth y sus controles interactivos para garantizar que clicks y hover
   llegan SIEMPRE al botón, sea cual sea la capa que se interponga
   (overlays de WP, iframes de payment, drawer mobile, etc.). */
.cp-modal--auth.is-open,
.cp-modal--auth.is-open * {
  pointer-events: auto !important;
}
.cp-modal--auth.is-open {
  z-index: 2147483646 !important; /* INT32_MAX - 1, máximo seguro de z-index */
}
.cp-modal--auth.is-open #cpAuthPhoneSubmit,
.cp-modal--auth.is-open #cpAuthOtpSubmit,
.cp-modal--auth.is-open #cpAuthPhoneClose,
.cp-modal--auth.is-open #cpAuthOtpClose {
  position: relative;
  z-index: 2147483647 !important; /* INT32_MAX, valor máximo permitido */
  pointer-events: auto !important;
  cursor: pointer;
}
/* OJO: NO añadir position/z-index al input cpAuthPhoneInput — intlTelInput
   posiciona la bandera + dropdown absolute respecto a él y se rompe. */
.cp-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cp-modal {
  position: fixed;
  z-index: 9999991;
  background: var(--cp-neutral-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--cp-shadow-lg);

  /* Móvil: bottom-sheet 92vh */
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  border-radius: var(--cp-radius-xl) var(--cp-radius-xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--cp-transition-base);
}
.cp-modal.is-open {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .cp-modal {
    /* Tablet/Desktop: card centrado */
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(520px, 92vw);
    max-height: 88vh;
    border-radius: var(--cp-radius-xl);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform var(--cp-transition-base), opacity var(--cp-transition-base);
  }
  .cp-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Header con imagen */
.cp-modal__header {
  position: relative;
  background: var(--cp-neutral-100);
  flex-shrink: 0;
}
.cp-modal__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.cp-modal__img--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--cp-neutral-300);
}
.cp-modal__close {
  position: absolute;
  top: var(--cp-space-3);
  right: var(--cp-space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--cp-neutral-900);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cp-shadow-sm);
  transition: background var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-modal__close:hover {
  background: var(--cp-neutral-0);
  transform: scale(1.05);
}

/* Drag handle (solo móvil, decorativo) */
.cp-modal__handle {
  display: block;
  width: 44px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--cp-radius-full);
  position: absolute;
  top: var(--cp-space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 768px) {
  .cp-modal__handle { display: none; }
}

/* Cuerpo scrollable */
.cp-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-6);
}
@media (min-width: 768px) {
  .cp-modal__body { padding: var(--cp-space-6); }
}

.cp-modal__title {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-bold);
  line-height: var(--cp-leading-tight);
  margin-bottom: var(--cp-space-2);
}
.cp-modal__desc {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-normal);
}

/* Grupo de modifiers */
.cp-mod-group { display: flex; flex-direction: column; gap: var(--cp-space-3); }
.cp-mod-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cp-space-3);
}
.cp-mod-group__title {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-mod-group__rule {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--cp-weight-bold);
}
.cp-mod-group__rule--required {
  color: var(--cp-primary-dark);
}
.cp-mod-group__rule--ok {
  color: var(--cp-success);
}

.cp-mod-list {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}

/* Opción individual: radio o checkbox visualmente unificado */
.cp-mod-option {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  padding: var(--cp-space-3);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  cursor: pointer;
  transition: border-color var(--cp-transition-fast),
              background var(--cp-transition-fast);
}
.cp-mod-option:hover {
  border-color: var(--cp-primary);
  background: var(--cp-neutral-50);
}
.cp-mod-option.is-selected {
  border-color: var(--cp-primary);
  background: var(--cp-primary-soft);
}
.cp-mod-option input { position: absolute; opacity: 0; pointer-events: none; }

.cp-mod-option__indicator {
  width: 22px;
  height: 22px;
  border-radius: var(--cp-radius-full);
  border: 2px solid var(--cp-neutral-300);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-neutral-0);
  transition: border-color var(--cp-transition-fast),
              background var(--cp-transition-fast);
}
.cp-mod-option__indicator--checkbox { border-radius: 6px; }
.cp-mod-option.is-selected .cp-mod-option__indicator {
  border-color: var(--cp-primary);
  background: var(--cp-primary);
}
.cp-mod-option.is-selected .cp-mod-option__indicator::after {
  content: '';
  display: block;
  width: 10px; height: 10px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-0);
}
.cp-mod-option.is-selected .cp-mod-option__indicator--checkbox::after {
  width: 6px; height: 10px;
  background: transparent;
  border-right: 2px solid var(--cp-neutral-0);
  border-bottom: 2px solid var(--cp-neutral-0);
  border-radius: 0;
  transform: rotate(45deg);
  margin-top: -3px;
}

.cp-mod-option__name {
  flex: 1;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-mod-option__price {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cp-mod-option__price--free {
  color: var(--cp-success);
  font-weight: var(--cp-weight-bold);
}

/* Footer del modal */
.cp-modal__footer {
  flex-shrink: 0;
  padding: var(--cp-space-4);
  border-top: 1px solid var(--cp-neutral-200);
  background: var(--cp-neutral-0);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cp-space-3);
  align-items: center;
}
.cp-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-0);
  height: 44px;
}
.cp-stepper__btn {
  width: 40px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-neutral-700);
  font-size: 0.9375rem;
  transition: color var(--cp-transition-fast);
}
.cp-stepper__btn:hover { color: var(--cp-primary-dark); }
.cp-stepper__btn:disabled { color: var(--cp-neutral-300); cursor: not-allowed; }
.cp-stepper__num {
  min-width: 28px;
  text-align: center;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Loading state dentro del modal */
.cp-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cp-space-12);
  color: var(--cp-neutral-500);
  gap: var(--cp-space-3);
}


/* ──────────────────────────────────────────
   6.E.1 Modal — variante WIZARD (paso a paso, estilo Flipdish)
   El modal de modifiers ya no muestra todos los grupos a la vez:
   navega de paso en paso (1 grupo por pantalla) con header propio,
   resumen acumulado en el footer y CTA "Siguiente". El último paso
   es la pantalla de confirmación (resumen + qty + "Añadir a la cesta").
   ────────────────────────────────────────── */

.cp-modal--wizard {
  /* Móvil: full-screen para que se sienta como app nativa (cf. Flipdish). */
  max-height: 100vh;
  height: 100dvh;
  border-radius: 0;
}
@media (min-width: 768px) {
  .cp-modal--wizard {
    max-height: 88vh;
    height: auto;
    border-radius: var(--cp-radius-xl);
  }
}

/* Header del wizard: ← title ✕ */
.cp-modal--wizard .cp-modal__topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: var(--cp-space-3) var(--cp-space-3);
  border-bottom: 1px solid var(--cp-neutral-100);
  flex-shrink: 0;
  min-height: 56px;
  background: var(--cp-neutral-0);
}
.cp-modal--wizard .cp-modal__back,
.cp-modal--wizard .cp-modal__close {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: var(--cp-radius-full);
  background: transparent;
  color: var(--cp-neutral-700);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background var(--cp-transition-fast);
}
.cp-modal--wizard .cp-modal__back:hover,
.cp-modal--wizard .cp-modal__close:hover {
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-900);
  transform: none;
}
.cp-modal--wizard .cp-modal__close {
  justify-self: end;
}
.cp-modal--wizard .cp-modal__topbar-title {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-700);
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body del paso (scrollable) */
.cp-modal__step-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
@media (min-width: 768px) {
  .cp-modal__step-body { padding: var(--cp-space-6) var(--cp-space-8); }
}

/* Imagen y descripción del producto (solo paso 0) */
.cp-modal__hero-img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--cp-radius-md);
}
.cp-modal__hero-img--placeholder {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-neutral-100);
  border-radius: var(--cp-radius-md);
  font-size: 4rem;
  color: var(--cp-neutral-300);
}
.cp-modal__intro-desc {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
  text-align: center;
  margin: 0;
}
.cp-modal__product-name {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  text-align: center;
  margin: 0;
  line-height: var(--cp-leading-tight);
}
@media (min-width: 768px) {
  .cp-modal__product-name { font-size: var(--cp-text-3xl); }
}

/* En el wizard la regla del grupo es más prominente que en la versión vieja */
.cp-modal--wizard .cp-mod-group__title {
  font-size: var(--cp-text-xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  line-height: var(--cp-leading-tight);
}
.cp-modal--wizard .cp-mod-group__rule {
  font-size: var(--cp-text-xs);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--cp-weight-regular);
  color: var(--cp-neutral-500);
}
.cp-modal--wizard .cp-mod-group__header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cp-space-1);
}

/* Footer del paso: resumen acumulado + CTA */
.cp-modal__step-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--cp-neutral-100);
  background: var(--cp-neutral-0);
  padding: var(--cp-space-4) var(--cp-space-6) calc(var(--cp-space-4) + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}
@media (min-width: 768px) {
  .cp-modal__step-footer { padding: var(--cp-space-4) var(--cp-space-8) var(--cp-space-6); }
}

/* Resumen acumulado que aparece en el footer durante los pasos */
.cp-modal__summary {
  background: var(--cp-neutral-50);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-3) var(--cp-space-4);
  max-height: 200px;
  overflow-y: auto;
}
.cp-modal__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-modal__summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cp-space-3);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
}
.cp-modal__summary-item--base {
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-modal__summary-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-modal__summary-price {
  color: var(--cp-neutral-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: var(--cp-weight-bold);
}

/* CTA del paso (Siguiente / Añadir) — botón con label + total alineados */
.cp-modal__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--cp-space-3);
  text-align: left;
  width: 100%;
}
.cp-modal__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cp-btn__total {
  font-variant-numeric: tabular-nums;
  font-weight: var(--cp-weight-black);
  white-space: nowrap;
}
.cp-btn--lg {
  padding: 14px 22px;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-black);
  min-height: 52px;
}
.cp-btn--block { width: 100%; }

/* Pantalla final del wizard (resumen + qty + Añadir) */
.cp-modal__final-title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  margin: 0 0 var(--cp-space-3);
}
.cp-modal__final {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  background: var(--cp-neutral-50);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-4);
}
.cp-modal__final-controls {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  align-items: stretch;
}
.cp-modal__final-controls .cp-stepper {
  align-self: center;
}


/* ══════════════════════════════════════════
   6.F RETOQUES COSMÉTICOS — pulir detalles
   ══════════════════════════════════════════ */

/* Carrito sticky en desktop: anclar arriba, no centrado vertical */
@media (min-width: 1024px) {
  .cp-menu__layout { align-items: stretch; }
}

/* Prevenir selección de texto en elementos clicables tipo chip/sidebar */
.cp-cat-chip,
.cp-menu__sidebar-item,
.cp-menu__section-title {
  user-select: none;
  -webkit-user-select: none;
}

/* min-width:0 permite al main encogerse dentro del grid si los productos
   tienen contenido ancho. Sin esto, el grid track 1fr puede crecer más allá
   de su límite por el contenido del main. */
@media (min-width: 1024px) {
  .cp-menu__main { min-width: 0; }
}

/* Iconos del sidebar y de los chips: heredan la familia FA correctamente */
.cp-menu__sidebar-item i,
.cp-cat-chip i,
.cp-menu__section-title i {
  font-family: 'Font Awesome 6 Free', sans-serif;
  font-weight: 900;
}

/* Mejor placeholder de imagen para cards sin foto */
.cp-product-card__img-placeholder {
  background: linear-gradient(135deg, var(--cp-neutral-50), var(--cp-neutral-100));
}

/* Micro: animación al añadir al carrito (badge contador) */
@keyframes cp-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.cp-cart-panel__count.cp-bump {
  animation: cp-bump 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Foco accesible explícito en cards de producto y opciones del modal */
.cp-product-card:focus-visible,
.cp-mod-option:focus-within,
.cp-cat-chip:focus-visible {
  outline: 2px solid var(--cp-primary);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════
   6.G COMPONENTE — Modal de autenticación (móvil-only)
   ══════════════════════════════════════════ */

/* Variante del modal genérico para auth: full-screen en móvil, card
   centrado con max-width estrecho en desktop (es un modal corto). */
.cp-modal--auth {
  /* Móvil: ocupa toda la pantalla */
  max-height: 100vh;
  height: 100dvh;
  border-radius: 0;
}
@media (min-width: 768px) {
  .cp-modal--auth {
    width: min(440px, 92vw);
    max-height: 88vh;
    height: auto;
    border-radius: var(--cp-radius-xl);
  }
}

.cp-modal-auth__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cp-space-3) var(--cp-space-4);
  border-bottom: 1px solid var(--cp-neutral-100);
  flex-shrink: 0;
  min-height: 56px;
}
.cp-modal-auth__topbar .cp-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius-full);
  background: transparent;
  color: var(--cp-neutral-700);
}
.cp-modal-auth__topbar .cp-icon-btn:hover {
  background: var(--cp-neutral-100);
}
/* Si solo hay un botón cerrar (modal phone) → empuja a la derecha */
.cp-modal-auth__topbar .cp-icon-btn:only-child {
  margin-left: auto;
}

.cp-modal-auth__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cp-space-8) var(--cp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
@media (min-width: 768px) {
  .cp-modal-auth__body {
    padding: var(--cp-space-8) var(--cp-space-8);
  }
}

.cp-modal-auth__title {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  line-height: var(--cp-leading-tight);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.cp-modal-auth__subtitle {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
  margin: 0;
}
.cp-modal-auth__legal {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
  margin: var(--cp-space-3) 0 0;
}
.cp-modal-auth__legal a {
  color: var(--cp-neutral-700);
  text-decoration: underline;
  font-weight: var(--cp-weight-bold);
}
.cp-modal-auth__legal a:hover {
  color: var(--cp-primary);
}
.cp-modal-auth__error {
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
  padding: var(--cp-space-2) var(--cp-space-3);
  border-radius: var(--cp-radius-sm);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  margin: 0;
  text-align: center;
}

.cp-modal-auth__footer {
  padding: var(--cp-space-4) var(--cp-space-6) calc(var(--cp-space-4) + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--cp-neutral-100);
  background: var(--cp-neutral-0);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .cp-modal-auth__footer {
    padding: var(--cp-space-4) var(--cp-space-8) var(--cp-space-6);
  }
}

/* Input de teléfono */
.cp-input {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--cp-text-base);
  font-family: var(--cp-font-body);
  color: var(--cp-neutral-900);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-md);
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast);
}
.cp-input:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: var(--cp-shadow-focus);
}
.cp-input--error {
  border-color: var(--cp-danger);
  animation: cp-shake 0.4s ease;
}
@keyframes cp-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* intlTelInput integration */
.iti { width: 100%; }
.iti--allow-dropdown .cp-input--phone {
  padding-left: 90px !important;
}
.iti__selected-dial-code {
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}

/* OTP grid (4 inputs grandes) */
.cp-otp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cp-space-3);
  margin: var(--cp-space-4) 0;
}
.cp-otp-cell {
  width: 100%;
  height: 64px;
  text-align: center;
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  background: var(--cp-neutral-0);
  border: 2px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-md);
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast),
              transform var(--cp-transition-fast);
}
.cp-otp-cell:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: var(--cp-shadow-focus);
  transform: translateY(-2px);
}
@media (min-width: 768px) {
  .cp-otp-cell { height: 72px; font-size: var(--cp-text-3xl); }
}

/* Link "Reenviar" */
.cp-btn-link {
  background: none;
  border: 0;
  color: var(--cp-primary);
  font-weight: var(--cp-weight-bold);
  font-size: var(--cp-text-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--cp-space-2) 0;
  margin-top: var(--cp-space-3);
  display: inline-block;
}
.cp-btn-link:disabled {
  color: var(--cp-neutral-400);
  cursor: not-allowed;
  text-decoration: none;
}

/* Botón con spinner integrado */
.cp-btn__spinner {
  display: inline-flex;
}

/* Toast layer (notificaciones flotantes).
   z-index INT32_MAX para que SIEMPRE quede por encima del modal auth
   (que ahora usa 2147483646 por el blindaje contra capas fantasma).
   Sin esto, los toasts de error del modal SMS quedan ocultos detrás. */
.cp-toast-layer {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
  pointer-events: none;
}
.cp-toast {
  background: var(--cp-neutral-900);
  color: var(--cp-neutral-0);
  padding: 12px 20px;
  border-radius: var(--cp-radius-full);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  box-shadow: var(--cp-shadow-lg);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--cp-transition-base),
              transform var(--cp-transition-base);
  pointer-events: auto;
}
.cp-toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.cp-toast--success { background: var(--cp-success); }
.cp-toast--error   { background: var(--cp-danger); }
.cp-toast--info    { background: var(--cp-neutral-700); }


/* ══════════════════════════════════════════
   6.H PÁGINA — /cesta (checkout.php)
   ══════════════════════════════════════════ */

.cp-cart-page {
  background: var(--cp-neutral-50);
  min-height: calc(100vh - var(--cp-header-height));
  padding-bottom: var(--cp-space-12);
}

/* Bar de contexto: tipo de pedido + local/dirección */
.cp-cart-page__context {
  background: var(--cp-neutral-0);
  border-bottom: 1px solid var(--cp-neutral-200);
  padding: var(--cp-space-3) 0;
  margin-bottom: var(--cp-space-6);
  position: sticky;
  top: var(--cp-header-height);
  z-index: 5;
}

/* Layout 2 columnas en desktop, 1 en mobile */
.cp-cart-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-space-6);
}
@media (min-width: 1024px) {
  .cp-cart-page__layout {
    grid-template-columns: 1fr 380px;
    gap: var(--cp-space-8);
    align-items: start;
  }
}

.cp-cart-page__title {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  margin: 0 0 var(--cp-space-4);
  text-transform: uppercase;
}

/* Listado de líneas */
.cp-cart-page__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}

.cp-cart-line {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-3);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--cp-space-3);
  align-items: stretch;
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast);
}
@media (min-width: 768px) {
  .cp-cart-line { grid-template-columns: 96px 1fr; padding: var(--cp-space-4); }
}
.cp-cart-line:hover {
  border-color: var(--cp-neutral-300);
  box-shadow: var(--cp-shadow-sm);
}

/* Imagen del producto (clicable, abre modal en modo edit) */
.cp-cart-line__edit {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.cp-cart-line__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--cp-radius-sm);
  background: var(--cp-neutral-100);
  display: block;
  transition: transform var(--cp-transition-fast);
}
.cp-cart-line__edit:hover .cp-cart-line__img {
  transform: scale(1.03);
}
.cp-cart-line__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-neutral-300);
  font-size: 1.75rem;
}

.cp-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
  min-width: 0;
}

/* Cabecera de la línea: clicable también para abrir modo edit */
.cp-cart-line__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cp-space-3);
}
.cp-cart-line__head--clickable {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.cp-cart-line__head--clickable:hover .cp-cart-line__name {
  color: var(--cp-primary-dark);
}
.cp-cart-line__name {
  margin: 0;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  flex: 1;
}
.cp-cart-line__price {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-cart-line__mods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
}
.cp-cart-line__mod-price {
  color: var(--cp-neutral-700);
  font-variant-numeric: tabular-nums;
}

.cp-cart-line__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-3);
  margin-top: var(--cp-space-2);
}
.cp-cart-line__remove {
  background: none;
  border: 0;
  color: var(--cp-neutral-400);
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--cp-transition-fast),
              background var(--cp-transition-fast);
}
.cp-cart-line__remove:hover {
  color: var(--cp-danger);
  background: var(--cp-danger-soft);
}

/* "Añadir más productos" — link simple debajo de la lista */
.cp-cart-page__add-more {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  margin-top: var(--cp-space-4);
  padding: var(--cp-space-3) 0;
  color: var(--cp-primary-dark);
  font-weight: var(--cp-weight-bold);
  font-size: var(--cp-text-sm);
}
.cp-cart-page__add-more:hover {
  text-decoration: underline;
}

/* Resumen (columna derecha) */
.cp-cart-page__summary {
  position: relative;
}
@media (min-width: 1024px) {
  .cp-cart-page__summary {
    position: sticky;
    top: calc(var(--cp-header-height) + 80px);
  }
}
.cp-cart-page__summary-inner {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-5) var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}
@media (min-width: 768px) {
  .cp-cart-page__summary-inner { padding: var(--cp-space-6); }
}

/* Mismo estilo que .cp-cart-page__title (TU PEDIDO) para que ambos
   titulares queden alineados a la misma altura visual fuera de las cajas. */
.cp-cart-page__summary-title {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  margin: 0 0 var(--cp-space-4);
  text-transform: uppercase;
}
.cp-cart-page__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}
.cp-cart-page__summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
}
.cp-cart-page__summary-list strong {
  font-variant-numeric: tabular-nums;
  color: var(--cp-neutral-900);
}
.cp-cart-page__summary-list strong[data-cp-tbd] {
  color: var(--cp-neutral-400);
  font-weight: var(--cp-weight-regular);
  font-style: italic;
}

.cp-cart-page__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--cp-space-3);
  border-top: 1px solid var(--cp-neutral-200);
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
}
.cp-cart-page__total strong {
  font-variant-numeric: tabular-nums;
  font-size: var(--cp-text-xl);
}

.cp-cart-page__cta {
  margin-top: var(--cp-space-2);
}

.cp-cart-page__hint {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  text-align: center;
  margin: 0;
  line-height: var(--cp-leading-snug);
}

/* Estado vacío en página completa */
.cp-cart-empty--page {
  background: var(--cp-neutral-0);
  border: 1px dashed var(--cp-neutral-300);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-12) var(--cp-space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-cart-empty--page .cp-cart-empty__icon {
  font-size: 3rem;
  color: var(--cp-neutral-300);
  margin-bottom: var(--cp-space-2);
}

/* En móvil: ocultar el panel resumen lateral; el bottom bar hace el CTA.
   El bottom bar reutiliza las clases .cp-cart-bar de la página menú. */
@media (max-width: 1023.98px) {
  .cp-cart-page__summary {
    /* mantenemos el resumen visible (totales arriba), pero el CTA principal
       lo gestiona el bottom bar para no duplicar acciones en pantalla. */
    margin-bottom: 80px; /* espacio para no chocar con el bar */
  }
}


/* ══════════════════════════════════════════
   6.I MODAL — Upsell ("Más personas también añadieron…")
   ──────────────────────────────────────────
   Aparece como overlay sobre la cesta cuando se pulsa "Continuar".
   Patrón confirmado en producción Flipdish: card centrado en desktop
   (no full-screen) + bottom-sheet en móvil. Lista de items con [+]
   que abre el wizard del producto, footer sticky con CTA "Proceder
   al pago" + total del carrito.
   ══════════════════════════════════════════ */

.cp-modal--upsell {
  /* Card centrado, más estrecho que el wizard de modifiers */
}
@media (min-width: 768px) {
  .cp-modal--upsell {
    width: min(540px, 92vw);
    max-height: 88vh;
  }
}

/* Topbar simplificado (solo ✕, sin título — lo lleva el body) */
.cp-modal__topbar--upsell {
  border-bottom: 0;
  padding-bottom: 0;
  min-height: 48px;
}
.cp-modal__topbar--upsell .cp-modal__close {
  position: static;
  background: transparent;
  box-shadow: none;
  color: var(--cp-neutral-700);
}
.cp-modal__topbar--upsell .cp-modal__close:hover {
  background: var(--cp-neutral-100);
  transform: none;
}

.cp-upsell-modal__title {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
  line-height: var(--cp-leading-tight);
  margin: 0 0 var(--cp-space-4);
}

.cp-upsell-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cp-upsell-modal__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--cp-space-3);
  align-items: center;
  padding: var(--cp-space-3) 0;
  border-top: 1px solid var(--cp-neutral-200);
}
.cp-upsell-modal__item:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  .cp-upsell-modal__item {
    grid-template-columns: 80px 1fr auto;
    gap: var(--cp-space-4);
  }
}

.cp-upsell-modal__img {
  width: 100%;
  max-width: 80px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--cp-radius-sm);
  background: var(--cp-neutral-100);
  display: block;
}
.cp-upsell-modal__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--cp-neutral-300);
}

.cp-upsell-modal__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-upsell-modal__name {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0;
  line-height: var(--cp-leading-snug);
}
.cp-upsell-modal__desc {
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-upsell-modal__price {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.cp-upsell-modal__add {
  width: 44px;
  height: 44px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--cp-transition-fast),
              transform var(--cp-transition-fast);
  border: 0;
  flex-shrink: 0;
}
.cp-upsell-modal__add:hover {
  background: var(--cp-primary-hover);
  transform: scale(1.05);
}

.cp-upsell-modal__empty {
  padding: var(--cp-space-8) var(--cp-space-4);
  text-align: center;
  color: var(--cp-neutral-500);
  font-size: var(--cp-text-sm);
}

/* Footer del modal — reutiliza .cp-modal__step-footer pero sin top
   border porque el body ya tiene los items separados con border-top */
.cp-upsell-modal__footer {
  border-top: 1px solid var(--cp-neutral-200);
}


/* ══════════════════════════════════════════
   6.J COMPONENTE — Shipping options en cesta (Estándar / Programar)
   Namespace cp-shipping* para no colisionar con cp-delivery-option*
   de la pantalla /entrega (delivery.php).
   ══════════════════════════════════════════ */

.cp-shipping {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-5);
  margin-top: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
@media (min-width: 768px) {
  .cp-shipping { padding: var(--cp-space-6); }
}

.cp-shipping__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0;
}

.cp-shipping__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cp-space-3);
}

.cp-shipping__option {
  background: var(--cp-neutral-0);
  border: 2px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--cp-transition-fast),
              background var(--cp-transition-fast);
}
.cp-shipping__option:hover {
  border-color: var(--cp-neutral-300);
  background: var(--cp-neutral-50);
}
.cp-shipping__option.is-active {
  border-color: var(--cp-primary);
  background: var(--cp-primary-soft);
}

.cp-shipping__option-title {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-shipping__option-hint {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
}
.cp-shipping__option.is-active .cp-shipping__option-hint {
  color: var(--cp-primary-dark);
  font-weight: var(--cp-weight-bold);
}

.cp-shipping__picker {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  padding-top: var(--cp-space-4);
  margin-top: var(--cp-space-2);
  border-top: 1px solid var(--cp-neutral-100);
}
.cp-shipping__picker .cp-input {
  width: 100%;
  padding: var(--cp-space-3) var(--cp-space-4);
  font-size: var(--cp-text-base);
  border: 1px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-md);
  background: var(--cp-neutral-0);
  color: var(--cp-neutral-900);
  transition: border-color var(--cp-transition-fast),
              box-shadow var(--cp-transition-fast);
}
.cp-shipping__picker .cp-input:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px var(--cp-primary-soft);
}

.cp-input-label {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-input-hint {
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  margin: 0;
  line-height: var(--cp-leading-snug);
}


/* ══════════════════════════════════════════
   6.K COMPONENTE — Notas para el chef en cesta (Sprint 2 P7)
   ──────────────────────────────────────────
   Textarea opcional bajo "Cuándo lo recoges". Persiste en cart-store
   y se envía a backend con createPaymentIntent → orders.notes → Deliverect.
   ══════════════════════════════════════════ */
.cp-chef-notes {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-5);
  margin-top: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}
@media (min-width: 768px) {
  .cp-chef-notes { padding: var(--cp-space-6); }
}
.cp-chef-notes__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-chef-notes__title i {
  color: var(--cp-primary);
  font-size: 0.9em;
}
.cp-chef-notes__textarea {
  width: 100%;
  padding: var(--cp-space-3);
  font-size: var(--cp-text-sm);
  font-family: inherit;
  color: var(--cp-neutral-900);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-sm);
  resize: vertical;
  min-height: 70px;
  line-height: var(--cp-leading-snug);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cp-chef-notes__textarea:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px var(--cp-primary-soft, rgba(244,157,95,0.18));
}
.cp-chef-notes__textarea::placeholder {
  color: var(--cp-neutral-400);
}


/* ══════════════════════════════════════════
   6.K-bis BLOQUE — Confirmación de dirección + mapa en /cesta (delivery)
   Mismo patrón visual que .cp-chef-notes para mantener coherencia.
   ══════════════════════════════════════════ */
.cp-address-confirm {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-5);
  margin-top: var(--cp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
@media (min-width: 768px) {
  .cp-address-confirm { padding: var(--cp-space-6); }
}
.cp-address-confirm__header {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}
@media (min-width: 768px) {
  .cp-address-confirm__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
  }
}
.cp-address-confirm__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-address-confirm__title i {
  color: var(--cp-primary);
  font-size: 0.9em;
}
.cp-address-confirm__address {
  margin: 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-address-confirm__address strong {
  color: var(--cp-neutral-900);
  font-weight: var(--cp-weight-medium);
}
.cp-address-confirm__pin {
  color: var(--cp-primary);
  font-size: 0.95em;
}
.cp-address-confirm__map {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  border-radius: var(--cp-radius-sm);
  overflow: hidden;
  background: var(--cp-neutral-100);
}


/* ══════════════════════════════════════════
   6.L PÁGINA — /es/pago (Stripe Payment Element)
   ══════════════════════════════════════════ */

/* Bar de contexto superior */
.cp-payment-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-4);
  flex-wrap: wrap;
  padding: 0 var(--cp-space-4);
}
.cp-payment-context__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cp-neutral-700);
  text-decoration: none;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--cp-transition-fast);
}
.cp-payment-context__back:hover { color: var(--cp-primary-dark); }
.cp-payment-context__target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cp-neutral-700);
  font-size: var(--cp-text-sm);
}
.cp-payment-context__target i { color: var(--cp-primary); }
.cp-payment-context__target strong {
  color: var(--cp-neutral-900);
  margin-left: 4px;
}

.cp-payment-form {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-6);
}
.cp-payment-form__title {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0 0 var(--cp-space-5);
}
.cp-payment-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-4);
}
.cp-payment-form__legal {
  margin-top: var(--cp-space-5);
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-relaxed);
}

.cp-payment-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-3);
  padding: var(--cp-space-8) var(--cp-space-4);
  color: var(--cp-neutral-500);
  font-size: var(--cp-text-sm);
}
.cp-payment-loader i {
  color: var(--cp-primary);
  font-size: 1.5rem;
}

.cp-payment-element {
  min-height: 240px;
}

.cp-payment-message {
  padding: var(--cp-space-3) var(--cp-space-4);
  border-radius: var(--cp-radius-md);
  font-size: var(--cp-text-sm);
  background: var(--cp-danger-soft, #FEE2E2);
  color: var(--cp-danger, #B91C1C);
  border: 1px solid var(--cp-danger, #FCA5A5);
}
.cp-payment-message[data-type="success"] {
  background: var(--cp-success-soft, #D1FAE5);
  color: var(--cp-success, #065F46);
  border-color: var(--cp-success, #6EE7B7);
}

/* Resumen de líneas en columna derecha */
.cp-payment-lines {
  list-style: none;
  margin: 0 0 var(--cp-space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  border-bottom: 1px solid var(--cp-neutral-200);
  padding-bottom: var(--cp-space-4);
}
.cp-payment-line {
  display: flex;
  justify-content: space-between;
  gap: var(--cp-space-3);
  font-size: var(--cp-text-sm);
}
.cp-payment-line__main {
  flex: 1;
  min-width: 0;
}
.cp-payment-line__qty {
  color: var(--cp-neutral-500);
  margin-right: 4px;
}
.cp-payment-line__name {
  color: var(--cp-neutral-900);
  font-weight: var(--cp-weight-bold);
}
.cp-payment-line__mods {
  display: block;
  margin-top: 2px;
  font-size: var(--cp-text-xs);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-snug);
}
.cp-payment-line__total {
  white-space: nowrap;
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}

.cp-payment-totals {
  margin-top: 0;
}


/* ══════════════════════════════════════════
   6.M PÁGINA — /es/pago-realizado (post-pago)
   ══════════════════════════════════════════ */

.cp-payment-result {
  padding: var(--cp-space-6) var(--cp-space-4);
}
.cp-payment-result__container {
  max-width: 600px;
  margin: 0 auto;
}
.cp-payment-result__state {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-8) var(--cp-space-6);
  text-align: center;
}
.cp-payment-result__icon {
  width: 88px;
  height: 88px;
  border-radius: var(--cp-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  margin-bottom: var(--cp-space-5);
}
.cp-payment-result__icon--loading {
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
}
.cp-payment-result__icon--ok {
  background: var(--cp-success-soft, #D1FAE5);
  color: var(--cp-success, #065F46);
}
.cp-payment-result__icon--error {
  background: var(--cp-danger-soft, #FEE2E2);
  color: var(--cp-danger, #B91C1C);
}
.cp-payment-result__title {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  margin: 0 0 var(--cp-space-3);
}
.cp-payment-result__text {
  font-size: var(--cp-text-base);
  color: var(--cp-neutral-700);
  line-height: var(--cp-leading-relaxed);
  margin: 0 0 var(--cp-space-4);
}
.cp-payment-result__text strong {
  color: var(--cp-primary-dark);
  font-weight: var(--cp-weight-bold);
}

.cp-payment-result__box {
  background: var(--cp-neutral-50);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-4) var(--cp-space-5);
  margin: var(--cp-space-5) 0;
  text-align: left;
}
.cp-payment-result__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cp-space-3) 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
}
.cp-payment-result__row + .cp-payment-result__row {
  border-top: 1px solid var(--cp-neutral-200);
}
.cp-payment-result__row strong {
  color: var(--cp-neutral-900);
  font-weight: var(--cp-weight-bold);
}
.cp-payment-result__row--total {
  font-size: var(--cp-text-base);
  padding-top: var(--cp-space-4);
}
.cp-payment-result__row--total strong {
  color: var(--cp-primary-dark);
  font-size: var(--cp-text-lg);
}

.cp-payment-result__hint {
  margin-top: var(--cp-space-5);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  line-height: var(--cp-leading-relaxed);
}
.cp-payment-result__actions {
  margin-top: var(--cp-space-6);
  display: flex;
  justify-content: center;
  gap: var(--cp-space-3);
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════
   6.N PROMOCIONES — Barra progreso + cupón en /es/pago
   ──────────────────────────────────────────
   Sprint 2 (P6) — Renderiza CityPokeCheckoutPromos:
   - Card barra progreso con milestones (auto + en progreso).
   - Filas extra en breakdown del resumen (descuento auto + cupón).
   - Bloque colapsable "¿Tienes un código?" sobre el CTA Pagar.
   Patrón visual: naranja CityPoké en CTA y completados, gris/ámbar/verde
   según progreso de la promo más cercana.
   ══════════════════════════════════════════ */

/* ── Card contenedor de la barra ────────── */
.cp-promo-card {
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-md);
  padding: 20px 20px 24px;
  margin-bottom: var(--cp-space-3);
  box-shadow: var(--cp-shadow-sm);
}
.cp-promo-card__head {
  margin-bottom: var(--cp-space-2);
}
.cp-promo-card__msg {
  margin: 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-800);
  line-height: var(--cp-leading-snug);
}
.cp-promo-card__msg b {
  color: var(--cp-primary);
  font-weight: var(--cp-weight-bold);
}
.cp-promo-card__hint {
  margin: var(--cp-space-1) 0 0;
  font-size: var(--cp-text-xs);
  color: var(--cp-primary);
  font-weight: var(--cp-weight-medium);
}

/* ── Barra de progreso + milestones ────────
   Margen lateral = safe-zone para que los iconos milestone (40px,
   posicionados con translateX(-50%)) no se salgan del card.
   Margen vertical = espacio para el icono que sobresale arriba y la
   etiqueta de texto que cae debajo. */
.cp-promo-bar {
  position: relative;
  height: 10px;
  background: var(--cp-neutral-100);
  border-radius: 999px;
  margin: 24px 20px 28px;
}
.cp-promo-bar__fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  background: var(--cp-neutral-300);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}
.cp-promo-bar__fill[data-state="start"]    { background: #ef4444; }
.cp-promo-bar__fill[data-state="progress"] { background: #f59e0b; }
.cp-promo-bar__fill[data-state="almost"]   { background: var(--cp-primary); }
.cp-promo-bar__fill[data-state="done"]     { background: #10b981; }

/* Estado "loading" del card: aparece desde el primer render con un placeholder
   neutro para evitar el flash que antes había entre la carga del HTML y la
   respuesta del fetch a getCheckoutPromos. JS elimina data-cp-loading cuando
   pinta el contenido real. */
.cp-promo-card[data-cp-loading] .cp-promo-card__msg {
  color: var(--cp-neutral-500, #6b7280);
  font-style: italic;
}
.cp-promo-card[data-cp-loading] .cp-promo-bar__fill {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: cpPromoSkeleton 1.4s ease-in-out infinite;
  width: 40% !important;
}
@keyframes cpPromoSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cp-promo-bar__milestones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Milestone = columna flex con icono arriba + etiqueta debajo.
   Posicionado absolutamente sobre la barra con margin-top negativo igual
   a la mitad del icono → el icono queda PERFECTAMENTE centrado sobre
   la barra (su mitad superior asoma por encima, su mitad inferior cubre
   la primera mitad de la barra). La etiqueta cae debajo en flujo natural. */
.cp-promo-milestone {
  position: absolute;
  top: 50%;
  margin-top: -20px; /* = -mitad altura del icono (40/2) */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  pointer-events: none;
}
.cp-promo-milestone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cp-neutral-0);
  border: 3px solid var(--cp-neutral-300);
  color: var(--cp-neutral-500);
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.cp-promo-milestone__label {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-promo-milestone.is-done .cp-promo-milestone__icon {
  background: #ecfdf5;
  border-color: #10b981;
  color: #059669;
}
.cp-promo-milestone.is-done .cp-promo-milestone__label {
  color: #059669;
}

/* ── Filas de descuento en el breakdown ──── */
.cp-payment-discount {
  color: #059669 !important;
}
.cp-payment-discount strong {
  color: #059669 !important;
  font-weight: var(--cp-weight-bold) !important;
}
.cp-payment-coupon span {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-payment-coupon__remove {
  background: none;
  border: 0;
  color: var(--cp-neutral-500);
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}
.cp-payment-coupon__remove:hover {
  color: #ef4444;
}

/* ── Propina (chips %) — entre Total y cupón ───────── */
.cp-tip-block {
  margin: var(--cp-space-3) 0 var(--cp-space-2);
  padding-top: var(--cp-space-3);
  border-top: 1px dashed var(--cp-neutral-200);
}
.cp-tip-block__title {
  margin: 0 0 var(--cp-space-2);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-800);
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}
.cp-tip-block__title i {
  color: var(--cp-primary);
}
/* Grid 5 columnas iguales — todos los chips en una sola fila en desktop.
   En móvil estrecho pasamos a 2 columnas (Sin propina ocupa la primera
   fila completa, los 4 % en 2 filas de 2). */
.cp-tip-chips {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 6px;
}
.cp-tip-chip {
  padding: 8px 4px;
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-700);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cp-tip-chip:hover:not(:disabled):not(.is-active) {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}
.cp-tip-chip.is-active {
  background: var(--cp-primary);
  border-color: var(--cp-primary);
  color: var(--cp-neutral-0);
}
.cp-tip-chip:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 480px) {
  .cp-tip-chips {
    grid-template-columns: 1fr 1fr;
  }
  /* Sin propina ocupa toda la primera fila */
  .cp-tip-chip:first-child {
    grid-column: 1 / -1;
  }
}

/* ── Bloque cupón colapsable ─────────────── */
.cp-coupon-block {
  margin: var(--cp-space-3) 0 var(--cp-space-2);
  border-top: 1px dashed var(--cp-neutral-200);
  padding-top: var(--cp-space-3);
}
.cp-coupon-toggle {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--cp-space-1) 0;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-medium);
  color: var(--cp-neutral-700);
  cursor: pointer;
  transition: color 0.2s ease;
}
.cp-coupon-toggle:hover {
  color: var(--cp-primary);
}
.cp-coupon-toggle > i:first-child {
  color: var(--cp-primary);
}
.cp-coupon-toggle__chev {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}
.cp-coupon-toggle.is-open .cp-coupon-toggle__chev {
  transform: rotate(180deg);
}
.cp-coupon-panel {
  margin-top: var(--cp-space-2);
  animation: cpSlideDown 0.25s ease;
}
@keyframes cpSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-coupon-input-row {
  display: flex;
  gap: var(--cp-space-2);
}
.cp-coupon-input {
  flex: 1;
  padding: var(--cp-space-2) var(--cp-space-3);
  font-size: var(--cp-text-sm);
  border: 1px solid var(--cp-neutral-300);
  border-radius: var(--cp-radius-sm);
  text-transform: uppercase;
  background: var(--cp-neutral-0);
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cp-coupon-input:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px var(--cp-primary-soft, rgba(244,157,95,0.18));
}
.cp-coupon-feedback {
  margin: var(--cp-space-2) 0 0;
  padding: var(--cp-space-2) var(--cp-space-3);
  font-size: var(--cp-text-xs);
  border-radius: var(--cp-radius-sm);
  line-height: var(--cp-leading-snug);
}
.cp-coupon-feedback[data-type="success"] {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #bbf7d0;
}
.cp-coupon-feedback[data-type="error"] {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Mobile compactness */
@media (max-width: 767.98px) {
  .cp-promo-card { padding: var(--cp-space-3) var(--cp-space-3) var(--cp-space-4); }
  .cp-promo-milestone { width: 48px; }
  .cp-promo-milestone__icon { width: 24px; height: 24px; font-size: 0.65rem; }
}


/* ══════════════════════════════════════════
   7. UTILIDADES
   ══════════════════════════════════════════ */
.cp-stack    { display: flex; flex-direction: column; }
.cp-stack-2  { gap: var(--cp-space-2); }
.cp-stack-3  { gap: var(--cp-space-3); }
.cp-stack-4  { gap: var(--cp-space-4); }
.cp-stack-6  { gap: var(--cp-space-6); }
.cp-stack-8  { gap: var(--cp-space-8); }

.cp-flex      { display: flex; }
.cp-flex-center { display: flex; align-items: center; justify-content: center; }
.cp-flex-between { display: flex; align-items: center; justify-content: space-between; }

.cp-hide-mobile { display: none; }
@media (min-width: 768px) {
  .cp-hide-mobile  { display: initial; }
  .cp-hide-desktop { display: none; }
}

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


/* ══════════════════════════════════════════
   8. ACCESIBILIDAD
   ══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--cp-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   F2 — Productos / modificadores AGOTADOS (snooze de Deliverect)
   ════════════════════════════════════════════════════════ */
.cp-product-card.is-snoozed {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none; /* card no interactiva */
}
.cp-product-card__soldout {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--cp-danger, #dc2626);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}
.cp-product-card__soldout-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cp-danger, #dc2626);
  text-transform: uppercase;
}

/* ── Badges dinámicos del producto (productTags de Deliverect) ──
   Se apilan en la esquina superior izquierda de la imagen. Como
   .cp-product-card__soldout ocupa esa posición cuando el item está
   agotado, los badges quedan a la DERECHA del card para no chocar. */
.cp-product-card__badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.cp-product-card__badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cp-neutral-800, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Colores por tag conocido. Slug en minúsculas con guion. */
.cp-product-card__badge--popular,
.cp-product-card__badge--bestseller,
.cp-product-card__badge--mas-vendido { background: #fef3c7; color: #92400e; }

.cp-product-card__badge--new,
.cp-product-card__badge--nuevo { background: #dbeafe; color: #1e40af; }

.cp-product-card__badge--vegan,
.cp-product-card__badge--vegano,
.cp-product-card__badge--veggie,
.cp-product-card__badge--vegetariano { background: #d1fae5; color: #065f46; }

.cp-product-card__badge--spicy,
.cp-product-card__badge--picante,
.cp-product-card__badge--hot { background: #fee2e2; color: #991b1b; }

.cp-product-card__badge--gluten-free,
.cp-product-card__badge--sin-gluten { background: #f3e8ff; color: #6b21a8; }

.cp-product-card__badge--healthy,
.cp-product-card__badge--saludable,
.cp-product-card__badge--fit { background: #ecfdf5; color: #059669; }

.cp-product-card__badge--promo,
.cp-product-card__badge--oferta,
.cp-product-card__badge--destacado { background: #ffedd5; color: #c2410c; }

/* Modificadores agotados dentro del modal de producto */
.cp-mod-option.is-snoozed {
  opacity: 0.5;
  cursor: not-allowed;
}
.cp-mod-option.is-snoozed .cp-mod-option__name { text-decoration: line-through; }
.cp-mod-option__soldout {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cp-danger, #dc2626);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   F4 — Multimax: contador de cantidad por modifier (-N+)
   ════════════════════════════════════════════════════════ */
.cp-mod-option--qty { cursor: default; }
.cp-mod-qty {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cp-mod-qty__btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-primary, #F49D5F);
  background: var(--cp-neutral-0, #fff);
  color: var(--cp-primary-dark, #B85F1A);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.cp-mod-qty__btn:hover:not(:disabled) { background: var(--cp-primary-soft, #FCEEDF); }
.cp-mod-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cp-mod-qty__n {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cp-modal__summary-qty {
  color: var(--cp-primary-dark, #B85F1A);
  font-weight: 700;
}

/* Nota por producto (remark) en el paso final del modal */
.cp-modal__note-label {
  display: block;
  margin: var(--cp-space-4, 16px) 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.cp-modal__note-label span { color: var(--cp-neutral-500, #6b7280); font-weight: 400; }
.cp-modal__note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cp-neutral-200, #e5e7eb);
  border-radius: var(--cp-radius-md, 12px);
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
  min-height: 56px;
}
.cp-modal__note:focus {
  outline: none;
  border-color: var(--cp-primary, #F49D5F);
  box-shadow: 0 0 0 3px var(--cp-primary-soft, #FCEEDF);
}