/* Fuentes hosteadas localmente vía /assets/fonts/fonts.css (cargado por index.html).
   Incluye Luckiest Guy + las 30 familias del picker de Apariencia. */
/* ======================================================
   TOKENS — se sobreescriben con theme.json via JS
====================================================== */
:root {
  --color-bg: #f4f4f2;
  --color-text: #1a1a1a;
  --color-text-muted: #616874;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-footer-bg: #111111;
  --color-footer-text: #f1f1f1;
  --color-accent: #28a745;
  --color-accent-light: #d1fae5;
  --color-danger: #dc3545;
  --color-store-name: var(--color-text);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --color-hero-bg: #ffffff;

  --catalog-px: 1.25rem;   /* espaciado lateral uniforme para todo el catálogo */

  --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.1);

  /* Estilo de las cards de producto/combo. Lo setea el preset cardStyle del
     theme (applyTheme). Defaults = preset "soft" (idéntico al diseño previo). */
  --card-radius: var(--radius-md);
  --card-btn-radius: var(--radius-sm);   /* radio de los botones de la card; lo setea el preset cardStyle */
  --card-border-width: 1px;
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "Segoe UI", sans-serif;   /* títulos: categorías, productos/combos, footer */
  --font-hero: var(--font-display);                  /* hero: solo el nombre del comercio */

  /* Base tipográfica del catálogo público. 17px en lugar del default 16px
     del navegador, para mejorar accesibilidad sin romper layouts. Casi todos
     los font-size del archivo usan rem, así que cambiar este token escala
     todo proporcionalmente (badges, hints, labels chicas, etc.).
     Si necesitás afinar la accesibilidad subí a 18px y ajustá si algo aprieta
     en mobile. */
  --base-fs: 17px;
}

/* ======================================================
   1. BASE / RESET
====================================================== */


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

html {
  scroll-behavior: smooth;
  font-size: var(--base-fs);
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.85;
}

/* ======================================================
   2. LAYOUT GLOBAL
====================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5rem;
}
section {
  padding: 0;   /* cada sección controla su propio espaciado */
}

/* ======================================================
   3. HERO 
====================================================== */

/* ── Hero rediseñado ──
   Altura consistente con/sin imagen: min-height fijo + padding parejo. Antes
   el hero "adelgazaba" al borrar la imagen porque el padding bajaba a la
   mitad. Ahora la altura no depende de has-image. */
.hero-banner {
  width: 100%;
  padding: 4rem 1.25rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  background: var(--color-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;            /* anchor del overlay opcional */
  transition: padding .2s, background-color .2s;
}

/* Cuando hay imagen: override del background-color para que el color
   teme (heroBg) NO se asome por pixeles transparentes del PNG. Antes,
   un PNG con alpha sobre un heroBg oscuro mostraba el color como una
   "capa oscura" sobre la imagen. */
.hero-banner.has-image {
  background-color: transparent;
}

/* Overlay opcional sobre la imagen (Fase 4.1). Se activa con la class
   has-overlay desde JS cuando config.branding.heroOverlay === true. */
.hero-banner.has-image.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.55));
  pointer-events: none;
  display: block;
}
.hero-banner.has-image.has-overlay .hero-content { position: relative; z-index: 1; }
.hero-banner.has-image.has-overlay .hero-ingreso-btn { z-index: 2; }

/* Sin overlay por default — solo se vuelve a habilitar si se agrega .has-overlay */
.hero-banner::after { display: none; }

.hero-content {
  position: static;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hero-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.14);
}

