/* =====================================================
RESPONSIVE - TECNOLOGÍA ISRAEL
===================================================== */

/* =========================
TOPBAR
========================= */

@media (max-width:992px){

    .topbar-center{
        display:none;
    }

}

@media (max-width:768px){

    .topbar{
        height:auto;
        padding:8px 0;
    }

    .topbar-content{
        flex-direction:column;
        gap:8px;
    }

    .topbar-left,
    .topbar-right{
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }

}

@media (max-width:576px){

    .topbar{
        display:none;
    }

}

/* =========================
HEADER TABLET
========================= */

@media (max-width:992px){

    .logo-text{
        display:none;
    }

    .search-wrapper select{
        display:none;
    }

    .navigation{
        display:none;
    }

}

/* =========================
HEADER MÓVIL
========================= */

@media (max-width:768px){

    html,
    body{
        width:100%;
        overflow-x:hidden;
    }
    #app{
        width:100%;
        overflow-x:hidden;
    }

    /* box-sizing forzado: evita que inputs/botones se salgan del contenedor
       (causa típica de que el buscador se vea "cortado") */
    .header-main *,
    .header-main *::before,
    .header-main *::after{
        box-sizing:border-box;
    }

    .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
        margin:0 auto !important;
        box-sizing:border-box !important;
    }

    .header-main{
        padding:10px 0 12px;
        background:#fff;
        border-bottom:1px solid #E8EEF8;
        overflow:hidden;
    }

    /* primera fila: grid de 3 columnas -> menú | logo centrado | iconos */
    .header-wrapper{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        gap:10px;
        width:100%;
        height:auto;
        padding:0;
    }

    /* menú (columna 1, pegado a la izquierda) */
    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        width:36px;
        height:36px;
        font-size:24px;
        margin:0;
        grid-column:1;
    }

    /* logo (columna 2, centrado real) */
    .logo{
        grid-column:2;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .logo img{
        width:74px;
        height:auto;
        display:block;
    }
    .logo-text{
        display:none;
    }

    /* iconos (columna 3, pegados a la derecha) */
    .header-actions{
        grid-column:3;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:10px;
        margin:0;
    }
    .header-icon{
        width:32px;
        height:32px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        color:#1a1a1a;
    }
    .header-icon span{
        display:none;
    }
    /* icono activo/último (carrito) con fondo circular, como en la imagen de referencia */
    .header-icon.is-cart,
    .header-icon:last-child{
        background:#EAF1FF;
        color:#1F5EFF;
    }

    /* buscador: ocupa toda la fila siguiente, ancho completo y contenido dentro del container */
    .search-box{
        grid-column:1 / -1;
        width:100%;
        max-width:100%;
        margin-top:10px;
        order:10;
    }
    .search-wrapper{
        display:flex;
        align-items:center;
        width:100% !important;
        max-width:100%;
        height:46px;
        border:1px solid #D7DFEE;
        border-radius:14px;
        overflow:hidden;
        background:#fff;
        box-sizing:border-box;
    }
    .search-wrapper input{
        flex:1 1 auto;
        width:auto !important;
        min-width:0;
        border:none;
        outline:none;
        font-size:.92rem;
        padding:0 14px;
        background:transparent;
    }
    .search-wrapper button{
        flex:0 0 52px;
        width:52px;
        height:46px;
        border:none;
        background:#1F5EFF;
        color:#fff;
    }
    .search-wrapper select{
        display:none;
    }

}

/* =========================
CATEGORÍAS
========================= */

@media (max-width:1200px){

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

}

@media (max-width:900px){

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

}

@media (max-width:576px){

    .categories{
        padding:48px 0;
    }

    .section-header{
        display:block;
    }

    .section-link{
        margin-top:14px;
    }

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

}

/* =====================================================
CATÁLOGO - TABLET
===================================================== */

