/* ============================================================
   ============================================================
   INLOFF — CSS UNIFICADO PDP
   ============================================================
   Migrado desde wp-custom-css (Customizer Additional CSS).
   Convención: editar SOLO este archivo, NO el Customizer.
   ============================================================
   Secciones:
     1.  Variables globales (paleta Path B)
     2.  Top bar
     3.  Header main + body
     4.  Nav bar
     5.  Buscador centrado
     6.  Mega-menú productos (2 columnas)
     7.  Mobile pulido
     8.  Datepicker (reutilizable EPO)
     9.  Mobile — Selector cantidad y botones (legacy form-minimal)
     10. PDP — Bloque 1 (above the fold)
     11. Rating custom
     12. Precio + IVA + chip ahorro
     13. Personalización placeholder
     14. CTA single add to cart
     15. Trust signals
     16. PDP Bloque 1 — Mobile
     17. PDP Sistema de badges (8 variantes)
     18. Ocultar badge nativo Flatsome
     19. PDP — Bloque 2A: Trust bar dinámico
     20. PDP — Bloque 2B: Suelen comprarse juntos
     21. PDP — Bloque 3: Storytelling editorial
     22. PDP — Bloque 3: Mobile overrides
     23. PDP — Quantity selector inline (pill compacto)   ← NUEVO
     24. PDP — CTA con precio dinámico                     ← NUEVO
   ============================================================ */



/* ============================================================
   1. PALETA PATH B — Variables globales
   ============================================================ */

/* NOTA: los tokens que COINCIDEN con inloff-tokens.css (navy/cream/heart) se dejan
   por robustez (esta hoja no depende del global en el enqueue). Los específicos de
   PDP van con prefijo --inloff-pdp-* para NO pisar nombres globales con otro valor
   en páginas de producto (antes --inloff-cream-light/--inloff-heart-light divergían
   del global y contaminaban el :root de toda la página). */
:root {
    --inloff-navy: #1B2540;
    --inloff-cream: #F2E8D5;
    --inloff-pdp-cream-light: #FBF6EB;
    --inloff-heart: #C5A184;
    --inloff-text-primary: #1A1612;
    --inloff-text-secondary: #5F5E5A;
    --inloff-border: #E5E0D5;
    --inloff-danger: #A32D2D;
    --inloff-warning: #BA7517;
}


/* ============================================================
   2. TOP BAR
   ============================================================ */

.header-top,
.header-top strong,
.header-top .html_block,
.header-top .html,
.header-top .nav > li > a,
.header-top a,
.header-top .social-icons a,
.header-top .social-icons i {
    color: #F2E8D5 !important;
}

.header-top .nav > li > a:hover,
.header-top a:hover,
.header-top .social-icons a:hover,
.header-top .social-icons i:hover {
    color: #CAB397 !important;
}


/* ============================================================
   3. HEADER MAIN + BODY
   ============================================================ */

.header-main,
.header-main .header-bg-color {
    background-color: #FBF6EB !important;
}

html,
body.boxed,
body.framed,
body.boxed #wrapper,
body.framed #wrapper {
    background-color: #FBF6EB !important;
}

.page-wrapper {
    padding-top: 60px !important;
}

@media screen and (max-width: 549px) {
    .page-wrapper {
        padding-top: 30px !important;
    }
}


/* ============================================================
   4. NAV BAR
   ============================================================ */

.header-bottom {
    background-color: #1B2540 !important;
}

.header-bottom .nav > li > a:hover,
.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a {
    color: #CAB397 !important;
}


/* ============================================================
   5. BUSCADOR CENTRADO
   ============================================================ */

.header-main .searchform input[type="search"],
.header-main .searchform input[type="text"] {
    background-color: #FBF6EB !important;
    border-color: #CAB397 !important;
    color: #1A1612 !important;
}

/* [MOVIDO a inloff-header.css] El centrado del buscador en el header-main ahora
   es GLOBAL (todas las páginas), no solo en PDP. Ver "Layout: buscador CENTRADO"
   en inloff-header.css. Aquí se elimina para no duplicar reglas. */


/* ============================================================
   6. MEGA-MENÚ PRODUCTOS (2 columnas)
   ============================================================
   Estructura mínima (width + flex 2-col). El styling visual
   (padding, color, hover, sombra) lo aporta inloff-megamenu.css
   en el child theme — ahí tenemos un único source-of-truth con
   el resto de dropdowns Basel-style.
   ============================================================ */

#menu-item-1400 > .sub-menu,
#menu-item-1400 > .nav-dropdown,
#menu-item-1400 > ul.sub-menu.nav-dropdown {
    width: 540px !important;
    min-width: 540px !important;
    max-width: 540px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    column-gap: 32px !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

#menu-item-1400 > .sub-menu > li,
#menu-item-1400 > .nav-dropdown > li,
#menu-item-1400 > ul.sub-menu.nav-dropdown > li {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Solo nowrap/ellipsis aquí; padding/color/hover en theme CSS */
#menu-item-1400 > .sub-menu li > a,
#menu-item-1400 > .nav-dropdown li > a,
#menu-item-1400 > ul.sub-menu.nav-dropdown li > a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ============================================================
   7. MOBILE PULIDO
   ============================================================ */

@media (max-width: 849px) {
    .hide-on-mobile {
        display: none !important;
    }
    body.has-active-mobile-menu .header-top,
    .off-canvas-active .header-top {
        display: none !important;
    }
}


/* ============================================================
   8. DATEPICKER (reutilizable EPO)
   ============================================================ */

.ui-datepicker {
    border: 1px solid #e0d9d0 !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    padding: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.ui-datepicker-header {
    background: none !important;
    border: none !important;
    padding: 0 0 12px 0 !important;
    position: relative !important;
    display: block !important;
    text-align: center !important;
}

.ui-datepicker-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    line-height: 2 !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute !important;
    top: 2px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ui-datepicker-prev { left: 0 !important; }
.ui-datepicker-next { right: 0 !important; }

.ui-datepicker-prev span,
.ui-datepicker-next span { display: none !important; }

.ui-datepicker-prev::after {
    content: '←' !important;
    color: #8B6348 !important;
    font-size: 16px !important;
}

.ui-datepicker-next::after {
    content: '→' !important;
    color: #8B6348 !important;
    font-size: 16px !important;
}

.ui-datepicker table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