.hero-store-name {
  margin: 0;
  font-family: var(--font-hero);
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--color-store-name);
  letter-spacing: 0.03em;
  line-height: 1;
  /*text-shadow:
    0 2px 4px #dc3545,
    0 3px 10px #dc3545;*/
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.hero-subheadline {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.85rem, 2vw, 1rem);
  color: var(--color-store-name);
  opacity: .7;
  font-weight: 400;
  letter-spacing: .01em;
}
@media (max-width: 480px) {
  .hero-logo {
    width: 60px;
    height: 60px;
  }

  .hero-store-name {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
}

/* ======================================================
   3.5 BANNERS PROMOCIONALES (Fase 4.1)
   Strip horizontal con scroll-snap. Sin auto-rotate ni JS de
   carousel — el usuario navega con drag/teclado.
====================================================== */

.promo-banners {
  display: flex;
  gap: 0.75rem;
  padding: 1rem var(--catalog-px) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.promo-banners::-webkit-scrollbar { display: none; }
.promo-banner {
  flex: 0 0 80%;
  max-width: 480px;
  aspect-ratio: 2 / 1;
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  background: var(--color-surface, #f7f7f7);
}
.promo-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) {
  .promo-banner { flex-basis: 60%; }
}
@media (min-width: 1100px) {
  .promo-banner { flex-basis: 33%; }
}

/* ======================================================
   4. BUSCADOR + CONTROLES + PILLS — toolbar unificada
====================================================== */

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem var(--catalog-px);
  flex-wrap: wrap;        /* en mobile se rompe en dos filas */
}

/* Fila 1: buscador + sort */
.catalog-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;         /* no se comprime en desktop */
}

/* Fila 2 en desktop: pills — flex: 1 para tomar el espacio restante */
.catalog-toolbar .category-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;           /* permite que el flex hijo haga overflow-x */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;             /* el toolbar ya tiene padding lateral */
  align-items: center;
}

.catalog-toolbar .category-filter::-webkit-scrollbar {
  display: none;
}

#searchInput {
  width: 200px;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  line-height: 1.2;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
  outline: none;
}

#searchInput:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.12);
  width: 260px;
}

#searchInput::placeholder {
  color: var(--color-text-muted);
}

#sortSelect {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  line-height: 1.2;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  white-space: nowrap;
}

#sortSelect:focus {
  border-color: var(--color-accent);
}

/* ======================================================
   5. PILLS — estilos de las pastillas (sin layout)
====================================================== */

.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.category-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.category-pill.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

/* ======================================================
   RESPONSIVE — toolbar mobile
====================================================== */

@media (max-width: 640px) {
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem var(--catalog-px);
  }

  .catalog-toolbar__controls {
    display: flex;
    gap: 0.5rem;
  }

  #searchInput {
    flex: 1;
    width: auto;
    font-size: 16px; 
  }

  #searchInput:focus {
    width: auto;
  }

  /* ── Sort: solo ícono en estado default ── */
  #sortSelect {
    width: 36px;
    min-width: 36px;
    flex-shrink: 0;
    padding: 0.4rem;
    color: transparent;
    text-indent: -9999px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616874' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='9' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    transition: width 0.2s ease, color 0.15s, background-color 0.15s, border-color 0.15s;
  }

  /* Cuando hay un sort activo, expandirse y mostrar el texto */
  #sortSelect.is-active {
    width: auto;
    min-width: 0;
    padding: 0.4rem 0.95rem;
    color: var(--color-accent);
    text-indent: 0;
    background-image: none;
    border-color: var(--color-accent);
    font-weight: 600;
  }

  /* Pills en su propia fila con scroll */
  .catalog-toolbar .category-filter {
    width: 100%;
    padding: 0.15rem 0 0.25rem;
  }
}

/* ======================================================
   6. CATÁLOGO — contenedores, secciones y cards
====================================================== */

#catalog,
#combos {
  max-width: 1200px;
  padding: 0 var(--catalog-px);
}
#combos {
  margin-bottom: 1.5rem;
}

.category-section {
  margin-bottom: 1.5rem;
}

.category-section:last-child {
  margin-bottom: 0;
}
@media (max-width: 480px) {
  :root {
    --catalog-px: 0.85rem;
  }

  .category-section {
    margin-bottom: 1rem;
  }

  #combos {
    margin-bottom: 1rem;
  }
}
/* ── Header compartido: categorías, destacados y combos ── */
.catalog-section-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.6rem;
  padding-left: 0.7rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.catalog-section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-border);
  border-radius: 2px;
}

.catalog-section-header .category-count {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.catalog-section-header h2 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}

.catalog-section-subtitle {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0;
}

