/* [PROD] 2026-08-19 Pase a producción — remaquetación ficha producto (AC-1446) */
/* ============================================================================
   KBW — Remaquetación ficha de producto (2026-08-04)
   Diseño: Adobe XD "DESIGN SPEC FARAONE FICHA" (001 desktop / 002 mobile)
   Tokens del spec: #E30613 rojo · #353535 texto · #ECECEC gris qty ·
                    #EAEAEA bordes · Roboto (H1 Bold 33, headings Bold 20,
                    body Regular 14)

   Alcance: #wrapper de la ficha de producto (excluye .elementor-displayWrapperBottom)
   ========================================================================== */

:root {
    --kbw-red: #E30613;
    --kbw-dark: #353535;
    --kbw-grey-bg: #ECECEC;
    --kbw-border: #EAEAEA;
}

/* ============================================================================
   1. CABECERA INTEGRADA: título + referencia + badges  (XD #7)
   ========================================================================== */
.page-product .kbw-product-header {
    margin-bottom: 14px;
    border-bottom: none !important; /* el theme añade separador a .product_header_container */
    padding-bottom: 0;
}

.page-product h1.kbw-product-title,
.page-product h1.kbw-product-title span {
    /* !important: el custom CSS del BO estila .product_header_container .page-title (22px) */
    font-size: 33px !important;
    font-weight: 700 !important;
    color: var(--kbw-dark) !important;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    margin: 0;
    padding: 0;
    background: none;
}

.page-product h1.kbw-product-title {
    margin-bottom: 6px;
}

.page-product .kbw-product-reference {
    font-size: 13px;
    margin: 0 0 12px;
}

.page-product .kbw-product-reference .label {
    color: #9a9a9a;
    font-weight: 400;
    margin: 0 4px 0 0;
}

.page-product .kbw-product-reference .kbw-reference-value {
    color: var(--kbw-dark);
    font-weight: 500;
}

.page-product .kbw-icon-product-inline {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 44px; /* escala de los badges según el artboard 001 */
    width: auto;
    margin: 0 0 16px;
}

/* ============================================================================
   2. DESCRIPCIÓN CORTA  (XD #6: bajo los badges, antes del precio)
   ========================================================================== */
.page-product .kbw-description-short {
    font-size: 14px;
    line-height: 1.65;
    color: var(--kbw-dark);
    margin-bottom: 26px; /* aire entre descripción y "Precio total*" según XD */
}

.page-product .kbw-description-short p:last-child {
    margin-bottom: 0; /* que el margen lo controle el contenedor, no el rte */
}

/* ============================================================================
   3. PRECIO  (XD #6: a continuación de la descripción)
   ========================================================================== */
.page-product .product-prices {
    margin-bottom: 4px;
}

.page-product .kbw-label-current-price {
    font-size: 16px;
    font-weight: 400;
    color: var(--kbw-dark);
}

.page-product .product-prices .current-price,
.page-product .product-prices .current-price-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--kbw-red);
}

.page-product .kbw-iva-note {
    display: block;
    color: var(--kbw-red);
    font-size: 14px; /* estilo de carácter del spec: Regular 14 #E30613 */
    margin-top: 2px;
}

.page-product .tax-shipping-delivery-label {
    margin-top: 0;
}

/* ============================================================================
   4. VARIANTES  (XD #5: atributo principal primero, en fila de 2 columnas)
   ========================================================================== */
.page-product .product-variants {
    margin-top: 22px; /* aire precio → selects según artboard */
}

.page-product .kbw-variants-row .kbw-variant-col .product-variants-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.page-product .kbw-variants-row .product-variants-item .form-control-label {
    font-size: 12px;
    font-weight: 400; /* el theme los pone en bold; el diseño los muestra regular */
    color: var(--kbw-dark);
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
}

.page-product .kbw-variants-row .product-variants-item .custom-select2 {
    flex: 1 1 auto;
    min-width: 0;
}

.page-product .kbw-variants-row select.form-control-select,
.page-product .kbw-variants-row .custom-select2 select.form-control-select {
    width: 100%;
    height: 42px !important;
    min-height: 42px !important; /* el theme capa el height a 32px; min-height gana siempre */
    border: 1px solid var(--kbw-border) !important;
    border-radius: 0;
    font-size: 13px;
    color: var(--kbw-dark);
    background-color: #fff;
}