.ui-datepicker th {
    font-weight: 600 !important;
    color: #999 !important;
    padding: 4px !important;
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.ui-datepicker td {
    padding: 2px !important;
    text-align: center !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block !important;
    padding: 6px !important;
    border-radius: 4px !important;
    text-align: center !important;
    border: none !important;
    background: none !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

.ui-datepicker td a:hover {
    background: #f5f0eb !important;
    color: #8B6348 !important;
}

.ui-datepicker .ui-state-active {
    background: #8B6348 !important;
    color: #fff !important;
}

.ui-datepicker .ui-state-highlight {
    background: #f5f0eb !important;
    color: #8B6348 !important;
    font-weight: 700 !important;
}


/* ============================================================
   9. MOBILE — Selector cantidad y botones (Flatsome / WC)
   ============================================================ */

@media (max-width: 767px) {

    div.ux-quantity.quantity.buttons_added.form-minimal {
        display: grid !important;
        grid-template-columns: 52px 1fr 52px !important;
        grid-template-rows: 52px !important;
        width: 100% !important;
        border: 1px solid #ddd !important;
        border-radius: 3px !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal label {
        display: none !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="button"][value="-"] {
        grid-column: 1 !important;
        width: 100% !important;
        height: 52px !important;
        background: #fff !important;
        border: none !important;
        border-right: 1px solid #ddd !important;
        font-size: 20px !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="number"] {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        height: 52px !important;
        border: none !important;
        border-left: 1px solid #ddd !important;
        border-right: 1px solid #ddd !important;
        font-size: 16px !important;
        text-align: center !important;
        background: #fff !important;
        -webkit-appearance: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="number"]::-webkit-inner-spin-button,
    div.ux-quantity.quantity.buttons_added.form-minimal input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="button"][value="+"] {
        grid-column: 3 !important;
        width: 100% !important;
        height: 52px !important;
        background: #fff !important;
        border: none !important;
        border-left: 1px solid #ddd !important;
        font-size: 20px !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .single_add_to_cart_button {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        height: 58px !important;
        box-sizing: border-box !important;
    }

    .ux-buy-now-button {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        height: 48px !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) {

    div.ux-quantity.quantity.buttons_added.form-minimal {
        display: inline-flex !important;
        width: auto !important;
        border: none !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="number"] {
        width: 2.5em !important;
        height: auto !important;
        border: none !important;
        justify-self: auto !important;
        align-self: auto !important;
    }

    div.ux-quantity.quantity.buttons_added.form-minimal input[type="button"] {
        width: auto !important;
        height: auto !important;
        border: none !important;
        grid-column: auto !important;
    }

    .single_add_to_cart_button {
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .ux-buy-now-button {
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }
}


/* ============================================================
   ============================================================
   10. PDP — BLOQUE 1 (above the fold)
   ============================================================
   ============================================================ */

.inloff-pdp-section {
    --inloff-navy: #1B2540;
    --inloff-cream: #F2E8D5;
    --inloff-heart: #C5A184;
    --inloff-text-secondary: #5F5E5A;
    --inloff-border: #E5E0D5;
}


/* ─── Galería ─── */

.inloff-pdp-section .ux-product-gallery,
.inloff-pdp-section .product-gallery,
.inloff-pdp-section .product-images,
.inloff-pdp-section .product-thumbnails {
    position: relative;
}

.inloff-pdp-section .ux-product-gallery,
.inloff-pdp-section .product-gallery,
.inloff-pdp-section .product-images {
    background: var(--inloff-cream);
    border-radius: 8px;
    overflow: hidden;
}


/* ─── Sticky de la columna derecha (sólo desktop) ─── */

@media (min-width: 850px) {
    .inloff-pdp-summary .is-sticky-column {
        position: sticky;
        top: 100px;
    }
}

/* ─── C2.3 — Galería sticky en scroll (sólo desktop) ───
   La columna de galería (`.large-7`, izquierda) es más corta que la del
   form (derecha): su `.col-inner` (galería + thumbs + cross-sells) deja
   ~520px de blanco muerto en la mitad inferior-izquierda del fold, justo
   donde se decide la compra. Fijamos el `.col-inner` ENTERO como sticky
   (galería y cross-sells se mueven juntos como un bloque → sin riesgo de
   solapamiento entre ellos) con el recorrido que da la columna del form.
   Resultado: el producto permanece a la vista mientras el usuario rellena
   el formulario largo, y el blanco muerto se rellena con el propio bloque.
   La columna debe seguir ESTIRADA a la altura del row (la marca la columna
   del form, más alta) para que el `.col-inner` tenga recorrido donde pegarse;
   por eso NO tocamos su `align-self` (un `flex-start` la encogería a su
   contenido y mataría el recorrido del sticky).
   Degrada con elegancia: si en algún producto la columna izquierda es más
   alta que la derecha, no hay recorrido y el sticky no hace nada. */
@media (min-width: 850px) {
    .inloff-pdp-hero > .col.large-7 > .col-inner {
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }
}


/* ─── Breadcrumb ─── */

.inloff-pdp-summary .product-breadcrumb-container {
    margin-bottom: 12px;
}

.inloff-pdp-summary .woocommerce-breadcrumb {
    font-size: 11px !important;
    color: var(--inloff-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inloff-pdp-summary .woocommerce-breadcrumb a {
    color: var(--inloff-text-secondary) !important;
}

.inloff-pdp-summary .woocommerce-breadcrumb a:hover {
    color: var(--inloff-navy) !important;
}


/* ─── Microcopy "Hecho a mano · Personalizable" ─── */

.inloff-pdp-collection {
    font-size: 11px;
    color: var(--inloff-heart);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-bottom: 8px;
}


/* ─── Título ─── */

.inloff-pdp-summary .product-title-container {
    margin-bottom: 8px;
}

.inloff-pdp-summary h1.product-title,
.inloff-pdp-summary h1.product_title,
.inloff-pdp-summary .inloff-pdp-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: var(--inloff-navy) !important;
    margin: 0 0 8px 0 !important;
}


/* ============================================================
   11. RATING — Custom shortcode [inloff_product_rating]
   ============================================================ */

.inloff-pdp-summary .inloff-product-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    margin: 0 0 12px 0;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.inloff-pdp-summary .inloff-product-rating-link:hover {
    opacity: 0.85;
}

.inloff-pdp-summary .inloff-product-rating-link .star-rating {
    font-size: 14px;
    line-height: 1;
    width: 5.4em;
    height: 1.4em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    font-family: 'star';
    color: var(--inloff-heart);
}

.inloff-pdp-summary .inloff-product-rating-link .star-rating::before {
    content: '\73\73\73\73\73';
    color: rgba(197, 161, 132, 0.25);
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    font-family: 'star';
    letter-spacing: 1px;
}

.inloff-pdp-summary .inloff-product-rating-link .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
    font-family: 'star';
}

.inloff-pdp-summary .inloff-product-rating-link .star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
    color: var(--inloff-heart);
    letter-spacing: 1px;
    font-family: 'star';
}

.inloff-pdp-summary .inloff-rating-count {
    font-size: 12px;
    color: #888;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.inloff-pdp-summary .inloff-product-rating-link:hover .inloff-rating-count {
    color: var(--inloff-navy);
    border-bottom-color: var(--inloff-navy);
}


/* ============================================================
   12. PRECIO + IVA inline + Chip de ahorro
   ============================================================ */

.inloff-pdp-summary .product-price-container {
    margin-bottom: 16px;
}

.inloff-pdp-summary .price-wrapper {
    display: block;
    margin-top: 0;
}

.inloff-pdp-summary .price-wrapper .price > .amount,
.inloff-pdp-summary .price-wrapper .woocommerce-Price-amount {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--inloff-navy) !important;
}

.inloff-pdp-summary .price-wrapper .price ins,
.inloff-pdp-summary .price-wrapper .price ins .amount,
.inloff-pdp-summary .price-wrapper .price ins .woocommerce-Price-amount {
    color: var(--inloff-navy) !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
}

.inloff-pdp-summary .price-wrapper .price del,
.inloff-pdp-summary .price-wrapper .price del .amount,
.inloff-pdp-summary .price-wrapper .price del .woocommerce-Price-amount {
    color: #888 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 4px;
    opacity: 1 !important;
}

.inloff-pdp-summary .price-wrapper .price.product-page-price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 0;
    margin: 0 !important;
}

.inloff-pdp-summary .price-wrapper .price.product-page-price del { order: 1; }
.inloff-pdp-summary .price-wrapper .price.product-page-price ins { order: 2; }
.inloff-pdp-summary .price-wrapper .price.product-page-price::after { order: 3; }

.inloff-pdp-summary .price-wrapper .price.product-page-price::after {
    content: 'IVA incluido';
    font-size: 12px;
    font-weight: 400;
    color: var(--inloff-text-secondary);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.inloff-pdp-summary .price-wrapper .price.product-page-price::before {
    content: "";
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.inloff-savings-chip {
    display: inline-flex;
    align-items: center;
    background: var(--inloff-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.inloff-pdp-summary .inloff-savings-chip {
    order: 5;
    width: auto;
    max-width: max-content;
    margin-top: 10px;
    margin-left: 0;
}

.inloff-savings-chip .woocommerce-Price-amount {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.inloff-pdp-summary .product-price-container .tax_label,
.inloff-pdp-summary .price-suffix {
    display: none !important;
}


/* ============================================================
   13. PERSONALIZACIÓN — Reskin EPO
   ============================================================
   El placeholder "Próximamente" se eliminó del UX Block 1538
   tras el go-live del personalizador EPO real.
   Los estilos del personalizador viven en assets/css/inloff-epo.css
   ============================================================ */


/* ============================================================
   14. CTA — Single add to cart (ocultar Comprar ahora)
   ============================================================ */

.inloff-pdp-summary .add-to-cart-container {
    margin-bottom: 18px;
}


.inloff-pdp-summary button.single_add_to_cart_button {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    background: var(--inloff-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease;
    margin: 0 !important;
}

.inloff-pdp-summary button.single_add_to_cart_button:hover {
    background: #2a3656 !important;
    transform: translateY(-1px);
}

.inloff-pdp-summary .buy-now-button,
.inloff-pdp-summary .ux-buy-now-button,
.inloff-pdp-summary button[name="ux-buy-now"],
.inloff-pdp-summary .single_add_to_cart_button + .button.button-primary,
.single-product .buy-now-button,
.single-product .ux-buy-now-button,
.single-product button[name="ux-buy-now"] {
    display: none !important;
}


/* ============================================================
   15. TRUST SIGNALS — Caja crema bajo el CTA
   ============================================================ */

.inloff-pdp-trust-signals {
    background: #FFFFFF;
    border: 1px solid var(--inloff-border, #E5E0D5);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.inloff-pdp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--inloff-navy);
    line-height: 1.4;
}

.inloff-pdp-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--inloff-navy);
    color: var(--inloff-cream);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}


/* ============================================================
   16. PDP BLOQUE 1 — Mobile overrides
   ============================================================ */

@media (max-width: 849px) {
    .inloff-pdp-summary h1.product-title,
    .inloff-pdp-summary h1.product_title,
    .inloff-pdp-summary .inloff-pdp-title {
        font-size: 22px !important;
    }
    .inloff-pdp-summary .price-wrapper .price > .amount,
    .inloff-pdp-summary .price-wrapper .price ins .amount,
    .inloff-pdp-summary .price-wrapper .woocommerce-Price-amount {
        font-size: 26px !important;
    }
    .inloff-pdp-summary button.single_add_to_cart_button {
        padding: 14px 20px !important;
        font-size: 13px !important;
    }
}


/* ============================================================
   ============================================================
   17. PDP — SISTEMA DE BADGES (8 variantes)
   ============================================================
   ============================================================ */

.inloff-badge {
    position: absolute !important;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 2px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.inloff-badge-oferta {
    background: #A32D2D !important;
    color: #fff !important;
}

.inloff-badge-pocas-unidades {
    background: #BA7517 !important;
    color: #fff !important;
}

.inloff-badge-edicion-limitada {
    background: transparent !important;
    color: #1B2540 !important;
    border: 1px solid #1B2540 !important;
    padding: 6px 13px;
}

.inloff-badge-mas-vendido {
    background: #1B2540 !important;
    color: #fff !important;
}

.inloff-badge-top-valorado {
    background: #C5A184 !important;
    color: #1B2540 !important;
}

.inloff-badge-recomendado {
    background: #C5A184 !important;
    color: #1B2540 !important;
}

.inloff-badge-novedad {
    background: transparent !important;
    color: #C5A184 !important;
    border: 1px solid #C5A184 !important;
    padding: 6px 13px;
}

.inloff-badge-exclusivo-inloff {
    background: transparent !important;
    color: #1B2540 !important;
    border: 1px solid #1B2540 !important;
    padding: 6px 13px;
}

@media (max-width: 849px) {
    .inloff-badge {
        top: 10px;
        left: 10px;
        font-size: 10px;
        padding: 6px 11px;
        letter-spacing: 0.5px;
    }
    .inloff-badge-edicion-limitada,
    .inloff-badge-novedad,
    .inloff-badge-exclusivo-inloff {
        padding: 5px 10px;
    }
}


/* ============================================================
   18. OCULTAR badge nativo Flatsome y .badge-container
   ============================================================ */

.single-product span.onsale,
.single-product .product-images > .onsale,
.single-product .product-gallery > .onsale,
.single-product .woocommerce-product-gallery > .onsale,
.single-product .badge-container,
.single-product .product-images .badge-container,
.single-product .product-gallery .badge-container,
.single-product .woocommerce-product-gallery .badge-container {
    display: none !important;
}

.single-product .inloff-badge {
    display: block !important;
}


/* ============================================================
   ============================================================
   19. PDP — BLOQUE 2A: Trust bar dinámico
   ============================================================
   ============================================================ */

.inloff-trust-bar-section {
    background: #1B2540;
    margin-top: 0 !important;
}

.inloff-trust-bar-section .inloff-trust-bar-row {
    margin-bottom: 0 !important;
}

.inloff-trust-cell {
    color: #fff;
    padding: 0 12px !important;
}

.inloff-trust-cell .col-inner {
    text-align: center;
}

.inloff-trust-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px auto;
    color: #C5A184;
}

.inloff-trust-icon-wrap svg {
    width: 32px;
    height: 32px;
    display: block;
}

.inloff-trust-icon-rating {
    width: auto;
    height: 48px;
    color: #C5A184;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 48px;
}

.inloff-trust-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.inloff-trust-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    letter-spacing: 0.2px;
}

@media (max-width: 849px) {
    .inloff-trust-bar-section {
        padding: 22px 10px !important;
    }
    .inloff-trust-cell {
        padding: 12px 8px !important;
    }
    .inloff-trust-icon-wrap {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }
    .inloff-trust-icon-wrap svg {
        width: 24px;
        height: 24px;
    }
    .inloff-trust-icon-rating {
        height: 36px;
        font-size: 16px;
        line-height: 36px;
    }
    .inloff-trust-title {
        font-size: 12px;
    }
    .inloff-trust-subtitle {
        font-size: 10px;
    }
}


/* ============================================================
   ============================================================
   20. PDP — BLOQUE 2B: Suelen comprarse juntos (Amazon-style)
   ============================================================
   ============================================================ */

.inloff-cs-section {
    background: #ffffff;
    padding: 28px 0 36px 0;
    border-top: 1px solid #E5E0D5;
    margin: 0;
}

.inloff-cs-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
}

.inloff-cs-title {
    font-size: 18px;
    font-weight: 500;
    color: #1B2540;
    margin: 0 0 20px 0;
    text-align: left;
    line-height: 1.3;
}

.inloff-cs-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2E8D5;
}

.inloff-cs-images-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.inloff-cs-plus {
    font-size: 18px;
    color: #C5A184;
    font-weight: 400;
    flex-shrink: 0;
    line-height: 1;
}

.inloff-cs-image-card {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #F2E8D5;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.inloff-cs-image-card:hover {
    border-color: #C5A184;
    transform: translateY(-1px);
}

.inloff-cs-image-card.is-main {
    border-color: #1B2540;
    cursor: default;
}

.inloff-cs-image-card.is-main:hover {
    transform: none;
}

.inloff-cs-image-card.is-checked:not(.is-main) {
    border-color: #1B2540;
}

.inloff-cs-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inloff-cs-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.inloff-cs-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.inloff-cs-total-label {
    font-size: 10px;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.inloff-cs-total-amount,
.inloff-cs-total-amount .woocommerce-Price-amount {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #1B2540 !important;
    line-height: 1.1 !important;
}

.inloff-cs-add-btn {
    background: #1B2540;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
    min-width: 200px;
}

.inloff-cs-add-btn:hover {
    background: #2a3656;
    transform: translateY(-1px);
}

.inloff-cs-add-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.inloff-cs-add-btn.is-disabled,
.inloff-cs-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    background: #1B2540;
}

.inloff-cs-add-btn .btn-count {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0.3px;
}

.inloff-cs-list {
    display: flex;
    flex-direction: column;
}

.inloff-cs-item {
    border-bottom: 1px solid #F2E8D5;
    transition: background 0.15s ease;
}

.inloff-cs-item:last-child {
    border-bottom: none;
}

.inloff-cs-item:hover {
    background: #FBF6EB;
}

.inloff-cs-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    cursor: pointer;
    margin: 0;
}

.inloff-cs-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.inloff-cs-checkbox-visual {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1.5px solid #C5A184;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.inloff-cs-checkbox-visual::after {
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.inloff-cs-item.is-checked .inloff-cs-checkbox-visual {
    background: #1B2540;
    border-color: #1B2540;
}

.inloff-cs-item.is-checked .inloff-cs-checkbox-visual::after {
    transform: rotate(-45deg) scale(1);
}

.inloff-cs-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.inloff-cs-item-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inloff-cs-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #1B2540;
    line-height: 1.4;
}

.inloff-cs-item-thismark {
    font-size: 10px;
    color: #C5A184;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #FBF6EB;
    padding: 2px 8px;
    border-radius: 3px;
}

.inloff-cs-perso-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #BA7517;
    margin-top: 4px;
    line-height: 1.2;
}

.inloff-cs-quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #E5E0D5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    height: 30px;
}

.inloff-cs-quantity-selector .inloff-cs-qty-btn,
.inloff-cs-qty-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    background: transparent !important;
    border: none !important;
    color: #1B2540 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    cursor: pointer !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    vertical-align: middle !important;
    transition: background 0.15s ease;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.inloff-cs-qty-btn:hover {
    background: #F2E8D5;
}

.inloff-cs-qty-input {
    width: 40px;
    height: 28px;
    border: none;
    border-left: 1px solid #E5E0D5;
    border-right: 1px solid #E5E0D5;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #1B2540;
    background: #fff;
    -moz-appearance: textfield;
    padding: 0;
    margin: 0;
    line-height: 28px;
}

.inloff-cs-qty-input::-webkit-outer-spin-button,
.inloff-cs-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inloff-cs-item-price,
.inloff-cs-item-price .woocommerce-Price-amount {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1B2540 !important;
    flex-shrink: 0;
    text-align: right;
    min-width: 70px;
}

.inloff-cs-item-price del {
    font-size: 12px !important;
    color: #888 !important;
    margin-right: 4px;
    font-weight: 400 !important;
}

.inloff-cs-item-price ins {
    background: transparent;
    text-decoration: none;
}

.inloff-cs-info {
    margin-top: 18px;
    padding: 10px 14px;
    background: rgba(186, 117, 23, 0.08);
    border-left: 3px solid #BA7517;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: #5F5E5A;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.inloff-cs-info-icon {
    color: #BA7517;
    font-size: 14px;
    flex-shrink: 0;
}
.inloff-cs-info-icon .inloff-ico { width: 15px; height: 15px; }

/* ─── Modal de personalización (LEGACY — desactivado) ─────────────────
   Las dos reglas siguientes (`.inloff-cs-modal` base + variante
   `[aria-hidden="false"]`) son del modal v1/v2 cross-sells. Chocaban
   con el modal v3 (ADR-084) que vive en `inloff-cross-sells.css` y
   usa `[hidden]` para visibilidad. Ambas mantenían `display:none`
   permanente porque el JS v3 nunca pone `aria-hidden="false"`.
   Comentadas para que las reglas del CSS v3 ganen sin conflicto.

.inloff-cs-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.inloff-cs-modal[aria-hidden="false"] {
    display: flex;
}
*/

.inloff-cs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 37, 64, 0.55);
}