/* ── Grid de productos ── */
.product-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (min-width: 1080px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
  }
}

/* ---- Product Card ---- */
.product-card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: default;
  border: var(--card-border-width) solid var(--color-border);
  position: relative;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

/* Contenedor imagen */
.product-img-wrap {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  transition: transform 0.25s ease;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.04);
}

/* Imagen genérica */
.product-img-wrap img[src*="generica"] {
  opacity: 0.35;
  filter: grayscale(1);
  padding: 1.5rem;
}

.product-img-wrap:has(img[src*="generica"])::before {
  content: "📦";
  position: absolute;
  font-size: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* Info del producto */
.product-info {
  padding: 0.75rem 0.75rem 0.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-info h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  text-transform: lowercase;
}

.product-info h3::first-letter {
  text-transform: uppercase;
}

/* ---- Precios ---- */
.product-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.product-price--consultar {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-style: italic;
}

.product-price-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.product-price--original {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-price--final {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
}

.product-discount-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--color-accent);
  color: white;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* ---- Badges ---- */
.product-badges {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 2;
}

.badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--green  { background: #16a34a; color: #fff; }
.badge--red    { background: #dc2626; color: #fff; }
.badge--blue   { background: #2563eb; color: #fff; }
.badge--gray   { background: #6b7280; color: #fff; }
.badge--purple { background: #7c3aed; color: #fff; }

/* Card agotado */
.product-card--agotado {
  opacity: 0.55;
  pointer-events: none;
}
/* ── Ver más ── */
.category-section__footer {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.ver-mas-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ver-mas-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.ver-mas-arrow { transition: transform 0.15s; }
.ver-mas-btn:hover .ver-mas-arrow { transform: translateX(3px); }

/* ======================================================
   7. DESTACADOS
====================================================== */

/* Banda full-bleed: el fondo se extiende de borde a borde del viewport.
   El padding horizontal alinea el contenido con el resto del catálogo en
   cualquier ancho de pantalla (hasta el max-width de 1200px). */
.featured-section {
  background: var(--color-accent-light);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 0.9rem;
  padding-bottom: 1rem;
  padding-left: max(
    calc(var(--catalog-px) + 0.5rem),
    calc((100vw - 1200px) / 2 + var(--catalog-px) + 0.5rem)
  );
  padding-right: max(
    calc(var(--catalog-px) + 0.5rem),
    calc((100vw - 1200px) / 2 + var(--catalog-px) + 0.5rem)
  );
  border-radius: 0;
}

.featured-section .catalog-section-header::before {
  background: var(--color-accent);
}

.featured-section .catalog-section-header h2 {
  color: var(--color-accent);
}

.featured-grid .product-card {
  border-color: var(--color-accent);
  border-width: 2px;
}

/* ======================================================
   8. SIN RESULTADOS
====================================================== */

.no-results {
  text-align: center;
  margin: 4rem 0;
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* ======================================================
   9. FOOTER
====================================================== */

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 3rem 1.5rem 2rem;
  margin-top: 3rem;
}

#footerContent {
  display: grid;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-block {
  font-size: 0.9rem;
}

.footer-block strong {
  font-size: 1rem;
  font-family: var(--font-display);
  display: block;
  margin-bottom: 0.6rem;
  color: #fff;
}

.footer-block p {
  margin: 0.3rem 0;
  color: rgba(255,255,255,0.7);
}

.footer-block a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-block a:hover {
  color: #fff;
  opacity: 1;
}

.store-status {
  font-weight: 600;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.store-status.open  { color: var(--color-accent); }
.store-status.closed { color: var(--color-danger); }

.footer-copy {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.45;
  color: #fff;
}

/* ======================================================
   10. RESPONSIVE — FOOTER
====================================================== */

@media (min-width: 640px) {
  #footerContent {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  #footerContent {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ======================================================
   11. UTILIDADES
====================================================== */

.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }



/* ======================================================
   12. CARRITO — estilos del drawer y botón flotante
   Agregar al final de main.css
====================================================== */

/* ── Botón flotante ── */
#kdc-cart-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
}

#kdc-cart-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  background: #1e8e38;
}

#kdc-cart-fab[hidden] { display: none; }

.kdc-cart-fab__icon {
  display: flex;
  align-items: center;
}

.kdc-cart-fab__badge {
  background: #fff;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}

/* ── Overlay ── */
#kdc-carrito-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#kdc-carrito-overlay.activo {
  opacity: 1;
  pointer-events: all;
}

/* ── Drawer ── */
#kdc-carrito-drawer {
  width: min(400px, 100vw);
  height: 100%;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

#kdc-carrito-overlay.activo #kdc-carrito-drawer {
  transform: translateX(0);
}

/* ── Header del drawer ── */
.kdc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.kdc-drawer-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

#kdc-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: var(--color-bg);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}

#kdc-drawer-close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* ── Body scrollable ── */
#kdc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
}

/* ── Empty state ── */
.kdc-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 100%;
  min-height: 260px;
  text-align: center;
  color: var(--color-text-muted);
}

.kdc-empty-cart p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.kdc-empty-cart span {
  font-size: 0.85rem;
}

/* ── Ítem del carrito ── */
.kdc-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.kdc-item:last-child {
  border-bottom: none;
}

.kdc-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}

.kdc-item__name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  text-transform: lowercase;
}

.kdc-item__name::first-letter { text-transform: uppercase; }

.kdc-item__unit-price {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.kdc-item__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kdc-item__controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-bg);
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
}

