/**
 * Single Product v2 — CSS
 * Fase 3A: Hero section
 *
 * Scoped a .en-preview (body class siempre activa).
 *
 * @since 2026-03-25
 * @updated 2026-03-25 — Fix #1: Astra overrides, WAPO restyling, dark theme
 */

/* ══════════════════════════════════════════
   0. ASTRA WRAPPER OVERRIDES (CRÍTICO)
   Forzar fondo oscuro y eliminar constraints
   del tema padre en páginas de producto.
   ══════════════════════════════════════════ */

.en-preview.single-product,
.en-preview.single-product #page,
.en-preview.single-product #content,
.en-preview.single-product .site-content {
    background: #161616 !important;
}

.en-preview.single-product .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

.en-preview.single-product #primary {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* Ocultar elementos Astra innecesarios */
.en-preview.single-product .ast-single-post-order,
.en-preview.single-product .entry-header,
.en-preview.single-product .ast-woocommerce-container,
.en-preview.single-product .ast-above-header-wrap {
    display: none !important;
}

/* Ocultar breadcrumb nativo de WC (usamos el nuestro) */
.en-preview .sp-wrap > .woocommerce-breadcrumb,
.en-preview .sp-wrap .woocommerce-notices-wrapper:empty {
    display: none;
}

/* ══════════════════════════════════════════
   1. VARIABLES + RESET
   ══════════════════════════════════════════ */

body.en-preview {
    overflow-x: hidden;
    max-width: 100vw;
}

