/* ════════════════════════════════════════════════════════════════
   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-600:    #52525B; /* faltaba: 2 reglas lo usaban sin valor por defecto */
  --cp-neutral-700:    #3F3F46;
  --cp-neutral-800:    #27272A; /* faltaba: 4 reglas lo usaban sin valor por defecto */
  --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-leading-relaxed: 1.75; /* faltaba: 3 reglas lo usaban sin valor por defecto */

  --cp-weight-regular: 400;
  --cp-weight-medium:  500; /* faltaba: 3 reglas lo usaban sin valor por defecto */
  --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-5:  20px; /* faltaba en la escala: 15 reglas lo usaban y un var() sin definir invalida TODA la declaración (padding→0). Bug latente cazado 12-ago */
  --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);
  }
}

/* ── Banner: cupón copiable + cierre (diseño Carlos ago-2026) ── */
.cp-promo-banner__coupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--cp-space-3);
  padding: 2px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--cp-text-xs);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cp-promo-banner__coupon:hover {
  background: rgba(255, 255, 255, 0.15);
}
.cp-promo-banner__coupon-code {
  font-weight: var(--cp-weight-bold);
  letter-spacing: 0.5px;
}
.cp-promo-banner__coupon-feedback {
  font-weight: var(--cp-weight-bold);
  font-size: var(--cp-text-xs);
}
.cp-promo-banner__coupon-feedback:not(:empty) {
  margin-left: 4px;
}
.cp-promo-banner__close {
  position: absolute;
  right: var(--cp-space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  font-weight: var(--cp-weight-bold);
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  padding: 4px;
}
.cp-promo-banner__close:hover {
  opacity: 1;
}

/* Sin banner (no hay promo o se ha cerrado): todo lo que se colocaba debajo de él sube */
html.cp-sin-banner {
  --cp-banner-height: 0px;
  --cp-banner-height-mobile: 0px;
}

/* ── 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 { flex-shrink: 0; }
.cp-header__logo img {
  height: 48px;
  width: auto;
  max-width: 42vw;
  object-fit: contain; /* feedback Carlos móvil: jamás deformar la proporción */
}
@media (min-width: 768px) {
  .cp-header__logo img { height: 56px; max-width: none; }
}

/* ── Ajustes móvil (feedback Carlos ago-2026) ─────────────────────── */
@media (max-width: 768px) {
  /* 2. Alérgenos y Cambiar al lado del bloque "Recogida en", no en fila propia */
  .cp-menu__context-bar .cp-flex-between,
  .cp-cart-page__context .cp-flex-between {
    flex-wrap: nowrap !important;
  }
  .cp-context-info { flex: 1; min-width: 0; }
  .cp-context-info__store {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cp-context-actions { flex-shrink: 0; display: flex; gap: 6px; }
  .cp-context-actions .cp-btn--sm span { display: none; } /* solo icono */
  .cp-context-actions .cp-btn--sm { padding: 8px 11px; }
  .cp-context-actions .cp-btn--sm i { margin: 0; }

  /* 3. Márgenes laterales consistentes en móvil */
  .cp-container {
    padding-left: var(--cp-space-4);
    padding-right: var(--cp-space-4);
  }
}

.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-header__login-icon { display: none; } /* en escritorio, solo el texto */

/* ── Cabecera en movil: que NUNCA desborde (aviso Carlos 22-sep-2026) ──
   Medido a 360 px (Android): la fila necesitaba 418 px. El logo no cedia
   (1fr con min-content) y "Iniciar sesion" + "Pide tu poke" + carrito
   tampoco, asi que la pagina entera se ensanchaba y el configurador salia
   cortado por la derecha. Ahora el logo puede encoger y el login es icono. */
@media (max-width: 767px) {
  .cp-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto; /* la columna del logo puede bajar de su contenido */
    gap: var(--cp-space-2);
    padding: 0 var(--cp-space-3);
  }
  .cp-header__logo { min-width: 0; text-align: center; }
  .cp-header__logo img { max-width: 100%; }
  .cp-header__login {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
  }
  .cp-header__login-icon { display: inline; }
  .cp-header__login-text { display: none; }
}
/* Moviles muy estrechos (320-360): un poco mas compacto para que el logo
   conserve presencia (a 320 pasaba de 38 px a 74 px de ancho). */