.kdc-qty-btn {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  padding: 0;
  line-height: 1;
}

.kdc-qty-btn:hover { background: var(--color-border); }

.kdc-item__qty {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 1.4rem;
  text-align: center;
}

.kdc-item__subtotal {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-left: auto;
}

.kdc-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.kdc-remove-btn:hover {
  color: var(--color-danger);
  background: #fde8ea;
}

/* ── Footer del drawer ── */
.kdc-drawer-footer {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-shrink: 0;
}

.kdc-drawer-total {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kdc-drawer-total strong {
  font-size: 1.1rem;
  color: var(--color-text);
  font-weight: 700;
}

.kdc-btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-accent);
  color: #fff;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}

.kdc-btn-whatsapp:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.kdc-btn-clear {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  padding: 0.25rem;
  transition: color 0.12s;
}

.kdc-btn-clear:hover { color: var(--color-danger); }

/* ── Botones en las cards del catálogo ── */
.kdc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0;
  /* margin-top:auto empuja el botón al fondo de la card → todos los botones
     quedan alineados en la misma base; el espacio sobrante cae después del
     nombre/precio. */
  margin-top: auto;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--card-btn-radius);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kdc-add-btn:hover {
  background: var(--color-accent);
  color: #fff;
}

.kdc-card-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;          /* alineado al fondo, igual que .kdc-add-btn */
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--card-btn-radius);
  overflow: hidden;
}

.kdc-card-btn {
  flex: 1;
  padding: 0.4rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  transition: background 0.12s;
  line-height: 1;
}

.kdc-card-btn:hover { background: var(--color-accent-light); }

.kdc-card-qty-label {
  flex: 1;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  padding: 0.4rem 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

/* ── Producto agotado: no mostrar botón ── */
.product-card--agotado .kdc-add-btn,
.product-card--agotado .kdc-card-controls {
  display: none !important;
}

/* Mobile */
@media (max-width: 480px) {
  #kdc-cart-fab {
    bottom: 1rem;
    right: 1rem;
    padding: 0.65rem 1rem;
  }
  #scroll-top-btn {
    /* mismo offset right que el cart FAB, encima de él */
    bottom: calc(1rem + 42px + 0.5rem);
    right: 1rem;
  }
}
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════
   Botón INGRESO / PANEL en hero-banner
══════════════════════════════════════════════ */

/* ── Botón de acceso al panel ── */
.hero-ingreso-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  z-index: 10;
  line-height: 1;
}

.hero-ingreso-btn::before {
  content: '';   /* sin ícono via CSS — el SVG se inyecta desde JS */
}

.hero-ingreso-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
  opacity: 1;
}

