/* Phase 20 - Mobile App Like Interface inspired by grocery app layout */
.af-app-bottom-nav{
    display:none;
}

/* Desktop stays unchanged. Mobile becomes app-like. */
@media(max-width:767px){
    :root{
        --af-app-bg:#f5f7fb;
        --af-app-card:#ffffff;
        --af-app-radius:18px;
    }

    html, body{
        background:var(--af-app-bg) !important;
        overflow-x:hidden;
    }

    body{
        padding-bottom:86px;
    }

    .container{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    /* Hide desktop top bar/nav; keep clean app header */
    .af-topbar,
    .af-nav{
        display:none !important;
    }

    .af-header{
        position:sticky !important;
        top:0 !important;
        background:rgba(255,255,255,.96) !important;
        backdrop-filter:blur(14px);
        box-shadow:0 6px 24px rgba(15,23,42,.06) !important;
        border-bottom:1px solid rgba(226,232,240,.75) !important;
        z-index:1050;
    }

    .af-mainbar{
        min-height:auto !important;
        padding:12px 0 14px !important;
        display:grid !important;
        grid-template-columns:auto 1fr auto auto !important;
        gap:10px !important;
        align-items:center !important;
    }

    .af-logo img{
        width:116px !important;
        max-width:116px !important;
    }

    .af-actions{
        display:flex !important;
        gap:8px !important;
    }

    .af-actions .af-action span{
        display:none !important;
    }

    .af-actions .af-action{
        width:38px !important;
        height:38px !important;
        border-radius:14px !important;
        background:#fff !important;
        border:1px solid var(--af-line) !important;
        justify-content:center !important;
        box-shadow:0 8px 20px rgba(15,23,42,.05);
    }

    .af-actions .af-action i{
        font-size:18px !important;
    }

    .af-mobile-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:38px !important;
        height:38px !important;
        border-radius:14px !important;
        box-shadow:0 8px 20px rgba(15,23,42,.05);
    }

    .af-search{
        order:5 !important;
        grid-column:1 / -1 !important;
        width:100% !important;
        max-width:none !important;
        min-height:48px !important;
        border-radius:16px !important;
        background:#f7f9fc !important;
        border:1px solid #e7edf5 !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    }

    .af-search-cat{
        display:none !important;
    }

    .af-search input{
        min-height:48px !important;
        font-size:14px !important;
        padding-left:16px !important;
    }

    .af-search button{
        width:48px !important;
        min-height:48px !important;
        border-radius:14px !important;
        color:var(--af-blue-dark) !important;
    }

    /* App spacing */
    .af-section{
        padding:18px 0 !important;
    }

    .af-section:first-of-type{
        padding-top:14px !important;
    }

    .info-card,
    .af-product-card,
    .af-category-card,
    .af-image-only-ad,
    .af-wide-image-only,
    .af-hero-main,
    .af-side-card{
        border-radius:var(--af-app-radius) !important;
        box-shadow:0 8px 28px rgba(15,23,42,.06) !important;
        border:1px solid rgba(226,232,240,.75) !important;
    }

    /* Home banners like app promo cards */
    .af-hero-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .af-side-offers{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        aspect-ratio:16/9 !important;
        overflow:hidden !important;
        padding:0 !important;
        min-height:0 !important;
    }

    .af-hero-main.af-banner-image-only img,
    .af-side-card.af-banner-image-only img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    .af-hero-main:not(.af-banner-image-only){
        min-height:auto !important;
        padding:26px 20px !important;
    }

    .af-hero-main h1{
        font-size:25px !important;
        line-height:1.12 !important;
        letter-spacing:-.4px !important;
    }

    .af-hero-main p{
        font-size:13px !important;
        margin-bottom:16px !important;
    }

    .af-side-card:not(.af-banner-image-only){
        min-height:130px !important;
        padding:22px !important;
    }

    /* App section headings */
    .af-section-head{
        margin-bottom:14px !important;
        align-items:flex-end !important;
    }

    .af-section-head h2{
        font-size:18px !important;
        letter-spacing:-.2px !important;
    }

    .af-view-link{
        font-size:12px !important;
        color:var(--af-blue-dark) !important;
    }

    /* Categories become app shortcuts */
    .af-category-grid{
        display:flex !important;
        gap:12px !important;
        overflow-x:auto !important;
        scroll-snap-type:x mandatory;
        padding:2px 2px 10px !important;
        -webkit-overflow-scrolling:touch;
    }

    .af-category-grid::-webkit-scrollbar{
        display:none;
    }

    .af-category-card{
        flex:0 0 92px !important;
        width:92px !important;
        min-height:104px !important;
        padding:12px 8px !important;
        gap:8px !important;
        scroll-snap-align:start;
        background:#fff !important;
    }

    .af-category-icon{
        width:58px !important;
        height:58px !important;
        object-fit:contain !important;
    }

    .af-category-card span{
        font-size:11px !important;
        line-height:1.2 !important;
        font-weight:900 !important;
        text-align:center !important;
    }

    /* Products: mobile app cards, 2 per row */
    .af-product-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:13px !important;
    }

    .af-product-card{
        overflow:hidden !important;
        background:#fff !important;
        min-height:100% !important;
    }

    .af-product-image{
        height:138px !important;
        padding:12px !important;
    }

    .af-product-image img{
        object-fit:contain !important;
    }

    .af-product-body{
        padding:12px !important;
    }

    .af-product-title{
        font-size:13px !important;
        min-height:36px !important;
        line-height:1.25 !important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .af-product-meta,
    .af-product-rating,
    .af-stock,
    .af-min-note{
        font-size:10px !important;
    }

    .af-price-row strong{
        font-size:15px !important;
    }

    .af-price-hidden{
        font-size:11px !important;
        min-height:34px;
    }

    .af-cart-row{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .af-qty-mini{
        width:100% !important;
        justify-content:space-between !important;
        border-radius:12px !important;
    }

    .af-add-btn{
        width:100% !important;
        min-height:38px !important;
        border-radius:12px !important;
        font-size:12px !important;
    }

    .af-wishlist{
        width:34px !important;
        height:34px !important;
        right:10px !important;
        top:10px !important;
        border-radius:13px !important;
    }

    /* Related products also 2 columns on mobile */
    .af-related-scroller{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:13px !important;
    }

    /* Forms/tables app feel */
    .form-control,
    .form-select{
        border-radius:14px !important;
        min-height:46px !important;
    }

    .btn{
        border-radius:14px !important;
    }

    .table-responsive{
        border-radius:16px;
        overflow:auto;
        background:#fff;
    }

    /* Hide desktop footer and replace with bottom app nav */
    .af-footer{
        display:none !important;
    }

    .af-mobile-cart{
        display:none !important;
    }

    .af-app-bottom-nav{
        display:grid !important;
        grid-template-columns:repeat(5,1fr);
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:1100;
        min-height:66px;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(226,232,240,.95);
        border-radius:24px;
        box-shadow:0 18px 45px rgba(15,23,42,.18);
        backdrop-filter:blur(16px);
        padding:8px 6px;
    }

    .af-app-nav-item{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:#64748b;
        font-size:10px;
        font-weight:900;
        text-decoration:none;
    }

    .af-app-nav-item i{
        font-size:20px;
        line-height:1;
    }

    .af-app-nav-item:hover,
    .af-app-nav-item:active{
        color:var(--af-blue-dark);
    }

    .af-app-cart-item{
        color:var(--af-orange);
    }

    .af-app-cart-item b{
        position:absolute;
        top:1px;
        right:22%;
        min-width:18px;
        height:18px;
        padding:0 4px;
        border-radius:999px;
        background:var(--af-orange);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:10px;
        line-height:1;
        border:2px solid #fff;
    }
}

@media(max-width:380px){
    .af-logo img{
        width:104px !important;
        max-width:104px !important;
    }
    .af-actions{
        gap:6px !important;
    }
    .af-actions .af-action,
    .af-mobile-toggle{
        width:36px !important;
        height:36px !important;
    }
    .af-product-image{
        height:124px !important;
    }
    .af-product-body{
        padding:10px !important;
    }
    .af-product-title{
        font-size:12px !important;
    }
}

/* Phase 20.1 - Mobile category grid + banner visibility controls */

/* Admin-controlled banner visibility */
.af-hide-desktop-banners{
    display:none !important;
}
@media(max-width:767px){
    .af-hide-desktop-banners{
        display:block !important;
    }
    .af-hide-mobile-banners{
        display:none !important;
    }
}
@media(min-width:768px){
    .af-hide-mobile-banners{
        display:block !important;
    }
}

/* App-style popular categories on mobile: 4 columns, full grid */
@media(max-width:767px){
    .af-section-head{
        align-items:center !important;
    }

    .af-section-head h2{
        font-size:22px !important;
        font-weight:900 !important;
    }

    .af-section-head h2::before{
        content:"Shop Popular ";
    }

    .af-category-grid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:8px !important;
        overflow:visible !important;
        padding:0 !important;
        scroll-snap-type:none !important;
    }

    .af-category-card{
        width:auto !important;
        flex:auto !important;
        min-height:118px !important;
        padding:9px 6px !important;
        border-radius:18px !important;
        background:#fff !important;
        border:1px solid #e6ebf2 !important;
        box-shadow:none !important;
        scroll-snap-align:unset !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:8px !important;
    }

    .af-category-icon{
        width:58px !important;
        height:58px !important;
        object-fit:contain !important;
    }

    .af-category-card span{
        width:100% !important;
        min-height:30px !important;
        font-size:12px !important;
        line-height:1.18 !important;
        color:#222 !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
    }

    .af-view-link{
        font-size:18px !important;
        font-weight:700 !important;
        color:#6b4eff !important;
    }

    .af-arrows{
        margin-left:3px !important;
    }

    .af-arrows .af-arrow{
        display:none !important;
    }

    .af-arrows::after{
        content:"›";
        font-size:25px;
        line-height:0;
        color:#6b4eff;
        font-weight:900;
    }

    /* More complete bottom menu like app screenshot */
    .af-app-bottom-nav{
        left:18px !important;
        right:18px !important;
        bottom:12px !important;
        min-height:78px !important;
        border-radius:0 0 34px 34px !important;
        padding:8px 8px 10px !important;
        box-shadow:0 -2px 22px rgba(15,23,42,.18) !important;
    }

    .af-app-nav-item{
        font-size:17px !important;
        font-weight:500 !important;
        color:#454545 !important;
        gap:5px !important;
    }

    .af-app-nav-item i{
        font-size:31px !important;
        color:#555 !important;
    }

    .af-app-nav-item span{
        line-height:1 !important;
    }

    .af-app-cart-item{
        color:#454545 !important;
    }

    .af-app-cart-item i{
        color:#555 !important;
    }

    .af-app-cart-item b{
        top:4px !important;
        right:18% !important;
    }
}

@media(max-width:380px){
    .af-category-grid{
        gap:7px !important;
    }
    .af-category-card{
        min-height:108px !important;
        border-radius:16px !important;
    }
    .af-category-icon{
        width:52px !important;
        height:52px !important;
    }
    .af-category-card span{
        font-size:11px !important;
    }
    .af-app-nav-item{
        font-size:14px !important;
    }
    .af-app-nav-item i{
        font-size:27px !important;
    }
}

/* Phase 20.2 - Admin checkbox visibility fix */
.form-check-input{
    appearance:auto !important;
    -webkit-appearance:checkbox !important;
    width:1.15em !important;
    height:1.15em !important;
    min-width:1.15em !important;
    min-height:1.15em !important;
    margin-top:.2em !important;
    border:1px solid #94a3b8 !important;
    border-radius:.25em !important;
    background-color:#fff !important;
    cursor:pointer !important;
    opacity:1 !important;
    position:static !important;
    display:inline-block !important;
    vertical-align:middle !important;
}

.form-check-input:checked{
    background-color:#2563eb !important;
    border-color:#2563eb !important;
}

.form-check{
    display:flex !important;
    align-items:flex-start !important;
    gap:.55rem !important;
    min-height:1.5rem !important;
}

.form-check .form-check-input{
    float:none !important;
    margin-left:0 !important;
}

.form-check-label{
    cursor:pointer !important;
}

/* Keep admin/settings checkboxes readable even if custom Bootstrap switch CSS fails */
.admin-card .form-check-input[type="checkbox"]{
    outline:0 !important;
    box-shadow:none !important;
}
.admin-card .form-check-input[type="checkbox"]:checked{
    box-shadow:inset 0 0 0 3px #fff !important;
}

/* Phase 20.5 - Full width mobile bottom navigation */
@media(max-width:767px){
    body{
        padding-bottom:92px !important;
    }

    .af-app-bottom-nav{
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100% !important;
        max-width:none !important;
        min-height:78px !important;
        border-radius:24px 24px 0 0 !important;
        padding:8px 8px calc(10px + env(safe-area-inset-bottom)) !important;
        background:#fff !important;
        border:0 !important;
        border-top:1px solid #e5e7eb !important;
        box-shadow:0 -10px 34px rgba(15,23,42,.16) !important;
        display:grid !important;
        grid-template-columns:repeat(5,1fr) !important;
    }

    .af-app-nav-item{
        min-width:0 !important;
        font-size:14px !important;
        font-weight:600 !important;
        color:#4b5563 !important;
    }

    .af-app-nav-item i{
        font-size:28px !important;
        color:#4b5563 !important;
    }

    .af-app-nav-item span{
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .af-app-cart-item b{
        right:22% !important;
        top:2px !important;
    }
}

@media(max-width:380px){
    .af-app-bottom-nav{
        min-height:72px !important;
        padding-left:4px !important;
        padding-right:4px !important;
    }

    .af-app-nav-item{
        font-size:12px !important;
    }

    .af-app-nav-item i{
        font-size:25px !important;
    }
}

/* Phase 20.7 - Mobile side drawer menu */
.af-mobile-drawer,
.af-mobile-drawer-overlay{
    display:none;
}

@media(max-width:767px){
    body.af-menu-open{
        overflow:hidden !important;
    }

    .af-mobile-drawer-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.55);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        z-index:1190;
        transition:opacity .25s ease, visibility .25s ease;
    }

    .af-mobile-drawer{
        display:flex;
        flex-direction:column;
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:min(82vw,340px);
        background:#fff;
        z-index:1200;
        transform:translateX(-105%);
        transition:transform .28s ease;
        border-radius:0 28px 28px 0;
        box-shadow:24px 0 60px rgba(15,23,42,.22);
        overflow:hidden;
    }

    body.af-menu-open .af-mobile-drawer-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.af-menu-open .af-mobile-drawer{
        transform:translateX(0);
    }

    .af-mobile-drawer-close{
        position:absolute;
        top:18px;
        right:18px;
        width:42px;
        height:42px;
        border:0;
        border-radius:50%;
        background:#f8fafc;
        color:#0f172a;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        z-index:2;
    }

    .af-mobile-drawer-brand{
        min-height:150px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:30px 64px 20px;
        border-bottom:1px solid #edf1f5;
        background:
            radial-gradient(circle at 20% 0%, rgba(103,183,228,.14), transparent 34%),
            linear-gradient(180deg,#fff,#fbfdff);
    }

    .af-mobile-drawer-brand img{
        width:170px;
        max-width:100%;
        height:auto;
        display:block;
        object-fit:contain;
    }

    .af-mobile-drawer-links{
        padding:24px 22px 28px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .af-mobile-drawer-links a{
        display:flex;
        align-items:center;
        gap:18px;
        min-height:54px;
        padding:0 14px;
        color:#111827;
        font-size:16px;
        font-weight:600;
        border-radius:0;
        text-decoration:none;
    }

    .af-mobile-drawer-links a:hover,
    .af-mobile-drawer-links a:active{
        background:#f3f4f6;
    }

    .af-mobile-drawer-links a i{
        width:24px;
        font-size:21px;
        color:#1f2937;
        text-align:center;
    }

    .af-mobile-drawer-logout{
        margin-top:26px;
        color:#991b1b !important;
    }

    .af-mobile-drawer-logout i{
        color:#991b1b !important;
    }

    /* Hide Bootstrap collapsed mobile nav; drawer replaces it */
    .af-nav .collapse:not(.show){
        display:none !important;
    }

    .af-nav .collapse.show{
        display:none !important;
    }
}

@media(max-width:380px){
    .af-mobile-drawer{
        width:86vw;
    }

    .af-mobile-drawer-brand{
        min-height:135px;
    }

    .af-mobile-drawer-brand img{
        width:150px;
    }

    .af-mobile-drawer-links{
        padding:18px 16px 24px;
    }

    .af-mobile-drawer-links a{
        min-height:50px;
        font-size:15px;
    }
}

/* Phase 20.9 - Strong homepage banner visibility fallback */
@media(max-width:767px){
    .af-home-banners-section.af-hide-mobile-banners,
    section.af-home-banners-section.af-hide-mobile-banners{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
    }
}
@media(min-width:768px){
    .af-home-banners-section.af-hide-desktop-banners,
    section.af-home-banners-section.af-hide-desktop-banners{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
    }
}

/* Phase 24 - Customer order tracking */
.af-track-steps{
    display:grid;
    gap:14px;
}
.af-track-step{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#fff;
}
.af-track-dot{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:50%;
    background:#e5e7eb;
    color:#64748b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}
.af-track-step.done{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.af-track-step.done .af-track-dot{
    background:#16a34a;
    color:#fff;
}


/* Phase 48.5 - Mobile menu toggle visibility fix */
@media(max-width: 767px){
    .af-mainbar{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto auto !important;
        grid-template-areas:
            "logo search account menu" !important;
        align-items:center !important;
        gap:10px !important;
    }

    .af-logo{grid-area:logo !important;}
    .af-logo img{
        width:112px !important;
        max-width:112px !important;
    }

    .af-search-wrap{
        grid-area:search !important;
        min-width:0 !important;
        max-width:none !important;
        width:100% !important;
    }

    .af-search-wrap .af-search,
    .af-search{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        min-height:44px !important;
        order:initial !important;
        flex-basis:auto !important;
    }

    .af-search input{
        min-width:0 !important;
        padding:0 10px !important;
        font-size:13px !important;
    }

    .af-search button{
        width:42px !important;
        min-width:42px !important;
    }

    .af-actions{
        grid-area:account !important;
        margin-left:0 !important;
        display:flex !important;
        gap:0 !important;
    }

    .af-actions .af-cart{
        display:none !important;
    }

    .af-actions .af-action{
        width:44px !important;
        height:44px !important;
        border-radius:18px !important;
        background:#fff !important;
        border:1px solid var(--af-line) !important;
        justify-content:center !important;
        box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
    }

    .af-mobile-toggle{
        grid-area:menu !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        border-radius:18px !important;
        background:#fff !important;
        border:1px solid var(--af-line) !important;
        color:#0f172a !important;
        box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
        font-size:22px !important;
        z-index:1200 !important;
    }

    .af-mobile-toggle i{
        line-height:1 !important;
        font-size:24px !important;
    }
}

@media(max-width: 390px){
    .af-mainbar{
        grid-template-columns:auto minmax(0,1fr) 40px 40px !important;
        gap:8px !important;
    }

    .af-logo img{
        width:100px !important;
        max-width:100px !important;
    }

    .af-actions .af-action,
    .af-mobile-toggle{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        border-radius:16px !important;
    }

    .af-search input{
        font-size:12px !important;
    }
}

/* Drawer open state */
body.af-mobile-menu-open{
    overflow:hidden !important;
}

.af-mobile-drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.45) !important;
    z-index:2147482500 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:.2s ease !important;
}

.af-mobile-drawer{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    width:min(86vw,360px) !important;
    height:100vh !important;
    z-index:2147482600 !important;
    background:#fff !important;
    transform:translateX(110%) !important;
    transition:.24s ease !important;
    box-shadow:-24px 0 70px rgba(15,23,42,.22) !important;
    padding:22px !important;
    overflow-y:auto !important;
}

body.af-mobile-menu-open .af-mobile-drawer-overlay{
    opacity:1 !important;
    pointer-events:auto !important;
}

body.af-mobile-menu-open .af-mobile-drawer{
    transform:translateX(0) !important;
}

.af-mobile-drawer-close{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    width:40px !important;
    height:40px !important;
    border:0 !important;
    border-radius:14px !important;
    background:#f1f5f9 !important;
}

.af-mobile-drawer-brand img{
    width:140px !important;
    margin:12px 0 24px !important;
}

.af-mobile-drawer-links{
    display:grid !important;
    gap:8px !important;
}

.af-mobile-drawer-links a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:13px 12px !important;
    border-radius:16px !important;
    color:#0f172a !important;
    background:#f8fafc !important;
    text-decoration:none !important;
    font-weight:800 !important;
}

.af-mobile-drawer-links a i{
    font-size:20px !important;
    color:#0f8bd9 !important;
}








/* Phase 48.9 - Independent mobile header rebuild */
.af-mobile-clean-header{
    display:none;
}

@media(max-width: 767px){
    html, body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    *, *::before, *::after{
        box-sizing:border-box !important;
    }

    body{
        padding-top:0 !important;
    }

    .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:14px !important;
        padding-right:14px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Hide the old complex header on mobile only. Desktop is untouched. */
    .af-header{
        display:none !important;
    }

    .af-mobile-clean-header{
        display:block !important;
        position:sticky !important;
        top:0 !important;
        z-index:2147481000 !important;
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
        background:#fff !important;
        border-bottom:1px solid #e5edf5 !important;
        box-shadow:0 8px 28px rgba(15,23,42,.06) !important;
        padding:12px 14px 14px !important;
    }

    .af-mobile-clean-top{
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        margin-bottom:10px !important;
    }

    .af-mobile-clean-logo{
        display:flex !important;
        align-items:center !important;
        min-width:0 !important;
        text-decoration:none !important;
    }

    .af-mobile-clean-logo img{
        width:132px !important;
        max-width:132px !important;
        height:auto !important;
        display:block !important;
    }

    .af-mobile-clean-menu{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid #dbe3ee !important;
        border-radius:18px !important;
        background:#fff !important;
        color:#0f172a !important;
        font-size:26px !important;
        font-weight:900 !important;
        line-height:1 !important;
        box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
    }

    .af-mobile-clean-search{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 48px !important;
        align-items:center !important;
        border:1px solid #dbe3ee !important;
        border-radius:20px !important;
        background:#f8fbfd !important;
        overflow:hidden !important;
    }

    .af-mobile-clean-search input{
        width:100% !important;
        min-width:0 !important;
        height:48px !important;
        border:0 !important;
        outline:0 !important;
        background:transparent !important;
        padding:0 14px !important;
        font-size:14px !important;
        color:#0f172a !important;
    }

    .af-mobile-clean-search button{
        width:48px !important;
        height:48px !important;
        border:0 !important;
        background:transparent !important;
        color:#0f8bd9 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:21px !important;
    }

    /* Content containment */
    main,
    .af-section,
    .container,
    #categoryGrid{
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    .af-section{
        padding:24px 0 !important;
    }

    .af-section-head{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:10px !important;
        margin-bottom:16px !important;
        overflow:hidden !important;
    }

    .af-section-head h2{
        flex:1 1 auto !important;
        min-width:0 !important;
        font-size:22px !important;
        line-height:1.12 !important;
        margin:0 !important;
    }

    .af-view-link{
        flex:0 0 auto !important;
        max-width:142px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        font-size:14px !important;
        line-height:1.2 !important;
    }

    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    #categoryGrid .af-category-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        min-height:164px !important;
        padding:15px 10px 14px !important;
        border-radius:24px !important;
        overflow:hidden !important;
    }

    #categoryGrid .af-category-icon{
        width:96px !important;
        height:96px !important;
        max-width:100% !important;
        object-fit:contain !important;
    }

    #categoryGrid .af-category-card span{
        width:100% !important;
        max-width:100% !important;
        font-size:14px !important;
        line-height:1.2 !important;
        font-weight:900 !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
    }

    .af-app-bottom-nav{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        border-radius:22px 22px 0 0 !important;
        transform:none !important;
        z-index:1100 !important;
    }
}