.inloff-cs-modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 500px;
    width: calc(100% - 40px);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(27, 37, 64, 0.3);
}

.inloff-cs-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #5F5E5A;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
}

.inloff-cs-modal-close:hover {
    color: #1B2540;
}

.inloff-cs-modal-content h4 {
    font-size: 18px;
    font-weight: 500;
    color: #1B2540;
    margin: 0 0 12px 0;
}

.inloff-cs-modal-content p {
    font-size: 13px;
    color: #5F5E5A;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.inloff-cs-modal-pending {
    margin: 16px 0 12px 0;
}

.inloff-cs-pending-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #FBF6EB;
    border-radius: 6px;
    margin-bottom: 8px;
}

.inloff-cs-pending-title {
    font-size: 13px;
    font-weight: 500;
    color: #1B2540;
    flex: 1 1 auto;
}

.inloff-cs-pending-cta {
    background: #1B2540;
    color: #fff !important;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.inloff-cs-pending-cta:hover {
    background: #2a3656;
    color: #fff !important;
}

.inloff-cs-modal-help {
    font-size: 11px !important;
    color: #888 !important;
    font-style: italic;
    margin-top: 16px !important;
}

body.inloff-cs-modal-open {
    overflow: hidden;
}

/* ─── Toast ────────────────────────────────────────── */

