/* ================= PAGINA CATEGORIA ================= */

.toolx-category-page{
padding:40px 0;
background:#f6f8fb;
}


/* ================= SIDEBAR ================= */

.toolx-sidebar{
background:white;
padding:25px;
border-right:1px solid #e5e7eb;
}

.sidebar-title{
font-weight:700;
margin-bottom:20px;
color:var(--toolx-blue);
}

.brand-filter{
list-style:none;
padding:0;
margin:0;
}

.brand-filter li{
margin-bottom:12px;
font-size:14px;
cursor:pointer;
display:flex;
gap:10px;
align-items:center;
}

.brand-filter input{
cursor:pointer;
}


/* ================= GRID PRODUCTOS ================= */

.products-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.product-brand {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0d6efd;
  color: white;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ================= CARD PRODUCTO ================= */

.product-card{

background:white;
padding:18px;
border-radius:8px;
position:relative;
transition:.25s;
border:1px solid #eef2f7;
width: 100%;
height: 328px;
}

.product-card:hover{

transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.12);

}


/* ================= IMAGEN ================= */

.product-img{

height:160px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px;

}

.product-img img{

max-height:150px;
max-width:100%;
object-fit:contain;

}


/* ================= TITULO ================= */

.product-title{

font-size:14px;
font-weight:600;
margin-bottom:14px;
color:#1f2937;
min-height:40px;

}


/* ================= BOTON CARRITO ================= */

.add-cart{

width:100%;
background:var(--toolx-blue);
color:white;
border:none;
padding:9px;
font-size:13px;
font-weight:600;
border-radius:5px;
transition:.2s;

}

.add-cart:hover{

background:#0b5ed7;

}


/* ================= BOTON FAVORITO ================= */

.wishlist{

position:absolute;
top:12px;
right:12px;
border:none;
background:white;
width:34px;
height:34px;
border-radius:50%;
box-shadow:0 3px 8px rgba(0,0,0,.15);
cursor:pointer;

}

.wishlist i{

color:#9ca3af;
font-size:16px;

}

.wishlist:hover i{

color:#ef4444;

}

/* ================= TOOLBAR CATEGORIA ================= */

.category-toolbar{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
gap:20px;

}

/* IZQUIERDA */

.toolbar-left{

display:flex;
align-items:center;
gap:15px;

}

.category-title{

font-size:20px;
font-weight:700;
color:var(--toolx-blue);
margin:0;

}

.product-count{

font-size:13px;
color:#6b7280;

}


/* DERECHA */

.toolbar-right{

display:flex;
align-items:center;
gap:15px;

}


/* BUSCADOR */

.category-search{

position:relative;

}

.category-search input{

border:1px solid #d1d5db;
padding:8px 35px 8px 12px;
border-radius:6px;
font-size:14px;
width:230px;

}

.category-search i{

position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
color:#6b7280;

}


/* ORDENAR */

.sort-products{

border:1px solid #d1d5db;
padding:8px 10px;
border-radius:6px;
font-size:14px;
cursor:pointer;

}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

.products-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:900px){

.products-grid{
grid-template-columns:repeat(2,1fr);
}

.toolx-sidebar{
display:none;
}

}

@media(max-width:500px){

.products-grid{
grid-template-columns:1fr;
}

}

/* ================= Menu Movil ============ */

/* ================= BOTÓN HAMBURGUESA FLOAT ================= */

.fab-menu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--toolx-blue), #0a58ca);
    color: #fff;
    border: none;
    font-size: 1.5rem;

    display: none;
    align-items: center;
    justify-content: center;

    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 9999;

    transition: all .3s ease;
}

.fab-menu:hover{
    transform: scale(1.08);
}

/* SOLO MOBILE */
@media(max-width:991px){
    .fab-menu{
        display:flex;
    }

    .categories-bar{
        display:none; /* ocultamos barra horizontal */
    }
}

/* ================= MENÚ FULLSCREEN ================= */

.mobile-menu {
    position: fixed;
    inset: 0;

    background: linear-gradient(180deg,#081726 0%,#0b1e33 100%);

    z-index: 9998;

    transform: translateY(100%);
    transition: transform .4s ease;

    overflow-y: auto;
    padding: 80px 25px;
}

/* ACTIVO */
.mobile-menu.active{
    transform: translateY(0);
}

/* LISTA */
.mobile-menu ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* ITEM PRINCIPAL */
.mobile-menu > ul > li{
    color:#e2e8f0;
    font-size:1.1rem;
    font-weight:600;
    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    display:flex;
    align-items:center;
    justify-content:space-between;

    cursor:pointer;
}

/* ICONO */
.mobile-menu li i{
    margin-right:10px;
    color:var(--toolx-blue-light);
}

/* SUBMENU */
.mobile-menu .submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

/* ABIERTO */
.mobile-menu li.open > .submenu{
    max-height: 500px; /* suficiente para que se vea todo */
}

/* SUBITEM */
.mobile-menu .submenu li{
    padding:10px 15px;
    font-size:.95rem;
    color:#cbd5e1;
}

/* HOVER */
.mobile-menu .submenu li:hover{
    color:#fff;
    padding-left:20px;
}

/* BOTÓN CERRAR */
.mobile-close{
    position:absolute;
    top:20px;
    right:20px;
    font-size:1.8rem;
    color:#fff;
    cursor:pointer;
}

.menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    cursor:pointer;
}

.menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    cursor:pointer;
}

.mobile-menu li i.bi-chevron-down{
    transition: transform .3s ease;
}

.mobile-menu li.open i.bi-chevron-down{
    transform: rotate(180deg);
}

html, body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.products-grid {
    width: 100%;
}

@media(max-width:600px){
    .category-search input{
        width:100%;
    }
}