.modproductvideo-wrapper { position: relative; overflow: hidden; border-radius: 16px; background-color:rgba(0, 0, 0, 0.8); margin: 1rem 0; }
.modproductvideo-wrapper:before { content: ''; padding-bottom: 56.25%; display: block; }
.modproductvideo-poster { position:absolute; top:0; left:0; width:100%; height:100%; background-size: contain; background-position: center; background-repeat: no-repeat; cursor:pointer; transition:opacity 0.3s ease; }
.modproductvideo-poster:hover .modproductvideo-play-button { background:rgba(0, 0, 0, 0.9); transform:translate(-50%, -50%) scale(1.2); }
.modproductvideo-play-button { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color: var(--link-color, rgba(0, 0, 0, 0.4)); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s ease; color: #fff; font-size: clamp(2.5rem, 3.7vw, 3.5rem); }
.modproductvideo-play-button svg { width: 1em; height: 1em; }
.modproductvideo-player { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:none; }
.modproductvideo-loading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:10;  }
.modproductvideo-spinner { border:3px solid #F3F3F3; border-top:3px solid #3498DB; border-radius:50%; width:30px; height:30px; animation:modproductvideo-spin 1s linear infinite; margin:0 auto; }
@keyframes modproductvideo-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}