/* =========================================
   Baby Love – CSS mejorado (responsive y accesible)
   Versión unificada con mejoras para móvil y ajustes visuales
   ========================================= */

/* Copiamos todo el contenido original de style.css */
/*
 * Nota: Este archivo se basa en el style.css original proporcionado.
 * Se han añadido reglas adicionales al final para mejorar la experiencia
 * en móviles, diferenciar categorías y marcas, y optimizar la visualización
 * según las recomendaciones del análisis. Puedes sustituir tu archivo
 * style.css con este contenido o incorporar únicamente las secciones
 * marcadas como mejoras.
 */

/* === Variables y estilos base === */
:root{
  --primary:#4FC3F7;
  --primary-600:#29B6F6;
  --primary-700:#039BE5;

  --accent:#FF80AB;
  --accent-600:#FF5C9A;
  --accent-700:#FF3F86;

  --warning:#FFC107;

  --bg:#FDFBFF;
  --bg-soft:#F7FBFF;

  --text:#0C0B0B;
  --muted:#666A73;
  --border:#EEF0F6;

  --fs-hero: clamp(28px, 5vw, 44px);
  --fs-h1:   clamp(22px, 3.2vw, 32px);
  --fs-h2:   clamp(18px, 2.4vw, 24px);
  --fs-base: clamp(14px, 1.4vw, 16px);

  --r-lg: 16px;
  --r-md: 12px;

  --shadow: 0 6px 16px rgba(20,20,40,.06);

  /* Altura de imagen de card */
  --card-img-min: 150px;
  --card-img-vw:  18vw;
  --card-img-max: 180px;
}

/* Reset suave */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, #FFF1F7 0%, #F2F9FF 70%), var(--bg);
  color:var(--text); margin:0; font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }

