@charset "UTF-8";
:root{
  /* Paleta marca "Congelados El Timón" */
  --color-bg: #003366;              /* Fondo ligeramente azulado */
  --color-surface: #FFFFFF;         /* Tarjetas y paneles */
  --color-primary: #003366;         /* Azul mar principal */
  --color-primary-light: #003366;   /* Azul más vivo para degradados */
  --color-ice: #E0F7FF;             /* Azul hielo para fondos suaves */
  --color-accent: #16a34a;          /* Naranja vivo para botones/CTA */
  --color-accent-dark: #E06D2F;     /* Naranja más oscuro para hover */
  --color-text: #111827;            /* Texto principal */
  --color-text-muted: #6B7280;      /* Texto secundario */
  --color-border: #D1D5DB;          /* Bordes suaves */
  
  /* Variables compatibles con tu código actual */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --brand: var(--color-primary);
  --accent: var(--color-accent);
  --danger: #ef4444;
  --border: var(--color-border);
  --ok: #16a34a;
  --price: var(--color-accent);
  --hero-h: 250px;
}

/* Montserrat local (coloca los .woff2/.woff en /fonts) */
@font-face{
  font-family:"MontserratLocal";
  src:
    url("fonts/Montserrat-700.woff2") format("woff2"),
    url("fonts/Montserrat-700.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"MontserratLocal";
  src:
    url("fonts/Montserrat-800.woff2") format("woff2"),
    url("fonts/Montserrat-800.woff") format("woff");
  font-weight:800; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji'}

.noscript{background:#fff3cd;color:#7f6a00;padding:.6rem 1rem;border-bottom:1px solid #f1e2a3}

header{
  position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;flex-wrap:nowrap
}
/* ===== HEADER RESPONSIVE PARA MÓVIL ===== */
@media (max-width: 767px){
  /* Contenedor principal del header - ESTRICTO: 2 FILAS */
  header{
    flex-wrap: wrap !important;
    padding: 0.5rem 0.4rem !important; /* Padding más compacto, especialmente derecho */
    gap: 0.3rem !important; /* Gap más pequeño */
    align-items: center !important;
    justify-content: flex-start !important; /* Alinear al inicio */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Evitar desbordes */
  }
  
  /* Asegurar compatibilidad con iPhone real */
  @supports (-webkit-touch-callout: none) {
    header{
      box-sizing: border-box !important;
      -webkit-box-sizing: border-box !important;
      flex-wrap: wrap !important;
      -webkit-flex-wrap: wrap !important;
    }
  }
  
  /* ===== ALTURA UNIFORME PARA TODOS LOS BOTONES ===== */
  header .btn,
  #search button{
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0.4rem 0.5rem !important; /* Comprimido al máximo al texto */
    font-size: 0.85rem !important;
    white-space: nowrap;
    line-height: 1.3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin: 0;
    font-weight: 700 !important; /* Negrita */
    letter-spacing: 0.01em;
    background: transparent !important; /* Sin fondo de botón */
    border: none !important; /* Sin borde */
    color: var(--color-primary) !important; /* Usar variable de color primario */
  }
  header .btn:hover,
  header .btn:active,
  header .btn:focus{
    background: transparent !important;
    color: var(--color-primary) !important;
    opacity: 0.8;
  }
  header .btn.home{
    color: var(--color-primary) !important; /* Azul marino también para Inicio */
  }
  
  /* Botón de categorías solo con emoji - más compacto */
  #mobileCatsBtn{
    padding: 0.4rem 0.5rem !important;
    min-width: 40px !important;
    width: auto !important;
  }
  
  /* ===== PRIMERA FILA: Logo (izquierda) + Buscar + Inicio (derecha) ===== */
  
  /* Brand - Logo + Texto "Congelados El Timón" - Izquierda */
  .brand{
    order: 1 !important;
    flex: 1 1 auto !important; /* Ocupar el espacio disponible */
    min-width: 0;
    max-width: none !important; /* Sin límite máximo, se ajustará automáticamente */
    overflow: hidden !important; /* Ocultar overflow para evitar que se salga */
    display: flex;
    align-items: center;
    height: 40px !important;
    flex-shrink: 1; /* Permitir que se encoja si es necesario */
    margin-right: 0.3rem !important; /* Pequeño espacio antes de los botones */
  }
  header h1{
    font-size: 1.2rem !important; /* Tamaño ajustado para que quepa mejor */
    flex-shrink: 1; /* Permitir que se encoja si es necesario */
    min-width: 0;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden !important; /* Ocultar overflow */
    text-overflow: ellipsis !important; /* Mostrar ellipsis si no cabe */
    line-height: 1.2;
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 100%;
  }
  .brand span{
    font-size: 1em !important; /* Más grande */
  }
  header h1 .brand-logo{
    height: 1.2em !important; /* Más grande */
    width: auto;
    margin-right: 0.3rem !important;
    flex-shrink: 0;
  }
  
  /* Botón "Buscar" - Primera fila, derecha - Pegado al margen derecho */
  #searchToggleBtn{
    order: 2 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: auto !important;
    padding: 0.35rem 0.3rem !important; /* Padding reducido para pegar más al borde */
    font-size: 0.8rem !important;
    background: transparent !important;
    border: none !important;
    color: #003366 !important;
    font-weight: 700 !important;
    margin-left: 0.2rem !important; /* Pequeño espacio desde el brand */
    margin-right: 0 !important; /* Sin margen derecho para pegar al borde */
  }
  #searchToggleBtn:hover,
  #searchToggleBtn:active,
  #searchToggleBtn:focus{
    background: transparent !important;
    color: #003366 !important;
    opacity: 0.8;
  }
  
  /* Formulario de búsqueda - Oculto por defecto en móvil, se muestra cuando está activo - Por encima del header */
  #search.search-form-mobile{
    order: 2.5 !important;
    position: fixed !important;
    top: 0.5rem !important; /* Posicionado por encima del header */
    left: 0.6rem !important;
    right: 0.6rem !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    margin-top: 0 !important;
    z-index: 100 !important; /* Por encima del header (z-index: 10) */
    background: var(--card) !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    gap: 0.4rem !important;
  }
  #search.search-form-mobile.active{
    display: flex !important;
  }
  #search.search-form-mobile input{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.5rem !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-sizing: border-box;
  }
  #search.search-form-mobile button[type="submit"]{
    flex-shrink: 0;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
    min-width: 60px;
    white-space: nowrap;
  }
  
  /* Botón de cierre del formulario de búsqueda en móvil */
  #search.search-form-mobile .search-close-btn{
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    background: rgba(0,0,0,0.05) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    color: var(--text) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
  }
  #search.search-form-mobile .search-close-btn:hover,
  #search.search-form-mobile .search-close-btn:active{
    background: rgba(0,0,0,0.15) !important;
    transform: scale(1.1) !important;
  }
  
  /* Enlace Inicio - Primera fila, derecha - Pegado al margen derecho */
  #homeBtn{
    order: 3 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    text-decoration: none !important;
    padding: 0.35rem 0.3rem !important; /* Padding reducido para pegar más al borde */
    font-size: 0.8rem !important;
    background: transparent !important;
    border: none !important;
    color: #003366 !important;
    font-weight: 700 !important;
    margin-left: 0.2rem !important; /* Pequeño espacio entre Buscar e Inicio */
    margin-right: 0 !important; /* Sin margen derecho para pegar al borde */
  }
  #homeBtn:hover,
  #homeBtn:active,
  #homeBtn:focus{
    background: transparent !important;
    color: #003366 !important;
    opacity: 0.8;
    text-decoration: none !important;
  }
  
  /* Forzar salto de línea después de la primera fila */
  header::after{
    content: '' !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    order: 3.5 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* Asegurar que en iPhone el salto funcione */
  @supports (-webkit-touch-callout: none) {
    header::after{
      flex-basis: 100% !important;
      -webkit-flex-basis: 100% !important;
      order: 3.5 !important;
      -webkit-order: 3.5 !important;
    }
  }
  
  /* ===== SEGUNDA FILA: Categorías + Cesta ===== */
  
  #mobileCatsBtn{
    order: 4 !important;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0.35rem 0.45rem !important;
    font-size: 0.8rem !important;
    background: transparent !important;
    border: none !important;
    color: #003366 !important;
    font-weight: 700 !important;
  }
  #mobileCatsBtn:hover,
  #mobileCatsBtn:active,
  #mobileCatsBtn:focus{
    background: transparent !important;
    color: #003366 !important;
    opacity: 0.8;
  }
  #cartBtn{
    order: 5 !important;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0.35rem 0.45rem !important;
    font-size: 0.8rem !important;
    background: transparent !important;
    border: none !important;
    color: #003366 !important;
    font-weight: 700 !important;
  }
  #cartBtn:hover,
  #cartBtn:active,
  #cartBtn:focus{
    background: transparent !important;
    color: #003366 !important;
    opacity: 0.8;
  }
  
  /* Asegurar que los elementos de la segunda fila no se envuelvan antes */
  #mobileCatsBtn,
  #cartBtn{
    flex-basis: auto !important;
    width: auto !important;
  }
  
  /* ===== ELEMENTOS OCULTOS EN MÓVIL ===== */
  #mobileAsideBtn{
    display: none !important;
  }
  .howto{
    display: none !important;
  }
  .mobile-aside-bar #mobileCatsBtn{
    display: none !important;
  }
  
  /* Ocultar Mis datos y Mis pedidos del header en móvil (están en el panel de categorías) */
  #profileBtn,
  #btn-orders{
    display: none !important;
  }
  
  /* Ocultar formulario de búsqueda normal en móvil (se muestra solo cuando está activo) */
  #search:not(.search-form-mobile){
    display: none !important;
  }
  
  /* ===== MODALES LEGALES EN MÓVIL ===== */
  /* Calcular altura del header: padding (0.5rem*2 = 16px) + primera fila (40px) + gap (0.4rem = 6.4px) + segunda fila (40px) = ~102px */
  .modal#aviso-legal,
  .modal#politica-privacidad,
  .modal#politica-cookies{
    align-items: flex-start !important;
    padding: 0 !important;
    padding-top: 104px !important; /* Altura aproximada del header (102px) + 2px de separación */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    justify-content: flex-start !important;
    z-index: 100 !important; /* Por encima del header (z-index:50) */
  }
  .modal#aviso-legal .box.legal-box,
  .modal#politica-privacidad .box.legal-box,
  .modal#politica-cookies .box.legal-box{
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 104px - 0.75rem) !important; /* Altura total menos header y padding */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .modal#aviso-legal .legal-header,
  .modal#politica-privacidad .legal-header,
  .modal#politica-cookies .legal-header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    position: sticky !important;
    top: 0 !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    background: var(--card) !important;
    z-index: 10 !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .modal#aviso-legal .legal-header h3,
  .modal#politica-privacidad .legal-header h3,
  .modal#politica-cookies .legal-header h3{
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    flex: 1 !important;
  }
  .modal#aviso-legal .legal-header .btn-icon,
  .modal#politica-privacidad .legal-header .btn-icon,
  .modal#politica-cookies .legal-header .btn-icon{
    border: none !important;
    background: rgba(0,0,0,0.05) !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    color: var(--text) !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.25rem !important;
    transition: background 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 11 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .modal#aviso-legal .legal-header .btn-icon:hover,
  .modal#aviso-legal .legal-header .btn-icon:active,
  .modal#politica-privacidad .legal-header .btn-icon:hover,
  .modal#politica-privacidad .legal-header .btn-icon:active,
  .modal#politica-cookies .legal-header .btn-icon:hover,
  .modal#politica-cookies .legal-header .btn-icon:active{
    background: rgba(0,0,0,0.15) !important;
    color: var(--text) !important;
    transform: scale(1.1) !important;
  }
  .modal#aviso-legal .legal-content,
  .modal#politica-privacidad .legal-content,
  .modal#politica-cookies .legal-content{
    padding: 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  
  /* Hover states mejorados para móvil */
  header .btn:active{
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* ===== MODAL CHECKOUT (REVISAR PEDIDO) EN MÓVIL ===== */
  .modal#checkoutModal{
    align-items: flex-start !important;
    padding: 0 !important;
    padding-top: 104px !important; /* Altura aproximada del header (102px) + 2px de separación */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    justify-content: flex-start !important;
    z-index: 60 !important; /* Por encima del header (z-index: 50) */
  }
  .modal#checkoutModal .box{
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 104px - 0.75rem) !important; /* Altura total menos header y padding */
    padding: 1rem !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* ===== PANEL MIS PEDIDOS EN MÓVIL ===== */
  .side-panel#orders-panel{
    top: 104px !important; /* Justo debajo del header (102px + 2px de separación) */
    bottom: auto !important;
    height: calc(100vh - 104px) !important; /* Altura total menos el header */
    z-index: 60 !important; /* Por encima del header (z-index: 50) */
    max-height: calc(100vh - 104px) !important;
  }
  /* Overlay del panel de pedidos también debe respetar el header */
  body.orders-panel-open::before{
    top: 104px !important; /* Empezar justo debajo del header */
    z-index: 59 !important; /* Por debajo del panel pero por encima del contenido */
  }
  
  /* ===== MODAL DETALLES DE PEDIDO EN MÓVIL (por encima del panel) ===== */
  .modal#orderDetailsModal{
    align-items: flex-start !important;
    padding: 0 !important;
    padding-top: 104px !important; /* Justo debajo del header */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    justify-content: flex-start !important;
    z-index: 70 !important; /* Por encima del panel de pedidos (z-index: 60) */
  }
  .modal#orderDetailsModal .box.order-details-box{
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 104px - 0.75rem) !important; /* Altura total menos header y padding */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .modal#orderDetailsModal .order-details-header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--card) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .modal#orderDetailsModal .order-details-header h3{
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    flex: 1 !important;
  }
  .modal#orderDetailsModal .order-details-header .btn-icon{
    border: none !important;
    background: rgba(0,0,0,0.05) !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    color: var(--text) !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.25rem !important;
    transition: background 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 11 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .modal#orderDetailsModal .order-details-header .btn-icon:hover,
  .modal#orderDetailsModal .order-details-header .btn-icon:active{
    background: rgba(0,0,0,0.15) !important;
    color: var(--text) !important;
    transform: scale(1.1) !important;
  }
  .modal#orderDetailsModal .order-details-content{
    padding: 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* ===== FAVORITOS EN MÓVIL ===== */
  .modal#favoritesModal{
    align-items: flex-start !important;
    padding: 0 !important;
    padding-top: 104px !important; /* Justo debajo del header */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    justify-content: flex-start !important;
    z-index: 60 !important;
  }
  .modal#favoritesModal .favorites-box{
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100vh - 104px - 0.75rem) !important;
    margin: 0 !important;
    border-radius: 1rem !important;
  }
  
  /* ===== GRID DE PRODUCTOS: 2 COLUMNAS EN MÓVIL ===== */
  #productGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  #productGrid .card{
    width: 100% !important;
  }
  
  /* ===== TARJETAS DE PRODUCTOS EN MÓVIL ===== */
  
  /* Separación mínima entre imagen y texto */
  .card .content{
    padding: 0.5rem 0.75rem !important;
    gap: 0.25rem !important;
  }
  
  /* Precio + peso en la misma línea (ya está así en .buy-row) */
  /* Botón "añadir" debajo de precio+peso */
  .buy-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    margin-top: 0.3rem !important;
  }
  .buy-row .price-inline{
    width: 100%;
  }
  .buy-row .add-btn{
    width: 100% !important;
    margin-top: 0.2rem;
  }
  
  /* Corazón de favoritos pegado al margen superior izquierdo */
  .favorite-btn{
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    z-index: 6 !important; /* Por encima de badges */
  }
  
  /* Ajustar badges para que no se solapen con el corazón */
  .card .badge-wrap .badge{
    top: 40px !important; /* Mover un poco más abajo para no solaparse con el corazón */
    left: 8px !important;
  }
}

