﻿/* ==========================================================
   GESTGO HOME - OFERTAS COMPACTAS FINAL
   Solo afecta la sección "Ofertas destacadas"
   ========================================================== */

.offers-section{
    padding-top:42px !important;
    padding-bottom:46px !important;
}

.offers-section .section-heading{
    margin-bottom:20px !important;
}


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

.offers-section .product-grid{
    display:grid !important;
    grid-template-columns:
        repeat(5, minmax(0,1fr)) !important;

    gap:14px !important;
}


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

.offers-section .product-card{
    min-width:0 !important;

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

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

    overflow:hidden !important;

    border-radius:12px !important;
}


/* ==========================================================
   IMAGEN
   Antes rondaba 210px.
   Ahora mucho más compacta.
   ========================================================== */

.offers-section .product-image{
    width:100% !important;

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

    padding:8px !important;

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

    overflow:hidden !important;
}


.offers-section .product-image img{
    width:100% !important;
    height:100% !important;

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

    object-fit:contain !important;

    display:block !important;
}


/* placeholder sin imagen */

.offers-section .image-placeholder{
    font-size:36px !important;
}


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

.offers-section .offer-badge{
    top:9px !important;
    left:9px !important;

    padding:5px 8px !important;

    font-size:10px !important;
}


/* ==========================================================
   CUERPO
   ========================================================== */

.offers-section .product-body{
    flex:1 1 auto !important;

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

    padding:12px !important;
}


.offers-section .product-body small{
    margin:0 0 5px !important;

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


.offers-section .product-body h3{
    min-height:38px !important;

    margin:0 0 7px !important;

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


.offers-section .product-body h3 a{
    font-size:15px !important;
    line-height:1.25 !important;
}


.offers-section .sku{
    margin:0 0 8px !important;

    font-size:10px !important;
}


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

.offers-section .price{
    margin:0 0 5px !important;

    font-size:23px !important;
    line-height:1.05 !important;
}


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

.offers-section .stock{
    margin:0 0 10px !important;

    font-size:10px !important;
}


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

.offers-section .product-button{
    width:100% !important;

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

    margin-top:auto !important;

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

    padding:0 8px !important;

    font-size:11px !important;
    line-height:1 !important;

    border-radius:7px !important;
}


/* ==========================================================
   PANTALLA MEDIANA
   ========================================================== */

@media(max-width:1199px){

    .offers-section .product-grid{
        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;
    }

}


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

@media(max-width:899px){

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

}


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

@media(max-width:560px){

    .offers-section .product-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:9px !important;
    }

    .offers-section .product-image{
        height:105px !important;
        min-height:105px !important;
        max-height:105px !important;
    }

    .offers-section .product-body{
        padding:9px !important;
    }

    .offers-section .product-body h3,
    .offers-section .product-body h3 a{
        font-size:13px !important;
    }

    .offers-section .price{
        font-size:19px !important;
    }

    .offers-section .product-button{
        min-height:34px !important;
        height:34px !important;

        font-size:10px !important;
    }

}

@media(max-width:380px){

    .offers-section .product-grid{
        grid-template-columns:
            1fr !important;
    }

}

/* ==========================================================
   GESTGO HOME - COMPACTO EXTRA FINAL
   ========================================================== */

.offers-section{
    padding-top:32px !important;
    padding-bottom:34px !important;
}

.offers-section .section-heading{
    margin-bottom:15px !important;
}

.offers-section .product-grid{
    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    gap:11px !important;
}

.offers-section .product-card{
    min-height:0 !important;
    height:auto !important;
}

.offers-section .product-image{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;

    padding:6px !important;
}

.offers-section .product-image img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
}

.offers-section .offer-badge{
    top:7px !important;
    left:7px !important;

    padding:4px 7px !important;

    font-size:9px !important;
}

.offers-section .product-body{
    padding:9px 10px 10px !important;
}

.offers-section .product-body small{
    margin-bottom:3px !important;
    font-size:9px !important;
}

.offers-section .product-body h3{
    min-height:33px !important;

    margin:0 0 5px !important;

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

.offers-section .product-body h3 a{
    font-size:14px !important;
    line-height:1.18 !important;
}

.offers-section .sku{
    margin-bottom:5px !important;
    font-size:9px !important;
}

.offers-section .price{
    margin-bottom:3px !important;

    font-size:22px !important;
    line-height:1 !important;
}

.offers-section .stock{
    margin-bottom:7px !important;
    font-size:9px !important;
}

.offers-section .product-button{
    min-height:32px !important;
    height:32px !important;

    padding:0 6px !important;

    font-size:10px !important;
    border-radius:6px !important;
}

@media(max-width:1199px){

    .offers-section .product-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;
    }

}

@media(max-width:899px){

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

}

@media(max-width:650px){

    .offers-section .product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .offers-section .product-image{
        height:90px !important;
        min-height:90px !important;
        max-height:90px !important;
    }

}

