/* Sabrija Product Video — gallery slide + modal
*
* Theme-able play-icon variables (override in your theme / Bricks custom CSS):
* --spv-play-bg background of the circle (default rgba(0,0,0,0.6))
* --spv-play-color color of the play triangle (default #fff)
* --spv-play-border border shorthand for the circle (default 0 — none)
* --spv-play-size-main play-icon size on the main slide (default clamp(48px,12%,96px))
* --spv-play-size-thumb play-icon size on thumbnails (default 36%)
* --spv-play-shadow drop-shadow on the main icon (default 0 2px 8px rgba(0,0,0,.25))
* --spv-play-shadow-thumb box-shadow on thumbnail overlay (default 0 2px 6px rgba(0,0,0,.3))
*/
.spv-video-slide {
position: relative;
}
/* No element-level CSS custom property defaults here — all defaults live in
* var( ..., fallback ) calls so the user can override the variables from any
* ancestor (e.g. Bricks %root% on the Product Gallery element) without being
* out-specificity'd by a rule closer to the icon itself. */
.spv-video-slide__link {
position: relative;
display: block;
text-decoration: none;
}
.spv-video-slide__link:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
.spv-video-slide__poster {
display: block;
width: 100%;
height: auto;
}
.spv-video-slide__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: transform 0.2s ease;
}
.spv-video-slide__link:hover .spv-video-slide__play {
transform: scale(1.05);
}
.spv-video-slide__play svg {
width: var(--spv-play-size-main, clamp(48px, 12%, 96px));
height: auto;
filter: drop-shadow(var(--spv-play-shadow, 0 2px 8px rgba(0, 0, 0, 0.25)));
overflow: visible;
}
.spv-video-slide__play svg .spv-play-bg {
fill: var(--spv-play-bg, rgba(0, 0, 0, 0.6));
stroke: var(--spv-play-border-color, transparent);
stroke-width: var(--spv-play-border-width, 0);
}
.spv-video-slide__play svg .spv-play-tri {
fill: var(--spv-play-color, #fff);
}
/* Inline autoplay-muted video slide (uploaded MP4). */
.spv-video-slide--inline {
display: block;
width: 100%;
height: 100%;
}
.spv-video-slide--inline .spv-inline-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #000;
cursor: pointer;
}
.spv-video-slide__controls {
position: absolute;
bottom: 12px;
right: 12px;
display: flex;
gap: 8px;
z-index: 5;
}
.spv-video-slide__ctl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
backdrop-filter: blur(4px);
}
.spv-video-slide__ctl:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.05);
}
.spv-video-slide__ctl:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.spv-video-slide__ctl svg {
display: block;
width: 20px;
height: 20px;
}
/* Sound toggle: show muted icon by default, swap to sound icon when unmuted. */
.spv-video-slide__sound .spv-icon--sound { display: none; }
.spv-video-slide__sound .spv-icon--muted { display: block; }
.spv-video-slide__sound:not(.is-muted) .spv-icon--muted { display: none; }
.spv-video-slide__sound:not(.is-muted) .spv-icon--sound { display: block; }
/* Play-icon overlay on thumbnail strip (FlexSlider nav + Bricks thumbnail slider).
* Built from two pseudo elements so background and triangle colors are independent:
* ::before = circle (background / border)
* ::after = triangle (color via mask-image, filled by background-color)
*/
.woocommerce-product-gallery .flex-control-thumbs li.spv-thumb-is-video,
.brx-product-gallery-thumbnail-slider .spv-video-slide {
position: relative;
}
.woocommerce-product-gallery .flex-control-thumbs li.spv-thumb-is-video::before,
.brx-product-gallery-thumbnail-slider .spv-video-slide::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--spv-play-size-thumb, 36%);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background: var(--spv-play-bg, rgba(0, 0, 0, 0.7));
border: var(--spv-play-border, 0);
border-radius: 50%;
pointer-events: none;
box-shadow: var(--spv-play-shadow-thumb, 0 2px 6px rgba(0, 0, 0, 0.3));
box-sizing: border-box;
}
.woocommerce-product-gallery .flex-control-thumbs li.spv-thumb-is-video::after,
.brx-product-gallery-thumbnail-slider .spv-video-slide::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--spv-play-size-thumb, 36%) * 0.5);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background-color: var(--spv-play-color, #fff);
/* Centroid of this triangle path is exactly at viewBox center (12,12),
* so translate(-50%,-50%) lands it visually centered inside the circle. */
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
/* Modal */
.spv-modal {
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
}
.spv-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
cursor: zoom-out;
}
.spv-modal__dialog {
position: relative;
width: min(90vw, 1280px);
aspect-ratio: 16 / 9;
max-height: 85vh;
background: #000;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.spv-modal__dialog.has-description {
aspect-ratio: auto;
height: min(90vh, 820px);
}
.spv-modal__close {
position: absolute;
top: -40px;
right: 0;
background: transparent;
border: 0;
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
}
.spv-modal__close:focus-visible {
outline: 2px solid #fff;
}
.spv-modal__content {
flex: 1 1 auto;
display: flex;
background: #000;
min-height: 0;
}
.spv-modal__content iframe,
.spv-modal__content video {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #000;
}
.spv-modal__description {
flex: 0 0 auto;
padding: 12px 16px;
background: #111;
color: #f5f5f5;
font-size: 14px;
line-height: 1.5;
}
body.spv-modal-open {
overflow: hidden;
}