﻿/* ==========================================================
   GESTGO - CATALOGO PUBLICO
   ========================================================== */

/*
 * Tamaño general del catálogo
 */
.gestgo-public-catalog,
.catalogPage,
.catalog-page,
.catalogo-page,
.catalogContent,
.catalog-content{
    font-size:16px !important;
}


/*
 * Título principal
 */
.catalogPage h1,
.catalog-page h1,
.catalogo-page h1,
.catalogHero h1,
.catalog-hero h1{
    font-size:42px !important;
    line-height:1.08 !important;
}


/*
 * Texto cantidad de productos
 */
.catalogPage .subtitle,
.catalog-page .subtitle,
.catalogCount,
.catalog-count{
    font-size:17px !important;
}


/*
 * Categorías laterales
 */
.catalogSidebar,
.catalog-sidebar{
    font-size:15px !important;
}

.catalogSidebar a,
.catalog-sidebar a{
    min-height:43px !important;
    display:flex !important;
    align-items:center !important;
    font-size:14px !important;
    font-weight:700 !important;
}


/*
 * Buscador
 */
.catalogPage input[type="search"],
.catalog-page input[type="search"],
.catalogSearch input,
.catalog-search input{
    height:50px !important;
    font-size:16px !important;
}

.catalogPage button,
.catalog-page button,
.catalogSearch button,
.catalog-search button{
    font-size:15px !important;
}


/*
 * TARJETAS
 */
.product-card,
.productCard,
.catalog-card,
.catalogCard{
    font-size:15px !important;
}


/*
 * Categoría / SKU
 */
.product-card small,
.productCard small,
.catalog-card small,
.catalogCard small{
    font-size:12px !important;
}


/*
 * Nombre del producto
 */
.product-card h2,
.product-card h3,
.productCard h2,
.productCard h3,
.catalog-card h2,
.catalog-card h3,
.catalogCard h2,
.catalogCard h3,
.productName,
.product-name{
    font-size:19px !important;
    line-height:1.25 !important;
}


/*
 * Marca
 */
.productBrand,
.product-brand,
.product-card .brand,
.productCard .brand{
    font-size:15px !important;
}

.productBrand strong,
.product-brand strong,
.product-card .brand strong,
.productCard .brand strong{
    font-size:22px !important;
}


/*
 * Compatibilidad / descripción corta
 */
.productCompatibility,
.product-compatibility,
.compatibilityBox,
.compatibility-box{
    min-height:57px !important;
    font-size:14px !important;
    line-height:1.4 !important;
}


/*
 * ESTADO DE STOCK PUBLICO
 *
 * Solo mostramos estado.
 */
.gestgoPublicStock{
    min-height:42px;

    display:flex;
    align-items:center;

    padding:10px 0;

    border-top:1px solid #e7edf2;
    border-bottom:1px solid #e7edf2;

    font-size:14px !important;
    font-weight:850;
}

.gestgoPublicStock.available{
    color:#087f3f;
}

.gestgoPublicStock.low{
    color:#c67800;
}

.gestgoPublicStock.out{
    color:#c52b43;
}

.gestgoPublicStock .stockDot{
    width:7px;
    height:7px;

    margin-right:7px;

    border-radius:50%;

    background:currentColor;
}


/*
 * Ocultar cualquier cantidad exacta que hubiera quedado
 * en el viejo diseño público.
 */
.gestgo-public-stock-number,
.public-stock-number,
.stockExact,
.stock-exact,
.stockQuantityPublic,
.stock-quantity-public{
    display:none !important;
}


/*
 * PRECIO
 */
.productPrice,
.product-price,
.product-card .price,
.productCard .price{
    font-size:29px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
}


/*
 * Unidad / por metro
 */
.saleUnit,
.sale-unit,
.priceUnit,
.price-unit{
    font-size:14px !important;
}


/*
 * Cantidades
 */