@media (max-width: 360px) {
  .cp-header__inner { gap: 6px; padding: 0 10px; }
  .cp-header__inner .cp-icon-btn,
  .cp-header__login { width: 40px; height: 40px; }
  .cp-header__actions { gap: 4px; }
  .cp-btn-poke { padding: 8px 10px; }
}

.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);
}
/* Salto de la burbuja al anadir un producto: la senal de "ya esta en la cesta"
   que faltaba al anadir desde la ficha de producto (aviso de Carlos, sep-2026). */
@keyframes cpBadgeBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.cp-icon-btn__badge.is-bump { animation: cpBadgeBump 0.42s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cp-icon-btn__badge.is-bump { animation: none; }
}

.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;
  right: 0;
  left: auto;
  width: 380px;
  max-width: 95vw;
  height: 100dvh;
  background: var(--cp-neutral-0);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform var(--cp-transition-base);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.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;
}
/* Panel lateral con tarjetas (diseño Carlos ago-2026) */
.cp-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cp-space-4) var(--cp-space-5) var(--cp-space-3);
  border-bottom: 1px solid var(--cp-neutral-100);
  background: var(--cp-neutral-0);
}
.cp-mobile-drawer__home {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-mobile-drawer__body {
  flex: 1;
  overflow-y: auto;
  /* Aire lateral e inferior (Carlos R4-04) */
  padding: var(--cp-space-2) var(--cp-space-3) var(--cp-space-6);
  scrollbar-width: thin;
}
.cp-mobile-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  padding: var(--cp-space-4) var(--cp-space-5);
  border-bottom: 1px solid var(--cp-neutral-100);
  color: inherit;
  opacity: 0;
  transform: translateX(18px);
  transition: background 0.18s, opacity 0.35s ease, transform 0.35s ease;
}
.cp-mobile-drawer.is-open .cp-mobile-drawer__item { opacity: 1; transform: translateX(0); }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(1) { transition-delay: 0.08s; }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(2) { transition-delay: 0.14s; }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(3) { transition-delay: 0.20s; }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(4) { transition-delay: 0.26s; }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(5) { transition-delay: 0.32s; }
.cp-mobile-drawer.is-open .cp-mobile-drawer__item:nth-child(6) { transition-delay: 0.38s; }
.cp-mobile-drawer__item:hover { background: rgba(0, 0, 0, 0.03); }
.cp-mobile-drawer__item:last-child { border-bottom: none; }
.cp-mobile-drawer__item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--cp-radius-md, 10px);
  flex-shrink: 0;
  background: var(--cp-neutral-100);
  overflow: hidden;
}
.cp-mobile-drawer__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-mobile-drawer__item-info { flex: 1; min-width: 0; }
.cp-mobile-drawer__item-name {
  display: block;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-medium, 500);
  color: var(--cp-neutral-900);
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-mobile-drawer__item-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--cp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
  background: #c2d3df;
  color: #2a2a1e;
}
.cp-mobile-drawer__item-arrow {
  color: var(--cp-neutral-300);
  flex-shrink: 0;
  font-size: var(--cp-text-sm);
  transition: transform 0.2s, color 0.2s;
}
.cp-mobile-drawer__item:hover .cp-mobile-drawer__item-arrow {
  transform: translateX(3px);
  color: var(--cp-neutral-900);
}
.cp-mobile-drawer__footer {
  padding: var(--cp-space-4) var(--cp-space-5) var(--cp-space-6);
  border-top: 1px solid var(--cp-neutral-100);
}
.cp-mobile-drawer__cta {
  display: block;
  width: 100%;
  padding: var(--cp-space-3);
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-medium, 500);
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: var(--cp-radius-sm, 8px);
  transition: background 0.2s, transform 0.15s;
}
.cp-mobile-drawer__cta:hover {
  background: var(--cp-neutral-900);
  color: var(--cp-neutral-0);
  transform: translateY(-1px);
}