@media (max-width: 480px) {
  .hero-ingreso-btn {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.45rem;  /* cuadrado: solo ícono */
    gap: 0;
  }

  .hero-ingreso-label {
    display: none; /* ocultar texto "Staff" / "Panel" */
  }

  /* quitar padding-right que rompía el layout flex del hero */
  .hero-content {
    padding-right: 0;
  }
  .hero-banner {
    padding: 3.3rem 1rem;
    min-height: 180px;
  }
}

/* ======================================================
   SCROLL TO TOP
====================================================== */

/* Scroll-to-top: lado derecho, encima del cart FAB. Quedan stackeados en
   la misma columna para que el pulgar tenga ambas acciones cerca en mobile.
   Altura aproximada del FAB con padding (~46px) + 0.55rem de gap. */
#scroll-top-btn {
  position: fixed;
  bottom: calc(1.5rem + 46px + 0.55rem);
  right: 1.5rem;
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease,
              background .14s, border-color .14s, color .14s;
  pointer-events: none;
}

/* El atributo hidden lo pone invisible para el DOM;
   la clase .visible lo muestra vía CSS */
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scroll-top-btn:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

#scroll-top-btn:active {
  transform: translateY(1px);
}




/* ======================================================
   13. COMBOS — catálogo público
   Cards horizontales (imagen izq + info der). Mobile: strip
   horizontal con scroll-snap (igual que los banners promo).
   Desktop: grid de cards horizontales que aprovecha el ancho.
====================================================== */

.combos-grid {
  /* Mobile: strip horizontal scrolleable, 1 card ~85% del ancho + peek
     del siguiente para invitar a deslizar.
     OJO: nada de scroll-behavior: smooth — convertiría el teleport del
     carrusel infinito en una animación visible del salto. La suavidad la
     da la inercia natural del browser sobre el flex con scroll-snap. */
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}

.combos-grid::-webkit-scrollbar { height: 5px; }
.combos-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

/* Cualquier contenedor con loop infinito (combos, banners) oculta su
   scrollbar — sin esto, el teleport entre bloques se nota como un salto
   visible de la barra y rompe la ilusión de continuidad. La navegación
   es por swipe/drag/wheel; la barra no aporta. */
.carrusel-infinito { scrollbar-width: none; -ms-overflow-style: none; }
.carrusel-infinito::-webkit-scrollbar { display: none; height: 0; width: 0; }

