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

/*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;
    }
}

#registration 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;
}

/*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;
}

#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;
}

/*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;
}
/* ===== Tabs categorias home - widget ProductsListTabs (iqitelementor) ===== */
/* Estilo pill: activo #3B3B3B, borde #707070, radius 36px (agregado via Claude) */
.elementor-products-tabs .nav-tabs {
    border-bottom: 0;
    gap: 14px;
    flex-wrap: wrap;
}
.elementor-products-tabs .nav-tabs .nav-link {
    background: #fff;
    color: #3B3B3B;
    border: 1px solid #707070;
    border-radius: 36px;
    padding: 12px 26px;
    margin: 0;
    transition: background .16s, color .16s, border-color .16s;
}
.elementor-products-tabs .nav-tabs .nav-link:hover {
    border-color: #3B3B3B;
}
.elementor-products-tabs .nav-tabs .nav-link.active {
    background: #3B3B3B;
    color: #fff;
    border-color: #3B3B3B;
}
/* ===== fin tabs ===== */

/* ===== Tarjetas de producto GLOBALES (agregado via Claude) =====
   Scope: article.product-miniature-grid = vista grilla en todo el sitio
   (carruseles de la home, catalogo/categoria, relacionados en ficha, etc.).
   La vista de lista mayorista usa .product-miniature-list y NO se toca. ===== */
