/* ===========================================================
   Asia House Chinese Food — paleta, logo y menú reales
   (Instagram + Google Maps + PDF oficial del menú, 16 sep. 2026).
   Fondo rojo de marca (como pidió el cliente) + dorado de acento
   (combinación clásica china rojo/dorado, para que precios y
   títulos sigan siendo legibles sobre el rojo).
   =========================================================== */

:root {
  --bg: #7a0f1c;            /* rojo Asia House como fondo principal de la página */
  --bg-elevated: #5e0b15;   /* rojo más oscuro para header/utility/footer */
  --card-bg: #1c0a0c;       /* casi negro para las tarjetas, contraste sobre el rojo */
  --border: rgba(255,255,255,0.18);
  --border-dark: rgba(255,255,255,0.1);
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.72);
  --text-faint: rgba(255,255,255,0.45);
  --gold: #f0b429;          /* dorado de acento — precios, títulos, líneas activas */
  --accent: #be162b;        /* rojo oficial Asia House (PDF del menú), para superficies negras */
  --accent-soft: rgba(240,180,41,0.16);
  --radius: 10px;
  --font-heading: 'Anton', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  /* ---- Tokens premium (añadidos sin tocar el rojo de marca de arriba) ----
     Secciones editoriales (experiencia, reseñas, footer) usan un carbón casi
     negro + marfil cálido para sentirse premium, en vez de rojo plano en
     toda la página. El rojo de marca sigue siendo el protagonista del menú. */
  --surface-carbon: #111111;
  --surface-carbon-elevated: #1a1a1a;
  --ivory: #f6f0e7;
  --ivory-muted: rgba(246,240,231,0.72);
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --transition-fast: 0.18s ease;
  --transition-base: 0.28s ease;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Textura de fondo en su propia capa (position:fixed en un pseudo-elemento
   en vez de background-attachment:fixed en el body) — evita el tirón de
   scroll que ese approach causa, sobre todo en móvil/iOS. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/bg-texture.jpg") center/cover no-repeat;
  z-index: -1;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* ============ SISTEMA DE BOTONES ============
   Un único set de estilos (primary / secondary / ghost) reutilizado en
   hero, favoritos, experiencia y carrito, para que toda la página se
   sienta construida como un solo producto. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: #1c0a0c; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: transparent; border: 1.5px solid var(--ivory); color: var(--ivory); }
.btn-secondary:hover { background: rgba(246,240,231,0.1); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-whatsapp { background: #25D366; color: #0d0d0d; }
.btn-whatsapp:hover { filter: brightness(1.08); }
.btn-block { width: 100%; }

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ============ HEADER ============ */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-dark);
}

.menu-toggle { display: none; }

.logo { margin: 0 auto; }
.logo-img { height: 52px; width: auto; }

.main-nav {
  display: flex;
  gap: 24px;
  margin-right: auto;
  margin-left: 32px;
}
.main-nav a {
  font-size: 15px;
  color: var(--text-muted);
}
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta { padding: 10px 22px; font-size: 14px; }

.cart-icon-btn { position: relative; }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--gold);
  color: #1c0a0c;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Estado abierto/cerrado (real, dato de horario del negocio) ---- */
.open-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.open-status.open { color: #1c0a0c; background: #4caf50; }
.open-status.closed { color: var(--text); background: rgba(255,255,255,0.15); }

/* ============ CATEGORY NAV ============ */
.category-nav-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-dark);
  position: sticky;
  top: 0;
  z-index: 20;
}
.category-nav {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}

