/* ==========================================================================
   Product Video Gallery — pvg-
   Minimal, scoped CSS. All selectors use the pvg- prefix or are nested
   inside .pvg-video-thumb / .pvg-video-slide so they cannot affect other page elements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Thumbnail cell — div.col.pvg-video-thumb
   Flatsome's Flickity uses div.col cells; we add pvg-video-thumb to ours.
   Flatsome controls the cell dimensions; we style the inner content without
   zooming or distorting the thumbnail image.
   -------------------------------------------------------------------------- */

/* Position:relative on the col so the play icon overlay works. */
div.col.pvg-video-thumb {
    position: relative;
}

/* The clickable anchor — fills the col completely with a square 1:1 frame. */
div.col.pvg-video-thumb > a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    line-height: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
}

/* The high-resolution thumbnail image — centered without zooming/stretching. */
div.col.pvg-video-thumb > a img.attachment-woocommerce_thumbnail {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* Semi-transparent dark scrim so the white play icon is readable over any photo. */
div.col.pvg-video-thumb > a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0.28 );
    transition: background 0.18s ease;
    pointer-events: none;
}

div.col.pvg-video-thumb > a:hover::after {
    background: rgba( 0, 0, 0, 0.45 );
}

/* Play icon — centered over the thumbnail. */
div.col.pvg-video-thumb .pvg-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

div.col.pvg-video-thumb .pvg-play-icon svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow( 0 1px 4px rgba( 0, 0, 0, 0.65 ) );
    transition: transform 0.18s ease;
}

div.col.pvg-video-thumb > a:hover .pvg-play-icon svg {
    transform: scale( 1.18 );
}

/* --------------------------------------------------------------------------
   Main gallery VIDEO SLIDE — shown in the large gallery viewer area.
   The outer video container is ALWAYS 1:1 square.
   -------------------------------------------------------------------------- */
.pvg-video-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Outer frame: STRICTLY 1:1 SQUARE at all times */
.pvg-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner container: centers content inside the 1:1 square */
.pvg-video-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Landscape Video (16:9 / Ratio > 1):
   Fills square horizontally (100% width), centered vertically, excess top/bottom.
   -------------------------------------------------------------------------- */
.pvg-video-inner.pvg--landscape iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 0;
    display: block;
}

.pvg-video-inner.pvg--landscape video {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   Portrait Video (9:16 Shorts / Ratio < 1):
   Fits vertically (100% height), centered horizontally, black bars left/right.
   -------------------------------------------------------------------------- */
.pvg-video-inner.pvg--portrait iframe {
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    border: 0;
    display: block;
}

.pvg-video-inner.pvg--portrait video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   Square Video (1:1 / Ratio = 1):
   Fills the entire 1:1 square frame cleanly.
   -------------------------------------------------------------------------- */
.pvg-video-inner.pvg--square iframe,
.pvg-video-inner.pvg--square video {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
    display: block;
}

/* Base fallback for video/iframe inside inner container */
.pvg-video-inner video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.pvg-video-inner iframe {
    border: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   Poster placeholder (YouTube / Vimeo lazy-load)
   Uses the high-resolution ACF thumbnail URL without compression/zooming.
   -------------------------------------------------------------------------- */
.pvg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #000 center / contain no-repeat;
    z-index: 2;
}

/* Circular play button centered over the poster image. */
.pvg-poster .pvg-play-btn {
    width: 64px;
    height: 64px;
    background: rgba( 255, 255, 255, 0.90 );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.40 );
    transition: transform 0.18s ease, background 0.18s ease;
}

.pvg-poster:hover .pvg-play-btn {
    transform: scale( 1.09 );
    background: #fff;
}

.pvg-poster .pvg-play-btn svg {
    width: 26px;
    height: 26px;
    margin-left: 3px; /* optical centering of the triangle */
}

/* Hide poster once the iframe has been injected by a click. */
.pvg-poster.pvg-hidden {
    display: none !important;
}