.product-miniature.product-miniature-grid {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
/* badge (Nuevo / oferta) separado de la esquina */
.product-miniature-grid .product-flags .product-flag {
    background: #2fae4a;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
}
.product-miniature-grid .product-flags {
    top: 12px;
    left: 12px;
}
/* aire en imagen y contenido */
.product-miniature-grid .thumbnail-container { padding-top: 8px; }
.product-miniature-grid .product-description { padding: 12px 14px 14px; }
/* nombre en gris (el #category del final le gana al body#category ... {color:#030303} del cliente) */
.product-miniature-grid .product-title a:link:not(.nav-link),
.product-miniature-grid .product-title a:visited:not(.nav-link),
#category .product-miniature-grid .product-title a:link:not(.nav-link):not(.btn) {
    color: #4a4a4a;
    font-weight: 500;
    text-decoration: none;
}
/* SKU con prefijo y mayusculas */
/* color con !important porque el div lleva .text-muted (utilidad Bootstrap con !important) */
.product-miniature-grid .product-reference { text-transform: uppercase; font-size: 12px; color: #9a9a9a !important; }
.product-miniature-grid .product-reference::before { content: "SKU: "; }
.product-miniature-grid .product-reference a,
.product-miniature-grid .product-reference a:link:not(.nav-link):not(.btn),
.product-miniature-grid .product-reference a:visited:not(.nav-link):not(.btn),
#category .product-miniature-grid .product-reference a:link:not(.nav-link):not(.btn),
#category .product-miniature-grid .product-reference a:visited:not(.nav-link):not(.btn) { color: #9a9a9a; text-decoration: none; }
/* precio negro + regular tachado al lado */
.product-miniature-grid .product-price-and-shipping { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product-miniature-grid .product-price { color: #1a1a1a; font-weight: 700; font-size: 20px; }
.product-miniature-grid .regular-price { color: #b3b3b3; text-decoration: line-through; font-weight: 400; font-size: 15px; }
/* "Sin imp." (acorta la etiqueta) */
.product-miniature-grid .product-price-without-tax .label { display: none; }
.product-miniature-grid .product-price-without-tax::before { content: "Sin imp. "; }
.product-miniature-grid .product-price-without-tax { font-size: 12px !important; color: #8a8a8a !important; }
/* fila cantidad + boton: separar de "Sin imp." y liberar contenedores para full-width */
.product-miniature-grid .product-add-cart { margin-top: 12px; }
.product-miniature-grid .product-add-cart,
.product-miniature-grid .product-add-cart form,
.product-miniature-grid .input-group-add-cart {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.product-miniature-grid .input-group-add-cart {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: stretch;
}
.product-miniature-grid .input-group-add-cart .input-qty {
    flex: 0 0 auto;
    width: 52px;
    max-width: 52px;
    border-radius: 8px 0px 0px 8px !important;
}
/* boton Añadir pill, mas bajo, sin icono de bolsa */
.product-miniature-grid .product-add-cart .add-to-cart {
    flex: 1 1 auto;
    width: auto;
    border-radius: 40px;
    background: #e10000;
    border-color: #e10000;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    padding: 9px 16px;
}
.product-miniature-grid .product-add-cart .add-to-cart:hover { background: #c30000; border-color: #c30000; }
.product-miniature-grid .product-add-cart .add-to-cart .bag-icon { display: none; }
/* ===== mobile: cantidad mas chica y boton compacto (una linea) ===== */
@media (max-width: 767px) {
    .product-miniature-grid .input-group-add-cart { gap: 6px; }
    .product-miniature-grid .input-group-add-cart .input-qty { width: 44px; max-width: 44px; }
    .product-miniature-grid .product-add-cart .add-to-cart { padding: 8px 6px; font-size: 13px; }
}
/* ===== fin tarjetas ===== */

/* ===== Header: usuario y carrito con icono + texto en linea (como el prototipo) (agregado via Claude) ===== */
/* el theme editor oculta los titulos con !important -> se pisa (custom.css carga despues).
   Scopeado a .header-top (desktop); el header mobile usa otro markup y no se toca */
#header .header-top .header-btn-w .header-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}
#header .header-top .header-btn-w .header-btn .title {
    display: inline !important;
    margin-top: 0;
}
/* badge rojo con la cantidad sobre el icono del carrito (el tema lo trae oculto con .d-none si esta en 0) */
#header .header-top .header-btn-w .header-btn .icon { position: relative; }
#header .header-top .cart-products-count-btn {
    position: absolute;
    top: -7px;
    right: -9px;
    background: #e10000;
    color: #fff;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    padding: 0 4px;
}
/* mobile: el badge del carrito del header mobile es del tema (verde) -> rojo para mantener coherencia */
#header .mobile-bag-icon .cart-products-count { background: #e10000; }
/* iconos outline estilo prototipo (Lucide) via mask CSS: reemplazan el glifo FontAwesome
   en el ::before del <i>. background-color: currentColor -> respetan color y hover del tema.
   Cubre header desktop y mobile (fa-user y fa-shopping-bag) */
#header i.fa-user::before,
#header i.fa-shopping-bag::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    vertical-align: -0.15em;
}
#header i.fa-user::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#header i.fa-shopping-bag::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ===== fin header ===== */

/* ===== Ficha de producto (agregado via Claude) ===== */
/* Boton Añadir como el prototipo: pill 36px, ancho completo de la fila, sin icono de bolsa.
   El color NO se toca (ya viene del tema). col-add-btn es col-sm-auto -> se libera con flex */
#product .product-quantity .col-add-btn {
    flex: 1 1 auto;
    max-width: 100%;
}
#product .product-add-to-cart .add-to-cart {
    border-radius: 36px;
    width: 100%;
}
#product .product-add-to-cart .add-to-cart .bag-icon { display: none; }
/* input cantidad + boton mas bajos (el tema los deja en 49px) */
#product .product-add-to-cart .add-to-cart {
    padding-top: 9px;
    padding-bottom: 9px;
}
#product .product-quantity #quantity_wanted { height: 40px; }
#product .product-quantity .input-group.form-control { height: auto; }
/* aire en el encabezado (titulo / SKU / stock / precio, como el prototipo) */
#product .product_header_container h1.page-title,
#product h1.page-title { margin-bottom: 18px; }
#product .product-prices .product-reference { margin-bottom: 10px; }
#product .vm-product-stock-row { margin-top: 0; margin-bottom: 14px; }
#product .product-prices .current-price { margin-bottom: 4px; }
#product .product-price-without-tax,
#product .product-prices .tax-shipping-delivery-label { margin-top: 6px; }
#product .product-prices { margin-bottom: 6px; }
/* ===== fin ficha ===== */

/* ===== Banner hero "Potenciá tu negocio" (widget iqit-banner elementor-element-depvvhr) (agregado via Claude) ===== */
/* Boton pill radius 36px (mantiene bg blanco del editor) */
.elementor-element.elementor-element-depvvhr .elementor-button {
    border-radius: 36px;
}
/* Descripcion con fondo #4D4C4C solo del ancho del texto:
   elementor la fuerza a display:block (tomaria todo el ancho del bloque),
   asi que se achica la caja con width:fit-content en vez de tocar el display */
.elementor-element.elementor-element-depvvhr .elementor-iqit-banner .elementor-iqit-banner-description {
    background: #4D4C4C;
    width: fit-content;
    max-width: 100%;
    padding: 8px 14px;
}
/* mobile/tablet: el banner era mas bajo que su contenido (imagen 1920x601 escalada
   + overflow hidden -> titulo 48px cortado y boton invisible). Se le da alto minimo
   a la imagen con object-fit:cover y se achica la tipografia.
   OJO: el CSS de iqitelementor se imprime en un <style> DENTRO del body (gana a
   custom.css a igual especificidad) -> por eso h4./div./span. en los selectores */
@media (max-width: 991px) {
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner img {
        min-height: 320px;
        object-fit: cover;
    }
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner h4.elementor-iqit-banner-title {
        font-size: 30px;
    }
    /* el contenido va centrado en estas pantallas -> centrar la caja del texto */
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner .elementor-iqit-banner-description {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 767px) {
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner img {
        min-height: 300px;
    }
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner h4.elementor-iqit-banner-title {
        font-size: 22px;
        margin: 10px 0;
    }
    .elementor-element.elementor-element-depvvhr .elementor-iqit-banner div.elementor-iqit-banner-description {
        font-size: 13px;
        padding: 6px 10px;
    }
    .elementor-element.elementor-element-depvvhr span.elementor-button {
        margin-top: 14px;
    }
}
/* ===== fin banner hero ===== */

/* ===== Impulso scroll-reveal  ===== */
.mafer-reveal-enabled [data-mafer-reveal] {
    opacity: 0;
    transform: translateY(var(--mafer-reveal-distance, 18px));
    transition:
        opacity var(--mafer-reveal-duration, 620ms) cubic-bezier(0.2, 0.7, 0.3, 1),
        transform var(--mafer-reveal-duration, 620ms) cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--mafer-reveal-delay, 0ms);
    will-change: opacity, transform;
}
.mafer-reveal-enabled.mafer-reveal--soft [data-mafer-reveal] {
    --mafer-reveal-distance: 14px;
    --mafer-reveal-duration: 560ms;
}
.mafer-reveal-enabled.mafer-reveal--rise [data-mafer-reveal] {
    --mafer-reveal-distance: 24px;
    --mafer-reveal-duration: 680ms;
}
.mafer-reveal-enabled.mafer-reveal--pop [data-mafer-reveal] {
    --mafer-reveal-distance: 10px;
    --mafer-reveal-duration: 520ms;
    transform: translateY(var(--mafer-reveal-distance)) scale(0.96);
}
.mafer-reveal-enabled [data-mafer-reveal].mafer-reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .mafer-reveal-enabled [data-mafer-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* ===== fin Impulso scroll-reveal ===== */

/* ===== Aire header→contenido en páginas internas (agregado via Claude) ===== */
/* El tema deja #wrapper con padding-top:15px y el breadcrumb lo anula con
   margin-top:-15px (regla del tema, pisa al "Breadcrumb General" de arriba).
   Acá damos aire real en TODAS las páginas menos la home (#index), cuyo hero
   va pegado al header a propósito. El margin-top del breadcrumb va con
   !important para anular el -15px venga de donde venga. */
/* !important: el theme editor (custom_s_1.css) trae
   "body#product section#wrapper { padding: 10px }" en @media max-550px,
   con más especificidad; sin !important la ficha mobile queda en 10px. */
body:not(#index) #wrapper {
    padding-top: 60px !important;
}
body:not(#index) #wrapper .breadcrumb {
    margin-top: 0 !important;
}
/* ===== fin aire páginas internas ===== */

/* ===== Mobile: tabs de la home + tarjetas grid con más aire (prototipo) (agregado via Claude) ===== */
/* Acerca el widget ProductsListTabs y las tarjetas grid al prototipo en mobile.
   Solo ≤767px: desktop no cambia. Los !important pisan las reglas mobile del
   tema que ganaban por especificidad (padding de .product-description quedaba
   en 8.5px y el título en 12px pese al bloque global de arriba). */
@media (max-width: 767px) {
    /* pills de categorías: un toque más compactas para que entren más por fila */
    .elementor-products-tabs .nav-tabs {
        gap: 10px 12px;
        margin-bottom: 24px;
    }
    .elementor-products-tabs .nav-tabs .nav-link {
        padding: 10px 18px;
        font-size: 13px;
    }
    /* tarjetas grid (global, misma coherencia que el bloque de tarjetas):
       más padding interno y nombre legible */
    article.product-miniature-grid .product-description {
        padding: 12px 14px 16px !important;
    }
    article.product-miniature-grid .product-title {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px;
    }
    article.product-miniature-grid .product-reference {
        margin-bottom: 8px !important;
    }
}
/* ===== fin mobile prototipo ===== */

/* ===== Header mobile: buscador como barra debajo del logo (prototipo) (agregado via Claude) ===== */
/* Mobile header Style 1. El form ya existe en el DOM (#search-widget-mobile,
   dropdown que abría la lupa) → se oculta el toggle de la lupa y el dropdown
   pasa a ser estático, full-width, como segunda fila del header. Sin tocar
   el tpl (no requiere limpiar caché de Smarty ni tocar el JS del tema). */
#mobile-header .row-mobile-header { flex-wrap: wrap; }
#mobile-header .col-mobile-btn-search > a.m-nav-btn { display: none; }
#mobile-header .col-mobile-btn-search {
    flex: 0 0 100%;
    max-width: 100%;
    order: 10;
    padding: 0 12px; /* margen lateral como el prototipo */
}
#mobile-header #search-widget-mobile {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 12px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
#mobile-header #search-widget-mobile .input-group {
    position: relative;
    width: 100%;
    flex-wrap: nowrap;
}
#mobile-header #search-widget-mobile .form-search-control {
    height: 46px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #F5F5F5;
    padding: 0 46px 0 14px;
    font-size: 14px;
    width: 100%;
}
#mobile-header #search-widget-mobile .search-btn {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    z-index: 5;
    background: transparent;
    border: 0;
    color: #333;
    font-size: 17px;
    padding: 0 14px;
}
/* ===== fin buscador mobile ===== */

