/* ==========================================================================
   PHASE 5 FIX - Allfood frontend fallback styles
   These styles make the frontend display correctly even if Bootstrap CDN
   or the external local CSS file is not loaded by the browser.
   ========================================================================== */

.container{width:100%;max-width:1200px;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}
.row{display:flex;flex-wrap:wrap;margin-right:-12px;margin-left:-12px}
.row>*{padding-right:12px;padding-left:12px}
.g-3{gap:0}.g-4{gap:0}
.col-6{width:50%}.col-12{width:100%}
.d-flex{display:flex}.d-none{display:none}.align-items-center{align-items:center}.justify-content-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:1rem}
.text-muted{color:var(--af-muted)!important}.text-warning{color:var(--af-yellow)!important}.text-success{color:#16a34a!important}
.mb-0{margin-bottom:0!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-3{margin-top:1rem!important}.mt-5{margin-top:3rem!important}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.h3{font-size:1.75rem}.h4{font-size:1.5rem}.h5{font-size:1.25rem}.fw-bold{font-weight:900!important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.6rem 1rem;border-radius:.35rem;border:1px solid transparent;text-decoration:none;cursor:pointer;font-weight:800}
.btn-sm{padding:.35rem .7rem;font-size:.85rem}.btn-lg{padding:.8rem 1.2rem;font-size:1.05rem}
.btn-dark{background:#111827;color:#fff;border-color:#111827}.btn-light{background:#fff;color:#111827;border-color:#fff}
.btn-outline-secondary{background:#fff;color:#475569;border-color:#cbd5e1}.btn-outline-primary{background:#fff;color:var(--af-blue-dark);border-color:var(--af-blue-dark)}
.form-control,.form-select{display:block;width:100%;min-height:42px;padding:.55rem .75rem;border:1px solid var(--af-line);border-radius:.5rem;background:#fff;color:var(--af-ink)}
.form-label{display:block;margin-bottom:.35rem}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.75rem;border-bottom:1px solid var(--af-line)}
.badge{display:inline-flex;align-items:center;padding:.25rem .55rem;border-radius:.4rem;font-size:.75rem;font-weight:900}
.text-bg-success{background:#16a34a;color:#fff}.text-bg-warning{background:#f59e0b;color:#111}.text-bg-danger{background:#dc2626;color:#fff}.text-bg-primary{background:var(--af-blue-dark);color:#fff}.text-bg-secondary{background:#64748b;color:#fff}
.dropdown-menu{display:none;position:absolute;background:#fff;border:1px solid var(--af-line);min-width:220px;padding:8px 0;box-shadow:var(--af-shadow);z-index:1000}.dropdown:hover .dropdown-menu{display:block}.dropdown-item{display:block;padding:8px 14px!important;min-height:auto!important}
@media(min-width:768px){.col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}.d-md-inline{display:inline!important}.d-md-flex{display:flex!important}}
@media(min-width:992px){.col-lg-2{width:16.666%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}.d-lg-flex{display:flex!important}}

:root{
    --af-blue:#67B7E4;
    --af-blue-dark:#2b8fca;
    --af-blue-soft:#eef8ff;
    --af-orange:#F25C2E;
    --af-orange-soft:#fff1eb;
    --af-yellow:#f7bd2b;
    --af-ink:#1e293b;
    --af-muted:#64748b;
    --af-line:#edf1f5;
    --af-bg:#ffffff;
    --af-soft:#f8fafc;
    --af-card:#ffffff;
    --af-shadow:0 14px 34px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
body{
    font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    background:#fff;
    color:var(--af-ink);
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.btn-primary{
    background:var(--af-blue-dark);
    border-color:var(--af-blue-dark);
}
.btn-primary:hover{
    background:#1f7fb4;
    border-color:#1f7fb4;
}
.btn-orange{
    background:var(--af-orange);
    border-color:var(--af-orange);
    color:#fff;
}
.btn-orange:hover{
    background:#df4f25;
    border-color:#df4f25;
    color:#fff;
}

/* Header */
.af-header{
    background:#fff;
    border-bottom:1px solid var(--af-line);
    position:sticky;
    top:0;
    z-index:1020;
    box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.af-topbar{
    background:#fbfdff;
    border-bottom:1px solid var(--af-line);
    font-size:13px;
    color:var(--af-muted);
}
.af-topbar-inner{
    min-height:36px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.af-topbar a{color:var(--af-blue-dark);font-weight:800}
.af-mainbar{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:24px;
}
.af-logo img{
    width:168px;
    height:auto;
    display:block;
}
.af-search{
    flex:1;
    display:flex;
    align-items:center;
    border:1px solid var(--af-line);
    background:#f9fbfd;
    border-radius:999px;
    overflow:hidden;
    min-height:46px;
    max-width:680px;
}
.af-search-cat{
    width:150px;
    border:0;
    background:#fff;
    padding:0 16px;
    min-height:46px;
    font-size:13px;
    color:var(--af-ink);
    border-right:1px solid var(--af-line);
    outline:0;
}
.af-search input{
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    padding:0 16px;
    min-height:46px;
    font-size:14px;
}
.af-search button{
    width:54px;
    min-height:46px;
    border:0;
    background:transparent;
    color:var(--af-ink);
}
.af-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.af-action{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--af-ink);
    font-weight:800;
    font-size:13px;
}
.af-action i{font-size:19px}
.af-cart b,
.af-mobile-cart span{
    position:absolute;
    top:-9px;
    right:-10px;
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:var(--af-orange);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}
.af-mobile-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--af-line);
    border-radius:12px;
    background:#fff;
}
.af-nav{
    border-top:1px solid var(--af-line);
}
.af-menu{
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
}
.af-menu a{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:45px;
    padding:0 14px;
    font-size:13px;
    font-weight:800;
    color:#334155;
    border-radius:3px;
}
.af-menu a.active,
.af-menu a:hover{
    background:var(--af-yellow);
    color:#111827;
}
.af-coupon-link{
    font-size:13px;
    color:#334155;
    font-weight:800;
}

/* Hero */
.af-section{padding:34px 0}
.af-hero-grid{
    display:grid;
    grid-template-columns:1.65fr .85fr;
    gap:24px;
    align-items:stretch;
}
.af-hero-main{
    min-height:330px;
    border-radius:4px;
    background:
        radial-gradient(circle at 75% 48%, rgba(255,255,255,.45), transparent 28%),
        linear-gradient(135deg,#eaf7ff,#dff2fb);
    position:relative;
    overflow:hidden;
    padding:54px 60px;
    display:flex;
    align-items:center;
}
.af-hero-content{max-width:430px;position:relative;z-index:2}
.af-kicker{
    color:var(--af-orange);
    font-weight:900;
    font-size:13px;
    margin-bottom:12px;
}
.af-hero-main h1{
    font-size:44px;
    line-height:1.08;
    font-weight:1000;
    margin:0 0 14px;
    letter-spacing:-1.2px;
}
.af-hero-main p{
    color:var(--af-muted);
    margin-bottom:24px;
}
.af-hero-main .btn{
    border-radius:0;
    padding:11px 22px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-size:12px;
}
.af-hero-visual{
    position:absolute;
    right:5%;
    bottom:0;
    width:42%;
    height:90%;
    background:
        radial-gradient(ellipse at center, rgba(242,92,46,.20), transparent 52%),
        linear-gradient(25deg, transparent 0 45%, rgba(242,92,46,.06) 45% 55%, transparent 55%);
}
.af-hero-visual::after{
    content:"";
    position:absolute;
    inset:20px 8% 0;
    background:
        radial-gradient(circle at 50% 18%, var(--af-orange) 0 10%, transparent 11%),
        linear-gradient(90deg, var(--af-orange), #ffad65);
    clip-path:polygon(38% 4%,62% 4%,72% 100%,28% 100%);
    transform:rotate(-10deg);
    border-radius:22px;
    opacity:.92;
}
.af-side-offers{
    display:grid;
    gap:18px;
}
.af-side-card{
    min-height:155px;
    border-radius:4px;
    background:linear-gradient(135deg,#f4faef,#fff);
    padding:30px;
    position:relative;
    overflow:hidden;
}
.af-side-card:nth-child(2){background:linear-gradient(135deg,#fff3e7,#fff)}
.af-side-card h3{
    font-size:24px;
    font-weight:900;
    margin:0 0 6px;
}
.af-side-card p{margin:0;color:var(--af-muted);font-size:13px}
.af-discount{color:var(--af-orange);font-weight:900;font-size:18px}

/* Section headers */
.af-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.af-section-head h2{
    margin:0;
    font-size:24px;
    font-weight:1000;
}
.af-view-link{
    color:var(--af-muted);
    font-size:13px;
    font-weight:800;
}
.af-arrows{
    display:inline-flex;
    gap:6px;
    margin-left:10px;
}
.af-arrow{
    width:26px;
    height:26px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f4f6f8;
    color:#6b7280;
    font-size:12px;
}
.af-arrow.next{background:var(--af-yellow);color:#111}

/* Categories */
.af-category-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px;
}
.af-category-card{
    min-height:130px;
    padding:24px 14px;
    border:1px solid var(--af-line);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    box-shadow:0 14px 30px rgba(15,23,42,.04);
    transition:.18s ease;
}
.af-category-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(15,23,42,.08);
}
.af-category-icon{
    width:42px;
    height:42px;
    object-fit:contain;
}
.af-category-card span{
    font-size:14px;
    font-weight:800;
    text-align:center;
}

/* Brand strip */
.af-brand-strip{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:20px;
}
.af-brand-card{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:14px;
    align-items:center;
    background:#fff;
    border:1px solid var(--af-line);
    padding:14px;
}
.af-brand-card img{
    width:96px;
    height:58px;
    object-fit:contain;
    background:#f7f8fa;
}
.af-brand-card strong{
    display:block;
    font-size:14px;
    line-height:1.25;
}
.af-brand-card small{
    color:var(--af-muted);
}

/* Products */
.af-product-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}
.af-product-card{
    position:relative;
    height:100%;
    background:#fff;
    border:1px solid var(--af-line);
    box-shadow:0 12px 28px rgba(15,23,42,.04);
    transition:.18s ease;
}
.af-product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--af-shadow);
}
.af-product-badges{
    position:absolute;
    top:10px;
    left:10px;
    z-index:4;
    display:flex;
    gap:5px;
}
.af-badge{
    display:inline-flex;
    min-height:20px;
    align-items:center;
    padding:0 7px;
    border-radius:0;
    font-size:10px;
    font-weight:900;
}
.af-badge.sale{background:#83c441;color:#fff}
.af-badge.new{background:var(--af-orange);color:#fff}
.af-wishlist{
    position:absolute;
    top:10px;
    right:10px;
    z-index:4;
    border:0;
    background:transparent;
    color:#94a3b8;
}
.af-product-image{
    display:flex;
    align-items:center;
    justify-content:center;
    height:190px;
    padding:22px;
    background:#fff;
}
.af-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.2s ease;
}
.af-product-card:hover .af-product-image img{
    transform:scale(1.04);
}
.af-product-body{padding:14px}
.af-product-title{
    display:block;
    min-height:42px;
    color:var(--af-ink);
    font-size:14px;
    line-height:1.35;
    font-weight:800;
}
.af-product-meta{
    color:var(--af-muted);
    font-size:12px;
    min-height:19px;
}
.af-product-rating{
    color:#f6b100;
    font-size:11px;
    letter-spacing:1px;
    margin:4px 0;
}
.af-price-row{
    display:flex;
    align-items:center;
    gap:8px;
}
.af-price-row strong{
    color:var(--af-orange);
    font-size:16px;
    font-weight:1000;
}
.af-price-row span{
    color:#94a3b8;
    text-decoration:line-through;
    font-size:12px;
}
.af-stock{
    color:#16a34a;
    font-size:11px;
    font-weight:800;
    margin:4px 0 10px;
}
.af-stock.low{color:var(--af-orange)}
.af-cart-row{
    display:grid;
    grid-template-columns:76px 1fr;
    gap:8px;
    align-items:center;
}
.af-qty-mini{
    display:grid;
    grid-template-columns:22px 1fr 22px;
    border:1px solid var(--af-line);
    min-height:32px;
}
.af-qty-mini button{
    border:0;
    background:#fff;
    color:#64748b;
    font-weight:900;
}
.af-qty-mini input{
    width:100%;
    border:0;
    text-align:center;
    font-size:12px;
    outline:0;
}
.af-add-btn{
    min-height:32px;
    border:0;
    background:#fff;
    color:var(--af-ink);
    font-size:11px;
    font-weight:900;
}
.af-add-btn:hover{color:var(--af-orange)}
.af-min-note{
    margin-top:8px;
    font-size:11px;
    color:var(--af-muted);
}

/* Register promo */
.af-register-band{
    background:linear-gradient(135deg,#eef8ff,#f6fbff);
    padding:54px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:center;
}
.af-register-band h2{
    font-size:34px;
    line-height:1.15;
    font-weight:1000;
    margin:0 0 12px;
}
.af-register-band h2 span{color:var(--af-orange)}
.af-register-band p{color:var(--af-muted)}
.af-register-form{
    display:grid;
    gap:10px;
}
.af-register-form input{
    height:40px;
    border:0;
    background:#fff;
    padding:0 14px;
}
.af-register-form button{
    height:42px;
    border:0;
    background:#111827;
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

/* Blog cards */
.af-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}
.af-blog-card{
    background:#fff;
}
.af-blog-card .img{
    height:165px;
    background:#f4f7fa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:54px;
}
.af-blog-card h3{
    margin:14px 0 8px;
    font-size:17px;
    font-weight:900;
}
.af-blog-card p{
    color:var(--af-muted);
    font-size:13px;
}

/* Old compatibility */
.hero,.category-card,.product-card,.info-card{
    background:#fff;
    border:1px solid var(--af-line);
    box-shadow:var(--af-shadow);
}
.info-card{border-radius:18px}
.product-img{height:190px;width:100%;object-fit:contain;background:#fff;padding:18px}
.price{font-size:1.2rem;font-weight:800;color:var(--af-orange)}
.old-price{text-decoration:line-through;color:#8a94a6;font-size:.9rem}
.offer-badge{background:var(--af-orange);color:#fff}
.search-box{max-width:560px;width:100%}

/* Footer */
.af-footer{
    margin-top:60px;
    background:#101828;
    color:#fff;
    padding:54px 0 24px;
}
.af-footer-logo{
    width:145px;
    filter:brightness(1.1);
}
.af-footer p{color:rgba(255,255,255,.68)}
.af-footer h6{
    font-weight:1000;
    margin-bottom:14px;
}
.af-footer a{
    display:block;
    color:rgba(255,255,255,.7);
    margin:7px 0;
}
.af-footer a:hover{color:#fff}
.af-footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:34px;
    padding-top:20px;
    color:rgba(255,255,255,.55);
    font-size:13px;
}
.footer-link{display:block;color:rgba(255,255,255,.72);text-decoration:none;margin:.35rem 0}
.footer-link:hover{color:#fff}

.af-mobile-cart{
    display:none;
    position:fixed;
    right:18px;
    bottom:18px;
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--af-orange);
    color:#fff;
    align-items:center;
    justify-content:center;
    z-index:1000;
    box-shadow:0 14px 30px rgba(242,92,46,.28);
}
.af-mobile-cart i{font-size:22px}

/* Responsive */
@media(max-width:1199px){
    .af-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .af-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .af-brand-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991px){
    .af-mainbar{min-height:72px;gap:14px}
    .af-logo img{width:138px}
    .af-search{order:3;width:100%;max-width:none;flex-basis:100%}
    .af-actions{margin-left:auto}
    .af-mobile-toggle{display:inline-flex;align-items:center;justify-content:center}
    .af-nav{padding:8px 0}
    .af-menu{display:block}
    .af-menu a{justify-content:flex-start}
    .af-coupon-link{display:block;padding:10px 14px}
    .af-hero-grid{grid-template-columns:1fr}
    .af-hero-main{padding:38px 26px}
    .af-hero-main h1{font-size:34px}
    .af-hero-visual{opacity:.45}
    .af-register-band{grid-template-columns:1fr;padding:34px 24px}
}
@media(max-width:767px){
    .af-topbar{display:none}
    .af-actions .af-action span{display:none}
    .af-search-cat{display:none}
    .af-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .af-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .af-brand-strip{grid-template-columns:1fr}
    .af-blog-grid{grid-template-columns:1fr}
    .af-section{padding:24px 0}
    .af-hero-main{min-height:280px}
    .af-hero-main h1{font-size:30px}
    .af-product-image{height:150px}
    .af-product-title{font-size:13px}
    .af-cart-row{grid-template-columns:1fr}
    .af-mobile-cart{display:flex}
}

/* Phase 7 - Category Load More + Product Pagination */
.af-load-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 24px;
    border:1px solid var(--af-line);
    background:#fff;
    color:var(--af-ink);
    font-weight:900;
    border-radius:999px;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.af-load-more:hover{
    background:var(--af-yellow);
    color:#111827;
}
.af-load-more:disabled{
    opacity:.65;
    cursor:not-allowed;
}
.af-pagination-wrap{
    margin-top:34px;
    display:flex;
    justify-content:center;
}
.af-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
}
.af-pagination a,
.af-pagination span{
    min-width:38px;
    height:38px;
    padding:0 12px;
    border:1px solid var(--af-line);
    background:#fff;
    color:var(--af-ink);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:13px;
}
.af-pagination a:hover,
.af-pagination a.active{
    background:var(--af-yellow);
    border-color:var(--af-yellow);
    color:#111827;
}
.af-pagination a.disabled{
    opacity:.45;
    pointer-events:none;
}

/* Phase 9.3 - Image Only Banner Ads */
.af-image-ads-section{
    padding-top:10px;
    padding-bottom:10px;
}
.af-image-ads-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.af-image-only-ad{
    display:block;
    overflow:hidden;
    border-radius:6px;
    background:#f8fafc;
    border:1px solid var(--af-line);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
    transition:.18s ease;
}
.af-image-only-ad:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.af-image-only-ad img{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
}
@media(max-width:767px){
    .af-image-ads-grid{grid-template-columns:1fr;gap:14px}
    .af-image-only-ad img{height:auto;max-height:320px}
}

/* Phase 9.4 - Display Mode Image Only for Hero/Side/Wide */
.af-banner-image-only{
    padding:0!important;
    overflow:hidden;
    text-decoration:none;
}
.af-banner-image-only img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.af-hero-main.af-banner-image-only{
    min-height:330px;
    background:#f8fafc;
}
.af-side-card.af-banner-image-only{
    min-height:155px;
    background:#f8fafc;
}
.af-wide-image-only{
    display:block;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--af-line);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.af-wide-image-only img{
    width:100%;
    height:260px;
    object-fit:cover;
}
@media(max-width:767px){
    .af-hero-main.af-banner-image-only{min-height:260px}
    .af-side-card.af-banner-image-only{min-height:170px}
    .af-wide-image-only img{height:auto;max-height:320px}
}

/* Phase 9.6 - Image Only banners should show the full uploaded artwork */
.af-hero-main.af-banner-image-only,
.af-side-card.af-banner-image-only,
.af-wide-image-only,
.af-image-only-ad{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:8px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    padding:0!important;
}

.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img,
.af-wide-image-only img,
.af-image-only-ad img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
    padding:0!important;
}

/* Big left banner: full artwork, no crop */
.af-hero-main.af-banner-image-only{
    min-height:330px!important;
}

/* Right half banners: keep them as clean cards */
.af-side-card.af-banner-image-only{
    min-height:155px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* Wider ads if used later */
.af-wide-image-only{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:260px!important;
}

@media(max-width:991px){
    .af-hero-main.af-banner-image-only{min-height:280px!important}
    .af-side-card.af-banner-image-only{min-height:190px!important}
}

@media(max-width:767px){
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        min-height:auto!important;
        aspect-ratio:16/9;
    }
}

/* Phase 9.7 - Text banner image usage modes */
.af-banner-content-mode{
    position:relative;
}
.af-banner-content-mode.af-image-usage-hidden{
    background:linear-gradient(135deg,#eef8ff,#ffffff)!important;
}
.af-side-card.af-image-usage-hidden:nth-child(2),
.af-side-card.af-image-usage-hidden{
    background:linear-gradient(135deg,#fff7ef,#ffffff)!important;
}
.af-banner-content-mode.af-image-usage-hidden .af-hero-content,
.af-banner-content-mode.af-image-usage-hidden .af-banner-text-card{
    background:#fff;
    border:1px solid var(--af-line);
    border-radius:14px;
    padding:24px;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.af-hero-main.af-image-usage-hidden .af-hero-content{
    max-width:500px;
}
.af-side-card.af-image-usage-hidden{
    display:flex;
    align-items:center;
}
.af-side-card.af-image-usage-hidden .af-banner-text-card{
    width:100%;
    padding:20px;
}
.af-banner-content-mode.af-image-usage-card{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
    background:#fff!important;
}
.af-side-card.af-image-usage-card{
    grid-template-columns:120px 1fr;
    gap:18px;
    padding:18px!important;
}
.af-register-band.af-image-usage-card{
    grid-template-columns:220px 1fr auto;
}
.af-banner-card-image{
    width:100%;
    overflow:hidden;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid var(--af-line);
}
.af-hero-main .af-banner-card-image{
    height:230px;
}
.af-side-card .af-banner-card-image{
    height:110px;
}
.af-register-band .af-banner-card-image{
    height:160px;
}
.af-banner-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.af-image-usage-card .af-banner-text-card{
    position:relative;
    z-index:2;
}
@media(max-width:991px){
    .af-banner-content-mode.af-image-usage-card,
    .af-register-band.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
    .af-side-card.af-image-usage-card{
        grid-template-columns:110px 1fr!important;
    }
}
@media(max-width:575px){
    .af-side-card.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}

/* Phase 9.8 - Banner modes are independent per banner */
.af-hero-main.af-image-usage-background .af-hero-content,
.af-side-card.af-image-usage-background .af-banner-text-card,
.af-register-band.af-image-usage-background .af-banner-text-card{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
}

.af-side-card.af-image-usage-background{
    display:block!important;
}

.af-hero-main.af-image-usage-hidden{
    display:flex!important;
    align-items:center!important;
}
.af-hero-main.af-image-usage-hidden .af-hero-content{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:24px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

.af-side-card.af-image-usage-hidden .af-banner-text-card{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:20px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

.af-register-band.af-image-usage-hidden .af-banner-text-card{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:24px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

/* Card mode only affects the banner that has af-image-usage-card */
.af-hero-main.af-image-usage-card,
.af-side-card.af-image-usage-card,
.af-register-band.af-image-usage-card{
    background:#fff!important;
}

.af-hero-main.af-image-usage-card{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
}

.af-side-card.af-image-usage-card{
    display:grid!important;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
    padding:18px!important;
}

.af-register-band.af-image-usage-card{
    display:grid!important;
    grid-template-columns:220px 1fr auto;
    gap:24px;
    align-items:center;
}

.af-image-usage-card .af-banner-text-card{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
}

@media(max-width:991px){
    .af-hero-main.af-image-usage-card,
    .af-register-band.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}
@media(max-width:575px){
    .af-side-card.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}

/* Phase 10 - Price visibility */
.af-price-hidden{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--af-blue-soft);
    color:var(--af-blue-dark);
    font-weight:900;
    font-size:13px;
    margin:6px 0;
}
.af-login-price-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--af-orange-soft);
    color:var(--af-orange);
    font-weight:900;
    font-size:12px;
    text-decoration:none;
}
.af-login-price-link:hover{
    background:var(--af-orange);
    color:#fff;
}

/* Phase 11 - Customer approval messages */
.af-approval-notice{
    border-radius:16px;
    border:1px solid rgba(245,158,11,.35);
    background:#fff8e8;
    color:#7a4b00;
    padding:16px;
    font-weight:700;
}

/* Phase 13 - Product quantity rules */
.af-qty-rule-note{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:6px 0;
    padding:5px 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#c2410c;
    font-size:11px;
    font-weight:900;
}

/* Phase 14 - Offers & Discounts */
.af-offer-note{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:6px 0;
    padding:6px 10px;
    border-radius:999px;
    background:#ecfdf5;
    color:#047857;
    font-size:11px;
    font-weight:900;
}

/* Phase 17 - Customer Account Dashboard */
.account-nav{display:flex;flex-direction:column;gap:8px}
.account-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--af-ink);font-weight:900;background:#fff;border:1px solid var(--af-line)}
.account-nav a:hover,.account-nav a.active{background:var(--af-blue);color:#fff;border-color:var(--af-blue)}
.account-nav a.logout{color:#b91c1c}
.account-nav a.logout:hover{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.account-stat span{display:block;color:var(--af-muted);font-size:13px;font-weight:800}
.account-stat strong{display:block;font-size:24px;font-weight:900;margin-top:4px}
.account-hero{background:linear-gradient(135deg,rgba(103,183,228,.12),rgba(242,92,46,.08))}

/* Phase 18 - Wishlist & Quick Order */
.af-wishlist.active{background:#dc2626;color:#fff;border-color:#dc2626}
.quick-order-img{width:52px;height:52px;object-fit:contain;border:1px solid var(--af-line);border-radius:12px;background:#fff}
.quick-order-table th{white-space:nowrap}
.sticky-quick-order-bar{
    position:sticky;
    bottom:0;
    z-index:20;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px;
    margin-top:16px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--af-line);
    border-radius:16px;
    box-shadow:0 -12px 35px rgba(15,23,42,.10);
    backdrop-filter:blur(10px);
}
@media (max-width:768px){
    .sticky-quick-order-bar{display:grid;grid-template-columns:1fr}
    .quick-order-table{min-width:820px}
}

/* Phase 18.1 - Category image size + show all categories */
.af-category-grid{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:18px;
}
.af-category-card{
    min-height:150px;
    padding:24px 16px;
}
.af-category-icon{
    width:82px;
    height:82px;
    object-fit:contain;
    display:block;
}
.af-category-card span{
    font-size:15px;
    line-height:1.25;
}
@media(min-width:1200px){
    .af-category-grid{
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    }
    .af-category-card{
        min-height:160px;
    }
    .af-category-icon{
        width:92px;
        height:92px;
    }
}
@media(max-width:767px){
    .af-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }
    .af-category-card{
        min-height:150px;
        padding:20px 12px;
    }
    .af-category-icon{
        width:78px;
        height:78px;
    }
    .af-category-card span{
        font-size:14px;
    }
}

/* Phase 18.2 - Fixed responsive top banner layout
   Best image ratio for all three top banners: 16:9, e.g. 1600x900 or 1200x675.
   This keeps desktop and mobile stable without cutting important text when artwork follows safe margins.
*/
.af-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,2fr) minmax(300px,1fr) !important;
    gap:22px !important;
    align-items:stretch !important;
}

/* Desktop: one big left banner + two right banners stacked */
.af-hero-main.af-banner-image-only,
.af-side-card.af-banner-image-only{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:8px !important;
    background:#fff !important;
    border:1px solid var(--af-line) !important;
}

.af-side-offers{
    display:grid !important;
    grid-template-rows:1fr 1fr !important;
    gap:22px !important;
    height:100% !important;
}

.af-side-offers .af-side-card.af-banner-image-only{
    height:100% !important;
}

/* Fill the banner area cleanly. Use 16:9 artwork to avoid cropping. */
.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:#fff !important;
}

/* Content-mode banners should also keep a reliable height */
.af-hero-main:not(.af-banner-image-only){
    min-height:360px !important;
}
.af-side-card:not(.af-banner-image-only){
    min-height:calc((360px - 22px) / 2) !important;
}

/* Tablet: stack left + right section */
@media(max-width:991px){
    .af-hero-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }
    .af-side-offers{
        grid-template-columns:1fr 1fr !important;
        grid-template-rows:auto !important;
        gap:18px !important;
    }
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        aspect-ratio:16 / 9 !important;
    }
}

/* Mobile: all banners stacked, same width, clean image size */
@media(max-width:767px){
    .af-section:first-of-type{
        padding-top:16px !important;
    }
    .af-hero-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .af-side-offers{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        width:100% !important;
        aspect-ratio:16 / 9 !important;
        min-height:0 !important;
        border-radius:8px !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;
    }
}

/* Very small screens: reduce page side gaps */
@media(max-width:420px){
    .af-section .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }
    .af-hero-grid,
    .af-side-offers{
        gap:14px !important;
    }
}

/* Phase 19 - Smart related products on product page */
.af-related-products-section{
    padding-top:10px;
}
.af-related-scroller{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}
.af-related-item{
    min-width:0;
}
@media(max-width:1199px){
    .af-related-scroller{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media(max-width:991px){
    .af-related-scroller{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:767px){
    .af-related-scroller{
        display:flex;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding-bottom:10px;
        -webkit-overflow-scrolling:touch;
    }
    .af-related-item{
        flex:0 0 72%;
        scroll-snap-align:start;
    }
}
@media(max-width:420px){
    .af-related-item{
        flex-basis:82%;
    }
}

/* Phase 19.3 - Product page related products: 12 items / 4 per row */
.af-related-products-section{
    padding-top:16px;
    padding-bottom:42px;
}
.af-related-products-section .af-section-head{
    margin-bottom:20px;
}
.af-related-scroller{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
    scroll-snap-type:none !important;
}
.af-related-item{
    min-width:0 !important;
    flex:auto !important;
}
.af-related-item .af-product-card{
    border-radius:18px;
    box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.af-related-item .af-product-image{
    height:210px;
}
.af-related-item .af-product-image img{
    object-fit:contain;
}
@media(max-width:1199px){
    .af-related-scroller{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}
@media(max-width:767px){
    .af-related-scroller{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
        overflow:visible !important;
    }
    .af-related-item{
        flex:auto !important;
        scroll-snap-align:unset !important;
    }
    .af-related-item .af-product-card{
        border-radius:14px;
    }
    .af-related-item .af-product-image{
        height:150px;
    }
    .af-related-item .af-product-body{
        padding:12px;
    }
}
@media(max-width:380px){
    .af-related-scroller{
        gap:10px !important;
    }
    .af-related-item .af-product-image{
        height:135px;
    }
}

/* 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:1000 !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.3 - Force mobile homepage categories to 4 columns */
@media(max-width:767px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        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;
    }

    #categoryGrid .af-category-card{
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        flex:initial !important;
        flex-basis: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;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;
        gap:8px !important;
    }

    #categoryGrid .af-category-icon{
        width:58px !important;
        height:58px !important;
        object-fit:contain !important;
        flex:0 0 auto !important;
    }

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

@media(max-width:380px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    #categoryGrid .af-category-card{
        min-height:108px !important;
        padding:8px 4px !important;
        border-radius:16px !important;
    }

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

    #categoryGrid .af-category-card span{
        font-size:10.5px !important;
    }
}

/* Phase 20.4 - Clean mobile categories: no card, bigger images, nicer text */
@media(max-width:767px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px 10px !important;
        overflow:visible !important;
        padding:4px 0 2px !important;
        background:transparent !important;
    }

    #categoryGrid .af-category-card{
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        min-height:112px !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:9px !important;
    }

    #categoryGrid .af-category-card:hover{
        transform:none !important;
        box-shadow:none !important;
        background:transparent !important;
    }

    #categoryGrid .af-category-icon{
        width:72px !important;
        height:72px !important;
        object-fit:contain !important;
        display:block !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    #categoryGrid .af-category-card span{
        width:100% !important;
        min-height:32px !important;
        max-height:34px !important;
        padding:0 2px !important;
        font-size:12.5px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
        letter-spacing:0 !important;
        color:#111827 !important;
        text-align:center !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        word-break:normal !important;
    }

    .af-section-head h2{
        font-size:22px !important;
        line-height:1.1 !important;
        font-weight:900 !important;
        letter-spacing:-.4px !important;
        color:#111827 !important;
    }

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

    .af-view-link{
        font-size:17px !important;
        line-height:1.15 !important;
        font-weight:800 !important;
        color:#6b4eff !important;
    }
}

@media(max-width:380px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        gap:14px 8px !important;
    }

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

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

    #categoryGrid .af-category-card span{
        font-size:11.5px !important;
        line-height:1.2 !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.2 - Premium homepage category sizing */
#categoryGrid.af-category-grid,
.af-category-grid#categoryGrid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:22px !important;
}

#categoryGrid .af-category-card{
    min-height:190px !important;
    padding:24px 16px 20px !important;
    border-radius:24px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(103,183,228,.13), transparent 34%),
        linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%) !important;
    box-shadow:0 18px 45px rgba(15,23,42,.075) !important;
    gap:16px !important;
    position:relative !important;
    overflow:hidden !important;
}

#categoryGrid .af-category-card::after{
    content:"";
    position:absolute;
    inset:auto -35px -45px auto;
    width:110px;
    height:110px;
    border-radius:999px;
    background:rgba(242,92,46,.08);
    pointer-events:none;
}

#categoryGrid .af-category-card:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 26px 60px rgba(15,23,42,.13) !important;
    border-color:rgba(103,183,228,.38) !important;
}