.inloff-cs-toast {
    position: fixed;
    top: 30px;
    right: 30px;
    background: #1B2540;
    color: #fff;
    padding: 14px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(27, 37, 64, 0.25);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateX(420px);
    transition: transform 0.3s ease;
    max-width: 380px;
}

.inloff-cs-toast.is-visible {
    transform: translateX(0);
}

.inloff-cs-toast-error {
    background: #A32D2D;
}

.inloff-cs-toast a {
    color: #fff !important;
    text-decoration: underline;
    font-size: 12px;
    flex-shrink: 0;
}

.inloff-cs-toast a:hover {
    text-decoration: none;
}

/* ─── Bloque 2B Mobile ─────────────────────────────────── */

@media (max-width: 849px) {
    .inloff-cs-section {
        padding: 22px 0 28px 0;
    }
    .inloff-cs-container {
        padding: 0 14px;
    }
    .inloff-cs-title {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .inloff-cs-top {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .inloff-cs-images-row {
        justify-content: center;
        gap: 6px;
    }

    .inloff-cs-image-card {
        width: 70px;
        height: 70px;
    }

    .inloff-cs-summary {
        justify-content: space-between;
        gap: 12px;
    }

    .inloff-cs-total {
        align-items: flex-start;
    }

    .inloff-cs-add-btn {
        min-width: 0;
        flex: 1 1 auto;
        padding: 10px 16px;
    }

    .inloff-cs-item-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 4px;
    }

    .inloff-cs-item-content {
        flex: 1 1 calc(100% - 36px);
        order: 2;
    }

    .inloff-cs-checkbox-visual {
        order: 1;
    }

    .inloff-cs-quantity-selector {
        order: 4;
        margin-left: 32px;
    }

    .inloff-cs-item-price {
        order: 3;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .inloff-cs-toast {
        top: auto;
        bottom: 20px;
        right: 14px;
        left: 14px;
        max-width: none;
        transform: translateY(120px);
    }
    .inloff-cs-toast.is-visible {
        transform: translateY(0);
    }
}


/* ============================================================
   ============================================================
   21. PDP — BLOQUE 3: Storytelling editorial
   ============================================================
   ============================================================ */

.inloff-storytelling {
    background: #FBF6EB;
    padding: 56px 0;
    margin: 0;
}

.inloff-story-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 56px;
}

.inloff-story-col {
    min-width: 0;
}

.inloff-story-col--img {
    flex: 0 0 47%;
}

.inloff-story-col--text {
    flex: 1;
}

.inloff-storytelling--img-right .inloff-story-col--img  { order: 2; }
.inloff-storytelling--img-right .inloff-story-col--text { order: 1; }


/* ─── Imagen editorial ─── */

.inloff-story-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    background: #F2E8D5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inloff-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inloff-story-img--empty {
    color: #888;
    font-size: 12px;
    text-align: center;
    padding: 20px;
    line-height: 1.5;
}


/* ─── Eyebrow + Título + Párrafo ─── */

.inloff-story-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #C5A184;
    margin: 0 0 14px 0;
    line-height: 1;
}

.inloff-story-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
    color: #1B2540;
    margin: 0 0 20px 0;
    letter-spacing: -0.01em;
}

.inloff-story-para {
    font-size: 15.5px;
    line-height: 1.75;
    color: #5F5E5A;
    margin: 0;
}

.inloff-story-para p {
    margin: 0;
}


/* ─── CTA outline opcional ─── */

.inloff-story-cta {
    display: inline-block;
    margin-top: 24px;
    padding: 11px 22px;
    border: 1.5px solid #1B2540;
    color: #1B2540 !important;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.inloff-story-cta:hover {
    background: #1B2540;
    color: #fff !important;
    transform: translateY(-1px);
}


/* ============================================================
   22. PDP — BLOQUE 3: Mobile overrides
   ============================================================ */

