/**
 * 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;
}

.product-related-section .js-prod-related-panel-bundle .videoIA {
    display: flex !important;
    align-items: start;
    gap: 50px;
    width: 100%;
}

/* Alinear el borde izquierdo del video con el primer botón (misma sangría 0.75rem). */
@media (min-width: 769px) {
    .product-related-section[class*="--btns-"] .js-prod-related-block .product-measures--video-info > dd {
        margin: 0;
        padding: 0 0.75rem;
    }

    /* El video mantiene el MISMO tamaño (columna de 1/3) para cualquier cantidad de
       botones (1, 2 o 3). Con 3 botones, además, su borde derecho coincide con el
       borde derecho del primer botón.
       Se anula el max-width:70vw de .mw100 para que el área del video ocupe el
       mismo ancho que la fila de botones (ambos con padding 0.75rem). */
    .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-left: 0 !important;
        margin-right: 0 !important;
    }

    /* La columna del video ocupa el ancho de un botón (gap entre botones = 0.5rem),
       por lo que su borde derecho coincide con el borde derecho del primer botón. */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .div-disenador-stack {
        flex: 0 0 auto !important;
        width: calc((100% - 1rem) / 3) !important;
        max-width: calc((100% - 1rem) / 3) !important;
        align-items: flex-end !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Empuja el video a la DERECHA de su columna (gana a margin:0 auto de product.css). */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .div-disenador-stack .div-disenador {
        width: 48% !important;
        max-width: 100% !important;
        margin-left: auto !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;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* El área del video ocupa el ancho completo (para alinear con los botones),
       lo que ensancharía el texto de la derecha. Se le devuelve su ancho original
       (el que tenía cuando el video estaba limitado a 70vw): 2/3 de 70vw menos el gap. */
    .product-related-section[class*="--btns-"] .js-prod-related-panel-bundle .info-extra {
        flex: 0 1 auto !important;
        width: calc((140vw + 1rem) / 3 - 50px) !important;
        max-width: calc((140vw + 1rem) / 3 - 50px) !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%;
    margin-top: 1rem;
}

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

.product-related-section .js-prod-related-thumbs.is-active {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Ocultar hasta que Swiper aplique el estilo (evita fila de miniaturas sin formato). */
.product-related-section .js-prod-related-thumbs.is-active:not(.is-thumbs-ready) {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    pointer-events: none;
}

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

.product-related-section .js-prod-related-thumbs[hidden] {
    display: none !important;
}

.product-related-section .disenador-thumbs-wrap {
    --swiper-navigation-size: 50px;
    width: 100%;
}

.product-related-section .disenador-thumbs-wrap .thumbs-slider {
    height: fit-content;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 68%;
    width: 100%;
}

.product-related-section .disenador-thumbs-wrap .swiper-wrapper {
    height: fit-content;
}

.product-related-section .disenador-thumbs-wrap .side-arrow {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 0;
    border: none;
    background: transparent;
    margin: 0;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

.product-related-section .disenador-thumbs-wrap .side-arrow:hover {
    color: rgba(255, 255, 255, 0.85);
}

.product-related-section .disenador-thumbs-wrap .side-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.product-related-section .disenador-thumbs-wrap .side-arrow:active {
    transform: translateY(1px) scale(0.99);
}

.product-related-section .disenador-thumbs-wrap .swiper-button-prev.side-arrow {
    padding-left: 0;
}

.product-related-section .disenador-thumbs-wrap .swiper-button-next.side-arrow {
    padding-right: 0;
}

.product-related-section .disenador-thumbs-wrap .side-arrow .prod-card-carousel__chev {
    display: block;
    width: calc(1.85rem * 3);
    height: calc(1.85rem * 3);
    flex-shrink: 0;
}

.product-related-section .disenador-thumbs-wrap .side-arrow::after {
    content: '' !important;
    display: none !important;
}

@media (max-width: 768px) {
    .product-related-section .disenador-thumbs-wrap .side-arrow {
        flex: 0 0 40px;
        padding: 3px;
        border-radius: 6px;
    }

    .product-related-section .disenador-thumbs-wrap .side-arrow .prod-card-carousel__chev {
        width: calc(1.5rem * 3);
        height: calc(1.5rem * 3);
    }
}

.product-related-section .disenador-thumbs-wrap .thumbs-slider {
    height: fit-content;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 68%;
    width: 100%;
    overflow: hidden;
}

.product-related-section .disenador-thumbs-wrap .swiper-wrapper {
    height: fit-content;
    align-items: stretch;
}

.product-related-section .disenador-thumbs-wrap .swiper-slide {
    box-sizing: border-box;
    height: auto;
}

.product-related-section .disenador-thumbs-wrap .cardProd {
    background-color: #fff;
    padding: 10px;
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.product-related-section .disenador-thumbs-wrap .cardProd--single {
    max-width: 300px;
    margin: 0 auto;
}

.product-related-section .disenador-thumbs-wrap .cardProd img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.product-related-section .disenador-thumbs-wrap .cardProd h2 {
    color: #111;
    font-size: 20px;
    line-height: 40px;
    border: none;
    padding: 0;
}

.product-related-section .disenador-thumbs-wrap .cardProd h3 {
    text-align: center;
    color: #222;
}

.product-related-section .disenador-thumbs-wrap .lupa {
    position: absolute;
    top: 5%;
    right: 5%;
    cursor: pointer;
}

.product-related-section .disenador-thumbs-wrap .lupa > svg {
    width: 45px;
    height: 45px;
}

@media (max-width: 1000px) {
    .product-related-section .disenador-thumbs-wrap .lupa > svg {
        width: 35px;
        height: 35px;
    }
}