/**
 * Módulo de miniaturas relacionadas en ficha producto.
 * Reglas tomadas de css/designer.css (#disenador-thumbs-wrap, .cardProd, .lupa).
 * Alcance: solo .product-related-section para no afectar video ni texto del panel.
 */

.product-related-section .js-prod-related-panel-bundle.is-active {
    display: block !important;
}

/* Texto del panel diseñador / estilo / técnica */
.product-related-section .info-extra,
.product-related-section .info-extra .videoIA-info-body__title,
.product-related-section .info-extra .videoIA-info-body__bio-scroll,
.product-related-section .info-extra .descripcion,
.product-related-section .info-extra .descripcion * {
    font-family: Arial, Helvetica, sans-serif;
}

.product-related-section .js-prod-related-panel-bundle .videoIA {
    display: flex !important;
    align-items: start;
    gap: 50px;
    width: 100%;
    max-width: 100%;
    margin: 0 !important; /* anula .m-1 del partial */
    box-sizing: border-box;
}

/* Sin video: el texto ocupa todo el ancho del panel.
   Alto máximo = 1,5 videos 9:16 (el doble, menos un 25 %). */
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video {
    --lds-related-novideo-text-max-h: calc(351px * 16 / 9 * 1.5);
    --lds-related-novideo-text-max-h: calc(min(351px, 40.5cqi) * 16 / 9 * 1.5);
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .info-extra,
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .info-extra-width {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    overflow: visible !important;
}

/*
 * Rayas laterales: SOLO con panel activo sin video (.is-novideo-panel).
 * Con video la clase se quita y las rayas no se pintan.
 *
 * ≤991: ::before/::after SOLO en este rango (top: -.5rem); el carrusel las tapa.
 * ≥992: border-left/right en .js-prod-related-align-wrap. Sin pseudos en PC.
 */
.product-related-section.is-novideo-panel {
    overflow: visible;
}

.product-related-section .js-prod-related-block.is-novideo-panel {
    position: relative;
    overflow: visible;
}

/* ——— Móvil / tablet (≤991): pseudos en el bloque ——— */
@media (max-width: 991px) {
    .product-related-section .js-prod-related-block.is-novideo-panel::before,
    .product-related-section .js-prod-related-block.is-novideo-panel::after {
        content: "";
        position: absolute;
        top: -0.5rem; /* compensa margin-bottom .5rem de los botones */
        bottom: 0;
        width: 1px;
        background: rgba(150, 150, 150, 0.55);
        pointer-events: none;
        z-index: 0;
    }

    .product-related-section .js-prod-related-block.is-novideo-panel::before {
        left: 0;
    }

    .product-related-section .js-prod-related-block.is-novideo-panel::after {
        right: 0;
    }

    /* Con scroll en el texto: no pintar la raya derecha (deja sitio a la barra). */
    .product-related-section .js-prod-related-block.is-novideo-panel.has-bio-scroll::after {
        content: none;
        display: none;
    }

    /* Las miniaturas tapan la raya para que termine justo al tocarlas */
    .product-related-section .js-prod-related-block.is-novideo-panel .js-prod-related-thumbs-host {
        position: relative;
        z-index: 1;
        background-color: #000;
    }
}

/*
 * PC ≥992: un solo contenedor (.js-prod-related-align-wrap = sep + panel + carrusel)
 * con border-left/right. Bloque continuo desde el borde inferior de los botones
 * superiores hasta tocar el borde superior de Volver/Envíos (sin hueco exterior).
 * Aire bajo miniaturas = padding-bottom DENTRO del wrap (las líneas lo atraviesan).
 * No hay ::before/::after en este rango.
 */
@media (min-width: 992px) {
    .product-related-section .js-prod-related-block.is-novideo-panel::before,
    .product-related-section .js-prod-related-block.is-novideo-panel::after {
        content: none !important;
        display: none !important;
        border: none !important;
        width: 0 !important;
        height: 0 !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        background: none !important;
    }

    .product-related-section.is-novideo-panel {
        margin-bottom: 0 !important;
    }

    .product-related-section.is-novideo-panel > .product-related-buttons {
        margin-bottom: 0 !important;
    }

    /* Sin separación exterior: el bloque no deja hueco hacia Volver/Envíos. */
    .product-related-section.is-novideo-panel .js-prod-related-block {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        min-height: 0 !important;
        height: auto !important;
        flex-grow: 0;
        flex-shrink: 0;
        align-self: stretch;
    }

    .product-related-section.is-novideo-panel .js-prod-related-block .product-measures--video-info,
    .product-related-section.is-novideo-panel .js-prod-related-block .product-measures--video-info > dd {
        margin: 0;
        padding: 0;
        min-height: 0;
    }

    .product-related-section.is-novideo-panel .js-prod-related-block .js-prod-related-align-wrap {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        /* Aire bajo carrusel/texto DENTRO del borde: las líneas lo atraviesan. */
        padding: 0 0 1rem;
        min-height: 0 !important;
        height: auto !important;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid rgba(150, 150, 150, 0.55);
        border-right: 1px solid rgba(150, 150, 150, 0.55);
    }

    .product-related-section.is-novideo-panel .js-prod-related-block.has-bio-scroll .js-prod-related-align-wrap {
        border-right: none;
    }

    /* Anula line-height:5rem de .product-measures dt: solo la raya horizontal de 3px. */
    .product-related-section.is-novideo-panel .product-measures--video-info > dt.js-prod-related-sep:not([hidden]) {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        min-height: 0 !important;
        max-height: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        background: transparent !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        overflow: hidden !important;
        cursor: default;
    }

    .product-related-section .js-prod-related-block.is-novideo-panel .js-prod-related-thumbs-host {
        position: static;
        z-index: auto;
        background-color: transparent;
    }

    /* Sin margen inferior del host: el aire lo aporta el padding del wrap. */
    .product-related-section.is-novideo-panel .js-prod-related-align-wrap > .product-measures--video-info > dd > .js-prod-related-thumbs-host,
    .product-related-section.is-novideo-panel .js-prod-related-thumbs-host {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .product-related-section.is-novideo-panel .js-prod-related-thumbs-host:has(.js-prod-related-thumbs.is-active) {
        margin-bottom: 0 !important;
    }

    .product-related-section .js-prod-related-thumbs-host:not(:has(.js-prod-related-thumbs.is-active)),
    .product-related-section .js-prod-related-thumbs-host.is-empty,
    .product-related-section .js-prod-related-thumbs-host[hidden] {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
    }

    /* Sin video: el panel no aporta margen bajo que corte las líneas. */
    .product-related-section.is-novideo-panel .js-prod-related-panel-bundle .videoIA.videoIA--no-video {
        margin-bottom: 0 !important;
    }

    /* Picker oculto en PC: sin reserva de espacio bajo el bloque. */
    .product-related-section.is-novideo-panel > .product-related-picker {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sin hueco entre el módulo y Volver/Envíos: las líneas tocan su borde superior. */
    .product-ficha-page .product-related-section.is-novideo-panel + .div-consulta.product-ficha-volver-envio {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__title,
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__bio-scroll,
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .descripcion,
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .descripcion * {
    text-align: left !important;
}

/* Sin video el texto ocupa todo el ancho: inset lateral para que no pegue a los bordes.
   html está a 10px, así que 10rem = 100px por lado. */
.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__title {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
}

.product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__bio-scroll {
    box-sizing: border-box;
    padding-left: 10rem;
    padding-right: 10rem;
}

/* Scroll interno del bio sin video: solo PC ≥992 (≤991 crece con la página) */
@media (min-width: 992px) {
    .product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__bio-scroll {
        max-height: var(--lds-related-novideo-text-max-h);
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media (max-width: 991px) {
    .product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__bio-scroll {
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
    }
}

/* Botones + panel a todo el ancho de la sección (= video del producto). */
@media (min-width: 992px) {
    .product-related-section {
        container-type: inline-size;
        container-name: prod-related;
    }

    .product-related-section .product-related-buttons {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-block .product-measures--video-info > dd {
        margin: 0;
        padding: 0;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-align-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem !important;
        gap: 50px !important;
        box-sizing: border-box !important;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA.videoIA--no-video {
        justify-content: flex-start !important;
        align-items: stretch !important;
        margin-bottom: 0 !important; /* sin hueco que corte la raya hacia el carrusel */
    }

    /* Video (+35% vs 260px/30%); el texto toma el espacio restante. */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .div-disenador-stack {
        flex: 0 0 auto !important;
        width: min(351px, 40.5%) !important;
        max-width: 351px !important;
        min-width: 0 !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .div-disenador-stack .div-disenador {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .div-disenador-stack .div-disenador video,
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .vid-disenador {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Solo con video: el texto rellena el hueco a la derecha */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA--with-video .info-extra {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Sin video: texto a todo el ancho (después de la regla con-video para ganar) */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA--no-video .info-extra,
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA--no-video .info-extra-width {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        overflow: visible !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .info-extra .videoIA-info-body {
        min-height: 0;
        overflow: hidden;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .videoIA--no-video .info-extra .videoIA-info-body {
        overflow: visible;
    }

    .product-related-section[class*="--btns-"] .js-prod-related-thumbs-host {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__title,
    .product-related-section .js-prod-related-panel-bundle .videoIA.videoIA--no-video .videoIA-info-body__bio-scroll {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .product-related-section .js-prod-related-thumbs-host,
    .product-related-section .js-prod-related-thumbs-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.product-related-section .js-prod-related-panel-bundle:not(.is-active),
.product-related-section .js-prod-related-panel-bundle[hidden] {
    display: none !important;
}

.product-related-section .js-prod-related-thumbs-host {
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0;
    box-sizing: border-box;
}

.product-related-section .js-prod-related-thumbs-host.is-empty,
.product-related-section .js-prod-related-thumbs-host[hidden],
.product-related-section .js-prod-related-thumbs-host:not(:has(.js-prod-related-thumbs.is-active)) {
    display: none !important;
    margin: 0;
    padding: 0;
}

.product-related-section .js-prod-related-thumbs {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-related-section .js-prod-related-thumbs:not(.is-active),
.product-related-section .js-prod-related-thumbs[hidden] {
    display: none !important;
}

/*
 * Fallback visible: replica la fila y el espaciado que Swiper aplicará al
 * inicializarse. Evita que las miniaturas aparezcan pegadas durante el primer
 * render sin dejar un bloque vacío si el CDN tarda o falla.
 */
.product-related-section .js-prod-related-thumbs:not(.is-thumbs-ready) {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: hidden;
    pointer-events: auto;
}

.product-related-section .js-prod-related-thumbs:not(.is-thumbs-ready) .swiper-wrapper {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.product-related-section .js-prod-related-thumbs.is-thumbs-ready {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
}

/* Miniaturas pequeñas: mismo patrón que .carousel-below-main-slide .thumbs-slider */
.product-related-section .js-prod-related-thumbs .swiper.thumbs-slider {
    height: fit-content;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: related-thumbs;
}

.product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-wrapper {
    height: fit-content;
    align-items: stretch;
    width: max-content;
    margin-left: 0;
    margin-right: 0;
}

/* Pocas slides: flex en el root + transform 0 (evita doble centrado Swiper + margin:auto = pegadas a la derecha). */
.product-related-section .js-prod-related-thumbs.is-thumbs-centered .swiper.thumbs-slider {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch;
}

.product-related-section .js-prod-related-thumbs.is-thumbs-centered .swiper.thumbs-slider .swiper-wrapper {
    width: max-content !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start;
    transform: translate3d(0, 0, 0) !important;
}

.product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
    box-sizing: border-box;
    width: 120px;
    height: auto;
    aspect-ratio: 1;
    cursor: pointer;
    display: block;
    background: #fff;
    margin: 0;
    padding: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.product-related-section .js-prod-related-thumbs .js-prod-related-thumb-lupa {
    position: absolute;
    top: 4%;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 0;
}

.product-related-section .js-prod-related-thumbs .js-prod-related-thumb-lupa svg {
    display: block;
    width: clamp(28px, 42%, 44px);
    height: clamp(28px, 42%, 44px);
}

@container related-thumbs (max-width: 379px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 10px) / 2);
    }
}

@container related-thumbs (min-width: 380px) and (max-width: 509px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 20px) / 3);
    }
}

@container related-thumbs (min-width: 510px) and (max-width: 639px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 30px) / 4);
    }
}

@container related-thumbs (min-width: 640px) and (max-width: 769px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 40px) / 5);
    }
}

@container related-thumbs (min-width: 770px) and (max-width: 899px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 50px) / 6);
    }
}

@container related-thumbs (min-width: 900px) and (max-width: 1029px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 60px) / 7);
    }
}

@container related-thumbs (min-width: 1030px) and (max-width: 1159px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 70px) / 8);
    }
}