@media (max-width: 849px) {
    .inloff-storytelling {
        padding: 40px 0;
    }
    .inloff-story-inner {
        flex-direction: column;
        gap: 24px;
        padding: 0 14px;
    }
    .inloff-story-col--img {
        flex: 0 0 100%;
        width: 100%;
        order: 1 !important;
    }
    .inloff-story-col--text {
        order: 2 !important;
    }
    .inloff-story-title {
        font-size: 22px;
    }
    .inloff-story-para {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .inloff-story-cta {
        margin-top: 18px;
        padding: 10px 18px;
    }
}


/* ============================================================
   23. PDP — QUANTITY SELECTOR INLINE (pill compacto)
   ============================================================
   El qty de Flatsome (.ux-quantity) estaba oculto por el Customizer.
   Aquí lo restauramos como pill compacto alineado a la izquierda del CTA.
   Estructura del HTML que renderiza Flatsome:
     <form class="cart">
       <div class="ux-quantity quantity buttons_added">
         <input type="button" value="-" class="...minus...">
         <input type="number" class="input-text qty text" name="quantity">
         <input type="button" value="+" class="...plus...">
       </div>
       <button class="single_add_to_cart_button">...</button>
     </form>
   ============================================================ */

/* CSS Grid para que qty + CTA siempre vayan en la MISMA fila aunque haya
   addons (bulk-pricing, EPO) inyectados dentro del form. Los addons ocupan
   su propia fila full-width via grid-column: 1 / -1. */
.inloff-pdp-summary form.cart {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px;
    margin: 0 !important;
    align-items: stretch;
}

/* Addons inyectados DENTRO del form.cart ocupan su propia fila completa,
   colocada ANTES (order: -1) de qty + CTA. */
.inloff-pdp-summary form.cart .inloff-bp-tiers,
.inloff-pdp-summary form.cart .tm-extra-product-options,
.inloff-pdp-summary form.cart .tc-cart-loop-fee {
    grid-column: 1 / -1 !important;
    order: -1;
    margin: 0 0 6px !important;
    width: 100%;
}

/* Bajo el botón: la línea de Klarna (inc/inloff-stripe-klarna.php) y el aviso
   de personalizado (inc/inloff-personalizacion-aviso.php) van a lo ancho. Sin
   esto caían en la columna de la cantidad, de 132 px: el aviso legal quedaba
   en una tira de 200 px de alto. Sus estilos viven en la hoja del checkout,
   que en la ficha no se carga; aquí va el tamaño discreto que le corresponde. */
.inloff-pdp-summary form.cart > .inloff-klarna-msg,
.inloff-pdp-summary form.cart > .inloff-aviso-personalizado {
    grid-column: 1 / -1;
}
.inloff-pdp-summary form.cart > .inloff-klarna-msg {
    margin: 2px 0 0;
}
.inloff-pdp-summary form.cart > .inloff-aviso-personalizado {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7590;
    max-width: 62ch;
}

.inloff-pdp-summary form.cart .ux-quantity,
.inloff-pdp-summary form.cart .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    grid-column: 1;
    width: 132px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Botones qty: dos caminos paralelos para garantizar render simétrico:
   - <button> con <svg> dentro (lo inyecta inloff-pdp.js) → camino preferido
   - <input type="button"> con SVG como background-image (fallback si JS no corre)
   Ambos visualmente idénticos. */
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button,
.inloff-pdp-summary form.cart .quantity input[type="button"] {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 12px !important;
    border: 0 !important;
    color: transparent !important;            /* oculta value text del <input> */
    font: 0/0 a !important;                   /* fuerza tamaño 0 incluso en input */
    text-indent: 100% !important;             /* fallback para WebKit */
    white-space: nowrap !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background-color .15s ease;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Hover sutil — solo en desktop con cursor:pointer, fondo casi invisible */
@media (hover: hover) {
    .inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:hover {
        background-color: rgba(27, 37, 64, 0.04) !important;
    }
}
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:focus {
    outline: 2px solid rgba(27, 37, 64, 0.2);
    outline-offset: -2px;
}
/* <button> + <svg> inline (vía JS): el SVG dibuja el icono, no necesita bg-image. */
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button > svg {
    display: block;
    width: 12px;
    height: 12px;
    color: var(--inloff-text-primary, #1A1612);
    pointer-events: none;
}
/* <input type="button"> fallback: usa background-image SVG (text indented out). */
.inloff-pdp-summary form.cart .ux-quantity input.minus.is-form,
.inloff-pdp-summary form.cart .quantity input[type="button"][value="-"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='1' y='5' width='10' height='2' rx='1' fill='%231A1612'/></svg>") !important;
}
.inloff-pdp-summary form.cart .ux-quantity input.plus.is-form,
.inloff-pdp-summary form.cart .quantity input[type="button"][value="+"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='5' y='1' width='2' height='10' rx='1' fill='%231A1612'/><rect x='1' y='5' width='10' height='2' rx='1' fill='%231A1612'/></svg>") !important;
}
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:hover,
.inloff-pdp-summary form.cart .quantity input[type="button"]:hover,
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:active,
.inloff-pdp-summary form.cart .quantity input[type="button"]:active,
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:focus,
.inloff-pdp-summary form.cart .quantity input[type="button"]:focus {
    /* IMPORTANTE: usar background-color (no shorthand `background:`) para
       no sobrescribir el background-image que pinta el SVG +/-. El
       shorthand resetea image a none y el icono desaparece al hacer click. */
    background-color: var(--inloff-pdp-cream-light, #FBF6EB) !important;
    outline: none;
}
.inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button:disabled,
.inloff-pdp-summary form.cart .quantity input[type="button"]:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
}

.inloff-pdp-summary form.cart .ux-quantity input.qty,
.inloff-pdp-summary form.cart .quantity input.qty {
    /* `<input type="number">` ignora flex-grow y width:100% en Chromium,
       conservando su intrinsic width (~37.5px) y dejando hueco a la
       derecha del botón "+". Solución: width fijo en pixels.
       Total: 38 (minus) + 56 (input) + 38 (plus) = 132px = wrap width. */
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-right: 1px solid var(--inloff-border, #E5E0D5) !important;
    background: #fff !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--inloff-text-primary, #1A1612) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: textfield !important;
}
.inloff-pdp-summary form.cart .ux-quantity input.qty::-webkit-inner-spin-button,
.inloff-pdp-summary form.cart .ux-quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
.inloff-pdp-summary form.cart .ux-quantity input.qty:focus {
    outline: none !important;
}

/* Ocultar el label screen-reader para evitar reservar layout */
.inloff-pdp-summary form.cart .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}


/* ============================================================
   24. PDP — CTA con precio dinámico
   ============================================================
   El JS (inloff-pdp.js) inyecta dentro del botón:
     <span class="inloff-pdp-cta-label">AÑADIR AL CARRITO</span>
     <span class="inloff-pdp-cta-price">19,90 €</span>
   y actualiza el precio en función de la cantidad seleccionada.
   ============================================================ */

.inloff-pdp-summary form.cart .single_add_to_cart_button {
    grid-column: 2;
    min-width: 0 !important;       /* permite que el CTA se comprima si el contenedor lo exige */
    height: 50px !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    width: 100%;
    /* el "Comprar ahora" de Flatsome (display:none ya) no interfiere con grid */
}
.inloff-pdp-summary form.cart .single_add_to_cart_button:hover {
    background: #2A3656 !important;
    transform: translateY(-1px);
}

.inloff-pdp-cta-label {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inloff-pdp-cta-price {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .3px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.22);
    white-space: nowrap;
}
.inloff-pdp-cta-price--updating {
    opacity: .55;
    transition: opacity .15s ease;
}

/* ============================================================
   STICKY ADD-TO-CART BAR — rediseño coherente con el resto del PDP
   ============================================================
   Flatsome inyecta `.sticky-add-to-cart--active` fixed al hacer scroll
   más allá del CTA principal; en el móvil sale también antes de llegar a él
   (`barraFijaMovil()` en inloff-pdp.js, 16-oct-2026). Por defecto sale
   apretado y desproporcionado. Aquí lo limpiamos: img cuadrada, título,
   qty pill, CTA con precio. */

.sticky-add-to-cart--active {
    background: #fff !important;
    border-top: 1px solid var(--inloff-border, #E5E0D5) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .04) !important;
    padding: 10px 14px !important;
    z-index: 60 !important;
    align-items: center !important;
}

/* La barra entra subiendo (`stuckMoveUp` de Flatsome, 0,6 s), y en el móvil entra
   y sale más a menudo: quieta para quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .sticky-add-to-cart--active {
        animation: none !important;
    }
}

/* Cuando el sticky bar está activo, separar widgets flotantes (chat,
   cookies revisit, back-to-top) para que NO tapen el CTA.
   Usamos :has() (Chrome 105+, Safari 15.4+, Firefox 121+, >95% en 2026). */
body:has(.sticky-add-to-cart--active) .woot-widget-bubble,
body:has(.sticky-add-to-cart--active) .woot--bubble-holder,
body:has(.sticky-add-to-cart--active) #chatwoot_live_chat_widget {
    bottom: 90px !important;
    transition: bottom .25s ease;
}
/* CookieYes — banner inicial (y el aviso propio del núcleo, que lleva la misma
   clase). Sube con `translate` y no con el margen: un desplazamiento con
   transform no mueve el diseño y no cuenta en el CLS. Con `margin-bottom` y su
   transición, cada fotograma de la subida era un salto: 0,035 de CLS en la ficha
   del móvil, donde la barra sale al llegar (16-oct). */
body:has(.sticky-add-to-cart--active) #cky-consent,
body:has(.sticky-add-to-cart--active) .cky-consent-container,
body:has(.sticky-add-to-cart--active) #cookie-law-info-bar {
    translate: 0 -70px;
    transition: translate .25s ease;
}
/* En el móvil la barra mide 57 px (8 + 40 + 8 y el filete): el aviso, justo
   encima y sin hueco. Al llegar a la ficha se ven los dos a la vez (16-oct). */
@media (max-width: 768px) {
    body:has(.sticky-add-to-cart--active) #cky-consent,
    body:has(.sticky-add-to-cart--active) .cky-consent-container,
    body:has(.sticky-add-to-cart--active) #cookie-law-info-bar {
        translate: 0 -57px;
    }
    /* El «completa este campo» (`.inloff-epo-toast`, inloff-epo.css) sale encima de
       la barra fija. Con el aviso de cookies aún abierto quedaba detrás de él
       (CookieYes va por encima de todo): encima de los dos (57 + ~104 px y aire). */
    body:has(.cky-consent-container:not(.cky-hide)) .inloff-epo-toast {
        bottom: calc(184px + env(safe-area-inset-bottom, 0px));
    }
}
/* CookieYes — icono persistente (revisit consent) */
body:has(.sticky-add-to-cart--active) .cky-revisit-bottom-left,
body:has(.sticky-add-to-cart--active) .cky-revisit-bottom-right {
    bottom: 90px !important;
    transition: bottom .25s ease;
}
/* Flatsome back-to-top button */
body:has(.sticky-add-to-cart--active) #top-link {
    bottom: 90px !important;
    transition: bottom .25s ease;
}
/* En el móvil la barra está casi siempre, y con ella el chat, el icono de las
   cookies y «subir» van a 90 px: justo donde sale el «completa este campo»
   (inloff-epo.css), que tapaban, y sobre «Hacer mi pedido» del carrito lateral,
   que se abre encima de la barra. Fuera mientras se ve el aviso (3 s) o el
   carrito está abierto, como ya están en el carrito y el pago en el móvil
   (visto en staging el 16-oct-2026). */
