/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

body#checkout section.checkout-step .address {
    font-size: 14px !important;
}

/*AJUSTE DEL CARRITO EN DESKTOP*/
div#ps-shoppingcart-wrapper {
    display: flex !important;
    align-items: center !important;
}

/*MOSTRAMOS EL MOSTRAR TODO DEL SEARCH*/
.iqitsearch-show-all {
    text-align: center;
    padding: 10px 0;
    background: #f8f8f8;
    border-top: 1px solid #eaeaea;
}

.iqitsearch-show-all a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
}

.iqitsearch-show-all a:hover {
    color: #000;
    text-decoration: underline;
}

html {
    scroll-behavior: smooth !important;
}

/*Editamos inicia sesion*/
#authentication div#content {
    border-radius: 10px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.09);
}

@media (min-width: 1024px) {
    #authentication #content {
        width: 800px;
    }
}

#authentication input#field-email {
    border-radius: 5px;
}

#authentication input#field-password {
    border-radius: 5px;
}

#authentication form#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#authentication .form-group.row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    #authentication .form-group.row {
        width: 800px;
    }
}

#authentication label.col-md-3.form-control-label.required {
    max-width: max-content;
}

button#submit-login {
    width: 250px;
    border-radius: 5px;
    margin: 20px 0px;
}

#authentication hr {
    display: none;
}

#authentication .no-account {
    margin: 25px 0px;
}

/*Editamos crear cuenta*/
form#customer-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#registration .form-group.row {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    #registration .form-group.row {
        width: 800px;
    }
}

#registration div#content {
    border-radius: 10px;
    display: flex;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.09);
    flex-direction: column;
}

@media (min-width: 1024px) {
    #registration div#content {
        width: 800px;
    }
}

/* Ojo con el alcance: `#registration p` agarraba TODOS los <p> de la pagina,
   no solo los del formulario. En /registro hay 10 <p>: 3 en el formulario y el
   resto en el header y el footer, asi que centraba el bloque de Contacto del
   footer y le sumaba 20px de alto a la barra roja de arriba (36 -> 56px).
   Se acota al recuadro del formulario, como las reglas de aca arriba. */
#registration div#content p {
    text-align: center;
    padding: 10px 0px;
}

button.btn.btn-primary.form-control-submit.float-xs-right {
    width: 250px;
    border-radius: 5px;
    margin: 20px 0px;
}

h1.h1.page-title {
    text-align: center;
    border: unset !important;
}

form#customer-form .form-control {
    border-radius: 5px !important;
}

#registration label.col-md-3.form-control-label.required {
    max-width: max-content;
}

.password-requirements.text-muted p {
    text-align: left !important;
}

/*Editamos estilos Checkout*/
#delivery-address > div > section > div:nth-child(3) {
    display: none !important;
}

.cart-summary-line.cart-total {
    font-size: 1rem !important;
}

#blockcart-content .cart-totals {
    font-size: 1rem;
    font-weight: 700;
}

#checkout textarea#delivery_message {
    width: 100%;
}

#checkout p.form-informations {
    text-align: center;
}

h1.step-title.js-step-title.h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
}

section#checkout-personal-information-step {
    border-radius: 15px;
    padding: 20px !important;
    margin: 20px 0px;
}

#checkout label.col-md-3.form-control-label {
    text-align: center;
}

#checkout .col-md-3.form-control-comment {
    text-align: center;
}

section#checkout-addresses-step {
    border-radius: 15px;
    margin: 20px 0px;
}

section#checkout-delivery-step {
    border-radius: 15px;
    margin: 20px 0px;
    padding: 20px !important;
}

section#checkout-payment-step {
    border-radius: 15px;
    margin: 20px 0px;
    padding: 20px !important;
}

#checkout h1.step-title.js-step-title.h3 {
    border: unset !important;
    padding-top: unset !important;
    padding-bottom: unset !important;
}

#delivery-address label.col-md-3.form-control-label.required {
    display: block;
}

#invoice-address label.col-md-3.form-control-label.required {
    display: block;
}

#checkout .row.delivery-option.js-delivery-option {
    background: unset !important;
    border: unset !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

button.btn.btn-primary.center-block {
    border-radius: 50px;
    font-size: 16px !important;
    padding: 10px 30px;
    transition: 0.5s;
}

a.btn.btn-secondary.btn-block {
    border-radius: 50px;
    font-size: 16px !important;
    padding: 10px 30px;
    transition: 0.5s;
}

a.btn.btn-secondary.btn-block:hover {
    opacity: 0.8;
    transition: 0.5s;
}

button.btn.btn-primary.center-block:hover {
    opacity: 0.8;
    transition: 0.5s;
}

section#js-checkout-summary {
    border-radius: 15px;
    margin-top: 20px;
}

#checkout .form-control {
    border-radius: 5px;
}

#checkout label.col-md-3.form-control-label {
    max-width: max-content;
}

footer.form-footer.clearfix {
    display: flex;
    justify-content: center;
}

#checkout .col-md-9.col-md-offset-3 {
    text-align: center;
}

body#checkout section.checkout-step .address-item.selected {
    background: #fff;
    border: #e5e5e5 2px solid;
    border-radius: 15px;
}

#checkout #content-wrapper a {
    color: #2a2a2a;
    font-size: 14px;
    font-weight: 400;
}

.custom-radio input[type=radio]:checked+span {
    background-color: #cdcdcd;
}