.quantityLabel,
.quantity-label,
.metersLabel,
.meters-label{
    font-size:14px !important;
    font-weight:850 !important;
}

.quantity-control,
.quantityControl{
    min-height:48px !important;
}

.quantity-control button,
.quantityControl button{
    min-width:47px !important;
    min-height:47px !important;

    font-size:23px !important;
}

.quantity-control input,
.quantityControl input{
    min-height:47px !important;

    font-size:17px !important;
    font-weight:800 !important;
}


/*
 * BOTON AGREGAR
 */
.add-cart,
.addCart,
.add-to-cart,
.addToCart,
.product-card button[type="submit"],
.productCard button[type="submit"]{
    min-height:48px !important;

    font-size:16px !important;
    font-weight:900 !important;
}


/*
 * Oferta
 */
.offerBadge,
.offer-badge,
.badgeOffer,
.badge-offer{
    font-size:11px !important;
    font-weight:900 !important;
}


/*
 * Responsive
 */
@media(max-width:700px){

    .catalogPage h1,
    .catalog-page h1,
    .catalogo-page h1{
        font-size:32px !important;
    }

    .product-card h2,
    .product-card h3,
    .productCard h2,
    .productCard h3{
        font-size:18px !important;
    }

    .productPrice,
    .product-price{
        font-size:26px !important;
    }
}

/* ==========================================================
   GESTGO - CATALOGO COMPRA FINAL
   Corrige selector + boton Agregar cortado
   ========================================================== */

.productCard,
.product-card{
    min-width:0 !important;
    overflow:visible !important;
}

.productCard form,
.product-card form{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
}


/* FILA DE COMPRA */

.productCard .buyRow,
.product-card .buyRow,
.productCard .buy-row,
.product-card .buy-row{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(150px,1fr) minmax(105px,125px) !important;
    align-items:end !important;
    gap:10px !important;
    overflow:visible !important;
}


/* CONTENEDORES CANTIDAD */

.productCard .quantityBox,
.productCard .quantityControl,
.productCard .qtyControl,
.productCard .qty-control,
.productCard .quantity-control,
.product-card .quantityBox,
.product-card .quantityControl,
.product-card .qtyControl,
.product-card .qty-control,
.product-card .quantity-control{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
}


/* SELECTOR - / CANTIDAD / + */

.productCard .gestgo-quantity,
.productCard .quantitySelector,
.productCard .quantity-selector,
.productCard .qtySelector,
.productCard .qty-selector,
.product-card .gestgo-quantity,
.product-card .quantitySelector,
.product-card .quantity-selector,
.product-card .qtySelector,
.product-card .qty-selector{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:46px minmax(52px,1fr) 46px !important;
    overflow:hidden !important;
    border:1px solid #cbdbe7 !important;
    border-radius:10px !important;
    background:white !important;
}


/* BOTONES + - */

.productCard .gestgo-qty-minus,
.productCard .gestgo-qty-plus,
.productCard .qty-minus,
.productCard .qty-plus,
.product-card .gestgo-qty-minus,
.product-card .gestgo-qty-plus,
.product-card .qty-minus,
.product-card .qty-plus{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:#edf4f9 !important;
    color:#087bf0 !important;
    font-size:23px !important;
    font-weight:900 !important;
}


/* INPUT CANTIDAD */

.productCard input[type="number"],
.product-card input[type="number"]{
    min-width:0 !important;
    width:100% !important;
    height:46px !important;
    padding:0 5px !important;
    border:0 !important;
    outline:none !important;
    background:white !important;
    text-align:center !important;
    color:#062f4d !important;
    font-size:17px !important;
    font-weight:850 !important;
}


/* BOTON AGREGAR */