/* ======= TOPBAR ======= */
.topbar{ background:#fff; border-bottom:1px solid var(--border) }
.logo-badge{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-size:1.1rem;
  background:linear-gradient(135deg,var(--accent) 0%,var(--primary) 100%);
}
.brand-text h1{ font-size:1rem;font-weight:700;line-height:1;margin:0 }

/* Buscador */
.searchbox{
  background:#f4f7fc;border-radius:999px;overflow:hidden;align-items:center;
  border:1px solid #e8eef9; display:flex; gap:.5rem; padding:.15rem .6rem;
}
.searchbox i{ color:#8b8fa7 }
.searchbox input{
  background:transparent;border:0;outline:0;padding:.55rem 1rem;width:100%
}

/* ======= HERO ======= */
.hero-brand{ background:linear-gradient(180deg,#FFF1F7 0%,#EAF6FF 100%);border-bottom:1px solid #eee }
.hero-title{
  font-size:var(--fs-hero);font-weight:800;margin:0;
  background:linear-gradient(90deg,var(--accent) 0%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-title .celeste{ color:#4da6ff }
.hero-title .rosa{ color:#ff66b2 }
.hero-subtitle{ color:#1a1c1e;font-size:clamp(14px,1.6vw,18px);margin:.25rem 0 0 }

/* ======= CATEGORÍAS / CHIPS ======= */
.categories{ background:#fff;border-bottom:1px solid var(--border) }
.chip{
  border:1px solid #e5e7f1;background:#fff;color:#333;
  padding:.45rem .8rem;border-radius:12px;font-weight:600;transition:.15s
}
.chip:hover{
  border-color:var(--primary);color:#fff;
  background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%)
}
.chip-club{ background:#ffe7f1;border-color:#ffd3e6;color:#a3004f }
.chip-clear{ background:#f3f6fb;border-color:#e7ebf4 }

/* chips marca/talle */
.brand-chip{ display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:12px }
.brand-chip img{ height:22px;width:auto }
.size-chip{
  border:1px solid var(--border);background:#EAF6FF;color:#2b2b2b;
  font-weight:700;padding:.4rem .75rem;border-radius:999px
}
.size-chip.active,.brand-chip.active{
  outline:2px solid var(--primary);outline-offset:2px;background:#FFF1F7
}

/* ======= GRILLA DE MARCAS ======= */
#filtro-marcas{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.brand-chip.logo-only{
  padding:14px 18px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  min-height:72px;background:#fff;border:1px solid #e5e7eb;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.brand-chip.logo-only img{ height:52px;width:auto }
.brand-chip.logo-only:hover{
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(79,195,247,.18);border-color:#d7ecff
}
.brand-chip.active{
  outline:2px solid var(--primary);outline-offset:2px;background:#FFF1F7;
  border-color:#FFCCE0;box-shadow:0 0 0 3px rgba(255,128,171,.15)
}

/* ======= PRODUCTOS (alturas y alineación) ======= */
#lista-productos > [class^="col-"], 
#lista-productos > [class*=" col-"]{ display:flex }  /* columnas como flex para igualar alturas */

.producto-card,.card.h-100{
  border:1px solid var(--border);border-radius:16px;background:#fff;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  width:100%; height:100%; position:relative;
}

/* Contenedor de imagen con badge centrado y ANCLADO */
.producto-card .thumb{
  position:relative;               /* <- ancla del badge */
  width:100%;
  height: clamp(var(--card-img-min), var(--card-img-vw), var(--card-img-max));
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  background:linear-gradient(180deg,#FAFBFF 0%,#FFF6FB 100%);
}
.producto-card .thumb img,
.producto-card img,
.card.h-100 img{
  width:100%;height:100%;object-fit:contain;
}

/* Badge unificado (stock/quedan) – SIEMPRE alineado */
.stock-pill,
.producto-card .badge.bg-warning,
.producto-card .badge-warning,
.producto-card .quedan{
  position:absolute; top:10px; right:12px; z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  background:#E0F5FF; color:#0c4a6e; border-radius:10px; padding:.28rem .55rem; font-weight:700;
}
/* cuando el badge está dentro de .thumb, usá ese ancla */
.producto-card .thumb .stock-pill,
.producto-card .thumb .badge,
.producto-card .thumb .quedan{ top:10px; right:10px }

/* cuerpo */
.producto-card .card-body,.card.h-100 .card-body{
  padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem; flex:1;
}
.card-title{
  font-size:1.02rem;font-weight:700;margin:0;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.25em * 2);
  margin-right:88px; /* espacio por badge */
}
.card-text{
  font-size:.9rem;color:var(--muted);margin:0;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.2em * 2);
}
.producto-precio{ font-size:1.25rem;font-weight:800;color:#171717 }
.producto-anterior{ font-size:.9rem;color:#a0a0a8;text-decoration:line-through }

/* Botones */
.btn.btn-primary{ background:var(--primary);border:none;font-weight:700 }
.btn.btn-primary:hover{ background:var(--primary-600) }
.btn.btn-secondary{ background:var(--accent);border:none;font-weight:700;color:#fff }
.btn.btn-secondary:hover{ background:var(--accent-600) }

/* badge oferta */
.producto-card.oferta{ border-color:#ffd5e6 }
.producto-card.oferta::before{
  content:"Oferta flash";position:absolute;top:.75rem;left:.75rem;
  background:linear-gradient(90deg,var(--accent) 0%,var(--primary) 100%);
  color:#fff;font-weight:800;padding:.25rem .6rem;font-size:.8rem;border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.08)
}

/* botón al fondo */
.producto-card .card-body .btn{ margin-top:auto }

/* ======= BENEFICIOS ======= */
.benefit-card{
  border-width:2px;border-radius:16px;border-color:#FDD9E7;
  background:linear-gradient(180deg,#FFF5FA 0%,#F3FAFF 100%)
}

/* ======= CARRITO LATERAL ======= */
.overlay-carrito{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;transition:all .3s ease;z-index:998
}
.overlay-carrito.activo{ opacity:1;visibility:visible }
.carrito-lateral{
  position:fixed;top:0;right:-400px;width:350px;height:100%;
  background:#fff;box-shadow:-2px 0 10px rgba(0,0,0,0.1);
  padding:1rem;z-index:999;display:flex;flex-direction:column;
  transition:right .3s ease;border-left:4px solid var(--primary);will-change:right
}
.carrito-lateral.activo{ right:0 }
.carrito-header{ display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem }
#carrito{ margin-bottom:.5rem;max-height:45vh;overflow:auto }
#carrito::-webkit-scrollbar{ width:8px }
#carrito::-webkit-scrollbar-thumb{ background:#e1e6f3;border-radius:8px }
#total{ min-width:60px;display:inline-block;text-align:right }
#enviar-whatsapp{ background:#25D366;border:none;font-weight:700 }
#enviar-whatsapp:hover{ filter:brightness(.95) }
#pagar-online{ background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);border:none;font-weight:700;display:none }

/* Envío (carrito) */
.envio-box{
  border:1px dashed var(--border);border-radius:12px;padding:.75rem;
  background:var(--bg-soft);margin-bottom:.75rem
}
.envio-box .input-group input{ background:#fff }

/* ======= MENU SUPERIOR (slide-down) ======= */
.topmenu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:1100;backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease;will-change:opacity
}
.topmenu-overlay.active{ opacity:1;visibility:visible;pointer-events:auto }
.topmenu{
  position:fixed;left:50%;top:0;width:min(92vw,560px);max-height:60vh;
  background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.18);
  z-index:1110;padding:8px 0 10px;overflow:hidden;border:1px solid #f3e0eb;
  transform:translate(-50%,-120%);transition:transform .28s ease,opacity .2s ease;opacity:0;will-change:transform,opacity
}
.topmenu.active{ transform:translate(-50%,14px);opacity:1 }
.topmenu-header{ display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border) }
.topmenu-list{ padding:6px 10px 12px;max-height:calc(60vh - 54px);overflow:auto }
.topmenu-item{
  width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;
  padding:14px 14px;margin:6px 0;border:1px solid #eceef6;background:#fff;border-radius:12px;font-weight:600;color:#222
}
.topmenu-item:hover{ border-color:#dfe3f3;background:linear-gradient(90deg,#F9FCFF 0%,#FFF7FB 100%) }
.topmenu-item i{ opacity:.6 }

/* ===== Carrusel de destacados – imágenes + badge alineado ===== */
#carouselDestacados .carousel-item{ padding:.25rem 0 }
#carouselDestacados .card,#carouselDestacados .producto-card{ height:100% }
#carouselDestacados .producto-card .thumb{ height:170px }
#carouselDestacados .producto-card .thumb .stock-pill{ top:8px; right:8px }

/* Backdrops Bootstrap inactivos no bloqueen */
.modal-backdrop:not(.show),.offcanvas-backdrop:not(.show){ opacity:0 !important;pointer-events:none !important }

/* Carrito con imágenes */
#carrito li{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid #eee
}
#carrito li img{
  width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid #ddd;background:#fff;flex-shrink:0
}
#carrito li strong{ display:block;font-size:.95rem;font-weight:600;margin-bottom:.25rem }
#carrito li .d-flex{ gap:.4rem }
#carrito li span{ font-size:.9rem }
#carrito li > span:last-child{ font-weight:600;min-width:80px;text-align:right }

/* Estados extra */
.btn-categoria.active{
  border-color:var(--primary);color:#fff;
  background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);
  box-shadow:0 6px 16px rgba(79,195,247,.25)
}
.chip:focus-visible,.brand-chip:focus-visible,.size-chip:focus-visible,.btn-categoria:focus-visible,.topmenu-item:focus-visible{
  outline:3px solid rgba(79,195,247,.65);outline-offset:2px
}
#envio-info.is-free span:last-child{ font-weight:800;color:#24a148 }

/* ======= RESPONSIVE EXISTENTE ======= */
@media (max-width:992px){
  /* opcional: :root{ --card-img-vw: 20vw; } */
}
@media (max-width:768px){
  .searchbox{ display:none !important }
}

/* ==== Mobile portrait (≤576px) ==== */
@media (max-width:576px){
  .brand-text h1{ font-size:1.1rem }
  .carrito-lateral{ width:100%;max-width:100%;right:-100% }
  .carrito-lateral.activo{ right:0 }

  /* títulos más compactos para que no empujen el botón */
  .card-title{ margin-right:84px }

  /* grilla de marcas/botones: 2 columnas grandes */
  #filtro-marcas{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap:12px;
  }
}

/* ==== Mobile landscape: alinear y compactar === */
@media (orientation:landscape) and (max-width:900px){
  :root{
    --card-img-min: 140px;
    --card-img-max: 160px;
  }
  #filtro-marcas{
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap:14px;
  }
  .producto-card .thumb{ padding:.9rem }
  .card-title{ font-size:1rem; margin-right:84px }
}

/* Accesibilidad: menos animaciones */
@media (prefers-reduced-motion:reduce){
  .carrito-lateral,.overlay-carrito,.topmenu,.topmenu-overlay{ transition:none !important }
}

/* ======= ADMIN ======= */
.table{ margin-bottom:0 }
.table thead th{ position:sticky;top:0;background:#fff;z-index:1;font-weight:600;color:#111827 }
.table td,.table th{ vertical-align:middle }
.img-cell{
  width:48px;height:48px;object-fit:cover;border-radius:8px;
  border:1px solid var(--border);background:#fff
}

/* Ocultar columnas menos críticas en mobile (agregá .products-table a la tabla) */
.products-table th:nth-child(4),
.products-table td:nth-child(4), /* Marca */
.products-table th:nth-child(5),
.products-table td:nth-child(5), /* Cat.  */
.products-table th:nth-child(6),
.products-table td:nth-child(6), /* Off   */
.products-table th:nth-child(7),
.products-table td:nth-child(7)  /* Dest  */
{ display:none }

@media (min-width:576px){
  .products-table th:nth-child(4),
  .products-table td:nth-child(4),
  .products-table th:nth-child(5),
  .products-table td:nth-child(5),
  .products-table th:nth-child(6),
  .products-table td:nth-child(6),
  .products-table th:nth-child(7),
  .products-table td:nth-child(7){ display:table-cell }
}
@media (max-width:575.98px){
  .products-table .btn{ padding:.25rem .5rem;font-size:.78rem }
}

/* PWA: safe areas iOS */
:root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom) }
.safe-pad-top{ padding-top: calc(1rem + var(--safe-top)) }
.safe-pad-bottom{ padding-bottom: calc(1rem + var(--safe-bottom)) }

/* ===== Banner PWA ===== */
.pwa-banner { margin-top: 8px; }
.pwa-banner__box{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem;
  box-shadow: var(--shadow);
}
.pwa-banner__text{ font-weight:600; color:#111827; }
.pwa-banner__actions .btn{ border-radius:999px; }
@media (max-width: 576px){
  .pwa-banner__box{ flex-direction:column; align-items:stretch; }
  .pwa-banner__actions{ display:flex; gap:.5rem; }
}

/* ===== STOCK – pastilla pareja y alineada (grilla + carrusel) ===== */
:root{
  --stock-h: 24px;            /* alto de la pastilla */
  --stock-fs: .72rem;         /* tamaño de fuente */
  --stock-pad-x: .50rem;      /* padding horizontal */
  --stock-bg: #EAF6FF;
  --stock-bd: #CFE8FF;
  --stock-fg: #063a52;
}

/* El badge siempre se ancla sobre la imagen */
.producto-card .thumb{ position:relative }

/* Unificamos TODAS las variantes posibles que pueden llegar del HTML/Bootstrap */
.producto-card .badge,
.producto-card .badge.text-bg-info,
.producto-card .badge.bg-info,
.producto-card .badge-warning,
.producto-card .badge.bg-warning,
.producto-card .stock-pill,
.producto-card .quedan{
  position:absolute; top:8px; right:8px; z-index:3;

  display:inline-flex; align-items:center; justify-content:center;
  height:var(--stock-h);
  padding:0 var(--stock-pad-x);
  border-radius:999px;

  /* colores neutros y legibles (pisamos Bootstrap) */
  background:var(--stock-bg) !important;
  color:var(--stock-fg) !important;
  border:1px solid var(--stock-bd) !important;

  font-weight:800; font-size:var(--stock-fs); line-height:1;
  white-space:nowrap; letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}

/* Carrusel: un toque más compacto */
#carouselDestacados .producto-card .badge,
#carouselDestacados .producto-card .badge.text-bg-info,
#carouselDestacados .producto-card .badge.bg-info,
#carouselDestacados .producto-card .badge-warning,
#carouselDestacados .producto-card .badge.bg-warning,
#carouselDestacados .producto-card .stock-pill,
#carouselDestacados .producto-card .quedan{
  --stock-h: 22px;
  --stock-fs: .68rem;
  --stock-pad-x: .44rem;
  top:8px; right:8px;
}

/* Por si algún badge quedó fuera de la imagen, lo “subimos” al ancla visual */
.producto-card .card-body .badge,
.producto-card .card-body .stock-pill,
.producto-card .card-body .quedan{
  top: calc(-1 * (var(--card-img-min) - 8px)); /* relativo a la imagen */
}

/* El título deja espacio fijo para el badge y nada se corre */
.card-title{ margin-right: 88px }
/* === Header user icon: sin recuadro/borde === */
.header-icon-btn,
button.header-icon-btn,
.header-icon-btn.btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px;
  padding:0;
  background:transparent;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:10px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

/* quita el borde interno de Firefox */
.header-icon-btn::-moz-focus-inner{ border:0; padding:0 }

/* hover sutil (si no querés ni esto, borrá esta regla) */
.header-icon-btn:hover{ background:rgba(79,195,247,.12) }

/* si también querés eliminar el anillo de foco por completo: */
.header-icon-btn:focus,
.header-icon-btn:focus-visible,
.header-icon-btn:active{
  outline:0 !important;
  box-shadow:none !important;
  background:transparent;
}

/* Botones de categorías (mejora de diferenciación) */
.btn-categoria {
  background-color: #f7f0fa;
  border: 1px solid #e0d4ec;
  color: #8a4d9e;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.btn-categoria.active,
.btn-categoria:hover {
  background-color: #d8b4e2;
  color: #4a274f;
}

/* Chips de marcas (mejora de diferenciación) */
.brand-chip {
  background-color: #ffffff;
  border: 1px solid #d6d6d6;
  padding: 0.35rem;
  border-radius: 50px;
  transition: border-color 0.2s;
}

.brand-chip.active,
.brand-chip:hover {
  border-color: #8a4d9e;
}

/* Botones “Quitar marca” y “Quitar talle” */
.chip-clear {
  background-color: #fafafa;
  border: 1px dashed #cccccc;
  color: #666666;
}

/* ===== MEJORAS RESPONSIVE PARA MÓVIL Y TABLET ===== */

/* Móviles pequeños (≤575.98px) */
@media (max-width: 575.98px) {
  /* Reducir padding y tamaño de fuentes en el hero */
  .hero-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .hero-title {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .hero-subtitle {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
  /* Ocultar subtítulo en la topbar para ahorrar espacio */
  .brand-text small { display: none; }

  /* Convertir categorías en carrusel horizontal */
  .categories .container {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .categories .btn-categoria,
  .categories .chip-club {
    flex: 0 0 auto;
    margin-right: 0.5rem;
  }

  /* Marcas y talles en carrusel horizontal */
  #filtro-marcas,
  #filtro-talles {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  #filtro-marcas > *,
  #filtro-talles > * {
    flex: 0 0 auto;
    margin-right: 0.5rem;
  }
}

/* Tablets pequeñas (≤767.98px) */
@media (max-width: 767.98px) {
  /* Ajustar un poco el tamaño del hero */
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1.2rem;
  }
}

/* ===== Identidad visual renovada ===== */

/* Topbar con degradado y texto blanco */
.topbar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.topbar .brand-text h1,
.topbar .brand-text small,
.topbar i,
.topbar .header-icon-btn i {
  color: #fff !important;
}

/* Chips de categorías con colores pastel y sin bordes */
.chip {
  border: none;
  background-color: #f0faff;
  color: var(--primary-700);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover {
  background: var(--primary);
  color: #fff;
}
/* Ajuste del chip del club */
.chip-club {
  background-color: #fdf2f8;
  color: var(--accent-700);
  border: none;
}

/* Hero con degradado suave */
.hero-brand {
  background: linear-gradient(180deg, #ffffff 0%, #fdf0f8 100%);
  border-bottom: 1px solid #f4f4f4;
}

/* ===== Navegación móvil y buscador ===== */

/* Aumentar tamaño de iconos de la topbar para mejorar la accesibilidad */
.header-icon-btn {
  width: 44px;
  height: 44px;
}

/* Ocultar la caja de búsqueda completa en móviles y mostrar botón de búsqueda */
@media (max-width: 575.98px) {
  .searchbox { display: none !important; }
  .btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.2rem;
  }

  /* Barra de navegación inferior fija */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1050;
  }
  .bottom-nav button {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .bottom-nav button i {
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
  }
  /* Ajustar tamaño de botones de productos en móviles para área táctil mínima */
  .producto-card .btn,
  .card.h-100 .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    width: 100%;
  }
  /* Asegurar proporción de imágenes en tarjetas */
  .producto-card .thumb img,
  .card.h-100 img {
    object-fit: cover;
  }
}