/* Mobile portrait touch comfort for protected shoppable education videos.
   Video playback and cue timing are unchanged. Landscape compact overlay untouched. */
@media (orientation: portrait) and (max-width: 700px) {
    .ms-video-commerce .ms-video-stage > .ms-video-controls {
        grid-template-columns:44px minmax(0,1fr) 44px 44px!important;
        column-gap:4px!important;
    }
    .ms-video-commerce .ms-video-stage > .ms-video-controls button {
        box-sizing:border-box;
        width:44px!important;
        min-width:44px!important;
        height:44px!important;
        min-height:44px!important;
    }
    .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-overlay-close {
        min-width:40px;
        min-height:40px;
    }
    .ms-video-commerce .ms-video-overlay-cart-button {
        min-height:44px;
    }
}


/*
 * Wide-viewport fullscreen: use the available screen instead of side letterboxes.
 * Only affects the expanded shoppable player when the viewing window is wider
 * than 2:1 (e.g. landscape Safari with visible browser chrome).
 * Normal video, portrait and conventional 16:9 fullscreen stay unchanged.
 * "cover" fills without distortion and may crop a top/bottom portion.
 */
@media (orientation: landscape) and (min-aspect-ratio: 2/1) {
    html body .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-stage > video {
        object-fit:cover!important;
        object-position:center top!important;
    }
    html body .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-stage > .ms-video-controls {
        left:0!important;
        right:0!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box;
    }
    html body .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-stage > .ms-video-overlay {
        right:max(8px, env(safe-area-inset-right))!important;
    }
}

/* Shoppable overlay: finger-sized dismiss control in expanded mobile players.
   A landscape phone can be >700 CSS px wide, so use pointer capability. */
@media (pointer: coarse) {
    .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-overlay-close {
        display:grid!important;
        place-items:center;
        top:0!important;
        right:0!important;
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        min-height:44px!important;
        padding:0!important;
        z-index:3;
        touch-action:manipulation;
    }
    .ms-video-commerce .ms-video-layout.ms-video-expanded .ms-video-overlay-details {
        padding-right:44px!important;
    }
}