/* ==========================
   style.css - versión final integrada
   (buscador corregido + botones nuevos + shipping + responsive categorías mobile swipe)
   ========================== */

/* RESET Y BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #ffffff;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
}

/* Contenedor centrado */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================
   NAVBAR
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  height:60px;
  box-sizing:border-box;
  z-index:1000;
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
/* left / right helpers */
.site-header .nav-left { display:flex; align-items:center; gap:12px; }
.site-header .nav-right { display:flex; align-items:center; gap:12px; }

/* =========================
   SEARCH NAVBAR
   ========================= */
.search-container{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

/* input escondido por defecto */
.search-input{
  width:0;
  opacity:0;
  padding:0;
  border:none;
  outline:none;
  background:#fff;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  font-size:14px;
  transition:all .25s ease;
  pointer-events:none;
}

.search-container.active .search-input{
  width:220px;
  opacity:1;
  padding:8px 10px;
  pointer-events:auto;
}

/* botón lupa */
.search-toggle{
  background:#ff4fa3;
  border:none;
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  cursor:pointer;
  transition:0.14s;
}
.search-toggle:hover{
  background:#ff2e92;
  transform:scale(1.03);
}
.search-toggle svg,
.search-toggle i{
  width:18px;
  height:18px;
  display:block;
  color: #fff;
  fill: #fff;
}
.search-input[style*="display:none"]{ width:0; padding:0; border:0; box-shadow:none; }

/* NAV CART */
.nav-cart{
  background: transparent;
  border: none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color: #111;
  font-size:16px;
}
.nav-cart i.bi { font-size:20px; line-height:1; color:inherit; }
.nav-cart .cart-count{
  background: #ff4fa3;
  color: #fff;
  padding:2px 6px;
  border-radius: 8px;
  font-weight:800;
  font-size:12px;
  min-width:22px;
  text-align:center;
}

/* =========================
   COVER / PORTADA
   ========================= */
.cover{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  margin:0;
  background:#fff;
}
#coverImg,
.cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  transition: transform 280ms ease, opacity 240ms ease;
}
.cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  color: #fff;
  padding-bottom: 20px;
}
.cover-title { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 6px; pointer-events: none; text-shadow:0 6px 18px rgba(0,0,0,0.35); }
.cover-sub { color: rgba(255,255,255,0.9); font-size: 13px; pointer-events: none; }
.cover::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:140px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}

/* =========================
   SECCIONES / TARJETAS
   ========================= */