@container related-thumbs (min-width: 1160px) and (max-width: 1289px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 80px) / 9);
    }
}

@container related-thumbs (min-width: 1290px) and (max-width: 1419px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 90px) / 10);
    }
}

@container related-thumbs (min-width: 1420px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 100px) / 11);
    }
}

/* Ficha ≤991: exactamente 3 productos visibles (2 gaps de 10px); sin fragmento de un 4.º */
@media (max-width: 991px) {
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide {
        width: calc((100cqi - 20px) / 3) !important;
        max-width: calc((100cqi - 20px) / 3) !important;
        flex: 0 0 calc((100cqi - 20px) / 3);
        aspect-ratio: 1;
        box-sizing: border-box;
    }

    .product-related-section .js-prod-related-thumbs:not(.is-thumbs-ready) .swiper-wrapper {
        gap: 10px;
    }

    .product-related-section .js-prod-related-thumbs:not(.is-thumbs-ready) .swiper-slide {
        width: calc((100% - 20px) / 3) !important;
        max-width: calc((100% - 20px) / 3) !important;
        flex: 0 0 calc((100% - 20px) / 3);
        aspect-ratio: 1;
        box-sizing: border-box;
    }

    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Sin hueco negro sobrante bajo el carrusel; 8px hasta el selector */
    .product-related-section .js-prod-related-thumbs-host {
        margin-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .product-related-section .js-prod-related-thumbs,
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider,
    .product-related-section .js-prod-related-thumbs .swiper.thumbs-slider .swiper-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}