.productCard .buyRow button[type="submit"],
.product-card .buyRow button[type="submit"],
.productCard .buy-row button[type="submit"],
.product-card .buy-row button[type="submit"],
.productCard form button[type="submit"],
.product-card form button[type="submit"]{
    width:100% !important;
    min-width:105px !important;
    max-width:125px !important;
    height:46px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    border:0 !important;
    border-radius:9px !important;
    background:#087df1 !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:850 !important;
    line-height:1 !important;
    text-overflow:clip !important;
}


/* EVITAR QUE ELEMENTOS TAPEN BOTON */

.productCard .buyRow > *,
.product-card .buyRow > *,
.productCard .buy-row > *,
.product-card .buy-row > *{
    min-width:0 !important;
    max-width:100% !important;
}


/* TEXTOS METROS */

.productCard .meterHint,
.productCard .metersHint,
.productCard .quantityHint,
.product-card .meterHint,
.product-card .metersHint,
.product-card .quantityHint{
    width:100% !important;
    max-width:100% !important;
    margin-bottom:7px !important;
    white-space:normal !important;
}


/* ==========================================================
   TABLET - EVITAR BOTON CORTADO
   ========================================================== */

@media(max-width:1100px){

    .productCard .buyRow,
    .product-card .buyRow,
    .productCard .buy-row,
    .product-card .buy-row{
        grid-template-columns:minmax(130px,1fr) 105px !important;
        gap:8px !important;
    }

    .productCard .buyRow button[type="submit"],
    .product-card .buyRow button[type="submit"],
    .productCard form button[type="submit"],
    .product-card form button[type="submit"]{
        min-width:105px !important;
        max-width:105px !important;
        font-size:12px !important;
        padding:0 6px !important;
    }
}


/* ==========================================================
   CELULAR
   CANTIDAD ARRIBA - AGREGAR ABAJO
   ========================================================== */

@media(max-width:650px){

    .productCard .buyRow,
    .product-card .buyRow,
    .productCard .buy-row,
    .product-card .buy-row{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .productCard .buyRow button[type="submit"],
    .product-card .buyRow button[type="submit"],
    .productCard .buy-row button[type="submit"],
    .product-card .buy-row button[type="submit"],
    .productCard form button[type="submit"],
    .product-card form button[type="submit"]{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        height:46px !important;
        font-size:14px !important;
    }
}


/* ==========================================================
   GESTGO - CANTIDAD DEFINITIVA V2
   selector:  - | cantidad | +
   boton Agregar separado
   ========================================================== */

/*
   La tarjeta NUNCA puede esconder contenido.
*/
.productCard,
.product-card{
    overflow:visible !important;
    min-width:0 !important;
}


/*
   Fila de compra:
   selector completo a la izquierda
   Agregar a la derecha.
*/
.productCard .buyRow,
.product-card .buyRow,
.productCard .buy-row,
.product-card .buy-row{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:10px !important;
    overflow:visible !important;
}


/*
   CUALQUIER contenedor que tenga los controles
   de cantidad mantiene ancho suficiente para 3 piezas.
*/
.productCard .quantityBox,
.productCard .quantityControl,
.productCard .quantity-control,
.productCard .qtyControl,
.productCard .qty-control,
.productCard .gestgo-qty,
.productCard .gestgo-quantity,
.productCard .quantitySelector,
.productCard .quantity-selector,

.product-card .quantityBox,
.product-card .quantityControl,
.product-card .quantity-control,
.product-card .qtyControl,
.product-card .qty-control,
.product-card .gestgo-qty,
.product-card .gestgo-quantity,
.product-card .quantitySelector,
.product-card .quantity-selector{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:172px !important;
    max-width:none !important;

    height:48px !important;

    display:grid !important;
    grid-template-columns:46px minmax(65px,1fr) 46px !important;

    padding:0 !important;
    margin:0 !important;

    border:1px solid #c7d9e6 !important;
    border-radius:10px !important;

    background:#fff !important;

    overflow:hidden !important;
}


/*
   TODOS los botones NO submit dentro del área de compra
   son + o -.
*/
.productCard .buyRow button[type="button"],
.product-card .buyRow button[type="button"],
.productCard .buy-row button[type="button"],
.product-card .buy-row button[type="button"]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

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

    padding:0 !important;
    margin:0 !important;

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

    border:0 !important;
    border-radius:0 !important;

    background:#edf4f9 !important;
    color:#087cf0 !important;

    font-size:22px !important;
    font-weight:900 !important;

    line-height:46px !important;

    position:static !important;
    transform:none !important;

    overflow:visible !important;
}