.en-preview .sp-wrap {
    overflow-x: hidden;
    --ft: 'Raleway', sans-serif;
    --fb: 'Nunito', sans-serif;
    --am: #FFED00;
    --ne: #161616;
    --bl: #FFFFFF;
    --gr: #F5F5F5;
    --gm: #E5E5E7;
    --mg: #E6007E;
    --vi: #440099;
    --vn: #00FF79;
    --mw: 1600px;
    --t: .25s ease;
    --yith-wapo-price-box-colors-background: #FFF0;
    --yith-wapo-block-background-color: #FFF0;

    font-family: var(--fb);
    font-size: 16px;
    line-height: 1.6;
    color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.en-preview .sp-wrap *,
.en-preview .sp-wrap *::before,
.en-preview .sp-wrap *::after {
    box-sizing: border-box;
}

.en-preview .sp-wrap h1,
.en-preview .sp-wrap h2,
.en-preview .sp-wrap h3,
.en-preview .sp-wrap h4 {
    font-family: var(--ft);
    line-height: 1.2;
    margin: 0;
}

/* GLOBAL: forzar blanco SOLO en el hero (sección .sp, dark bg) */
.en-preview .sp,
.en-preview .sp p,
.en-preview .sp span,
.en-preview .sp label,
.en-preview .sp a:not(.btn),
.en-preview .sp td,
.en-preview .sp th,
.en-preview .sp li,
.en-preview .sp div,
.en-preview .sp h1,
.en-preview .sp h2,
.en-preview .sp h3,
.en-preview .sp h4,
.en-preview .sp h5,
.en-preview .sp h6,
.en-preview .sp select,
.en-preview .sp input,
.en-preview .sp textarea {
    color: #FFFFFF !important;
}

/* Below-fold: secciones light/white = texto oscuro */
.en-preview .sp2__features,
.en-preview .sp2__features *:not(svg):not(path),
.en-preview .sp2__specs,
.en-preview .sp2__specs *:not(svg):not(path),
.en-preview .sp2__install,
.en-preview .sp2__install *:not(svg):not(path),
.en-preview .sp2__reviews,
.en-preview .sp2__reviews *:not(svg):not(path) {
    color: #161616;
}

/* Below-fold: secciones dark = texto blanco */
.en-preview .sp2__colors,
.en-preview .sp2__colors *:not(svg):not(path),
.en-preview .sp2__box,
.en-preview .sp2__box *:not(svg):not(path),
.en-preview .sp2__seo-section,
.en-preview .sp2__seo-section *:not(svg):not(path),
.en-preview .sp2__faq,
.en-preview .sp2__faq *:not(svg):not(path):not(summary),
.en-preview .sp2__cta-section,
.en-preview .sp2__cta-section *:not(svg):not(path),
.en-preview .sp2__related,
.en-preview .sp2__related *:not(svg):not(path) {
    color: #FFFFFF;
}

/* content-visibility: auto REMOVIDO 2026-04-10 (R4-D).
   Hipótesis: causaba style recalc storms en mobile Chrome → 310ms TBT.
   Si post-R4 TBT mejora → dejar fuera. Si empeora → restaurar. */

/* RE-INTENTADO 2026-04-11 Ronda 10 + REVERTIDO mismo día.
   Confirmado por 2ª vez: content-visibility:auto causa style recalc storms
   medibles en PSI incluso cuando está limitado a @media (max-width: 1023px).
   Runs R10 mobile: TBT 70→250ms median. Desktop: TBT 38→160ms, CLS 0.045→0.167.
   Regresión ~-10 pts score en ambos. La optimización es tóxica en nuestro stack
   con Chrome emulado de Lighthouse. NO volver a intentar sin cambiar toolchain.
   Trampa documentada en lessons-learned.md #19. */

/* Force backgrounds on sections to prevent Astra inheritance */
.en-preview .sp2__features { background: #F5F5F5 !important; }
.en-preview .sp2__colors { background: #161616 !important; }
.en-preview .sp2__specs { background: #FFFFFF !important; }
.en-preview .sp2__witb { background: #161616 !important; }
.en-preview .sp2__install { background: #F5F5F5 !important; }
.en-preview .sp2__seo-section { background: #161616 !important; }
.en-preview .sp2__reviews { background: #FFFFFF !important; }
.en-preview .sp2__faq { background: #161616 !important; }
.en-preview .sp2__cta-section { background: #F5F5F5 !important; }
.en-preview .sp2__related { background: #161616 !important; }

/* Feature card specific colors */
.en-preview .sp2__feat-card { background: #FFFFFF !important; }
.en-preview .sp2__feat-card h3 { color: #161616 !important; }
.en-preview .sp2__feat-card p { color: #777 !important; }
.en-preview .sp2__feat-icon { color: #888; }
.en-preview .sp2__feat-icon svg { stroke: currentColor !important; }
.en-preview .sp2__feat-stat strong { color: #CCC !important; }
.en-preview .sp2__feat-stat span { color: #999 !important; }

/* TechSpecs colors */
.en-preview .sp2__spec-label { color: #161616 !important; }
.en-preview .sp2__spec-value { color: #E6007E !important; }
.en-preview .sp2__spec-icon svg { stroke: #E6007E !important; }

/* Review colors on white bg */
.en-preview .sp2__review-card { background: #FFFFFF !important; }
.en-preview .sp2__review-text { color: #161616 !important; }
.en-preview .sp2__review-author { color: #161616 !important; }
.en-preview .sp2__review-date { color: #999 !important; }
.en-preview .sp2__reviews-number { color: #161616 !important; }
.en-preview .sp2__reviews-avg { color: #161616 !important; }
.en-preview .sp2__reviews-total { color: #555 !important; }
.en-preview .sp2__reviews-bar-label { color: #555 !important; }
.en-preview .sp2__reviews-bar-count { color: #555 !important; }

/* Section headers on light bg */
.en-preview .sp2__section-hd--light h2 { color: #161616 !important; }
.en-preview .sp2__section-hd--light p { color: #777 !important; }

/* FAQ dark bg text */
.en-preview .sp2__faq-q { color: #FFFFFF !important; }
.en-preview .sp2__faq-a { color: rgba(255,255,255,.6) !important; }
.en-preview .sp2__faq summary { color: #FFFFFF !important; }

/* Install guide card colors */
.en-preview .sp2__install-card { background: #FFFFFF !important; }
.en-preview .sp2__install-title { color: #161616 !important; }
.en-preview .sp2__install-desc { color: #777 !important; }

/* CTA text visibility */
.en-preview .sp2__cta-title { color: #161616 !important; }
.en-preview .sp2__cta-desc { color: #555 !important; }

/* Related product text */
.en-preview .sp2__related-name { color: #FFFFFF !important; }

/* ── Container — centrado forzado ── */
.en-preview .sp-wrap .c,
.en-preview .c {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(20px, 4vw, 60px) !important;
    padding-right: clamp(20px, 4vw, 60px) !important;
    width: 100% !important;
    float: none !important;
}

/* ══════════════════════════════════════════
   2. HERO SECTION
   ══════════════════════════════════════════ */

.en-preview .sp {
    background: #161616;
    padding: 1rem 0 1.5rem;
}

@media (min-width: 1024px) {
    .en-preview .sp { padding: 1.5rem 0 2rem; }
}

/* Grid: 1col mobile → 2col desktop */
.en-preview .sp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .en-preview .sp__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 2.5rem;
        grid-template-areas:
            "gallery info"
            "desc    info";
    }
    .en-preview .sp__gallery    { grid-area: gallery; }
    .en-preview .sp__info       { grid-area: info; }
    .en-preview .sp__short-desc { grid-area: desc; }
}

/* ══════════════════════════════════════════
   3. GALERÍA
   ══════════════════════════════════════════ */

.en-preview .sp__gallery {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 1024px) {
    .en-preview .sp__gallery {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        flex-direction: column;
    }
}

.en-preview .sp__gallery-main {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #161616;
    aspect-ratio: 1 / 1;
    width: 100%;
    cursor: zoom-in;
}

.en-preview .sp__gallery-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 1;
}

.en-preview .sp__gallery-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.en-preview .sp__gallery-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.en-preview .sp__gallery-main:hover .sp__gallery-img {
    transform: scale(1.05);
}

.en-preview .sp__badge-discount {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    background: #E6007E;
    color: #FFFFFF !important;
    font-family: var(--fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 10px;
    border-radius: 8px;
}

.en-preview .sp__gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    border: none;
    color: #FFFFFF !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t);
}
.en-preview .sp__gallery-arrow:hover { background: rgba(255,255,255,.2); }
.en-preview .sp__gallery-arrow--prev { left: .5rem; }
.en-preview .sp__gallery-arrow--next { right: .5rem; }

.en-preview .sp__gallery-zoom {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    border: none;
    color: #FFFFFF !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t);
}
.en-preview .sp__gallery-main:hover .sp__gallery-zoom { opacity: 1; }

/* Dots mobile */
.en-preview .sp__gallery-dots {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
}
@media (min-width: 1024px) { .en-preview .sp__gallery-dots { display: none; } }

.en-preview .sp__gallery-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 0;
    transition: all .3s ease;
}
.en-preview .sp__gallery-dot.is-active {
    background: #FFFFFF;
    width: 20px;
    border-radius: 3px;
}

/* Thumbnails — siempre horizontal debajo de imagen principal */
.en-preview .sp__thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    flex-direction: row;
}

.en-preview .sp__thumb {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
    background: none;
}
.en-preview .sp__thumb.is-active {
    outline: 2px solid #E6007E;
    outline-offset: 1px;
    border-color: transparent;
}
.en-preview .sp__thumb:hover { opacity: .8; }
.en-preview .sp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════
   4. INFO PRODUCTO
   ══════════════════════════════════════════ */

.en-preview .sp__info {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Breadcrumb */
.en-preview .sp__breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.en-preview .sp__breadcrumb a { color: rgba(255,255,255,.35) !important; text-decoration: none; transition: color var(--t); }
.en-preview .sp__breadcrumb a:hover { color: #E6007E !important; }
.en-preview .sp__breadcrumb svg { color: rgba(255,255,255,.2) !important; }
.en-preview .sp__breadcrumb > span { color: rgba(255,255,255,.7) !important; font-weight: 500; }

/* Eyebrow */
.en-preview .sp .ey {
    font-family: var(--fb);
    font-weight: 700;
    font-size: clamp(11px, .85vw, 13px);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #E6007E !important;
}

/* Eyebrow — ocultar (breadcrumb es suficiente) */
.en-preview .sp .ey { display: none !important; }

/* Title — más compacto */
.en-preview .sp__title {
    font-weight: 700;
    font-size: clamp(22px, 2.5vw, 34px);
    color: #FFFFFF !important;
    margin-top: 0;
}

/* Viewers — ocultar */
.en-preview .sp__viewers { display: none !important; }

/* Rating row */
.en-preview .sp__rating-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.en-preview .sp__stars { display: flex; gap: 2px; }
.en-preview .sp__star { fill: rgba(255,255,255,.15); stroke: none; }
.en-preview .sp__star--filled { fill: #FFED00; }
.en-preview .sp__rating-text { color: rgba(255,255,255,.5) !important; font-size: 12px; }
.en-preview .sp__viewers { display: flex; align-items: center; gap: 6px; margin-left: auto; color: rgba(255,255,255,.4) !important; font-size: 11px; }
.en-preview .sp__viewers svg { color: #E6007E !important; }

/* Price block — compacto */
.en-preview .sp__price-block {
    padding: .75rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(230,0,126,.06), rgba(0,255,121,.04));
    border: 1px solid rgba(230,0,126,.12);
}

.en-preview .sp__price-flame {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
    color: #E6007E !important;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.en-preview .sp__price-flame svg { color: #E6007E !important; }

.en-preview .sp__price-row { display: flex; align-items: baseline; gap: .75rem; }

/* ══════════════════════════════════════════
   Main price hero (R9 — WAPO sync + UX upgrade)

   Cubre TODAS las estructuras HTML posibles que puede escupir
   $product->get_price_html() y el HTML sintético del sync JS:
   - Simple:    <span class="price"><span class="woocommerce-Price-amount">…
   - Variable:  <span class="price"><span class="from">Desde </span><span …>…
   - Sale:      <span class="price"><del>…</del><ins>…</ins></span>
   - Sync JS:   <span class="price"><span class="woocommerce-Price-amount"><bdi>…

   Verde neón dominante 32-44px.
   ══════════════════════════════════════════ */
.en-preview .sp__price-current,
.en-preview .sp__price-current .price {
    display: flex !important;
    align-items: baseline !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
}

/* Todos los montos (simple, ins, dentro de .price directo) — verde hero */
.en-preview .sp__price-current .woocommerce-Price-amount,
.en-preview .sp__price-current .woocommerce-Price-amount *,
.en-preview .sp__price-current .price > .woocommerce-Price-amount,
.en-preview .sp__price-current .price ins,
.en-preview .sp__price-current .price ins .woocommerce-Price-amount,
.en-preview .sp__price-current .price ins .woocommerce-Price-amount * {
    font-family: var(--ft) !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    color: #00FF79 !important;
    text-shadow: 0 0 12px rgba(0,255,121,.25) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    order: 1 !important;
}

/* "Desde " label para productos variables */
.en-preview .sp__price-current .from,
.en-preview .sp__price-current .price > .from {
    color: rgba(255,255,255,.5) !important;
    font-family: var(--fb) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-shadow: none !important;
    margin-right: .25rem;
    order: 0 !important;
}

/* Precio tachado (del) para ofertas — pequeño, gris */
.en-preview .sp__price-current .price del,
.en-preview .sp__price-current .price del .woocommerce-Price-amount,
.en-preview .sp__price-current .price del .woocommerce-Price-amount * {
    color: rgba(255,255,255,.3) !important;
    font-family: var(--ft) !important;
    font-weight: 600 !important;
    font-size: clamp(16px, 1.5vw, 22px) !important;
    text-shadow: none !important;
    text-decoration: line-through !important;
    order: 2 !important;
}

/* Ocultar screen-reader text */
.en-preview .sp__price-current .screen-reader-text {
    display: none !important;
}

.en-preview .sp__price-current .woocommerce-price-suffix {
    color: rgba(255,255,255,.35) !important;
    font-size: 12px !important;
    order: 3 !important;
}

.en-preview .sp__price-badge {
    color: #E6007E !important;
    font-size: 12px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(230,0,126,.12);
}

.en-preview .sp__price-tax { color: rgba(255,255,255,.35) !important; font-size: 12px; margin-top: 6px; }

/* ══════════════════════════════════════════
   5. WC ADD-TO-CART FORM + YITH WAPO
   Este es el bloque más crítico.
   WAPO usa tipo "label" para todos los addons.
   ══════════════════════════════════════════ */

.en-preview .sp__cart-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ══════════════════════════════════════════
   CLS reservations (Ronda 8, 2026-04-10)

   Historia: R4 reservaba min-height: 950px en .sp__cart-form y 1100px en
   .sp__info asumiendo WAPO expandido (52 opciones = 887px). Pero en
   productos con WAPO accordion CERRADO por defecto (ej. neon-love) el
   contenido real es ~300px → reserva crea hueco fantasma de ~700px.

   Fix R8: reservar solo lo mínimo necesario con un placeholder interno
   dentro del cart-form (invisible, participa en layout). Así cubrimos CLS
   en productos con WAPO expandido sin romper productos con accordion cerrado.
   ══════════════════════════════════════════ */

/* Reserva mínima universal para variables: qty + botón + padding */
.en-preview .product-type-variable .sp__cart-form {
    min-height: 320px;
}

/* variation_wrap starts hidden — pequeña reserva para evitar jump cuando WC lo revela */
.en-preview .single_variation_wrap {
    min-height: 80px;
}

/* --- WC Variations table (size select) --- */
.en-preview .sp__cart-form .variations {
    width: 100%;
    border: none !important;
    border-collapse: collapse;
}

.en-preview .sp__cart-form .variations td,
.en-preview .sp__cart-form .variations th {
    border: none !important;
    padding: 4px 0 !important;
    background: transparent !important;
}

.en-preview .sp__cart-form .variations .label label {
    font-family: var(--fb) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Select dropdown dark theme */
.en-preview .sp__cart-form .variations select,
.en-preview .sp__cart-form select {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.04) !important;
    color: #FFFFFF !important;
    font-family: var(--fb) !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: border-color var(--t);
    appearance: auto;
    -webkit-appearance: auto;
}

.en-preview .sp__cart-form .variations select:focus,
.en-preview .sp__cart-form select:focus {
    border-color: rgba(230,0,126,.5) !important;
    outline: none !important;
}

.en-preview .sp__cart-form .variations select option {
    background: #222 !important;
    color: #FFFFFF !important;
}

/* Variation description + price */
.en-preview .sp__cart-form .woocommerce-variation-description,
.en-preview .sp__cart-form .woocommerce-variation-description p,
.en-preview .sp__cart-form .woocommerce-variation-price .price,
.en-preview .sp__cart-form .woocommerce-variation-price .price *,
.en-preview .sp__cart-form .woocommerce-variation-availability p {
    color: rgba(255,255,255,.5) !important;
}

.en-preview .sp__cart-form .reset_variations {
    color: rgba(255,255,255,.4) !important;
    font-size: 12px !important;
}

/* --- YITH WAPO: UNIVERSAL OVERRIDES --- */
/* Catch-all: TODO dentro de WAPO = blanco */
.en-preview .sp-wrap .yith-wapo-container,
.en-preview .sp-wrap .yith-wapo-container *,
.en-preview .sp-wrap .yith-wapo-block,
.en-preview .sp-wrap .yith-wapo-block * {
    color: #FFFFFF !important;
}

.en-preview .sp-wrap .yith-wapo-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Addon wrapper — reset borders/bg */
.en-preview .sp-wrap .yith-wapo-addon {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Todos los addons WAPO visibles (sin plegado individual) */
.en-preview .sp-wrap .yith-wapo-addon .options-container {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Título de addon — compacto */
.en-preview .sp-wrap .wapo-addon-title {
    padding: 6px 0 !important;
    margin-bottom: .25rem !important;
}

/* ══ ACORDEÓN EXTRAS — envuelve los addons WAPO ══ */
.en-preview .sp__extras-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(230,0,126,.08);
    border: 2px solid #E6007E;
    color: #FFFFFF !important;
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
    margin-top: .25rem;
}

.en-preview .sp__extras-toggle:hover {
    background: rgba(230,0,126,.15);
    border-color: #E6007E;
    box-shadow: 0 0 10px rgba(230,0,126,.3);
}

.en-preview .sp__extras-toggle svg {
    transition: transform .3s ease;
    color: #E6007E !important;
}

.en-preview .sp__extras-toggle.is-open svg {
    transform: rotate(180deg);
}

.en-preview .sp__extras-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease;
    opacity: 0;
}

.en-preview .sp__extras-body.is-open {
    max-height: 3000px;
    opacity: 1;
    padding-top: .75rem;
    overflow: visible !important;
}

/* Addon title */
.en-preview .sp-wrap .wapo-addon-title,
.en-preview .sp-wrap .addon-header h4,
.en-preview .sp-wrap .addon-header label,
.en-preview .sp-wrap .addon-header span {
    font-family: var(--fb) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 !important;
    margin: 0 0 .75rem !important;
    background: transparent !important;
    border: none !important;
}

/* Options container — NO forzar open, respetar toggle de WAPO */
.en-preview .sp-wrap .yith-wapo-addon .options-container {
    padding: 0 !important;
}

/* Solo forzar visible si NO tiene default-closed */
.en-preview .sp-wrap .yith-wapo-addon:not(.default-closed) .options-container {
    display: block !important;
}

/* Separadores entre secciones WAPO */
.en-preview .sp-wrap .yith-wapo-addon + .yith-wapo-addon,
.en-preview .sp-wrap .yith-wapo-block + .yith-wapo-block {
    border-top: 1px solid rgba(255,255,255,.06) !important;
    padding-top: .5rem !important;
    margin-top: .25rem !important;
}

/* Línea decorativa después del título de sección */
.en-preview .sp-wrap .wapo-addon-title {
    display: flex !important;
    align-items: center !important;
}

.en-preview .sp-wrap .wapo-addon-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, rgba(255,255,255,.1), transparent) !important;
    margin-left: 12px !important;
}

/* --- Grid de opciones — compacto --- */
.en-preview .sp-wrap .yith-wapo-addon .options.grid {
    display: grid !important;
    gap: 6px !important;
}

/* Grids por tipo de per-row */
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-2.grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-3.grid {
    grid-template-columns: repeat(3, 1fr) !important;
}
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-4.grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-5.grid {
    grid-template-columns: repeat(5, 1fr) !important;
}
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-6.grid {
    grid-template-columns: repeat(6, 1fr) !important;
}
.en-preview .sp-wrap .yith-wapo-addon .options.per-row-7.grid {
    grid-template-columns: repeat(7, 1fr) !important;
}

@media (max-width: 767px) {
    .en-preview .sp-wrap .yith-wapo-addon .options.grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Opciones individuales (todos los tipos) --- */
.en-preview .sp-wrap .yith-wapo-option {
    border: 1.5px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,.02) !important;
    cursor: pointer;
    transition: all .3s ease;
    overflow: visible !important;
    position: relative;
}

.en-preview .sp-wrap .yith-wapo-option.selected {
    background: rgba(230,0,126,.08) !important;
    border-color: rgba(230,0,126,.5) !important;
    box-shadow: 0 0 16px rgba(230,0,126,.12);
}

.en-preview .sp-wrap .yith-wapo-option:hover:not(.selected) {
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.04) !important;
}

/* Label container inside option */
.en-preview .sp-wrap .yith-wapo-option .label_container {
    padding: 0 !important;
    margin: 0 !important;
}

.en-preview .sp-wrap .yith-wapo-option .label {
    padding: 0 !important;
    margin: 0 !important;
}

.en-preview .sp-wrap .yith-wapo-option .label-container-display {
    padding: 10px 12px !important;
}

/* Label text */
.en-preview .sp-wrap .yith-wapo-option .label_price label,
.en-preview .sp-wrap .yith-wapo-option .label label {
    color: #FFFFFF !important;
    font-family: var(--fb) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Prices in options */
.en-preview .sp-wrap .yith-wapo-option .label_price .price,
.en-preview .sp-wrap .yith-wapo-option .price,
.en-preview .sp-wrap .yith-wapo-option .woocommerce-Price-amount {
    color: #00FF79 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ── WAPO Tooltips para dark theme ──
   El sistema de tooltips está en functions.php (no tocar).
   Aquí solo adaptamos los colores para el fondo oscuro del template v2. */

/* Botón (i) info — fondo magenta sólido, visible sobre dark bg */
.en-preview .sp-wrap .wapo-i {
    background: #E6007E !important;
    border: 1.5px solid #E6007E !important;
    color: #FFFFFF !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    line-height: 17px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(230,0,126,.3) !important;
}
.en-preview .sp-wrap .wapo-i:hover {
    background: #cc0066 !important;
    border-color: #cc0066 !important;
    color: #FFFFFF !important;
}

/* Tooltip contenido — amarillo legible cuando se abre (clase .wapo-on del functions.php) */
.en-preview .sp-wrap .yith-wapo-option .tooltip.wapo-on span {
    background: #FFED00 !important;
    color: #161616 !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
    max-width: 280px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

.en-preview .sp-wrap .yith-wapo-option .tooltip.wapo-on span::after {
    border-top-color: #FFED00 !important;
}
.en-preview .yith-wapo-popup .yith-wapo-head {
    background: #FFFFFF !important;
    color: #161616 !important;
}
.en-preview .yith-wapo-popup .yith-wapo-close {
    background-color: #161616 !important;
}

/* Radio indicator (punto blanco abajo-derecha de cada opción) */
.en-preview .sp-wrap .yith-wapo-option .label::after,
.en-preview .sp-wrap .yith-wapo-option .label_container::after {
    border-color: rgba(255,255,255,.3) !important;
    background: transparent !important;
}
.en-preview .sp-wrap .yith-wapo-option.selected .label::after,
.en-preview .sp-wrap .yith-wapo-option.selected .label_container::after {
    border-color: #E6007E !important;
    background: #E6007E !important;
}

/* Option description */
.en-preview .sp-wrap .yith-wapo-option .option-description,
.en-preview .sp-wrap .yith-wapo-option .description {
    color: rgba(255,255,255,.4) !important;
    font-size: 12px !important;
}

/* Hide checkbox visually */
.en-preview .sp-wrap .yith-wapo-option-value {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
}

/* --- Color swatches (addon-type-color) --- */
/* Override: color options = circles, no card style */
.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option {
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option .label_container,
.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option .label {
    padding: 0 !important;
    margin: 0 !important;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option .label-container-display {
    padding: 0 !important;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .color-container {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden;
    transition: all .3s ease;
    border: 2px solid transparent;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .color {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

/* Opacity + hover */
.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option {
    opacity: .55;
    transition: all .3s ease;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option:hover {
    opacity: .85;
    transform: scale(1.1);
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option.selected {
    opacity: 1;
    transform: scale(1.15);
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option.selected .color-container {
    box-shadow: 0 0 14px rgba(230,0,126,.6), 0 0 28px rgba(230,0,126,.2) !important;
    outline: 2px solid #E6007E !important;
    outline-offset: 3px;
    border-color: transparent;
}

/* Color swatches: circle arriba, nombre debajo */
/* El HTML es: .color-container > span.color + .option-container > small */
.en-preview .sp-wrap .yith-wapo-addon-type-color .color-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* Circle de color = tamaño fijo, arriba */
.en-preview .sp-wrap .yith-wapo-addon-type-color .color {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Nombre debajo del circle */
.en-preview .sp-wrap .yith-wapo-addon-type-color .option-container {
    display: block !important;
    width: 100% !important;
}

.en-preview .sp-wrap .yith-wapo-addon-type-color .option-container small {
    display: block !important;
    text-align: center;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin-top: 6px;
    line-height: 1.2;
    word-break: break-word;
}

/* Ocultar tooltip, outside, label_price en colores */
.en-preview .sp-wrap .yith-wapo-addon-type-color .tooltip,
.en-preview .sp-wrap .yith-wapo-addon-type-color .outside,
.en-preview .sp-wrap .yith-wapo-addon-type-color .label_price {
    display: none !important;
}

/* Color grid: 7 columnas para que quepan nombres */
.en-preview .sp-wrap .yith-wapo-addon-type-color .options.grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
}

@media (max-width: 767px) {
    /* Colores: 5 por fila (5+4+4 = 13 colores en 3 filas) */
    .en-preview .sp-wrap .yith-wapo-addon-type-color .options.grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }

    /* Nombre de colores más compacto en mobile */
    .en-preview .sp-wrap .yith-wapo-addon-type-color .option-container small {
        font-size: 9px !important;
    }

    /* Label options: 2 cols, no desbordar */
    .en-preview .sp-wrap .yith-wapo-addon-type-label .options.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Cada opción: no desbordar texto */
    .en-preview .sp-wrap .yith-wapo-option {
        min-width: 0 !important;
        word-break: break-word !important;
    }

    .en-preview .sp-wrap .yith-wapo-option .label-container-display {
        padding: 8px 10px !important;
    }

    .en-preview .sp-wrap .yith-wapo-option .label_price label {
        font-size: 12px !important;
        word-break: break-word !important;
    }

    /* Global mobile box-sizing fix — NO overflow-x hidden (corta tooltips) */
    .en-preview .sp-wrap .yith-wapo-container,
    .en-preview .sp-wrap .yith-wapo-block,
    .en-preview .sp-wrap .yith-wapo-addon,
    .en-preview .sp-wrap .yith-wapo-addon .options-container,
    .en-preview .sp-wrap .yith-wapo-addon .options,
    .en-preview .sp__cart-form,
    .en-preview .sp__info {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Sticky bottom bar */
    .en-preview .sp__sticky--bottom,
    .en-preview .sp__sticky-inner-m {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* Color option: flex column para circle + name */
.en-preview .sp-wrap .yith-wapo-addon-type-color .yith-wapo-option {
    flex-direction: column !important;
    align-items: center !important;
    padding: 6px 4px !important;
    width: auto !important;
    border-radius: 8px !important;
    overflow: visible !important;
}

/* Asegurar que el label-container-display no añade padding extra */
.en-preview .sp-wrap .yith-wapo-addon-type-color .label-container-display {
    padding: 0 !important;
}

/* --- WAPO price totals --- */
.en-preview .sp-wrap .wapo-total-price-table,
.en-preview .sp-wrap .wapo-total-price-table tr,
.en-preview .sp-wrap .wapo-total-price-table td,
.en-preview .sp-wrap .wapo-total-price-table th,
.en-preview #wapo-total-price-table,
.en-preview #wapo-total-price-table tr,
.en-preview #wapo-total-price-table td,
.en-preview #wapo-total-price-table th {
    --yith-wapo-price-box-colors-background: #FFF0 !important;
    background: #FFF0 !important;
    background-color: #FFF0 !important;
    border: none !important;
}

.en-preview .sp-wrap .wapo-product-price,
.en-preview .sp-wrap .wapo-product-price *,
.en-preview .sp-wrap .wapo-total-options,
.en-preview .sp-wrap .wapo-total-options * {
    color: rgba(255,255,255,.6) !important;
    font-family: var(--fb) !important;
    font-size: 14px !important;
}

/* R9 (11 Abr 2026): ocultar fila "Total del pedido" de WAPO — ahora el
   precio hero bajo el título es el total autoritativo sincronizado via JS.
   Mantenemos el desglose (.wapo-product-price + .wapo-total-options) como
   info secundaria útil. */
.en-preview .sp-wrap .wapo-total-order,
.en-preview .sp-wrap .wapo-total-order *,
.en-preview .sp-wrap tr.wapo-total-order-row,
.en-preview .sp-wrap #wapo-total-order-price,
.en-preview .sp-wrap .wapo-total-price-table tr:last-child,
.en-preview .sp-wrap #wapo-total-price-table tr:last-child {
    display: none !important;
}

/* Separador limpio tras quitar la fila total */
.en-preview .sp-wrap .wapo-total-price-table,
.en-preview .sp-wrap #wapo-total-price-table {
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: .5rem !important;
    margin-top: .75rem !important;
}

/* --- Form layout: TODO apilado vertical, ancho completo --- */
.en-preview .sp__cart-form .woocommerce-variation-add-to-cart,
.en-preview .sp__cart-form > form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Quantity + Add to cart en una fila dentro del stack vertical */
.en-preview .sp__cart-form .sp__qty-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.en-preview .sp__cart-form .quantity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
}

/* Variación description "Ancho x alto..." = rosa, pequeño, encima del select */
.en-preview .sp__cart-form .woocommerce-variation-description,
.en-preview .sp__cart-form .woocommerce-variation-description p {
    color: #E6007E !important;
    font-size: 11px !important;
    margin: 0 0 4px !important;
    opacity: .7;
}

/* "LIMPIAR" link = más discreto */
.en-preview .sp__cart-form .reset_variations {
    font-size: 10px !important;
    color: rgba(255,255,255,.25) !important;
    margin-top: 2px !important;
}

.en-preview .sp__cart-form .quantity .qty {
    width: 70px;
    text-align: center;
    padding: 10px;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    border-radius: 8px;
    background: rgba(255,255,255,.04) !important;
    color: #FFFFFF !important;
    font-family: var(--fb);
    font-size: 16px;
    font-weight: 600;
}

/* --- Add to cart button — ancho completo --- */
.en-preview .sp__cart-form .single_add_to_cart_button {
    width: 100% !important;
    flex: none !important;
    padding: clamp(14px, 1.5vw, 18px) clamp(20px, 2vw, 32px);
    border: none !important;
    border-radius: 8px;
    background: #FFED00 !important;
    color: #161616 !important;
    font-family: var(--fb);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 20px);
    cursor: pointer;
    transition: all var(--t);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.en-preview .sp__cart-form .single_add_to_cart_button:hover {
    background: #fff34d !important;
    box-shadow: 0 0 12px rgba(255,237,0,.4), 0 0 28px rgba(255,237,0,.18);
}

/* ══════════════════════════════════════════
   6. DELIVERY, TRUST, PAYMENTS
   ══════════════════════════════════════════ */

.en-preview .sp__delivery-notices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.en-preview .sp__delivery-notice {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px;
}
.en-preview .sp__delivery-notice p { margin: 0; }
.en-preview .sp__delivery-notice svg { flex-shrink: 0; }

.en-preview .sp__delivery-notice--standard {
    background: rgba(0,255,121,.04);
    border: 1px solid rgba(0,255,121,.12);
}
.en-preview .sp__delivery-notice--standard svg { color: #00FF79 !important; }
.en-preview .sp__delivery-notice--standard p { color: rgba(255,255,255,.5) !important; }
.en-preview .sp__delivery-notice--standard strong { color: #00FF79 !important; }

.en-preview .sp__delivery-notice--express {
    background: rgba(255,237,0,.04);
    border: 1px solid rgba(255,237,0,.12);
}
.en-preview .sp__delivery-notice--express svg { color: #FFED00 !important; }
.en-preview .sp__delivery-notice--express p { color: rgba(255,255,255,.5) !important; }
.en-preview .sp__delivery-notice--express strong { color: #FFED00 !important; }

.en-preview .sp__trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 640px) { .en-preview .sp__trust-badges { grid-template-columns: 1fr; } }

.en-preview .sp__trust-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.6) !important;
}

.en-preview .sp__trust-badge--mg { background: rgba(230,0,126,.03); border: 1px solid rgba(230,0,126,.1); }
.en-preview .sp__trust-badge--mg svg { color: #E6007E !important; filter: drop-shadow(0 0 4px rgba(230,0,126,.6)); }
.en-preview .sp__trust-badge--vn { background: rgba(0,255,121,.03); border: 1px solid rgba(0,255,121,.1); }
.en-preview .sp__trust-badge--vn svg { color: #00FF79 !important; filter: drop-shadow(0 0 4px rgba(0,255,121,.6)); }
.en-preview .sp__trust-badge--am { background: rgba(255,237,0,.03); border: 1px solid rgba(255,237,0,.1); }
.en-preview .sp__trust-badge--am svg { color: #FFED00 !important; filter: drop-shadow(0 0 4px rgba(255,237,0,.6)); }

.en-preview .sp__payments { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.en-preview .sp__payments-secure { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.3) !important; font-size: 11px; }
.en-preview .sp__payments-icons { display: flex; align-items: center; gap: 8px; }

.en-preview .sp__pay-icon { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; transition: all .3s ease; }
.en-preview .sp__pay-icon:hover { transform: scale(1.05); }
.en-preview .sp__pay-icon--visa { color: #1A1F71 !important; background: rgba(26,31,113,.08); border: 1px solid rgba(26,31,113,.2); }
.en-preview .sp__pay-icon--mc { color: #FF5F00 !important; background: rgba(255,95,0,.08); border: 1px solid rgba(255,95,0,.2); }
.en-preview .sp__pay-icon--paypal { color: #00CFFF !important; background: rgba(0,207,255,.08); border: 1px solid rgba(0,207,255,.2); }
.en-preview .sp__pay-icon--bizum { color: #00FF79 !important; background: rgba(0,255,121,.08); border: 1px solid rgba(0,255,121,.2); }

/* Short description */
.en-preview .sp__short-desc { margin-top: 2.5rem; max-width: 768px; color: rgba(255,255,255,.4) !important; font-size: 14px; line-height: 1.7; }
@media (min-width: 1024px) { .en-preview .sp__short-desc { margin-top: 1.5rem; align-self: start; } }

/* ══════════════════════════════════════════
   7. STICKY BAR
   ══════════════════════════════════════════ */

.en-preview .sp__sticky--top {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(22,22,22,.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.05);
    transform: translateY(100%);
    transition: transform .3s ease;
    display: none;
}
@media (min-width: 1024px) { .en-preview .sp__sticky--top { display: block; } }
.en-preview .sp__sticky--top.is-visible { transform: translateY(0); }

.en-preview .sp__sticky-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.en-preview .sp__sticky-info { display: flex; align-items: center; gap: 1rem; }
.en-preview .sp__sticky-name { color: #FFFFFF !important; font-size: 14px; font-weight: 600; }
.en-preview .sp__sticky-price { font-family: var(--ft); font-weight: 700; font-size: 18px; }
.en-preview .sp__sticky-price,
.en-preview .sp__sticky-price .price,
.en-preview .sp__sticky-price .price * { color: #00FF79 !important; }
.en-preview .sp__sticky-btn { padding: 10px 24px; font-size: 14px; }

.en-preview .sp__sticky--bottom {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(22,22,22,.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.05);
    transform: translateY(100%);
    transition: transform .3s ease;
    width: 100vw !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
@media (min-width: 1024px) { .en-preview .sp__sticky--bottom { display: none; } }
.en-preview .sp__sticky--bottom.is-visible { transform: translateY(0); }

.en-preview .sp__sticky-inner-m { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; gap: .5rem; max-width: 100%; overflow: hidden; }
.en-preview .sp__sticky-info-m { flex: 1; min-width: 0; }
.en-preview .sp__sticky-name-m { color: #FFFFFF !important; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.en-preview .sp__sticky-price-m { margin: 0; }
.en-preview .sp__sticky-price-m,
.en-preview .sp__sticky-price-m .price,
.en-preview .sp__sticky-price-m .price * { font-family: var(--ft); font-weight: 700; font-size: 16px; color: #00FF79 !important; }
.en-preview .sp__sticky-btn-m { flex-shrink: 1; min-width: 0; padding: 8px 14px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.3; }

/* Button base */
.en-preview .btn { font-family: var(--fb); font-weight: 700; border-radius: 8px; border: none; cursor: pointer; transition: all var(--t); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.en-preview .btn--am { background: #FFED00; color: #161616 !important; }
/* btn--am hover defined globally in homepage.css */

/* ══════════════════════════════════════════
   8. LIGHTBOX
   ══════════════════════════════════════════ */

.en-preview .sp__lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.95);
    display: none; align-items: center; justify-content: center;
    padding: 1rem;
}
.en-preview .sp__lightbox.is-open { display: flex; }
.en-preview .sp__lightbox-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; animation: spFadeIn .3s ease forwards; }

.en-preview .sp__lightbox-close {
    position: absolute; top: 1.25rem; right: 1.25rem;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: none;
    color: #FFFFFF !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t); z-index: 2;
}
.en-preview .sp__lightbox-close:hover { background: rgba(255,255,255,.2); }

.en-preview .sp__lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: none;
    color: #FFFFFF !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t); z-index: 2;
}
.en-preview .sp__lightbox-arrow:hover { background: rgba(255,255,255,.2); }
.en-preview .sp__lightbox-arrow--prev { left: 1rem; }
.en-preview .sp__lightbox-arrow--next { right: 1rem; }

@keyframes spFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   9. WC TABS + RELATED (below hero, white bg)
   ══════════════════════════════════════════ */

.en-preview .sp__wc-below {
    background: #FFFFFF;
    padding: clamp(40px, 5vw, 80px) 0;
}

/* Override: textos en zona blanca = oscuros */
.en-preview .sp__wc-below,
.en-preview .sp__wc-below p,
.en-preview .sp__wc-below span,
.en-preview .sp__wc-below label,
.en-preview .sp__wc-below a,
.en-preview .sp__wc-below td,
.en-preview .sp__wc-below th,
.en-preview .sp__wc-below li,
.en-preview .sp__wc-below div,
.en-preview .sp__wc-below h1,
.en-preview .sp__wc-below h2,
.en-preview .sp__wc-below h3,
.en-preview .sp__wc-below h4 {
    color: #161616 !important;
}

.en-preview .sp__wc-below .woocommerce-tabs { margin-bottom: 3rem; }
.en-preview .sp__wc-below .woocommerce-tabs ul.tabs {
    display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 2rem;
    border-bottom: 2px solid #E5E5E7;
}
.en-preview .sp__wc-below .woocommerce-tabs ul.tabs li { margin: 0; }
.en-preview .sp__wc-below .woocommerce-tabs ul.tabs li a {
    display: block; padding: .75rem 1.5rem;
    font-family: var(--fb); font-size: 14px; font-weight: 600;
    color: rgba(22,22,22,.5) !important;
    text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all var(--t);
}
.en-preview .sp__wc-below .woocommerce-tabs ul.tabs li.active a {
    color: #161616 !important;
    border-bottom-color: #E6007E;
}

/* ══════════════════════════════════════════
   10. WC NOTICES (dark bg overrides)
   ══════════════════════════════════════════ */

.en-preview .sp .woocommerce-message,
.en-preview .sp .woocommerce-error,
.en-preview .sp .woocommerce-info {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1rem;
}
.en-preview .sp .woocommerce-error { border-color: rgba(230,0,126,.3) !important; }

/* ══════════════════════════════════════════════════════════════
   BELOW THE FOLD — Secciones del diseño Bolt
   Prefijo sp2__ para evitar conflictos con el Hero (sp__)
   Class names match single-product-v2-below.php exactly.
   ══════════════════════════════════════════════════════════════ */

/* ── NeonWave SVG Divider ── */
.en-preview .sp2__wave {
    position: relative;
    width: 100%;
    height: clamp(40px, 5vw, 80px);
    margin-top: -1px;
    margin-bottom: -1px;
    overflow: hidden;
}
.en-preview .sp2__wave svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Section headers (shared by all below-fold sections) ── */
.en-preview .sp2__section-hd {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.en-preview .sp2__section-hd .ey {
    font-family: var(--fb); font-weight: 700;
    font-size: clamp(11px, .85vw, 13px);
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--mg) !important;
    display: block; margin-bottom: .75rem;
}
.en-preview .sp2__section-hd h2 {
    font-family: var(--ft); font-weight: 700;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: 1.2;
    margin: 0;
    color: var(--ne) !important;
}
/* Light variant (used on dark bg sections: colors, box, faq, related) */
.en-preview .sp2__section-hd--light h2 {
    color: var(--bl) !important;
}
.en-preview .sp2__section-hd h2 span {
    color: var(--mg) !important;
}
.en-preview .sp2__section-sub {
    max-width: 640px; margin: .75rem auto 0;
    font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,.5) !important;
}
/* On light bg sections the subtitle inherits dark text; override if needed */
.en-preview .sp2__features .sp2__section-sub,
.en-preview .sp2__specs .sp2__section-sub,
.en-preview .sp2__install .sp2__section-sub,
.en-preview .sp2__reviews .sp2__section-sub {
    color: #777 !important;
}

/* ── Section padding (all below-fold sections) ── */
.en-preview .sp2__features,
.en-preview .sp2__colors,
.en-preview .sp2__specs,
.en-preview .sp2__box,
.en-preview .sp2__install,
.en-preview .sp2__seo,
.en-preview .sp2__reviews,
.en-preview .sp2__faq,
.en-preview .sp2__cta,
.en-preview .sp2__related {
    padding: clamp(48px, 6vw, 90px) 0;
}


/* ══════════════════════════════════════════
   2. FEATURES — 3-col grid, white cards,
   colored hover, stats at bottom
   ══════════════════════════════════════════ */

.en-preview .sp2__features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px)  { .en-preview .sp2__features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .en-preview .sp2__features-grid { grid-template-columns: repeat(3, 1fr); } }

.en-preview .sp2__feat-card {
    position: relative;
    padding: clamp(20px, 2.5vw, 32px);
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--gm);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
    transition: border-color .5s ease, box-shadow .5s ease;
}
.en-preview .sp2__feat-card:hover {
    border-color: var(--card-color, #E5E5E7) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

/* Radial glow on hover (top-right corner) */
.en-preview .sp2__feat-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.en-preview .sp2__feat-card:hover::before {
    opacity: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--card-color, #E6007E) 10%, transparent), transparent 70%);
}

/* Icon box — gray default, colored on hover */
.en-preview .sp2__feat-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: #F5F5F5;
    border: 1px solid #E5E5E7;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    transition: all .4s ease;
    color: #888;
}
.en-preview .sp2__feat-icon svg {
    width: 24px; height: 24px;
    stroke: currentColor !important;
    transition: all .4s ease;
}
.en-preview .sp2__feat-card:hover .sp2__feat-icon {
    color: var(--card-color) !important;
    background: color-mix(in srgb, var(--card-color, #E6007E) 10%, #F5F5F5);
    border-color: color-mix(in srgb, var(--card-color, #E6007E) 30%, transparent);
}

/* Stat number — gray default, colored on hover */
.en-preview .sp2__feat-stat {
    font-family: var(--ft);
    font-size: 28px;
    font-weight: 700;
    color: #CCC !important;
    margin-bottom: .25rem;
    transition: color .4s ease;
}
.en-preview .sp2__feat-card:hover .sp2__feat-stat {
    color: var(--card-color) !important;
}

/* Title — dark default, colored on hover */
.en-preview .sp2__feat-title {
    font-size: 15px; font-weight: 700;
    color: #161616 !important;
    margin: 0 0 .5rem;
    transition: color .4s ease;
}
.en-preview .sp2__feat-card:hover .sp2__feat-title {
    color: var(--card-color) !important;
}

/* Description */
.en-preview .sp2__feat-desc {
    font-size: 13px;
    color: #777 !important;
    margin: 0;
    line-height: 1.6;
}

/* Stat label (bottom of card) */
.en-preview .sp2__feat-label {
    display: block;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
    font-size: 11px;
    color: #999 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* ══════════════════════════════════════════
   3. COLOR GUIDE — 7-col grid, dark bg,
   card with image + dot + name
   ══════════════════════════════════════════ */

.en-preview .sp2__colors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 480px)  { .en-preview .sp2__colors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .en-preview .sp2__colors-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .en-preview .sp2__colors-grid { grid-template-columns: repeat(7, 1fr); } }

.en-preview .sp2__color-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform .3s ease;
    cursor: default;
}
.en-preview .sp2__color-card:hover {
    transform: scale(1.03);
}

/* Image area */
.en-preview .sp2__color-img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}
.en-preview .sp2__color-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.en-preview .sp2__color-card:hover .sp2__color-img img {
    transform: scale(1.1);
}

/* Label area (dot + name) at bottom */
.en-preview .sp2__color-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255,255,255,.04);
}

/* Color dot */
.en-preview .sp2__color-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.3);
}
.en-preview .sp2__color-dot--rgb {
    background: conic-gradient(#EE0C23, #F9B535, #64FF3C, #00D4FF, #1424E0, #9900F5, #FF008C, #EE0C23) !important;
    box-shadow: 0 0 10px rgba(230,0,126,.6), 0 0 20px rgba(230,0,126,.3);
}

/* Color name */
.en-preview .sp2__color-name {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF !important;
    line-height: 1.2;
}


/* ══════════════════════════════════════════
   4. TECH SPECS — centered table, magenta
   accents, alternating rows
   ══════════════════════════════════════════ */

.en-preview .sp2__specs-table {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(230,0,126,.15);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    background: #FFFFFF;
}

/* Individual row */
.en-preview .sp2__spec-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
    transition: background .3s ease;
}
.en-preview .sp2__spec-row:last-child {
    border-bottom: none;
}
.en-preview .sp2__spec-row:hover {
    background: rgba(230,0,126,.02);
}

/* Alternating row background */
.en-preview .sp2__spec-row--alt {
    background: rgba(230,0,126,.04);
}

/* Row icon */
.en-preview .sp2__spec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 12px 20px;
    flex-shrink: 0;
    width: 52px;
    color: var(--mg);
}
.en-preview .sp2__spec-icon svg {
    width: 20px; height: 20px;
}

/* Row label */
.en-preview .sp2__spec-label {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ne) !important;
}

/* Row value */
.en-preview .sp2__spec-value {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--mg) !important;
}


/* ══════════════════════════════════════════
   5. BOX CONTENTS — 2-col, green included
   vs yellow optional accents
   ══════════════════════════════════════════ */

.en-preview .sp2__box-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .en-preview .sp2__box-grid { grid-template-columns: 1fr 1fr; }
}

/* Column */
.en-preview .sp2__box-col {
    display: flex;
    flex-direction: column;
}

/* Column heading (Incluido / Opcional) */
.en-preview .sp2__box-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 1.25rem;
}
.en-preview .sp2__box-heading svg {
    flex-shrink: 0;
}

/* List */
.en-preview .sp2__box-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Item */
.en-preview .sp2__box-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    transition: all .3s ease;
}
.en-preview .sp2__box-item svg {
    flex-shrink: 0;
    margin-top: 3px;
}
.en-preview .sp2__box-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 2px;
}
.en-preview .sp2__box-item span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.45) !important;
    line-height: 1.5;
}

/* Included items — green accent */
.en-preview .sp2__box-col--included .sp2__box-item {
    background: rgba(0,153,90,.04);
    border: 1px solid rgba(0,153,90,.12);
}

/* Optional items — yellow/amber accent */
.en-preview .sp2__box-col--optional .sp2__box-item {
    background: rgba(212,167,0,.04);
    border: 1px dashed rgba(212,167,0,.18);
}


/* ══════════════════════════════════════════
   5b. INBOX — What's in the box
   ══════════════════════════════════════════ */

.en-preview .sp2__inbox .c,
.en-preview .sp2__colors .c {
    max-width: 1920px !important;
}

.en-preview .sp2__inbox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .en-preview .sp2__inbox-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.en-preview .sp2__inbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.en-preview .sp2__inbox-label--inc { color: #00FF79 !important; }
.en-preview .sp2__inbox-label--opt { color: #FFED00 !important; }
.en-preview .sp2__inbox-label svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.en-preview .sp2__inbox-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}
.en-preview .sp2__inbox-card--opt {
    background: rgba(255,237,0,.03);
    border-color: rgba(255,237,0,.12);
}

.en-preview .sp2__inbox-card img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .en-preview .sp2__inbox-card img { width: 200px; height: 200px; }
}

.en-preview .sp2__inbox-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0 0 4px;
}
.en-preview .sp2__inbox-card p {
    font-size: 13px;
    color: rgba(255,255,255,.5) !important;
    margin: 0;
    line-height: 1.5;
}

.en-preview .sp2__badge-opt {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,237,0,.15);
    color: #FFED00 !important;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: .05em;
}

.en-preview .sp2__inbox-note {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,.35) !important;
    margin-top: 24px;
    font-style: italic;
}


/* ══════════════════════════════════════════
   6. INSTALL GUIDE — 4-col, magenta numbered
   circles, white cards
   ══════════════════════════════════════════ */

.en-preview .sp2__install-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 640px)  { .en-preview .sp2__install-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .en-preview .sp2__install-grid { grid-template-columns: repeat(4, 1fr); } }

.en-preview .sp2__install-card {
    background: #FFFFFF;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--gm);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    transition: box-shadow .3s ease;
}
.en-preview .sp2__install-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Numbered circle */
.en-preview .sp2__install-num {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #E6007E, #CC0066);
    box-shadow: 0 4px 12px rgba(230,0,126,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.en-preview .sp2__install-num span {
    color: #FFFFFF !important;
    font-family: var(--ft);
    font-size: 18px;
    font-weight: 700;
}

/* Step icon */
.en-preview .sp2__install-icon {
    color: var(--mg);
    margin-bottom: 12px;
}
.en-preview .sp2__install-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Step title */
.en-preview .sp2__install-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ne) !important;
    margin: 0 0 8px;
}

/* Step description */
.en-preview .sp2__install-desc {
    font-size: 13px;
    color: #777 !important;
    margin: 0;
    line-height: 1.6;
}

/* Arrow between cards on desktop */
@media (min-width: 1024px) {
    .en-preview .sp2__install-card:not(:last-child)::after {
        content: '\2192';
        position: absolute;
        top: 28px;
        right: -14px;
        font-size: 22px;
        color: #CCC;
        pointer-events: none;
    }
}


/* ══════════════════════════════════════════
   7. SEO CONTENT — dark bg, green headings,
   white/60 body text
   ══════════════════════════════════════════ */

.en-preview .sp2__seo-content {
    max-width: 800px;
    margin: 0 auto;
}
.en-preview .sp2__seo-content > * + * {
    margin-top: 2rem;
}
.en-preview .sp2__seo-content h2,
.en-preview .sp2__seo-content h3,
.en-preview .sp2__seo-content h4,
.en-preview .sp2__seo-content h5,
.en-preview .sp2__seo-content h6 {
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 700;
    color: var(--vn) !important;
    margin: 0 0 .75rem;
    line-height: 1.3;
}
.en-preview .sp2__seo-content p {
    color: rgba(255,255,255,.6) !important;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.en-preview .sp2__seo-content p:last-child {
    margin-bottom: 0;
}
.en-preview .sp2__seo-content a {
    color: var(--mg) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.en-preview .sp2__seo-content a:hover {
    color: var(--bl) !important;
}
.en-preview .sp2__seo-content ul,
.en-preview .sp2__seo-content ol {
    color: rgba(255,255,255,.6) !important;
    padding-left: 1.25rem;
    margin: .5rem 0 1.5rem;
}
.en-preview .sp2__seo-content li {
    margin-bottom: .4rem;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.6) !important;
}
.en-preview .sp2__seo-content strong {
    color: rgba(255,255,255,.85) !important;
}


/* ══════════════════════════════════════════
   8. REVIEWS — white bg, rating summary
   on left, 3-col card grid on right
   ══════════════════════════════════════════ */

.en-preview .sp2__reviews-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .en-preview .sp2__reviews-layout {
        flex-direction: row;
        gap: 2.5rem;
    }
}

/* ── Rating summary (left column) ── */
.en-preview .sp2__reviews-summary {
    flex-shrink: 0;
    text-align: center;
}
@media (min-width: 1024px) {
    .en-preview .sp2__reviews-summary {
        width: 220px;
        text-align: left;
    }
}

/* Average rating display */
.en-preview .sp2__reviews-avg {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
@media (min-width: 1024px) {
    .en-preview .sp2__reviews-avg { justify-content: flex-start; }
}
.en-preview .sp2__reviews-number {
    font-family: var(--ft);
    font-size: 48px;
    font-weight: 700;
    color: var(--ne) !important;
    line-height: 1;
}
.en-preview .sp2__reviews-outof {
    font-size: 18px;
    font-weight: 600;
    color: #999 !important;
}

/* Stars row */
.en-preview .sp2__reviews-stars {
    display: flex;
    gap: 2px;
    margin: 8px 0;
    justify-content: center;
}
@media (min-width: 1024px) {
    .en-preview .sp2__reviews-stars { justify-content: flex-start; }
}

/* Star SVG styling (shared by reviews + related) */
.en-preview .sp2__star {
    fill: var(--gm);
    stroke: none;
}
.en-preview .sp2__star--filled {
    fill: var(--am);
}

/* Total count */
.en-preview .sp2__reviews-total {
    font-size: 13px;
    color: #555 !important;
    margin: 4px 0 0;
}

/* ── Rating bars ── */
.en-preview .sp2__reviews-bars {
    margin-top: 1.25rem;
}
.en-preview .sp2__reviews-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.en-preview .sp2__reviews-bar-label {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 32px;
    font-size: 12px;
    color: #555 !important;
    flex-shrink: 0;
}
.en-preview .sp2__reviews-bar-label svg {
    fill: var(--mg);
}
.en-preview .sp2__reviews-bar-track {
    flex: 1;
    height: 8px;
    background: var(--gm);
    border-radius: 4px;
    overflow: hidden;
}
.en-preview .sp2__reviews-bar-fill {
    height: 100%;
    background: var(--am);
    border-radius: 4px;
    transition: width .7s ease;
}
.en-preview .sp2__reviews-bar-count {
    width: 28px;
    text-align: right;
    font-size: 12px;
    color: #555 !important;
    flex-shrink: 0;
}

/* ── Review cards (right column) ── */
.en-preview .sp2__reviews-cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .en-preview .sp2__reviews-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .en-preview .sp2__reviews-cards { grid-template-columns: repeat(3, 1fr); }
}

.en-preview .sp2__review-card {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--gm);
    background: #FFFFFF;
    transition: box-shadow .3s ease;
    display: flex;
    flex-direction: column;
}
.en-preview .sp2__review-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Card header (avatar + meta) */
.en-preview .sp2__review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.en-preview .sp2__review-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mg), var(--vi));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF !important;
    flex-shrink: 0;
}
.en-preview .sp2__review-meta {
    display: flex;
    flex-direction: column;
}
.en-preview .sp2__review-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--ne) !important;
    display: block;
}
.en-preview .sp2__review-date {
    font-size: 11px;
    color: #999 !important;
    display: block;
}

/* Review stars */
.en-preview .sp2__review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
}

/* Review text */
.en-preview .sp2__review-text {
    font-size: 14px;
    color: var(--ne) !important;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.en-preview .sp2__review-text p {
    color: var(--ne) !important;
    margin: 0;
}

/* Empty state */
.en-preview .sp2__reviews-empty {
    text-align: center;
    font-size: 14px;
    color: #777 !important;
    padding: 2rem 0;
}


/* ══════════════════════════════════════════
   9. FAQ — dark bg, <details>/<summary>,
   magenta chevrons, smooth expand
   ══════════════════════════════════════════ */

.en-preview .sp2__faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each FAQ item uses native <details> */
.en-preview .sp2__faq-item {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.en-preview .sp2__faq-item:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    border-color: rgba(255,255,255,.12);
}

/* Question (summary) */
.en-preview .sp2__faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;           /* remove default marker */
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF !important;
    user-select: none;
}
.en-preview .sp2__faq-q::-webkit-details-marker { display: none; }
.en-preview .sp2__faq-q::marker { display: none; content: ''; }

/* Chevron indicator (CSS-only, replaces SVG) */
.en-preview .sp2__faq-q::after {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border-right: 2px solid var(--mg);
    border-bottom: 2px solid var(--mg);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform .3s ease;
}
.en-preview .sp2__faq-item[open] > .sp2__faq-q::after {
    transform: rotate(-135deg);
}

/* Answer */
.en-preview .sp2__faq-a {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.6) !important;
}
.en-preview .sp2__faq-a p {
    margin: 0 0 .75rem;
    color: rgba(255,255,255,.6) !important;
}
.en-preview .sp2__faq-a p:last-child {
    margin-bottom: 0;
}
.en-preview .sp2__faq-a strong {
    color: #FFFFFF !important;
}
.en-preview .sp2__faq-a a {
    color: var(--mg) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.en-preview .sp2__faq-a a:hover {
    color: var(--bl) !important;
}
.en-preview .sp2__faq-a ul,
.en-preview .sp2__faq-a ol {
    padding-left: 1.25rem;
    margin: .5rem 0 .75rem;
    color: rgba(255,255,255,.6) !important;
}
.en-preview .sp2__faq-a li {
    margin-bottom: .4rem;
    color: rgba(255,255,255,.6) !important;
}
.en-preview .sp2__faq-a li strong {
    color: #FFFFFF !important;
}


/* ══════════════════════════════════════════
   10. CUSTOM CTA — gradient card,
   magenta-purple icon, yellow button
   ══════════════════════════════════════════ */

.en-preview .sp2__cta-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    text-align: center;
}

.en-preview .sp2__cta-title {
    position: relative;
    font-family: var(--ft);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0 0 .75rem;
    line-height: 1.25;
}
.en-preview .sp2__cta-desc {
    position: relative;
    font-size: 15px;
    color: rgba(255,255,255,.6) !important;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Button (uses global .btn .btn--am from theme) */
.en-preview .sp2__cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ══════════════════════════════════════════
   11. RELATED PRODUCTS — dark bg, 4-col
   grid, image hover scale
   ══════════════════════════════════════════ */

.en-preview .sp2__related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .en-preview .sp2__related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .en-preview .sp2__related-grid { grid-template-columns: repeat(6, 1fr); }
}

.en-preview .sp2__related-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: all .3s ease;
    text-decoration: none !important;
}
.en-preview .sp2__related-card:hover {
    border-color: rgba(230,0,126,.25);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

/* Image */
.en-preview .sp2__related-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}
.en-preview .sp2__related-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.en-preview .sp2__related-card:hover .sp2__related-img img {
    transform: scale(1.1);
}

/* Second image on hover */
.en-preview .sp2__related-img2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 1;
}
.en-preview .sp2__related-card:hover .sp2__related-img2 {
    opacity: 1;
}

/* Hover overlay */
.en-preview .sp2__related-card:hover .sp2__related-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
    pointer-events: none;
}

/* Info area */
.en-preview .sp2__related-info {
    padding: 12px 14px;
}
.en-preview .sp2__related-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
    line-height: 1.4;
}
.en-preview .sp2__related-card:hover .sp2__related-name {
    color: var(--mg) !important;
}

/* Related stars */
.en-preview .sp2__related-stars {
    display: flex;
    gap: 1px;
    margin-bottom: 4px;
}

/* Price */
.en-preview .sp2__related-price {
    font-family: var(--ft);
    font-weight: 700;
    display: block;
    margin-top: 4px;
}
.en-preview .sp2__related-price ins,
.en-preview .sp2__related-price > .woocommerce-Price-amount,
.en-preview .sp2__related-price ins .woocommerce-Price-amount {
    color: var(--vn) !important;
    font-size: 15px;
    text-decoration: none !important;
}
.en-preview .sp2__related-price del,
.en-preview .sp2__related-price del .woocommerce-Price-amount {
    color: rgba(255,255,255,.3) !important;
    font-size: 12px;
}

/* ══════════════════════════════════════════
   WHATS IN THE BOX — carousel 6 items
   ══════════════════════════════════════════ */

.en-preview .sp2__witb {
    background: #161616 !important;
    padding: clamp(48px, 6vw, 90px) 0;
    position: relative;
    overflow: hidden;
}

.en-preview .sp2__witb-hd {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.en-preview .sp2__witb-hd .ey {
    color: #E6007E !important;
    display: block;
    margin-bottom: .75rem;
}

.en-preview .sp2__witb-hd h2 {
    font-family: var(--ft);
    font-size: clamp(24px, 3.2vw, 42px);
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0;
}

.en-preview .sp2__witb-highlight {
    display: inline-block;
    transition: color .7s ease, text-shadow .7s ease;
    color: #FF5F00;
    text-shadow: 0 0 20px rgba(255,95,0,.4), 0 0 40px rgba(255,95,0,.2);
}

.en-preview .sp2__witb-hd p {
    color: rgba(255,255,255,.4) !important;
    font-size: 14px;
    max-width: 480px;
    margin: 1rem auto 0;
}

/* Grid */
.en-preview .sp2__witb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 640px) { .en-preview .sp2__witb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .en-preview .sp2__witb-grid { grid-template-columns: repeat(6, 1fr); } }

/* Card */
.en-preview .sp2__witb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    cursor: pointer;
    transition: all .5s ease;
}

.en-preview .sp2__witb-card.is-active {
    border-color: var(--witb-color, rgba(255,255,255,.05));
    box-shadow: 0 8px 32px color-mix(in srgb, var(--witb-color, #fff) 12%, transparent),
                0 0 0 1px color-mix(in srgb, var(--witb-color, #fff) 15%, transparent);
}

/* Icon */
.en-preview .sp2__witb-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.03);
    border: 1.5px solid rgba(255,255,255,.08);
    transition: all .5s ease;
    color: rgba(255,255,255,.4);
}

.en-preview .sp2__witb-card.is-active .sp2__witb-icon {
    color: var(--witb-color);
    border-color: var(--witb-color);
    background: color-mix(in srgb, var(--witb-color, #fff) 8%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--witb-color, #fff) 25%, transparent);
}

.en-preview .sp2__witb-icon svg {
    stroke: currentColor !important;
}

/* Label */
.en-preview .sp2__witb-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.85) !important;
    margin-top: 14px;
    margin-bottom: 4px;
    transition: color .5s ease;
}

.en-preview .sp2__witb-card.is-active .sp2__witb-label {
    color: var(--witb-color) !important;
}

/* Description */
.en-preview .sp2__witb-desc {
    font-size: 11px;
    color: rgba(255,255,255,.35) !important;
    line-height: 1.4;
}

/* Underline bar */
.en-preview .sp2__witb-bar {
    width: 24px;
    height: 2px;
    border-radius: 1px;
    margin-top: 12px;
    background: transparent;
    transition: all .5s ease;
}

.en-preview .sp2__witb-card.is-active .sp2__witb-bar {
    background: var(--witb-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--witb-color, #fff) 60%, transparent);
}

/* Dots */
.en-preview .sp2__witb-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.en-preview .sp2__witb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255,255,255,.15);
    cursor: pointer;
    transition: all .5s ease;
}

.en-preview .sp2__witb-dot.is-active {
    transform: scale(1.4);
}