#checkout a.nav-link.active {
    background: #e9e9e9;
    color: black !important;
    padding: 7px 15px;
    border-radius: 7px;
    margin: 0px 10px;
}

.password-requirements {
    font-size: 12px !important;
    border: solid 1px #e7e7e7;
    padding: 10px;
    border-radius: 10px;
    background: #f1f1f1;
}

.password-requirements p {
    color: black;
    font-size: 14px;
}

/* Formularios de cuenta y checkout: el titulo va centrado ARRIBA del input
   (reglas de aca arriba), pero el label de warehouse trae aire solo arriba
   (esta pensado para ir al costado) y quedaba pegado al campo. */
#authentication .form-group > label.form-control-label,
#registration .form-group > label.form-control-label,
#checkout .form-group > label.form-control-label,
#identity .form-group > label.form-control-label {
    margin-bottom: 8px;
}

/*Editamos datos del cliente*/
#identity .form-group.row {
    display: flex;
    flex-direction: column;
    align-content: center;
}

/*Iniciar sesion checkout*/
#checkout div#content {
    border-radius: 10px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.09);
}

@media (min-width: 1024px) {
    #checkout div#content {
        width: 800px;
    }
}

#checkout input#field-email {
    border-radius: 5px;
}

#checkout input#field-password {
    border-radius: 5px;
}

#checkout form#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#checkout .form-group.row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    #checkout .form-group.row {
        width: 800px;
    }
}

#checkout label.col-md-3.form-control-label.required {
    max-width: max-content;
}

button.continue.btn.btn-primary.float-xs-right {
    width: 250px;
    border-radius: 5px;
    margin: 20px 0px;
}

#checkout hr {
    display: none;
}

#checkout .no-account {
    margin: 25px 0px;
}

/*Estilos carrito*/
div#blockcart-content {
    border-radius: 10px;
    padding: 15px;
}

#cart .card.cart-container {
    border-radius: 15px;
    padding: 20px;
}

#cart .card.cart-summary {
    border-radius: 15px;
    padding: 10px;
}

a.btn.btn-primary {
    border-radius: 50px;
    font-size: 16px !important;
    padding: 10px 30px;
    transition: 0.5s;
}

a.btn.btn-primary:hover {
    opacity: 0.8;
    transition: 0.5s;
}

/*Estilos Modal ADD product*/
#blockcart-modal .modal-header {
    background: #f1f1f1;
    border-radius: 15px 15px 0px 0px;
}

#blockcart-modal .modal-title {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

#blockcart-modal .modal-content {
    border-radius: 15px;
}

#blockcart-modal .modal-body {
    border-radius: 0px 0px 15px 15px !important;
}

button.btn.btn-secondary {
    border-radius: 50px;
    font-size: 16px !important;
    padding: 10px 30px;
    transition: 0.5s;
}

button.btn.btn-secondary:hover {
    opacity: 0.8;
    transition: 0.5s;
}

/*Mostramos label en editar direccion del cliente*/
#address label.col-md-3.form-control-label.required {
    display: block;
}

/*Input control*/
input.js-cart-line-product-quantity.form-control {
    border-radius: 5px !important;
    margin: 0px 5px;
}

button.btn.btn-touchspin.js-decrease-product-quantity.bootstrap-touchspin-down {
    border-radius: 0px 0px 5px 5px !important;
}

button.btn.btn-touchspin.js-touchspin.js-increase-product-quantity.bootstrap-touchspin-up {
    border-radius: 5px 5px 0px 0px !important;
}

/*Editamos Add cuenta desde el perfil*/
#address section#content {
    padding: 30px;
    border-radius: 10px;
}

@media (min-width: 1024px) {
    #address section#content {
        width: 800px;
    }
}

#address .address-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#address label.col-md-3.form-control-label {
    max-width: 25%;
    text-align: center;
}

/*Editamos mi cuenta*/
@media (max-width: 1024px) {
    #my-account span.link-item {
        height: 92px;
    }
}

#emailsalerts > span {
    min-height: 92px !important;
}

#my-account span.link-item {
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-height: 92px !important;
}

#my-account span.link-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
    border-color: rgba(0, 0, 0, .16);
}

#my-account section#content {
    display: flex;
    justify-content: center;
    margin: 50px 0px;
}

#my-account .text-sm-center a {
    background: #626262;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 10px 5px;
    border-radius: 5px;
    color: white;
    font-weight: 500;
    transition: 0.2s;
}

#my-account .text-sm-center a:hover {
    background: #ababab;
    transition: 0.2s;
    font-weight: bold;
}

#my-account footer.page-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    #my-account section#content {
        display: flex;
        margin: 50px 0px;
        flex-direction: column;
        align-items: center;
        height: auto;
        justify-content: flex-start;
    }

    #my-account .links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #my-account .links a {
        text-align: center;
        height: auto !important;
        flex: 0 0 70%;
    }

    #my-account section#main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: auto !important;
    }
}

/*Editamos página de categoría*/
.block-category.card.card-block {
    background: unset !important;
    padding: unset !important;
    min-height: unset !important;
}

.block-category h1 {
    font-size: 1.5rem;
}

ul.category-top-menu li {
    font-size: 14px;
}

.block-categories .h6 {
    font-size: 1rem;
    font-weight: 600;
}

button.btn-unstyle.select-title {
    border-radius: 5px;
}