/* ===== Menú: "Alta Mayorista" como botón pill (prototipo) (agregado via Claude) ===== */
/* Item del megamenu desktop (li.cbp-hrmenu-tab-10). El <a> ocupa los 50px de
   la barra con line-height; se convierte en pill de 36px centrada (7+36+7=50,
   la altura de la barra no cambia). Hover: fondo blanco + texto negro. */
#cbp-hrmenu .cbp-hrmenu-tab-10 > a.nav-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 7px 0;
    padding: 0 24px;
    line-height: normal;
    border: 1px solid #fff;
    border-radius: 36px;
    transition: background .16s, border-color .16s;
}
#cbp-hrmenu .cbp-hrmenu-tab-10 > a.nav-link:hover {
    background: #fff;
}
#cbp-hrmenu .cbp-hrmenu-tab-10 > a.nav-link:hover .cbp-tab-title {
    color: #000;
}

/* ===== Aire lateral en páginas CMS (nosotros, alta mayorista, etc.) en mobile (agregado via Claude) ===== */
/* El contenido CMS quedaba a ~9px del borde (solo el gutter del .container). */
@media (max-width: 767px) {
    body#cms #content-wrapper { padding-left: 16px; padding-right: 16px; }
}

/* ===== Menú mobile: "Categorías" con chevron a la derecha (como prototipo) (agregado via Claude) ===== */
/* Reusa el mismo <i class="fa"> del tema: cambia el glyph a angle-down (\f107) y lo
   manda a la derecha. Sin tocar el tpl de iqitmegamenu (módulo pago).
   Ojo: si recrean el menú en el BO cambia el id -6 del selector (como el pill -10). */