/* ===== HEADER PARA PANTALLAS MUY PEQUEÑAS (< 360px) ===== */
@media (max-width: 359px){
  header{
    padding: 0.5rem 0.6rem !important;
    gap: 0.4rem !important;
  }
  
  /* Brand aún más compacto */
  .brand{
    max-width: 40% !important;
  }
  header h1{
    font-size: 1.1rem !important;
  }
  
  /* Búsqueda más compacta */
  #search{
    max-width: 60% !important;
    gap: 0.3rem !important;
  }
  #search input{
    font-size: 0.8rem !important;
    padding: 0.45rem 0.55rem !important;
    min-height: 34px;
  }
  #search button{
    font-size: 0.75rem !important;
    padding: 0.45rem 0.65rem !important;
    min-height: 34px;
    min-width: 55px;
  }
  
  /* Botones más compactos pero aún clicables */
  header .btn{
    padding: 0.45rem 0.65rem !important;
    font-size: 0.8rem !important;
    min-height: 38px !important;
  }
  
  #homeBtn{
    padding: 0.45rem 0.7rem !important;
  }
}

/* ===== HEADER PARA TABLETS (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px){
  header{
    padding: 0.65rem 1rem !important;
    gap: 0.6rem !important;
  }
  
  header .btn{
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
    min-height: 38px;
  }
  
  #search input{
    font-size: 0.9rem !important;
    padding: 0.5rem 0.7rem !important;
  }
  
  #search button{
    font-size: 0.85rem !important;
    padding: 0.5rem 0.8rem !important;
  }
}

/* ===== ESCRITORIO: Ocultar botón "Categorías" - solo visible en móvil ===== */
@media (min-width: 768px){
  #mobileCatsBtn{
    display: none !important;
  }
  
  /* Ocultar botón de búsqueda toggle en escritorio */
  #searchToggleBtn{
    display: none !important;
  }
  
  /* Mostrar botón Mis pedidos en escritorio */
  #btn-orders{
    display: inline-flex !important;
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  
  /* Mostrar botón Mis datos en escritorio */
  #profileBtn{
    display: inline-flex !important;
    order: 4 !important;
    flex-shrink: 0 !important;
  }
  
  /* Asegurar que el header en escritorio mantenga su diseño original */
  header{
    flex-wrap: nowrap !important;
    position: sticky !important;
  }
  
  /* Restaurar estilos de botones en escritorio */
  header .btn{
    padding: .5rem .7rem;
    font-size: .9rem;
    min-height: auto;
  }
  
  /* Mostrar formulario de búsqueda normal en escritorio */
  #search.search-form-mobile{
    display: flex !important;
    position: static !important;
    order: 2 !important;
    flex: 0 1 auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    z-index: auto !important;
  }
  #search.search-form-mobile input{
    flex: 0 1 300px !important;
    max-width: 360px !important;
    font-size: .9rem !important;
    padding: .5rem .7rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  #search.search-form-mobile button[type="submit"]{
    padding: .5rem .8rem !important;
    font-size: .9rem !important;
    min-width: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Botón de cierre del formulario de búsqueda en escritorio */
  #search.search-form-mobile .search-close-btn{
    flex-shrink: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    background: rgba(0,0,0,0.05) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    color: var(--text) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
  }
  #search.search-form-mobile .search-close-btn:hover,
  #search.search-form-mobile .search-close-btn:active{
    background: rgba(0,0,0,0.15) !important;
    transform: scale(1.1) !important;
  }
}
.brand{text-decoration:none;color:inherit}
.brand span{
  font-family:'Story Script','Montserrat','MontserratLocal', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-weight:400;
  font-size:1.1em; /* Aumentar un poco más el tamaño del texto dentro del span */
  color: var(--color-primary); 
}
header h1{
  font-size:2.2rem;margin:0;white-space:nowrap;display:flex;align-items:center;
  font-weight:800;
  font-family:'MontserratLocal','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'
}
header h1 .brand-logo{
  margin-right:.5rem;
  height:1em; /* Altura proporcional al tamaño del texto */
  width:auto; /* Mantener proporción */
  vertical-align:middle;
}
.btn{padding:.5rem .7rem;border:none;border-radius:.6rem;background:var(--brand);color:#fff;cursor:pointer;font-size:.9rem;white-space:nowrap}
.btn.secondary{background:#e2e8f0;color:#111}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--accent)}
.btn.home{background:var(--danger)}

#search{flex:1;display:flex;gap:.5rem;min-width:0}
#search input{flex:0 1 300px;max-width:360px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:.6rem;font-size:.9rem}
#search button{padding:.5rem .8rem;border:none;background:var(--brand);color:#fff;border-radius:.6rem;cursor:pointer;font-size:.9rem}

.howto{position:relative}
.howto > summary.btn{display:inline-block;padding:.5rem .7rem;border:none;border-radius:.6rem;background:#e2e8f0;color:#111;cursor:pointer;list-style:none;font-size:.9rem;white-space:nowrap}
.howto > summary::-webkit-details-marker{display:none}
.howto[open] > summary.btn{background:#dfe7ef}
.howto .popover{
  position:absolute;right:0;top:calc(100% + 8px);
  width:min(92vw, 360px);
  background:var(--card);border:1px solid var(--border);border-radius:.75rem;
  padding:.75rem .9rem;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:20;
  color:var(--text) !important; /* Asegurar que el texto sea visible */
}
.howto .popover h4{margin:.25rem 0 .5rem;font-size:1rem;color:var(--text) !important}
.howto .popover ol{margin:.25rem 0 0 1.1rem;padding:0}
.howto .popover li{margin:.25rem 0;color:var(--text) !important}

.layout{display:grid;grid-template-columns:260px 1fr;gap:1rem;padding:1rem;max-width:1200px;margin:0 auto}
aside{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.75rem}
.menu-title{font-weight:700;margin:.25rem .5rem .5rem;color:var(--muted)}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.menu button{width:100%;text-align:left;background:transparent;border:none;padding:.6rem .7rem;border-radius:.6rem;cursor:pointer}
.menu button.active,.menu button:hover{background:#eef6ff}

main{min-height:70vh}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.chip{background:var(--card);border:1px solid var(--border);padding:.5rem .7rem;border-radius:999px;font-size:.9rem}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)} .layout{grid-template-columns:1fr}}
@media (max-width:460px){.grid{grid-template-columns:1fr}}

/* Hero con carrusel */
.hero{background:transparent;margin-bottom:1rem}
.carousel{position:relative;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:var(--card)}
.carousel-viewport{height:var(--hero-h);overflow:hidden}
.carousel-track{display:flex;height:100%;transition:transform .45s ease}
.slide{min-width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover;background:#f0f0f3}
/* Fallback CSS puro: mover track según radio marcado */
#c1:checked ~ .carousel-viewport .carousel-track{transform:translateX(0%)}
#c2:checked ~ .carousel-viewport .carousel-track{transform:translateX(-100%)}
#c3:checked ~ .carousel-viewport .carousel-track{transform:translateX(-200%)}
#c4:checked ~ .carousel-viewport .carousel-track{transform:translateX(-300%)}
/* Dots */
.carousel .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:6px;z-index:5}
.carousel .dots label{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer}
#c1:checked ~ .dots label[for="c1"], #c2:checked ~ .dots label[for="c2"],
#c3:checked ~ .dots label[for="c3"], #c4:checked ~ .dots label[for="c4"]{background:#fff}
/* Ocultar radios */
.c-slide{position:absolute;opacity:0;pointer-events:none}
/* Flechas (aparecen con JS; aquí solo estilo) */
.carousel .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;width:36px;height:36px;border-radius:50%;cursor:pointer;background:rgba(0,0,0,.45);color:#fff;z-index:6}
.carousel .nav.prev{left:10px}
.carousel .nav.next{right:10px}

/* Tarjetas productos */
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:150px;object-fit:cover;background:#f0f0f3}
.card .content{padding:.75rem;display:flex;flex-direction:column;gap:.35rem}
.card .name{font-weight:600}
.price{color:var(--muted);font-size:.95rem}
.price-amount{color:#1e40af;font-weight:700}
.add-row{display:flex;gap:.4rem;margin-top:.4rem}

/* Carrito */
.cart{position:fixed;right:1rem;bottom:5.25rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.75rem;max-width:420px;width:92vw;box-shadow:0 10px 30px rgba(0,0,0,.08);display:none;z-index:30}
.cart.open{display:block}

/* Overlay oscuro para la cesta en móvil */
@media (max-width: 900px){
  body.cart-open::before{
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 29;
    pointer-events: auto;
  }
  
  /* Asegurar que el overlay empiece debajo del header en móvil */
  body.cart-open::before{
    top: var(--header-h, 78px);
  }
}
.cart h3{margin:.25rem 0 .5rem}
.cart-list{max-height:45vh;overflow:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem 0;margin:.5rem 0}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:.5rem;padding:.4rem 0;align-items:center}
.cart-item small{color:var(--muted)}
.cart-controls{display:flex;gap:.4rem;align-items:center}
.cart-controls select,.cart-controls input{padding:.4rem;border:1px solid var(--border);border-radius:.4rem}
.grams-input{
  width: 100px !important;
  padding: 0.4rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.4rem !important;
  text-align: center !important;
  font-size: 0.9rem !important;
}
/* Asegurar que las flechas del input number sean visibles */
.grams-input::-webkit-inner-spin-button,
.grams-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 20px;
}
.cart-footer{display:flex;gap:.5rem;flex-wrap:wrap}
.cart-info-row{display:flex;justify-content:space-between;align-items:center;margin:.25rem 0 .75rem}
#cartTotal{color:var(--danger)}

/* Panel Mis Pedidos */
.side-panel{position:fixed;left:0;top:0;bottom:0;width:min(92vw,420px);max-width:420px;background:var(--card);border-right:1px solid var(--border);box-shadow:2px 0 20px rgba(0,0,0,.12);display:none;flex-direction:column;z-index:35;transform:translateX(-100%);transition:transform .3s ease}
.side-panel.is-open{display:flex;transform:translateX(0)}
body.orders-panel-open::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:34;pointer-events:auto}
.side-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border)}
.side-panel-header h3{margin:0;font-size:1.1rem}
.side-panel-header button{min-width:auto;padding:.4rem .6rem}
.orders-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.orders-item{padding:1rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.75rem}
.orders-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.orders-item-header strong{display:block;margin-bottom:.25rem}
.orders-item-header small{font-size:.85rem}
.orders-item-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.orders-item-actions button{flex:1;min-width:100px;padding:.5rem .75rem;font-size:.9rem}
@media (max-width:460px){
  .side-panel{width:92vw}
  .orders-item-actions{flex-direction:column}
  .orders-item-actions button{width:100%}
}

