/* reCAPTCHA badge visibility policy
 * Hidden by default across storefront.
 * Visible only on the routes requested for trust signaling.
 */
html .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    bottom: 150px !important;
    transform: scale(0.88) !important;
    transform-origin: right bottom !important;
    z-index: 9999 !important;
    transition: opacity 0.2s ease !important;
}

html.route-information-contact .grecaptcha-badge,
html.route-checkout-checkout .grecaptcha-badge,
html.route-account-register .grecaptcha-badge,
html[class*="route-account-register_b2b"] .grecaptcha-badge {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 70px !important;
    overflow: hidden !important;
    transition: width 0.25s ease, opacity 0.2s ease !important;
}

html.route-information-contact .grecaptcha-badge:hover,
html.route-checkout-checkout .grecaptcha-badge:hover,
html.route-account-register .grecaptcha-badge:hover,
html[class*="route-account-register_b2b"] .grecaptcha-badge:hover,
html.route-information-contact .grecaptcha-badge:focus-within,
html.route-checkout-checkout .grecaptcha-badge:focus-within,
html.route-account-register .grecaptcha-badge:focus-within,
html[class*="route-account-register_b2b"] .grecaptcha-badge:focus-within {
    width: 256px !important;
}

@media (max-width: 767px) {
    html .grecaptcha-badge {
        right: 4px !important;
        top: auto !important;
        bottom: 150px !important;
        transform: scale(0.52) !important;
        transform-origin: right bottom !important;
    }
}


/* ------------------------- FIX UX/UI logos para las FORMAS DE PAGO---------------------------*/

.quick-checkout-wrapper .section-payment .radio {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.quick-checkout-wrapper .section-payment .radio label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    min-height: 66px !important;

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

    border: 1px solid #e5ebf2 !important;
    border-radius: 8px !important;
    background: #fff !important;

    gap: 0 !important;
    position: relative !important;
    cursor: pointer !important;
}

/* ICONO IZQUIERDA (más desplazado) */
.quick-checkout-wrapper .section-payment .radio[class*="payment-icon-"] label::before {
    content: "" !important;
    position: relative !important;
    transform: none !important;

    display: block !important;
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 30px !important;
    min-width: 70px !important;

    margin: 0 30px 0 -25px !important;
    /* AGREGAR MAS ESPACIO ENTRE LOGO Y TEXTO EN FORMAS DE PAGO*/
    padding: 0 !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    border: 0 !important;
}

/* TEXTO de lass formas de pago*/
.quick-checkout-wrapper .section-payment .radio label span {
    display: block !important;
    flex: 1 1 auto !important;

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

    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #2f3540 !important;

    white-space: normal !important;
}

/* RADIO DERECHA */
.quick-checkout-wrapper .section-payment .radio input[type="radio"] {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

/* quitar doble icono */
.quick-checkout-wrapper .section-payment .radio label::after {
    display: none !important;
}

/* seleccionado */
.quick-checkout-wrapper .section-payment .radio label:has(input[type="radio"]:checked) {
    border-color: #9fb1ca !important;
    box-shadow: 0 0 0 1px #9fb1ca inset !important;
}

/* ICONOS NORMALIZADOS */

/* VISA */
.quick-checkout-wrapper .section-payment .radio.payment-icon-redsys label::before {
    background-image: url('../../../../../image/catalog/payment-methods/visa.svg') !important;
    background-size: 52px auto !important;
}

/* BIZUM */
.quick-checkout-wrapper .section-payment .radio.payment-icon-bizum label::before {
    background-image: url('../../../../../image/catalog/payment-methods/bizum.svg') !important;
    background-size: 42px auto !important;
}

/* PAYPAL EXPRESS */
.quick-checkout-wrapper .section-payment .radio.payment-icon-pp_express label::before {
    background-image: url('../../../../../image/catalog/payment-methods/paypal.svg') !important;
    background-size: 52px auto !important;
}

/* PAYPAL TARJETAS */
.quick-checkout-wrapper .section-payment .radio.payment-icon-paypal label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-pp_standard label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_paylater label::before {
    background-image: url('../../../../../image/catalog/payment-methods/Paypal-tarjetas-internacionales-pago-3-meses.svg') !important;
    background-size: 60px auto !important;
}

/* REVOLUT */
.quick-checkout-wrapper .section-payment .radio.payment-icon-revolut label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_transfer label::before {
    background-image: url('../../../../../image/catalog/payment-methods/revolut-gateway.svg') !important;
    background-size: 50px auto !important;
}

/* BANCO */
.quick-checkout-wrapper .section-payment .radio.payment-icon-bank_transfer label::before {
    background-image: url('../../../../../image/catalog/payment-methods/bank.svg') !important;
    background-size: 48px auto !important;
}

/* CONTRAREEMBOLSO */
.quick-checkout-wrapper .section-payment .radio.payment-icon-cod label::before {
    background-image: url('../../../../../image/catalog/payment-methods/REEMBOLSO.svg') !important;
    background-size: 48px auto !important;
}

/* APLAZAME */
.quick-checkout-wrapper .section-payment .radio.payment-icon-aplazame label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-aplazame_new label::before {
    background-image: url('../../../../../image/catalog/payment-methods/aplazame.svg') !important;
    background-size: 58px auto !important;
}

/* APPLE / GOOGLE PAY */
.quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_applepay label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_googlepay label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_applepay label::before,
.quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_googlepay label::before {
    background-image: url('../../../../../image/catalog/payment-methods/applepay-googlepay.svg') !important;
    background-size: 58px auto !important;
}

/* MOBILE */
@media (max-width: 767px) {

    .quick-checkout-wrapper .section-payment .radio label {
        min-height: 64px !important;
        padding: 9px 48px 9px 8px !important;
    }

    .quick-checkout-wrapper .section-payment .radio[class*="payment-icon-"] label::before {
        flex-basis: 58px !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 30px !important;
        margin: 0 18px 0 -18px !important;
    }

    .quick-checkout-wrapper .section-payment .radio label span {
        font-size: 13px !important;
        line-height: 1.35 !important;
        padding-right: 12px !important;
        min-width: 0 !important;
    }

    /* Tamaños equilibrados de logos pago en mobile */
    .quick-checkout-wrapper .section-payment .radio.payment-icon-redsys label::before {
        background-size: 52px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-bizum label::before {
        background-size: 42px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-pp_express label::before {
        background-size: 50px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-paypal label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-pp_standard label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_paylater label::before {
        background-size: 50px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-revolut label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_transfer label::before {
        background-size: 50px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-bank_transfer label::before {
        background-size: 46px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-cod label::before {
        background-size: 46px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-aplazame label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-aplazame_new label::before {
        background-size: 52px auto !important;
    }

    .quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_applepay label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-revolut_googlepay label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_applepay label::before,
    .quick-checkout-wrapper .section-payment .radio.payment-icon-paypal_googlepay label::before {
        background-size: 52px auto !important;
    }
}



/* ---------------------> logos para los metodos de envio ------------------------------------------------*/

.quick-checkout-wrapper .section-shipping .radio {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.quick-checkout-wrapper .section-shipping .radio label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    min-height: 66px !important;

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

    border: 1px solid #e5ebf2 !important;
    border-radius: 8px !important;
    background: #fff !important;

    gap: 0 !important;
    position: relative !important;
    cursor: pointer !important;
}

.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-"] label::before {
    content: "" !important;
    position: relative !important;
    transform: none !important;

    display: block !important;
    flex: 0 0 78px !important;
    width: 78px !important;
    height: 32px !important;
    min-width: 78px !important;

    margin: 0 16px 0 -22px !important;
    padding: 0 !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    border: 0 !important;
}

/* TEXTO de las formas de envio */
.quick-checkout-wrapper .section-shipping .radio label span,
.quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-title {
    display: block !important;
    flex: 1 1 auto !important;

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

    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #2f3540 !important;

    white-space: normal !important;
}

.quick-checkout-wrapper .section-shipping .radio input[type="radio"] {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

.quick-checkout-wrapper .section-shipping .radio label::after {
    display: none !important;
}

.quick-checkout-wrapper .section-shipping .radio label:has(input[type="radio"]:checked) {
    border-color: #9fb1ca !important;
    box-shadow: 0 0 0 1px #9fb1ca inset !important;
}

/* DHL */
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-dhl"] label::before {
    background-image: url('../../../../../image/catalog/shipping-methods/DHL_Logo.svg') !important;
    background-size: 72px auto !important;
}

/* NACEX */
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-nacex"] label::before {
    background-image: url('../../../../../image/catalog/shipping-methods/nacex.svg') !important;
    background-size: 72px auto !important;
}

/* Envio Urgente */
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-free"] label::before,
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-flat"] label::before {
    background-image: url('../../../../../image/catalog/shipping-methods/Envio-urgente.svg') !important;
    background-size: contain !important;
}

/* EXW */
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-exw"] label::before {
    background-image: url('../../../../../image/catalog/shipping-methods/EXW-transport.svg') !important;
    background-size: contain !important;
}

/* Global / Internacional */
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-weight"] label::before,
.quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-xshippingpro"] label::before {
    background-image: url('../../../../../image/catalog/shipping-methods/shipping-global.svg') !important;
    background-size: contain !important;
}



/* MOBILE */
@media (max-width: 767px) {
    .quick-checkout-wrapper .section-shipping .radio label {
        min-height: 64px !important;
        padding: 9px 48px 9px 8px !important;
    }

    .quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-"] label::before {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        height: 32px !important;
        margin: 0 14px 0 -16px !important;
    }

    .quick-checkout-wrapper .section-shipping .radio label span,
    .quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-title {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;

        font-size: 13.5px !important;
        line-height: 1.35 !important;
        padding: 0 12px 0 0 !important;
        margin: 0 !important;

        position: static !important;
        top: auto !important;

        text-align: left !important;
        white-space: normal !important;
    }

    /* Evita que textos extra como “Selecciona tu punto DHL...” rompan la tarjeta */
    .quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-desc {
        display: none !important;
    }

    /* Tamaños equilibrados de logos envío en mobile */
    .quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-dhl"] label::before {
        background-size: 72px auto !important;
    }

    .quick-checkout-wrapper .section-shipping .radio[class*="shipping-icon-nacex"] label::before {
        background-size: 72px auto !important;
    }




    /* ------------------------- AJUSTES PARA EL MENSAJE DE ENTREGA URGENTE ----------------------- */
    .quick-checkout-wrapper .teaser_shipping.checkout {
        font-size: 13px !important;
        padding: 10px 15px !important;
    }
}

/* --- ESTILOS PARA MENSAJE DE ENTREGA URGENTE (TEASER SHIPPING) --- */
.quick-checkout-wrapper .teaser_shipping.checkout {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 12px 20px !important;
    color: #1a4a6e !important;
    font-weight: 400 !important;
}

.quick-checkout-wrapper .teaser_shipping.checkout b {
    font-weight: 700 !important;
    color: #003a7a !important;
}




/* ------------------------------------logo Nacex en el Modal de Puntos de Recogida -------------------------- */
.nacex-pickup-widget__title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
}