a.select-list.js-search-link:hover {
    background: #dddddd;
    color: #232323;
}

a.select-list.current.js-search-link:hover {
    background: #dddddd;
    color: #232323;
}

#category div#subcategories {
    display: none;
}

#pagenotfound .page-not-found,
#products .page-not-found {
    background: whitesmoke;
    color: #232323;
    /*float: left;*/
    padding: 1.2rem 4rem;
}

#js-product-list div#search_widget {
    float: left;
}

#js-product-list #search_widget form input {
    background: white;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

#js-product-list div#search_widget {
    min-width: 100% !important;
}

/*Breadcrumb General*/
nav.breadcrumb {
    margin-top: 15px;
}

/*Editamos reestablecer contraseña*/
#password div#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 30px;
}

@media (min-width: 1024px) {
    #password div#content {
        width: 800px;
    }
}

#password .form-group.center-email-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#password button#send-reset-link {
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 5px;
}
/* theme.css de warehouse deja .hidden-xs-down en display:none !important
   SIN media query: el boton de escritorio no se veia en ningun ancho.
   Debajo de 576px lo reemplaza el 'Enviar' (.hidden-sm-up), que anda bien. */
@media (min-width: 576px) {
    #password button#send-reset-link {
        display: inline-block !important;
    }
}

#password .col-md-5.email {
    padding: 10px 0px;
}

#password input#email {
    border-radius: 5px;
}

#password label.col-md-3.form-control-label.required {
    max-width: max-content;
}

/* selector grilla/lista en mobile: vistamayorista lo pone en flex y el
   espacio entre los dos <a> desaparece, los iconos quedaban pegados */
.view-switcher.vm-mobile-view-switch-visible {
    gap: 12px;
    align-items: center;
}

/*Vista en lista - Mayorista*/
.mto-mayorista-sin-stock {
    background-color: #F61B1B;
}

.mto-mayorista-poco-stock {
    background-color: #FF5E00;
}

.mto-mayorista-medio-stock {
    background-color: #FFB300;
}

.mto-mayorista-mucho-stock {
    background-color: #68B701;
}

.mto-mayorista-texto {
    width: 30%;
    display: flex;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    padding: 5px;
}

.mto-contador {
    display: grid;
    grid-template-columns: 30% 22% 26% 30%;
    align-content: center;
    align-items: center;
}

.mto-contenedor-resultados {
    text-align: center;
}

button.btn.btn-product-list.add-to-cart.comprar-mayorista {
    margin: unset !important;
    padding: 5px 10px;
}

article.product-miniature.product-miniature-default.product-miniature-list.js-product-miniature {
    border-radius: 8px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.07);
}

body#category .product-miniature a:link:not(.nav-link):not(.btn),
.product-miniature a:visited:not(.nav-link):not(.btn) {
    color: #030303;
}

/*Vista mayorista mobile*/
@media (max-width: 1024px) {
    .col.col-description {
        flex: 50%;
    }

    .cont-img-wuala {
        flex: 5%;
    }

    .row.medium-gutters.product-miniature-list-row {
        display: flex !important;
    }

    .mto-mayorista-texto {
        width: 50%;
    }
}