@media (max-width: 767px) {
    #iqitmegamenu-mobile .mobile-menu__tab--id-6 > a { display: flex; align-items: center; }
    #iqitmegamenu-mobile .mobile-menu__tab--id-6 .mobile-menu__tab-icon { order: 2; margin-left: auto; }
    #iqitmegamenu-mobile .mobile-menu__tab--id-6 .mobile-menu__tab-icon::before { content: "\f107"; }
}
/* ===== fin menú mobile chevron ===== */

/* ===== Menú mobile: colores del prototipo (agregado via Claude) ===== */
#iqitmegamenu-mobile { background: #F3F3F3; }
#iqitmegamenu-mobile .mobile-menu__header-wrapper { background: #2D2D2D; }
#iqitmegamenu-mobile .mobile-menu__close,
#iqitmegamenu-mobile .mobile-menu__back-btn { color: #F3F3F3; }
#iqitmegamenu-mobile .mobile-menu__footer { background: #F6F6F6; }
#iqitmegamenu-mobile .mobile-menu__tab { border-bottom-color: #707070; }
/* ===== fin colores menú mobile ===== */

/* ===== Ficha mobile: cantidad + Añadir en una fila (como prototipo) (agregado via Claude) ===== */
/* Los cols son col-12 en mobile (se apilan). Los pasamos a: cantidad auto (chica),
   botón flex:1 (ocupa el resto), misma fila. */