/* ============================================================================
   5. FILA CANTIDAD + AÑADIR AL CARRITO  (XD #4: qty gris + botón al resto)
   ========================================================================== */
.page-product .kbw-buy-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 6px 0 0;
}

.page-product .kbw-buy-row .col-add-qty {
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
}

.page-product .kbw-buy-row .kbw-col-add-btn {
    flex: 1 1 auto;
    padding: 0;
}

.page-product .kbw-buy-row .add,
.page-product .kbw-buy-row .add .btn {
    width: 100%;
    height: 100%;
}

.page-product .kbw-buy-row .add .btn {
    min-height: 48px;
    border-radius: 0;
    font-size: 14px;
}

/* Stepper de cantidad: fondo gris (XD #4 — antes era rojo) */
.page-product #kbw-quantity-btns .input-group.qty {
    background: var(--kbw-grey-bg);
    height: 48px;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 0;
}

.page-product #kbw-quantity-btns input#quantity_wanted {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 52px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kbw-dark);
}

/* [2026-08-05] los spans .input-group-btn del bootstrap-touchspin capaban la
   altura a 42px y asomaba el gris del grupo arriba y abajo de los botones */
.page-product #kbw-quantity-btns .input-group-btn {
    height: 48px !important;
    display: flex !important;
    align-items: stretch !important;
}

/* [2026-08-05] petición: botones +/- con fondo rojo (el input central queda gris) */
.page-product #kbw-quantity-btns .input-group.qty .btn,
.page-product #kbw-quantity-btns .input-group.qty button,
.page-product #kbw-quantity-btns .btn-touchspin,
.page-product #kbw-quantity-btns .input-group-btn .btn {
    background: var(--kbw-red) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    width: 38px;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px;
    border-radius: 0;
}

.page-product #kbw-quantity-btns .input-group.qty .btn:hover,
.page-product #kbw-quantity-btns .input-group.qty button:hover {
    background: #c10510 !important; /* rojo un punto más oscuro al hover */
    color: #fff !important;
}

/* sin flechas nativas del input number */
.page-product input[type="number"]::-webkit-outer-spin-button,
.page-product input[type="number"]::-webkit-inner-spin-button,
.kbw-sticky-product input[type="number"]::-webkit-outer-spin-button,
.kbw-sticky-product input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-product input[type="number"]#quantity_wanted,
.kbw-sticky-product input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================================================
   6. ENTREGA + DISTRIBUIDOR  (XD #3)
   ========================================================================== */
.page-product .kbw-delivery-note {
    margin: 12px 0 14px;
}

.page-product #kbw-product-availability,
.page-product .kbw-product-available {
    color: var(--kbw-red);
    font-size: 14px;
}

.page-product .kbw-btn-distribuidor {
    display: inline-block;
    background: #fff !important;
    border: 1px solid var(--kbw-red) !important;
    color: var(--kbw-red) !important;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 22px;
    text-transform: none;
    box-shadow: none;
}

.page-product .kbw-btn-distribuidor:hover,
.page-product .kbw-btn-distribuidor:focus {
    background: var(--kbw-red) !important;
    color: #fff !important;
}

/* XD #3: "se quita el separador de abajo" — el theme pinta líneas en
   .product_header_container (bottom) y .product-additional-info (top) */
.page-product .product-add-to-cart,
.page-product .product-actions,
.page-product .product-additional-info,
.page-product .kbw-delivery-note {
    border-bottom: none !important;
}

.page-product .product-additional-info {
    border-top: none !important;
    margin: 0;
    padding: 0;
}

.page-product .product-actions hr,
.page-product .product-add-to-cart hr {
    display: none;
}

/* ============================================================================
   7. PESTAÑAS  (4 tabs, activa en rojo con subrayado; XD #2 truncado)
   ========================================================================== */
.page-product .product-tabs .nav-tabs {
    border-bottom: 1px solid var(--kbw-border);
    gap: 28px;
}

.page-product .product-tabs .nav-tabs .nav-item {
    margin: 0;
}

.page-product .product-tabs .nav-tabs .nav-link {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--kbw-dark);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 10px 0;
    margin-bottom: -1px;
}

