/* ==========================================================================
   ProductVideoBundle - 前台商品页视频区样式
   --------------------------------------------------------------------------
   只负责前台（相册下方）视频区，和后台样式完全分离。
   以后重做前台样式时，只需要改下面 .tmotor-product-videos 里的变量，
   或直接重写本文件。

   模板：
     Resources/views/layouts/default/oro_product_frontend_product_view/product_video.html.twig
   ========================================================================== */

.tmotor-product-videos {
    /* 前台样式变量 */
    --pv-videos-margin-top: 24px;
    --pv-videos-gap: 16px;
    --pv-videos-title-size: 18px;
    --pv-videos-title-color: #2b3445;
    --pv-videos-title-margin: 12px;
    --pv-videos-player-max-width: 720px;
    --pv-videos-radius: 6px;
    --pv-videos-caption-size: 14px;
    --pv-videos-caption-color: #6b7280;
}

.tmotor-product-videos {
    margin-top: var(--pv-videos-margin-top);
}

.tmotor-product-videos-title {
    margin: 0 0 var(--pv-videos-title-margin);
    font-size: var(--pv-videos-title-size);
    line-height: 1.3;
    color: var(--pv-videos-title-color);
}

.tmotor-product-videos-list {
    display: flex;
    flex-direction: column;
    gap: var(--pv-videos-gap);
}

.tmotor-product-video-item {
    margin: 0;
}

.tmotor-product-video-player {
    display: block;
    width: 100%;
    max-width: var(--pv-videos-player-max-width);
    border-radius: var(--pv-videos-radius);
    background: #000;
}

.tmotor-product-video-title {
    margin: 8px 0 0;
    font-size: var(--pv-videos-caption-size);
    font-weight: 500;
    color: var(--pv-videos-caption-color);
}