/* NAGA MOBILE v1.9.6.3
   Overrides aislados para celular/tablet. Cargado después de style.css. */

@media (max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .sidebar-categorias{display:none!important}
  .mobile-category-filter{display:block!important}
  .catalog-main{margin-left:0!important;width:100%!important;min-width:0!important}
}

/* Escritorio angosto / notebook: conserva sidebar y hace entrar todo sin scroll horizontal. */
@media (min-width:701px) and (max-width:1180px){
  html,body{max-width:100%;overflow-x:hidden}

  .navbar{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px 18px!important;
    padding:10px 18px!important;
    box-sizing:border-box!important;
  }
  .navbar-logo img{height:52px!important;width:auto!important}
  .navbar-contact{min-width:0!important;justify-content:flex-end!important;gap:14px!important}
  .nav-contact-item{min-width:0!important;gap:7px!important}
  .nav-icon{width:34px!important;height:34px!important;font-size:16px!important;flex:0 0 34px!important}
  .nav-contact-label{font-size:8px!important}
  .nav-contact-value{font-size:11px!important;white-space:nowrap!important}
  .navbar-menu-wrap{grid-column:1/-1!important;width:100%!important;min-width:0!important;justify-content:center!important;overflow:visible!important}
  .navbar-menu{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    overflow:visible!important;
    gap:2px!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  .navbar-menu a{flex:1 1 auto!important;min-width:0!important;justify-content:center!important;padding:8px 8px!important;font-size:11px!important;white-space:nowrap!important}
  .navbar-menu a i{font-size:12px!important}

  .catalog-sticky{position:sticky!important;top:0!important;padding:9px 16px!important}
  .catalog-sticky .filters-card{max-width:100%!important;width:100%!important;box-sizing:border-box!important}
  .filters-grid{grid-template-columns:minmax(250px,1fr) minmax(150px,200px) minmax(150px,200px) 90px!important;gap:8px!important}
  .filters-grid .buscador-wrap{grid-column:auto!important}
  .filters-grid .search,.filters-grid .btn{width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .mobile-category-filter{display:none!important}

  .catalog-layout{
    display:grid!important;
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:18px!important;
    width:100%!important;
    max-width:1180px!important;
    padding:16px 18px 28px!important;
    box-sizing:border-box!important;
    align-items:start!important;
  }
  .sidebar-categorias{
    display:block!important;
    position:sticky!important;
    top:92px!important;
    left:auto!important;
    width:180px!important;
    height:calc(100vh - 110px)!important;
    box-sizing:border-box!important;
    padding:14px 10px!important;
  }
  .sidebar-categorias h3{font-size:23px!important;margin-bottom:12px!important}
  .cat-parent{font-size:12px!important;padding:9px 10px!important}
  .cat-link.hija{font-size:11.5px!important;padding:6px 8px!important}
  .catalog-main{margin-left:0!important;width:100%!important;min-width:0!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%!important}
  .product-card{width:100%!important;min-width:0!important;box-sizing:border-box!important}
}

@media (max-width:700px){
  body{font-size:14px}

  /* Cabecera baja: logo + menú horizontal desplazable. */
  .navbar{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:7px 9px 8px!important;
    gap:0!important;
    text-align:left!important;
  }
  .navbar-logo{
    display:flex!important;
    justify-content:center!important;
    margin:0 0 6px!important;
  }
  .navbar-logo img{height:38px!important;width:auto!important}
  .navbar-contact{display:none!important}
  .navbar-menu-wrap{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .navbar-menu{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;
    max-width:none!important;
    gap:3px!important;
    margin:0!important;
    padding:4px!important;
    border-radius:11px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .navbar-menu::-webkit-scrollbar{display:none!important}
  .navbar-menu a{
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:36px!important;
    padding:7px 9px!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    flex-direction:row!important;
    justify-content:center!important;
    gap:5px!important;
    border-radius:8px!important;
  }
  .navbar-menu a i{font-size:12px!important}
  .navbar-login-mini{display:none!important}

  /* Filtros siempre visibles, sin solaparse con el encabezado. */
  .catalog-sticky{
    position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;
    z-index:50!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    padding:7px 9px 5px!important;
    margin:0!important;
    overflow:visible!important;
    background:#f3f5f4!important;
    box-shadow:none!important;
  }
  .catalog-sticky .filters-card{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:9px!important;
    overflow:visible!important;
    border-radius:11px!important;
  }
  .filters-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    height:auto!important;
    gap:6px!important;
    align-items:stretch!important;
  }
  .filters-grid > *{
    min-width:0!important;
    max-width:100%!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .filters-grid .buscador-wrap{
    display:block!important;
    grid-column:1/-1!important;
    position:relative!important;
  }
  .filters-grid .search,
  .filters-grid select.search,
  .filters-grid input.search,
  .filters-grid .btn{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:8px 9px!important;
    margin:0!important;
    font-size:14px!important;
    line-height:22px!important;
    border-radius:7px!important;
    box-sizing:border-box!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .filters-grid .btn{display:flex!important;align-items:center!important;justify-content:center!important}
  .mobile-category-filter{display:block!important}
  #resultados-buscador{max-height:50vh!important;overflow-y:auto!important}

  .catalog-layout{
    width:100%!important;
    max-width:100%!important;
    padding:7px 9px 18px!important;
    margin:0 auto!important;
  }
  .grid{width:100%!important;grid-template-columns:1fr!important;gap:9px!important}
  .pagination{margin:11px 0 12px!important;gap:4px!important}
  .page-btn,.page-dots{min-width:31px!important;height:31px!important;padding:0 8px!important;font-size:11px!important}

  /* Tarjeta horizontal: más productos visibles por pantalla. */
  .product-card{
    display:grid!important;
    grid-template-columns:100px minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    column-gap:11px!important;
    row-gap:0!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:11px!important;
    border-radius:11px!important;
    align-items:start!important;
  }
  .product-card > .product-img{
    grid-column:1!important;
    grid-row:1 / span 6!important;
    width:100%!important;
    height:100px!important;
    min-height:100px!important;
    margin:0!important;
    align-self:start!important;
  }
  .product-card > .product-img img{width:100%!important;height:100%!important;object-fit:contain!important;padding:3px!important}
  .product-card > :not(.product-img):not(.cw-card-buy-form){grid-column:2!important;min-width:0!important}
  .product-card h3{font-size:13.5px!important;line-height:1.2!important;min-height:0!important;margin:0 0 7px!important}
  .product-card .sku,.product-card .brand{font-size:11px!important;line-height:1.2!important;margin:0 0 3px!important}
  .product-card .brand{margin-bottom:5px!important}
  .product-card .price{font-size:21px!important;line-height:1.05!important;margin:5px 0 4px!important}
  .product-card .precio-sin-imp{font-size:10.7px!important;line-height:1.25!important;margin:1px 0 4px!important}
  .product-card > .cw-card-buy-form{
    grid-column:1/-1!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:0!important;
  }
  .cw-card-buy-form .cw-buy-btn{width:100%!important;min-height:39px!important;padding:8px 10px!important;font-size:12px!important}

  /* Ficha y carrito */
  .product-page{grid-template-columns:1fr!important;padding:12px!important;gap:12px!important}
  .main-product-image{height:205px!important}
  .product-summary h1{font-size:18px!important;line-height:1.25!important}
  .cw-buy-form .cw-buy-btn{width:100%!important}
}

@media (max-width:380px){
  .navbar-logo img{height:34px!important}
  .navbar-menu a{font-size:10px!important;padding:6px 8px!important}
  .filters-grid{gap:5px!important}
  .product-card{grid-template-columns:86px minmax(0,1fr)!important;column-gap:9px!important;padding:9px!important}
  .product-card > .product-img{height:86px!important;min-height:86px!important}
  .product-card h3{font-size:12.8px!important}
  .product-card .price{font-size:20px!important}
}

/* NAGA v1.9.6.5
   Las páginas sin sidebar (Inicio y otras vistas públicas) deben ocupar todo
   el ancho también en notebooks / navegadores angostos. El grid de 180 px
   queda reservado únicamente para páginas que realmente muestran categorías. */
@media (min-width:701px) and (max-width:1180px){
  .catalog-layout > .catalog-main.no-sidebar{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:1000px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .catalog-main.no-sidebar .home-naga,
  .catalog-main.no-sidebar .slider-banner{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}


/* NAGA v1.9.6.6
   Catálogo web/notebook: sidebar real + contenido flexible.
   Evita que catalog-main caiga dentro de una columna de 180px cuando el
   viewport es angosto. No afecta celular (<=700px). */
@media (min-width:701px) and (max-width:1180px){
  .catalog-layout{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    gap:18px!important;
    width:100%!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:16px 18px 28px!important;
    box-sizing:border-box!important;
  }

  .catalog-layout > .sidebar-categorias{
    display:block!important;
    position:sticky!important;
    top:92px!important;
    left:auto!important;
    flex:0 0 180px!important;
    width:180px!important;
    min-width:180px!important;
    max-width:180px!important;
    height:calc(100vh - 110px)!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
  }

  .catalog-layout > .catalog-main:not(.no-sidebar){
    display:block!important;
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }

  .catalog-layout > .catalog-main:not(.no-sidebar) > .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
  }

  .catalog-layout > .catalog-main:not(.no-sidebar) .product-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }

  /* Las páginas que usan catalog-layout pero no tienen sidebar ocupan todo. */
  .catalog-layout > .catalog-main.no-sidebar{
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:1000px!important;
    margin:0 auto!important;
  }
}

/* NAGA v1.9.7.0 - Catálogo web: 3 tarjetas por fila, fluidas y sin desborde. */
@media (min-width:901px){
  .catalog-layout > .catalog-main:not(.no-sidebar) > .grid,
  .catalog-main > .grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
  }
  .catalog-main .product-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  .catalog-main .product-card h3{
    overflow-wrap:anywhere;
  }
}

/* En tablets angostas conservamos 2 columnas para no comprimir textos. */
@media (min-width:701px) and (max-width:900px){
  .catalog-layout > .catalog-main:not(.no-sidebar) > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* NAGA v1.9.7.3 - Navbar fija GLOBAL.
   Se aplica a todas las páginas que usan includes/navbar.php. */
:root{--naga-navbar-height:100px}

.navbar.naga-navbar-fixed{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:100000!important;
}

.naga-navbar-spacer.naga-navbar-spacer-active{
  display:block!important;
  height:var(--naga-navbar-height,100px)!important;
  width:100%!important;
  flex:0 0 var(--naga-navbar-height,100px)!important;
}

/* Filtros del catálogo inmediatamente debajo de la navbar. */
@media (min-width:701px){
  body:has(.navbar.naga-navbar-fixed) .catalog-sticky{
    top:var(--naga-navbar-height,100px)!important;
  }
}

@media (min-width:701px) and (max-width:1180px){
  body:has(.navbar.naga-navbar-fixed) .catalog-layout > .sidebar-categorias{
    top:calc(var(--naga-navbar-height,100px) + 92px)!important;
    height:calc(100vh - var(--naga-navbar-height,100px) - 104px)!important;
  }
}

/* En celular la navbar queda fija pero los filtros siguen dentro del flujo. */
@media (max-width:700px){
  body:has(.navbar.naga-navbar-fixed) .catalog-sticky{
    position:relative!important;
    top:auto!important;
  }
}

/* NAGA v1.9.7.4 - Navbar compacta y centrada */
@media (min-width:1181px){
  .navbar{grid-template-columns:200px minmax(420px,1fr) auto!important;gap:22px!important;padding-left:30px!important;padding-right:30px!important}
  .navbar-menu-wrap{justify-content:center!important}
  .navbar-menu{width:auto!important;max-width:max-content!important;justify-content:center!important;gap:5px!important;padding:5px!important}
  .navbar-menu a{flex:0 0 auto!important;padding:9px 12px!important;justify-content:center!important}
}

@media (min-width:701px) and (max-width:1180px){
  .navbar-menu-wrap{justify-content:center!important}
  .navbar-menu{width:auto!important;max-width:100%!important;margin:0 auto!important;justify-content:center!important;gap:4px!important;padding:4px 6px!important}
  .navbar-menu a{flex:0 0 auto!important;width:auto!important;padding:8px 12px!important;justify-content:center!important}
}

@media (max-width:700px){
  .navbar-menu-wrap{display:flex!important;justify-content:center!important;overflow:hidden!important}
  .navbar-menu{width:max-content!important;max-width:100%!important;margin:0 auto!important;justify-content:flex-start!important;padding:4px 5px!important}
  .navbar-menu a{flex:0 0 auto!important;width:auto!important;padding:7px 9px!important}
}



/* NAGA v1.9.7.5 - Catálogo: filtros y categorías siempre visibles.
   Desktop/notebook: filtros fijos debajo de navbar y sidebar fijo/sticky
   debajo de filtros. En móvil se conserva el filtro dentro del flujo para
   no consumir casi toda la pantalla. */
:root{
  --naga-filter-height:82px;
  --naga-catalog-gap:12px;
}

@media (min-width:701px){
  body:has(.catalog-sticky) .catalog-sticky{
    position:fixed!important;
    top:var(--naga-navbar-height,100px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:99990!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body:has(.catalog-sticky) .catalog-sticky .filters-card{
    width:min(1055px,calc(100vw - 36px))!important;
    max-width:1055px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }

  /* La navbar ya reserva su altura con naga-navbar-spacer.
     Aquí reservamos solamente la altura real del bloque fijo de filtros. */
  body:has(.catalog-sticky) .catalog-layout{
    padding-top:calc(var(--naga-filter-height,82px) + 18px)!important;
  }

  body:has(.catalog-sticky) .catalog-layout > .sidebar-categorias{
    top:calc(
      var(--naga-navbar-height,100px) +
      var(--naga-filter-height,82px) +
      var(--naga-catalog-gap,12px)
    )!important;
    height:calc(
      100vh -
      var(--naga-navbar-height,100px) -
      var(--naga-filter-height,82px) -
      24px
    )!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
}

/* Escritorio: sidebar realmente fijo. El catalog-main ya conserva su
   margen lateral original, por lo que no se superpone. */
@media (min-width:1181px){
  body:has(.catalog-sticky) .catalog-layout > .sidebar-categorias{
    position:fixed!important;
  }
}

/* Notebook/tablet horizontal: sidebar sticky dentro de su columna,
   siempre visible mientras se recorre el catálogo. */
@media (min-width:701px) and (max-width:1180px){
  body:has(.catalog-sticky) .catalog-layout > .sidebar-categorias{
    position:sticky!important;
    align-self:flex-start!important;
  }
}

/* NAGA v1.9.7.6 - Navbar critical CSS is emitted inline by navbar.php to prevent FOUC. */


/* NAGA v1.9.7.7 - Sidebar de categorías FIJO en catálogo.
   Se mantiene inmóvil al desplazarse; sólo scrollea internamente si
   sus categorías superan la altura disponible. */
@media (min-width:701px){
  body:has(.catalog-sticky) .catalog-layout > .sidebar-categorias{
    display:block!important;
    position:fixed!important;
    left:max(18px, calc((100vw - 1400px) / 2 + 30px))!important;
    top:calc(
      var(--naga-navbar-height,100px) +
      var(--naga-filter-height,82px) +
      12px
    )!important;
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
    height:calc(
      100vh -
      var(--naga-navbar-height,100px) -
      var(--naga-filter-height,82px) -
      24px
    )!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    z-index:99980!important;
    box-sizing:border-box!important;
  }

  /* Reserva permanentemente el lugar del sidebar fijo. */
  body:has(.catalog-sticky) .catalog-layout > .catalog-main:not(.no-sidebar){
    margin-left:220px!important;
    width:calc(100% - 220px)!important;
    max-width:none!important;
    min-width:0!important;
  }
}

/* Celular: conserva el comportamiento móvil sin sidebar. */
@media (max-width:700px){
  body:has(.catalog-sticky) .catalog-layout > .sidebar-categorias{
    display:none!important;
  }
  body:has(.catalog-sticky) .catalog-layout > .catalog-main:not(.no-sidebar){
    margin-left:0!important;
    width:100%!important;
  }
}


/* NAGA v1.9.7.8 - filtro Con/Sin stock en catálogo. */
@media (min-width:1181px){
  body:has(.catalog-sticky) .filters-card .filters-grid{
    grid-template-columns:minmax(250px,1fr) 190px 155px 190px 85px!important;
    align-items:start!important;
  }
}
@media (min-width:701px) and (max-width:1180px){
  body:has(.catalog-sticky) .filters-card .filters-grid{
    grid-template-columns:minmax(220px,1fr) minmax(145px,180px) minmax(130px,155px) minmax(170px,190px) 80px!important;
    gap:7px!important;
  }
  body:has(.catalog-sticky) .filters-card .search,
  body:has(.catalog-sticky) .filters-card .btn{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:700px){
  body:has(.catalog-sticky) .filters-card .filters-grid{
    grid-template-columns:1fr!important;
  }
}