/* ---- Búsqueda ---- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
}
.search-bar svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.search-bar input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
}
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--text-faint); }
.search-bar .icon-btn { width: 30px; height: 30px; border: none; }

/* ---- Desplegable de categorías ---- */
.more-wrap { position: relative; flex-shrink: 0; }
.more-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.more-dropdown a {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.more-dropdown a:hover { background: var(--bg-elevated); color: var(--text); }
.more-dropdown a.active { color: var(--gold); font-weight: 600; }
.category-nav::-webkit-scrollbar { display: none; }

.category-nav a {
  white-space: nowrap;
  font-size: 15px;
  color: var(--text-muted);
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.category-nav a:hover { color: var(--text); }
.category-nav a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* ============ HERO ============
   Foto real de un tendido de platos Asia House (con upscale de calidad).
   Overlay oscuro a la izquierda para legibilidad del titular. */
.hero {
  position: relative;
  min-height: 78vh;
  max-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,4,4,0.92) 0%, rgba(10,4,4,0.72) 32%, rgba(10,4,4,0.15) 62%, rgba(10,4,4,0.05) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 0 24px;
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.hero-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 18px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.hero-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ivory-muted);
  max-width: 480px;
  margin: 0 0 28px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--ivory-muted); margin: 0; }

/* ============ BARRA DE CONFIANZA ============ */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface-carbon);
  color: var(--ivory-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.trust-sep { color: var(--ivory-muted); opacity: 0.4; }

/* ============ SECCIONES: encabezado compartido ============ */
.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
  text-align: center;
}
.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 34px);
  text-align: center;
  margin: 0 auto 36px;
  max-width: 640px;
  color: var(--text);
}

/* ============ LOS FAVORITOS DE ASIA HOUSE ============ */
.favorites-section { padding: 56px 24px; max-width: 1200px; margin: 0 auto; }
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.favorite-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.favorite-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.favorite-card-img { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; }
.favorite-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.favorite-card:hover .favorite-card-img img { transform: scale(1.04); }
.favorite-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: #1c0a0c;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.favorite-card-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.favorite-card-body h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.favorite-card-body p { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; flex: 1; }
.favorite-card-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.favorite-price { font-size: 17px; font-weight: 700; color: var(--gold); }
.favorite-card-actions {
  display: flex;
  border-top: 1px solid var(--border-dark);
  margin: 0 -18px -16px;
}
.favorite-add-btn {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.favorite-add-btn:hover { color: var(--gold); }
.favorite-order-btn {
  flex: 1;
  padding: 12px 8px;
  border-left: 1px solid var(--border-dark);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #25D366;
}
.favorite-order-btn:hover { background: rgba(37,211,102,0.12); }

/* ============ EXPERIENCIA ASIA HOUSE ============ */
.experience-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-carbon);
  color: var(--ivory);
}
.experience-media { position: relative; min-height: 340px; overflow: hidden; }
.experience-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.experience-body { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.experience-body .section-eyebrow, .experience-body .section-title { text-align: left; margin-left: 0; }
.experience-body .section-title { color: var(--ivory); }
.experience-text { font-size: 15px; line-height: 1.7; color: var(--ivory-muted); margin: 0 0 18px; }
.experience-line { font-size: 14px; color: var(--ivory-muted); margin: 0 0 6px; }
.experience-body .btn { margin-top: 18px; align-self: flex-start; }

/* ============ RESEÑAS ============ */
.reviews-section { padding: 56px 24px; max-width: 1200px; margin: 0 auto; }
.reviews-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.review-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
.review-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.review-author { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 !important; }

/* ============ CATEGORY SECTIONS ============ */
main { padding: 32px 24px 80px; max-width: 1200px; margin: 0 auto; }
#menuSections { scroll-margin-top: 130px; }

.search-empty-state { text-align: center; padding: 60px 20px; }
.search-empty-state p { font-size: 16px; color: var(--text-muted); margin: 0 0 18px; }

.category-section { margin-bottom: 48px; scroll-margin-top: 130px; }

.category-section h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* ---- skeleton mientras carga el menú ---- */
.skeleton-block {
  background: linear-gradient(90deg, var(--border-dark) 25%, var(--border) 37%, var(--border-dark) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 6px;
}
.skeleton-line { height: 14px; margin: 8px 0; }
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.menu-error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}
.menu-error-state p { font-size: 15px; color: var(--text-muted); margin: 0 0 18px; }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.product-card-img { width: 100%; aspect-ratio: 1 / 1; background: #000; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }

.product-card-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.product-card:not(.has-img) .product-card-body { padding: 18px; }

/* Tarjetas sin foto propia: una franja superior decorativa con el ícono de
   la marca, para que no se vean "vacías" al lado de las que sí tienen foto. */
.product-card:not(.has-img) {
  background-image: url("../img/brand/icon-asiahouse.png");
  background-repeat: no-repeat;
  background-position: center 18px;
  background-size: 42px;
  background-color: var(--card-bg);
}
.product-card:not(.has-img) .product-card-body { padding-top: 66px; }

.product-card-info h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
}

.product-card-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.product-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}