/* WhatsApp floating con texto */
.wa{
  position:fixed;right:1rem;bottom:1rem;background:#25D366;color:#fff;
  padding:.55rem .9rem;border-radius:999px;display:flex;align-items:center;gap:.5rem;
  text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,.15);font-weight:700;z-index:40
}
.wa svg{flex:0 0 auto}

/* Modal genérico */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:1rem;z-index:35}
#quantityModal{z-index:60 !important} /* Por encima del header en móvil */
/* Modales legales por encima del header (z-index:50) */
.modal#aviso-legal,
.modal#politica-privacidad,
.modal#politica-cookies{
  z-index:100 !important; /* Por encima del header (z-index:50) */
}
.modal.open{display:flex}
.modal .box{background:var(--card);border:1px solid var(--border);border-radius:1rem;max-width:720px;width:100%;padding:1rem}
.modal .box h3{margin-top:0}

/* Modal Selector de Cantidad */
#quantityModal .box{
  max-width: 480px;
}

#quantityModal input[type="number"]{
  font-size: 1.1em;
  text-align: center;
}

#quantityModal .btn{
  font-size: 1em;
  padding: 0.75rem 1rem;
}

/* En móvil, ajustar el modal de cantidad */
@media (max-width: 767px){
  #quantityModal{
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: 104px;
    z-index: 60 !important; /* Por encima del header (z-index: 50) */
  }
  
  #quantityModal .box{
    max-width: calc(100vw - 1rem);
    width: 100%;
    padding: 1rem;
  }
  
  #quantityModal input[type="number"]{
    font-size: 1.2em;
    padding: 1rem;
  }
  
  #quantityModal .btn{
    font-size: 1em;
    padding: 1rem;
  }
  
  /* Reducir el ancho del input de gramos al 50% en móvil */
  #quantityModal input#quantityInput[placeholder*="gramos"]{
    width: 50% !important;
  }
}
.muted{color:var(--muted)}
.small-note{font-size:.85rem;margin-top:.5rem}