@media(max-width: 380px){
    .af-mobile-clean-logo img{
        width:118px !important;
        max-width:118px !important;
    }

    .af-mobile-clean-menu{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        border-radius:16px !important;
    }

    #categoryGrid .af-category-card{
        min-height:150px !important;
    }

    #categoryGrid .af-category-icon{
        width:84px !important;
        height:84px !important;
    }
}

/* Phase 50.12 - product page global mobile polish */
@media (max-width: 767px) {
    .product-page-container .alert {
        border-radius: 18px !important;
    }
}

/* Phase 50.34 - Managed homepage banners only + safe image sizing
   The two side adverts must come from home_banners, not hardcoded fallback cards.
   Image-only artworks are contained, not cropped, so uploaded posters fit the banner area. */
.af-hero-grid.af-no-side-banners{
    grid-template-columns:minmax(0, 1fr) !important;
}
.af-hero-grid.af-no-side-banners .af-side-offers{
    display:none !important;
}
.af-hero-grid.af-no-side-banners .af-hero-main.af-banner-image-only{
    max-height:390px !important;
}
.af-hero-main.af-banner-image-only,
.af-side-card.af-banner-image-only,
.af-wide-image-only.af-banner-image-only,
.af-image-only-ad{
    background:#fff !important;
}
.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img,
.af-wide-image-only.af-banner-image-only img,
.af-image-only-ad img{
    object-fit:contain !important;
    object-position:center center !important;
    background:#fff !important;
}
.af-hero-main.af-banner-image-only{
    max-height:390px !important;
}
.af-side-card.af-banner-image-only{
    max-height:184px !important;
}
.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img{
    padding:0 !important;
}
@media(max-width:991px){
    .af-hero-grid.af-no-side-banners .af-hero-main.af-banner-image-only,
    .af-hero-main.af-banner-image-only{
        max-height:none !important;
    }
    .af-side-card.af-banner-image-only{
        max-height:none !important;
    }
}
@media(max-width:767px){
    .af-hero-main.af-banner-image-only img,
    .af-side-card.af-banner-image-only img{
        object-fit:contain !important;
    }
}