@media (max-width:991px){

    .catalog-layout{
        grid-template-columns:1fr !important;
        gap:18px;
    }

    .sidebar-card{
        position:static !important;
        width:100% !important;
        margin-bottom:14px;
        padding:16px !important;
        border-radius:18px !important;
    }

    .catalog-content{
        width:100% !important;
        max-width:100% !important;
        padding:18px !important;
        border-radius:22px !important;
    }

    .catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .catalog-item{
        width:100% !important;
        min-width:0 !important;
    }

    .catalog-item .product-card{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .catalog-toolbar{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        margin-bottom:16px;
        padding-bottom:12px;
    }

    .catalog-sort{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .catalog-sort select{
        width:100%;
    }

}

/* =====================================================
CATÁLOGO - MÓVIL
===================================================== */

@media (max-width:767px){

    .catalog-page{
        padding-top:4px !important;
    }

    .catalog-breadcrumb{
        margin-bottom:8px !important;
        font-size:.82rem;
    }

    /* =========================
       FILTROS - CUADRO MÓVIL
    ========================= */

    .sidebar-card{
        box-sizing:border-box;
        padding:18px 16px !important;
        border-radius:20px !important;
        overflow:hidden;
        margin-bottom:16px !important;
        box-shadow:0 8px 24px rgba(15,23,42,.18);
    }

    .sidebar-card h3{
        margin:0 0 16px !important;
        padding:0 0 12px !important;
        border:none !important;
        border-bottom:1px solid rgba(255,255,255,.12);
        font-size:1.05rem !important;
        font-weight:700;
        letter-spacing:.2px;
    }

    .sidebar-card .filter-group{
        padding:14px 0 !important;
        margin:0 !important;
        border-top:1px solid rgba(255,255,255,.1);
    }

    .sidebar-card .filter-group:first-of-type{
        border-top:none;
        padding-top:0 !important;
    }

    .sidebar-card .filter-group:last-child{
        padding-bottom:4px !important;
    }

    .sidebar-card .filter-group h4{
        font-size:.88rem !important;
        font-weight:600;
        margin-bottom:10px !important;
        text-transform:uppercase;
        letter-spacing:.4px;
        opacity:.85;
    }

    /* checkboxes: fila táctil completa, más fáciles de tocar */
    .sidebar-card .filter-group label{
        display:flex !important;
        align-items:center;
        gap:10px;
        font-size:.88rem !important;
        margin-bottom:10px !important;
        padding:6px 4px;
        border-radius:10px;
        cursor:pointer;
        transition:background .15s ease;
    }

    .sidebar-card .filter-group label:last-child{
        margin-bottom:0 !important;
    }

    .sidebar-card .filter-group label:active{
        background:rgba(255,255,255,.06);
    }

    .sidebar-card .filter-group input[type="checkbox"]{
        appearance:none;
        -webkit-appearance:none;
        width:19px;
        height:19px;
        flex:0 0 19px;
        border:1.5px solid rgba(255,255,255,.35);
        border-radius:5px;
        background:transparent;
        position:relative;
        cursor:pointer;
        transition:all .15s ease;
    }

    .sidebar-card .filter-group input[type="checkbox"]:checked{
        background:#1F5EFF;
        border-color:#1F5EFF;
    }

    .sidebar-card .filter-group input[type="checkbox"]:checked::after{
        content:"";
        position:absolute;
        left:5px;
        top:1px;
        width:5px;
        height:10px;
        border:solid #fff;
        border-width:0 2px 2px 0;
        transform:rotate(45deg);
    }

    /* slider de precio: pista y thumb más fáciles de usar en mobile */
    .sidebar-card input[type="range"]{
        appearance:none;
        -webkit-appearance:none;
        width:100%;
        height:5px;
        border-radius:6px;
        background:linear-gradient(to right,#1F5EFF 0%,#1F5EFF 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 100%);
        margin:10px 0 8px;
    }

    .sidebar-card input[type="range"]::-webkit-slider-thumb{
        appearance:none;
        -webkit-appearance:none;
        width:20px;
        height:20px;
        border-radius:50%;
        background:#fff;
        border:3px solid #1F5EFF;
        box-shadow:0 2px 6px rgba(0,0,0,.25);
        cursor:pointer;
    }

    .sidebar-card input[type="range"]::-moz-range-thumb{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#fff;
        border:3px solid #1F5EFF;
        box-shadow:0 2px 6px rgba(0,0,0,.25);
        cursor:pointer;
    }

    .price-range{
        display:flex;
        justify-content:space-between;
        font-size:.78rem !important;
        font-weight:600;
        opacity:.9;
    }

    /* botón aplicar filtros (opcional, requiere el markup en el PHP) */
    .sidebar-card .filter-apply-btn{
        display:block;
        width:100%;
        margin-top:16px;
        padding:12px;
        border:none;
        border-radius:12px;
        background:#1F5EFF;
        color:#fff;
        font-size:.9rem;
        font-weight:700;
        text-align:center;
        cursor:pointer;
    }

    /* =========================
       CONTENIDO / GRID
    ========================= */

    .catalog-content{
        padding:14px !important;
        border-radius:20px !important;
    }

    .catalog-toolbar{
        margin-bottom:14px !important;
        padding-bottom:12px !important;
        gap:8px !important;
    }

    .catalog-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:100% !important;
        gap:12px !important;
    }

    .catalog-item{
        width:100% !important;
        min-width:0 !important;
    }

    .catalog-item .product-card{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .catalog-grid .product-image-area{
        height:140px !important;
        padding:8px !important;
    }

    .catalog-grid .product-circle{
        width:120px !important;
        height:120px !important;
    }

    .catalog-grid .product-image-area img{
        max-width:78% !important;
        max-height:105px !important;
    }

    .catalog-grid .product-content{
        padding:10px !important;
    }

    .catalog-grid .product-content h3{
        font-size:.9rem !important;
        line-height:1.15 !important;
        min-height:38px !important;
        margin-bottom:8px !important;
    }

    .catalog-grid .product-specs{
        gap:4px !important;
    }

    .catalog-grid .product-specs li{
        font-size:.68rem !important;
        line-height:1.15 !important;
    }

    .catalog-grid .product-specs li i{
        width:14px !important;
        font-size:.72rem !important;
    }

    .catalog-grid .product-footer{
        padding:10px !important;
    }

    .catalog-grid .product-price{
        font-size:1rem !important;
    }

    .catalog-grid .product-btn{
        width:28px !important;
        height:28px !important;
        font-size:.78rem !important;
    }

    .catalog-grid .product-actions{
        gap:6px !important;
    }

    img{
        max-width:100%;
        height:auto;
    }

}


@media(max-width:768px){

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

.footer-item{
border-right:none;
padding-right:0;
}

}

@media(max-width:480px){

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

}

@media(max-width:768px){

.product-detail-price strong{

font-size:36px;

}

.product-detail-actions{

grid-template-columns:1fr;

}

.product-detail-specs{

grid-template-columns:1fr;

}

.product-detail-tabs{

overflow-x:auto;

padding:0 8px;

}

.product-tab{

flex:0 0 auto;

}

}