/* Móvil: Logo pequeño a la izquierda del título */
.nacex-pickup-widget__title::before {
    content: "" !important;
    display: inline-block !important;
    width: 60px !important;
    height: 20px !important;
    background-image: url('../../../../../image/catalog/shipping-methods/nacex.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

/* DESKTOP: Logo FLOTANTE en el espacio en blanco (No afecta al tamaño de nada) */
@media (min-width: 768px) {
    .nacex-pickup-widget__title::before {
        display: none !important;
    }

    .nacex-pickup-widget__search {
        position: relative !important;
        margin-bottom: 25px !important;
    }

    .nacex-pickup-widget__search::after {
        content: "" !important;
        position: absolute !important;
        right: 200px !important;
        top: 10% !important;
        transform: translateY(-50%) !important;

        width: 300px !important;
        height: 70px !important;
        background-image: url('../../../../../image/catalog/shipping-methods/nacex.svg') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
}

/* Ajustes generales del modal */
.nacex-pickup-widget__dialog,
.dhl-service-point-widget__dialog {
    padding: 25px !important;
}





/* ------------------------------------logo DHL en el Modal de Puntos de Recogida -------------------------- */
.dhl-service-point-widget__dialog-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
}

/* Móvil: Logo pequeño a la izquierda del título */
.dhl-service-point-widget__dialog-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 60px !important;
    height: 18px !important;
    background-image: url('../../../../../image/catalog/shipping-methods/DHL_Logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

/* DESKTOP: Logo FLOTANTE en el buscador (Igual que Nacex) */
@media (min-width: 768px) {
    .dhl-service-point-widget__dialog-title::before {
        display: none !important;
    }

    .dhl-service-point-widget__search-row {
        position: relative !important;
        margin-bottom: 25px !important;
    }

    .dhl-service-point-widget__search-row::after {
        content: "" !important;
        position: absolute !important;
        right: 200px !important;
        top: 10% !important;
        transform: translateY(-50%) !important;

        width: 250px !important;
        height: 70px !important;
        background-image: url('../../../../../image/catalog/shipping-methods/DHL_Logo.svg') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
}



/* --- FIX DE ALINEACIÓN POR COLUMNAS INDEPENDIENTES (DINÁMICO POR ESPACIO) --- */
@media (min-width: 1025px) {

    /* --- FLUIDEZ: Columna izquierda protegida y derecha expandible --- */
    .quick-checkout-wrapper>div {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .quick-checkout-wrapper>div>.left {
        width: 380px !important;
        flex: 0 0 380px !important;
        min-width: 380px !important;
    }

    .quick-checkout-wrapper>div>.right {
        width: calc(100% - 380px) !important;
        flex: 1 1 auto !important;
        max-width: calc(100% - 380px) !important;
    }

    /* CASO 1: Cuando el envío está en la columna DERECHA (Espacio Ancho) -> Usamos 2 columnas */
    #content .quick-checkout-wrapper .right .section-shipping .section-body {
        display: block !important;
        column-count: 2 !important;
        column-gap: 20px !important;
        width: 100% !important;
    }

    /* CASO 2: Cuando el envío está en la columna IZQUIERDA (Espacio Estrecho) -> Usamos 1 sola columna (Evita amontonar) */
    #content .quick-checkout-wrapper .left .section-shipping .section-body {
        display: block !important;
        column-count: 1 !important;
        width: 100% !important;
    }

    /* Estilo común para las cajas de envío para que no se corten entre columnas */
    #content .quick-checkout-wrapper .section-shipping .section-body>div {
        display: inline-block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
        break-inside: avoid !important;
    }

    /* El mensaje de entrega siempre debe ocupar el ancho completo de su sección */
    #content .quick-checkout-wrapper .section-shipping .section-body>.teaser_shipping.checkout {
        column-span: all !important;
        width: 100% !important;
        display: block !important;
        margin-top: 5px !important;
        margin-bottom: 0px !important;
        padding: 8px 15px !important;
    }
}

/* --- TAMAÑO DE FUENTE: MÉTODOS DE ENVÍO Y PAGO --- */

/* Desktop / tablet */
@media (min-width: 768px) {

    .quick-checkout-wrapper .section-shipping .radio label span,
    .quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-title,
    .quick-checkout-wrapper .section-payment .radio label span {
        font-size: 14.5px !important;
        font-weight: 400 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .quick-checkout-wrapper .section-shipping .radio label span,
    .quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-title,
    .quick-checkout-wrapper .section-payment .radio label span {
        font-size: 13.5px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    .quick-checkout-wrapper .section-shipping .radio label span.shipping-quote-desc {
        font-size: 12px !important;
    }

    /* Ajuste del círculo "i" de información en móvil (Dirección factura / ID o Pasaporte) */
    .client-type-help-btn {
        background: #fff !important;
        border: 1px solid rgba(231, 40, 77, 1) !important;
        width: 16px !important;
        height: 16px !important;
        line-height: 14px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        color: rgba(231, 40, 77, 1) !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
        margin-left: 6px !important;
        display: inline-block !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
}

/* --- CHECKOUT: BOTONES DE CUPÓN Y PUNTOS EN NEGRITA --- */
.quick-checkout-wrapper .reward-points-section .btn-primary,
.quick-checkout-wrapper .reward-points-section .btn-secondary,
.quick-checkout-wrapper .section-cvr .btn-primary,
.quick-checkout-wrapper .section-cvr .btn-secondary {
    font-weight: 700 !important;
}

/* --- ESTILOS MENSAJE DE PUNTOS (MINI-CARRITO Y OTROS) --- */
.devman-points-cart-message {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    border: 1px solid #bae6fd !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: center !important;
    display: block !important;
}

.devman-points-checkout-text {
    font-size: 13px !important;
    font-weight: 400 !important;
}

.devman-points-checkout-text b,
.devman-points-checkout-text strong {
    font-weight: 700 !important;
}

/* --- TAMAÑO DE PUNTOS PARA PC --- */
@media (min-width: 1025px) {
    .devman-points-cart-message {
        font-size: 13px !important;
        /* Pequeño para el mini carrito */
        white-space: nowrap;
    }

    .devman-points-cart-message b,
    .devman-points-cart-message strong {
        font-weight: 700 !important;
    }

    .devman-points-checkout-text {
        font-size: 14px !important;
        font-weight: 400 !important;
        /* Reducido para adaptarse a Bai Jamjuree */
    }

    .devman-points-checkout-text b,
    .devman-points-checkout-text strong {
        font-weight: 700 !important;
    }
}






/* ---------------------------------- PAGINA SUCCESS: TEXTO GRANDE Y PROFESIONAL (CONTENEDOR COMPLETO) ------------------------------------------------------------------------------ */
html.route-checkout-success #content {
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #1e293b !important;
    margin-top: 25px !important;
    /* Eliminado el margen que bajaba los iconos */
}

html.route-checkout-success #content p {
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

html.route-checkout-success #content a:not(.btn) {
    font-size: 18px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* --- PÁGINA DE CIERRE DE SESIÓN: CENTRADO Y GRANDE --- */
html.route-account-logout #content {
    padding: 10px 0 !important;
    /* Reducido de 80px a 40px para subir el contenido */
    text-align: center !important;
}

.logout-message-centered {
    font-size: 22px !important;
    line-height: 1.5 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    margin-bottom: 30px !important;
}

html.route-account-logout .buttons {
    display: none !important;
    /* Ocultamos el botón solo en esta página */
}





/* --------------------------- FIX MOBILE OPTIONS PANEL (Novedades & Grid Modules) --------------------------- */
@media (max-width: 767px) {

    /* 1) Rejilla móvil: 2 tallas por fila (evita columna única) */
    .product-thumb .options-qty-hover .options-qty-panel .option-qty-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 2) Cada talla ocupa media fila y se centra verticalmente en móviles */
    .product-thumb .options-qty-hover .options-qty-panel .option-qty-group .option-qty-row {
        float: none !important;
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* 3) Stepper visible y usable */
    .product-thumb .options-qty-hover .options-qty-panel .option-qty-group .option-qty-stepper.stepper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: stretch !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 2px auto 0 !important;
        overflow: hidden !important;
    }

    /* 4) Ajuste fino de input/flechas */
    .options-qty-panel .option-qty-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
        font-size: 13px !important;
        height: 28px !important;
        line-height: 28px !important;
    }

    .options-qty-panel .stepper span {
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .options-qty-panel .stepper span i {
        width: 100% !important;
        font-size: 10px !important;
    }

    /* 4b) En lista movil, el basic qty necesita reservar la columna de flechas
       o el numero queda tapado y parece vacio */
    .main-products.product-list .product-thumb .options-qty-hover .option-qty-basic .option-qty-stepper.stepper,
    .product-list .product-thumb .options-qty-hover .option-qty-basic .option-qty-stepper.stepper {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        display: inline-flex !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .main-products.product-list .product-thumb .options-qty-hover .option-qty-basic .option-basic-qty-input,
    .product-list .product-thumb .options-qty-hover .option-qty-basic .option-basic-qty-input {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 22px 0 6px !important;
        text-align: center !important;
        text-indent: 0 !important;
    }

    .main-products.product-list .product-thumb .options-qty-hover .option-qty-basic .option-qty-stepper.stepper span,
    .product-list .product-thumb .options-qty-hover .option-qty-basic .option-qty-stepper.stepper span {
        z-index: 2 !important;
    }

    /* 5) Compactar separación entre tallas y botones (elimina la franja blanca inferior) */
    .product-thumb div.options-qty-hover div.option-qty-actions {
        margin-top: 6px !important;
    }

    .product-thumb div.options-qty-hover div.option-qty-actions.option-qty-actions-secondary {
        margin-top: 4px !important;
    }

    /* 6) ELIMINAR FRANJAS BLANCAS RESIDUALES */

    /* Sincronizar el fondo del stepper completo cuando la talla está activa o sin stock */
    .option-qty-stepper:has(input.activo),
    .option-qty-stepper:has(input.activo) span {
        background-color: #5fb53b !important;
        /* Verde */
    }

    .option-qty-stepper:has(input.sin_stock),
    .option-qty-stepper:has(input.sin_stock) span {
        background-color: rgba(185, 24, 86, 1) !important;
        /* Rojo */
    }

    .option-qty-stepper:has(input.activo) span i,
    .option-qty-stepper:has(input.sin_stock) span i {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }


    /* Ajustar el contenedor de la fila para que no deje aire abajo */
    .options-qty-panel .option-qty-row {
        background-color: transparent !important;
        padding-bottom: 0 !important;
        margin-bottom: 4px !important;
        /* Espacio entre filas de tallas */
    }

    /* Eliminar franja blanca al final del panel (bajo los botones) */
    .options-qty-hover,
    .options-qty-panel {
        padding-bottom: 5px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .option-qty-actions-secondary {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 7) Fix: Ajustar el botón "Al Carrito" en el panel de opciones */
    .product-thumb .options-qty-panel .btn-cart {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
    }

    .product-thumb .options-qty-panel .btn-cart i {
        margin-right: 3px !important;
        font-size: 13px !important;
    }

    /* 8) Fix: Evitar que textos largos de productos se superpongan con el precio sin cortarlos y ALINEAR BOTONES Y PRECIOS AL FONDO */
    .product-thumb {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .product-thumb .caption {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        /* Permite que el caption llene el espacio vertical disponible */
    }

    .product-thumb .caption .name {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin-bottom: 8px !important;
        white-space: normal !important;
        flex: 1 1 auto !important;
        /* El nombre crece para ocupar todo el espacio libre, empujando el precio abajo */
        position: relative !important;
        overflow: visible !important;
        display: block !important;
    }

    .product-thumb .caption .name a {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
        display: block !important;
    }

    .product-thumb .caption .price {
        position: relative !important;
        bottom: auto !important;
        top: auto !important;
        margin-top: auto !important;
        /* Obliga al precio a irse al final del caption */
        flex: 0 0 auto !important;
        display: block !important;
    }

}

/* ==========================================================================
   FIX GLOBAL: LAYOUT DE PRECIOS EN TARJETAS DE PRODUCTO (TODAS LAS RESOLUCIONES)
   Extiende el fix que solo existía en móvil (max-width: 767px) para que los
   precios nunca se superpongan con el nombre ni el multicurrency cause overlap.
   ========================================================================== */
.product-thumb {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-thumb .caption {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
}

.product-thumb .caption .name {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
    flex: 1 1 auto !important;
    position: relative !important;
    overflow: visible !important;
    display: block !important;
}

.product-thumb .caption .name a {
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    display: block !important;
}

.product-thumb .caption .price {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: auto !important;
    flex: 0 0 auto !important;
    display: block !important;
}

/* Precio interior: flex en fila con alineación vertical y espacio para multicurrency */
.product-thumb .price>div {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 8px !important;
}

/* Multicurrency dentro de tarjetas de producto: compacto, estilo Chakra Regular (sin bold) y color gris de la tienda */
.product-thumb .price span.multicurrency {
    display: block !important;
    width: 100% !important;
    font-size: 14px !important;
    /* Tamaño absoluto elegante y legible */
    line-height: 1.3 !important;
    margin-top: 2px !important;
    opacity: 1 !important;
    color: rgba(85, 91, 109, 1) !important; /* Mismo gris que el precio grande */
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 400 !important; /* Chakra Regular sin negrita */
}

/* Ocultar multicurrency del precio tachado (ya se ve confuso con dos monedas ahí) */
.product-thumb .price .price-old span.multicurrency {
    display: none !important;
}

/* Garantizar que price-new y price-old tengan line-height suficiente */
.product-thumb .price .price-new,
.product-thumb .price .price-normal {
    line-height: 1.2 !important;
}

.product-thumb .price .price-old {
    line-height: 1.2 !important;
}


/* --- PRODUCT STICKY BAR MOBILE REFINEMENTS (VICTOR'S TASK) --- */
@media (max-width: 767px) {

    /* Main container: Reduce vertical padding and ensure it overrides OCMOD */
    html:not(.desktop) body div.add_to_cart_sticky {
        padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
        height: auto !important;
    }

    /* Grid layout to put Price and Tallas on one line, and Buttons below */
    /* Ocultar faldón cuando el menú lateral o popups están abiertos */
    html.mobile-menu-active div.add_to_cart_sticky,
    html.side-menu-active div.add_to_cart_sticky,
    html.popup-open div.add_to_cart_sticky,
    html.mobile-main-menu-active div.add_to_cart_sticky {
        display: none !important;
    }

    /* Ocultar elementos que tapan el faldón (Chat Oct8ne y Botón subir) */
    html:not(.desktop) body.pp-sticky-mobile-active .scroll-top,
    html:not(.desktop) body.pp-sticky-mobile-active #smartsupp-widget-container,
    html:not(.desktop) body.pp-sticky-mobile-active #tidio-chat-iframe,
    html:not(.desktop) body.pp-sticky-mobile-active .fb_reset,
    html:not(.desktop) body.pp-sticky-mobile-active #chat-widget-container,
    html:not(.desktop) body.pp-sticky-mobile-active #oct8ne-widget-dynamic,
    html:not(.desktop) body.pp-sticky-mobile-active .oct8ne-dynamic {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky div.product-details {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        row-gap: 5px !important;
        align-items: center !important;
    }

    /* Flatten hierarchy for grid: Price and Buttons are inside .price-and-button-group */
    html:not(.desktop) body div.add_to_cart_sticky .price-and-button-group {
        display: contents !important;
    }

    /* Price (Top Left) */
    html:not(.desktop) body div.add_to_cart_sticky div.product-price-group {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        order: 1 !important;
        display: block !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .product-info .product-details .price-group .product-price-new {
        font-size: 34px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: rgba(2, 37, 2, 1) !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .product-info .product-details .price-group .product-price-old {
        font-size: 13px !important;
        display: block !important;
        margin-top: -2px !important;
        opacity: 0.7 !important;
        color: #b91856 !important;
    }

    /* Tallas/Sizes (Top Right) */
    html:not(.desktop) body div.add_to_cart_sticky div.product-options {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        width: 100% !important;
        order: 2 !important;
        display: block !important;
    }

    /* Compact Sizes Grid (Horizontal scroll if many) */
    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        padding: 2px 0 !important;
        scrollbar-width: none !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-group::-webkit-scrollbar {
        display: none !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-row {
        flex: 0 0 54px !important;
        width: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-label {
        font-size: 10px !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
        text-align: center !important;
        display: block !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-stepper.stepper {
        height: 28px !important;
        min-height: 28px !important;
        width: 100% !important;
    }

    html:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-input {
        font-size: 12px !important;
        height: 28px !important;
        padding-right: 16px !important;
        padding-left: 0px !important;
        text-align: center !important;
    }

    /* Buttons (Bottom Full Width) */
    html:not(.desktop) body div.add_to_cart_sticky div.button-group-page,
    html:not(.desktop) body div.add_to_cart_sticky div.sticky-actions-slot {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        width: 100% !important;
        order: 3 !important;
        display: block !important;
    }

    /* Compact Buttons */
    html:not(.desktop) body div.add_to_cart_sticky .product-options-qty-actions .btn,
    html:not(.desktop) body div.add_to_cart_sticky .button-group-page .btn {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
        margin: 0 !important;
    }

    /* Hide Wishlist/Compare in sticky to save more vertical space */
    html:not(.desktop) body div.add_to_cart_sticky .btn.btn-wishlist,
    html:not(.desktop) body div.add_to_cart_sticky .btn.btn-compare,
    html:not(.desktop) body div.add_to_cart_sticky .wishlist-compare {
        display: none !important;
    }

    /* Extra whitespace cleanup */
    html:not(.desktop) body div.add_to_cart_sticky .product-info {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ==========================================================================
   ESTILOS EXCLUSIVOS PARA LA VISTA "LISTA" EN MÓVILES Y TABLETS (<= 1024px)
   Afecta: Tallas, Al Carrito, Rayo, Favoritos y Comparar
   Se aplica sólo a la vista lista (.product-list) y no a cuadrícula
   ========================================================================== */
@media (max-width: 1024px) {

    /* --- 1. Contenedor Principal de Opciones --- */
    .product-list .product-thumb .options-qty-panel {
        display: block !important;
        width: 100% !important;
        padding-bottom: 5px !important;
    }

    /* --- 2. Tallas (Sizes) --- */
    .product-list .product-thumb .options-qty-panel .option-qty-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin-bottom: 12px !important;
    }

    .product-list .product-thumb .options-qty-panel .option-qty-row {
        flex: 0 0 calc(33.333% - 6px) !important;
        /* 3 tallas por fila */
        max-width: calc(33.333% - 6px) !important;
        margin: 0 !important;
    }

    /* --- 3. Botones Principales (Al Carrito + Rayo) --- */
    .product-list .product-thumb .options-qty-panel .option-qty-actions:not(.option-qty-actions-secondary) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        justify-content: space-between !important;
    }

    /* Botón "Al Carrito" */
    .product-list .product-thumb .options-qty-panel .option-qty-actions .btn-cart-add {
        flex: 1 1 auto !important;
        width: auto !important;
        border-radius: 6px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Botón "Rayo" (Compra rápida) */
    .product-list .product-thumb .options-qty-panel .option-qty-actions .fastbuy {
        flex: 0 0 45px !important;
        width: 45px !important;
        border-radius: 6px !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- 4. Botones Secundarios (Favoritos + Comparar) --- */
    .product-list .product-thumb .options-qty-panel .option-qty-actions-secondary {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
        border-top: none !important;
        padding-top: 5px !important;
        margin-top: 0 !important;
    }

    .product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist,
    .product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare {
        flex: 0 0 auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #64748b !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
        font-weight: 500 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist i,
    .product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare i {
        margin-right: 4px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   FIX: POPUP AVISAME
   Asegura que la ventanita emergente siempre esté por encima del lateral (z-index)
   ========================================================================== */
div#NotifyWhenAvailable_popup,
.NWA_popover {
    z-index: 2147483647 !important;
}

.modal-backdrop.fade.in {
    z-index: 2147483646 !important;
}

/* ==========================================================================
   OPTIMIZACION RESPONSIVA: TABLAS DE HISTORIAL DE PEDIDOS Y DETALLES (MOVIL/TABLET)
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Contenedores de tabla responsivos de estilo premium */
    #account-order .table-responsive {
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
        background: #ffffff !important;
        margin-bottom: 24px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #account-order table.table {
        margin-bottom: 0 !important;
        border: none !important;
    }

    #account-order table.table td,
    #account-order table.table th {
        padding: 10px 8px !important;
        font-size: 12px !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    /* 2. OPTIMIZACIÓN DE VISTA PRINCIPAL (LISTA DE PEDIDOS) */
    /* Ocultar la columna redundante del Cliente (siempre es el mismo usuario logueado) para ganar espacio en móvil */
    #account-order .order-history-search-panel+.table-responsive table thead tr td:nth-child(2),
    #account-order .order-history-search-panel+.table-responsive table tbody tr td:nth-child(2) {
        display: none !important;
    }

    #account-order .order-history-search-panel+.table-responsive table td {
        text-align: center !important;
    }

    #account-order .order-history-search-panel+.table-responsive table tbody tr td:nth-child(1) {
        /* ID Pedido */
        font-weight: 700 !important;
        color: #1e293b !important;
    }

    #account-order .order-history-search-panel+.table-responsive table tbody tr td:nth-child(5) {
        /* Total */
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    #account-order .order-history-search-panel+.table-responsive table tbody tr td:nth-child(4) {
        /* Estado */
        font-weight: 600 !important;
        color: #475569 !important;
    }

    /* Estilo premium del enlace de tracking en móviles */
    #account-order a.nacex_tracking.list {
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        display: inline-block !important;
        margin: 2px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }

    /* Ajustar el botón del ojo de acción en lista de pedidos */
    #account-order .order-history-search-panel+.table-responsive table tbody tr td:last-child .btn {
        padding: 6px 10px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: auto !important;
        height: 28px !important;
        width: 32px !important;
    }

    /* 3. OPTIMIZACIÓN DE VISTA DE DETALLES DEL PEDIDO (AL PULSAR EL OJO) */

    /* A) Tabla de Productos: Permitir que el nombre del producto se envuelva de forma natural */
    #account-order table.table-order th:nth-child(1),
    #account-order table.table-order td:nth-child(1) {
        white-space: normal !important;
        min-width: 140px !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }

    #account-order table.table-order th:not(:first-child),
    #account-order table.table-order td:not(:first-child) {
        text-align: center !important;
    }

    /* B) Tabla de Historial (Fecha Alta, Estado, Comentario):
       Convertimos la tabla en móvil en un listado de bloques limpios y compactos para eliminar espacios vacíos
       y que el comentario/instrucciones ocupen el 100% del ancho de forma súper legible. */
    #account-order h2+.table-responsive {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #account-order h2+.table-responsive table {
        display: block !important;
        width: 100% !important;
    }

    #account-order h2+.table-responsive table thead {
        display: none !important;
        /* Ocultamos cabecera de tabla en móvil */
    }

    #account-order h2+.table-responsive table tbody {
        display: block !important;
        width: 100% !important;
    }

    #account-order h2+.table-responsive table tbody tr {
        display: block !important;
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
        box-sizing: border-box !important;
    }

    #account-order h2+.table-responsive table tbody tr td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* Fila 1: Fecha Alta */
    #account-order h2+.table-responsive table tbody tr td:nth-child(1) {
        display: inline-block !important;
        width: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        vertical-align: middle !important;
    }

    /* Fila 2: Estado (Como una bonita etiqueta al lado de la fecha) */
    #account-order h2+.table-responsive table tbody tr td:nth-child(2) {
        display: inline-block !important;
        width: auto !important;
        margin-left: 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        background: #f1f5f9 !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        border: 1px solid #cbd5e1 !important;
        text-transform: uppercase !important;
        vertical-align: middle !important;
        text-align: center !important;
    }

    /* Fila 3: Comentario (Instrucciones Bancarias) */
    #account-order h2+.table-responsive table tbody tr td:nth-child(3) {
        display: block !important;
        width: 100% !important;
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid #f1f5f9 !important;
        white-space: normal !important;
        font-size: 12.5px !important;
        color: #1e293b !important;
        line-height: 1.5 !important;
    }

    /* C) Tabla 1: Detalles del Pedido (Estado, Pedido ID, Método de Pago/Envío)
       Apilamos las dos columnas en vertical para dar ancho completo y evitar que el botón de tracking azul se corte.
       Usamos el combinador de hijo directo (>) para no afectar NUNCA a la tabla de productos ni de historial. */
    #account-order #content>table:nth-of-type(1) tbody tr td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }

    #account-order #content>table:nth-of-type(1) tbody tr td:first-child {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Permitir que la alerta azul de tracking se envuelva naturalmente sin recortarse en móvil */
    #account-order .teaser_shipping.checkout {
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
    }

    /* D) Tabla 2: Direcciones de Pago y Envío
       Apilamos ambas direcciones verticalmente con sus títulos correspondientes para lectura perfecta.
       Usamos el combinador de hijo directo (>) para no afectar NUNCA a la tabla de productos ni de historial. */
    #account-order #content>table:nth-of-type(2) thead {
        display: none !important;
        /* Ocultamos la cabecera original */
    }

    #account-order #content>table:nth-of-type(2) tbody tr td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    #account-order #content>table:nth-of-type(2) tbody tr td:first-child {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Insertamos los títulos de dirección dinámicamente */
    #account-order #content>table:nth-of-type(2) tbody tr td:nth-child(1)::before {
        content: "Dirección de facturación" !important;
        display: block !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        color: #0f172a !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    #account-order #content>table:nth-of-type(2) tbody tr td:nth-child(2)::before {
        content: "Dirección de Envío" !important;
        display: block !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        color: #0f172a !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

