/* WooCommerce Vertical Product Video Preview - Novabrand v1.7 */

/* Single product video: replacement for the normal product image/gallery. */
.wvpvp-product-video-wrap {
    width: min(100%, 520px);
    margin: 0 24px 24px 0;
    float: left;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.wvpvp-product-video-wrap.wvpvp-is-inside-gallery {
    float: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 24px;
}

.wvpvp-product-video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 760px;
    object-fit: cover;
    background: #111;
}

body.wvpvp-single-has-video.wvpvp-single-video-mounted .woocommerce-product-gallery__wrapper,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .product-thumbnails,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .product-gallery-slider,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .flickity-page-dots,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .flickity-button,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .easyzoom-flyout,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .zoom-button,
body.wvpvp-single-has-video.wvpvp-single-video-mounted .woocommerce-product-gallery__trigger {
    display: none !important;
}

@media (max-width: 768px) {
    .wvpvp-product-video-wrap {
        float: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 20px;
    }

    .wvpvp-product-video {
        max-height: 78vh;
    }
}

/* Catalog/product-card layout. Every product gets the same 9:16 media frame. */
.woocommerce ul.products li.product .box-image,
.woocommerce-page ul.products li.product .box-image,
.product-small .box-image,
.product .box-image {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #f7f7f7;
    position: relative !important;
}

.woocommerce ul.products li.product .box-image > a,
.woocommerce-page ul.products li.product .box-image > a,
.product-small .box-image > a,
.product .box-image > a,
.woocommerce ul.products li.product .box-image .image-cover,
.woocommerce-page ul.products li.product .box-image .image-cover,
.product-small .box-image .image-cover,
.product .box-image .image-cover,
.woocommerce ul.products li.product .box-image .image-fade_in_back,
.woocommerce-page ul.products li.product .box-image .image-fade_in_back,
.product-small .box-image .image-fade_in_back,
.product .box-image .image-fade_in_back {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.woocommerce ul.products li.product .box-image img,
.woocommerce-page ul.products li.product .box-image img,
.product-small .box-image img,
.product .box-image img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    position: static !important;
    transform: none !important;
}

/* Hide only extra/hover/secondary images. Do NOT hide Flatsome's image-fade wrapper itself. */
.woocommerce ul.products li.product .box-image img.show-on-hover,
.woocommerce-page ul.products li.product .box-image img.show-on-hover,
.product-small .box-image img.show-on-hover,
.product .box-image img.show-on-hover,
.woocommerce ul.products li.product .box-image img.back-image,
.woocommerce-page ul.products li.product .box-image img.back-image,
.product-small .box-image img.back-image,
.product .box-image img.back-image,
.woocommerce ul.products li.product .box-image img.hover-image,
.woocommerce-page ul.products li.product .box-image img.hover-image,
.product-small .box-image img.hover-image,
.product .box-image img.hover-image,
.woocommerce ul.products li.product .box-image a > img:nth-of-type(n+2),
.woocommerce-page ul.products li.product .box-image a > img:nth-of-type(n+2),
.product-small .box-image a > img:nth-of-type(n+2),
.product .box-image a > img:nth-of-type(n+2) {
    display: none !important;
}

/* Video preview in product cards: same box size as image products. */
.wvpvp-catalog-video-wrap {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #111;
    position: relative !important;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
}

.wvpvp-catalog-video-wrap:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.wvpvp-catalog-video,
.wvpvp-product-video {
    -webkit-user-select: none;
    user-select: none;
}

.wvpvp-catalog-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    background: #111;
    pointer-events: none;
    border-radius: 14px !important;
}

/* If a theme still prints an image in a product that has a video, hide the leftovers only for that product card. */
.woocommerce ul.products li.product.wvpvp-has-video .box-image img:not(.wvpvp-catalog-video),
.woocommerce-page ul.products li.product.wvpvp-has-video .box-image img:not(.wvpvp-catalog-video),
.product-small.wvpvp-has-video .box-image img:not(.wvpvp-catalog-video),
.product.wvpvp-has-video .box-image img:not(.wvpvp-catalog-video),
.wvpvp-has-video .box-image .image-tools,
.wvpvp-has-video .box-image .quick-view,
.wvpvp-has-video .box-image .show-on-hover {
    display: none !important;
}

.wvpvp-has-video .box-image {
    background: #111 !important;
}

/* Hide browser video controls/download UI on frontend. */
.wvpvp-catalog-video::-webkit-media-controls,
.wvpvp-product-video::-webkit-media-controls,
.wvpvp-catalog-video::-webkit-media-controls-panel,
.wvpvp-product-video::-webkit-media-controls-panel,
.wvpvp-catalog-video::-webkit-media-controls-play-button,
.wvpvp-product-video::-webkit-media-controls-play-button,
.wvpvp-catalog-video::-webkit-media-controls-timeline,
.wvpvp-product-video::-webkit-media-controls-timeline,
.wvpvp-catalog-video::-webkit-media-controls-current-time-display,
.wvpvp-product-video::-webkit-media-controls-current-time-display,
.wvpvp-catalog-video::-webkit-media-controls-time-remaining-display,
.wvpvp-product-video::-webkit-media-controls-time-remaining-display,
.wvpvp-catalog-video::-webkit-media-controls-enclosure,
.wvpvp-product-video::-webkit-media-controls-enclosure {
    display: none !important;
    opacity: 0 !important;
}