@media (max-width: 849px) {
    body:has(.inloff-epo-toast.is-visible) .woot-widget-bubble,
    body:has(.inloff-epo-toast.is-visible) .woot--bubble-holder,
    body:has(.inloff-epo-toast.is-visible) .cky-revisit-bottom-left,
    body:has(.inloff-epo-toast.is-visible) .cky-revisit-bottom-right,
    body:has(.inloff-epo-toast.is-visible) #top-link,
    body.inloff-sidecart-open .woot-widget-bubble,
    body.inloff-sidecart-open .woot--bubble-holder,
    body.inloff-sidecart-open .cky-revisit-bottom-left,
    body.inloff-sidecart-open .cky-revisit-bottom-right,
    body.inloff-sidecart-open #top-link {
        visibility: hidden !important;
    }
}

.sticky-add-to-cart--active .sticky-add-to-cart__product {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 1170px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Imagen cuadrada limpia (Flatsome la deja 100×100 nativa) */
.sticky-add-to-cart--active .sticky-add-to-cart-img {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border: 1px solid var(--inloff-border, #E5E0D5);
}

.sticky-add-to-cart--active .product-title-small {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: var(--inloff-text-primary, #1A1612);
}
.sticky-add-to-cart--active .product-title-small strong {
    font-weight: 600 !important;
}

/* form.cart dentro del sticky: mismo grid pill + CTA */
.sticky-add-to-cart--active form.cart {
    display: grid !important;
    grid-template-columns: 120px minmax(180px, 280px);
    gap: 10px !important;
    align-items: stretch !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

/* Addons inyectados (bulk-pricing tabla) → ocultar dentro del sticky.
   `.inloff-gc-form` es el personalizador de la tarjeta regalo: no es EPO, así
   que no lo tapaba ninguna de las reglas de arriba. Medido el 2026-09-22 en un
   móvil de 390 px: la barra fija salía de 1180 px de alto — la pantalla entera.
   Igual que con EPO, el botón fijo pulsa el del formulario principal (ver el
   manejador de la barra fija en `inloff-pdp.js`), así que aquí sólo hay que taparlo. */
.sticky-add-to-cart--active form.cart .inloff-bp-tiers,
.sticky-add-to-cart--active form.cart .tm-extra-product-options,
.sticky-add-to-cart--active form.cart .inloff-se-pdp-estimate,
.sticky-add-to-cart--active form.cart .inloff-gc-form,
.sticky-add-to-cart-wrapper .inloff-aviso-personalizado {
    display: none !important;
}

/* La rejilla del sticky reserva la primera columna (120 px) para la cantidad.
   La tarjeta regalo la lleva oculta, así que al tapar el personalizador el
   botón se quedaba solo y caía en esa columna estrecha. Que ocupe las dos. */
.sticky-add-to-cart--active form.cart:has(.inloff-gc-form) .single_add_to_cart_button {
    grid-column: 1 / -1;
}

/* QTY pill: mismo estilo que en el PDP principal pero compacto.
   `:not(.hidden)` — WooCommerce marca así la cantidad cuando el producto se
   vende de uno en uno: deja el `input.qty` en `type="hidden"` y la envuelve en
   `.hidden` para que no se pinte. Este `display !important` la resucitaba como
   una caja vacía de 120 px. Sin consecuencias mientras fue la única cosa en la
   rejilla; al hacer que el botón ocupe las dos columnas (tarjeta regalo) los dos
   caían en la misma celda y sólo no se notaba porque el navy del botón es opaco.
   Hoy el único producto así es la tarjeta regalo, y no por metadato sino por el
   filtro `woocommerce_is_sold_individually` de `inloff-gift-cards-shop.php`
   (por eso no sale al buscar `_sold_individually` en la base de datos). */
.sticky-add-to-cart--active form.cart .ux-quantity:not(.hidden),
.sticky-add-to-cart--active form.cart .quantity:not(.hidden) {
    display: inline-flex !important;
    align-items: stretch !important;
    width: 120px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button,
.sticky-add-to-cart--active form.cart .quantity input[type="button"] {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    color: transparent !important;
    font: 0/0 a !important;
    text-indent: 100% !important;
    overflow: hidden !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button > svg {
    width: 11px;
    height: 11px;
    color: var(--inloff-text-primary, #1A1612);
}
.sticky-add-to-cart--active form.cart input.minus.is-form {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='1' y='5' width='10' height='2' rx='1' fill='%231A1612'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 11px 11px !important;
}
.sticky-add-to-cart--active form.cart input.plus.is-form {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='5' y='1' width='2' height='10' rx='1' fill='%231A1612'/><rect x='1' y='5' width='10' height='2' rx='1' fill='%231A1612'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 11px 11px !important;
}
/* Mantener el SVG visible en estados active/focus/hover en sticky también.
   Solo background-color cambia, nunca el background-image. */
.sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button:hover,
.sticky-add-to-cart--active form.cart .quantity input[type="button"]:hover,
.sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button:active,
.sticky-add-to-cart--active form.cart .quantity input[type="button"]:active,
.sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button:focus,
.sticky-add-to-cart--active form.cart .quantity input[type="button"]:focus {
    background-color: var(--inloff-pdp-cream-light, #FBF6EB) !important;
    outline: none;
}
.sticky-add-to-cart--active form.cart input.qty {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-right: 1px solid var(--inloff-border, #E5E0D5) !important;
    background: #fff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--inloff-text-primary, #1A1612) !important;
    -webkit-appearance: none !important;
    appearance: textfield !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* CTA dentro del sticky: navy + altura 42 */
.sticky-add-to-cart--active form.cart .single_add_to_cart_button {
    grid-column: 2;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    width: 100%;
}
.sticky-add-to-cart--active form.cart .single_add_to_cart_button:hover {
    background: #2A3656 !important;
}

/* Ocultar el ux-buy-now-button dentro del sticky igual que en el form principal */
.sticky-add-to-cart--active form.cart .ux-buy-now-button,
.sticky-add-to-cart--active form.cart button[name="ux-buy-now"] {
    display: none !important;
}

/* Mobile: hide title, deja img + qty + CTA full width */
@media (max-width: 768px) {
    .sticky-add-to-cart--active {
        padding: 8px 10px !important;
        overflow: hidden !important;
    }
    /* iOS Safari + Chrome mobile: cuando el usuario enfoca input.qty del
       sticky con teclado y luego lo cierra, el browser deja scrollLeft
       residual en el contenedor interno. Forzar overflow:hidden + clip
       evita que el contenido se desplace fuera del viewport. */
    .sticky-add-to-cart--active .sticky-add-to-cart__product {
        overflow: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .sticky-add-to-cart--active form.cart {
        overflow: hidden !important;
        min-width: 0 !important;
    }
    .sticky-add-to-cart--active .product-title-small {
        display: none !important;
    }
    .sticky-add-to-cart--active .sticky-add-to-cart-img {
        width: 40px !important;
        height: 40px !important;
    }
    .sticky-add-to-cart--active form.cart {
        grid-template-columns: 104px minmax(0, 1fr) !important;
        flex: 1 1 auto !important;
        gap: 8px !important;
    }
    .sticky-add-to-cart--active form.cart .ux-quantity,
    .sticky-add-to-cart--active form.cart .quantity {
        width: 104px !important;
        height: 40px !important;
    }
    /* Suma mobile: 32 (btn) + 40 (input) + 32 (btn) = 104px ✓ */
    .sticky-add-to-cart--active form.cart .ux-quantity .ux-quantity__button,
    .sticky-add-to-cart--active form.cart .quantity input[type="button"] {
        flex: 0 0 32px !important;
        width: 32px !important;
    }
    .sticky-add-to-cart--active form.cart input.qty {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
    .sticky-add-to-cart--active form.cart .single_add_to_cart_button {
        height: 40px !important;
        font-size: 11.5px !important;
        letter-spacing: .4px !important;
        padding: 0 12px !important;
        gap: 8px !important;
    }
    .sticky-add-to-cart--active form.cart .single_add_to_cart_button .inloff-pdp-cta-label {
        font-size: 11.5px;
    }
    .sticky-add-to-cart--active form.cart .single_add_to_cart_button .inloff-pdp-cta-price {
        padding-left: 8px;
        font-size: 12.5px;
    }
}

/* C2.2 — Pantallas estrechas (≤430px): el qty pill (104px) le roba ancho
   a la CTA y la trunca ("AÑADIR AL CA…") junto con el precio. La cantidad
   ya se fija en el form principal del PDP; en el sticky de un móvil pequeño
   priorizamos la acción primaria a ancho completo (la mayoría de regalos
   personalizados se piden con cantidad 1). Mantenemos la miniatura para
   dar contexto de producto. */
@media (max-width: 430px) {
    .sticky-add-to-cart--active form.cart {
        grid-template-columns: 1fr !important;
    }
    /* Con `:not(.hidden)`, como la regla general de la cantidad («QTY pill», más
       arriba): sin él, aquella era más específica y la volvía a pintar encima del
       botón. La barra medía 107 px en vez de 57 en un móvil de 393 (16-oct). */
    .sticky-add-to-cart--active form.cart .ux-quantity:not(.hidden),
    .sticky-add-to-cart--active form.cart .quantity:not(.hidden) {
        display: none !important;
    }
    .sticky-add-to-cart--active form.cart .single_add_to_cart_button {
        grid-column: 1 !important;
        width: 100% !important;
        font-size: 12.5px !important;
        letter-spacing: .5px !important;
    }
    /* La CTA del sticky no debe recortar su label: el precio queda a la
       derecha (space-between) y el texto tiene aire suficiente sin qty. */
    .sticky-add-to-cart--active form.cart .single_add_to_cart_button .inloff-pdp-cta-label {
        white-space: nowrap;
    }
}


/* Mobile: stack vertical para qty + CTA. Qty centrado con ancho natural,
   no estirado (evita huecos visuales feos en el lado derecho del pill). */
@media (max-width: 549px) {
    .inloff-pdp-summary form.cart {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    .inloff-pdp-summary form.cart .ux-quantity,
    .inloff-pdp-summary form.cart .quantity {
        grid-column: 1 !important;
        justify-self: center !important;
        width: auto !important;
        max-width: 100% !important;
        height: 56px !important;
        /* Distribuir hijos uniformemente dentro del pill */
        justify-content: center !important;
    }
    .inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button,
    .inloff-pdp-summary form.cart .quantity input[type="button"] {
        flex: 0 0 56px !important;
        width: 56px !important;
    }
    .inloff-pdp-summary form.cart .ux-quantity .ux-quantity__button > svg {
        width: 14px !important;
        height: 14px !important;
    }
    .inloff-pdp-summary form.cart .ux-quantity input.qty,
    .inloff-pdp-summary form.cart .quantity input.qty {
        flex: 0 0 64px !important;
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        font-size: 16px !important;
        text-align: center !important;
    }
    /* CTA sí ocupa full-width para que la acción primaria sea grande */
    .inloff-pdp-summary form.cart .single_add_to_cart_button {
        grid-column: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: 56px !important;
    }
}

/* ============================================================
   Callout de ahorros (bulk-pricing) — inyectado dinámicamente
   DENTRO de .inloff-bp-tiers, justo debajo de la tabla, en la
   misma franja crema del plugin. Muestra cuánto ahorra el
   cliente con la cantidad seleccionada en tiempo real.
   ============================================================ */
.inloff-bp-tiers .inloff-bp-savings {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    transition: background-color .2s ease, color .2s ease;
    box-sizing: border-box;
    width: 100%;
}
.inloff-bp-tiers .inloff-bp-savings__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}
.inloff-bp-tiers .inloff-bp-savings__text {
    flex: 1 1 auto;
    min-width: 0;
}
.inloff-bp-tiers .inloff-bp-savings__text strong {
    font-weight: 700;
}

/* Estado activo: hay descuento aplicado */
.inloff-bp-tiers .inloff-bp-savings--active {
    background-color: #E8F5EC;
    color: #1B5E20;
    border: 1px solid #B8E0C2;
}
.inloff-bp-tiers .inloff-bp-savings--active .inloff-bp-savings__icon {
    color: #2E7D32;
}

/* Estado inactivo: invitación a añadir más unidades. Fondo blanco
   contrasta sobre la franja crema del wrapper del plugin. */
.inloff-bp-tiers .inloff-bp-savings--inactive {
    background-color: #FFFFFF;
    color: var(--inloff-navy, #1F2A44);
    border: 1px solid var(--inloff-border, #E5E0D5);
}
.inloff-bp-tiers .inloff-bp-savings--inactive .inloff-bp-savings__icon {
    color: var(--inloff-gold, #B8945A);
}

@media (max-width: 549px) {
    .inloff-bp-tiers .inloff-bp-savings {
        font-size: 13px;
        padding: 10px 12px;
        gap: 8px;
    }
}


/* ============================================================
   Bloque de estimación de envío — diseño "tarjeta calendario"
   Estructura HTML:
     <div class="inloff-se-pdp-estimate">
       <p class="inloff-se-pdp-estimate__row --standard">
         <span class="__icon"><img emoji 🚚></span>
         <span class="__label">Envío estándar:</span>
         <span class="__date">27 may – 1 jun</span>
       </p>
       <p class="__row --urgent">…⚡…</p>
     </div>

   2 columnas (mobile + desktop), sin fondo coloreado, solo borde
   suave. Icono pequeño en esquina superior izquierda con el color
   de su variante (navy estándar / dorado urgente). Label uppercase
   sutil arriba; fecha grande en negrita debajo, navy.
   Ocultamos el <img> del emoji WP y pintamos icon via SVG mask.
   ============================================================ */
.inloff-se-pdp-estimate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 0;
    /* Overrides explícitos contra el frontend.css del plugin
       `inloff-shipping-engine` que pinta el wrapper con fondo crema
       (rgb(245, 239, 231)), borde fino (rgb(232, 226, 214)) y
       padding 10px 14px. Nuestro diseño usa cards independientes,
       así que el wrapper debe ser invisible. */
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Invertir orden visual: urgente a la izquierda, estándar a la derecha.
   El HTML lo genera el plugin inloff-shipping-engine en orden
   standard → urgent; con grid `order` cambiamos el orden visual sin
   tocar el DOM (mantenemos el orden semántico/accesibilidad). */
.inloff-se-pdp-estimate__row--urgent { order: 0; }
.inloff-se-pdp-estimate__row--standard { order: 1; }

.inloff-se-pdp-estimate__row {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 14px 14px 12px !important;
    background-color: transparent !important;
    border: 1px solid var(--inloff-border, #E5E0D5);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--inloff-navy, #1F2A44);
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.inloff-se-pdp-estimate__row:hover {
    box-shadow: 0 2px 8px rgba(31,42,68,.07);
    border-color: rgba(31,42,68,.18);
}

/* Icono: cuadrado pequeño con SVG mask, esquina superior izquierda */
.inloff-se-pdp-estimate__icon {
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    flex: 0 0 28px;
}
.inloff-se-pdp-estimate__icon img,
.inloff-se-pdp-estimate__icon .emoji {
    display: none !important;
}
.inloff-se-pdp-estimate__icon::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Estándar: camión, navy con fondo suave */
.inloff-se-pdp-estimate__row--standard .inloff-se-pdp-estimate__icon {
    background-color: rgba(31, 42, 68, .08);
    color: var(--inloff-navy, #1F2A44);
}
.inloff-se-pdp-estimate__row--standard .inloff-se-pdp-estimate__icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

/* Urgente: rayo, dorado con fondo suave */
.inloff-se-pdp-estimate__row--urgent .inloff-se-pdp-estimate__icon {
    background-color: rgba(184, 148, 90, .15);
    color: var(--inloff-gold, #B8945A);
}
.inloff-se-pdp-estimate__row--urgent .inloff-se-pdp-estimate__icon::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

/* Seasonal: el icono viene como emoji del admin de campañas (texto), no
   SVG mask. WordPress reemplaza el emoji por un <img class="emoji">,
   que normalmente ocultamos — en seasonal lo dejamos visible. */
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon {
    background-color: rgba(157, 78, 221, .12);
    color: var(--inloff-navy, #1F2A44);
    font-size: 14px;
    line-height: 1;
}
/* Re-mostrar el <img class="emoji"> que WordPress inyecta para emojis
   (en el resto de variantes lo ocultamos para usar SVG mask propio). */
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon img,
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon .emoji {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    vertical-align: middle;
}
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon::before {
    /* En seasonal NO usamos pseudo-element — el contenido del span es
       el emoji directamente del admin. */
    content: none !important;
    display: none !important;
}
/* Layout con seasonal: el wrapper sigue siendo 2 cols (estándar+urgente)
   y la seasonal ocupa la fila SUPERIOR full-width como pill destacado.
   Ese pill tiene un layout horizontal compacto (icono | label | fecha)
   en lugar del stack vertical de las cards normales. */
.inloff-se-pdp-estimate:has(.inloff-se-pdp-estimate__row--seasonal) {
    grid-template-columns: 1fr 1fr;
}
.inloff-se-pdp-estimate .inloff-se-pdp-estimate__row--seasonal {
    grid-column: 1 / -1;
    order: -1;                     /* aparece arriba aunque el HTML lo emita 3o */
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 16px !important;
    /* Mismo radius que las cards normales — coherencia visual */
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(31,42,68,.06);
}
/* Icono pill: a la izquierda, tamaño normal */
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon {
    margin-bottom: 0 !important;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 16px;
}
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon img,
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon .emoji {
    width: 18px !important;
    height: 18px !important;
}
/* En el pill, label y fecha van inline-row */
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__label {
    flex: 1 1 auto;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    color: var(--inloff-text-muted, #8A8A8A);
    line-height: 1.2;
    margin-bottom: 0;
}
.inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__date {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--inloff-navy, #1F2A44);
}

@media (max-width: 549px) {
    /* Mobile: las 2 cards normales se mantienen en 2 cols; el pill
       seasonal ya es full-width via grid-column 1 / -1. */
    .inloff-se-pdp-estimate:has(.inloff-se-pdp-estimate__row--seasonal) {
        grid-template-columns: 1fr 1fr;
    }
    .inloff-se-pdp-estimate__row--seasonal {
        padding: 10px 14px !important;
        gap: 10px;
    }
    .inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }
    .inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__label {
        font-size: 10px;
    }
    .inloff-se-pdp-estimate__row--seasonal .inloff-se-pdp-estimate__date {
        font-size: 13px;
    }
}

/* Tints por campaña (sobrescribibles): usamos data-campaign matched al id */
.inloff-se-pdp-estimate__row--seasonal[data-campaign="san_valentin"] .inloff-se-pdp-estimate__icon { background-color: rgba(220, 38, 38, .10); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="dia_padre"]    .inloff-se-pdp-estimate__icon { background-color: rgba(37, 99, 235, .10); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="dia_madre"]    .inloff-se-pdp-estimate__icon { background-color: rgba(236, 72, 153, .10); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="fin_curso"]    .inloff-se-pdp-estimate__icon { background-color: rgba(245, 158, 11, .12); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="vuelta_cole"]  .inloff-se-pdp-estimate__icon { background-color: rgba(16, 185, 129, .12); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="black_friday"] .inloff-se-pdp-estimate__icon { background-color: rgba(0, 0, 0, .10); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="navidad"]      .inloff-se-pdp-estimate__icon { background-color: rgba(220, 38, 38, .10); }
.inloff-se-pdp-estimate__row--seasonal[data-campaign="reyes"]        .inloff-se-pdp-estimate__icon { background-color: rgba(202, 138, 4, .14); }

/* Label uppercase pequeño tipo "ENVÍO ESTÁNDAR" */
.inloff-se-pdp-estimate__label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--inloff-text-muted, #8A8A8A);
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Fecha grande tipo "encabezado de calendario" */
.inloff-se-pdp-estimate__date {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--inloff-navy, #1F2A44);
    line-height: 1.25;
    letter-spacing: -.1px;
}

@media (max-width: 549px) {
    .inloff-se-pdp-estimate {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }
    .inloff-se-pdp-estimate__row {
        padding: 12px 10px 10px !important;
        font-size: 13px;
        border-radius: 10px;
    }
    .inloff-se-pdp-estimate__icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        margin-bottom: 6px;
        flex: 0 0 24px;
    }
    .inloff-se-pdp-estimate__icon::before {
        width: 14px;
        height: 14px;
    }
    .inloff-se-pdp-estimate__label {
        font-size: 9.5px;
        letter-spacing: .6px;
        margin-bottom: 3px;
    }
    .inloff-se-pdp-estimate__date {
        font-size: 13.5px;
    }
}

/* ── Tabla de precios por cantidad: cada fila elige su tramo al tocarla (4-oct-2026, assets/js/inloff-pdp.js) ── */
.inloff-bp-tiers tbody tr[data-tier-from] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
    .inloff-bp-tiers tbody tr[data-tier-from]:not(.is-active):hover {
        background: color-mix(in srgb, var(--inloff-cream, #F2E8D5) 55%, transparent);
    }
}
.inloff-bp-tiers tbody tr[data-tier-from]:not(.is-active):active {
    background: color-mix(in srgb, var(--inloff-cream, #F2E8D5) 80%, transparent);
}
.inloff-bp-tiers tbody tr[data-tier-from]:focus-visible {
    outline: 2px solid var(--inloff-navy, #1B2540);
    outline-offset: -2px;
}

/* ── Bajo el precio: el resumen, y las medidas y el material (9-oct-2026, inc/inloff-pdp-resumen.php) ──
   Solo sale lo revisado o limpio. Mismo lenguaje que el resto de la columna: la frase en navy y las etiquetas en
   versalitas heart, como la línea sobre el título; un filete fino arriba y abajo separa el bloque de la personalización. */
.inloff-pdp-resumen {
    margin: -4px 0 20px;
    color: var(--inloff-navy);
}
.inloff-pdp-resumen__texto {
    margin: 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--inloff-navy);
    text-wrap: pretty;
}
.inloff-pdp-resumen__datos {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 6px;
    margin: 14px 0 0;
    padding: 12px 0;
    border-top: 1px solid var(--inloff-border);
    border-bottom: 1px solid var(--inloff-border);
}
.inloff-pdp-resumen__texto + .inloff-pdp-resumen__datos { margin-top: 14px; }
.inloff-pdp-resumen__datos:first-child { margin-top: 0; }
.inloff-pdp-resumen__fila { display: contents; }
.inloff-pdp-resumen__datos dt {
    margin: 0;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--inloff-heart);
}
.inloff-pdp-resumen__datos dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--inloff-navy);
    overflow-wrap: anywhere;
}
@media (max-width: 849px) {
    .inloff-pdp-resumen__texto { font-size: 16px; }
    .inloff-pdp-resumen__datos { column-gap: 16px; }
    .inloff-pdp-resumen__datos dd { font-size: 15px; }
}