.combo-card {
  /* Mobile: ancho fijo para scroll horizontal. */
  flex: 0 0 calc(85% - 0.3rem);
  scroll-snap-align: start;

  /* Bordes/shadow siguen el preset cardStyle del theme (igual que
     .product-card), para que la apariencia elegida afecte también a combos. */
  background: var(--color-surface);
  border: var(--card-border-width) solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative;
  cursor: pointer; /* click abre el modal de detalle */

  /* Horizontal: imagen izq, info der. */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 110px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.combo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Todas las cards de combos lucen igual sin importar si es featured —
   armonía visual sobre todo. El destaque del featured queda para el
   ordenamiento server-side (si el combo es featured, aparece primero). */

.combo-img-wrap {
  position: relative;
  flex: 0 0 130px;             /* mobile: ancho de la miniatura */
  aspect-ratio: 1 / 1;         /* miniatura SIEMPRE cuadrada (1:1) */
  align-self: center;          /* no estirar a la altura de la card; mantener el cuadrado */
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El wrap es 1:1 y las imágenes de combo son cuadradas, así que 'cover'
   llena el cuadro sin recortar ni dejar letterbox. Igual en mobile y desktop. */
.combo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.combo-card:hover .combo-img-wrap img { transform: scale(1.04); }

/* Savings tag al bottom-right de la imagen para no chocar con los badges
   (que viven en top-left de la misma .combo-img-wrap). */
.combo-savings-tag {
  position: absolute;
  bottom: 0.4rem;
  right: 0;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem 0.2rem 0.5rem;
  border-radius: 4px 0 0 4px;
  letter-spacing: 0.02em;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.combo-info {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: space-between;
}

.combo-name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lista de items oculta — info detallada queda para el modal/click.
   El elemento se sigue renderizando porque combos.js lo genera. */
.combo-items-list { display: none; }

.combo-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0;
}

.combo-price--original {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.combo-price--final {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
}

.combo-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--card-btn-radius);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.combo-add-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: #fff;
}

.combo-add-btn:disabled {
  background: var(--color-accent);
  color: #fff;
  opacity: 0.85;
  cursor: default;
}

/* Desktop: misma idea de strip horizontal que mobile, pero con cards más
   anchas y altas. Si hay pocos combos (2-3) caben en la fila sin scroll; si
   hay más, scrollea horizontal con scrollbar visible. Una sola fila siempre. */
@media (min-width: 700px) {
  .combos-grid {
    gap: 1rem;
    padding-bottom: 0.5rem;
  }
  .combo-card {
    flex: 0 0 360px;       /* ancho fijo para la fila */
    min-height: 150px;     /* más altura, más presencia */
  }
  .combo-img-wrap { flex-basis: 150px; }   /* 150×150 (1:1) en desktop */
  .combo-info     { padding: 0.85rem 1rem; gap: 0.5rem; }
  .combo-name     { font-size: 0.95rem; -webkit-line-clamp: 2; }
  .combo-price--final { font-size: 1.1rem; }
}

@media (min-width: 1080px) {
  .combo-card { flex-basis: 380px; min-height: 160px; }
  .combo-img-wrap { flex-basis: 160px; }
}

/* ── Mobile: aire arriba/abajo de la sección de combos. ─────────── */
@media (max-width: 480px) {
  #combos { margin-top: 0.5rem; }
  .combos-grid { padding-top: 0.25rem; }
}

/* ======================================================
   13b. COMBO DETAIL MODAL
   Liviano: overlay + card centrado. Sin animaciones complejas. Se
   monta on-demand desde combos.js cuando el operador toca una card.
====================================================== */

.combo-modal[hidden] { display: none; }
.combo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.combo-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  cursor: pointer;
}
.combo-modal__box {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.combo-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,.06);
  color: var(--color-text);
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.combo-modal__close:hover { background: rgba(0,0,0,.12); }
.combo-modal__img {
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.combo-modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.combo-modal__body {
  padding: 1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.combo-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}
.combo-modal__badges {
  /* product-badges interno ya trae su layout; acá solo dejamos el
     contenedor para que no quede colgando contra el título. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.combo-modal__badges .product-badges {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.combo-modal__items {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
}
.combo-modal__items li {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.55;
  text-transform: lowercase;
}
.combo-modal__items li::first-letter { text-transform: uppercase; }
.combo-modal__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.combo-modal__savings {
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.combo-modal__actions { margin-top: 0.5rem; }
.combo-modal__actions .combo-add-btn {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SKELETON / SHIMMER — placeholder del catálogo durante la carga.
   El HTML estático en index.html muestra estas piezas desde el primer
   paint. render.js las reemplaza en el primer render (container.innerHTML
   = "" en renderCatalog; nav.innerHTML = "" en renderCategoryFilter).
═══════════════════════════════════════════════════════════════════ */

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

.skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-bg)     50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: skel-sweep 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Variantes de tamaño */
.skel--pill    { height: 2rem;   width: 5.5rem; border-radius: 999px; }
.skel--heading { height: 1rem;   width: 7rem;   }
.skel--line    { height: 0.75rem; }
.skel--line-lg { width: 72%; }
.skel--line-sm { width: 38%; }
.skel--btn     { height: 2.1rem; width: 100%; margin-top: auto; border-radius: var(--card-btn-radius); }

/* Aplicado directamente sobre .product-img-wrap: anula el fondo blanco
   para que el sweep sea visible; mantiene border-radius: 0 del wrap. */
.skel--img { border-radius: 0; }

/* Card esqueleto: desactiva interactividad y sombra hover. */
.skel-card {
  cursor: default !important;
  box-shadow: none !important;
  pointer-events: none;
}
.skel-card:hover {
  transform: none !important;
  box-shadow: none !important;
}