/* ==========================================================
   VBC Workshop
   Product Video
========================================================== */

.vbc-product-video{
    padding:0 0 56px;
    background:var(--vbc-color-background);
}

.vbc-product-video__tile{
    position:relative;
    padding:45px;
    background:var(--vbc-color-surface);
    border:1px solid var(--vbc-color-border);
    overflow:hidden;
}

.vbc-product-video__heading{
    margin:0 0 24px;
    font-family:var(--vbc-font-heading);
    font-size:26px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--vbc-color-heading);
}

.vbc-product-video__frame{
    position:relative;
    aspect-ratio:16/9;
    background:var(--vbc-color-heading);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.vbc-product-video__play{
    width:76px;
    height:76px;
    border-radius:50%;
    border:2px solid var(--vbc-color-accent);
    background:rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
    z-index:2;
}

.vbc-product-video__play:hover{
    background:var(--vbc-color-accent);
}

.vbc-product-video__play i{
    width:22px;
    height:22px;
    background-color:var(--vbc-color-accent);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    margin-left:3px;
}

.vbc-product-video__play:hover i{
    background-color:var(--vbc-color-heading);
}

.vbc-product-video__frame.is-playing .vbc-product-video__play{
    display:none;
}

.vbc-product-video__placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    color:var(--vbc-color-background);
}

.vbc-product-video__placeholder p{
    margin:0;
    font-family:var(--vbc-font-heading);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.7;
}

.vbc-product-video__play--disabled{
    cursor:default;
    opacity:.5;
}

.vbc-product-video__embed{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.vbc-product-video__embed iframe,
.vbc-product-video__embed video{
    width:100%;
    height:100%;
    border:none;
    display:block;
}

@media (max-width:640px){

    .vbc-product-video{
        padding:20px 0;
    }

    .vbc-product-video__play{
        width:60px;
        height:60px;
    }

}