#categoryGrid .af-category-icon{
    width:112px !important;
    height:112px !important;
    object-fit:contain !important;
    display:block !important;
    filter:drop-shadow(0 12px 18px rgba(15,23,42,.10)) !important;
    transition:transform .2s ease !important;
    z-index:1 !important;
}

#categoryGrid .af-category-card:hover .af-category-icon{
    transform:scale(1.07) !important;
}

#categoryGrid .af-category-card span{
    width:100% !important;
    min-height:42px !important;
    font-size:16px !important;
    line-height:1.28 !important;
    font-weight:900 !important;
    color:#0f172a !important;
    text-align:center !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    z-index:1 !important;
}

@media(max-width:1199px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

@media(max-width:767px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:18px 12px !important;
        padding:4px 0 8px !important;
    }

    #categoryGrid .af-category-card{
        min-height:150px !important;
        padding:14px 8px 12px !important;
        border-radius:22px !important;
        background:#fff !important;
        border:1px solid #e7edf4 !important;
        box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
        gap:10px !important;
    }

    #categoryGrid .af-category-card::after{
        width:78px !important;
        height:78px !important;
        right:-34px !important;
        bottom:-38px !important;
    }

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

    #categoryGrid .af-category-card span{
        min-height:36px !important;
        font-size:13px !important;
        line-height:1.22 !important;
        font-weight:850 !important;
    }
}