.section { padding: 22px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-head h2 { font-size: 20px; font-weight: 800; color: #111; }

/* BOTONES base */
.link-btn, #see-all {
  background: linear-gradient(135deg,#ff4fa3,#ff2e92);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,79,163,0.10);
  font-size:14px;
}
.link-btn:hover, #see-all:hover { transform: translateY(-2px); }

/* BOTONES NUEVO DISEÑO (#F3BAD1 con efecto deslizante + sombra) */
.link-btn,
#see-all,
.btn.primary {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #F3BAD1;
  box-shadow:
    inset 2px 2px 2px 0px rgba(255,255,255,0.5),
    7px 7px 20px 0px rgba(0,0,0,0.1),
    4px 4px 5px 0px rgba(0,0,0,0.1);
  z-index: 1;
}
.link-btn:after,
#see-all:after,
.btn.primary:after {
  border-radius: 5px;
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #eaa7c2;
  box-shadow:
    inset 2px 2px 2px 0px rgba(255,255,255,0.5),
    7px 7px 20px 0px rgba(0,0,0,0.1),
    4px 4px 5px 0px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.link-btn:hover:after,
#see-all:hover:after,
.btn.primary:hover:after {
  width: 100%;
  left: 0;
}
.link-btn:active,
#see-all:active,
.btn.primary:active {
  top: 2px;
}

/* ========== GRILLA DE PRODUCTOS ========== */
#previewGrid, #menuGrid, .grid {
  display: grid;
  gap: 12px;
  padding: 0 8px 36px;
  align-items: start;
  margin: 0 auto;
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr);
}
@media(min-width: 900px) { #menuGrid, #previewGrid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width: 1200px) { #menuGrid, #previewGrid { grid-template-columns: repeat(4, 1fr); } }

/* TARJETA */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .16s ease, box-shadow .16s ease;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  justify-content:space-between;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.08); }
.img-wrap { height: 140px; overflow: hidden; border-radius: 8px; background: #fafafa; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.card:hover .img-wrap img { transform: scale(1.04); }
.card h3{
  font-size:16px;
  line-height:1.3;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;

  overflow:hidden;
  height:62px;
}
.price { color: #ff4fa3; font-weight: 900; font-size: 15px; }

/* botones en tarjetas */
.card .card-actions { margin-top: auto; display:flex; gap:8px; justify-content:center; align-items:center; padding-top:6px; flex-wrap:wrap; }
.btn { border-radius: 8px; padding: 8px 10px; font-weight: 800; cursor: pointer; border: none; font-size:13px; }
.btn.outline { background: transparent; border: 1px solid rgba(0,0,0,0.08); color: #111; }

/* Modal / sheet */
.overlay { position: fixed; inset: 0; display: none; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index: 240; }
.overlay.open { display:flex; }
.sheet { width: 100%; max-width: 560px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.12); }

/* SHIPPING BOX */
.shipping-box { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.shipping-box input, .shipping-box select { padding:8px; border-radius:8px; border:1px solid #ddd; font-size:14px; }

/* Cart & WhatsApp floating */
.cart-btn, #cart-btn { display:none !important; }
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  background: linear-gradient(180deg,#25D366,#128C7E);
  color: #fff;
}
.whatsapp-float i { font-size:22px; }

/* UTILIDADES */
.muted { color: #777; font-size: 13px; }
.small { font-size: 13px; }
img { max-width: 100%; height: auto; display: block; }

/* MEDIA QUERIES - ajustes movil */
@media (max-width: 640px) {
  .img-wrap { height: 120px; }
  .card { min-height: auto; padding: 8px; }
  #coverImg { max-height: 55vh; }
  header { padding: 8px 8px; }
  .search-input{ width:140px; }
  .site-header{ padding:0 10px; height:56px; }
  .nav-cart .cart-count{ min-width:20px; padding:2px 5px; font-size:11px; }
}

/* VISTAS */
.view{ display:none; width:100%; }
.view.active{ display:block; }

/* PRODUCT VIEW */
#product-view { display: none; padding: 18px 0; background: #fff; }
#product-view.active { display: block; }
.product-page { display: grid; grid-template-columns: 1fr; gap: 12px; align-items:start; }
@media(min-width:920px){ .product-page { grid-template-columns: 420px 1fr; gap:18px; } }
#similar-products { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media(min-width:900px){ #similar-products { grid-template-columns: repeat(4,1fr); } }
#similar-products .card { min-height: auto; padding:8px; }

/* utilitarios */
#menu-back{ background: linear-gradient(135deg,#ff4fa3,#ff2e92); color:white; border:none; padding:8px 14px; border-radius:10px; font-weight:700; cursor:pointer; transition:0.14s; }
#menu-back:hover{ transform:scale(1.03); box-shadow:0 6px 18px rgba(255,79,163,0.15); }
.qty-btn{ width:30px; height:30px; border:none; border-radius:8px; background:#ff4fa3; color:white; font-size:16px; font-weight:bold; cursor:pointer; transition:0.12s; }
.qty-btn:hover{ background:#ff2e92; transform:scale(1.05); }
.sheet-close{ position:absolute; top:10px; right:10px; background:#ff4fa3; color:white; border:none; width:30px; height:30px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.12s; }
.sheet-close:hover{ background:#ff2e92; transform:scale(1.05); }
.remove-item, .cart-remove{ background:#ff4fa3; color:white; border:none; width:32px; height:32px; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.12s; }
.remove-item:hover, .cart-remove:hover{ background:#ff2e92; transform:scale(1.05); }

/* ===== QR / pago (AGREGADO) ===== */
.qr-box{
  margin-top:16px;
  padding:14px;
  border-radius:12px;
  background:#fafafa;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.03);
}
.qr-offer{
  font-weight:800;
  color:#ff4fa3;
  margin-bottom:6px;
  font-size:14px;
}
.qr-img{
  width:180px;
  max-width:60%;
  margin:10px auto;
  display:block;
  border-radius:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  background: #fff;
  padding:8px;
}
.qr-text{
  font-size:13px;
  color:#555;
  margin-top:8px;
  line-height:1.3;
}
@media (max-width:640px){
  .qr-img{ width:140px; max-width:70%; }
  .qr-offer{ font-size:13px; }
}

/* ===== Overlay / sheet: evitar que el modal se corte en pantallas pequeñas ===== */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;        /* importante: alinear arriba para no cortar */
  justify-content: center;
  padding: 20px;                  /* espacio superior/inferior para que no quede pegado */
  overflow-y: auto;               /* permite hacer scroll dentro del overlay si la sheet es más alta que el viewport */
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.45);
  z-index: 240;
}

/* cuando se abre */
.overlay.open { display:flex; }

/* La caja modal */
.sheet {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  position: relative;

  /* Evitar que desborde la pantalla: */
  max-height: calc(100vh - 40px); /* deja 20px padding arriba y abajo */
  overflow-y: auto;               /* el contenido interno será scrollable si hace falta */
}

/* Mantener botón de cerrar siempre visible (opcional) */
.sheet-close {
  z-index: 5;
}

/* Pequeño ajuste responsive: centrar verticalmente en pantallas altas */
@media (min-height: 800px) {
  .overlay { align-items: center; padding: 0; }
  .sheet { max-height: calc(100vh - 80px); }
}
/* Asegurar que el carrito esté por encima del header */
.overlay {
  z-index: 9999 !important;
}

/* ===== Barra de categorías estilo limpio (logo centrado arriba) ===== */
.categories-bar {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  transform: none; /* CORRECCIÓN: se eliminó translateY que empujaba contenido */
  pointer-events: auto;
}
.categories-row {
  display: flex;
  justify-content: center;     /* centrar la fila en desktop */
  gap: 26px;                   /* espacio entre categorías (ajustable) */
  padding: 10px 0;
  align-items: center;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

/* botones tipo link - look minimal como la imagen */
.cat-link {
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
  position: relative;
}

/* línea rosa fina cuando está activo */
.cat-link.active {
  color: #ff4fa3;
}
.cat-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;                /* separa la línea del texto (ajustable) */
  height: 2px;
  background: #ff4fa3;
  border-radius: 2px;
  width: 36px;                  /* ancho de la línea debajo del link */
  margin: 0 auto;
}

/* hover sutil */
.cat-link:hover { transform: translateY(-3px); transition: transform .14s ease; }

/* ajustes responsive previos (se conservan para escritorio/mid) */
@media (max-width: 880px) {
  .categories-row { gap: 12px; padding: 8px 6px; }
  .cat-link { font-size: 13px; }
  .cat-link.active::after { bottom: -10px; width: 28px; height: 2px; }
}

/* ===== Ajuste: categorías más pequeñas (general) ===== */
.categories-row {
  gap: 18px;
  padding: 6px 0;
  align-items: center;
  overflow: hidden;
  height: auto;
  max-height: 40px;
}

/* links más compactos (general) */
.cat-link {
  padding: 4px 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  opacity: 0.95;
}

/* ajustes responsive generales */
@media (max-width: 880px) {
  .categories-row { gap: 12px; padding: 6px 8px; }
  .cat-link { font-size: 12px; padding: 3px 0; }
  .cat-link.active::after { bottom: -6px; width: 20px; }
}

/* ===== MÓVIL: combinación final - carrito fijo derecha, lupa izquierda, categorías HORIZONTAL SWIPE
   Este bloque está pensado para móviles: permite deslizar con el dedo (overflow-x) y mantiene la
   fila superior con buscador a la izquierda y carrito absoluto a la derecha. Cuando las categorías
   no desbordan, se verán centradas; cuando desborden, se puede scrollear horizontalmente.
*/
@media (max-width: 880px) {
  /* Apilar el header: fila superior (nav-left + espacio) + categorías debajo */
  .site-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
    height: auto;
    gap: 6px;
    background: white;
    z-index: 1000;
  }

  /* Fila superior: buscador en flujo normal (izq), reservamos espacio en la derecha */
  .site-header .nav-left {
    order: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 64px; /* reserva para carrito absolute a la derecha */
  }

  /* Carrito fijo en la esquina superior derecha (no desplaza contenido) */
  .site-header .nav-right {
    order: 0;
    position: absolute;
    right: 12px;
    top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1100;
  }

  /* Asegurar accesibilidad y tamaño del botón de carrito */
  .nav-right .nav-cart {
    background: transparent;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
  }

  /* Barra de categorías debajo, con posibilidad de swipe horizontal */
  .categories-bar {
    order: 1;
    margin-top: 6px;
    padding: 6px 6px;
    transform: none !important;
    background: transparent;
    width: 100%;
  }

  /* Fila: scroll horizontal si hace falta, pero ALINEADA A LA IZQUIERDA al iniciar (evita cortar los primeros items) */
  .categories-row {
    display: flex;
    gap: 10px;
    padding: 6px 6px;
    align-items: center;
    justify-content: flex-start; /* <-- CAMBIO: antes era center, ahora flex-start */
    overflow-x: auto;            /* habilita swipe horizontal */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;         /* evita wrap cuando haya overflow */
    scrollbar-width: thin;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding-left: 8px;           /* pequeño padding para que Inicio no quede pegado al borde */
  }

  /* Personalizar scrollbar (opcional, leve pista visual) */
  .categories-row::-webkit-scrollbar { height: 7px; }
  .categories-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 6px; }

  /* Cada link se comporta como inline-block y no se encoge demasiado */
  .cat-link {
    display: inline-block;
    flex: 0 0 auto;             /* evita que se shrinke demasiado */
    padding: 6px 10px;
    font-size: clamp(13px, 3.4vw, 17px); /* tamaño razonable hasta ~17px */
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }

  /* Indicador activo cercano al texto */
  .cat-link.active::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 28px;
    height: 2px;
  }

  /* Empujar visualmente el contenido principal un poco hacia abajo para separación */
  main#app { margin-top: 6px; }
  .search-container { margin-left: 2px; }
}

/* En pantallas grandes dejamos el comportamiento actual (centrado y sin scroll) */
@media (min-width: 881px) {
  .site-header { flex-direction: row; align-items: center; }
  .categories-bar { transform: none; }
  .categories-row { overflow: visible; justify-content: center; white-space: normal; flex-wrap: nowrap; }
  .cat-link { font-size: 11px; }
}

/* SLIDESHOW */
.slideshow {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
}
.slide-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: opacity 0.15s ease;
}
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s;
}
.slide-btn:hover { background: #ff4fa3; color: white; }
.slide-btn.prev { left: 8px; }
.slide-btn.next { right: 8px; }
.slide-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0,0,0,0.45);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

/* SEARCH DROPDOWN */
.search-container { position: relative; }

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 9999;
  overflow: hidden;
}
.search-dropdown.open { display: block; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid #f2f2f2;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #fff5fa; }

.search-result-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fafafa;
}
.search-result-info { flex: 1; }
.search-result-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}
.search-result-name span { color: #ff4fa3; } /* parte que matchea */
.search-result-price {
  font-size: 12px;
  color: #ff4fa3;
  font-weight: 800;
  margin-top: 2px;
}
.search-result-arrow {
  color: #ccc;
  font-size: 16px;
}
.search-ver-todos {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #ff4fa3;
  cursor: pointer;
  background: #fff5fa;
}
.search-ver-todos:hover { background: #ffe0f0; }