/* Mars 1.6.3 — mobile viewport containment + mobile navigation defaults */

/* Root-level containment: wide internal rails may scroll themselves, never the whole page. */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
}
@supports (overflow:clip){
    html,body{overflow-x:clip!important}
}
body{position:relative}

.mars-home,
.mars-home-main,
#primary,
.mars-page-main,
.mars-shop-main,
.mars-header,
.mars-footer,
.mars-secondary-menu,
.mars-topbar{
    min-width:0;
    max-width:100%;
}

/* Any horizontal track is clipped by its own viewport rather than widening the document. */
.mars-carousel-shell,
.mars-category-carousel-shell,
.mars-flash-sale,
.mars-flash-sale__layout,
.mars-flash-featured,
.mars-flash-sale__products,
.mars-topbar-ticker,
.mars-secondary-menu .mars-container{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}
.mars-carousel-shell,
.mars-category-carousel-shell,
.mars-flash-sale,
.mars-topbar-ticker{
    overflow-x:hidden;
}
@supports (overflow:clip){
    .mars-carousel-shell,
    .mars-category-carousel-shell,
    .mars-flash-sale,
    .mars-topbar-ticker{overflow-x:clip}
}

.mars-product-carousel,
.mars-category-strip,
.mars-flash-sale__products,
.mars-secondary-menu__list{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}
.mars-topbar--ticker{contain:layout paint}

@media (max-width:980px){
    /* Header remains inside the viewport even when all optional actions are enabled. */
    .mars-header__inner{
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        min-width:0!important;
        margin-inline:auto!important;
    }
    .mars-header__logo,
    .mars-header-actions{min-width:0!important;max-width:100%!important}
    .mars-header__logo{overflow:hidden!important}
    .mars-header__logo .mars-logo{width:100%;max-width:100%!important;min-width:0!important}
    .mars-header__logo .mars-logo img{max-width:100%!important;width:auto!important}

    /* Dynamic 4/5 item bottom menu: no empty fifth column and no viewport spill. */
    .mars-mobile-bottom{
        left:0!important;
        right:0!important;
        width:100%!important;
        max-width:100%!important;
        display:flex!important;
        grid-template-columns:none!important;
        overflow:hidden!important;
    }
    .mars-mobile-bottom>a,
    .mars-mobile-bottom>button{
        flex:1 1 0!important;
        min-width:0!important;
        max-width:100%!important;
        padding-left:2px!important;
        padding-right:2px!important;
    }
    .mars-mobile-bottom span{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

@media (max-width:700px){
    /* The sale section was the most likely source of mobile right-shift. */
    .mars-flash-sale{
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .mars-flash-sale__head,
    .mars-flash-sale__layout,
    .mars-flash-featured,
    .mars-flash-featured__image,
    .mars-flash-featured__content,
    .mars-flash-sale__products,
    .mars-flash-small-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .mars-flash-sale__layout{display:block!important}
    .mars-flash-featured{grid-template-columns:minmax(0,1fr)!important}

    /* Use grid-auto-columns for the swipe rail. It scrolls internally without adding document width. */
    .mars-flash-sale__products{
        display:grid!important;
        grid-template-columns:none!important;
        grid-auto-flow:column!important;
        grid-auto-columns:minmax(0,72%)!important;
        gap:10px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        margin-top:10px!important;
        padding:0 0 5px!important;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        contain:inline-size;
    }
    .mars-flash-sale__products::-webkit-scrollbar{display:none}
    .mars-flash-small-card{scroll-snap-align:start}

    .mars-flash-countdown{
        width:100%;
        max-width:100%;
        min-width:0;
    }
    .mars-flash-countdown>span{min-width:0!important;flex:1 1 0}
    .mars-flash-countdown b{width:100%!important;max-width:46px}

    .mars-product-section,
    .mars-product-section .mars-carousel-shell,
    .mars-product-carousel,
    .mars-category-carousel-shell,
    .mars-category-strip,
    .mars-home-banners,
    .mars-home-slider,
    .mars-shipping-banner,
    .mars-trust-strip{
        min-width:0!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    /* On very narrow phones the logo is allowed to shrink before the header can overflow. */
    .mars-header-actions{gap:0!important}
    .mars-header-action{min-width:34px!important;width:34px!important;padding:2px!important}
}

@media (max-width:420px){
    .mars-flash-sale{width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important}
    .mars-header__inner{width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important}
    .mars-flash-sale__head{grid-template-columns:minmax(0,1fr) auto!important}
    .mars-flash-sale__head-actions>a{font-size:9px!important}
    .mars-flash-sale__products{grid-auto-columns:minmax(0,78%)!important}
}