/* Phase 50.35 - Random banner refresh + final consistent image frame
   Desktop frames are fixed and images are contained, so full artwork remains visible.
   This override is placed at the end to beat older banner rules. */
.af-home-banners-section{
    padding-top:22px !important;
    padding-bottom:22px !important;
}
.af-home-banners-section .af-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 2.05fr) minmax(280px, .95fr) !important;
    gap:22px !important;
    align-items:stretch !important;
}
.af-home-banners-section .af-hero-grid.af-no-side-banners{
    grid-template-columns:minmax(0, 1fr) !important;
}
.af-home-banners-section .af-hero-grid.af-no-side-banners .af-side-offers{
    display:none !important;
}
.af-home-banners-section .af-hero-main.af-banner-image-only{
    width:100% !important;
    height:clamp(300px, 28vw, 420px) !important;
    min-height:0 !important;
    max-height:420px !important;
    aspect-ratio:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    padding:0 !important;
    overflow:hidden !important;
}
.af-home-banners-section .af-side-offers{
    height:clamp(300px, 28vw, 420px) !important;
    max-height:420px !important;
    display:grid !important;
    grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
    gap:22px !important;
}
.af-home-banners-section .af-side-card{
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
}
.af-home-banners-section .af-side-card.af-banner-image-only{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    background:#fff !important;
    aspect-ratio:auto !important;
}
.af-home-banners-section .af-hero-main.af-banner-image-only img,
.af-home-banners-section .af-side-card.af-banner-image-only img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#fff !important;
    padding:0 !important;
}
@media(max-width:991px){
    .af-home-banners-section .af-hero-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }
    .af-home-banners-section .af-side-offers{
        height:auto !important;
        max-height:none !important;
        grid-template-columns:1fr 1fr !important;
        grid-template-rows:auto !important;
        gap:18px !important;
    }
    .af-home-banners-section .af-hero-main.af-banner-image-only{
        height:auto !important;
        max-height:none !important;
        aspect-ratio:16 / 9 !important;
    }
    .af-home-banners-section .af-side-card.af-banner-image-only{
        height:auto !important;
        aspect-ratio:16 / 9 !important;
    }
}
@media(max-width:767px){
    .af-home-banners-section{
        padding-top:12px !important;
        padding-bottom:12px !important;
    }
    .af-home-banners-section .af-side-offers{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }
    .af-home-banners-section .af-hero-main.af-banner-image-only,
    .af-home-banners-section .af-side-card.af-banner-image-only{
        aspect-ratio:16 / 9 !important;
        border-radius:12px !important;
    }
}

