/**
 * PShowProductVideo — Frontend Styles
 */

.pshowvideo-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .05);
    transition: background .2s;
}

.pshowvideo-badge:hover {
    background: rgba(0, 0, 0, .15);
}

.pshowvideo-badge svg {
    width: 68px;
    height: 48px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
    transition: transform .15s;
}

.pshowvideo-badge:hover svg {
    transform: scale(1.1);
}

.pshowvideo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: #000;
}

/* Shorts 9:16 — fill height, derive width from aspect-ratio */
.pshowvideo-badge[data-type="shorts"],
.pshowvideo-overlay[data-type="shorts"] {
    width: auto;
    left: 50%;
    right: auto;
    aspect-ratio: 9 / 16;
    transform: translateX(-50%);
}

/* Regular 16:9 — fill width, derive height from aspect-ratio */
.pshowvideo-badge[data-type="regular"],
.pshowvideo-overlay[data-type="regular"] {
    height: auto;
    top: 50%;
    bottom: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
}

.pshowvideo-overlay iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Stabilize product cover for non-square video thumbnails */
.product-cover {
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
}

.product-cover picture {
    align-content: center;
}

.js-qv-product-cover {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

img.js-thumb[src*="pshowproductvideo"] {
    object-fit: cover;
}

img.js-modal-thumb[src*="pshowproductvideo"] {
    display: none;
}

/* Hide zoom layer when video thumbnail is shown */
.product-cover:has(img[src*="pshowproductvideo"]) .layer {
    display: none;
}