/* ==========================================================
   GESTGO - CATALOGO COMPACTO FINAL
   SOLO /Catalogo
   NO TOCA HOME
   NO TOCA CARRITO
   ========================================================== */


/* ==========================================================
   GRILLA
   ========================================================== */

.catalogMain .productGrid{
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;

    align-items:start !important;
}


/* ==========================================================
   TARJETA
   ========================================================== */

.catalogMain .productCard{
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    overflow:hidden !important;

    border-radius:12px !important;
}


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

.catalogMain .productCard .productImage{
    height:145px !important;
    min-height:145px !important;
    max-height:145px !important;

    padding:10px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
}


.catalogMain .productCard .productImage img{
    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
}


/* ICONO CUANDO NO HAY FOTO */

.catalogMain .productCard .genericProduct{
    min-height:0 !important;
    height:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.catalogMain .productCard .genericProduct span{
    font-size:44px !important;
}


/* ==========================================================
   OFERTA
   ========================================================== */

.catalogMain .productCard .offerBadge{
    top:9px !important;
    left:9px !important;

    padding:5px 8px !important;

    font-size:10px !important;
}


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

.catalogMain .productCard .productContent{
    padding:12px !important;

    display:flex !important;
    flex-direction:column !important;

    min-height:0 !important;
}


/* CATEGORIA + SKU */

.catalogMain .productCard .productMeta{
    margin-bottom:7px !important;

    gap:7px !important;
}

.catalogMain .productCard .productMeta span{
    font-size:9px !important;
    line-height:1.2 !important;
}


/* NOMBRE */

.catalogMain .productCard h2{
    margin:0 0 8px !important;

    min-height:38px !important;

    font-size:16px !important;
    line-height:1.18 !important;
}


/* MARCA */

.catalogMain .productCard .brand{
    margin:0 0 7px !important;

    font-size:12px !important;
    line-height:1.2 !important;
}

.catalogMain .productCard .brand strong{
    font-size:17px !important;
}


/* COMPATIBILIDAD */

.catalogMain .productCard .compatibility{
    min-height:42px !important;

    margin:0 0 8px !important;
    padding:8px 9px !important;

    display:flex !important;
    align-items:center !important;

    font-size:11px !important;
    line-height:1.25 !important;
}


/* ==========================================================
   STOCK
   ========================================================== */

.catalogMain .productCard .stockLine{
    margin:0 0 7px !important;
    padding:6px 0 !important;

    font-size:11px !important;
}

.catalogMain .productCard .stockLine small{
    font-size:10px !important;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.catalogMain .productCard .productPrice{
    margin:0 0 7px !important;
}

.catalogMain .productCard .productPrice strong{
    font-size:25px !important;
    line-height:1 !important;
}

.catalogMain .productCard .productPrice span{
    margin-top:4px !important;

    font-size:10px !important;
}


/* ==========================================================
   INFORMACION METROS
   ========================================================== */

.catalogMain .productCard .meterInfo{
    margin:0 0 8px !important;
    padding:6px 8px !important;

    font-size:9px !important;
    line-height:1.25 !important;
}


/* ==========================================================
   FORMULARIO
   ========================================================== */

.catalogMain .productCard .addCartForm{
    width:100% !important;

    margin-top:0 !important;
}


/* SELECT DE VARIANTES */

.catalogMain .productCard .addCartForm select{
    min-height:36px !important;

    margin-bottom:7px !important;
    padding:6px 8px !important;

    font-size:11px !important;
}


/* ==========================================================
   CANTIDAD + AGREGAR
   MANTENER FUNCIONAMIENTO ACTUAL
   ========================================================== */

.catalogMain .productCard .buyRow{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;

    gap:7px !important;

    margin:0 !important;
}


.catalogMain .productCard .quantityBox{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
}


.catalogMain .productCard .quantityBox label{
    display:block !important;

    height:auto !important;

    margin:0 0 3px !important;

    font-size:10px !important;
    line-height:1.1 !important;
}


.catalogMain .productCard .gestgo-qty{
    width:100% !important;
    max-width:100% !important;

    height:40px !important;

    grid-template-columns:
        40px minmax(0,1fr) 40px !important;
}


.catalogMain .productCard .gestgo-qty-minus,
.catalogMain .productCard .gestgo-qty-plus{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

    font-size:20px !important;
}


.catalogMain .productCard .gestgo-qty-input{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:38px !important;

    font-size:15px !important;
    line-height:38px !important;
}


/* AGREGAR */

.catalogMain .productCard .buyRow > button[type="submit"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:39px !important;
    min-height:39px !important;

    margin:0 !important;
    padding:0 8px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:12px !important;

    border-radius:8px !important;
}


/* ==========================================================
   TABLET GRANDE
   ========================================================== */

@media(max-width:1150px){

    .catalogMain .productGrid{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}


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

@media(max-width:850px){

    .catalogMain{
        grid-template-columns:1fr !important;
    }

    .catalogMain .productGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media(max-width:550px){

    .catalogMain .productGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .catalogMain .productCard .productImage{
        height:105px !important;
        min-height:105px !important;
        max-height:105px !important;
    }

    .catalogMain .productCard .productContent{
        padding:9px !important;
    }

    .catalogMain .productCard h2{
        font-size:13px !important;
        min-height:32px !important;
    }

    .catalogMain .productCard .brand strong{
        font-size:14px !important;
    }

    .catalogMain .productCard .productPrice strong{
        font-size:20px !important;
    }

}


@media(max-width:390px){

    .catalogMain .productGrid{
        grid-template-columns:1fr !important;
    }

}