.card-actions {
  display: flex;
  margin-top: 14px;
  border-top: 1px solid var(--border-dark);
}
.add-full-btn {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.add-full-btn:hover { color: var(--gold); }
.order-now-btn {
  flex: 1;
  padding: 12px 8px;
  border-left: 1px solid var(--border-dark);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #25D366;
}
.order-now-btn:hover { background: rgba(37,211,102,0.12); }

/* animación breve al agregar un plato al carrito */
@keyframes justAdded {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); color: var(--gold); }
  100% { transform: scale(1); }
}
.just-added { animation: justAdded 0.35s ease; }

/* variantes de tamaño (grande / mediano) */
.variant-list { margin-top: 8px; border-top: 1px solid var(--border-dark); }
.variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dark);
}
.variant-row:last-child { border-bottom: none; }
.variant-label { flex: 1; font-size: 13px; color: var(--text-muted); }
.variant-price { font-size: 14px; font-weight: 700; color: var(--gold); }
.variant-actions { display: flex; gap: 6px; flex-shrink: 0; }
.variant-add-btn {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.variant-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.variant-order-btn {
  border: 1px solid #25D366;
  color: #25D366;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.variant-order-btn:hover { background: rgba(37,211,102,0.16); }

/* ============ FOOTER ============ */
.site-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 48px 24px;
  border-top: 1px solid var(--border-dark);
  background: var(--bg-elevated);
}
.footer-logo { height: 60px; width: auto; margin-bottom: 14px; }
.site-footer h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--gold);
  margin: 0 0 12px;
}
.site-footer p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.social-icons { display: flex; gap: 10px; }
.icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.icon-circle:hover { border-color: var(--gold); color: var(--gold); }

/* ============ VOLVER ARRIBA ============ */
.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  z-index: 29;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { border-color: var(--gold); color: var(--gold); }