/*Estilos Tooltips*/
.stock-indicator {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.stock-indicator .tooltip {
    visibility: hidden;
    background-color: #afadadb5;
    backdrop-filter: saturate(140%) blur(20px) !important;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    font-size: 12px;
    position: absolute;
    z-index: 10;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stock-indicator .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.stock-indicator:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

span.label.label-pill.dark {
    color: black;
}
/* ============================================================
   TARJETA DE PRODUCTO - VISTA GRILLA (GLOBAL)
   Aplica a carruseles de la home, grilla de categoria y
   relacionados de la ficha: todos usan .product-miniature-grid.
   Tipografia, color de precio, borde, alineacion y padding del
   texto salen del Theme Editor (iqit live). Aca va SOLO lo que el
   editor no tiene: radios, alturas y ritmo interno.
   NO declarar hover ni background del boton: los define el editor.
   Medido sobre Home.png (card de 392px) y escalado x0.791 a 310px.
   ============================================================ */

article.product-miniature-grid {
    border-radius: 8px;
    overflow: hidden;
}
/* fila cantidad + Anadir alineada entre tarjetas (una con precio tachado
   la empujaba hacia abajo): la tarjeta ya mide lo mismo que sus vecinas,
   la descripcion ocupa el resto y el bloque de compra se pega al fondo.
   Alternativa al 'Force equal height' del editor, que achica el boton. */
article.product-miniature-grid {
    display: flex;
    flex-direction: column;
}
article.product-miniature-grid .product-description {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
article.product-miniature-grid .product-add-cart {
    margin-top: auto;
}
/* sin stock (o con todo el stock ya en el carrito) el bloque de compra es
   un <a> 'Ver': ocupa la fila y centra el texto, como el 'Anadir' */
article.product-miniature-grid .product-add-cart > a.btn-product-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* el mockup deja mas aire abajo del boton que a los costados:
   el padding lateral (17px) sale del Theme Editor, el de abajo no existe ahi */
article.product-miniature-grid .product-description {
    /* !important: el Theme Editor compila `.products-grid
       .product-miniature-layout-1 .product-description{padding:17px}`
       con 3 clases y le gana a este selector */
    padding-bottom: 26px !important;
}

/* titulo */
article.product-miniature-grid .product-title {
    margin-bottom: 12px !important;
    line-height: 1.35;
    font-weight: 500;
}
/* Los :not() suman peso de clase: el bloque de la vista lista (mas arriba en
   este mismo archivo) trae `.product-miniature a:visited:not(.nav-link):not(.btn)
   {color:#030303}` sin acotar a la lista, y con 4 clases le ganaba a un
   `.product-title a:visited` pelado. Resultado: los productos ya visitados
   salian casi negros en los carruseles. Hay que igualar los :not() y, para
   categoria, prefijar con el id. */
article.product-miniature-grid .product-title a:link:not(.nav-link):not(.btn),
article.product-miniature-grid .product-title a:visited:not(.nav-link):not(.btn),
body#category article.product-miniature-grid .product-title a:link:not(.nav-link):not(.btn),
body#category article.product-miniature-grid .product-title a:visited:not(.nav-link):not(.btn) {
    color: #3e3e3e;
}

/* SKU */
article.product-miniature-grid .product-reference {
    margin: 0 0 12px !important;
    font-size: 13px;
}
article.product-miniature-grid .product-reference::before {
    content: "SKU: ";
}
article.product-miniature-grid .product-reference,
article.product-miniature-grid .product-reference a,
#category article.product-miniature-grid .product-reference a {
    color: #6b6b6b !important;
    font-size: 13px;
}

/* precio y "Sin imp." */
article.product-miniature-grid .product-price-and-shipping {
    margin-bottom: 8px;
}
article.product-miniature-grid .product-price-tax-exc {
    margin-top: 10px;
    font-size: 13px;
    color: #6b6b6b !important;
}

/* stepper de cantidad + boton */
article.product-miniature-grid .input-group-add-cart {
    gap: 13px;
    align-items: center;
}
/* stepper de cantidad: una sola caja redondeada con divisor interno,
   como el mockup. El markup de bootstrap-touchspin trae el input y la
   columna de flechas con su propio borde cada uno; se apagan los dos y
   el borde queda en el contenedor. */
article.product-miniature-grid .input-group-add-cart > .input-group {
    width: 51px;
    height: 35px;
    margin-right: 0 !important;
    flex-wrap: nowrap;
    align-items: stretch;
    background: #fff;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    overflow: hidden;
}
article.product-miniature-grid .input-qty {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    color: #1d1d1d;
    -moz-appearance: textfield;
}
article.product-miniature-grid .input-qty::-webkit-outer-spin-button,
article.product-miniature-grid .input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
article.product-miniature-grid .input-group-add-cart > .input-group:focus-within {
    border-color: #8a8a8a;
}
article.product-miniature-grid .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    width: 22px;
    border-left: 1px solid #cbcbcb;
}
article.product-miniature-grid .btn-touchspin {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #9e9e9e;
    line-height: 1;
}
article.product-miniature-grid .bootstrap-touchspin-up {
    border-bottom: 1px solid #cbcbcb;
}
article.product-miniature-grid .btn-touchspin i {
    font-size: 13px;
    line-height: 1;
}
article.product-miniature-grid .btn-product-list {
    flex: 1;
    height: 37px;
    padding: 0 15px;
    border-radius: 4px;
    font-weight: 600;
}
article.product-miniature-grid .btn-product-list .bag-icon {
    display: none;
}

/* ============================================================
   AIRE ENTRE EL CONTENIDO Y EL FOOTER (GLOBAL)
   El "Top and bottom padding" del Main footer se puso en 0 en el
   Theme Editor porque los 40px de fabrica descuadraban el footer
   nuevo, pero eran los que daban el respiro con el contenido.
   Se devuelve ese aire desde abajo del #wrapper, que no toca la
   maquetacion interna del footer.
   No va por el Theme Editor: su campo de padding del contenido
   (cw_padding_tb / cw_index_padding_tb) es arriba Y abajo a la vez,
   y subirlo empujaria el hero hacia abajo en la home.
   El segundo selector es para ganarle a `#index #wrapper` (2 ids)
   que compila el editor.
   ============================================================ */
#wrapper,
#index #wrapper,
#module-iqitelementor-Preview.elementor-landing-body #wrapper {
    padding-bottom: 40px;
}

/* ==========================================================================
   SCROLL REVEAL
   Los elementos aparecen al entrar en viewport. Las clases las agrega el JS
   (custom.js): sin JS no se oculta nada, la pagina se ve normal.
   Para ajustar el efecto: cambiar los 24px (distancia) y .68s (duracion).
   ========================================================================== */

html.reveal-enabled [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .68s ease, transform .68s ease;
    will-change: opacity, transform;
}

html.reveal-enabled [data-reveal].reveal-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-enabled [data-reveal],
    html.reveal-enabled [data-reveal].reveal-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   FICHA DE PRODUCTO
   El color y el hover del boton salen del Theme Editor (.btn-primary,
   #ff3b00): aca NO se tocan, solo geometria.
   ========================================================================== */

/* Bloques 'Metodo de pago / envio' (IqitElementor, contenido en hook #2).
   DEF-4383: en mobile van en UNA columna, icono a la izquierda y texto a la
   derecha, como en desktop. frontend.min.css de elementor, bajo 768px, apila
   el icono arriba y centra el texto de todo image-box aunque este en
   'position: left'; aca se le devuelve la fila. La seccion mobile (zoelitk,
   hidden-desktop) tiene 2 columnas: se apilan. */
@media (max-width: 767px) {
    body#product .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    body#product .elementor-widget-image-box.elementor-position-left .elementor-image-box-img {
        flex: 0 0 auto;
        margin-left: 0 !important;
        margin-right: 16px !important;
        margin-bottom: 0;
    }
    body#product .elementor-element-zoelitk .elementor-column {
        width: 100%;
    }
    body#product .elementor-element-zoelitk .elementor-column + .elementor-column {
        margin-top: 16px;
    }
}