/* Panel Favoritos */
.favorites-box{max-width:380px;padding:0}
.favorites-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.favorites-header h3{margin:0;font-size:1rem}
.btn-icon{background:transparent;border:none;cursor:pointer;padding:.4rem;font-size:1.2rem;border-radius:.4rem;transition:all .2s ease;color:var(--text);display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px}
.btn-icon:hover{background:var(--bg);transform:scale(1.1)}
.btn-icon:active{transform:scale(.95)}
.favorites-list{max-height:60vh;overflow-y:auto;padding:.5rem}
.favorite-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;border-bottom:1px solid var(--border);gap:.75rem;transition:background .2s ease}
.favorite-item:hover{background:var(--bg)}
.favorite-item:last-child{border-bottom:none}
.favorite-item-info{flex:1;min-width:0}
.favorite-item-info strong{display:block;margin-bottom:.2rem;font-size:.9rem}
.favorite-item-info .muted{font-size:.8rem}
.favorite-item-actions{display:flex;gap:.5rem;flex-shrink:0}

/* Modal Detalles Pedido */
.order-details-box{max-width:480px;padding:0}
.order-details-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.order-details-header h3{margin:0;font-size:1rem}
.order-details-content{max-height:70vh;overflow-y:auto;padding:1rem}
.order-shipping-info{padding-bottom:1rem;border-bottom:1px solid var(--border);line-height:1.6}
.order-items-section{margin-top:1rem}
.order-items-list{display:flex;flex-direction:column;gap:.1rem}
.order-item-line{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;border-bottom:1px solid rgba(0,0,0,.05);gap:1rem;line-height:1.2}
.order-item-line:last-child{border-bottom:none}
.order-item-add-btn{background:transparent;border:none;cursor:pointer;padding:0;font-size:1em;line-height:1;transition:transform .2s ease;color:var(--text)}
.order-item-add-btn:hover{transform:scale(1.2)}
.order-item-add-btn:active{transform:scale(.95)}

/* Modales Legales */
.legal-box{max-width:720px;padding:0;max-height:90vh;display:flex;flex-direction:column}
.legal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
.legal-header h3{margin:0;font-size:1.1rem}
.legal-content{overflow-y:auto;padding:1.5rem;flex:1}
.legal-content h2{font-size:1.1rem;margin-top:1.5rem;margin-bottom:.75rem;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:.5rem}
.legal-content h2:first-child{margin-top:0}
.legal-content p{margin-bottom:1rem;line-height:1.6;color:var(--text)}
.legal-content ul{margin-bottom:1rem;padding-left:1.5rem;line-height:1.8}
.legal-content li{margin-bottom:.5rem}
.legal-content a{color:var(--brand);text-decoration:none}
.legal-content a:hover{text-decoration:underline}
.legal-content strong{color:var(--text);font-weight:700}