/* -------------------------------------- BOTÓN DE CANTIDAD PDP DESKTOP: ALTURA IDÉNTICA A LOS BOTONES ADYACENTES -------------------------------------- */
@media (min-width: 1025px) {
    #product .stepper-group.cart-group .stepper {
        height: 38px !important;
        overflow: hidden !important;
        /* Evita que el selector se estire si las flechas internas se desbordan */
    }
}

/* ------------------------------- CHECKOUT: CORRECCIÓN DE COLOR DE FUENTE Y FONDO EN HOVER/ACTIVE/FOCUS DEL BOTÓN DE CONFIRMAR PEDIDO ------------------------------- */
#quick-checkout-button-confirm:hover,
#quick-checkout-button-confirm:hover *,
#quick-checkout-button-confirm:active,
#quick-checkout-button-confirm:active *,
#quick-checkout-button-confirm:focus,
#quick-checkout-button-confirm:focus *,
.confirm-section .confirm-buttons .btn-primary:hover,
.confirm-section .confirm-buttons .btn-primary:hover *,
.confirm-section .confirm-buttons .btn-primary:active,
.confirm-section .confirm-buttons .btn-primary:active *,
.confirm-section .confirm-buttons .btn-primary:focus,
.confirm-section .confirm-buttons .btn-primary:focus * {
    color: #ffffff !important;
    background-color: #000000 !important;
    background: #000000 !important;
}