/* ==========================================================
   Phase 50.36 - FINAL iPhone viewport width fix
   - Normalises the page to the visual viewport.
   - Removes stale Bootstrap/container offsets on mobile.
   - Fixes the off-canvas drawer left/right conflict that can
     make iOS Safari calculate a wider layout than the screen.
========================================================== */
@media (max-width: 767px) {
    html {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: clip !important;
        -webkit-text-size-adjust: 100% !important;
    }

    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: clip !important;
        position: relative !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    body > .af-mobile-clean-header,
    body > main,
    body > .af-app-bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    .af-mobile-clean-header {
        left: 0 !important;
        right: 0 !important;
        inset-inline: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    main {
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: clip !important;
    }

    main > .af-section,
    .af-section,
    .af-home-banners-section,
    .af-image-ads-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container,
    .container-fluid,
    main > .container,
    .af-section > .container,
    .af-home-banners-section > .container,
    .af-image-ads-section > .container,
    .product-page-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
    }

    .row > * {
        min-width: 0 !important;
    }

    .af-mobile-clean-top,
    .af-mobile-clean-search,
    .af-section-head,
    .af-hero-grid,
    .af-side-offers,
    #categoryGrid,
    .af-category-grid,
    .af-product-grid,
    .related-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The drawer used to inherit left:0 and later also receive right:0.
       That hidden fixed element can widen Safari's layout viewport. */
    .af-mobile-drawer {
        left: auto !important;
        right: 0 !important;
        max-width: min(86vw, 360px) !important;
        margin: 0 !important;
        contain: layout paint !important;
    }

    body:not(.af-menu-open):not(.af-mobile-menu-open) .af-mobile-drawer {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.af-menu-open .af-mobile-drawer,
    body.af-mobile-menu-open .af-mobile-drawer {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .af-mobile-drawer-overlay {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .af-app-bottom-nav {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 390px) {
    .af-mobile-clean-header,
    .container,
    .container-fluid,
    main > .container,
    .af-section > .container,
    .af-home-banners-section > .container,
    .af-image-ads-section > .container,
    .product-page-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}