/* MOUSOU_PRODUCT_SHORT_VIDEO_V1 */

body.mousou-product-detail-page .mousou-short-video-widget{
    position:fixed;
    left:22px;
    bottom:24px;
    width:154px;
    aspect-ratio:9 / 16;
    z-index:1065;
    direction:ltr;
    transition:opacity .22s ease, transform .22s ease;
}

body.mousou-product-detail-page .mousou-short-video-frame{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:18px;
    background:#080808;
    box-shadow:
        0 12px 36px rgba(0,0,0,.28),
        0 2px 8px rgba(0,0,0,.16);
}

body.mousou-product-detail-page .mousou-short-video-player{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
    cursor:pointer;
}

body.mousou-product-detail-page .mousou-short-video-close,
body.mousou-product-detail-page .mousou-short-video-sound,
body.mousou-product-detail-page .mousou-short-video-expand{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    border:0;
    border-radius:50%;
    color:#fff;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}

body.mousou-product-detail-page .mousou-short-video-close{
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    font-size:23px;
    line-height:1;
}

body.mousou-product-detail-page .mousou-short-video-sound{
    bottom:8px;
    left:8px;
    width:32px;
    height:32px;
    font-size:15px;
}

body.mousou-product-detail-page .mousou-short-video-expand{
    right:8px;
    bottom:8px;
    width:32px;
    height:32px;
    font-size:17px;
}

body.mousou-product-detail-page .mousou-short-video-widget.is-closed{
    display:none !important;
}

/* Full viewer */

body.mousou-product-detail-page .mousou-short-video-widget.is-expanded{
    inset:0;
    width:auto;
    height:auto;
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5vh 4vw;
    background:rgba(0,0,0,.86);
    z-index:3000;
}

body.mousou-product-detail-page
.mousou-short-video-widget.is-expanded
.mousou-short-video-frame{
    width:min(420px,88vw);
    height:min(86vh,747px);
    aspect-ratio:9 / 16;
    border-radius:22px;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
}

body.mousou-product-detail-page.mousou-short-video-open{
    overflow:hidden;
}

/* Mobile */

@media (max-width:767.98px){

    body.mousou-product-detail-page
    .mousou-short-video-widget:not(.is-expanded){
        left:max(12px,env(safe-area-inset-left));
        bottom:88px;
        width:118px;
    }

    body.mousou-product-detail-page
    .mousou-short-video-frame{
        border-radius:16px;
    }

    body.mousou-product-detail-page
    .mousou-short-video-close{
        top:6px;
        right:6px;
        width:27px;
        height:27px;
        font-size:20px;
    }

    body.mousou-product-detail-page
    .mousou-short-video-sound{
        bottom:6px;
        left:6px;
        width:28px;
        height:28px;
        font-size:13px;
    }

    body.mousou-product-detail-page
    .mousou-short-video-expand{
        bottom:6px;
        right:6px;
        width:28px;
        height:28px;
        font-size:15px;
    }

    body.mousou-product-detail-page
    .mousou-short-video-widget.is-expanded{
        padding:
            max(18px,env(safe-area-inset-top))
            14px
            max(18px,env(safe-area-inset-bottom));
    }

    body.mousou-product-detail-page
    .mousou-short-video-widget.is-expanded
    .mousou-short-video-frame{
        width:min(88vw,390px);
        height:min(82vh,693px);
    }
}

@media (max-width:380px){

    body.mousou-product-detail-page
    .mousou-short-video-widget:not(.is-expanded){
        width:108px;
        bottom:84px;
    }
}

@media (prefers-reduced-motion:reduce){

    body.mousou-product-detail-page
    .mousou-short-video-widget{
        transition:none;
    }
}

/* ==================================================
   MOUSOU PRODUCT SHORT VIDEO V2
   Drag + Scroll behaviour
================================================== */

body.mousou-product-detail-page
.mousou-short-video-widget{
    will-change:transform, opacity;
}

body.mousou-product-detail-page
.mousou-short-video-frame{
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

body.mousou-product-detail-page
.mousou-short-video-widget.is-dragging{
    transition:none !important;
    cursor:grabbing;
}

body.mousou-product-detail-page
.mousou-short-video-widget.is-dragging
.mousou-short-video-frame{
    cursor:grabbing;
}

body.mousou-product-detail-page
.mousou-short-video-widget.is-scroll-hidden:not(.is-expanded){
    opacity:0;
    transform:translateY(32px) scale(.94);
    pointer-events:none;
}

/*
Expanded viewer must always remain visible.
*/
body.mousou-product-detail-page
.mousou-short-video-widget.is-expanded{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
}

/*
Buttons remain normal touch targets.
*/
body.mousou-product-detail-page
.mousou-short-video-close,
body.mousou-product-detail-page
.mousou-short-video-sound,
body.mousou-product-detail-page
.mousou-short-video-expand{
    touch-action:manipulation;
}