/* -------------------------------------- PRODUCTO: SOLUCIÓN DE HUECO / GAP EN POPUP DE TALLAS AL MOVER CURSOR DESDE BOTÓN COMPRAR -------------------------------------- */
/* Puente transparente para que al mover el cursor hacia arriba desde el botón "Comprar", no se pierda el hover por el hueco físico */
.product-thumb .options-qty-hover::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: 35px !important;
    /* Cubre el hueco físico (~8px a 30px) entre el botón y el panel */
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Puente transparente secundario para el selector de B2B / Notify When Available en caso de que esté presente */
.nwa-b2b-oos-dropdown-face {
    position: relative !important;
}

.nwa-b2b-oos-dropdown-face::after {
    content: "" !important;
    position: absolute !important;
    bottom: -25px !important;
    left: 0 !important;
    width: 100% !important;
    height: 25px !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* -------------------------------------- PRODUCTO: SOLUCIÓN DE COLAPSO DE FONDO BLANCO EN POPUP AL ABRIR DROPDOWN DE TALLAS SIN STOCK -------------------------------------- */
/* Evita que el contenedor colapse su altura al cambiar overflow a visible cuando se abre el desplegable B2B */
.options-qty-panel::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ==========================================================================
   FIX: ALINEACION TEXTO MULTILINEA RADIO BUTTONS CHECKOUT (DIRECCIONES)
   ========================================================================== */
.quick-checkout-wrapper .section-login .radio label,
.quick-checkout-wrapper .section-register .radio label,
.quick-checkout-wrapper .payment-address .radio label,
.quick-checkout-wrapper .shipping-address .radio label,
.quick-checkout-wrapper .payment-address .checkbox label,
.quick-checkout-wrapper .shipping-address .checkbox label,
.quick-checkout-wrapper .checkbox.checkout-same-address label {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* Centrado vertical perfecto */
    column-gap: 8px !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    flex-direction: row !important;
}

.quick-checkout-wrapper .section-login .radio input[type="radio"],
.quick-checkout-wrapper .section-register .radio input[type="radio"],
.quick-checkout-wrapper .payment-address .radio input[type="radio"],
.quick-checkout-wrapper .shipping-address .radio input[type="radio"],
.quick-checkout-wrapper .payment-address .checkbox input[type="checkbox"],
.quick-checkout-wrapper .shipping-address .checkbox input[type="checkbox"],
.quick-checkout-wrapper .checkbox.checkout-same-address input[type="checkbox"] {
    position: static !important;
    margin: 0 !important;
    /* Remueve margen superior desalineado */
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* ==========================================================================
   TIPOGRAFÍA AJUSTADA PARA LOS ENLACES DE ORDENACIÓN EN CATEGORÍAS
   ========================================================================== */
.products-filter .sort-link {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

/* ==========================================================================
   TIPOGRAFÍA PARA EL SELECTOR "MOSTRAR" EN FILTRO DE CATEGORÍAS
   ========================================================================== */
.products-filter .select-group .input-group-addon,
.products-filter .select-group select,
.products-filter .select-group label,
.products-filter .select-group .form-control,
.products-filter select#input-limit,
.products-filter select#input-sort {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    /* Mismo tamaño de letra que los botones */
    font-weight: 500 !important;
    color: #475569 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

/* Remover efectos de hover/focus indeseados sobre el selector y bloquear tamaño/tipografía */
.products-filter .select-group select:hover,
.products-filter .select-group select:focus,
.products-filter .select-group select:active,
.products-filter .select-group .form-control:hover,
.products-filter .select-group .form-control:focus,
.products-filter .select-group .form-control:active,
.products-filter select#input-limit:hover,
.products-filter select#input-limit:focus,
.products-filter select#input-limit:active,
.products-filter select#input-sort:hover,
.products-filter select#input-sort:focus,
.products-filter select#input-sort:active {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   AJUSTES MINI CARRITO LATERAL PARA NUEVAS TIPOGRAFIAS
   ========================================================================== */
/* ==========================================================================
   ESTILOS GENERALES DEL MINI-CARRITO (PC Y MOVIL)
   ========================================================================== */
.cart-content .cart-products .td-name a,
#cart-content .cart-products .td-name a {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.cart-content .cart-products .td-qty,
.cart-content .cart-products .td-total,
#cart-content .cart-products .td-qty,
#cart-content .cart-products .td-total {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Filas generales de subtotales, envío y tasas */
.cart-content .cart-totals .td-total-title,
#cart-content .cart-totals .td-total-title {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    /* Gris pizarra elegante */
}

.cart-content .cart-totals .td-total-text,
#cart-content .cart-totals .td-total-text {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Fila del Total Definitivo (última fila para destacar) */
.cart-content .cart-totals tr:last-child .td-total-title,
#cart-content .cart-totals tr:last-child .td-total-title {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.cart-content .cart-totals tr:last-child .td-total-text,
#cart-content .cart-totals tr:last-child .td-total-text {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

#cart-content .cart-buttons .btn {
    font-size: 14px !important;
    font-family: inherit !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   ALINEACION DEL ASTERISCO DE REQUERIDOS
   ========================================================================== */
.required .control-label::after {
    top: 3px !important;
    display: inline-block !important;
}

.required .control-label+div::before {
    top: 4px !important;
}

/* ==========================================================================
   AJUSTES DEL BUSCADOR DE PRODUCTOS EN EL CHECKOUT
   ========================================================================== */
.quick-checkout-wrapper .right .cart-section .section-body .checkout-product-search-container .product-search-title {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

/* ==========================================================================
   AJUSTES DE LA TABLA DE PRODUCTOS EN EL CHECKOUT (ESCRITORIO Y TABLET)
   ========================================================================== */
/* Cabeceras de la tabla (Subtítulos de columna) */
.quick-checkout-wrapper .cart-section table thead th {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

/* Celdas de la tabla (Contenido) */
.quick-checkout-wrapper .cart-section table tbody td {
    padding: 12px 10px !important;
    vertical-align: middle !important;
}

/* Nombre de producto */
.quick-checkout-wrapper .cart-section table tbody td.td-name a {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    transition: color 0.2s ease !important;
}

.quick-checkout-wrapper .cart-section table tbody td.td-name a:hover {
    color: #e7284d !important;
}

/* Atributos y opciones debajo del nombre */
.quick-checkout-wrapper .cart-section table tbody td.td-name small,
.quick-checkout-wrapper .cart-section table tbody td.td-name .option {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Modelo */
.quick-checkout-wrapper .cart-section table tbody td.td-model {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
}

/* Entrada de cantidad stepper */
.quick-checkout-wrapper .cart-section table tbody td.td-qty input {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Precios y Totales */
.quick-checkout-wrapper .cart-section table tbody td.td-price,
.quick-checkout-wrapper .cart-section table tbody td.td-total {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Totales en la parte inferior de la tabla */
.quick-checkout-wrapper .cart-section table tfoot td,
.quick-checkout-wrapper .cart-section .cart-total table td {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.quick-checkout-wrapper .cart-section table tfoot td:not(:last-child),
.quick-checkout-wrapper .cart-section .cart-total table td:not(:last-child) {
    font-weight: 500 !important;
    color: #475569 !important;
}

.quick-checkout-wrapper .cart-section table tfoot td:last-child,
.quick-checkout-wrapper .cart-section .cart-total table td:last-child {
    font-weight: 600 !important;
}

.quick-checkout-wrapper .cart-section table tfoot tr:last-child td,
.quick-checkout-wrapper .cart-section .cart-total table tr:last-child td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* ==========================================================================
   AJUSTES DE CONTENIDOS Y ETIQUETAS DE FORMULARIO EN EL CHECKOUT
   ========================================================================== */
/* Espaciado de los campos del formulario en el checkout (Relación visual etiqueta-input) */
.quick-checkout-wrapper .payment-address .form-group,
.quick-checkout-wrapper .shipping-address .form-group,
.quick-checkout-wrapper .section-login .form-group,
.quick-checkout-wrapper .section-register .form-group {
    margin-bottom: 18px !important;
    /* Espacio premium para separar campos adyacentes */
}

@media (max-width: 767px) {

    .quick-checkout-wrapper .payment-address .form-group,
    .quick-checkout-wrapper .shipping-address .form-group,
    .quick-checkout-wrapper .section-login .form-group,
    .quick-checkout-wrapper .section-register .form-group {
        margin-bottom: 14px !important;
        /* Más compacto en dispositivos móviles */
    }
}

/* Etiquetas de campos de formulario (ej: Nombre, Apellidos, Email, etc.) */
.quick-checkout-wrapper label.control-label,
.quick-checkout-wrapper .form-group>label.control-label,
.quick-checkout-wrapper #reward-points-checkout-host .form-group .control-label,
.quick-checkout-wrapper #wallet-checkout-host .form-group .control-label {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    /* Refinado para armonía visual */
    font-weight: 500 !important;
    /* Semi-regular muy legible */
    color: #475569 !important;
    /* Gris pizarra elegante */
    text-transform: none !important;
    letter-spacing: 0px !important;
    margin-bottom: 4px !important;
    /* Acerca la etiqueta a su propio input/select */
    padding-bottom: 0 !important;
}

/* Opciones de tipo Radio y Checkbox (ej: Soy Cliente, Registrar Cuenta, Autónomo, Misma dirección...) */
.quick-checkout-wrapper .section-login .radio label,
.quick-checkout-wrapper .section-register .radio label,
.quick-checkout-wrapper .payment-address .radio label,
.quick-checkout-wrapper .shipping-address .radio label,
.quick-checkout-wrapper .form-group.address-client-type .radio label,
.quick-checkout-wrapper .checkbox label {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    /* Refinado a 13px */
    font-weight: 400 !important;
    /* Regular suave */
    color: #334155 !important;
    line-height: 1.4 !important;
}

/* Cuando un radio/checkbox está activo, le damos un poquito más de peso para destacar la selección */
.quick-checkout-wrapper .radio label:has(input:checked),
.quick-checkout-wrapper .checkbox label:has(input:checked) {
    font-weight: 500 !important;
    color: #1e293b !important;
}

/* Cuadros de entrada de texto, desplegables y áreas de comentarios */
.quick-checkout-wrapper input.form-control,
.quick-checkout-wrapper select.form-control,
.quick-checkout-wrapper textarea.form-control,
.quick-checkout-wrapper .right .section-cvr input.form-control {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13.5px !important;
    /* Reducción elegante de la escala gigante */
    font-weight: 400 !important;
    color: #1e293b !important;
}

/* Marcadores de posición (placeholders) de campos */
.quick-checkout-wrapper input.form-control::placeholder,
.quick-checkout-wrapper textarea.form-control::placeholder {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
}

/* Enlace Contraseña Olvidada (Estilizado e integrado) */
.quick-checkout-wrapper .section-login .login-form a {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e7284d !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 6px !important;
    transition: opacity 0.2s ease !important;
}

.quick-checkout-wrapper .section-login .login-form a:hover {
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   VERSION PC (ESCRITORIO): FORZAR MISMOS TAMAÑOS QUE FORMAS DE PAGO (14.5PX)
   ========================================================================== */
@media (min-width: 1025px) {

    /* Etiquetas de campos de formulario en PC */
    .quick-checkout-wrapper label.control-label,
    .quick-checkout-wrapper .form-group>label.control-label,
    .container .quick-checkout-wrapper label.control-label,
    .container .quick-checkout-wrapper .form-group>label.control-label,
    .quick-checkout-wrapper #reward-points-checkout-host .form-group .control-label,
    .quick-checkout-wrapper #wallet-checkout-host .form-group .control-label {
        font-size: 14.5px !important;
    }

    /* Opciones tipo Radio y Checkbox en PC (Soy Cliente, Registrar Cuenta, Factura, Entrega, etc.) */
    .quick-checkout-wrapper .section-login .radio label,
    .quick-checkout-wrapper .section-register .radio label,
    .quick-checkout-wrapper .payment-address .radio label,
    .quick-checkout-wrapper .shipping-address .radio label,
    .quick-checkout-wrapper .form-group.address-client-type .radio label,
    .quick-checkout-wrapper .checkbox label,
    .container .quick-checkout-wrapper .section-login .radio label,
    .container .quick-checkout-wrapper .section-register .radio label,
    .container .quick-checkout-wrapper .payment-address .radio label,
    .container .quick-checkout-wrapper .shipping-address .radio label,
    .container .quick-checkout-wrapper .checkbox label {
        font-size: 14.5px !important;
    }

    /* Campos de entrada de texto, áreas de comentarios y desplegables (país/provincia) en PC */
    .quick-checkout-wrapper input.form-control,
    .quick-checkout-wrapper select.form-control,
    .quick-checkout-wrapper textarea.form-control,
    .quick-checkout-wrapper .right .section-cvr input.form-control,
    .quick-checkout-wrapper select,
    .quick-checkout-wrapper select#input-payment-country,
    .quick-checkout-wrapper select#input-payment-zone,
    .quick-checkout-wrapper select#input-shipping-country,
    .quick-checkout-wrapper select#input-shipping-zone,
    .quick-checkout-wrapper .bootstrap-select .btn,
    .container .quick-checkout-wrapper input.form-control,
    .container .quick-checkout-wrapper select.form-control,
    .container .quick-checkout-wrapper textarea.form-control,
    .container .quick-checkout-wrapper select,
    .container .quick-checkout-wrapper .bootstrap-select .btn {
        font-size: 14.5px !important;
    }

    /* Marcadores de posición de campos en PC */
    .quick-checkout-wrapper input.form-control::placeholder,
    .quick-checkout-wrapper textarea.form-control::placeholder,
    .container .quick-checkout-wrapper input.form-control::placeholder,
    .container .quick-checkout-wrapper textarea.form-control::placeholder {
        font-size: 13.5px !important;
    }

    /* Nombre del Producto y Atributos en PC (Estética unificada con móvil) */
    .quick-checkout-wrapper .cart-section .table-responsive table tbody td.td-product a {
        font-family: 'Bai Jamjuree', sans-serif !important;
        font-weight: 400 !important;
        font-size: 13.5px !important;
        color: #111111 !important;
        text-decoration: none !important;
        display: block !important;
    }

    .quick-checkout-wrapper .cart-section .table-responsive table tbody td.td-product small {
        display: inline-block !important;
        font-family: 'Bai Jamjuree', sans-serif !important;
        color: #111111 !important;
        font-size: 13px !important;
        /* Más grande en PC a petición de Víctor */
        margin-top: 4px !important;
        background: none !important;
        /* Sin fondo gris a petición de Víctor */
        padding: 0px !important;
        /* Sin relleno para que se alinee limpio */
        border-radius: 0px !important;
        font-weight: 400 !important;
    }
}

/* ==========================================================================
   GLOBAL: OCULTAR REFERENCIA DE LA TABLA DE PRODUCTOS (PC Y MOVIL)
   ========================================================================== */
.quick-checkout-wrapper .cart-section .table-responsive table td.td-model,
.quick-checkout-wrapper .cart-section .table-responsive table th.td-model,
.quick-checkout-wrapper .cart-section .table-responsive table thead td.td-model {
    display: none !important;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA DE LA BARRA DE ORDENACIÓN EN CATEGORÍAS
   Ajuste dinámico para pantallas de laptop (1280px) y tablets (PC y iPad)
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1400px) {

    /* Reducir el gap de los botones en pantallas medianas / laptops (1280px) */
    .products-filter .sort-links {
        gap: 8px !important;
    }

    /* Reducir el tamaño de fuente y el relleno de los botones individuales */
    .products-filter .sort-link {
        font-size: 11px !important;
        /* Más compacto para resoluciones reducidas */
        padding: 5px 10px !important;
        /* Relleno compacto que optimiza espacio */
        min-height: 30px !important;
        /* Altura armoniosa compacta */
        letter-spacing: 0px !important;
    }

    /* Reducir el tamaño de fuente del selector de cantidad "Mostrar" */
    .products-filter select#input-limit,
    .products-filter select#input-sort,
    .products-filter .select-group .input-group-addon,
    .products-filter .select-group label {
        font-size: 11px !important;
    }

    /* Reducir el padding de la barra en general */
    .products-filter {
        padding: 6px 10px !important;
        gap: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* Ajuste extra compacto para tablets (iPad horizontal) y pantallas muy pequeñas */
    .products-filter .sort-links {
        gap: 5px !important;
    }

    .products-filter .sort-link {
        font-size: 10px !important;
        padding: 4px 6px !important;
        min-height: 28px !important;
        letter-spacing: 0px !important;
        border-radius: 6px !important;
    }

    .products-filter select#input-limit,
    .products-filter select#input-sort,
    .products-filter .select-group .input-group-addon,
    .products-filter .select-group label {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   REJILLA DE CATEGORÍAS RESPONSIVA: 2 COLUMNAS EN TABLETS Y PANTALLAS MEDIANAS
   Evita que las tarjetas de producto se estrechen demasiado y las palabras se partan
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    .route-product-category .main-products.product-grid .product-layout,
    .route-product-search .main-products.product-grid .product-layout,
    .products-filter-active .main-products.product-grid .product-layout {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* ==========================================================================
   BOTONES DE ACCIONES SECUNDARIAS (FAVORITOS Y COMPARAR) EN PANTALLAS ESTRECHAS
   Oculta el texto y centra únicamente los iconos para evitar solapamientos
   ========================================================================== */
@media (max-width: 1200px) {

    .product-thumb div.options-qty-hover .option-qty-actions-secondary .btn-wishlist,
    .product-thumb div.options-qty-hover .option-qty-actions-secondary .btn-compare,
    .options-qty-panel .option-qty-actions-secondary .btn-wishlist,
    .options-qty-panel .option-qty-actions-secondary .btn-compare {
        font-size: 0 !important;
        /* Oculta el texto */
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .product-thumb div.options-qty-hover .option-qty-actions-secondary .btn-wishlist i,
    .product-thumb div.options-qty-hover .option-qty-actions-secondary .btn-wishlist::before,
    .product-thumb div.options-qty-hover .option-qty-actions-secondary .btn-compare::before,
    .options-qty-panel .option-qty-actions-secondary .btn-wishlist i,
    .options-qty-panel .option-qty-actions-secondary .btn-wishlist::before,
    .options-qty-panel .option-qty-actions-secondary .btn-compare::before {
        font-size: 16px !important;
        /* Iconos más grandes y claros */
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-indent: 0 !important;
        float: none !important;
        display: inline-block !important;
    }
}

/* ==========================================================================
   DISEÑO Y COMBINACIÓN DE COLORES PARA PASOS DE SELECCIÓN DE CANTIDAD (STEPPER)
   ========================================================================== */

/* Centrado absoluto global de tallas y selectores (para todos los anchos de dispositivo, PC, tablet y móvil) */
html body .options-qty-panel .option-qty-row,
html body .options-qty-panel .option-qty-group .option-qty-row,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-row,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-row,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-row,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

html body .options-qty-panel .option-qty-label,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-label,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-label,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-label,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-label,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

html body .options-qty-panel .option-qty-name,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-name,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-name,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-name,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-name,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-name {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

html body .options-qty-panel .option-qty-stepper.stepper,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-stepper.stepper,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-stepper.stepper,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-stepper.stepper,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-stepper.stepper,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-stepper.stepper {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 2px auto 0 !important;
    box-sizing: border-box !important;
}

/* Forzar el número del selector de cantidad a 16px (tamaño ideal, ni gigante ni minúsculo) con máxima especificidad */
html body #product div.options-qty-panel input,
html body #product div.options-qty-panel input.form-control,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input.form-control,
html body .option-qty-input,
html body .stepper input.option-qty-input,
html body .option-qty-stepper input,
html body #product .option-qty-input,
html body #product .stepper input,
html body .options-qty-panel .option-qty-input,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-input,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-input,
html body div.add_to_cart_sticky .options-qty-panel .option-qty-input,
html body:not(.desktop) div.add_to_cart_sticky .options-qty-panel .option-qty-input,
html body.desktop div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper .option-qty-input {
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding-right: 16px !important;
    padding-left: 0px !important;
    box-sizing: border-box !important;
}

/* Sincronizar el fondo del stepper completo (incluyendo botones e iconos) en todas las páginas cuando la talla está activa o sin stock para eliminar franjas blancas */
html body #product div.options-qty-panel input.activo,
html body #product div.options-qty-panel input.form-control.activo,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input.activo,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input.form-control.activo,
html body .option-qty-input.activo,
html body .stepper input.option-qty-input.activo,
html body .option-qty-stepper input.activo,
html body #product .option-qty-input.activo,
html body #product .stepper input.activo,
html body .options-qty-panel .option-qty-input.activo,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-input.activo,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-input.activo,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-input.activo,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-input.activo,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-input.activo,
html body div.add_to_cart_sticky .options-qty-panel .option-qty-input.activo,
html body:not(.desktop) body div.add_to_cart_sticky .options-qty-panel .option-qty-input.activo,
html body.desktop div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper .option-qty-input.activo,
html body input.form-control.option-qty-input.activo,
html body .main-products.product-grid .product-thumb .stepper input.form-control.option-qty-input.activo,
html body .module-products-grid .product-grid .product-thumb .stepper input.form-control.option-qty-input.activo,
html body #product .button-group-page .stepper input.form-control.option-qty-input.activo,
html body #product div.options-qty-panel input.activo,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper .option-qty-input.activo {
    background-color: #ecf5e8 !important;
    /* Verde suave de fondo */
    color: #224a23 !important;
    /* Número en verde oscuro */
    border-color: #bce1bd !important;
}

html body .stepper:has(input.activo),
html body .stepper:has(input.activo) span,
html body .stepper:has(input.activo) span i,
html body .option-qty-stepper:has(input.activo),
html body .option-qty-stepper:has(input.activo) span,
html body .option-qty-stepper:has(input.activo) span i,
html body .main-products.product-grid .product-thumb .stepper:has(input.activo) span,
html body .main-products.product-grid .product-thumb .stepper:has(input.activo) span i,
html body .module-products-grid .product-grid .product-thumb .stepper:has(input.activo) span,
html body .module-products-grid .product-grid .product-thumb .stepper:has(input.activo) span i,
html body #product .button-group-page .stepper:has(input.activo) span,
html body #product .button-group-page .stepper:has(input.activo) span i,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper:has(input.activo) span,
html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper:has(input.activo) span i,
html body .options-qty-panel .option-qty-stepper.stepper:has(input.activo) span,
html body .options-qty-panel .option-qty-stepper.stepper:has(input.activo) span i,
html body .main-products .product-thumb .stepper:has(input.activo) span i,
html body .module-products-grid .product-grid .product-thumb .stepper:has(input.activo) span i,
html body #product div.options-qty-panel .stepper:has(input.activo) span i,
html body div.add_to_cart_sticky div.options-qty-panel .stepper:has(input.activo) span i {
    background-color: #ecf5e8 !important;
    color: #224a23 !important;
    border-color: #bce1bd !important;
}

html body .stepper:has(input.sin_stock),
html body .stepper:has(input.sin_stock) span,
html body .stepper:has(input.sin_stock) span i,
html body .option-qty-stepper:has(input.sin_stock),
html body .option-qty-stepper:has(input.sin_stock) span,
html body .option-qty-stepper:has(input.sin_stock) span i {
    background-color: rgba(185, 24, 86, 1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Estilo premium global para las etiquetas (labels) del formulario Mailchimp del boletín */
#mc_embed_signup label,
#mc_embed_signup .mc-field-group label {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-weight: 400 !important;
    /* Más fino / elegante */
    font-size: 12px !important;
    /* Más pequeña */
    color: #cbd5e1 !important;
    /* Gris claro elegante */
    text-transform: none !important;
    /* Evitar mayúsculas forzadas */
    letter-spacing: 0.02em !important;
    margin-bottom: 5px !important;
    display: inline-block !important;
}

#mc_embed_signup .indicates-required {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
}


/* ==========================================================================
   BOTÓN "AL CARRITO" - CONTROL DE TAMAÑO MANUAL PARA PROBAR DIFERENCIA
   Modifica el valor 'font-size' de abajo para ver el cambio.
   ========================================================================== */

/* Escritorio (Computadora) - Recomendado: 14px o 15px */
@media (min-width: 768px) {

    html body .btn-cart,
    html body #button-cart,
    html body .btn-cart-add,
    html body .btn-cart .btn-text,
    html body .btn-cart span,
    html body #button-cart .btn-text,
    html body #button-cart span,
    html body .btn-cart-add .btn-text,
    html body .popup-options-qty .option-qty-popup-actions .btn.btn-cart,
    html body .popup-options-qty .option-qty-popup-actions .btn.btn-cart .btn-text,
    html body #product-product .product-info .product-details #button-cart,
    html body #product-product .product-info .product-details #button-cart .btn-text,
    html body #product-product .product-info .product-details .btn[data-action="cart"],
    html body #product-product .product-info .product-details .btn[data-action="cart"] .btn-text {
        font-size: 17px !important;
    }
}

/* Móvil y Tablet - Recomendado: 15px para un balance perfecto y premium */
@media (max-width: 767px) {

    html body .btn-cart,
    html body #button-cart,
    html body .btn-cart-add,
    html body .btn-cart .btn-text,
    html body .btn-cart span,
    html body #button-cart .btn-text,
    html body #button-cart span,
    html body .btn-cart-add .btn-text,
    html body .popup-options-qty .option-qty-popup-actions .btn.btn-cart,
    html body .popup-options-qty .option-qty-popup-actions .btn.btn-cart .btn-text,
    html body #product-product .product-info .product-details #button-cart,
    html body #product-product .product-info .product-details #button-cart .btn-text,
    html body #product-product .product-info .product-details .btn[data-action="cart"],
    html body #product-product .product-info .product-details .btn[data-action="cart"] .btn-text {
        font-size: 17px !important;
        /* <--- MODIFICA ESTA LÍNEA (Línea 2618) */
    }

    /* Refinamiento del font-weight del número de las casillas de talla (stepper) en móviles: Cambiar de bold/semibold a regular elegante (400) */
    html body #product div.options-qty-panel input,
    html body #product div.options-qty-panel input.form-control,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper input.form-control,
    html body .option-qty-input,
    html body .stepper input.option-qty-input,
    html body .option-qty-stepper input,
    html body #product .option-qty-input,
    html body #product .stepper input,
    html body .options-qty-panel .option-qty-input,
    html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-input,
    html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
    html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
    html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-input,
    html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-input,
    html body div.add_to_cart_sticky .options-qty-panel .option-qty-input,
    html body:not(.desktop) div.add_to_cart_sticky .options-qty-panel .option-qty-input,
    html body.desktop div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper .option-qty-input {
        font-weight: 500 !important; /* Regular elegante en móviles */
    }

    
}

/* ==========================================================================
   ESTILOS PREMIUM PARA LA VISTA "LISTA" EN ESCRITORIO / PC (>= 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
    /* 1. Contenedor del Layout (Ancho completo) */
    .main-products.product-list .product-layout {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 24px !important;
        padding: 0 !important;
    }

    /* 2. Tarjeta del Producto (Distribución Flex en fila) */
    .main-products.product-list .product-thumb {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 32px !important;
        padding: 24px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Efecto Hover Premium */
    .main-products.product-list .product-thumb:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
        transform: translateY(-2px) !important;
    }

    /* 3. Imagen del Producto (Lado izquierdo) */
    .main-products.product-list .product-thumb .image {
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        height: 250px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .main-products.product-list .product-thumb .image img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Ocultar botones sobre la imagen que solo son para vista rejilla */
    .main-products.product-list .product-thumb .image .quickview-button {
        display: none !important;
    }

    /* 4. Contenedor de Detalles del Producto (Lado derecho) */
    .main-products.product-list .product-thumb .caption {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0 0 0 16px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* 5. Título / Nombre del Producto */
    .main-products.product-list .product-thumb .name {
        font-family: 'Chakra Petch', sans-serif !important;
        font-weight: 700 !important;
        font-size: 19px !important;
        line-height: 1.3 !important;
        color: #0f172a !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .main-products.product-list .product-thumb .name a {
        color: #0f172a !important;
        text-align: left !important;
        display: block !important;
    }

    /* 6. Descripción del Producto */
    .main-products.product-list .product-thumb .description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #475569 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 7. Precio */
    .main-products.product-list .product-thumb .price {
        font-family: 'Chakra Petch', sans-serif !important;
        font-weight: 700 !important;
        font-size: 21px !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .main-products.product-list .product-thumb .price .price-normal,
    .main-products.product-list .product-thumb .price .price-new {
        color: rgba(85, 91, 109, 1); /* gris claro de la tienda */
    }

    .main-products.product-list .product-thumb .price .price-old {
        color: #e7284d !important; /* Rojo elegante para el precio tachado */
    }

    /* 8. Panel de Tallas y Selector de Cantidad */
    .main-products.product-list .product-thumb .options-qty-panel {
        width: 100% !important;
        margin: 0 0 14px 0 !important;
        display: block !important;
        padding: 0 !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 0 14px 0 !important;
        width: 100% !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-row {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 52px !important;
        margin: 0 !important;
    }

    /* 9. Botones de Acción (Al Carrito + Rayo de Compra Rápida) */
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions:not(.option-qty-actions-secondary) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 0 12px 0 !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions .btn-cart-add {
        flex: 1 1 auto !important;
        min-width: 160px !important;
        height: 42px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions .fastbuy {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 10. Botones de Favoritos y Comparar */
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        padding: 4px 0 0 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist,
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important; /* Spacing exacto entre icono y texto */
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: color 0.2s ease !important;
        text-indent: 0 !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist:hover,
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare:hover {
        color: #e7284d !important;
    }

    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist::before,
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare::before,
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-wishlist i,
    .main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare i {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        text-indent: 0 !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   HABILITAR Y ESTILIZAR EL SISTEMA MULTICURRENCY EN EL CHECKOUT (PC Y MÓVIL)
   ========================================================================== */
html.route-checkout-checkout span.multicurrency,
html.route-checkout-checkout div.checkout-section.cart-section div.table-responsive table tr span.multicurrency,
html.route-checkout-checkout .quick-checkout-wrapper span.multicurrency {
    display: inline-block !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: rgba(85, 91, 109, 1) !important; /* Mismo gris elegante de la tienda */
    opacity: 1 !important;
    margin-top: 3px !important;
}

/* Reducir el tamaño de las opciones de texto largas (como rangos de peso "355-375g") para evitar que se corten */
html body .options-qty-panel .option-qty-name.option-qty-name--long,
html body .options-qty-panel .option-qty-group .option-qty-row .option-qty-name.option-qty-name--long,
html body .product-thumb .options-qty-hover .options-qty-panel .option-qty-name.option-qty-name--long,
html body .main-products .product-thumb .options-qty-hover .options-qty-panel .option-qty-name.option-qty-name--long,
html body .module-products-grid .product-grid .product-thumb .options-qty-hover .options-qty-panel .option-qty-name.option-qty-name--long,
html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-name.option-qty-name--long,
.product-info.has-product-options-qty .product-options-qty-panel .option-qty-name.option-qty-name--long {
    font-size: 11px !important;
}


/* --- CUSTOM STICKY HEADER CART STYLE (HIGH SPECIFICITY OVERRIDE) --- */
/* Hacer transparente el fondo blanco del contenedor del icono en el menu pegajoso (is-sticky) */
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a.cart-heading > i,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a.dropdown-toggle > i,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a > i,
html.desktop-header-active body.is-sticky div#cart > a > i,
body.is-sticky .desktop-main-menu-wrapper #cart > a > i {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Cambiar el color del carro a blanco */
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a.cart-heading > i::before,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a.dropdown-toggle > i::before,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart > a > i::before,
html.desktop-header-active body.is-sticky div#cart > a > i::before,
body.is-sticky .desktop-main-menu-wrapper #cart > a > i::before {
    color: #ffffff !important;
}

/* Efecto hover en el menu pegajoso */
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart:hover > a.cart-heading > i::before,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart:hover > a.dropdown-toggle > i::before,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper div#cart:hover > a > i::before,
html.desktop-header-active body.is-sticky div#cart:hover > a > i::before,
body.is-sticky .desktop-main-menu-wrapper #cart:hover > a > i::before {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* CHECKOUT: inline Google access button inside account selection */
html.route-checkout-checkout .checkout-social-login-hidden {
    display: none !important;
}

html.route-checkout-checkout .quick-checkout .left form > .social_login,
html.route-checkout-checkout .quick-checkout .left form > .login-hpasl-buttons,
html.route-checkout-checkout .quick-checkout .left form > #hp_sociallogin {
    display: none !important;
}

html.route-checkout-checkout .checkout-social-login-slot {
    margin: 14px 0 18px;
}

html.route-checkout-checkout .checkout-social-login-slot .checkout-social-login-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0;
    text-align: left;
}

html.route-checkout-checkout .checkout-social-login-slot .checkout-social-login-inline a,
html.route-checkout-checkout .checkout-social-login-slot .checkout-social-login-inline button {
    width: 100%;
}

html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 44px;
    padding: 12px 16px 12px 54px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M17.64 9.2045c0-.6382-.0573-1.2518-.1636-1.8409H9v3.4818h4.8436c-.2086 1.125-.8427 2.0782-1.796 2.7164v2.2582h2.9082c1.7018-1.5668 2.6842-3.8741 2.6842-6.6155z' fill='%234285F4'/%3E%3Cpath d='M9 18c2.43 0 4.4673-.8059 5.9564-2.1791l-2.9082-2.2582c-.806.54-1.8368.8591-3.0482.8591-2.3368 0-4.3159-1.5782-5.0236-3.7009H.9573v2.3327A8.9996 8.9996 0 0 0 9 18z' fill='%2334A853'/%3E%3Cpath d='M3.9764 10.721c-.18-.54-.2828-1.1168-.2828-1.721s.1028-1.181.2828-1.721V4.9464H.9573A8.9996 8.9996 0 0 0 0 9c0 1.4523.3477 2.8273.9573 4.0536L3.9764 10.721z' fill='%23FBBC05'/%3E%3Cpath d='M9 3.5782c1.3214 0 2.5077.4541 3.4405 1.3459l2.5814-2.5813C13.4636.8918 11.4264 0 9 0 5.4805 0 2.4441 2.0218.9573 4.9464L3.9764 7.279c.7077-2.1227 2.6868-3.7008 5.0236-3.7008z' fill='%23EA4335'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button:hover,
html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button:focus {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12) !important;
    color: #334155 !important;
}

@media (max-width: 767px) {
    html.route-checkout-checkout .checkout-social-login-slot {
        margin: 12px 0 16px;
    }

    html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button {
        min-height: 46px;
        padding-left: 50px !important;
        padding-right: 14px !important;
        font-size: 13px !important;
    }

    html.route-checkout-checkout .checkout-social-login-slot .google-sign-in-button::before {
        left: 14px;
        width: 20px;
        height: 20px;
        background-size: 16px 16px;
    }
}

/* --- CUSTOM STICKY HEADER SEARCH LUPA STYLE --- */
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper .mini-search .search-trigger,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper .mini-search .search-trigger::before,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper .mini-search .search-trigger i,
body.is-sticky .desktop-main-menu-wrapper .mini-search .search-trigger,
body.is-sticky .desktop-main-menu-wrapper .mini-search .search-trigger::before,
body.is-sticky .desktop-main-menu-wrapper .mini-search .search-trigger i,
.is-sticky .mini-search .search-trigger,
.is-sticky .mini-search .search-trigger::before {
    color: #ffffff !important;
}

/* Hover para la lupa */
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper .mini-search .search-trigger:hover,
html.desktop-header-active body.is-sticky div.desktop-main-menu-wrapper .mini-search .search-trigger:hover::before,
body.is-sticky .desktop-main-menu-wrapper .mini-search .search-trigger:hover,
body.is-sticky .desktop-main-menu-wrapper .mini-search .search-trigger:hover::before {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Styling for relocated social login button inside REGISTRO block */
html.route-checkout-checkout .checkout-section.section-login .login-options .row.social_login {
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options .row.social_login .col-md-12 {
    padding: 0 !important;
    width: 100% !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options #hp_sociallogin {
    margin: 0 !important;
    width: 100% !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options .row.social_login p.section-title-hpasl {
    display: none !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options #hp_sociallogin .google-sign-in-button {
    white-space: nowrap !important;
    font-size: 13.5px !important;
    padding: 10px 14px 10px 48px !important;
    min-height: 42px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options #hp_sociallogin .google-sign-in-button::before {
    left: 14px !important;
    width: 24px !important;
    height: 24px !important;
    background-size: 16px 16px !important;
}
html.route-checkout-checkout .checkout-section.section-login .section-body {
    gap: 0 !important;
    padding-bottom: 15px !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options {
    margin-bottom: 0 !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-form {
    margin-top: 0 !important;
}
html.route-checkout-checkout .checkout-section.section-login .login-options:has(+ .login-form div) {
    margin-bottom: 12px !important;
}

@media (max-width: 767px) {

    html.route-checkout-checkout .checkout-section.section-login .login-options #hp_sociallogin .google-sign-in-button {
        font-size: 12px !important;
        padding: 8px 10px 8px 38px !important;
        min-height: 36px !important;
    }
    html.route-checkout-checkout .checkout-section.section-login .login-options #hp_sociallogin .google-sign-in-button::before {
        left: 10px !important;
        width: 20px !important;
        height: 20px !important;
        background-size: 14px 14px !important;
    }
}

/* ==========================================================================
   REFINAMIENTO DE TALLAS Y CANTIDAD EN VISTA LISTA (PARA EVITAR DESALINEACIÓN Y COLAPSO DE ESPACIO)
   Afecta tanto a la cantidad básica como a las tallas opcionales en la vista lista.
   ========================================================================== */

/* 1. Forzar alineación a la izquierda del contenedor de la talla/cantidad */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-group,
.product-list .product-thumb .options-qty-panel .option-qty-group {
    justify-content: flex-start !important;
}

/* 2. Forzar alineación a la izquierda del cabezal de cantidad básica */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-head,
.product-list .product-thumb .options-qty-panel .option-qty-head {
    text-align: left !important;
}

/* 3. Alinear el stepper básico a la izquierda */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-basic,
.product-list .product-thumb .options-qty-panel .option-qty-basic {
    display: inline-block !important;
    float: none !important;
}

/* 4. Corregir los márgenes y alineación de la fila de tallas para que se peguen a la izquierda */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-row,
.product-list .product-thumb .options-qty-panel .option-qty-row {
    margin-left: 0 !important;
    margin-right: 8px !important;
    align-items: flex-start !important;
}

/* 5. Quitar márgenes automáticos que centran el stepper dentro de su fila o contenedor */
.main-products.product-list .product-thumb .options-qty-panel .stepper,
.product-list .product-thumb .options-qty-panel .stepper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 6. Dar un espacio vertical generoso debajo de la talla para separar de los botones de abajo */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-group,
.product-list .product-thumb .options-qty-panel .option-qty-group,
.main-products.product-list .product-thumb .options-qty-panel .option-qty-head,
.product-list .product-thumb .options-qty-panel .option-qty-head {
    margin-bottom: 16px !important;
}

/* 7. Forzar margen superior en el contenedor de botones de acción para asegurar el espaciado */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-actions:not(.option-qty-actions-secondary),
.product-list .product-thumb .options-qty-panel .option-qty-actions:not(.option-qty-actions-secondary) {
    margin-top: 10px !important;
}

/* 8. Corregir desalineación del icono de Comparar (pseudo-elemento ::before) en la vista lista */
.main-products.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare::before,
.product-list .product-thumb .options-qty-panel .option-qty-actions-secondary .btn-compare::before {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}


/* Fix: Evitar que el número de cantidad en las casillas de talla (stepper) se oculte detrás de las flechas en móviles (diseño side-by-side) */
@media (max-width: 767px) {
    /* 1. Asegurar que cada casilla de talla tenga ancho constante y no se encoja */
    html body .product-info.has-product-options-qty .product-options-qty-panel .option-qty-group .option-qty-row,
    html body div.add_to_cart_sticky .product-info.has-product-options-qty .product-options-qty-panel .option-qty-group .option-qty-row,
    html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-group .option-qty-row {
        width: 60px !important;
        max-width: 60px !important;
        min-width: 60px !important;
        flex: 0 0 60px !important;
        flex-shrink: 0 !important;
    }

    /* 2. Convertir el stepper en un contenedor flex para poner el input y el span de flechas lado a lado (no superpuestos) */
    html body .product-info.has-product-options-qty .product-options-qty-panel .option-qty-stepper.stepper,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper.stepper,
    html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-stepper.stepper {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        position: relative !important;
    }

    /* 3. El input ocupa todo el espacio restante y no se mete debajo de las flechas. Ajustamos paddings al mínimo para maximizar espacio. */
    html body #product div.options-qty-panel .option-qty-stepper.stepper input,
    html body #product div.options-qty-panel .option-qty-stepper.stepper input.form-control,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper.stepper input,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper.stepper input.form-control,
    html body .product-info.has-product-options-qty .product-options-qty-panel .option-qty-stepper.stepper input {
        flex: 1 1 auto !important;
        width: 0 !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* 4. Colocar las flechas estáticamente a la derecha con un ancho fijo de 20px */
    html body .product-info.has-product-options-qty .product-options-qty-panel .option-qty-stepper.stepper > span,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper.stepper > span,
    html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-stepper.stepper > span {
        position: static !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body .product-info.has-product-options-qty .product-options-qty-panel .option-qty-stepper.stepper > span i,
    html body div.add_to_cart_sticky div.product-details div.product-options .option-qty-stepper.stepper > span i,
    html body .popup-wrapper.popup-options-qty .options-qty-panel .option-qty-stepper.stepper > span i {
        width: 100% !important;
        height: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Corrección de Tracking Button para evitar temblor/movimiento de la tabla y unificar tipografía */
a.nacex_tracking.list {
    font-family: 'Bai Jamjuree', sans-serif !important;
    font-weight: bold !important;
    display: inline-block !important;
}

a.nacex_tracking.list:hover {
    font-weight: bold !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
}

/* --- MEJORA DE PRODUCTOS FUERA DE STOCK EN CARRITO Y CHECKOUT --- */
/* Forzar fondo rojo/rosa pastel directamente en las celdas (td) para que sea visible en móvil y desktop sin hold */
html body table tbody tr:has(td.td-product span.text-danger) td,
html body table tbody tr:has(td.td-name span.text-danger) td {
    background-color: #fff5f5 !important;
    border-top: 1px solid #fecaca !important;
    border-bottom: 1px solid #fecaca !important;
    transition: background-color 0.3s ease;
}

/* Borde lateral de advertencia en rojo más vivo */
html body table tbody tr:has(td.td-product span.text-danger) td:first-child,
html body table tbody tr:has(td.td-name span.text-danger) td:first-child {
    border-left: 4px solid #ef4444 !important;
}

/* Cambiar color del enlace del producto para que destaque en rojo oscuro */
html body table tbody tr:has(td.td-product span.text-danger) td a,
html body table tbody tr:has(td.td-name span.text-danger) td a {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

/* Resaltar la casilla de cantidad (stepper/input) en rojo suave para llamar la atención */
html body table tbody tr:has(td.td-product span.text-danger) td.td-qty input,
html body table tbody tr:has(td.td-name span.text-danger) td.td-qty input {
    background-color: #ffe4e6 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    font-weight: bold !important;
}

/* Transición al pasar el cursor sobre las celdas de la fila */
html body table tbody tr:has(td.td-product span.text-danger):hover td,
html body table tbody tr:has(td.td-name span.text-danger):hover td {
    background-color: #fee2e2 !important;
}

/* Ocultar los tres asteriscos "***" y reemplazarlos por un Badge premium "SIN STOCK" */
html body table tbody tr td.td-product span.text-danger,
html body table tbody tr td.td-name span.text-danger {
    font-size: 0 !important;
    display: inline-block !important;
    margin-top: 4px !important;
}

html body table tbody tr td.td-product span.text-danger::after,
html body table tbody tr td.td-name span.text-danger::after {
    content: "Out of Stock" !important; /* Default (English/other) */
    font-size: 10px !important;
    font-weight: bold !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    vertical-align: middle !important;
}

/* Idioma: Español */
html[lang^="es"] body table tbody tr td.td-product span.text-danger::after,
html[lang^="es"] body table tbody tr td.td-name span.text-danger::after {
    content: "Sin Stock" !important;
}

/* Idioma: Portugués */
html[lang^="pt"] body table tbody tr td.td-product span.text-danger::after,
html[lang^="pt"] body table tbody tr td.td-name span.text-danger::after {
    content: "Sem Stock" !important;
}

/* Idioma: Francés */
html[lang^="fr"] body table tbody tr td.td-product span.text-danger::after,
html[lang^="fr"] body table tbody tr td.td-name span.text-danger::after {
    content: "Rupture de Stock" !important;
}

/* Idioma: Alemán */
html[lang^="de"] body table tbody tr td.td-product span.text-danger::after,
html[lang^="de"] body table tbody tr td.td-name span.text-danger::after {
    content: "Nicht auf Lager" !important;
}

/* Idioma: Italiano */
html[lang^="it"] body table tbody tr td.td-product span.text-danger::after,
html[lang^="it"] body table tbody tr td.td-name span.text-danger::after {
    content: "Esaurito" !important;
}

/* Mostrar el motivo real de restricción sin convertirlo en un aviso de stock */
html body table tbody tr td.td-product span.text-danger.restriction-product-marker,
html body table tbody tr td.td-name span.text-danger.restriction-product-marker {
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

html body table tbody tr td.td-product span.text-danger.restriction-product-marker::after,
html body table tbody tr td.td-name span.text-danger.restriction-product-marker::after {
    content: none !important;
    display: none !important;
}

/* --- OPTIMIZACIONES ESPECÍFICAS PARA MÓVIL (MOBILE QUICK-CHECKOUT) --- */
@media (max-width: 768px) {
    /* Forzar fondo rojo/rosa pastel en la fila (tr) del checkout mobile para cubrir los gaps blancos */
    .quick-checkout-wrapper .cart-section .table-responsive table tbody tr:has(td.td-product span.text-danger) {
        background-color: #fff5f5 !important;
    }

    /* Borde lateral izquierdo de advertencia en mobile en la imagen */
    .quick-checkout-wrapper .cart-section .table-responsive table tbody tr:has(td.td-product span.text-danger) td.td-image {
        border-left: 4px solid #ef4444 !important;
        padding-left: 6px !important;
    }

    /* Quitar fondo blanco de la imagen del producto sin stock */
    .quick-checkout-wrapper .cart-section .table-responsive table tbody tr:has(td.td-product span.text-danger) td.td-image img {
        background-color: transparent !important;
        border-color: #fca5a5 !important;
    }

    /* Ajustar fondo del stepper de cantidad en mobile */
    .quick-checkout-wrapper .cart-section .table-responsive table tbody tr:has(td.td-product span.text-danger) td.td-qty .stepper {
        background-color: #ffe4e6 !important;
        border-color: #fca5a5 !important;
    }
}