/* El boton ocupa todo el ancho que queda al lado del stepper, como el
   prototipo. El markup es un .row de bootstrap con dos columnas "auto". */
body#product .product-quantity .col-add-btn {
    flex: 1 1 auto;
}
body#product .product-quantity .col-add-btn .add,
body#product .product-quantity .col-add-btn .add-to-cart {
    width: 100%;
}
/* el prototipo no lleva el icono de bolsa */
body#product .product-add-to-cart .add-to-cart .bag-icon {
    display: none;
}

/* Titulos de seccion ("Caracteristicas", "Productos relacionados"):
   barra coral corta en lugar de la linea gris a todo el ancho.
   La linea gris la compila el Theme Editor para .section-title de TODO el
   sitio; por eso se anula scopeada a la ficha en vez de tocar el campo. */
body#product .section-title {
    border-bottom: 0;
    padding-bottom: 0;
}
body#product .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 12px;
    background: #ea533d;
}

/* Stepper de la ficha: misma caja unica redondeada que la tarjeta.
   El markup de touchspin trae borde propio en el input y en la columna de
   flechas; se apagan los dos y el borde queda en el contenedor.
   Radius 8 para acompanar al buscador y al boton (el criterio que ya venia
   usando el usuario en el Custom CSS del Theme Editor: esas reglas suyas
   quedan sin efecto porque ahora el borde no esta en las partes). */
body#product .product-quantity .bootstrap-touchspin {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 80px;
    height: 49px;
    background: #fff;
    border: 1px solid #cbcbcb;
    border-radius: 8px;
    overflow: hidden;
}
body#product .product-quantity #quantity_wanted {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    color: #1d1d1d;
    -moz-appearance: textfield;
}
body#product .product-quantity #quantity_wanted::-webkit-outer-spin-button,
body#product .product-quantity #quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body#product .product-quantity .bootstrap-touchspin:focus-within {
    border-color: #8a8a8a;
}
body#product .product-quantity .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    width: 24px;
    border-left: 1px solid #cbcbcb;
}
body#product .product-quantity .btn-touchspin {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #9e9e9e;
    line-height: 1;
}
body#product .product-quantity .bootstrap-touchspin-up {
    border-bottom: 1px solid #cbcbcb;
}
body#product .product-quantity .btn-touchspin i {
    font-size: 13px;
    line-height: 1;
}

/* radius del boton de la ficha (el color y el hover siguen siendo del editor) */
body#product .product-add-to-cart .add-to-cart {
    border-radius: 8px;
}

/* Ritmo vertical de la columna de info (escala de 4/8px).
   Agrupacion: {titulo+SKU} / {badge} / {precio+"Impuestos"} / {compra}.
   El precio y su leyenda van pegados a proposito: son una sola unidad. */
/* el h1 de la ficha es .page-title, no .product-title */
body#product h1.page-title {
    margin-bottom: 8px;
}
body#product .product-reference {
    margin-bottom: 12px;
}
body#product .product-available,
body#product .product-unavailable {
    margin-bottom: 16px !important;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
}
body#product .product-prices .current-price {
    display: block;
    margin-bottom: 6px;
}
body#product .product-prices .tax-shipping-delivery-label {
    margin-bottom: 0;
}
body#product .product-prices {
    margin-bottom: 0;
}
/* el bloque que envuelve la descripcion corta trae su propio aire arriba;
   se normaliza para que quede un solo escalon de 24 */
body#product .product-information > .rte-content,
body#product [id^="product-description-short"] {
    margin-top: 24px;
}
/* la descripcion corta tiene el id con el id del producto pegado
   (product-description-short-39), por eso el selector por prefijo */
body#product [id^="product-description-short"] {
    margin-top: 0;
    margin-bottom: 16px;
}
body#product .product-add-to-cart {
    padding-top: 20px;
}

/* ==========================================================================
   HEADER: iconos SVG + sombra del sticky
   Los SVG reemplazan los glifos de Font Awesome sin tocar el .tpl: se anula
   el ::before de FA y se pinta el SVG como fondo del propio <i>.
   Tamano contenido (22px desktop / 22px mobile), no mas grande que el texto
   que lo acompana.
   ========================================================================== */

#header .header-btn .fa-user.icon,
#header .header-btn .fa-shopping-bag.icon,
#mobile-header .m-nav-btn .fa-user,
#mobile-header .m-nav-btn .fa-shopping-bag {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}
#header .header-btn .fa-user.icon::before,
#header .header-btn .fa-shopping-bag.icon::before,
#mobile-header .m-nav-btn .fa-user::before,
#mobile-header .m-nav-btn .fa-shopping-bag::before {
    content: "";
}
#header .header-btn .fa-user.icon,
#mobile-header .m-nav-btn .fa-user {
    background-image: url("../img/icon-user.svg");
}
#header .header-btn .fa-shopping-bag.icon,
#mobile-header .m-nav-btn .fa-shopping-bag {
    background-image: url("../img/icon-cart.svg");
}
/* el contador del carrito vive DENTRO del <i>: se reposiciona sobre el SVG */
#header .header-btn .fa-shopping-bag.icon {
    position: relative;
}
#header .header-btn .fa-shopping-bag.icon .cart-products-count-btn {
    position: absolute;
    top: -6px;
    right: -8px;
}