@media (max-width: 767px) {
    .product-add-to-cart .product-quantity { align-items: center; flex-wrap: nowrap; }
    .product-add-to-cart .product-quantity .col-add-qty { flex: 0 0 auto; width: auto; max-width: none; }
    .product-add-to-cart .product-quantity .col-add-btn { flex: 1 1 auto; width: auto; max-width: none; }
}
/* ===== fin ficha mobile cantidad+añadir ===== */

/* ===== Ocultar switch de vista grid/lista en mobile (agregado via Claude) ===== */
/* visibility:hidden (no display:none) para no romper el flex del .row justify-content-between. */
@media (max-width: 767px) {
    /* vm_custom.css (vistamayorista) fuerza visible !important en los ICONOS a ≤576px;
       apuntamos a los iconos con igual especificidad (este custom.css carga ultimo). */
    .products-selection .view-switcher,
    .view-switcher.vm-mobile-view-switch-visible,
    .view-switcher [data-button-action="change-list-view"] { visibility: hidden !important; }
}
/* ===== fin Alta Mayorista pill ===== */

/* ===== Fix tarjetas "reassurance" ficha producto en mobile (agregado via Claude) ===== */
/* Problema: en mobile (<=767) iqitelementor aplica un margin-top distinto por-elemento
   al heading de cada tarjeta (Metodo de pago = 18.75px, Metodo de envio = 8.03px). Ese
   margen superior inflaba la columna de texto y empujaba el subtitulo contra el borde
   inferior (1px), dejando padding asimetrico, alturas distintas (53 vs 42px) y el icono
   desalineado respecto al texto. En desktop el margen es igual (3.95px) y se ve bien.
   Fix: anular ese margin-top y centrar verticalmente con una altura minima consistente,
   conservando los iconos a su tamano natural (igual que en desktop). */
@media (max-width: 767px) {
    .elementor-element-4l8iebi .elementor-widget-heading .elementor-widget-container,
    .elementor-element-yjqne14 .elementor-widget-heading .elementor-widget-container { margin-top: 0 !important; }

    .elementor-element-4l8iebi .elementor-row,
    .elementor-element-yjqne14 .elementor-row { align-items: center !important; min-height: 52px; }
}
/* ===== fin fix tarjetas reassurance ===== */

/* ===== Botón Enviar del contacto nativo: pill negro como el prototipo (agregado via Claude) ===== */
#contact input[name="submitMessage"] {
    background: #111111;
    border-color: #111111;
    border-radius: 36px;
}
#contact input[name="submitMessage"]:hover,
#contact input[name="submitMessage"]:focus {
    background: #2d2d2d;
    border-color: #2d2d2d;
}
/* ===== fin botón contacto ===== */

/* ===== Cards: ocultar el mensaje largo de disponibilidad en miniaturas (agregado via Claude) ===== */
/* Las cards grid (home/relacionados) imprimen el availability_message completo
   ("Sin stock. Luego de la compra...") y desborda como barra roja cortada.
   El mensaje completo vive en la ficha del producto; en la card lo ocultamos.
   La vista lista usa su propio badge corto ("Sin stock"), no tiene .product-availability. */
.product-miniature .product-availability { display: none !important; }
/* ===== fin cards disponibilidad ===== */