/* CTA "Pide tu poké" del header (diseño Carlos) */
.cp-btn-poke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-primary);
  color: var(--cp-neutral-0);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  padding: 10px 20px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(232, 145, 90, 0.35);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cp-btn-poke:hover {
  background: var(--cp-primary-dark, #d97d42);
  color: var(--cp-neutral-0);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 145, 90, 0.45);
}
@media (max-width: 768px) {
  .cp-btn-poke {
    font-size: var(--cp-text-xs);
    padding: 8px 14px;
  }
}

/* ── 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; }
  .cp-form-row--2   { grid-template-columns: 1fr 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 {
  /* Flota bajo la barra «Recogida en»: el top lo pone el JS al abrir (colocarPanel). */
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 2 * var(--cp-space-3));
  max-width: 720px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--cp-neutral-200, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: var(--cp-space-4);
  z-index: 60;
}
.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 {
    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; }
/* Imagen real de la categoría en el chip (Carlos R4-01, mismo icono que desktop) */
.cp-cat-chip__img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.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);
  /* 32px para que el primer título de sección ("Crea tu Bowl") no quede
     pegado a la zona de contexto y buscador (ajuste 02, Carlos). */
  padding-top: var(--cp-space-8);
  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);
}

/* Tarjeta "Repite tu pedido" en la home (usuarios logueados con pedidos) */
.cp-repeat-card {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  width: 100%;
  margin-bottom: var(--cp-space-4);
  padding: 18px 22px; /* corrección usuario: aire a los 4 lados */
  background: linear-gradient(120deg, var(--cp-primary), var(--cp-primary-dark, #d97d42));
  color: var(--cp-neutral-0);
  border: none;
  border-radius: var(--cp-radius-md);
  box-shadow: var(--cp-shadow-sm);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.2s;
}
.cp-repeat-card:hover { transform: translateY(-1px); box-shadow: var(--cp-shadow-md); }
.cp-repeat-card .cp-choice-card__arrow {
  color: var(--cp-neutral-0); /* flecha blanca visible sobre el naranja */
  opacity: 1;
  font-size: 1rem;
  flex-shrink: 0;
}
.cp-repeat-card:disabled { opacity: 0.7; cursor: wait; }
.cp-repeat-card__icon { font-size: 1.3rem; flex-shrink: 0; }
.cp-repeat-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-repeat-card__title { font-weight: var(--cp-weight-bold); font-size: var(--cp-text-base); }
.cp-repeat-card__subtitle {
  font-size: var(--cp-text-sm);
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cupón en la CESTA (Fase 2, feedback Carlos) */
.cp-cart-coupon {
  margin-bottom: var(--cp-space-4);
  padding: var(--cp-space-4);
  border: 1.5px dashed var(--cp-primary);
  border-radius: var(--cp-radius-md);
  background: var(--cp-primary-soft, #fdf3ec);
}
.cp-cart-coupon__label {
  display: block;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  margin-bottom: var(--cp-space-2);
}
.cp-cart-coupon__row { display: flex; gap: var(--cp-space-2); }
.cp-cart-coupon__row .cp-input { flex: 1; min-width: 0; text-transform: uppercase; }
.cp-cart-coupon__feedback { font-size: var(--cp-text-sm); margin: var(--cp-space-2) 0 0; }
.cp-cart-coupon__feedback[data-type="success"] { color: var(--cp-success, #10b981); font-weight: var(--cp-weight-bold); }
.cp-cart-coupon__feedback[data-type="error"] { color: var(--cp-danger, #ef4444); }

/* Más peso visual del cupón en PAGO (petición Carlos: que no pase desapercibido) */
.cp-coupon-block {
  border: 1.5px dashed var(--cp-primary);
  border-radius: var(--cp-radius-md);
  background: var(--cp-primary-soft, #fdf3ec);
  padding: var(--cp-space-2) var(--cp-space-3);
}

/* Tarjeta-IMAGEN de promo dentro de la cuadrícula (migration_030): ocupa una
   celda como un producto; el arte lo diseña el cliente con la info dentro. */
.cp-promo-imgcard {
  border-radius: var(--cp-radius-md);
  overflow: hidden;
  box-shadow: var(--cp-shadow-sm);
  background: var(--cp-neutral-100);
  display: flex;
}
.cp-promo-imgcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Banner de promo intercalado en el listado (promos con banner_listado=1) */
.cp-promo-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-4);
  margin: var(--cp-space-5) 0;
  padding: var(--cp-space-4) var(--cp-space-5);
  background: linear-gradient(120deg, var(--cp-primary), var(--cp-primary-dark, #d97d42));
  color: var(--cp-neutral-0);
  border-radius: var(--cp-radius-md);
  box-shadow: var(--cp-shadow-sm);
}
.cp-promo-inline__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cp-promo-inline__text strong { font-size: var(--cp-text-base); }
.cp-promo-inline__text span { font-size: var(--cp-text-sm); opacity: 0.92; }
.cp-promo-inline__code {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  font-weight: var(--cp-weight-bold);
  letter-spacing: 0.5px;
  font-size: var(--cp-text-sm);
}

/* 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);
  }
}
/* Móvil real: 2 tarjetas por fila SIEMPRE (Carlos R4-03).
   Con minmax(220px), en ~390px de viewport solo cabía 1 columna. */
@media (max-width: 640px) {
  .cp-menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-3);
  }
  .cp-product-card__body {
    padding: var(--cp-space-3);
    gap: var(--cp-space-1);
  }
  .cp-product-card__name { font-size: var(--cp-text-sm); }
  .cp-product-card__desc { font-size: 0.72rem; }
  .cp-product-card__price { font-size: var(--cp-text-base); }
  .cp-product-card__bottom { padding-top: var(--cp-space-2); }
}

/* ── 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);
}
/* Descuento de las promos encima del total (2x1, producto…) */
.cp-cart-totals--dto {
  font-size: var(--cp-text-sm);
  color: var(--cp-success, #059669);
  margin-bottom: var(--cp-space-1);
}
.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);
}
/* "Continúa tu pedido" — mismo formato que el repite-pedido, en tono neutro
   para que el naranja siga siendo del repite-pedido (Carlos, bloque 01). */
.cp-resume-card {
  background: var(--cp-neutral-0);
  color: var(--cp-neutral-900);
  border: 2px solid var(--cp-primary);
}
.cp-resume-card .cp-repeat-card__icon { color: var(--cp-primary); }
.cp-resume-card .cp-choice-card__arrow { color: var(--cp-primary); }

/* Progreso de promoción sobre el CTA (Carlos R5-04) */
.cp-cart-bar__promo {
  margin: 0 0 var(--cp-space-2);
  text-align: center;
  font-size: 0.78rem;
  font-weight: var(--cp-weight-bold);
  line-height: 1.25;
  color: var(--cp-primary);
  background: var(--cp-primary-soft, rgba(240, 138, 93, 0.12));
  border-radius: var(--cp-radius-sm, 8px);
  padding: 6px 10px;
}
.cp-cart-bar__promo.is-done {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}
@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); }
}

/* Cabecera del paso 0 (imagen + nombre + descripcion).
   En escritorio "display: contents": los tres siguen siendo hijos directos
   del cuerpo, con el mismo hueco de siempre, como si el envoltorio no existiera.
   En movil y en pantallas bajas (portatil de 13" = 610 px de alto util) la
   imagen a 320 px dejaba las opciones fuera de la vista: habia que hacer
   scroll para empezar a configurar (aviso Carlos 22-sep-2026, puntos 02 y 04).
   Encogerla no bastaba (con 134 px seguia sin entrar ninguna); en fila si:
   a 1280x610 se ven 3 opciones y a 360x800 pasan de 2 a 4. */
.cp-modal__intro { display: contents; }
@media (max-width: 767px), (max-height: 760px) {
  .cp-modal__intro {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .cp-modal__intro .cp-modal__hero-img {
    width: 96px;
    max-width: 96px;
    margin: 0;
    grid-row: span 2;
  }
  .cp-modal__intro .cp-modal__hero-img--placeholder { font-size: 2.2rem; }
  .cp-modal__intro .cp-modal__product-name,
  .cp-modal__intro .cp-modal__intro-desc { text-align: left; }
  .cp-modal__intro .cp-modal__product-name { font-size: var(--cp-text-xl); }
  .cp-modal__intro .cp-modal__intro-desc { margin-top: 4px; }
}

/* 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-customer__error {
  margin: 0;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-danger, #dc2626);
}
.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;
  /* 40px laterales = media etiqueta de hito (64px/2) + holgura: así el texto del
     hito del extremo nunca se sale de la tarjeta (aviso del cliente ago-2026). */
  margin: 24px 40px 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;
  width: 76px;              /* algo más ancha que el icono, centrada bajo él */
  margin-left: -6px;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  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;
}

/* Precio rebajado en la ficha cuando se llega con ?promo= (oferta post-compra).
   El tachado va antes y en gris; el precio final manda, en el tono de marca. */
.cp-product-page__price--oferta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--cp-space-3);
}
.cp-product-page__antes {
  color: var(--cp-neutral-500);
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-regular);
}
.cp-product-page__ahora { color: var(--cp-primary-dark); }
.cp-product-page__oferta-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--cp-space-2);
  margin: calc(var(--cp-space-2) * -1) 0 var(--cp-space-4);
  padding: var(--cp-space-3) var(--cp-space-4);
  border-radius: var(--cp-radius-md);
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark);
  font-size: var(--cp-text-sm);
  line-height: var(--cp-leading-snug);
}

