/* ============================
SCOPED, NON-AGGRESSIVE STYLES
============================ */
.marsden-video-testimonials-widget {
--max: 100%;
--gap: 22px;
--radius: 22px;
margin: 0 !important;
padding: 0 !important;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Inter, Roboto, Arial, sans-serif !important;
position: relative !important;
z-index: 1 !important;
isolation: isolate !important;
contain: layout style paint !important;
}/* Keep this gentle and scoped */
.marsden-video-testimonials-widget *,
.marsden-video-testimonials-widget *::before,
.marsden-video-testimonials-widget *::after {
box-sizing: border-box !important;
}/* Elementor video overrides (scoped) */
.marsden-video-testimonials-widget video {
max-width: none !important;
max-height: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
display: block;
}.marsden-video-testimonials-widget .mvt-shell { max-width: 100%; }
.marsden-video-testimonials-widget .mvt-screen { padding: 0; }.marsden-video-testimonials-widget .mvt-head { text-align: center; margin: 0 auto 28px; max-width: 760px; }
.marsden-video-testimonials-widget .mvt-head h2 {
font-weight: 800 !important; font-size: clamp(26px,4vw,40px) !important; line-height: 1.12 !important;
margin: 0 0 6px 0 !important; color: #0a0a0a !important;
}
.marsden-video-testimonials-widget .mvt-head p {
font-weight: 500 !important; font-size: 15px !important; line-height: 1.6 !important; margin: 0 !important; color: #5b5f66 !important;
}.marsden-video-testimonials-widget .mvt-viewport {
position: relative;
max-width: var(--max);
margin: 26px auto 0;
}.marsden-video-testimonials-widget .mvt-viewport-inner {
overflow: hidden;
padding: 4px 0;
}.marsden-video-testimonials-widget .mvt-rail {
display: flex;
gap: var(--gap);
align-items: stretch;
transform: translateX(var(--mvt-offset, 0px));
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}.marsden-video-testimonials-widget .mvt-card {
position: relative; display: flex; flex-direction: column;
flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
min-width: 0;
border-radius: var(--radius); overflow: hidden; background: #000;
isolation: isolate; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
transition: box-shadow .35s ease, filter .35s ease, transform .35s ease;
}/* Arrow navigation (desktop only) */
.marsden-video-testimonials-widget .mvt-arrow {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 52px !important;
height: 52px !important;
border-radius: 999px !important;
border: none !important;
cursor: pointer;
background: rgba(255,255,255,.98) !important;
color: #111 !important;
box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0 !important;
transition: background .2s ease, box-shadow .2s ease, opacity .2s ease !important;
outline: none !important;
}
.marsden-video-testimonials-widget .mvt-arrow:hover {
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
}
.marsden-video-testimonials-widget .mvt-arrow:active {
transform: translateY(-50%) scale(.96) !important;
}
.marsden-video-testimonials-widget .mvt-arrow:disabled {
opacity: 0.35 !important;
cursor: default;
pointer-events: none;
}
.marsden-video-testimonials-widget .mvt-arrow:focus-visible {
outline: 3px solid #0a0a0a !important;
outline-offset: 3px;
}
.marsden-video-testimonials-widget .mvt-arrow-prev { left: 16px; }
.marsden-video-testimonials-widget .mvt-arrow-next { right: 16px; }
.marsden-video-testimonials-widget .mvt-arrow svg {
width: 22px !important;
height: 22px !important;
}.marsden-video-testimonials-widget .mvt-media {
height: 500px; position: relative; overflow: hidden; background: #000;
}.marsden-video-testimonials-widget .mvt-media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
animation: mvt-shimmer 2s infinite; pointer-events: none; opacity: 0;
}
.marsden-video-testimonials-widget .mvt-media:not(.loaded)::after { opacity: 1; }
@keyframes mvt-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }/* Keep original look: 35% center, allow per-card overrides via --obj-x */
.marsden-video-testimonials-widget .mvt-media video {
width: 100%; height: 100%; object-fit: cover; object-position: var(--obj-x, 35%) center;
transition: transform .35s ease;
}
/* === Per-card crop tuning ===
Default is 35% (from --obj-x fallback above).
1st and 4th: center-framed at 50%.
5th (Katia & Michelle): shift right so subjects aren't cut off. */
.marsden-video-testimonials-widget .mvt-card:first-child .mvt-media,
.marsden-video-testimonials-widget .mvt-card:nth-child(4) .mvt-media {
--obj-x: 50%;
}
.marsden-video-testimonials-widget .mvt-card:nth-child(5) .mvt-media {
--obj-x: 55%;
}
.marsden-video-testimonials-widget .mvt-card:nth-child(6) .mvt-media {
--obj-x: 45%;
}
@media (max-width: 560px) {
.marsden-video-testimonials-widget .mvt-card:nth-child(5) .mvt-media {
--obj-x: 45%;
}
.marsden-video-testimonials-widget .mvt-card:nth-child(6) .mvt-media {
--obj-x: 50%;
}
}.marsden-video-testimonials-widget .mvt-meta{
position:absolute; left:16px; right:16px; bottom:16px; z-index:2; color:#fff !important;
opacity:1; transition: opacity .3s ease, transform .3s ease;
}
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-meta{ opacity:0; transform:translateY(10px); pointer-events:none; }.marsden-video-testimonials-widget .mvt-meta .name{ font-weight:700 !important; font-size:15px !important; line-height:1.3 !important; margin:0 0 3px 0 !important; color:#fff !important; letter-spacing:-.01em !important; }
.marsden-video-testimonials-widget .mvt-meta .role{ font-weight:500 !important; font-size:13px !important; line-height:1.3 !important; margin:0 !important; color:#fff !important; opacity:.9; }.marsden-video-testimonials-widget .mvt-grad{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.6) 100%); pointer-events:none; z-index:1; transition:opacity .3s ease; }
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-grad{ opacity:0; }.marsden-video-testimonials-widget .mvt-playbtn{
position:absolute; right:16px; bottom:16px; z-index:3; display:inline-flex !important; align-items:center; justify-content:center;
width:48px !important; height:48px !important; border-radius:999px !important; border:none !important; cursor:pointer;
background:rgba(255,255,255,.95) !important; color:#111 !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
backdrop-filter: blur(10px); transition: all .2s ease !important; padding:0 !important; margin:0 !important; line-height:1 !important; outline:none !important;
}
.marsden-video-testimonials-widget .mvt-playbtn:hover{ transform:scale(1.05) !important; box-shadow:0 4px 16px rgba(0,0,0,.2) !important; background:#fff !important; }
.marsden-video-testimonials-widget .mvt-playbtn:active{ transform:scale(0.95) !important; }
.marsden-video-testimonials-widget .mvt-playbtn svg{ width:20px !important; height:20px !important; }.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-playbtn{ width:40px !important; height:40px !important; background:rgba(255,255,255,.9) !important; }
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-playbtn svg{ width:16px !important; height:16px !important; }.marsden-video-testimonials-widget .mvt-caption-toggle{
position:absolute; right:64px; bottom:16px; z-index:3; display:inline-flex !important; align-items:center; justify-content:center;
width:40px !important; height:40px !important; border-radius:999px !important; border:none !important; cursor:pointer;
background:rgba(255,255,255,.9) !important; color:#111 !important; backdrop-filter: blur(10px);
box-shadow:0 2px 8px rgba(0,0,0,.15) !important; transition: all .3s ease !important; opacity:0; pointer-events:none; transform:translateX(10px);
padding:0 !important; margin:0 !important;
}
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-caption-toggle{ opacity:1 !important; pointer-events:auto !important; transform:translateX(0) !important; }
.marsden-video-testimonials-widget .mvt-caption-toggle.active{ background:#10b981 !important; color:#fff !important; }
.marsden-video-testimonials-widget .mvt-caption-toggle svg{ width:18px !important; height:18px !important; }.marsden-video-testimonials-widget video::cue{
background: rgba(0,0,0,0.95); color:#fff; font-size:18px; font-weight:600; line-height:1.5; text-shadow:2px 2px 4px rgba(0,0,0,0.9);
padding:8px 12px; border-radius:6px;
}
.marsden-video-testimonials-widget video::-webkit-media-text-track-display { padding-bottom: 80px; }
.marsden-video-testimonials-widget video::cue-region { bottom: 80px; }.marsden-video-testimonials-widget .mvt-rail.hovering .mvt-card{ filter:saturate(.9) brightness(.95); }
.marsden-video-testimonials-widget .mvt-rail.hovering .mvt-card.active{ filter:none; }
.marsden-video-testimonials-widget .mvt-card:focus-visible { outline:3px solid #fff; outline-offset:2px; }/* Tablet */
@media (max-width: 980px) {
/* Disable desktop carousel */
.marsden-video-testimonials-widget .mvt-viewport { margin: 26px 0 0; max-width: none; }
.marsden-video-testimonials-widget .mvt-viewport-inner { overflow: visible; padding: 0; }
.marsden-video-testimonials-widget .mvt-arrow { display: none !important; }
.marsden-video-testimonials-widget .mvt-rail { transform: none !important; }.marsden-video-testimonials-widget .mvt-rail { overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.marsden-video-testimonials-widget .mvt-rail::-webkit-scrollbar{ display:none; }
.marsden-video-testimonials-widget .mvt-card{ scroll-snap-align:center; flex:0 0 75vw; min-width:300px; }
.marsden-video-testimonials-widget .mvt-card:first-child{ flex:0 0 75vw; }
.marsden-video-testimonials-widget .mvt-rail.hovering .mvt-card{ flex:0 0 70vw; }
.marsden-video-testimonials-widget .mvt-rail.hovering .mvt-card.active{ flex:0 0 85vw; }
.marsden-video-testimonials-widget .mvt-rail[data-locked="1"] .mvt-card{ flex:0 0 70vw !important; }
.marsden-video-testimonials-widget .mvt-rail[data-locked="1"] .mvt-card[data-locked="1"]{ flex:0 0 90vw !important; }
.marsden-video-testimonials-widget .mvt-media{ height:480px; }
.marsden-video-testimonials-widget .mvt-playbtn{ width:44px; height:44px; }
.marsden-video-testimonials-widget .mvt-playbtn svg{ width:18px; height:18px; }
.marsden-video-testimonials-widget .mvt-caption-toggle{ width:38px; height:38px; right:58px; }
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-playbtn{ width:38px; height:38px; }
}/* Mobile */
@media (max-width: 560px) {
.marsden-video-testimonials-widget .mvt-shell { padding: 0; }
.marsden-video-testimonials-widget .mvt-screen { padding: 0; }
.marsden-video-testimonials-widget .mvt-head { margin-bottom: 24px; padding: 0; }
.marsden-video-testimonials-widget .mvt-head h2 { font-size: clamp(24px,5vw,32px); }
.marsden-video-testimonials-widget .mvt-head p { font-size: 14px; }.marsden-video-testimonials-widget .mvt-rail{
display:block; white-space:nowrap; padding:0 15vw 12px; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.marsden-video-testimonials-widget .mvt-rail::-webkit-scrollbar{ display:none; }.marsden-video-testimonials-widget .mvt-card{
display:inline-block; white-space:normal; width:70vw; min-width:280px; vertical-align:top;
scroll-snap-align:center; transition:opacity .3s ease, transform .3s ease; margin-right:20px; box-shadow:none !important;
}
.marsden-video-testimonials-widget .mvt-card:last-child{ margin-right:0; }
.marsden-video-testimonials-widget .mvt-card:not(.active){ opacity:.5; }
.marsden-video-testimonials-widget .mvt-card.active{ opacity:1; }.marsden-video-testimonials-widget .mvt-rail[data-locked="1"] .mvt-card:not([data-locked="1"]){ opacity:.4; }
.marsden-video-testimonials-widget .mvt-rail[data-locked="1"] .mvt-card[data-locked="1"]{ opacity:1; }.marsden-video-testimonials-widget .mvt-media{ height:540px; border-radius:12px; cursor:pointer; }/* === Your requests on mobile === */
/* Same size for BOTH buttons on mobile */
.marsden-video-testimonials-widget .mvt-playbtn,
.marsden-video-testimonials-widget .mvt-caption-toggle{
width:56px !important; height:56px !important;
}
/* Keep same size even when locked */
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-playbtn,
.marsden-video-testimonials-widget .mvt-card[data-locked="1"] .mvt-caption-toggle{
width:56px !important; height:56px !important;
}
/* Stack: CC ABOVE Play/Pause */
.marsden-video-testimonials-widget .mvt-playbtn{ right:12px; bottom:12px; }
.marsden-video-testimonials-widget .mvt-caption-toggle{ right:12px; bottom:76px; } /* 56 + ~8 gap + 12 */.marsden-video-testimonials-widget .mvt-playbtn svg{ width:24px; height:24px; }
.marsden-video-testimonials-widget .mvt-caption-toggle svg{ width:24px; height:24px; }.marsden-video-testimonials-widget .mvt-meta .name { font-size:16px; }
.marsden-video-testimonials-widget .mvt-meta .role { font-size:14px; }
.marsden-video-testimonials-widget video::cue { font-size:16px; padding:6px 10px; }
.marsden-video-testimonials-widget video::-webkit-media-text-track-display { padding-bottom: 140px; }
.marsden-video-testimonials-widget video::-webkit-media-text-track-container { bottom: 60px; }/* Hide controls when UI is marked hidden */
.marsden-video-testimonials-widget .mvt-media[data-ui="hidden"] .mvt-playbtn,
.marsden-video-testimonials-widget .mvt-media[data-ui="hidden"] .mvt-caption-toggle{
opacity:0 !important; pointer-events:none !important; transform:translateY(10px) !important;
}
}@media (max-width: 380px) {
.marsden-video-testimonials-widget .mvt-media { height: 480px; }
.marsden-video-testimonials-widget .mvt-card { width: 75vw; min-width: 260px; }
.marsden-video-testimonials-widget .mvt-rail { padding: 0 12.5vw 12px; }
}.marsden-video-testimonials-widget .mvt-mobile-nav { display: none !important; }
(function(){
'use strict';const container = document.querySelector('.marsden-video-testimonials-widget');
if (!container) return;// Prevent Elementor global listeners from leaking in
container.addEventListener('click', function(e) {
if (!e.target.closest('.marsden-video-testimonials-widget')) e.stopPropagation();
}, true);// Make sure Elementor video constraints don't interfere
container.querySelectorAll('video').forEach(v => {
v.style.setProperty('max-width', 'none', 'important');
v.style.setProperty('height', '100%', 'important');
v.style.setProperty('width', '100%', 'important');
});const rail = container.querySelector('#mvt-rail');
const cards = Array.from(rail.querySelectorAll('.mvt-card'));
const vids = Array.from(rail.querySelectorAll('.mvt-vid'));
const mmMobile = window.matchMedia('(max-width: 560px)');
let currentCardIndex = 0;
const anyLocked = () => cards.find(c => c.dataset.locked === '1') || null;/* Faster hide on mobile */
const controlHideTimers = new WeakMap();
function showControls(mediaEl, autoHideMs = 1200){
if (!mediaEl) return;
mediaEl.dataset.ui = 'shown';
const old = controlHideTimers.get(mediaEl); if (old) clearTimeout(old);
if (mmMobile.matches && autoHideMs){
const t = setTimeout(() => hideControls(mediaEl), autoHideMs);
controlHideTimers.set(mediaEl, t);
}
}
function hideControls(mediaEl){
if (!mediaEl) return;
mediaEl.dataset.ui = 'hidden';
const old = controlHideTimers.get(mediaEl); if (old) clearTimeout(old);
}
const isLockedPlaying = (card, video) => (card?.dataset.locked === '1' && video && !video.muted && !video.paused);/* Init videos */
vids.forEach(v => { if (!v.dataset.initialized){ v.dataset.initialized='true'; initVideo(v); } });function initVideo(v){
const src = v.dataset.hls;
const media = v.closest('.mvt-media');
if (!src) return;v.addEventListener('canplay', () => media.classList.add('loaded'), {once:true});if (v.canPlayType('application/vnd.apple.mpegurl')) v.src = src;
else if (window.Hls && Hls.isSupported()){ const hls = new Hls({autoStartLoad:true}); hls.loadSource(src); hls.attachMedia(v); }
v.muted = true; v.setAttribute('muted','');v.addEventListener('timeupdate', () => {
const card = v.closest('.mvt-card');
if (card.dataset.locked !== '1' && v.currentTime >= 15) v.currentTime = 0;
});v.addEventListener('ended', () => {
const card = v.closest('.mvt-card');
if (mmMobile.matches && card.dataset.locked === '1') {
const i = cards.indexOf(card), nextIndex = (i + 1) % cards.length, nextCard = cards[nextIndex];card.removeAttribute('data-locked'); rail.removeAttribute('data-locked');
const btn = card.querySelector('.mvt-playbtn');
if (btn) btn.innerHTML = '';nextCard.scrollIntoView({behavior:'smooth', block:'nearest', inline:'center'});setTimeout(() => {
setActive(nextIndex, false);const nv = nextCard.querySelector('video');
rail.dataset.locked = '1'; nextCard.dataset.locked = '1';
nv.muted = false; nv.removeAttribute('muted'); nv.currentTime = 0; nv.play().catch(()=>{});
const nbtn = nextCard.querySelector('.mvt-playbtn');
if (nbtn) nbtn.innerHTML = '';if (mmMobile.matches){ const nm = nextCard.querySelector('.mvt-media'); setTimeout(()=>hideControls(nm), 200); }
}, 300);
}
});v.addEventListener('play', () => {
if (!mmMobile.matches) return;
const card = v.closest('.mvt-card');
if (isLockedPlaying(card, v)) setTimeout(()=>hideControls(media), 150);
});
v.addEventListener('pause', () => { if (mmMobile.matches) showControls(media, 0); });media.addEventListener('pointerdown', (e) => {
if (!mmMobile.matches) return;
const card = media.closest('.mvt-card');
if (card?.dataset.locked === '1' && isLockedPlaying(card, v)) { showControls(media); e.stopPropagation(); }
}, {passive:true});if (mmMobile.matches) showControls(media, 0);
}/* Desktop hover */
function activate(card){
if (anyLocked() || mmMobile.matches) return;
rail.classList.add('hovering');
cards.forEach(c => c.classList.toggle('active', c === card));
const v = card.querySelector('video'); v && v.play().catch(()=>{});
}
function deactivate(){ if (anyLocked() || mmMobile.matches) return; }
cards.forEach(card=>{
card.addEventListener('mouseenter', ()=>activate(card));
card.addEventListener('mouseleave', ()=>deactivate(card));
card.addEventListener('focus', ()=>activate(card));
card.addEventListener('blur', ()=>deactivate(card));
});
rail.classList.add('hovering'); cards[0].classList.add('active');/* Captions toggle */
rail.querySelectorAll('.mvt-caption-toggle').forEach(btn=>{
const card = btn.closest('.mvt-card');
const video = card.querySelector('video');
let captionActive = false;const forceTracksOff = () => {
if (video.textTracks) { for (let i=0;i