/* ============ FLOATING CART BAR ============ */
.floating-cart {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gold);
  color: #1c0a0c;
  padding: 14px 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 30;
}
.floating-cart span:first-child {
  background: #1c0a0c;
  color: var(--gold);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
@keyframes cartBump {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}
.floating-cart.bump { animation: cartBump 0.3s ease; }

/* La barra flotante es un patrón de móvil. En escritorio el acceso al
   carrito ya vive en el ícono del header — mostrar ambos al mismo tiempo
   podía chocar visualmente con la barra de confianza en pantallas anchas
   y no muy altas. */
@media (min-width: 861px) {
  .floating-cart { display: none !important; }
}

/* ============ CART DRAWER ============ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cart-overlay.open { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-dark);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cart-drawer-header h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--gold);
  margin: 0;
}

.cart-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.cart-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 12px;
}
.cart-item-remove-row { width: 100%; display: flex; justify-content: flex-end; }
.cart-item-remove {
  font-size: 12px;
  color: var(--text-faint);
  padding: 2px 0;
}
.cart-item-remove:hover { color: #ff8a8a; }
.cart-item-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
  flex-shrink: 0;
}
.cart-item-img-empty {
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
}
.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item-price { font-size: 13px; font-weight: 700; color: var(--gold); }
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.cart-empty {
  color: var(--text-faint);
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
  line-height: 1.6;
}
.cart-empty .btn { margin-top: 16px; }

.cart-order-type { display: flex; gap: 8px; margin-bottom: 18px; }
.order-type-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.order-type-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--accent-soft);
}

.cart-field { margin-bottom: 16px; }
.cart-field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cart-field input, .cart-field textarea {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
.cart-field input:focus, .cart-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.cart-field input.field-error {
  border-color: #e05555;
}
.cart-delivery-note {
  font-size: 12px;
  color: var(--text-faint);
  margin: 8px 0 0;
}

/* ---- resumen de dirección ya guardada ("Entregar en / Cambiar"), para no
   volver a pedirla si el visitante ya la escribió una vez ---- */
.cart-address-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cart-address-summary-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.cart-address-summary-value {
  display: block;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.cart-address-change-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.cart-pickup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

.cart-notes-toggle {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.cart-notes-toggle:hover { color: var(--gold); }
.field-error-msg {
  color: #ff8a8a;
  font-size: 12px;
  margin: 6px 0 0;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 0;
  border-top: 1px solid var(--border-dark);
  margin-bottom: 16px;
  color: var(--gold);
}

/* ---- venta cruzada dentro del carrito ---- */
.cart-cross-sell { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-dark); }
.cart-cross-sell-title { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 0 0 10px; }
.cart-cross-sell-list { display: flex; flex-direction: column; gap: 8px; }
.cross-sell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 10px;
}
.cross-sell-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: #000; flex-shrink: 0; }
.cross-sell-info { flex: 1; min-width: 0; }
.cross-sell-name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cross-sell-price { display: block; font-size: 12px; color: var(--gold); font-weight: 700; }
.cross-sell-add-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.cross-sell-add-btn:hover { border-color: var(--gold); color: var(--gold); }

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media (max-width: 860px) {
  .site-header { padding: 10px 16px; }
  .menu-toggle { display: flex; }
  .logo-img { height: 40px; }

  /* Menú de navegación: desplegable real bajo el header en móvil */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-dark);
    padding: 8px 20px;
    z-index: 35;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .main-nav a:last-child { border-bottom: none; }

  .header-cta { display: none; }
  .header-call-btn { display: none; }

  .category-nav-wrap { padding: 10px 12px; }
  .search-bar { position: absolute; left: 12px; right: 12px; top: 0; height: 100%; }

  /* Hero: la comida real ya está concentrada en la mitad inferior de la
     foto, así que en móvil el texto se apila arriba con overlay completo
     (no solo lateral) para que siga siendo legible. */
  .hero { min-height: 86vh; align-items: flex-start; }
  .hero-overlay { background: linear-gradient(180deg, rgba(10,4,4,0.88) 0%, rgba(10,4,4,0.55) 45%, rgba(10,4,4,0.35) 100%); }
  .hero-content { max-width: 100%; padding-top: 72px; }
  .hero-subtitle { max-width: 100%; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  .trust-bar { font-size: 12px; padding: 12px 16px; gap: 6px; }

  .favorites-section { padding: 40px 16px; }
  .experience-section { grid-template-columns: 1fr; }
  .experience-media { min-height: 220px; }
  .experience-body { padding: 32px 20px; }
  .experience-body .section-eyebrow, .experience-body .section-title { text-align: center; }
  .experience-body .btn { align-self: center; }

  .reviews-section { padding: 40px 0; }
  .reviews-track {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 0 16px 4px;
  }
  .review-card { min-width: 82vw; scroll-snap-align: start; }

  main { padding: 24px 16px 100px; }

  .category-section h2 { font-size: 24px; }

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

  .site-footer { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .social-icons { justify-content: center; }

  .cart-drawer { width: 100vw; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  .floating-cart {
    width: calc(100% - 32px);
    justify-content: space-between;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .variant-row { flex-wrap: wrap; row-gap: 8px; }
  .variant-label { flex: 1 1 100%; order: -1; font-weight: 600; color: var(--text); }
  .variant-actions { margin-left: auto; }
}

@media (max-width: 480px) {
  .cart-address-summary-value { max-width: 160px; }
}