@media(max-width:390px){
    #categoryGrid.af-category-grid,
    .af-category-grid#categoryGrid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:14px 9px !important;
    }

    #categoryGrid .af-category-card{
        min-height:136px !important;
        padding:12px 6px 10px !important;
        border-radius:19px !important;
    }

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

    #categoryGrid .af-category-card span{
        font-size:12px !important;
    }
}


/* 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:850 !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.11 - Mobile full width + overflow hard fix
   Fixes iPhone/Safari right-side blank strip and top broken text.
========================================================== */
@media (max-width: 767px) {
    html,
    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: hidden !important;
        background: #f5f7fb !important;
    }

    body {
        position: relative !important;
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

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

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100% !important;
    }

    main,
    .af-section,
    .af-home-banners-section,
    .af-image-ads-section,
    .container,
    .container-fluid,
    .row,
    .af-hero-grid,
    .af-side-offers,
    .af-product-grid,
    .af-category-grid,
    #categoryGrid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

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

    .row {
        --bs-gutter-x: 0 !important;
    }

    .af-mobile-clean-header {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 14px 16px 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !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;
    }

    .af-mobile-clean-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 62px) !important;
    }

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

    .af-mobile-clean-menu {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        transform: none !important;
    }

    .af-mobile-clean-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 12px 0 0 !important;
        grid-template-columns: minmax(0, 1fr) 52px !important;
    }

    .af-mobile-clean-search input {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
    }

    .af-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .af-section-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 14px !important;
    }

    .af-section-head h2 {
        font-size: clamp(20px, 6vw, 28px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.7px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .af-view-link {
        flex: 0 0 auto !important;
        max-width: 48% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(13px, 3.8vw, 16px) !important;
    }

    #categoryGrid,
    .af-category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    #categoryGrid .af-category-card,
    .af-category-grid .af-category-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 22px !important;
    }

    .af-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .af-product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .af-app-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
    }

    .af-mobile-drawer-overlay {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

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

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

    #categoryGrid,
    .af-category-grid,
    .af-product-grid {
        gap: 12px !important;
    }
}