/* ── Oferta de producto tras la compra, con cuenta atrás (mejora 10) ──
   Borde discontinuo y fondo melocotón, como la referencia del cliente: se lee
   como un cupón recortable y se distingue del resto de la pantalla. */
.cp-oto--producto {
  border: 2px dashed var(--cp-primary);
  background: var(--cp-primary-soft);
  border-radius: var(--cp-radius-md);
  padding: var(--cp-space-5);
  text-align: center;
}
.cp-oto__reloj {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  margin: 0 auto var(--cp-space-4);
  padding: var(--cp-space-2) var(--cp-space-4);
  border: 1px solid var(--cp-primary);
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-0);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
}
.cp-oto__reloj strong {
  color: var(--cp-primary-dark);
  font-variant-numeric: tabular-nums;   /* el ancho no baila al contar */
  min-width: 3.2em;
}
.cp-oto__titular {
  margin: 0 0 var(--cp-space-4);
  font-size: var(--cp-text-xl);
  color: var(--cp-primary-dark);
}
.cp-oto__titular strong { font-size: 1.35em; font-weight: var(--cp-weight-black); }

.cp-oto__ficha {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  text-align: left;
}
.cp-oto__img {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: var(--cp-radius-md);
  flex: none;
}
.cp-oto__cuerpo { flex: 1; min-width: 0; }
.cp-oto__nombre {
  margin: 0 0 var(--cp-space-1);
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
}
.cp-oto__desc {
  margin: 0 0 var(--cp-space-2);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-600);
  line-height: var(--cp-leading-snug);
}
.cp-oto__precios {
  display: flex;
  align-items: baseline;
  gap: var(--cp-space-3);
  margin: 0 0 var(--cp-space-3);
}
.cp-oto__antes {
  color: var(--cp-neutral-500);
  font-size: var(--cp-text-base);
}
.cp-oto__ahora {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-black);
  color: var(--cp-primary-dark);
}
.cp-oto__cta { width: 100%; }

