/* Desktop safety guard: mobile bottom navigation must never render outside mobile breakpoint. */
.mobile-bottom-nav{
    display:none;
}

.mobile-bottom-nav svg{
    width:20px;
    height:20px;
    max-width:20px;
    max-height:20px;
}

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
        max-width:100%;
    }

    body{
        padding-bottom:88px;
        background:#f5f7fb;
    }

    .container{
        width:min(100% - 20px, 1240px);
    }

    .site-header{
        position:sticky;
        top:0;
        z-index:950;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(18px);
        box-shadow:0 8px 24px rgba(15,23,42,.08);
    }

    .header-main-row{
        min-height:auto;
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px;
        padding:10px 0 12px;
    }

    .site-logo{
        font-size:23px;
    }

    .header-action-row{
        justify-content:flex-end;
    }

    .desktop-only-action{
        display:none!important;
    }


    /* Mobile UX rule: top bar menu button is intentionally hidden on mobile.
       The menu remains available from the sticky bottom navigation only. */
    .premium-site-header .menu-toggle,
    .site-header .menu-toggle,
    .header-actions .menu-toggle,
    .desktop-menu-toggle{
        display:none!important;
        visibility:hidden!important;
        pointer-events:none!important;
    }

    .header-actions{
        gap:0;
    }

    .header-search-form{
        grid-column:1/-1;
        width:100%;
    }

    .header-search-box{
        display:block;
    }

    .header-search-box input{
        min-height:46px;
        border-radius:999px;
        padding:0 16px;
        box-shadow:0 6px 16px rgba(15,23,42,.05);
    }

    .header-search-box button{
        display:none;
    }

    .live-search-results{
        top:calc(100% + 8px);
        border-radius:18px;
        max-height:65vh;
        overflow:auto;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:max(10px, env(safe-area-inset-left));
        right:max(10px, env(safe-area-inset-right));
        bottom:max(10px, env(safe-area-inset-bottom));
        height:70px;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(226,232,240,.95);
        border-radius:26px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        align-items:center;
        z-index:980;
        box-shadow:0 18px 42px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.9);
        padding:7px;
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button{
        position:relative;
        border:0;
        background:transparent;
        color:#334155;
        text-decoration:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-width:0;
        min-height:56px;
        border-radius:20px;
        font-weight:900;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    .mobile-bottom-nav a:active,
    .mobile-bottom-nav button:active{
        transform:translateY(1px) scale(.97);
        background:rgba(20,184,166,.10);
    }

    .mobile-bottom-nav a.is-active,
    .mobile-bottom-nav button.is-active{
        background:linear-gradient(135deg, #0f766e, #14b8a6);
        color:#ffffff;
        box-shadow:0 10px 22px rgba(20,184,166,.24);
    }

    .mobile-bottom-nav small{
        font-size:10px;
        line-height:1;
        color:currentColor;
        letter-spacing:.01em;
        opacity:.88;
    }

    .mbn-icon{
        width:26px;
        height:26px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:999px;
        background:rgba(15,118,110,.08);
        color:currentColor;
    }

    .mobile-bottom-nav a.is-active .mbn-icon,
    .mobile-bottom-nav button.is-active .mbn-icon{
        background:rgba(255,255,255,.18);
    }

    .mbn-icon svg{
        width:19px;
        height:19px;
        display:block;
        fill:currentColor;
    }

    .mobile-bottom-nav em{
        position:absolute;
        top:3px;
        right:10px;
        min-width:19px;
        height:19px;
        padding:0 5px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#0f172a;
        color:#fff;
        font-style:normal;
        font-size:10px;
        font-weight:900;
        border-radius:999px;
        border:2px solid #ffffff;
        box-shadow:0 6px 14px rgba(15,23,42,.22);
    }

    .premium-hero{
        padding-top:14px;
    }

    .premium-hero-grid{
        border-radius:24px;
        padding:24px 20px;
        gap:18px;
    }

    .premium-hero-content h1{
        font-size:32px;
        line-height:1.08;
    }

    .premium-hero-content p{
        font-size:15px;
        line-height:1.7;
    }

    .premium-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .premium-hero-actions a{
        width:100%;
    }

    .premium-category-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        overflow:visible;
        scroll-snap-type:none;
        padding-bottom:0;
    }

    .premium-category-card{
        min-width:0;
        width:100%;
        scroll-snap-align:none;
        padding:16px 14px;
    }

    .premium-section-head,
    .premium-shop-head,
    .premium-checkout-head{
        margin-top:20px;
        margin-bottom:16px;
    }

    .premium-section-head h2,
    .premium-shop-head h1,
    .premium-checkout-head h1{
        font-size:28px;
    }

    .premium-filter-bar{
        border-radius:20px;
        padding:12px;
    }

    .product-grid,
    .premium-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .product-card,
    .premium-product-card{
        border-radius:18px;
    }

    .product-card-image{
        aspect-ratio:1/1;
    }

    .product-card-image img{
        padding:12px;
    }

    .product-card-body{
        padding:11px;
    }

    .product-card-meta{
        align-items:flex-start;
        gap:6px;
        flex-direction:column;
    }

    .product-card-title{
        font-size:13px;
        line-height:1.35;
        min-height:36px;
    }

    .product-card-price{
        font-size:16px;
    }

    .product-card-actions{
        grid-template-columns:1fr;
        gap:7px;
    }

    .product-card-actions button{
        min-height:38px;
        font-size:12px;
    }

    .product-detail-grid{
        gap:14px;
    }

    .product-gallery-card,
    .product-info-card,
    .product-content-card{
        border-radius:22px;
    }

    .product-info-card{
        padding:20px;
    }

    .product-info-card h1{
        font-size:29px;
    }

    .product-price-box strong{
        font-size:26px;
    }

    .product-action-row{
        position:sticky;
        bottom:86px;
        z-index:70;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(12px);
        padding:10px;
        margin-left:-10px;
        margin-right:-10px;
        border:1px solid #e5e7eb;
        border-radius:18px;
        box-shadow:0 12px 28px rgba(15,23,42,.14);
    }

    .product-service-notes{
        grid-template-columns:1fr;
    }

    .product-thumbs{
        display:flex;
        overflow-x:auto;
        gap:8px;
    }

    .product-thumbs button{
        min-width:66px;
    }

    .premium-cart-layout,
    .premium-checkout-layout,
    .premium-track-layout{
        grid-template-columns:1fr;
        gap:14px;
    }

    .premium-cart-items-card,
    .premium-order-summary,
    .premium-checkout-form,
    .premium-checkout-summary,
    .premium-track-form,
    .premium-track-result{
        border-radius:22px;
        padding:16px;
    }

    .premium-order-summary,
    .premium-checkout-summary{
        position:static;
    }

    .cart-line{
        grid-template-columns:58px 1fr;
        gap:10px;
    }

    .cart-line-image{
        width:58px;
        height:58px;
        border-radius:14px;
    }

    .cart-line-right{
        grid-column:2;
        justify-items:start;
    }

    .checkout-two-col{
        grid-template-columns:1fr;
    }

    .checkout-field input,
    .checkout-field textarea{
        font-size:16px;
    }

    .checkout-submit-btn{
        position:sticky;
        bottom:86px;
        z-index:75;
        min-height:54px;
        box-shadow:0 14px 30px rgba(15,23,42,.18);
    }

    .success-info-grid{
        grid-template-columns:1fr;
    }

    .success-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .success-actions a{
        width:100%;
    }

    .site-footer{
        padding-bottom:104px;
    }

    .cart-drawer,
    .menu-drawer{
        width:100%;
        max-width:100%;
        border-top-left-radius:24px;
        border-bottom-left-radius:0;
    }

    .drawer-footer{
        padding-bottom:88px;
    }
}