.page-product .product-tabs .nav-tabs .nav-link.active,
.page-product .product-tabs .nav-tabs .nav-link:hover {
    color: var(--kbw-red);
    background: none;
    border-bottom-color: var(--kbw-red);
}

.page-product .product-tabs .tab-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--kbw-dark);
    padding-top: 22px;
}

/* Truncado "Mostrar más" / "Mostrar menos" (aplicado por kbw-ficha.js) */
.kbw-truncate {
    position: relative;
}

.kbw-truncate.kbw-truncated {
    max-height: 340px;
    /* !important: el theme fija overflow visible en .tab-pane y el texto
       se desbordaba pintándose encima de "Productos relacionados" */
    overflow: hidden !important;
}

/* con #wrapper + !important: las reglas de enlaces del theme lo pintaban gris */
#wrapper .kbw-show-more-link,
.page-product .kbw-show-more-link {
    display: inline-block;
    color: var(--kbw-red) !important;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
    cursor: pointer;
    text-decoration: none;
}

#wrapper .kbw-show-more-link:hover,
.page-product .kbw-show-more-link:hover {
    color: var(--kbw-red) !important;
    text-decoration: underline;
}

/* ============================================================================
   8. PRODUCTOS RELACIONADOS  (XD #1: revisar desmaquetado + estilo del diseño)
   ========================================================================== */
.page-product .category-products {
    margin-top: 40px;
}

.page-product .category-products .section-title,
.page-product .category-products h4.section-title {
    /* !important: .block-section .section-title del theme fija 16px */
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--kbw-red) !important; /* [2026-08-05] petición: título de relacionados en rojo */
    text-transform: uppercase;
    text-align: left;
    background: none;
    border: none;
    margin-bottom: 22px;
    padding: 0;
}

/* con #wrapper: las reglas del BO llevan un ID y ganan a selectores de clases */
#wrapper .category-products .section-title span,
.page-product .category-products .section-title span {
    background: none;
    padding: 0;
    color: var(--kbw-red) !important; /* [2026-08-05] petición: en rojo */
}

/* --- fix desmaquetado (XD #1) ---------------------------------------------
   1) El template del carrusel no trae las clases swiper-cls-fix del theme,
      así que antes de que el JS inicialice el swiper las 16 slides se
      apilaban a ancho completo (flash de layout roto). Se fuerza aquí el
      layout previo a la inicialización.
   2) Las slides iban pegadas (spaceBetween 0): separación vía padding
      interno, que Swiper absorbe sin romper el cálculo de anchos.        */
.page-product .category-products .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.page-product .category-products .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
    width: 20%;
}

@media (max-width: 991.98px) {
    .page-product .category-products .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
        width: 33.333%;
    }
}

@media (max-width: 767.98px) {
    .page-product .category-products .swiper-container:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
        width: 50%;
    }
}

.page-product .category-products .swiper-slide {
    height: auto;
    flex-shrink: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

/* la tarjeta del diseño muestra solo imagen + nombre completo del producto */
.page-product .category-products .product-miniature .product-category-name,
.page-product .category-products .product-miniature .product-main-reference,
.page-product .category-products .product-miniature .kbw-mas-detalles2 {
    display: none !important;
}

.page-product .category-products .product-miniature .product-description {
    text-align: left;
}

/* el diseño no muestra flechas laterales: solo bullets */
.page-product .category-products .swiper-button-prev,
.page-product .category-products .swiper-button-next {
    display: none !important;
}

.page-product .category-products .swiper-pagination {
    position: static;
    margin-top: 18px;
}

.page-product .category-products .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #c9c9c9;
    opacity: 1;
    margin: 0 4px;
}

.page-product .category-products .swiper-pagination-bullet-active {
    background: var(--kbw-red);
}

.page-product .category-products .product-miniature .product-title,
.page-product .category-products .product-miniature .product-title a {
    font-size: 14px;
    color: var(--kbw-dark);
    text-align: left;
}

/* ============================================================================
   9. GALERÍA (MagicToolbox) — thumbs con borde, activo en rojo
   ========================================================================== */