@media (max-width: 560px) {
  .cp-oto__ficha { flex-direction: column; text-align: center; }
  .cp-oto__img { width: 100%; height: 160px; }
  .cp-oto__precios { justify-content: center; }
}

/* ── Recomendado para llegar al hito, en la cesta (mejora 08) ──
   Reutiliza la tarjeta del widget de sugerencias (.cp-upsell-modal__item), asi
   que aqui solo va la caja que la envuelve. */
.cp-cart-nudge {
  margin-bottom: var(--cp-space-3);
  padding: var(--cp-space-4);
  border: 1px solid var(--cp-primary);
  border-radius: var(--cp-radius-md);
  background: var(--cp-primary-soft);
}
.cp-cart-nudge__msg {
  margin: 0 0 var(--cp-space-3);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-800);
}
.cp-cart-nudge__msg b { color: var(--cp-primary-dark); }
.cp-cart-nudge__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* La tarjeta va sobre el fondo melocoton de la caja: fondo propio para que se
   despegue, como dentro del widget. */
.cp-cart-nudge__list .cp-upsell-modal__item {
  background: var(--cp-neutral-0);
  border-radius: var(--cp-radius-sm);
}
.cp-cart-nudge__more {
  display: block;
  width: 100%;
  margin-top: var(--cp-space-3);
  padding: var(--cp-space-2);
  border: none;
  background: none;
  color: var(--cp-primary-dark);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  cursor: pointer;
  text-decoration: underline;
}
.cp-cart-nudge__more:hover { color: var(--cp-primary-hover); }