/*
   Si el proyecto usa estas clases específicas,
   obligamos igualmente a mostrarlas.
*/
.productCard .gestgo-qty-plus,
.productCard .gestgo-qty-minus,
.productCard .qty-plus,
.productCard .qty-minus,
.productCard .plus,
.productCard .minus,

.product-card .gestgo-qty-plus,
.product-card .gestgo-qty-minus,
.product-card .qty-plus,
.product-card .qty-minus,
.product-card .plus,
.product-card .minus{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;

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

    position:static !important;
    right:auto !important;
    left:auto !important;

    overflow:visible !important;

    z-index:2 !important;
}


/*
   Cantidad central.
*/
.productCard .buyRow input[type="number"],
.product-card .buyRow input[type="number"],
.productCard .buy-row input[type="number"],
.product-card .buy-row input[type="number"]{
    display:block !important;

    width:100% !important;
    min-width:60px !important;
    max-width:none !important;

    height:46px !important;

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

    border:0 !important;
    border-radius:0 !important;

    background:#fff !important;

    text-align:center !important;

    color:#062f4d !important;

    font-size:17px !important;
    font-weight:900 !important;
}


/*
   Botón agregar: ancho fijo razonable.
*/
.productCard .buyRow button[type="submit"],
.product-card .buyRow button[type="submit"],
.productCard .buy-row button[type="submit"],
.product-card .buy-row button[type="submit"]{
    flex:0 0 122px !important;

    display:flex !important;

    width:122px !important;
    min-width:122px !important;
    max-width:122px !important;

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

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

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

    white-space:nowrap !important;

    overflow:visible !important;

    border:0 !important;
    border-radius:10px !important;

    background:#087df1 !important;
    color:#fff !important;

    font-size:13px !important;
    font-weight:900 !important;

    position:static !important;
}


/*
   Evitar que labels, textos o wrappers
   achiquen el selector.
*/
.productCard .buyRow > *,
.product-card .buyRow > *,
.productCard .buy-row > *,
.product-card .buy-row > *{
    box-sizing:border-box !important;
}


/*
   Tarjetas angostas:
   selector arriba y agregar abajo.
*/
@media(max-width:900px){

    .productCard .buyRow,
    .product-card .buyRow,
    .productCard .buy-row,
    .product-card .buy-row{
        flex-wrap:wrap !important;
    }

    .productCard .buyRow button[type="submit"],
    .product-card .buyRow button[type="submit"],
    .productCard .buy-row button[type="submit"],
    .product-card .buy-row button[type="submit"]{
        flex:1 1 100% !important;

        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
    }
}


/*
   Celular.
*/
@media(max-width:600px){

    .productCard .quantityBox,
    .productCard .quantityControl,
    .productCard .quantity-control,
    .productCard .qtyControl,
    .productCard .qty-control,
    .productCard .gestgo-qty,
    .productCard .gestgo-quantity,
    .productCard .quantitySelector,
    .productCard .quantity-selector,

    .product-card .quantityBox,
    .product-card .quantityControl,
    .product-card .quantity-control,
    .product-card .qtyControl,
    .product-card .qty-control,
    .product-card .gestgo-qty,
    .product-card .gestgo-quantity,
    .product-card .quantitySelector,
    .product-card .quantity-selector{
        width:100% !important;
        min-width:100% !important;
    }
}


/* ==========================================================
   FIN CANTIDAD DEFINITIVA V2
   ========================================================== */

