/* =========================================================
   CLICKHUB PUBLIC STOREFRONT UX
   Shared presentation layer for customer-facing pages.
   ========================================================= */
:root{--store-max:1240px;--store-radius:18px;--store-muted:#64748b;--store-border:#e5e7eb}
.site-main>.section{padding-top:52px;padding-bottom:52px}
.site-main>.section+.section{padding-top:34px}
.container{width:min(var(--store-max),calc(100% - 32px))}
.site-header{box-shadow:0 1px 0 rgba(15,23,42,.03)}
.header-inner{min-height:76px;gap:18px}
.brand{min-width:190px}
.brand-text small{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search{order:2;flex:1 1 520px;max-width:650px;min-width:220px;position:relative}
.site-search input{width:100%;height:46px;border:1px solid #dbe2ea;border-radius:13px;background:#f8fafc;padding:0 88px 0 42px;font-size:14px;outline:none;transition:.18s}
.site-search input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.09)}
.site-search button{position:absolute;right:5px;top:5px;height:36px;padding:0 15px;border:0;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}
.site-search-icon{position:absolute;z-index:2;left:15px;top:50%;transform:translateY(-50%);color:#64748b;font-size:20px}
.header-actions{order:3;gap:10px}
.main-nav{order:1;flex:0 0 auto}
.main-nav a{font-weight:700}
.flash-nav-link{color:#dc2626!important;background:#fff1f2;border-radius:9px;padding:8px 10px!important}
.home .hero{padding:52px 0 54px}
.home .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(300px,.75fr);gap:42px}
.home .hero-copy h1{font-size:clamp(38px,4.4vw,58px);line-height:1.02;margin-bottom:16px}
.home .hero-copy p{max-width:580px}
.hero-cta{gap:10px}
.home .hero-product-showcase{max-width:430px;width:100%;justify-self:end}
.home .hero-showcase-label{margin-bottom:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.section-head,.flash-sale-head{margin-bottom:22px}
.section-head h2,.flash-sale-head h2{font-size:clamp(22px,2.4vw,29px);line-height:1.15;margin:0}
.section-head p,.flash-sale-head p{margin-top:6px;color:var(--store-muted)}
.section-head .link-all,.flash-sale-head .btn{font-weight:800}
#categories .cat-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#categories .cat-chip{min-height:100px;padding:16px 14px;border-radius:var(--store-radius);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.045);white-space:normal}
#categories .cat-chip>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eff6ff;color:var(--primary);font-size:20px}
#categories .cat-chip .cat-count{color:#94a3b8;font-size:11px}
#categories .cat-chip:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.09)}
.home .flash-sale-section{background:#fff;padding-top:34px}
.home .flash-sale-section .container{overflow:hidden}
.home .flash-sale-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.home .flash-sale-head>div:first-child{min-width:0}
.flash-kicker{color:#dc2626;font-size:11px;font-weight:900;letter-spacing:.1em}
.home .flash-sale-grid{display:flex!important;overflow-x:auto;gap:16px;padding:4px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.home .flash-sale-grid::-webkit-scrollbar{height:6px}
.home .flash-sale-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.home .flash-product-card{flex:0 0 calc((100% - 48px)/4);min-width:245px;scroll-snap-align:start}
.home .flash-product-card .product-img-wrap{aspect-ratio:1/.9}
.home .flash-product-card .product-body{padding:14px}
.home .flash-product-card .product-actions{display:flex;gap:8px}
.home .flash-product-card .product-actions .btn:first-child{flex:1}
.home .flash-sale-badge{border-radius:999px;padding:6px 10px}
.home .flash-countdown{margin:9px 0 11px;border:1px solid #fecdd3;border-radius:999px;padding:7px 10px;background:#fff7f7;color:#be123c;text-align:center}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-card{border-radius:var(--store-radius);border-color:#e5e7eb;box-shadow:0 4px 16px rgba(15,23,42,.035)}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.10)}
.product-img-wrap{aspect-ratio:1/.92;padding:18px}
.product-body{padding:15px}
.product-name{line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price-row{margin-top:8px}
.product-card .product-actions{margin-top:auto}
.product-card .btn-sm{min-height:38px}
.flash-sale-page .flash-sale-page-head{padding:38px 0}
.flash-sale-page .flash-sale-page-grid{gap:18px}
.flash-sale-page .flash-product-card{border-radius:var(--store-radius)}
.store-trust-strip{border-top:1px solid var(--store-border);border-bottom:1px solid var(--store-border);background:#fff}
.store-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--store-border)}
.store-trust-item{background:#fff;padding:20px 16px;display:flex;gap:11px;align-items:center}
.store-trust-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:#eff6ff;color:var(--primary)}
.store-trust-item strong{display:block;font-size:13px}
.store-trust-item span{display:block;color:var(--store-muted);font-size:11px;margin-top:2px}
.mobile-bottom-nav{display:none}
@media (max-width:1100px){
 .brand{min-width:155px}.brand-text small{display:none}
 #categories .cat-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
 .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .home .flash-product-card{flex-basis:calc((100% - 32px)/3)}
}
@media (max-width:900px){
 .header-inner{flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
 .brand{order:1}.header-actions{order:2;margin-left:auto}.main-nav{order:4;width:100%}
 .site-search{order:3;flex:1 0 100%;max-width:none}
 .home .hero{padding:42px 0}.home .hero-inner{grid-template-columns:1fr}
 .home .hero-product-showcase{max-width:520px;justify-self:start}
 #categories .cat-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
 .store-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
 body{padding-bottom:68px}.container{width:min(100% - 24px,var(--store-max))}
 .site-main>.section{padding-top:38px;padding-bottom:38px}
 .announcement{font-size:11px;padding:7px 12px}
 .header-inner{gap:10px}.brand{min-width:0}.brand-text strong{font-size:15px}
 .header-actions .seller-link,.account-label,.account-caret,.guest-register{display:none!important}
 .cart-btn{width:42px;height:42px}.nav-toggle{width:40px;height:40px}
 .site-search input{height:44px;padding-left:40px}.site-search button{display:none}
 .home .hero{padding:34px 0 38px}.home .hero-copy h1{font-size:clamp(34px,10vw,46px)}
 .home .hero-copy p{font-size:14px}.home .hero-product-showcase{display:none}
 .hero-cta .btn{flex:1;text-align:center}
 .section-head,.flash-sale-head{align-items:flex-start;flex-direction:column;margin-bottom:17px}
 .section-head .link-all,.flash-sale-head .btn{align-self:flex-start}
 #categories .cat-chips{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:10px;padding:3px 2px 10px;scrollbar-width:none}
 #categories .cat-chips::-webkit-scrollbar{display:none}
 #categories .cat-chip{flex:0 0 125px;min-height:105px}
 .home .flash-sale-grid{margin-right:-12px;padding-right:18px}
 .home .flash-product-card{flex-basis:78vw;min-width:0}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .product-img-wrap{padding:12px}.product-body{padding:11px}.product-cat{font-size:10px}
 .product-name{font-size:13px}.product-price-row .price{font-size:14px}
 .product-card .btn-sm{min-height:36px;padding:0 10px}
 .store-trust-grid{grid-template-columns:1fr 1fr}.store-trust-item{padding:14px 10px}.store-trust-item span{font-size:10px}
 .whatsapp-fab{right:12px;bottom:78px}.chat-widget{right:12px;bottom:136px}
 .mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;height:64px;z-index:1100;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid #e5e7eb;box-shadow:0 -8px 24px rgba(15,23,42,.08);padding-bottom:env(safe-area-inset-bottom)}
 .mobile-bottom-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#64748b;font-size:19px;text-decoration:none}
 .mobile-bottom-item small{font-size:10px;font-weight:800}.mobile-bottom-item:hover,.mobile-bottom-item:focus,.mobile-bottom-deals{color:var(--primary)}
 .mobile-bottom-deals span:first-child{color:#dc2626}.mobile-cart-icon{font-size:18px}
 .mobile-bottom-item b{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;margin-left:2px;border-radius:99px;background:var(--primary);color:#fff;font-size:8px}
}
@media (max-width:390px){.product-grid{gap:9px}.product-body{padding:9px}.home .flash-product-card{flex-basis:82vw}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* =========================================================
   CLICKHUBTECH FULL MARKETPLACE STOREFRONT
   Dense, responsive large-store shopping system.
   ========================================================= */
:root{
    --store-max:1440px;
    --store-radius:10px;
    --store-muted:#64748b;
    --store-border:#e5e7eb;
    --store-gap:14px;
    --market-blue:#2563eb;
    --market-blue-dark:#1d4ed8;
    --market-bg:#f7f8fa;
    --market-card:#fff;
}

html{
    font-size:16px;
    text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:clamp(13px,calc(13px + .12vw),15px);
    line-height:1.45;
    background:var(--market-bg);
    color:#172033;
    font-optical-sizing:auto;
}

.container{
    width:min(var(--store-max),calc(100% - 32px));
}

/* Header/search */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    box-shadow:0 1px 0 rgba(15,23,42,.08);
}

.header-inner{
    min-height:72px;
}

.main-nav{
    gap:5px;
}

.main-nav>a{
    white-space:nowrap;
}

.main-nav .category-nav-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.category-nav{
    position:relative;
}

.category-nav-panel{
    position:absolute;
    left:0;
    top:calc(100% + 12px);
    width:min(780px,calc(100vw - 32px));
    max-height:70vh;
    overflow:auto;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 20px 45px rgba(15,23,42,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:.16s ease;
}

.category-nav:hover .category-nav-panel,
.category-nav:focus-within .category-nav-panel{
    opacity:1;
    visibility:visible;
    transform:none;
}

.category-nav-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.category-nav-group{
    min-width:0;
}

.category-nav-group>a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 6px;
    color:#172033;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
    border-radius:7px;
}

.category-nav-group>a:hover{
    background:#eff6ff;
    color:var(--market-blue);
}

.category-nav-sub{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:2px 0 0 30px;
}

.category-nav-sub a{
    padding:4px 6px;
    color:#64748b;
    font-size:11.5px;
    text-decoration:none;
    border-radius:6px;
}

.category-nav-sub a:hover{
    background:#f8fafc;
    color:var(--market-blue);
}

.category-nav-count{
    margin-left:auto;
    color:#94a3b8;
    font-size:9px;
    font-weight:700;
}

/* Marketplace content rhythm */
.site-main>.section{
    padding-top:38px;
    padding-bottom:38px;
}

.site-main>.section+.section{
    padding-top:26px;
}

.page-head{
    padding:24px 0 22px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
}

.page-head h1{
    font-size:clamp(24px,2.4vw,34px);
    letter-spacing:-.5px;
}

/* Product cards: compact but still touch-friendly */
.product-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:var(--store-gap);
    align-items:stretch;
}

.product-card{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--market-card);
    border:1px solid #e5e7eb;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(15,23,42,.045);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.product-card:hover{
    transform:translateY(-2px);
    border-color:#d8e1ee;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.product-img-wrap{
    aspect-ratio:1/1;
    padding:9px;
    background:#fff;
    overflow:hidden;
}

.product-img-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .2s ease;
}

.product-card:hover .product-img-wrap img{
    transform:scale(1.035);
}

.product-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:9px 10px 10px;
    min-width:0;
}

.product-cat{
    margin-bottom:4px;
    font-size:9px;
    line-height:1.2;
    color:#94a3b8;
    letter-spacing:.35px;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product-name{
    min-height:2.65em;
    margin-bottom:5px;
    font-size:clamp(11.5px,calc(11px + .17vw),14px);
    line-height:1.32;
    font-weight:650;
    color:#172033;
    text-decoration:none;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-price-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px;
}

.product-price-row .price{
    font-size:clamp(14px,calc(13px + .25vw),18px);
    font-weight:900;
    line-height:1.15;
    color:#111827;
    letter-spacing:-.2px;
}

.old-price{
    font-size:10px;
    color:#94a3b8;
    text-decoration:line-through;
}

.product-choice-summary{
    margin-top:5px;
    color:#64748b;
    font-size:9.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product-actions{
    display:flex;
    gap:6px;
    margin-top:auto;
    padding-top:8px;
}

.product-actions .btn{
    min-height:33px;
    padding:0 7px;
    border-radius:7px;
    font-size:9.5px;
    font-weight:850;
}

.product-actions .btn:first-child{
    flex:1;
}

.badge,
.flash-sale-badge{
    z-index:2;
    font-size:9px;
    padding:4px 7px;
    border-radius:6px;
}

/* Category directory */
.market-category-directory{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.market-category-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:13px;
    min-width:0;
}

.market-category-card-head{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:9px;
    min-width:0;
}

.market-category-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#eff6ff;
    color:var(--market-blue);
    font-size:18px;
}

.market-category-title{
    min-width:0;
    flex:1;
}

.market-category-title a{
    display:block;
    color:#172033;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.market-category-title small{
    display:block;
    margin-top:2px;
    color:#94a3b8;
    font-size:9px;
}

.market-subcategory-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px 8px;
    border-top:1px solid #f1f5f9;
    padding-top:8px;
}

.market-subcategory-list a{
    display:block;
    min-width:0;
    padding:4px 3px;
    color:#64748b;
    font-size:10.5px;
    line-height:1.25;
    text-decoration:none;
    border-radius:5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.market-subcategory-list a:hover{
    background:#eff6ff;
    color:var(--market-blue);
}

.market-category-more{
    display:inline-block;
    margin-top:7px;
    color:var(--market-blue);
    font-size:10px;
    font-weight:850;
    text-decoration:none;
}

/* Category page */
.category-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.category-filter-bar{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.category-filter-bar .form-control{
    height:38px;
    border-radius:7px;
    font-size:12px;
}

.category-browse-layout{
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.category-sidebar{
    position:sticky;
    top:88px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px;
}

.category-sidebar-title{
    padding:7px 8px 9px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#172033;
}

.category-sidebar a{
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px;
    border-radius:7px;
    color:#475569;
    font-size:11px;
    text-decoration:none;
}

.category-sidebar a:hover,
.category-sidebar a.active{
    background:#eff6ff;
    color:var(--market-blue);
    font-weight:800;
}

.category-sidebar .sidebar-sub{
    margin-left:15px;
    border-left:1px solid #e5e7eb;
    padding-left:5px;
}

.category-sidebar .sidebar-sub a{
    padding:6px;
    font-size:10px;
}

.category-results-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.category-results-head h2{
    margin:0;
    font-size:16px;
}

.category-results-head span{
    color:#94a3b8;
    font-size:10px;
}

/* Flash sale / horizontal shelves */
.home .flash-sale-grid{
    gap:12px;
}

.home .flash-product-card{
    flex:0 0 calc((100% - 60px)/6);
    min-width:185px;
}

.home .flash-product-card .product-img-wrap{
    aspect-ratio:1/1;
    padding:9px;
}

.home .flash-product-card .product-body{
    padding:9px 10px 10px;
}

.flash-sale-page .flash-sale-page-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:var(--store-gap);
}

.flash-sale-page .flash-product-card{
    border-radius:10px;
}

/* Product detail page */
.product-detail-layout{
    max-width:1400px;
}

.product-detail-layout .product-gallery,
.product-detail-layout .product-info{
    border-radius:10px;
}

.product-info .pd-name,
.product-detail-layout h1{
    font-size:clamp(24px,3vw,38px);
    line-height:1.1;
}

/* Store/vendor pages */
.vendor-shop-hero{
    min-height:250px;
}

.vendor-shop-summary{
    gap:12px;
}

.official-products-section .product-grid{
    margin-top:14px;
}

/* Footer */
.site-footer{
    background:#101827;
}

/* Responsive */
@media (min-width:1500px){
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        grid-template-columns:repeat(7,minmax(0,1fr));
    }
    .market-category-directory{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }
    .home .flash-product-card{
        flex-basis:calc((100% - 72px)/7);
    }
}

@media (max-width:1240px){
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }
    .market-category-directory{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .category-browse-layout{
        grid-template-columns:190px minmax(0,1fr);
    }
    .home .flash-product-card{
        flex-basis:calc((100% - 48px)/5);
    }
}

@media (max-width:1050px){
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .market-category-directory{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .category-browse-layout{
        grid-template-columns:180px minmax(0,1fr);
    }
    .category-nav-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .home .flash-product-card{
        flex-basis:calc((100% - 36px)/4);
    }
}

@media (max-width:900px){
    .header-inner{
        flex-wrap:wrap;
    }
    .category-nav{
        display:none;
    }
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .market-category-directory{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .category-browse-layout{
        display:block;
    }
    .category-sidebar{
        position:static;
        margin-bottom:14px;
    }
    .category-sidebar-inner{
        display:flex;
        gap:5px;
        overflow-x:auto;
        padding-bottom:3px;
    }
    .category-sidebar-title{
        display:none;
    }
    .category-sidebar a{
        flex:0 0 auto;
        white-space:nowrap;
        background:#f8fafc;
    }
    .category-sidebar .sidebar-sub{
        display:none;
    }
    .home .flash-product-card{
        flex-basis:calc((100% - 24px)/3);
    }
}

@media (max-width:640px){
    body{
        padding-bottom:68px;
    }
    .container{
        width:min(100% - 24px,var(--store-max));
    }
    .site-main>.section{
        padding-top:28px;
        padding-bottom:28px;
    }
    .page-head{
        padding:18px 0;
    }
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }
    .market-category-directory{
        display:flex;
        overflow-x:auto;
        gap:9px;
        padding-bottom:5px;
        scroll-snap-type:x proximity;
    }
    .market-category-card{
        flex:0 0 250px;
        scroll-snap-align:start;
    }
    .market-subcategory-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .category-filter-bar{
        width:100%;
    }
    .category-filter-bar form{
        width:100%;
    }
    .category-filter-bar .form-control{
        width:100%;
    }
    .category-results-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .product-img-wrap{
        padding:7px;
    }
    .product-body{
        padding:8px;
    }
    .product-name{
        font-size:12px;
        min-height:3.9em;
    }
    .product-price-row .price{
        font-size:15px;
    }
    .product-actions .btn{
        min-height:31px;
        font-size:8.8px;
        padding:0 5px;
    }
    .home .flash-product-card{
        flex-basis:46vw;
        min-width:0;
    }
}

@media (max-width:390px){
    .product-grid,
    .flash-sale-page .flash-sale-page-grid{
        gap:7px;
    }
    .product-name{
        font-size:11.5px;
    }
}

/* =========================================================
   PREMIUM MARKETPLACE HEADER / TOPBAR
   ========================================================= */
.site-header{
    background:#fff;
    border-bottom:1px solid #e7ebf0;
    box-shadow:0 2px 12px rgba(15,23,42,.045);
    position:sticky;
    top:0;
    z-index:1000;
}

.market-topbar{
    background:#0f172a;
    color:#cbd5e1;
    min-height:30px;
    font-size:10.5px;
}

.market-topbar-inner{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.market-topbar-left,
.market-topbar-right{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.market-topbar-left span:first-child{
    color:#fff;
    font-weight:700;
}

.topbar-sep{opacity:.4}

.market-topbar-right a{
    color:#cbd5e1;
    text-decoration:none;
    font-weight:650;
}

.market-topbar-right a:hover{color:#fff}

.site-header .header-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 20px;
    padding-top:10px;
    padding-bottom:0;
}

.site-header .brand{
    order:1;
    flex:0 0 205px;
    min-width:0;
}

.site-header .site-search{
    order:2;
    flex:1 1 620px;
    max-width:none;
    min-width:280px;
    margin:0;
}

.site-header .site-search input{
    height:48px;
    border-radius:8px;
    background:#f8fafc;
    border:1px solid #cfd8e3;
    padding-left:44px;
    padding-right:92px;
    font-size:13.5px;
}

.site-header .site-search input:focus{
    background:#fff;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

.site-header .site-search button{
    right:4px;
    top:4px;
    height:40px;
    min-width:82px;
    border-radius:6px;
    font-size:12px;
}

.site-header .header-actions{
    order:3;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:0;
}

.site-header .seller-link{
    display:none;
}

.site-header .account-link,
.site-header .cart-btn{
    min-height:42px;
    border:1px solid #e2e8f0;
    border-radius:7px;
    background:#fff;
}

.site-header .account-link{
    max-width:175px;
    padding:5px 9px;
}

.site-header .cart-btn{
    width:44px;
    position:relative;
}

.site-header .cart-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border:2px solid #fff;
    font-size:8px;
}

.site-header .main-nav{
    order:4;
    flex:0 0 100%;
    width:100%;
    min-height:43px;
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:0;
    border-top:1px solid #f0f2f5;
}

.site-header .main-nav > a,
.site-header .category-nav > .category-nav-link{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 13px;
    color:#334155;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    border-radius:0;
    position:relative;
}

.site-header .main-nav > a:hover,
.site-header .category-nav > .category-nav-link:hover{
    color:#2563eb;
    background:#f8fafc;
}

.site-header .primary-home-link{
    color:#2563eb!important;
}

.site-header .nav-shop-link::after,
.site-header .primary-home-link::after,
.site-header .category-nav-link::after{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    bottom:-1px;
    height:2px;
    background:#2563eb;
    transform:scaleX(0);
    transition:.15s ease;
}

.site-header .main-nav > a:hover::after,
.site-header .category-nav-link:hover::after{
    transform:scaleX(1);
}

.site-header .flash-nav-link{
    min-height:30px!important;
    margin-left:2px;
    padding:0 11px!important;
    border-radius:6px!important;
    background:#fff1f2!important;
    color:#dc2626!important;
}

.site-header .category-nav{
    position:relative;
    display:flex;
    align-items:center;
}

.site-header .category-nav-panel{
    top:calc(100% + 1px);
    left:0;
    width:min(920px,calc(100vw - 32px));
    max-height:72vh;
    padding:18px;
    border-radius:0 0 12px 12px;
    border-top:2px solid #2563eb;
}

.site-header .category-nav-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px 20px;
}

.site-header .category-nav-group > a{
    padding:7px 5px;
    font-size:12px;
}

.site-header .category-nav-sub{
    padding-left:27px;
}

.site-header .category-nav-sub a{
    font-size:10.5px;
}

/* Keep the marketplace header compact on medium desktop. */
@media (max-width:1050px){
    .site-header .brand{flex-basis:165px}
    .site-header .site-search{min-width:220px}
    .site-header .account-label{display:none}
    .site-header .account-link{padding:5px 7px}
    .site-header .main-nav > a,
    .site-header .category-nav > .category-nav-link{padding-left:10px;padding-right:10px}
}

@media (max-width:760px){
    .market-topbar{display:none}
    .site-header{position:sticky;top:0}
    .site-header .header-inner{
        min-height:0;
        padding-top:8px;
        padding-bottom:8px;
        gap:8px 10px;
    }
    .site-header .brand{
        flex:1 1 auto;
        order:1;
        max-width:calc(100% - 120px);
    }
    .site-header .header-actions{
        order:2;
        margin-left:auto;
    }
    .site-header .site-search{
        order:3;
        flex:0 0 100%;
        min-width:0;
    }
    .site-header .site-search input{
        height:43px;
        border-radius:7px;
        font-size:13px;
    }
    .site-header .site-search button{display:none}
    .site-header .main-nav{
        order:4;
        flex:0 0 100%;
        display:none;
        min-height:0;
        padding-top:5px;
        border-top:1px solid #eef2f7;
    }
    .site-header .main-nav.open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }
    .site-header .main-nav > a,
    .site-header .category-nav > .category-nav-link{
        min-height:40px;
        width:100%;
        justify-content:flex-start;
        border-radius:7px;
    }
    .site-header .category-nav{
        display:block;
    }
    .site-header .category-nav-panel{
        position:static;
        display:none;
        width:100%;
        max-height:55vh;
        border:0;
        border-top:1px solid #e5e7eb;
        border-radius:0;
        box-shadow:none;
        padding:8px;
        opacity:1;
        visibility:visible;
        transform:none;
    }
    .site-header .category-nav:focus-within .category-nav-panel,
    .site-header .category-nav:hover .category-nav-panel{
        display:block;
    }
    .site-header .category-nav-grid{grid-template-columns:1fr 1fr;gap:5px 8px}
    .site-header .seller-link,
    .site-header .account-label,
    .site-header .account-caret,
    .site-header .guest-register{display:none!important}
    .site-header .account-link{width:42px;height:42px;padding:4px;justify-content:center}
    .site-header .account-avatar{width:29px;height:29px}
    .site-header .cart-btn{width:42px;height:42px}
    .site-header .nav-toggle{display:inline-flex;width:42px;height:42px}
}

@media (max-width:420px){
    .site-header .brand-text strong{font-size:14px}
    .site-header .brand-text small{display:none}
    .site-header .brand-logo{max-height:38px}
    .site-header .header-actions{gap:5px}
    .site-header .category-nav-grid{grid-template-columns:1fr}
}


/* =========================================================
   FINAL DEVICE + LIVE CHAT RESPONSIVE HARDENING
   ========================================================= */
.chat-widget{
    right:22px;
    bottom:92px;
    z-index:1200;
}

.chat-window{
    width:min(390px,calc(100vw - 32px));
    height:min(600px,calc(100dvh - 150px));
    max-height:calc(100dvh - 150px);
}

.chat-window-body{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.chat-compose{
    padding-bottom:max(12px,env(safe-area-inset-bottom));
}

.chat-compose textarea{
    min-width:0;
}

.chat-quick-actions{
    max-height:170px;
    overflow:auto;
    overscroll-behavior:contain;
}

.chat-quick-btn{
    min-height:34px;
}

@media (max-width:900px){
    .chat-widget{
        right:16px;
    }
}

@media (max-width:760px){
    body{
        padding-bottom:calc(68px + env(safe-area-inset-bottom));
    }

    .site-header .nav-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        flex:0 0 42px;
        border:1px solid #e2e8f0;
        border-radius:8px;
        background:#fff;
        color:#172033;
    }

    .site-header .brand-logo{
        max-width:min(180px,100%);
        max-height:40px;
        object-fit:contain;
    }

    .site-header .header-actions{
        gap:5px;
    }

    .site-header .account-link,
    .site-header .cart-btn{
        min-height:40px;
    }

    .site-header .cart-btn{
        width:42px;
    }

    .site-header .site-search{
        margin-top:1px;
    }

    .site-header .main-nav.open{
        max-height:calc(100dvh - 155px);
        overflow:auto;
        overscroll-behavior:contain;
        padding-bottom:8px;
    }

    .site-header .category-nav-panel{
        max-height:48dvh;
        overflow:auto;
    }

    .site-header .category-nav-grid{
        grid-template-columns:1fr;
        gap:6px;
    }

    .chat-widget{
        right:12px;
        bottom:calc(76px + env(safe-area-inset-bottom));
    }

    .chat-fab{
        width:54px;
        height:54px;
        font-size:22px;
    }

    .chat-window{
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(72px + env(safe-area-inset-bottom));
        width:auto;
        height:min(72dvh,600px);
        max-height:calc(100dvh - 92px - env(safe-area-inset-bottom));
        border-radius:16px;
    }

    .chat-window-head{
        padding:12px 13px;
    }

    .chat-head-text strong{
        font-size:13.5px;
    }

    .chat-head-text small{
        font-size:10.5px;
    }

    .chat-window-body{
        padding:12px;
    }

    .chat-welcome p{
        font-size:13px;
    }

    .chat-intro input,
    .chat-compose textarea{
        font-size:16px; /* prevents iOS Safari auto-zoom */
    }

    .chat-bubble{
        max-width:88%;
        font-size:13px;
    }

    .chat-compose{
        padding:9px;
    }

    .chat-send{
        width:44px;
        height:44px;
    }

    .whatsapp-fab{
        bottom:calc(76px + env(safe-area-inset-bottom));
    }
}

@media (max-width:420px){
    .chat-window{
        left:6px;
        right:6px;
        bottom:calc(68px + env(safe-area-inset-bottom));
        height:min(74dvh,580px);
        border-radius:14px;
    }

    .chat-quick-actions{
        max-height:145px;
    }

    .chat-quick-btn{
        font-size:10.5px;
        padding:6px 9px;
    }
}

@media (max-width:360px){
    .site-header .brand-text small{
        display:none;
    }

    .site-header .brand{
        max-width:calc(100% - 98px);
    }

    .chat-window{
        left:4px;
        right:4px;
    }
}


/* =========================================================
   PREMIUM TOPBAR + HEADER REFINEMENT
   Shared by every public page via includes/header.php.
   ========================================================= */
.market-topbar{
    background:linear-gradient(90deg,#0b1220 0%,#0f172a 48%,#13213b 100%);
    color:#cbd5e1;
    min-height:38px;
    font-size:12px;
    border-bottom:1px solid rgba(148,163,184,.18);
    position:relative;
    z-index:2;
}

.market-topbar .market-topbar-inner{
    min-height:38px;
}

.market-topbar .market-topbar-left{
    gap:18px;
}

.market-topbar .market-topbar-right{
    gap:6px;
}

/* Trust items (delivery / secure / returns) */
.market-topbar .topbar-item{
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    color:#cbd5e1;
    font-weight:650;
    line-height:1.2;
}

.market-topbar .topbar-item-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:21px;
    height:21px;
    border-radius:7px;
    background:rgba(56,189,248,.16);
    color:#7dd3fc;
    line-height:0;
}

.market-topbar .topbar-item-label{
    line-height:1.2;
}

/* Utility links (phone / help / sell) */
.market-topbar .topbar-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 11px;
    margin:-5px -4px;
    border-radius:8px;
    color:#cbd5e1;
    font-weight:700;
    font-size:12px;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .16s ease,color .16s ease;
}

.market-topbar .topbar-link:hover{
    color:#fff;
    background:rgba(148,163,184,.16);
}

.market-topbar .topbar-link-phone .topbar-item-ico{
    background:rgba(34,197,94,.18);
    color:#86efac;
}

.market-topbar .topbar-link-phone .topbar-item-label{
    font-variant-numeric:tabular-nums;
    letter-spacing:.2px;
}

.market-topbar .topbar-link-cta{
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    font-weight:800;
    padding:6px 13px;
    margin:-6px -6px;
    box-shadow:0 4px 12px rgba(37,99,235,.32);
}

.market-topbar .topbar-link-cta:hover{
    background:linear-gradient(135deg,#1d4ed8,#4338ca);
    color:#fff;
}

.market-topbar .topbar-link-arrow{
    transition:transform .16s ease;
}

.market-topbar .topbar-link-cta:hover .topbar-link-arrow{
    transform:translateX(3px);
}

/* Sticky header elevation on scroll (wired by app.js) */
.site-header.is-scrolled{
    box-shadow:0 6px 24px rgba(15,23,42,.12);
}

.site-header.is-scrolled .market-topbar{
    display:none;
}

/* Brand polish */
.site-header .brand{
    text-decoration:none;
    border-radius:10px;
}

.site-header .brand-text strong{
    background:linear-gradient(120deg,#0f172a,#1e3a8a);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* Active nav state (wired by app.js) */
.site-header .main-nav > a.is-active,
.site-header .category-nav > .category-nav-link.is-active{
    color:#2563eb;
}

.site-header .main-nav > a.is-active::after,
.site-header .category-nav-link.is-active::after{
    transform:scaleX(1);
}

/* Keep in-page anchors clear of the sticky header */
.site-header{
    scroll-margin-top:90px;
}

html{
    scroll-padding-top:90px;
}

@media (max-width:900px){
    .market-topbar .topbar-item-trust:nth-of-type(n+3){
        display:none;
    }
}

@media (max-width:760px){
    .market-topbar{display:none}
}


/* =========================================================
   STOREFRONT CONSISTENCY PASS — 2026
   Final shared rules for desktop, tablet and mobile.
   ========================================================= */
:root{
    --store-blue:#2563eb;
    --store-blue-dark:#1d4ed8;
    --store-ink:#0f172a;
    --store-muted:#64748b;
    --store-border:#e2e8f0;
}

.skip-link{
    position:fixed;
    left:16px;
    top:12px;
    z-index:3000;
    transform:translateY(-180%);
    padding:10px 14px;
    border-radius:10px;
    background:#0f172a;
    color:#fff;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(15,23,42,.22);
    transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(37,99,235,.35);outline-offset:2px}

.site-header{isolation:isolate}
.site-header .header-inner{max-width:1440px;padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
.site-header .brand{gap:10px;align-items:center;min-width:0}
.site-header .brand-logo{width:auto;max-width:180px;max-height:48px;object-fit:contain}
.site-header .brand-text{min-width:0}
.site-header .brand-text strong{font-size:clamp(15px,1.25vw,18px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header .brand-text small{display:block;margin-top:3px;color:#64748b;font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.market-topbar{min-height:36px}
.market-topbar .market-topbar-inner{min-height:36px;padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
.market-topbar .market-topbar-left,.market-topbar .market-topbar-right{gap:10px}
.market-topbar .topbar-link-cta{margin:0;padding:6px 12px}

.site-header .site-search{min-width:0}
.site-header .site-search input{height:46px;border-radius:12px;background:#f8fafc}
.site-header .site-search button{border-radius:9px}
.site-header .site-search:focus-within{filter:drop-shadow(0 4px 12px rgba(37,99,235,.08))}

.site-header .header-actions{gap:8px}
.site-header .cart-btn,.site-header .account-link,.site-header .nav-toggle{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.site-header .cart-btn:hover,.site-header .account-link:hover,.site-header .nav-toggle:hover{background:#f8fafc;border-color:#cbd5e1;box-shadow:0 5px 14px rgba(15,23,42,.07);transform:translateY(-1px)}
.site-header .cart-btn:focus-visible,.site-header .account-link:focus-visible,.site-header .nav-toggle:focus-visible,.site-header .main-nav a:focus-visible,.site-header .brand:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}

.site-header .account-menu{min-width:270px;border:1px solid #e2e8f0;box-shadow:0 18px 50px rgba(15,23,42,.14);border-radius:14px;overflow:hidden}
.site-header .account-menu-item{min-height:42px}
.site-header .account-menu-item:hover{background:#f8fafc}
.site-header .account-menu-ico{width:24px;text-align:center}

.site-header .main-nav{scrollbar-width:none}
.site-header .main-nav::-webkit-scrollbar{display:none}
.site-header .category-nav-panel{box-shadow:0 18px 45px rgba(15,23,42,.14)}
.site-header .category-nav-group > a{border-radius:10px}
.site-header .category-nav-group > a:hover{background:#f8fafc}

/* Give every public page a predictable reading rhythm. */
.site-main>.section:first-child,.site-main>.page-head:first-child{margin-top:0}
.page-head{border-bottom:1px solid rgba(226,232,240,.8)}
.section{scroll-margin-top:105px}

/* Product cards: same height, predictable actions and calmer density. */
.product-card{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.product-card .product-body{display:flex;flex:1;flex-direction:column}
.product-card .product-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em}
.product-card .product-actions{margin-top:auto}
.product-card .product-img-wrap{background:#fff}
.product-card .product-img-wrap img{object-fit:contain}

/* Consistent focus states throughout the storefront. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}

/* Avoid fixed mobile navigation covering content or action buttons. */
@media (max-width:760px){
    body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
    .site-header .header-inner{padding:8px 14px 10px}
    .site-header .brand{max-width:calc(100% - 112px)}
    .site-header .brand-text strong{font-size:15px}
    .site-header .site-search{width:100%;flex-basis:100%;order:9}
    .site-header .main-nav{order:10}
    .mobile-bottom-nav{height:68px;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
    .mobile-bottom-item{min-width:0}
    .mobile-bottom-item small{white-space:nowrap}
    .whatsapp-fab{bottom:calc(82px + env(safe-area-inset-bottom))}
}

@media (max-width:520px){
    .site-header .brand-text small{display:none}
    .site-header .header-inner{padding-left:10px;padding-right:10px}
    .site-header .site-search input{height:43px;font-size:16px}
    .site-header .main-nav{border-radius:12px}
    .section{padding-top:30px;padding-bottom:30px}
    .product-grid,.flash-sale-grid{gap:10px}
}

@media (min-width:1101px){
    .site-header .header-inner{grid-template-columns:minmax(150px,205px) minmax(380px,auto) minmax(240px,1fr) auto;column-gap:clamp(12px,1.4vw,22px)}
}

@media (prefers-reduced-motion:reduce){
    .skip-link,.site-header .cart-btn,.site-header .account-link,.site-header .nav-toggle{transition:none}
}