/* Sombra del menu sticky: sutil, solo cuando esta pegado arriba.
   El elemento que Waypoints deja fixed es #iqitmegamenu-wrapper.stuck. */
#iqitmegamenu-wrapper.stuck,
.sticky-desktop-wrapper #desktop-header.stuck-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* En la barra sticky el fondo es negro y el trazo del SVG es #535353:
   2.7:1 de contraste, por debajo del minimo de 3:1 para iconos. Se invierte
   a blanco solo ahi (el mismo archivo, sin duplicar el SVG). */
#sticky-cart-wrapper .fa-shopping-bag.icon,
#sticky-cart-wrapper .fa-user.icon {
    filter: brightness(0) invert(1);
}

/* Botones del header: icono AL LADO del label, como el prototipo.
   El Theme Editor compila `display:block` en el icono y en el .title, que es
   lo que los apila; se pasa el boton a flex y se alinean en una linea. */
#header .header-top .header-btn-w .header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
#header .header-top .header-btn-w .header-btn > .icon {
    display: inline-block;
    flex: 0 0 auto;
}
#header .header-top .header-btn-w .header-btn .title {
    display: inline;
    /* el tema le pone margin-top:7px para el layout apilado; en linea eso
       desalinea el label respecto del icono (4px) y del buscador */
    margin-top: 0;
    line-height: 1;
}
#header .header-top .header-btn-w .header-btn > .icon {
    line-height: 1;
}
/* que el buscador, el logo y los botones compartan el mismo eje vertical.
   Los botones cuelgan de una fila interna (.col-header-right > .row) que
   estira las columnas: sin esto quedan 3px mas arriba que el buscador. */
#header .header-top .col-header-right > .row {
    align-items: center;
}
/* la columna del boton es un bloque con contexto inline: el inline-flex se
   apoya en la linea base y sobran ~6px de descendente, que es lo que dejaba
   los botones 3px mas arriba que el buscador. Flex y se acabo. */
#header .header-top .header-btn-w,
#header .header-top .header-cart-btn-w > .blockcart {
    display: flex;
    align-items: center;
}
/* la lupa del prototipo es bastante mas grande que la del tema (14px) */
#header .search-widget .search-btn i {
    font-size: 15px;
}

/* ==========================================================================
   VISTA MAYORISTA (modulo vistamayorista) - fila de la grilla B2B
   El modulo trae su CSS en vistamayorista.css y vm_custom.css; el custom.css
   del tema carga DESPUES de los dos, asi que alcanza con igualar
   especificidad. No se tocan los archivos del modulo.
   Proporciones tomadas del prototipo, normalizadas al ancho real de la fila
   (prototipo 845px -> sitio 932px, factor 1.10).
   ========================================================================== */

/* La fila es un CSS GRID (`grid-template-columns` en vistamayorista.css), no
   un flex: tocar width/flex del contenedor de la imagen no hace nada, hay que
   redefinir la columna en cada breakpoint. En el prototipo la imagen ocupa
   ~13% del ancho de la fila; estaba en 8.6%.
   El modulo declara esas columnas con !important, asi que hay que igualarlo
   (custom.css carga despues, con la misma especificidad alcanza). */
.product-miniature-list-row {
    grid-template-columns: 120px 1fr 360px !important;
}
@media (min-width: 992px) {
    .product-miniature-list-row {
        grid-template-columns: 120px 1fr 440px !important;
    }
}
@media (min-width: 1400px) {
    .product-miniature-list-row {
        grid-template-columns: 130px 1fr 480px !important;
    }
}
.product-miniature.product-miniature-list .cont-img-wuala img {
    width: 100%;
    max-width: 110px;
    height: auto;
}
/* boton mas ancho y con el mismo radius que el de la ficha */
.product-miniature.product-miniature-list .vm-btn-add {
    min-width: 106px;
    height: 41px;
    border-radius: 8px;
}
/* 'Ver' del producto sin stock: mismo boton que 'Anadir' (vistamayorista lo
   deja compacto, 13px y tirado a la derecha en mobile) */
.product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock a.btn-product-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 106px;
    height: 41px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}
@media (max-width: 576px) {
    /* en mobile 'Anadir' mide 214px centrado en la columna de compra */
    .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
    .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock a.btn-product-list {
        width: 100%;
        max-width: 214px;
        font-size: 15px;
        padding: 5px 10px;
    }
}
/* la caja del total acompana el ancho del boton */
.product-miniature.product-miniature-list .mto-contador-resultado {
    min-width: 116px;
}

/* ── Menu mobile (DEF-4382, 30/09/2026) ─────────────────────────────────
   Letra 15 (~13px), padding 10, sin borde y flecha 15 salen del Theme Editor
   (seccion menu mobile). Aca solo lo que el editor no tiene:
   - el icono de hamburguesa de 'Productos' es el de la pestana del megamenu
     (se usa en desktop): se oculta solo en el menu mobile;
   - la linea divisoria va solo debajo de 'Productos' (el primer li del
     scroller es un contenedor vacio, por eso el '+');
   - el panel push mide 300px fijos: casi todo el ancho, como el diseno. */