/* ── Precio con decimales pequeños, estilo Amazon (ajuste 17) ──
   Los decimales van en em, no en px, para que encojan en proporción sea cual
   sea el tamaño del precio que los contiene (tarjeta, botón del modal,
   mini-cesta). Se elevan un poco sobre la linea base, como en Kefi. */
.cp-price {
  white-space: nowrap;
}
.cp-price__dec {
  font-size: 0.62em;
  vertical-align: 0.42em;
  margin-left: 1px;
  letter-spacing: 0;
}

/* Punto de salida de la barra (ajuste 05). Sin etiqueta y discreto: solo marca
   el origen del recorrido para que la barra no se lea como un diseño a medias
   cuando hay un unico hito. No representa ninguna promocion. */
.cp-promo-milestone--origen {
  width: auto;
  margin-top: -7px;   /* = -mitad del punto (14/2) */
}
.cp-promo-milestone__punto {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cp-neutral-0);
  border: 3px solid var(--cp-neutral-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ── 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-bar { margin-left: 30px; margin-right: 30px; }
  .cp-promo-milestone { width: 48px; }
  .cp-promo-milestone__label { width: 60px; margin-left: -6px; font-size: 0.62rem; }
  .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;
  /* Fondo suave de marca: cualquier etiqueta que escriba el admin sale con
     identidad, no como una pegatina blanca. Los tipos conocidos (vegano,
     picante...) la sobreescriben abajo con su color propio. */
  background: var(--cp-primary-soft, #FCEEDF);
  color: #92400E;
  border: 1px solid rgba(0, 0, 0, 0.07); /* neutro: sirve con cualquier color de tag */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* ── Etiqueta de promo en la tarjeta (Carlos, 21-oct-2026) ──
   Pegatina en estrella como la de su boceto: «−30%» (descuento que se aplica
   solo, con el precio tachado abajo) y «2x1». Va a la IZQUIERDA porque a la
   derecha están las etiquetas de tipo (Más vendido, Vegano…). Un plato agotado
   no la lleva (su aviso ocupa esa esquina). */
.cp-product-card__promos {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.cp-product-card__promo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--cp-danger, #dc2626);
  color: #fff;
  font-size: 1.05rem;
  font-weight: var(--cp-weight-black, 900);
  letter-spacing: -0.02em;
  line-height: 1;
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 79% 21%, 94% 25%, 88% 39%, 100% 50%, 88% 61%, 94% 75%,
                     79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 75%, 12% 61%,
                     0% 50%, 12% 39%, 6% 25%, 21% 21%, 25% 6%, 39% 12%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}
.cp-modal__summary-antes {
  color: var(--cp-neutral-500);
  font-weight: var(--cp-weight-regular, 400);
  font-size: 0.85em;
  margin-right: 4px;
}
.cp-product-card__price--oferta {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--cp-space-2);
}
.cp-product-card__antes {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-regular, 400);
  color: var(--cp-neutral-500);
}
@media (max-width: 640px) {
  .cp-product-card__promo { width: 50px; height: 50px; font-size: 0.85rem; }
  .cp-product-card__antes { font-size: 0.72rem; }
}

/* 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;
}

/* ── OTO: oferta para el próximo pedido en la pantalla de confirmación ──
   (petición Carlos, bloque 08). Estilo "cupón" para que destaque sin gritar. */