/* Checkout */
.checkout-summary{max-height:45vh;overflow:auto;border:1px solid var(--border);border-radius:.8rem;padding:.75rem;margin-top:.5rem}
.customer-summary{border:1px dashed var(--border);border-radius:.6rem;padding:.6rem .8rem;background:#fafafa}
.checkout-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem;flex-wrap:wrap}
.checkout-products-list{margin-bottom:.5rem}
.checkout-item-line{display:block; padding:.25rem 0; line-height:1.5}
.checkout-item-line:not(:last-child){border-bottom:1px solid rgba(0,0,0,.05)}

/* Perfil */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid input, .form-grid select{width:100%;padding:.55rem .6rem;border:1px solid var(--border);border-radius:.6rem;box-sizing:border-box}
.profile-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem}

/* ===== FORMULARIOS Y BOTONES RESPONSIVE PARA MÓVIL ===== */
@media (max-width: 767px){
  /* Modal boxes - más compactos en móvil (ya definido arriba, pero aquí para otros modales) */
  .modal:not(.legal-box){
    padding: 0.5rem !important;
    align-items: flex-start !important;
    overflow-y: auto;
  }
  .modal .box:not(.legal-box){
    padding: 0.75rem !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .box h3{
    font-size: 1.1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Campos de formulario - tamaño optimizado para móvil */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea{
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    font-size: 16px !important; /* Evita zoom en iOS */
    border: 1px solid var(--border);
    border-radius: .5rem;
    margin-bottom: 0.5rem;
    min-height: 40px;
  }
  
  /* Labels más compactos */
  label{
    font-size: 0.85rem !important;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    display: block;
  }
  
  /* Radio buttons más pequeños pero funcionales */
  input[type="radio"],
  input[type="checkbox"]{
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin-right: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
  }
  
  /* Contenedor de radio buttons más compacto */
  label[for*="consent"],
  label[for*="promo"]{
    padding: 6px 0 !important;
    min-height: 32px;
    display: flex !important;
    align-items: center;
    font-size: 0.85rem !important;
  }
  label[for*="consent"] span,
  label[for*="promo"] span{
    font-size: 0.85rem !important;
    line-height: 1.3;
  }
  
  /* Botones principales - tamaño optimizado */
  .btn{
    padding: 8px 14px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    min-width: 100px;
    border-radius: .5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    box-sizing: border-box;
  }
  
  /* Botones importantes a 100% de ancho en móvil */
  .profile-actions{
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.75rem !important;
  }
  .profile-actions .btn{
    width: 100% !important;
    margin: 0;
  }
  
  .checkout-actions{
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.75rem !important;
  }
  .checkout-actions .btn{
    width: 100% !important;
    margin: 0;
  }
  
  /* Botón "Añadir" en tarjetas de producto */
  .add-btn,
  .card .add-btn,
  .buy-row .add-btn{
    padding: 8px 14px !important;
    font-size: 14px !important;
    min-height: 38px !important;
    min-width: 90px;
    flex-shrink: 0;
  }
  
  /* Formulario de búsqueda */
  #search{
    flex: 1;
    min-width: 0;
  }
  #search input{
    font-size: 16px !important; /* Evita zoom en iOS */
    padding: 8px 12px !important;
    min-height: 40px;
  }
  #search button{
    padding: 8px 14px !important;
    font-size: 14px !important;
    min-height: 40px;
    min-width: 70px;
  }
  
  /* Grid de formulario a una columna en móvil */
  .form-grid{
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  
  /* Espaciado reducido entre campos */
  .form-grid label{
    margin-bottom: 0.35rem;
  }
  .form-grid input,
  .form-grid select{
    margin-bottom: 0.5rem;
  }
  
  /* Sección de consentimientos más compacta */
  .profile-actions + .muted,
  .profile-actions + div{
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border) !important;
  }
  .profile-actions + div > div{
    margin-bottom: 1rem !important;
  }
  .profile-actions + div > div > label{
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
  .profile-actions + div > div > div{
    gap: 0.35rem !important;
  }
  
  /* Texto de ayuda más compacto */
  .muted,
  .small-note{
    font-size: 0.8rem !important;
    line-height: 1.4;
    margin-top: 0.5rem;
  }
  
  /* Como comprar - ajuste para móvil */
  .howto{
    position: relative;
  }
  .howto .popover{
    position: fixed !important;
    right: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }
  .howto .popover h4{
    font-size: 1rem !important;
    margin: 0.5rem 0 !important;
  }
  .howto .popover ol{
    margin: 0.5rem 0 0.75rem 1.2rem !important;
    padding: 0;
  }
  .howto .popover li{
    margin: 0.35rem 0 !important;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  /* Asegurar que los modales sean scrolleables */
  #profileModal .box,
  #checkoutModal .box{
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ajuste de títulos y espaciados en formularios */
  .box form{
    margin-top: 0 !important;
  }
  .box form > div:first-child{
    margin-top: 0 !important;
  }
}

/* ===== FORMULARIOS Y BOTONES EN TABLET ===== */
@media (min-width: 768px) and (max-width: 1023px){
  /* Botones ligeramente más grandes en tablet */
  .btn{
    padding: 10px 18px !important;
    font-size: 15px !important;
    min-height: 44px !important;
  }
  
  /* Campos de formulario con buen tamaño */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea{
    padding: 10px 14px !important;
    font-size: 15px !important;
    min-height: 42px;
  }
}

/* ===== MANTENER DISEÑO ORIGINAL EN ESCRITORIO ===== */
@media (min-width: 1024px){
  /* Diseño original se mantiene intacto */
  .btn{
    padding: .5rem .7rem;
    font-size: .9rem;
  }
  .form-grid input,
  .form-grid select{
    padding: .55rem .6rem;
  }
}

.info{font-size:.95rem;line-height:1.35}

/* === Banner gráfico sticky (G3) === */
header{ flex-wrap: wrap; } /* permite que el banner ocupe una fila entera */
.banner{ order:0; flex-basis:100%; position:relative; border-radius:.7rem; overflow:hidden; }
.banner-graphic{ min-height:120px; display:flex; align-items:center; justify-content:center; }
.banner-graphic::before{ content:''; position:absolute; inset:0; background:url('Banners/banner-bg.jpg') center/cover no-repeat; filter:saturate(1.05) brightness(1.15) contrast(1.05); }
.banner-graphic::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.05)); }
.banner-inner{ position:relative; z-index:1; color:#fff; font-weight:800; text-align:center; padding:.75rem 1rem; font-size:clamp(1.05rem, 2.6vw, 1.35rem); text-shadow:0 1px 2px rgba(0,0,0,.35); }
@media (max-width:520px){
  .banner-graphic{ min-height:92px; }
  .banner-inner{ font-size:clamp(1rem, 4.5vw, 1.2rem); }
}

/* Orden en cabecera: Inicio a la derecha de Buscar */
.brand{ order:1; }
#search{ order:2; flex: 0 1 auto; }
#btn-orders{ order:3; }
#homeBtn{ order:4; }
.howto{ order:5; }
#profileBtn{ order:6; }
#cartBtn{ order:7; }


/* ===== Header & stacking ===== */
html{ scroll-behavior: smooth; }
header{ position:sticky; top:0; z-index:50; transition: box-shadow .2s ease; }
header.elevated{ box-shadow: 0 6px 18px rgba(0,0,0,.12); }
/* Asegurar que el header tenga position sticky en móvil */
@media (max-width: 767px){
  header{ 
    position: sticky; 
    top: 0;
  }
}

/* ===== Categorías topbar ===== */
.cats-topbar{ position:static; z-index:40; background:var(--card); border-bottom:1px solid var(--border); }
.cats-topbar-inner{ max-width:1200px; margin:0 auto; padding:.5rem 1rem; }
.cats-topbar .menu{ flex-direction:row; flex-wrap:wrap; gap:.4rem; }
.cats-topbar .menu button{ width:auto; border:1px solid var(--border); border-radius:999px; }
.cats-topbar .menu button.active, .cats-topbar .menu button:hover{ background:var(--color-ice); border-color:var(--color-primary-light); }
header + .cats-topbar{ margin-top:0; }
/* Ocultar topbar en móvil */
@media (max-width: 1023px){
  .cats-topbar{ display:none !important; }
}

/* ===== Panel offcanvas de categorías para móvil ===== */
.categories-mobile-panel{
  position: fixed;
  top: 0;
  left: 0;
  width: min(75vw, 280px); /* Ancho reducido para adaptarse mejor al contenido */
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 20px rgba(0,0,0,.15);
  transform: translateX(-100%);
  transition: transform .3s ease, visibility .3s ease, opacity .3s ease, pointer-events 0s .3s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.categories-panel-open .categories-mobile-panel{
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: transform .3s ease, visibility .3s ease, opacity .3s ease, pointer-events 0s 0s;
}
.categories-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
body.categories-panel-open .categories-overlay{
  opacity: 1;
  visibility: visible;
}
.categories-panel-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem; /* Padding reducido para menos espacio en blanco */
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.categories-panel-header h3{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.categories-panel-content{
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.85rem; /* Padding reducido para menos espacio en blanco */
}
.products-subpanel{
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  overflow: hidden;
}
.products-subpanel-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  padding: 0.75rem 0.85rem;
  background: var(--card);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .2s ease;
  user-select: none;
}
.products-subpanel-title:hover{
  background: #f0f7ff;
}
.products-subpanel-title::-webkit-details-marker{
  display: none;
}
.products-subpanel[open] .products-subpanel-title{
  border-bottom: 1px solid var(--border);
}
.products-subpanel[open] .expand-icon{
  transform: rotate(180deg);
}
.expand-icon{
  transition: transform .2s ease;
  font-size: 0.8rem;
  color: var(--muted);
}
.products-submenu{
  flex-direction: column;
  gap: .5rem;
  padding: 0.75rem 0.85rem;
  margin: 0;
}
.panel-action-btn{
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--card);
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.panel-action-btn:hover{
  background: var(--color-ice);
  border-color: var(--color-primary-light);
}
.panel-action-btn:active{
  transform: scale(0.98);
  opacity: 0.9;
}

/* Estilos para botones del panel de categorías en móvil: fondo azul y texto blanco */
@media (max-width: 767px){
  .panel-action-btn{
    background: var(--color-primary) !important; /* Azul marino */
    color: #ffffff !important; /* Texto blanco */
    border: 1px solid var(--color-primary) !important;
    font-weight: 600 !important;
  }
  .panel-action-btn:hover{
    background: var(--color-primary-light) !important; /* Azul más claro al hover */
    border-color: var(--color-primary-light) !important;
    color: #ffffff !important;
  }
  .panel-action-btn:active{
    background: var(--color-primary) !important; /* Azul más oscuro al activar */
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* Botón expandible "Productos" también con fondo azul y texto blanco */
  .products-subpanel-title{
    background: var(--color-primary) !important; /* Azul marino */
    color: #ffffff !important; /* Texto blanco */
    border: 1px solid var(--color-primary) !important;
    font-weight: 600 !important;
  }
  .products-subpanel-title:hover{
    background: var(--color-primary-light) !important; /* Azul más claro al hover */
    color: #ffffff !important;
  }
  .products-subpanel[open] .products-subpanel-title{
    background: #003366 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  }
  .expand-icon{
    color: #ffffff !important; /* Icono blanco */
  }
}

.categories-panel-content .menu{
  flex-direction: column;
  gap: .5rem;
}
.categories-panel-content .menu button{
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.85rem; /* Padding reducido para adaptarse mejor al texto */
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--card);
  color: var(--text);
  font-size: .9rem; /* Tamaño de fuente ligeramente reducido */
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  white-space: nowrap; /* Evitar que el texto se divida en múltiples líneas */
}
.categories-panel-content .menu button:hover{
  background: #f0f7ff;
  border-color: #b9dcff;
}
.categories-panel-content .menu button.active{
  background: #eef6ff;
  border-color: #1e40af;
  color: #1e40af;
  font-weight: 600;
}
.categories-panel-content .menu button.promo-btn{
  background: transparent;
  border-color: #ff0000;
  color: #ff0000;
  font-weight: 700;
}
.categories-panel-content .menu button.promo-btn:hover{
  background: rgba(255,0,0,.05);
}
/* Ocultar panel en escritorio */
@media (min-width: 1024px){
  .categories-mobile-panel,
  .categories-overlay{
    display: none !important;
  }
}
/* Prevenir scroll del body cuando el panel está abierto */
body.categories-panel-open{
  overflow: hidden;
}

/* ===== Mobile bar (info + categorías) ===== */
.mobile-aside-bar{ display:block; max-width:1200px; margin:0 auto; padding:.5rem 1rem; display:flex; gap:.5rem; }
@media (min-width: 901px){ .mobile-aside-bar{ display:none; } }

/* ===== Aside sólo en móvil (off-canvas) ===== */
@media (min-width: 901px){
  .layout{ grid-template-columns: 1fr !important; }
  aside{ display:none !important; }
}
@media (max-width: 900px){
  aside{
    position: fixed;
    top: calc(var(--header-h,78px) + 44px);
    left: 0;
    width: min(86vw, 360px);
    height: calc(100dvh - var(--header-h,78px) - 44px);
    background: var(--card);
    border-right: 1px solid var(--border);
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    transform: translateX(-110%);
    transition: transform .25s ease;
    z-index: 30;
    overflow:auto;
    padding:.75rem;
  }
  body.aside-open aside{ transform: translateX(0); }
  body.aside-open::after{ content:''; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:25; }
}

/* ===== Evitar duplicados de información ===== */
/* Desktop: aside oculto; footer visible */
@media (min-width: 901px){
  .site-footer.compact{ display:block; }
}
/* Móvil: ocultar columna de información en footer porque está en el aside */
@media (max-width: 900px){
  .site-footer.compact .footer-col:first-child{ display:none; }
}

/* ===== Footer compacto ===== */
.site-footer.compact{ background:#0f172a; color:#fff; margin-top:1rem; }
.site-footer.compact .footer-inner{ max-width:1200px; margin:0 auto; padding:1rem; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:.75rem; }
.site-footer.compact .footer-title{ margin:0 0 .4rem 0; font-weight:800; color:#fff; font-size:.95rem; }
.site-footer.compact .footer-list,.site-footer.compact .footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; font-size:.92rem; color:#fff; }
.site-footer.compact .footer-list li,.site-footer.compact .footer-links li{ color:#fff; }
.site-footer.compact .footer-link{ color:#fff; text-decoration:none; }
.site-footer.compact .footer-link:hover{ color:#e2e8f0; text-decoration:underline; }
.site-footer.compact .footer-list a{ color:#fff; text-decoration:none; }
.site-footer.compact .footer-list a:hover{ color:#e2e8f0; text-decoration:underline; }
.site-footer.compact .badge{ color:#fff; border-color:rgba(255,255,255,.3); }
.site-footer.compact .footer-legal{ border-top:1px solid rgba(255,255,255,.15); padding:.5rem 1rem; text-align:center; color:#fff; font-size:.85rem; }
.pay-badges{ display:flex; flex-wrap:wrap; gap:.3rem; }
.badge{ display:inline-block; padding:.25rem .5rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; font-weight:700; font-size:.8rem; background:rgba(255,255,255,.08); color:#f4f6f7; }


/* === Consolidado: estilos finales solicitados === */

/* Fondo azul suave y header/topbar */
/* Variables ya definidas en :root principal - no sobrescribir */
body{
  background: var(--bg);
  background-image:
    radial-gradient(900px 520px at 12% -20%, rgba(255,255,255,.55), rgba(255,255,255,0)),
    radial-gradient(760px 480px at 88% 122%, rgba(255,255,255,.6), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(18,58,93,.03), rgba(18,58,93,0));
  background-attachment: fixed;
}
header, .cats-topbar{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* Grid 5 por fila y separación vertical */
@media (min-width: 1200px){
  .grid{ grid-template-columns: repeat(5, 1fr); }
}
.grid{ column-gap: .55rem; row-gap: 1.4rem; }

/* Marco de imagen 4:3 con #f6f9ff */
.grid .card .badge-wrap{
  margin: .4rem; padding: .6rem; background: #f6f9ff; border: 1px solid #e4ecf9; border-radius: .6rem;
  aspect-ratio: 4 / 3 !important; max-height: none !important; height: auto !important;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 35%),
                    radial-gradient(80% 60% at 20% 0%, rgba(255,255,255,.35), transparent 60%);
  box-shadow: inset 0 1px 2px rgba(30,64,175,.10), 0 2px 10px rgba(30,64,175,.06);
  transition: box-shadow .18s ease;
}
.grid .card .badge-wrap:hover{ box-shadow: inset 0 1px 2px rgba(30,64,175,.14), 0 6px 18px rgba(30,64,175,.14); }
.grid .card .badge-wrap img{ height:100% !important; width:auto !important; max-height:none !important; object-fit:contain; display:block; }

/* Tarjeta y hover */
.card{ box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.05); border:1px solid rgba(16,24,40,.06);
  transition: box-shadow .18s ease, transform .18s ease; }
.card:hover{ transform: translateY(-3px) scale(1.01); box-shadow: 0 6px 14px rgba(16,24,40,.10), 0 18px 36px rgba(16,24,40,.08); }

/* Fila de compra y botón Añadir */
.buy-row{ display:flex !important; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.4rem; }
.price-inline{ font-size:.9rem; }
.card .add-row{ display:none !important; }

/* Ocultar sidebar */
.layout{ display:grid; grid-template-columns: 1fr; gap:1rem; }
.layout aside{ display:none; }

/* Z-index Mis datos */
#profileModal{ z-index:10010; }
.cats-topbar{ z-index:30; }

/* Categorías invertidas + promos rojas */
.cats-topbar .menu button{
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
}
.cats-topbar .menu button:hover,
.cats-topbar .menu button.active{
  filter: brightness(1.05);
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.cats-topbar .menu button.promo-btn{ background:transparent; border:0; color:#ff0000 !important; font-weight:800; }
.cats-topbar .menu button.promo-btn:hover{ filter: brightness(1.05); }

/* Ajuste tras quitar el banner: pegar categorías al header */
.cats-topbar{ margin-top: 0; }


/* === Categorías: estilo texto (sin borde ni fondo), más pequeñas y en azul === */
.cats-topbar .menu{
  gap: .35rem;
  flex-wrap: wrap;
}
.cats-topbar .menu button{
  background: transparent !important;
  border: 0 !important;
  color: var(--color-primary) !important;            /* azul */
  padding: .24rem .35rem !important;
  font-size: .86rem !important;
  border-radius: 0 !important;
  line-height: 1.1;
}
.cats-topbar .menu button:hover,
.cats-topbar .menu button.active{
  color: var(--color-primary-light) !important;            /* azul más oscuro al hover/activo */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cats-topbar .menu button:focus-visible{
  outline: 2px solid rgba(30,64,175,.35);
  outline-offset: 2px;
}

/* Quitar estilos rojos de promo para unificar al estilo texto */
.cats-topbar .menu button.promo-btn{ background:transparent; border:0; color:#ff0000; font-weight:800; }


#hero .carousel, #hero .carousel-viewport{ width:100%; height:100%; }
#hero .carousel-track{ height:100%; }
#hero .slide{ width:100%; height:100%; }
#hero .slide img{ width:100%; height:100%; object-fit:cover; display:block; }



/* Solapado productos sobre banners */
:root{ --banners-gap:16px; --overlap:120px; }
main, .banners-grid{ overflow:visible; }
#productList, .products, #grid, #productGrid{
  position:relative; z-index:5; margin-top:calc(-1 * var(--overlap));
}
.products, #productList, #grid, #productGrid,
.products .card, #productList .card, #grid .card, #productGrid .card{ overflow:visible; }
#productList::after, .products::after, #grid::after, #productGrid::after{ content:""; display:block; height:var(--overlap); }

/* PRODUCT BADGES (marcado existente) */
.card .badge-wrap{ position:relative; }
.card .badge-wrap img{ display:block; width:100%; height:auto; }
.card .badge-wrap .badge{ position:absolute; top:8px; left:8px; padding:4px 8px; border-radius:999px;
  font-size:.8rem; font-weight:800; color:#fff; background:#d00000; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.card .badge-wrap .badge--oferta{ background:#d00000; }
.card .badge-wrap .badge--novedad{ background:#d00000; }

/* Botón Favorito (corazón) */
.favorite-btn{ position:absolute; top:8px; right:8px; background:transparent; border:none; border-radius:0;
  width:auto; height:auto; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1.4rem; z-index:5; transition:all .2s ease; padding:0; 
  filter: brightness(0) invert(1) drop-shadow(1px 0 0.5px #000) drop-shadow(-1px 0 0.5px #000) drop-shadow(0 1px 0.5px #000) drop-shadow(0 -1px 0.5px #000); }
.favorite-btn:hover{ transform:scale(1.15); }
.favorite-btn.active{ filter: brightness(0) saturate(100%) invert(25%) sepia(94%) saturate(6890%) hue-rotate(350deg) brightness(95%) contrast(95%) drop-shadow(1px 0 0.5px #000) drop-shadow(-1px 0 0.5px #000) drop-shadow(0 1px 0.5px #000) drop-shadow(0 -1px 0.5px #000); }
.favorite-btn.active::after{ display:none; }



/* Hero controlado por variables */
#hero{
  width: var(--hero-w);
  height: var(--hero-h);
  display: block;
  max-width: none;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}
#hero .carousel, #hero .carousel-viewport{ width:100%; height:100%; }
#hero .carousel-track{ height:100%; }
#hero .slide{ width:100%; height:100%; }
#hero .slide img{ width:100%; height:100%; object-fit:cover; display:block; }




/* BANNERS GRID START */
.banners-grid{
  display: grid;
  grid-template-columns: repeat(2, 500px);
  grid-auto-rows: 250px;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.banner-card{
  width: 500px; 
  height: 250px;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  display: flex; 
  align-items: center; 
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}
.banner-card img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}
.banners-grid > *{ margin:0 !important; }
.banners-grid > #hero{ grid-column:1; grid-row:1; }
.banners-grid > #banner2{ grid-column:2; grid-row:1; }
.banners-grid > #banner3{ grid-column:1; grid-row:2; }
.banners-grid > #banner4{ grid-column:2; grid-row:2; }

/* BANNERS RESPONSIVE - MÓVIL (< 768px) */
@media (max-width: 767px){
  .banners-grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .banner-card{
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    max-width: 100%;
  }
  .banner-card img{
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  /* Resetear posiciones de grid para móvil - todos en una columna */
  .banners-grid > #hero{ 
    grid-column: 1 !important; 
    grid-row: 1 !important; 
    margin-bottom: 0 !important;
  }
  /* Botones de acceso rápido después del hero */
  .banners-grid > .home-mobile-shortcuts {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 1rem 0 !important;
  }
  .banners-grid > #banner2{ 
    grid-column: 1 !important; 
    grid-row: 3 !important; 
  }
  .banners-grid > #banner3{ 
    grid-column: 1 !important; 
    grid-row: 4 !important; 
  }
  .banners-grid > #banner4{ 
    grid-column: 1 !important; 
    grid-row: 5 !important; 
  }
  /* Hero también debe adaptarse */
  #hero{
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    max-width: 100%;
    overflow: hidden;
  }
  #hero .carousel,
  #hero .carousel-viewport{
    width: 100% !important;
    height: 100% !important;
  }
  #hero .slide img{
    object-fit: contain !important;
  }
}

/* BANNERS RESPONSIVE - TABLET (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px){
  .banners-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 16px;
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .banner-card{
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    max-width: 100%;
  }
  .banner-card img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  /* Hero también debe adaptarse */
  #hero{
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    max-width: 100%;
    overflow: hidden;
  }
  #hero .slide img{
    object-fit: cover !important;
  }
}

/* BANNERS - ESCRITORIO (>= 1024px) - Mantener diseño original */
@media (min-width: 1024px){
  .banners-grid{
    grid-template-columns: repeat(2, 500px);
    grid-auto-rows: 250px;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin: 16px auto;
  }
  .banner-card{
    width: 500px;
    height: 250px;
  }
  .banner-card img{
    object-fit: cover;
  }
  #hero{
    width: 500px;
    height: 250px;
  }
}

/* BANNERS GRID END */




/* === Solapado controlado por estado === */
:root{ --overlap: 120px; }
main, .banners-grid{ overflow: visible; }

/* Por defecto, sin solape y banners ocultos */
#productGrid{ position:relative; z-index:5; margin-top:0; overflow:visible; }
:not(.banners-active) .banners-grid{ display:none; }

/* Cuando hay banners activos, aplicamos solape */
.banners-active .banners-grid{ display:grid; }
.banners-active #productGrid{ margin-top: calc(-1 * var(--overlap)); }

/* Grid de productos estable */
#productGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap:16px;
  max-width:1200px;
  margin:16px auto;
}
@media (max-width: 1199px){
  #productGrid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
.card{ width:100%; }
.card img{ width:100%; height:auto; display:block; }



/* === Override grid: 5 cards per row on desktop === */
#productGrid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
/* Móvil: 2 productos por línea */
@media (max-width: 767px){
  #productGrid{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    gap: 0.75rem !important;
  }
}
@media (min-width: 768px){
  #productGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1120px){
  #productGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ===== Ampliación de tarjetas de productos ===== */
.card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 1;
  transform-origin: center center;
}

/* El cursor pointer solo en áreas clicables, no en botones */
.card .add-btn,
.card .favorite-btn {
  cursor: pointer;
}

.card.expanded {
  transform: scale(1.5);
  z-index: 100 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  pointer-events: auto;
}

/* En móvil, ampliación del 25% */
@media (max-width: 767px) {
  .card.expanded {
    transform: scale(1.25);
    z-index: 100;
  }
  
  /* Asegurar que la tarjeta ampliada no se salga de la pantalla */
  #productGrid {
    overflow: visible !important;
  }
}

/* Asegurar que los botones sigan siendo clicables en estado ampliado */
.card.expanded .add-btn {
  pointer-events: auto !important;
  z-index: 103 !important;
  position: relative;
  cursor: pointer !important;
}

/* El botón de favoritos mantiene su posición absoluta original */
.card.expanded .favorite-btn {
  pointer-events: auto !important;
  z-index: 103 !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  cursor: pointer !important;
}

/* Mejorar la visibilidad de la tarjeta ampliada */
.card.expanded .badge-wrap img {
  height: auto;
  max-height: 300px;
  object-fit: cover;
}

/* Asegurar que el contenido se vea bien ampliado */
.card.expanded .content {
  padding: 1.5rem;
}

.card.expanded .name {
  font-size: 1.2em;
  line-height: 1.3;
}

.card.expanded .price-inline {
  font-size: 1.1em;
}

.card.expanded .add-btn {
  font-size: 1.1em;
  padding: 0.75rem 1.5rem;
}

/* Asegurar que las etiquetas de OFERTA/NOVEDAD se vean bien ampliadas */
.card.expanded .badge {
  font-size: 1em;
  padding: 6px 12px;
}

/* Mejorar el botón de favoritos en estado ampliado - solo tamaño, mantiene posición */
.card.expanded .favorite-btn {
  font-size: 1.6rem;
  /* La posición absolute ya está definida arriba, no la sobrescribimos */
}

/* Overlay oscuro cuando hay una tarjeta ampliada */
.card-expand-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.card-expanded .card-expand-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Asegurar que las tarjetas ampliadas y sus botones estén por encima del overlay */
body.card-expanded .card.expanded {
  pointer-events: auto !important;
}

body.card-expanded .card.expanded * {
  pointer-events: auto !important;
}

/* Asegurar que el grid permita overflow para las tarjetas ampliadas */
#productGrid {
  position: relative;
  z-index: 1;
}

/* ===== Botones de acceso rápido móvil ===== */
/* Por defecto oculto, se mostrará con JS cuando el hero esté visible */
.home-mobile-shortcuts {
  display: none;
}

/* Ocultar en escritorio */
@media (min-width: 901px){
  .home-mobile-shortcuts {
    display: none !important;
  }
}

/* Mostrar solo en móvil cuando está activo */
@media (max-width: 900px){
  .home-mobile-shortcuts {
    gap: 0.75rem;
    margin: 0;
    padding: 1rem 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  
  /* Cuando está dentro del banners-grid, ajustar padding */
  .banners-grid > .home-mobile-shortcuts {
    padding: 1rem 0 !important;
  }
  
  /* Mostrar cuando tiene display:flex (controlado por JS) */
  .home-mobile-shortcuts[style*="flex"],
  .home-mobile-shortcuts.show {
    display: flex !important;
  }
  
  .home-mobile-button {
    flex: 1;
    padding: 1.25rem 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 56px; /* Tamaño mínimo para touch (móvil real) */
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }
  
  .home-mobile-button--offers {
    background: #d00000;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(208, 0, 0, 0.25);
  }
  
  .home-mobile-button--offers:active {
    background: #b00000;
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(208, 0, 0, 0.3);
  }
  
  .home-mobile-button--products {
    background: #003366;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
  }
  
  .home-mobile-button--products:active {
    background: #004488;
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 51, 102, 0.3);
  }
}

/* Ajustes específicos para móviles pequeños */
@media (max-width: 480px){
  .home-mobile-shortcuts {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .home-mobile-button {
    padding: 1rem 0.75rem;
    font-size: 1rem;
    min-height: 52px;
  }
  /* HEADER más llamativo - Mayor especificidad para sobrescribir estilos de 767px */
  header{
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.18) !important;
  }

  header .brand span{
    color: #fff !important;
  }

  header .brand img.brand-logo{
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35)) !important;
  }

  /* Botones del header con fondo suave y borde - Sobrescribir estilos de 767px */
  header .btn,
  header .btn.secondary,
  header .btn.home{
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }

  header .btn:hover,
  header .btn:focus,
  header .btn:active{
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
  }
  
  /* Sobrescribir también los estilos específicos de botones */
  #searchToggleBtn,
  #homeBtn,
  #mobileCatsBtn,
  #cartBtn{
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }
  
  #searchToggleBtn:hover,
  #searchToggleBtn:active,
  #searchToggleBtn:focus,
  #homeBtn:hover,
  #homeBtn:active,
  #homeBtn:focus,
  #mobileCatsBtn:hover,
  #mobileCatsBtn:active,
  #mobileCatsBtn:focus,
  #cartBtn:hover,
  #cartBtn:active,
  #cartBtn:focus{
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    opacity: 1 !important;
  }
} /* Cierre del media query @media (max-width: 480px) */

/* ===== HEADER MÁS LLAMATIVO - ESCRITORIO Y TABLET ===== */
/* Aplicar en pantallas mayores a 768px (escritorio y tablet) */
@media (min-width: 768px){
  header{
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.18) !important;
  }

  header .brand span{
    color: #fff !important;
  }

  header .brand img.brand-logo{
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35)) !important;
  }

  /* Botones del header con fondo suave y borde */
  header .btn,
  header .btn.secondary,
  header .btn.home{
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }

  header .btn:hover,
  header .btn:focus{
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
  }
  
  /* Asegurar que el popover de "Como comprar" tenga texto visible */
  header .howto .popover{
    color: var(--text) !important;
  }
  
  header .howto .popover h4,
  header .howto .popover li,
  header .howto .popover p,
  header .howto .popover *{
    color: var(--text) !important;
  }
}