#iqitmegamenu-mobile .mobile-menu__tab-icon {
    display: none;
}
#iqitmegamenu-mobile .mobile-menu__above-content + .mobile-menu__tab {
    border-bottom: solid 1px #ebebeb;
    margin-bottom: 8px;
}
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile {
    width: calc(100% - 32px);
}
/* flecha de las pestanas con submenu hacia abajo, como el diseno (solo el
   icono: al tocar sigue abriendo el panel de categorias) */
#iqitmegamenu-mobile .mobile-menu__scroller > .mobile-menu__tab > .mobile-menu__arrow .expand-icon {
    transform: rotate(90deg);
}

/* ── Scroll horizontal global (17/08/2026) ───────────────────────────────
   El Theme Editor pinta el fondo full-width del menu con
   #iqitmegamenu-horizontal{margin:0 -500%;padding:0 500%}, y eso deja el
   documento en 7590px en TODAS las paginas (barra de scroll horizontal).
   Se recorta el sangrado en el propio #desktop-header.
   overflow-x:CLIP y no hidden: hidden obliga al otro eje a "auto" y
   recortaria los submenus del megamenu; clip deja overflow-y:visible, asi
   que el desplegable (384px de alto) sigue saliendo entero.
   Medido con playwright: scrollWidth 7590 -> 1440 en home y categoria,
   sticky y submenu intactos en 1440/1024/375. */
#desktop-header {
    overflow-x: clip;
}

/* ── Landing "Quiero ser revendedor" (CMS 9) — 17/08/2026 ────────────────
   El prototipo no lleva breadcrumb ni titulo de pagina: el hero arranca
   pegado al menu. El resto de la maqueta esta en widgets de IqitElementor
   (ver _tools/landing_revendedor.py), aca solo va lo que es del tema.
   Scoped a body#cms.cms-id-9: no toca las otras paginas CMS. */
#cms.cms-id-4 .breadcrumb,
#cms.cms-id-4 #main > .page-header,
#cms.cms-id-9 .breadcrumb,
#cms.cms-id-9 #main > .page-header,
#cms.cms-id-10 .breadcrumb,
#cms.cms-id-10 #main > .page-header {
    display: none;
}
#cms.cms-id-4 #wrapper,
#cms.cms-id-9 #wrapper,
#cms.cms-id-10 #wrapper {
    padding-top: 0;
}

/* ── Landing "Sucursales" (CMS 10) — 17/08/2026 ──────────────────────────
   Cada tarjeta es un widget html dentro de una columna de elementor: la
   columna pone el fondo gris, el padding y la separacion (ver
   _tools/landing_sucursales.py); aca va solo el interior de la tarjeta.
   Todo arranca con #cms.cms-id-10 para ganarle al
   `a:link:not(.nav-link):not(.btn){color:#777}` que compila el Theme Editor. */
#cms.cms-id-10 .carzo-suc {
    display: flex;
    align-items: stretch;
    gap: 16px;
}
#cms.cms-id-10 .carzo-suc__foto {
    flex: 0 0 45%;   /* 50% dejaba el mail cortado en dos lineas */
}
#cms.cms-id-10 .carzo-suc__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#cms.cms-id-10 .carzo-suc__info {
    flex: 1 1 auto;
    min-width: 0;
}
#cms.cms-id-10 .carzo-suc__nombre {
    margin: 2px 0 14px;
    color: #ea533d;
    font-size: 18px;
    font-weight: 600;
}
#cms.cms-id-10 .carzo-suc__info p {
    margin: 0 0 11px;
    color: #1d1d1d;
    font-size: 13.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;   /* el mail es una sola palabra de ~170px */
}
#cms.cms-id-10 .carzo-suc__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}
#cms.cms-id-10 a.carzo-suc__red {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1d1d1d;
    font-size: 13.5px;
}
/* el svg de facebook es 11.9x22: forzarlo cuadrado lo deforma */
#cms.cms-id-10 .carzo-suc__red img {
    width: auto;
    height: 17px;
}
#cms.cms-id-10 a.carzo-suc__btn {
    display: block;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 3px;
    background: #ea533d;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}
#cms.cms-id-10 a.carzo-suc__btn:hover {
    background: #1d1d1d;
    color: #ffffff;
}
/* Abajo de 1200 la tarjeta no da para foto al lado del texto: entran dos
   tarjetas por fila y la columna de datos queda en ~210px, con el mail cortado
   en tres lineas (y a 768 llegaba a empujar la fila y meter scroll horizontal).
   Debajo de este ancho la foto pasa arriba. */
@media (max-width: 1199px) {
    #cms.cms-id-10 .carzo-suc {
        flex-direction: column;
    }
    #cms.cms-id-10 .carzo-suc__foto {
        flex: none;
    }
    #cms.cms-id-10 .carzo-suc__foto img {
        height: 200px;
    }
}