@media(max-width:380px){
    .product-grid,
    .premium-product-grid{
        grid-template-columns:1fr;
    }

    .premium-hero-content h1{
        font-size:29px;
    }
}


/* SR Power final mobile polish: keep hero category shortcuts as a fixed 2-column grid and remove right-edge glow. */
@media(max-width:768px){
    .premium-category-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        overflow:visible!important;
        padding-bottom:0!important;
    }

    .premium-category-card{
        min-width:0!important;
        width:100%!important;
    }

    .premium-hero-grid::before,
    .premium-hero-grid::after{
        display:none!important;
    }
}

/* Task 3.1 real correction: 6-item mobile bottom nav with account + menu */
@media(max-width:768px){
    .mobile-bottom-nav.mobile-bottom-nav--six{
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
        gap:2px;
        height:72px;
        padding:6px;
    }

    .mobile-bottom-nav.mobile-bottom-nav--six .mobile-bottom-nav__item{
        min-height:58px;
        border-radius:18px;
    }

    .mobile-bottom-nav.mobile-bottom-nav--six small{
        font-size:9px;
        white-space:nowrap;
    }

    .mobile-bottom-nav.mobile-bottom-nav--six .mbn-icon{
        width:24px;
        height:24px;
    }

    .mobile-bottom-nav.mobile-bottom-nav--six .mbn-icon svg{
        width:17px;
        height:17px;
    }

    .mobile-bottom-nav.mobile-bottom-nav--six em{
        top:1px;
        right:3px;
    }
}

@media(max-width:380px){
    .mobile-bottom-nav.mobile-bottom-nav--six{
        left:6px;
        right:6px;
    }
    .mobile-bottom-nav.mobile-bottom-nav--six small{
        font-size:8px;
    }
}

/* CX-6.1 global mobile top header overlap repair */
@media(max-width:768px){
    .premium-site-header .header-shell,
    .site-header .header-shell{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        column-gap:12px!important;
        row-gap:12px!important;
        align-items:center!important;
    }

    .premium-site-header .header-actions,
    .site-header .header-actions,
    .header-actions{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-end!important;
        gap:12px!important;
        flex-wrap:nowrap!important;
        min-width:max-content!important;
        padding-right:0!important;
    }

    .premium-site-header .header-wishlist-btn,
    .site-header .header-wishlist-btn,
    .premium-site-header .top-cart-icon-btn,
    .site-header .top-cart-icon-btn{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        min-height:44px!important;
        flex:0 0 44px!important;
        margin:0!important;
        position:relative!important;
    }

    .premium-site-header .header-wishlist-badge,
    .site-header .header-wishlist-badge,
    .premium-site-header .top-cart-badge,
    .site-header .top-cart-badge{
        top:-7px!important;
        right:-7px!important;
        z-index:5!important;
    }

    .premium-site-header .header-search,
    .site-header .header-search,
    .header-search-form{
        grid-column:1 / -1!important;
        width:100%!important;
    }
}

@media(max-width:420px){
    .premium-site-header .header-actions,
    .site-header .header-actions,
    .header-actions{
        gap:14px!important;
    }
}


@media(max-width:768px){
    .menu-drawer{
        width:min(100%,430px);
        max-width:100%;
        border-left:0;
        border-radius:24px 0 0 24px;
        box-shadow:-18px 0 48px rgba(15,23,42,.14)!important;
    }
    .menu-drawer__header{padding:20px 18px 17px}
    .menu-drawer__header h2{font-size:23px}
    .menu-drawer__body{padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
    .menu-drawer__links a{min-height:56px;padding:13px 15px;border-radius:15px;font-size:15px}
}
@media(max-width:430px){
    .menu-drawer{width:100%;border-radius:0}
}