.page-product .MagicToolboxContainer .magictoolbox-selector {
    border: 1px solid var(--kbw-border);
    background: #fff;
}

.page-product .MagicToolboxContainer .magictoolbox-selector.mz-thumb-selected,
.page-product .MagicToolboxContainer a.mz-thumb-selected,
.page-product .MagicToolboxContainer .mt-active .magictoolbox-selector {
    border-color: var(--kbw-red);
}

/* ============================================================================
   10. BARRA STICKY INFERIOR  (mockups inferiores XD 001 + barra fija XD 002)
   ========================================================================== */
.kbw-sticky-product {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.16);
    z-index: 1035;
    transform: translateY(110%);
    transition: transform .25s ease;
}

.kbw-sticky-product.kbw-visible {
    transform: translateY(0);
}

.kbw-sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 15px;
}

.kbw-sticky-media img {
    height: 52px;
    width: auto;
    display: block;
}

.kbw-sticky-info {
    flex: 1 1 auto;
    min-width: 0;
}

.kbw-sticky-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--kbw-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbw-sticky-delivery {
    font-size: 12px;
    color: var(--kbw-red);
}

.kbw-sticky-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-shrink: 0;
}

.kbw-sticky-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--kbw-red);
    white-space: nowrap;
}

.kbw-sticky-qty {
    display: flex;
    align-items: center;
    background: var(--kbw-grey-bg);
    height: 44px;
}

.kbw-sticky-qty-btn {
    width: 34px;
    height: 44px;
    background: var(--kbw-red); /* [2026-08-05] a juego con los +/- de la ficha */
    border: none;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

.kbw-sticky-qty-btn:hover {
    background: #c10510;
    color: #fff;
}

.kbw-sticky-qty-input {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--kbw-dark);
}

.kbw-sticky-add {
    height: 44px;
    border-radius: 0;
    font-size: 14px;
    padding: 0 24px;
    white-space: nowrap;
}

/* ============================================================================
   11. RESPONSIVE (XD 002 FICHA MOBILE)
   ========================================================================== */
@media (max-width: 767.98px) {

    .page-product h1.kbw-product-title,
    .page-product h1.kbw-product-title span {
        font-size: 20px !important;
    }

    .page-product .kbw-icon-product-inline {
        max-height: 40px;
    }

    .page-product .product-prices .current-price,
    .page-product .product-prices .current-price-value {
        font-size: 24px;
    }

    /* selects apilados a ancho completo */
    .page-product .kbw-variants-row .kbw-variant-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* [2026-08-05] tabs compactas en móvil: los li van apilados a ancho
       completo (4 filas) y con el gap/padding de desktop ocupaban 240px */
    .page-product #product-infos-tabs.nav-tabs {
        gap: 10px;
    }

    .page-product .product-tabs .nav-tabs .nav-link {
        padding: 5px 0;
    }

    /* [2026-08-05] sticky móvil según captura del cliente: título (hasta 3
       líneas) + precio debajo a la izquierda, botón a la derecha. El JS
       publica la altura real de la barra en --kbw-sticky-h. */
    .kbw-sticky-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.3;
    }

    .kbw-sticky-price-mobile {
        font-size: 19px;
        margin-top: 2px;
    }

    .kbw-sticky-cta {
        margin-left: 0;
        width: auto;
        flex-shrink: 0;
    }

    /* la compra principal vive en la barra fija inferior (XD 002) */
    body.page-product.kbw-has-sticky {
        padding-bottom: calc(var(--kbw-sticky-h, 68px) + 12px);
    }

    /* [2026-08-05] el botón de preferencias de iubenda (fixed bottom:0, z-index
       máximo) se solapaba con la sticky y bloqueaba taps: en ficha se eleva
       por encima de la barra (altura real + margen) */
    body.page-product.kbw-has-sticky .iubenda-tp-btn.iubenda-cs-preferences-link {
        bottom: calc(var(--kbw-sticky-h, 60px) + 12px) !important;
    }

    .kbw-sticky-inner {
        gap: 10px;
        padding: 8px 10px;
    }

    /* el botón no se estira: el título+precio ocupan el resto (captura cliente) */
    .kbw-sticky-add {
        flex: 0 0 auto;
        padding: 0 16px;
    }
}