/* popup del mapa: lo inyecta custom.js (ver el comentario de alla) */
.carzo-map-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
}
.carzo-map-modal.is-open {
    display: flex;
}
.carzo-map-modal__box {
    position: relative;
    width: 100%;
    max-width: 900px;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
.carzo-map-modal__box iframe {
    display: block;
    width: 100%;
    height: 70vh;
    max-height: 520px;
    border: 0;
}
.carzo-map-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #1d1d1d;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ── Landing "Nosotros" (CMS 4) — 18/08/2026 ─────────────────────────────
   Todo lo demas son widgets de elementor (ver _tools/landing_nosotros.py).
   Aca va solo el mail de "Trabaja en Carzo": el Theme Editor compila
   `a:link:not(.nav-link):not(.btn){color:#777}` y lo dejaba gris. El azul es
   mas oscuro que el #3D88EA de la paleta para que llegue a 4.5:1 sobre blanco.
   Va atado a .carzo-nos-trabaja y no a #cms.cms-id-4: el footer tambien es
   elementor y con el selector amplio se le pintaban de azul los links. */
#cms.cms-id-4 .carzo-nos-trabaja .elementor-text-editor a {
    color: #2c6fc4;
}
#cms.cms-id-4 .carzo-nos-trabaja .elementor-text-editor a:hover {
    color: #1d1d1d;
}

/* ==========================================================================
   ONDA EN LAS LANDINGS — 18/08/2026
   El aparecer-al-scrollear ya lo hace el bloque SCROLL REVEAL (custom.js
   ahora lo habilita tambien en cms-id-4/9/10). Aca van solo los hovers.
   Todo es transform/opacity: no dispara reflow. El bloque final los apaga
   con prefers-reduced-motion.
   ========================================================================== */

/* tarjetas: se levantan apenas y toman sombra */
#cms.cms-id-9 .carzo-rev-porque .elementor-inner-section .elementor-element-populated,
#cms.cms-id-10 .carzo-suc-seccion .elementor-inner-section .elementor-element-populated {
    transition: transform .35s ease, box-shadow .35s ease;
}
#cms.cms-id-9 .carzo-rev-porque .elementor-inner-section .elementor-element-populated:hover,
#cms.cms-id-10 .carzo-suc-seccion .elementor-inner-section .elementor-element-populated:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

/* el icono de la tarjeta de revendedor acompana */
#cms.cms-id-9 .carzo-rev-porque .elementor-widget-image img {
    transition: transform .35s ease;
}
#cms.cms-id-9 .carzo-rev-porque .elementor-element-populated:hover .elementor-widget-image img {
    transform: scale(1.12);
}

/* fotos: zoom leve dentro de su caja */
#cms.cms-id-10 .carzo-suc__foto,
#cms.cms-id-4 .carzo-nos-trabaja .elementor-image {
    overflow: hidden;
}
#cms.cms-id-10 .carzo-suc__foto img,
#cms.cms-id-4 .carzo-nos-trabaja .elementor-image img {
    transition: transform .5s ease;
}
#cms.cms-id-10 .carzo-suc:hover .carzo-suc__foto img,
#cms.cms-id-4 .carzo-nos-trabaja .elementor-image:hover img {
    transform: scale(1.05);
}

/* botones */
#cms.cms-id-9 .carzo-rev-hero .elementor-button,
#cms.cms-id-10 a.carzo-suc__btn {
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
#cms.cms-id-9 .carzo-rev-hero .elementor-button:hover,
#cms.cms-id-10 a.carzo-suc__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* el mail de nosotros */
#cms.cms-id-4 .carzo-nos-trabaja .elementor-text-editor a {
    transition: color .25s ease;
}

/* El mail viaja partido en spans para que Cloudflare no lo obfusque (ver
   custom.js). El <a> nace SIN href, asi que `a:link` no lo agarra y hay que
   darle el color a mano; el JS le agrega el mailto despues. */
#cms.cms-id-10 .carzo-suc__info a.carzo-mail {
    color: #1d1d1d;
}
#cms.cms-id-10 .carzo-suc__info a.carzo-mail:hover {
    color: #ea533d;
}

@media (prefers-reduced-motion: reduce) {
    #cms.cms-id-4 .carzo-nos-trabaja .elementor-image img,
    #cms.cms-id-9 .carzo-rev-porque .elementor-element-populated,
    #cms.cms-id-9 .carzo-rev-porque .elementor-widget-image img,
    #cms.cms-id-9 .carzo-rev-hero .elementor-button,
    #cms.cms-id-10 .carzo-suc-seccion .elementor-element-populated,
    #cms.cms-id-10 .carzo-suc__foto img,
    #cms.cms-id-10 a.carzo-suc__btn {
        transition: none !important;
    }
    #cms.cms-id-4 .carzo-nos-trabaja .elementor-image:hover img,
    #cms.cms-id-9 .carzo-rev-porque .elementor-element-populated:hover,
    #cms.cms-id-9 .carzo-rev-porque .elementor-element-populated:hover .elementor-widget-image img,
    #cms.cms-id-9 .carzo-rev-hero .elementor-button:hover,
    #cms.cms-id-10 .carzo-suc-seccion .elementor-element-populated:hover,
    #cms.cms-id-10 .carzo-suc:hover .carzo-suc__foto img,
    #cms.cms-id-10 a.carzo-suc__btn:hover {
        transform: none !important;
    }
}

/* Tarjetas de "Categorias principales" (home): al ponerles link, elementor mete
   un <a> dentro del h3 y el titulo pasa a tomar el color de link del tema (#777),
   asi que las 5 con link se veian grises y las otras negras. El h3 ya trae su
   color del propio widget: que el <a> lo herede. */
#index .elementor-image-box-title a {
    color: inherit;
}