/* Zimbazon 2026 visual system — presentation only; backend contracts stay untouched. */
@font-face{font-family:"Inter Variable";src:url("../fonts/inter-latin-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Variable";src:url("../fonts/inter-latin-variable-italic.woff2") format("woff2");font-style:italic;font-weight:100 900;font-display:swap}
:root{
  --zz-navy-950:#04111f;--zz-navy-900:#071827;--zz-navy-850:#0a2133;
  --zz-gold:#f2b544;--zz-gold-strong:#d9951e;--zz-cream:#fbfaf6;
  --zz-emerald:#138a58;--zz-copper:#b96f3d;--zz-ink:#122033;
  --zz-muted:#667085;--zz-line:#e4e2da;--zz-card:#fff;
  --zz-blue:#0a6b91;--zz-blue-700:#075574;--blue900:#071827;
  --blue800:#0a2133;--blue700:#0a6b91;--blue600:#1288b6;--blue500:#21a0cf;
  --blue100:#e8f7fb;--bg:#f6f5f0;--text:#122033;--line:#e4e2da;
  --shadow:0 18px 52px rgba(4,17,31,.10);--zz-shadow:0 18px 52px rgba(4,17,31,.10);
  --radius:10px;--radius2:14px;--zz-radius:12px;--zz-max:1400px;
  --sans:"Inter Variable",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --zz-font:"Inter Variable",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{scrollbar-color:#b2c1c7 transparent;scrollbar-width:thin}
html{color-scheme:light;scroll-padding-top:100px}
body{background:linear-gradient(180deg,#f6f5f0 0,#fff 36%,#f6f5f0 100%);color:var(--zz-ink);font-family:var(--zz-font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:rgba(242,181,68,.35);color:#071827}
:focus-visible{outline:3px solid rgba(242,181,68,.65);outline-offset:3px}
button,.btn,a,input,select,textarea{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
button:active,.btn:active{transform:translateY(1px)}
input,select,textarea{accent-color:var(--zz-emerald)}
input:focus,select:focus,textarea:focus{border-color:rgba(19,138,88,.58);box-shadow:0 0 0 4px rgba(19,138,88,.10);outline:0}
img{max-width:100%}

/* Customer navigation */
.siteHeader,.topbar,body>.top,body>header{background:rgba(4,17,31,.97);border-color:rgba(255,255,255,.09);color:#fff;box-shadow:0 10px 32px rgba(4,17,31,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.headerMain,.toprow{max-width:var(--zz-max)}
.siteHeader .brand,.topbar .brand,body>.top .brand,body>header .brand{color:#fff}
.brand img,.logo{background:#138dca;border:1px solid rgba(255,255,255,.18);border-radius:12px;object-fit:contain;box-shadow:none}
.brandCopy strong{color:#fff}.brandCopy span,.brand small{color:#b8c8d3}
.siteHeader .btn,.topbar .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.siteHeader .btn:hover,.topbar .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(242,181,68,.45)}
.siteHeader .btn.primary,.topbar .btn.primary,.btn.primary,.searchBtn,.addBtn{background:linear-gradient(135deg,var(--zz-gold),var(--zz-gold-strong));color:#071827;border-color:transparent;box-shadow:0 10px 24px rgba(217,149,30,.20)}
.siteHeader .btn.primary:hover,.topbar .btn.primary:hover,.btn.primary:hover,.searchBtn:hover,.addBtn:hover{filter:brightness(1.04);box-shadow:0 14px 30px rgba(217,149,30,.28)}
.searchBox,.searchBar{border-color:rgba(255,255,255,.16);background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.20)}
.searchBar button{background:linear-gradient(135deg,var(--zz-gold),var(--zz-gold-strong));color:#071827}
.quickNav{background:#0a2133;border-color:rgba(255,255,255,.08);color:#d9e4ea}
.quickNav a,.quickNav button{color:#d9e4ea}.quickNav a:hover,.quickNav button:hover,.quickNav a.active{color:var(--zz-gold)}
.accountMenu,.dropMenu{background:#fff;color:var(--zz-ink);border-color:#dfe4e5}
.accountMenu a,.accountMenu button,.dropMenu a,.dropMenu button{color:var(--zz-ink);background:#fff}
.accountMenu a:hover,.accountMenu button:hover,.dropMenu a:hover,.dropMenu button:hover{background:#f7f4eb;color:#071827}
.badge{background:var(--zz-gold);color:#071827}

/* Home */
html[data-zz-page="home"] main{background:linear-gradient(180deg,#071827 0,#0a2133 27rem,#f6f5f0 27rem);padding-top:18px}
html[data-zz-page="home"] .zz-hero-module{border:1px solid rgba(242,181,68,.26);border-radius:22px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.30);background:#071827}
html[data-zz-page="home"] .hero-main-pane{background:radial-gradient(circle at 86% 30%,rgba(33,160,207,.26),transparent 32%),linear-gradient(135deg,#071827,#0c2b3f);color:#fff}
html[data-zz-page="home"] .hero-copy h1,html[data-zz-page="home"] .hero-copy h2{color:#fff;max-width:720px}
html[data-zz-page="home"] .hero-copy p,html[data-zz-page="home"] .greeting{color:#c7d4db}
html[data-zz-page="home"] .hero-copy h1 strong,html[data-zz-page="home"] .hero-copy h2 strong{color:var(--zz-gold)}
html[data-zz-page="home"] .promo-slant,html[data-zz-page="home"] .promo-pane{background:linear-gradient(145deg,#0d6549,#093929);color:#fff}
html[data-zz-page="home"] .hero-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
html[data-zz-page="home"] .content-shell{max-width:var(--zz-max);margin-inline:auto}
html[data-zz-page="home"] .zz-card,html[data-zz-page="home"] .aiPanel,html[data-zz-page="home"] .vendorPanel,html[data-zz-page="home"] .promoPanel,html[data-zz-page="home"] .productCard{border-color:#e5e2d8;border-radius:18px;box-shadow:0 14px 38px rgba(4,17,31,.07)}
html[data-zz-page="home"] .productCard{transform:translateZ(0)}
html[data-zz-page="home"] .productCard:hover{transform:translateY(-4px);border-color:rgba(242,181,68,.75);box-shadow:0 22px 50px rgba(4,17,31,.14)}
html[data-zz-page="home"] .productImage{background:#f2f1ec}
html[data-zz-page="home"] .productImage .fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#315448;background:linear-gradient(145deg,#eef2ef,#e3e9e5)}
html[data-zz-page="home"] .productImage .fallback b{font-size:24px;font-weight:650;letter-spacing:-.05em}html[data-zz-page="home"] .productImage .fallback small{font-size:9px;font-weight:550;text-transform:uppercase;letter-spacing:.08em}
html[data-zz-page="home"] .price{color:#071827}.ratingLine{color:var(--zz-gold-strong)}
html[data-zz-page="home"] .trustItem{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(12px)}
html[data-zz-page="home"] .trustItem span{color:#b8c8d3}.trustIcon{background:rgba(242,181,68,.16);color:var(--zz-gold)}
html[data-zz-page="home"] .aiPanel{background:linear-gradient(160deg,#071827,#0c2b3f);color:#fff;border-color:rgba(242,181,68,.3)}
html[data-zz-page="home"] .aiTitle h2{color:#fff}html[data-zz-page="home"] .aiTitle p{color:#b8c8d3}
html[data-zz-page="home"] .aiMsg.bot{background:rgba(255,255,255,.08);color:#e7eef1;border-color:rgba(255,255,255,.12)}
html[data-zz-page="home"] .aiMsg.user,html[data-zz-page="home"] .aiAsk button{background:var(--zz-emerald)}
html[data-zz-page="home"] footer{background:#04111f;color:#b8c8d3;border-color:rgba(255,255,255,.08)}

/* Customer transactional pages */
html[data-zz-page="product"] .wrap,html[data-zz-page="cart"] .wrap,html[data-zz-page="checkout"] .wrap,html[data-zz-page="orders"] .wrap{max-width:1440px;padding:22px 24px}
.card{border-color:#e2e4df;border-radius:18px;box-shadow:0 16px 44px rgba(4,17,31,.07)}
.cardHead,.head{background:linear-gradient(180deg,#fff,#fbfaf6);border-color:#ebe8df}
.cardHead h2,.head h1,.head h2,.pageTitle{color:#071827}
.crumbs{color:#7b8490}.crumbs a{color:var(--zz-emerald)}
.pill,.payPill,.status{border-color:rgba(19,138,88,.20);background:rgba(19,138,88,.08);color:#08643f}
html[data-zz-page="product"] .prodWrap{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:18px}
html[data-zz-page="product"] .gallery{grid-template-columns:96px 1fr}
html[data-zz-page="product"] .heroImg{min-height:540px;background:#f3f2ed;border-color:#e4e2da}
html[data-zz-page="product"] .heroImg img{background:#f3f2ed}
html[data-zz-page="product"] #buyCard{position:sticky;top:92px;border-color:rgba(242,181,68,.46)}
html[data-zz-page="product"] .price{font-size:34px;color:#071827}
html[data-zz-page="product"] .trustStrip{background:#071827;border-radius:16px;padding:12px;color:#fff}
html[data-zz-page="product"] .trustItem{background:transparent;border-color:rgba(255,255,255,.10)}
html[data-zz-page="product"] .infoBox{background:#f8f7f2;border-color:#e8e4da}
html[data-zz-page="cart"] .grid,html[data-zz-page="checkout"] .grid{grid-template-columns:minmax(0,1.65fr) minmax(350px,.75fr);gap:20px}
html[data-zz-page="cart"] .grid>.card:last-child,html[data-zz-page="checkout"] .grid>.card:last-child{position:sticky;top:94px;border-color:rgba(242,181,68,.42)}
html[data-zz-page="cart"] .safeStrip,html[data-zz-page="checkout"] .secureRow{background:#071827;color:#fff;border:1px solid rgba(242,181,68,.28);border-radius:17px}
html[data-zz-page="cart"] .safeItem,html[data-zz-page="checkout"] .secureItem{color:#fff;border-color:rgba(255,255,255,.12)}
html[data-zz-page="cart"] .safeIcon{background:rgba(242,181,68,.15);color:var(--zz-gold)}
html[data-zz-page="cart"] .item{padding:18px 4px}.thumb,.liImg{background:#f2f1ec;border-radius:14px}
html[data-zz-page="cart"] .sumTotal,html[data-zz-page="checkout"] .total{color:#071827;font-size:24px}
html[data-zz-page="checkout"] input,html[data-zz-page="checkout"] textarea,html[data-zz-page="checkout"] select{background:#fff;border-color:#dcded9;min-height:46px}
html[data-zz-page="checkout"] .method,html[data-zz-page="checkout"] .courierCard{border-color:#dedfd9;background:#fbfaf6;border-radius:15px}
html[data-zz-page="checkout"] .method:has(input:checked),html[data-zz-page="checkout"] .courierCard.selected,html[data-zz-page="checkout"] .courierCard.active{border-color:var(--zz-emerald);box-shadow:0 0 0 3px rgba(19,138,88,.10);background:#f3fbf7}
html[data-zz-page="orders"] .hero{background:linear-gradient(135deg,#071827,#0a3147);color:#fff;border:1px solid rgba(242,181,68,.25)}
html[data-zz-page="orders"] .orderTable{border-color:#e1e2dd;border-radius:16px;overflow:hidden}
html[data-zz-page="orders"] .orderHead{background:#f8f7f2}

/* Authentication, trust and payments */
html[data-zz-page="login"] body,html[data-zz-page="register"] body{background:radial-gradient(circle at 18% 18%,rgba(19,138,88,.24),transparent 28%),linear-gradient(145deg,#04111f,#0a2d42)}
html[data-zz-page="login"] .shell,html[data-zz-page="register"] .shell{min-height:100vh;max-width:1200px;margin:auto}
html[data-zz-page="login"] .hero,html[data-zz-page="register"] .hero{background:transparent;color:#fff}
html[data-zz-page="login"] .card,html[data-zz-page="register"] .card{border:1px solid rgba(242,181,68,.28);box-shadow:0 30px 80px rgba(0,0,0,.28)}
html[data-zz-page="login"] .pill,html[data-zz-page="register"] .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
html[data-zz-page="login"] .brand,html[data-zz-page="register"] .brand{color:#fff}
html[data-zz-page="login"] .logo,html[data-zz-page="register"] .logo{background:transparent url('../brand/zimbazon-logo-white-v1.png') center/contain no-repeat;width:112px;height:80px}
html[data-zz-page="forgot-password"] body,html[data-zz-page^="payment-"] body{background:radial-gradient(circle at 15% 10%,rgba(19,138,88,.13),transparent 30%),#f6f5f0}
html[data-zz-page="forgot-password"] .card,html[data-zz-page^="payment-"] .card{border-top:4px solid var(--zz-gold)}
html[data-zz-page="trust"] .hero{background:linear-gradient(135deg,#071827,#0a3948);color:#fff;border-radius:24px;border:1px solid rgba(242,181,68,.25);box-shadow:0 26px 70px rgba(4,17,31,.20)}
html[data-zz-page="trust"] .hero h1{color:#fff}
html[data-zz-page="trust"] #cards .kpi{border-top:3px solid var(--zz-gold)}
html[data-zz-page="client"] .hero{background:linear-gradient(135deg,#071827,#0a3948);color:#fff;border:1px solid rgba(242,181,68,.25);box-shadow:0 26px 70px rgba(4,17,31,.18)}
html[data-zz-page="client"] .hero h1{color:#fff}html[data-zz-page="client"] .hero p{color:#c7d4db}
html[data-zz-page="client"] .grid>.card{border-top:3px solid transparent}html[data-zz-page="client"] .grid>.card:hover{border-top-color:var(--zz-gold);transform:translateY(-2px)}

/* Vendor and courier portals */
html[data-zz-page="vendor"] body,html[data-zz-page="courier"] body{background:#f5f4ef}
html[data-zz-page="vendor"] aside,html[data-zz-page="courier"] aside{background:#04111f;color:#fff;border-color:rgba(255,255,255,.08);box-shadow:16px 0 40px rgba(4,17,31,.08)}
html[data-zz-page="vendor"] aside .brand,html[data-zz-page="courier"] aside .brand{color:#fff}
html[data-zz-page="vendor"] aside .logo{background:transparent url('../brand/zimbazon-logo-white-v1.png') center/contain no-repeat}
html[data-zz-page="vendor"] .nav a,html[data-zz-page="courier"] .nav button{color:#c9d5db}
html[data-zz-page="vendor"] .nav a:hover,html[data-zz-page="vendor"] .nav a.active,html[data-zz-page="courier"] .nav button:hover,html[data-zz-page="courier"] .nav button.active{background:rgba(242,181,68,.13);color:var(--zz-gold);box-shadow:inset 3px 0 0 var(--zz-gold)}
html[data-zz-page="vendor"] main,html[data-zz-page="courier"] main{padding:24px}
html[data-zz-page="vendor"] .kpi,html[data-zz-page="vendor"] .card,html[data-zz-page="courier"] .card{border-color:#e2e2dc;box-shadow:0 12px 36px rgba(4,17,31,.06)}
html[data-zz-page="vendor"] .kpi strong,html[data-zz-page="courier"] .stat b{color:#071827}
html[data-zz-page="courier"] .code{background:#071827;color:#d8e6ec;border-color:#13374e}