.cp-oto {
  margin: var(--cp-space-6) 0 var(--cp-space-4);
  padding: var(--cp-space-5);
  border: 2px dashed var(--cp-primary);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-primary-soft, rgba(240, 138, 93, 0.10));
  text-align: center;
}
.cp-oto__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: var(--cp-weight-black);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cp-neutral-0);
  background: var(--cp-primary);
  padding: 3px 10px;
  border-radius: var(--cp-radius-full);
}
.cp-oto__text {
  margin: var(--cp-space-3) 0 var(--cp-space-4);
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  line-height: 1.35;
  color: var(--cp-neutral-900);
}
.cp-oto__code {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-black);
  letter-spacing: 0.06em;
  color: var(--cp-primary);
  background: var(--cp-neutral-0);
  border: 1px solid var(--cp-primary);
  border-radius: var(--cp-radius-md, 12px);
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cp-oto__code:hover { transform: translateY(-1px); box-shadow: var(--cp-shadow-sm); }
.cp-oto__dto {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--cp-neutral-0);
  background: var(--cp-primary);
  border-radius: var(--cp-radius-full);
  padding: 2px 8px;
}
.cp-oto__copied {
  display: block;
  margin-top: var(--cp-space-2);
  font-size: 0.78rem;
  font-weight: var(--cp-weight-bold);
  color: #15803d;
}
.cp-oto__until {
  display: block;
  margin-top: var(--cp-space-2);
  font-size: 0.76rem;
  color: var(--cp-neutral-500);
}

/* ── Oferta de recogida por proximidad en la cesta (Carlos, bloque 09) ── */
.cp-nearby {
  position: relative;
  margin-bottom: var(--cp-space-4);
  padding: var(--cp-space-4) var(--cp-space-5);
  border: 1px solid var(--cp-primary);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-primary-soft, rgba(240, 138, 93, 0.10));
}
.cp-nearby__close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cp-neutral-500);
  cursor: pointer;
}
.cp-nearby__title {
  margin: 0 0 4px;
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-900);
  padding-right: var(--cp-space-5);
}
.cp-nearby__text {
  margin: 0 0 var(--cp-space-3);
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-700);
}
.cp-nearby__actions {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  flex-wrap: wrap;
}
.cp-nearby__keep {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-medium, 500);
  color: var(--cp-neutral-500);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Un elemento con [hidden] NO debe ocupar ni capturar clics ──────────────
   Los modales declaran display:flex, que anula el hidden del HTML. En móvil
   pasaba desapercibido (el modal cerrado se va fuera de pantalla), pero en
   escritorio quedaba centrado con opacity:0: invisible y CAPTURANDO CLICS.
   Eso tapaba el botón de validar el código SMS en desktop (reporte de Carlos)
   y dejaba una caja invisible en el centro de todas las páginas para los
   visitantes no identificados. Regla de seguridad general del proyecto. */
[hidden] { display: none !important; }
.cp-modal:not(.is-open),
.cp-modal-overlay:not(.is-open) {
  pointer-events: none;
  visibility: hidden;
}
.cp-modal.is-open,
.cp-modal-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* ── Ficha de producto con URL propia (/es/producto/{id}) ──────────────────
   Página de aterrizaje para campañas: un modal no se puede enlazar, así que
   cada producto tiene aquí su página. El configurador sigue siendo el mismo. */
.cp-product-page { padding: var(--cp-space-8) 0 var(--cp-space-12); }
.cp-product-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  margin-bottom: var(--cp-space-6);
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-500);
}
.cp-product-page__back:hover { color: var(--cp-primary); }
.cp-product-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cp-space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .cp-product-page__grid { grid-template-columns: 1fr 1fr; gap: var(--cp-space-8); }
}
.cp-product-page__media {
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  background: var(--cp-neutral-100);
  aspect-ratio: 1 / 1;
}
.cp-product-page__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-product-page__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: var(--cp-neutral-300);
}
.cp-product-page__title {
  margin: 0 0 var(--cp-space-3);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  color: var(--cp-neutral-900);
}
.cp-product-page__desc {
  margin: 0 0 var(--cp-space-5);
  font-size: var(--cp-text-base);
  line-height: 1.55;
  color: var(--cp-neutral-700);
}
.cp-product-page__price {
  margin: 0 0 var(--cp-space-5);
  font-size: 1.7rem;
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
}
.cp-product-page__allergens {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--cp-space-2);
  margin-bottom: var(--cp-space-6);
}
.cp-product-page__allergens-title {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-neutral-500);
}
.cp-product-page__allergen {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-100);
  color: var(--cp-neutral-700);
}
.cp-product-page__cta { width: 100%; }
@media (min-width: 768px) { .cp-product-page__cta { width: auto; min-width: 280px; } }
.cp-product-page__note {
  margin: var(--cp-space-3) 0 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
}

