/* Ficha de producto */
.woocommerce-product-gallery.webtopus-video-product-host {
    position: relative !important;
    overflow: hidden;
}

.webtopus-video-product {
    position: absolute;
    right: clamp(8px, 1.4vw, 18px);
    bottom: clamp(8px, 1.4vw, 18px);
    z-index: 3;
    width: clamp(92px, 25%, 180px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: clamp(10px, 1.2vw, 16px);
    background: #111;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.webtopus-video-product__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}

/* Tarjetas de tienda, categorías, etiquetas, bloques y shortcodes */
.webtopus-product-card-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}

.webtopus-product-card-media > img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Tamaño fluido: se adapta al ancho real de cada tarjeta, no al viewport.
 * Los límites impiden que el vídeo resulte enorme en monitores grandes o
 * demasiado pequeño en rejillas con muchas columnas.
 */
.webtopus-video-product--card {
    right: clamp(6px, 2.2%, 12px);
    bottom: clamp(6px, 2.2%, 12px);
    width: clamp(64px, 24%, 118px);
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    border-radius: clamp(7px, 1.5vw, 12px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
}

/* Evita que el vídeo oculte menús desplegables del tema. */
.site-header,
header,
.elementor-location-header {
    position: relative;
    z-index: 100;
}

/* Pantallas grandes y tarjetas amplias: crecimiento muy contenido. */
@media (min-width: 1440px) {
    .webtopus-video-product--card {
        width: clamp(72px, 22%, 126px);
    }
}

/* Portátiles pequeños y tabletas. */
@media (max-width: 1024px) {
    .webtopus-video-product--card {
        width: clamp(60px, 23.5%, 104px);
    }
}

/* Teléfonos: ligeramente más pequeño para no tapar la fotografía. */
@media (max-width: 767px) {
    .webtopus-video-product:not(.webtopus-video-product--card) {
        width: clamp(76px, 24%, 108px);
        right: 8px;
        bottom: 8px;
        border-radius: 10px;
    }

    .webtopus-video-product--card {
        width: clamp(54px, 22%, 82px);
        right: 6px;
        bottom: 6px;
        border-radius: 8px;
    }
}

/* Teléfonos estrechos. */
@media (max-width: 420px) {
    .webtopus-video-product--card {
        width: clamp(50px, 21%, 74px);
        right: 5px;
        bottom: 5px;
        border-radius: 7px;
    }
}

/* Resoluciones especialmente estrechas. */
@media (max-width: 340px) {
    .webtopus-video-product--card {
        width: clamp(46px, 20%, 66px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .webtopus-video-product__video {
        animation: none;
    }
}