/* Miniatura en el resumen de la pantalla de pago (Carlos, bloque 10) */
.cp-payment-line__img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--cp-radius-sm, 8px);
  object-fit: cover;
  background: var(--cp-neutral-100);
}
.cp-payment-line__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-neutral-300);
}

/* ── Productos destacados en la home (Carlos, bloque 18) ─────────────────── */
.cp-featured { margin-top: var(--cp-space-8); }
.cp-featured__title {
  margin: 0 0 var(--cp-space-4);
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-black);
  color: var(--cp-neutral-900);
}
.cp-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cp-space-3);
}
@media (min-width: 768px) {
  .cp-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-space-4); }
}
.cp-featured__card {
  display: block;
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  background: var(--cp-neutral-0);
  color: inherit;
  transition: box-shadow var(--cp-transition-fast), transform var(--cp-transition-fast);
}
.cp-featured__card:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }
.cp-featured__media {
  aspect-ratio: 1 / 1;
  background: var(--cp-neutral-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--cp-neutral-300);
  overflow: hidden;
}
.cp-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-featured__body {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--cp-space-3);
}
.cp-featured__name {
  font-size: var(--cp-text-sm);
  font-weight: var(--cp-weight-bold);
  line-height: 1.25;
  color: var(--cp-neutral-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-featured__price {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-black);
  color: var(--cp-primary);
}

/* ── Buscador de la carta (Carlos, bloque 07) ────────────────────────────── */
.cp-menu__search {
  /* La barra "Recogida en" es sticky y con borde: sin aire propio, el buscador
     y el filtro de alérgenos quedaban pegados a ella. */
  margin-top: var(--cp-space-5);
  margin-bottom: var(--cp-space-3);
}
@media (max-width: 767px) {
  .cp-menu__search { margin-top: var(--cp-space-4); }
}

/* Tarjeta de promociones en la CARTA (ajuste 02). Reutiliza .cp-promo-card de
   la cesta; aquí solo se coloca. No es fija a propósito: en móvil el
   recordatorio permanente lo da la barra inferior del pedido. */
.cp-menu__promo { margin-bottom: var(--cp-space-2); }
/* Misma anchura que la columna del resumen del pedido (380 px), para que la
   barra de la carta y la de la cesta se lean como el mismo componente y no
   como un banner de borde a borde (peticion Carlos, punto 05 del 2-sep). */
.cp-menu__promo .cp-promo-card {
  max-width: 380px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .cp-menu__promo .cp-promo-card { max-width: none; }
}
.cp-menu__search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  padding: 0 var(--cp-space-4);
  height: 46px;
  border: 1px solid var(--cp-neutral-200);
  border-radius: var(--cp-radius-full);
  background: var(--cp-neutral-0);
  color: var(--cp-neutral-500);
  transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}
.cp-menu__search-box:focus-within {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px var(--cp-primary-soft, rgba(240, 138, 93, 0.18));
}
.cp-menu__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--cp-text-base);
  color: var(--cp-neutral-900);
}
.cp-menu__search-input::-webkit-search-cancel-button { display: none; }
.cp-menu__search-clear {
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cp-neutral-400);
  cursor: pointer;
  padding: 0 2px;
}
.cp-menu__search-clear:hover { color: var(--cp-neutral-900); }
.cp-menu__search-empty {
  margin: var(--cp-space-3) 0 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-neutral-500);
  text-align: center;
}
/* Ocultación propia del buscador: no usa [hidden] para no pisar el filtro de alérgenos */
.cp-is-searched-out { display: none !important; }

/* Header en modo checkout: sin salidas, con sello de confianza (Carlos, bloque 10) */
.cp-header__secure {
  margin: 0;
  display: 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);
}
.cp-header__secure i { color: #15803d; }