@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#07111f;--panel:#0c1a2b;--panel2:#102238;--line:#1b3047;--text:#f2f7ff;--muted:#91a4bb;--blue:#1e8fff;--cyan:#29d5f2;--green:#5be0b1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.top{height:82px;padding:0 max(calc((100vw - 1180px)/2),5%);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #17283c;background:#07111feF;position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;font:700 22px 'Space Grotesk';letter-spacing:-1px}.brand img{width:48px;height:48px;object-fit:cover;border-radius:50%}.brand span span{color:#36bfff}.brand small{display:block;font:10px 'DM Sans';color:#8da5c0;letter-spacing:.5px;margin-top:1px}.top nav{display:flex;gap:30px;color:#a9bbcf;font-size:13px}.top nav a:hover,footer a:hover{color:#4dc9ff}.actions{display:flex;gap:10px}.iconbtn,.cartbtn{border:1px solid #263c55;background:transparent;color:#e8f4ff;padding:10px 16px;border-radius:9px;cursor:pointer}.cartbtn{background:#147de0;border-color:#147de0}.cartbtn b{background:#fff;color:#126ac0;border-radius:20px;padding:2px 6px;margin-left:6px}.hero{max-width:1180px;margin:auto;padding:88px 0 68px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:560px}.eyebrow{font-size:10px;letter-spacing:2px;color:#43c9f6;font-weight:700}.eyebrow i,.live{display:inline-block;width:6px;height:6px;background:#48e1b2;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #48e1b2}.hero h1,.why h2,.cta h2{font:600 clamp(42px,5vw,66px)/1.05 'Space Grotesk';letter-spacing:-3px;margin:20px 0}.hero h1 em,.why h2 em{font-style:normal;background:linear-gradient(90deg,#2da7ff,#39e0e9);background-clip:text;color:transparent}.heroText>p,.why p{color:#9db0c6;line-height:1.8;max-width:490px;font-size:15px}.heroBtns{display:flex;gap:12px;margin-top:30px}.primary,.secondary{display:inline-flex;align-items:center;gap:20px;padding:14px 20px;border-radius:8px;font-size:13px;font-weight:700}.primary{background:linear-gradient(110deg,#167de6,#16b8e5);color:white;box-shadow:0 9px 28px #078be533}.secondary{border:1px solid #2b425c;color:#d5e5f6}.trust{display:flex;gap:18px;margin-top:40px;color:#8299b2;font-size:10px;flex-wrap:wrap}.heroArt{height:370px;display:grid;place-items:center;position:relative}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb1{width:300px;height:300px;background:radial-gradient(circle,#126cc455,transparent 70%);right:8%;top:0}.orb2{width:220px;height:220px;background:radial-gradient(circle,#14c6d633,transparent 70%);left:0;bottom:0}.heroCard{position:relative;width:min(420px,100%);padding:22px;border:1px solid #31516f;border-radius:18px;background:linear-gradient(145deg,#10243aee,#091625f5);box-shadow:0 35px 90px #0009,0 0 45px #148ce522;transform:rotate(-3deg)}.cardTop,.cardFoot{display:flex;justify-content:space-between;color:#92abc5;font-size:9px;letter-spacing:1.5px}.cardTop span:last-child{color:#42d3fa;font-size:17px}.tileGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.tile{height:112px;border-radius:12px;padding:16px;background:linear-gradient(140deg,#163451,#0d2034);border:1px solid #274763;display:flex;flex-direction:column;justify-content:space-between}.tile b{font-size:28px;color:#42c9f4}.tile span{font-size:9px;letter-spacing:1.5px;color:#b7cde2}.t2 b{color:#a18bff}.t3 b{color:#50ddb1}.t4 b{color:#ffc66e}.cardFoot{border-top:1px solid #223b53;padding-top:14px;letter-spacing:.3px}.stats{border-block:1px solid #1b3045;background:#0a1726;display:flex;justify-content:center;gap:9%;padding:25px 5%;flex-wrap:wrap}.stats div{display:flex;align-items:center;gap:12px}.stats b{font:700 21px 'Space Grotesk';color:#39c7f4}.stats span{font-size:11px;color:#91a5bb}.section{max-width:1180px;margin:auto;padding:90px 0}.sectionHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.sectionHead h2{font:600 34px 'Space Grotesk';letter-spacing:-1.5px;margin:10px 0 0}.sectionHead>p{color:#8fa5bc;font-size:12px;max-width:300px;line-height:1.6}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.categories button{position:relative;text-align:left;min-height:155px;padding:18px;border:1px solid #1c344c;background:linear-gradient(145deg,#102238,#0b1929);border-radius:12px;color:#fff;cursor:pointer}.categories button:hover,.product:hover{border-color:#278fd2;transform:translateY(-3px)}.categories button>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#153d5b;color:#4dcafa;font-size:20px;margin-bottom:18px}.categories b,.categories small{display:block}.categories b{font:600 14px 'Space Grotesk'}.categories small{font-size:10px;color:#8da3bb;margin-top:6px}.categories i{position:absolute;right:17px;top:18px;color:#4fc9f1;font-style:normal}.shop{padding-top:25px}.shopTools{display:flex;gap:8px}.shopTools input,.shopTools select,.drawer input,.drawer select,.drawer textarea{background:#0d1d30;border:1px solid #263d56;color:#e9f5ff;border-radius:8px;padding:11px 12px;outline:none}.shopTools input{width:220px}.shopTools select{width:130px}.productGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{background:linear-gradient(145deg,#102238,#0b1929);border:1px solid #203850;border-radius:13px;overflow:hidden;transition:.2s}.productVisual{height:150px;background:radial-gradient(circle at 50% 40%,#1a6c9a55,transparent 55%),linear-gradient(135deg,#132d48,#0a1727);display:grid;place-items:center;font-size:40px;color:#43c7f2;position:relative}.productVisual small{position:absolute;top:12px;left:12px;background:#153d55;color:#7fe4ff;padding:5px 8px;border-radius:5px;font-size:9px}.productInfo{padding:17px}.productInfo .cat{font-size:9px;color:#45c9f4;text-transform:uppercase;letter-spacing:1.4px}.productInfo h3{font:600 16px 'Space Grotesk';margin:9px 0}.productInfo p{font-size:11px;line-height:1.6;color:#8ea4bb;min-height:36px}.priceRow{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.price{font:700 18px 'Space Grotesk'}.add{border:0;border-radius:7px;background:#147edc;color:#fff;padding:9px 12px;font-size:11px;font-weight:700;cursor:pointer}.why{border-block:1px solid #1a3047;background:linear-gradient(100deg,#0b1929,#0b2032);padding:75px max(calc((100vw - 1180px)/2),5%);display:grid;grid-template-columns:1fr 1fr;gap:80px}.why h2{font-size:44px}.whyList>div{display:flex;gap:20px;padding:19px 0;border-bottom:1px solid #233a52}.whyList>div>b{font:600 13px 'Space Grotesk';color:#37c8f3}.whyList strong,.whyList small{display:block}.whyList strong{font:600 14px 'Space Grotesk'}.whyList small{color:#8da4bb;font-size:11px;margin-top:7px}.cta{max-width:1180px;margin:75px auto;padding:36px 42px;border:1px solid #255071;border-radius:16px;background:radial-gradient(circle at 80% 20%,#087eaf44,transparent 40%),linear-gradient(110deg,#102944,#0b1b2e);display:flex;align-items:center;justify-content:space-between}.cta h2{font-size:36px;margin-bottom:0}footer{border-top:1px solid #1b3045;padding:28px max(calc((100vw - 1180px)/2),5%);display:flex;align-items:center;justify-content:space-between;color:#8299b1;font-size:11px}.footbrand img{width:38px;height:38px}footer>div{display:flex;gap:20px}.overlay{position:fixed;inset:0;background:#0009;z-index:10;display:none;justify-content:flex-end}.overlay.open{display:flex}.drawer{height:100%;width:min(470px,100%);background:#091726;border-left:1px solid #29435c;padding:28px;overflow:auto;position:relative}.close{position:absolute;right:20px;top:14px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer}.drawer h2{font:600 25px 'Space Grotesk';margin:24px 0}.drawer label{display:block;font-size:11px;color:#9bb0c5;margin:13px 0 6px}.drawer input,.drawer textarea{width:100%;font:13px 'DM Sans'}.drawer .primary{border:0;cursor:pointer;width:100%;justify-content:center;margin-top:16px}.cartline{display:flex;justify-content:space-between;border-bottom:1px solid #20374e;padding:14px 0;font-size:12px}.muted{color:#8da4bb}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#143b50;border:1px solid #277e9d;color:#dff8ff;padding:12px 18px;border-radius:8px;font-size:12px;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.loading{color:#8ea5bc;padding:35px}.adminTable{width:100%;font-size:11px;border-collapse:collapse}.adminTable td,.adminTable th{padding:10px;border-bottom:1px solid #233a50;text-align:left}.adminTable select{padding:5px}
@media(max-width:900px){.hero,.section,.cta{margin-left:5%;margin-right:5%}.hero{padding-top:55px}.categories{grid-template-columns:repeat(3,1fr)}.why{gap:35px}.top nav{gap:14px}}
@media(max-width:650px){.top{height:68px;padding:0 4%}.top nav{display:none}.brand{font-size:19px}.brand img{width:40px;height:40px}.iconbtn{display:none}.hero{grid-template-columns:1fr;padding:55px 0 40px;gap:10px}.hero h1{font-size:49px}.heroArt{height:290px}.heroCard{max-width:370px}.stats{gap:18px;justify-content:space-around}.stats div{width:40%}.section{padding:65px 0}.sectionHead{display:block}.sectionHead>p{margin-top:14px}.categories{grid-template-columns:1fr 1fr}.categories button{min-height:135px}.productGrid{grid-template-columns:1fr 1fr}.shopTools{margin-top:18px}.shopTools input{width:60%}.shopTools select{flex:1;min-width:0}.why{grid-template-columns:1fr;padding:55px 5%;gap:25px}.cta{display:block;padding:28px}.cta .primary{margin-top:25px}.cta h2{font-size:32px}footer{padding:25px 5%;flex-wrap:wrap;gap:18px}footer p{order:3;width:100%}}
@media(max-width:420px){.productGrid{grid-template-columns:1fr}.categories{gap:8px}.categories button{padding:13px}.hero h1{font-size:43px}}

.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:8;display:flex;align-items:center;gap:9px;padding:12px 17px;border-radius:30px;background:#16a765;color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 28px #0008}.whatsapp-float:hover{background:#128c55;transform:translateY(-2px)}.whatsapp-float:first-letter{font-size:18px}

.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:8;display:none;align-items:center;gap:9px;padding:12px 17px;border-radius:30px;background:#16a765;color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 28px #0008}.whatsapp-float:hover{background:#128c55;transform:translateY(-2px)}.paymentChoice{border:1px solid #29435c;background:#0d1d30;border-radius:12px;padding:16px;margin:14px 0}.paymentChoice>b{font:600 15px 'Space Grotesk'}.paymentChoice p{font-size:11px;line-height:1.6}

/* TechBari v2 admin, account and image enhancements */
.productVisual{overflow:hidden}.productVisual img{width:100%;height:100%;object-fit:cover;display:block}.productGlyph{font-size:42px;color:#43c7f2}.adminStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 24px}.adminStats>div{background:#102238;border:1px solid #25425e;border-radius:10px;padding:12px}.adminStats small,.adminStats b{display:block}.adminStats small{font-size:10px;color:#8ea7bf}.adminStats b{font:700 18px 'Space Grotesk';margin-top:5px}.admin-section{border:1px solid #243d56;border-radius:10px;padding:12px;margin:12px 0}.admin-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.admin-section h4{margin:4px 0 12px}.account-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-top:1px solid #1e354c}.account-row input,.account-row select{min-width:0;width:100%;background:#0d1d30;border:1px solid #263d56;color:#e9f5ff;border-radius:7px;padding:9px;font-size:12px}.account-row .inline-check{display:flex;align-items:center;gap:7px;margin:0;font-size:11px}.account-row .inline-check input{width:auto}.small{padding:7px 10px;font-size:10px}.drawer .admin-section-head h4{margin:0}.adminProductList,.adminCustomerList{display:grid;gap:8px}.adminProductRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;border-bottom:1px solid #20374e;padding:8px 0}.adminProductRow>span{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 8px;align-items:center}.adminProductRow img{width:36px;height:36px;object-fit:cover;border-radius:6px;grid-row:span 2}.adminProductRow b{font-size:11px;overflow-wrap:anywhere}.adminProductRow small{font-size:9px;color:#8da4bb}.adminCustomerList>div{padding:8px 0;border-bottom:1px solid #20374e;font-size:11px}.adminCustomerList small{display:block;color:#8da4bb}.drawer .inline-check{display:flex;align-items:center;gap:8px}.drawer .inline-check input{width:auto}.drawer input[type=file]{padding:9px}.drawer h3{margin-top:26px;padding-top:12px;border-top:1px solid #20374e;font:600 16px 'Space Grotesk'}.drawer form>.secondary{margin-top:8px;width:100%;justify-content:center}.drawer .primary{cursor:pointer}.drawer button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:520px){.account-row{grid-template-columns:1fr}.adminProductRow{grid-template-columns:minmax(0,1fr) auto}.adminProductRow [data-delete-product]{grid-column:2}.adminProductRow>span{grid-row:span 2}.drawer{padding:22px 16px}}

/* Added in TechBari modified version: accessibility, FAQ, contact and back-to-top */
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;color:#07111f;padding:10px 14px;border-radius:8px;z-index:30}.skip-link:focus{left:12px}
.faq{display:grid;gap:12px}.faq details{border:1px solid #1c344c;background:linear-gradient(145deg,#102238,#0b1929);border-radius:12px;padding:16px 18px}.faq summary{cursor:pointer;font-weight:700}.faq p{color:#8ea4bb;line-height:1.7;font-size:13px}
.contactGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.contactGrid>div{border:1px solid #1c344c;background:linear-gradient(145deg,#102238,#0b1929);border-radius:12px;padding:18px}.contactGrid b{display:block;margin-bottom:8px}.contactGrid p{color:#d5e5f6;line-height:1.6}.contactGrid small{color:#8da3bb}
.toTop{position:fixed;right:20px;bottom:20px;z-index:9;width:46px;height:46px;border-radius:50%;border:1px solid #263c55;background:#147de0;color:#fff;font-size:20px;cursor:pointer;display:none;box-shadow:0 8px 28px #0008}.toTop.show{display:block}
footer>div{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:900px){.contactGrid{grid-template-columns:1fr}}

/* Admin product actions: distinct, readable action colors */
.adminProductRow{grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px}
.adminProductRow .archive-product-btn{background:#b7791f;border-color:#d69e2e;color:#fff;font-weight:700}
.adminProductRow .archive-product-btn:hover{background:#975a16}
.adminProductRow .permanent-delete-btn{background:#c62828;border-color:#ef5350;color:#fff;font-weight:700}
.adminProductRow .permanent-delete-btn:hover{background:#a61b1b}
.adminProductRow [data-edit-product]{background:#147de0;border-color:#147de0;color:#fff;font-weight:700}
@media(max-width:520px){.adminProductRow{grid-template-columns:minmax(0,1fr) auto auto}.adminProductRow [data-permanent-delete-product]{grid-column:3}.adminProductRow [data-delete-product]{grid-column:2}}

/* TechBari blue buttons fix 2026-11-02: all .secondary buttons were showing the browser default white background with light text, so they looked white and unreadable. Make every secondary button solid blue with white text, like the primary buttons. This also keeps Archive (brown) and Delete (red) product buttons, which have more specific rules above. */
.secondary{background:linear-gradient(110deg,#167de6,#16b8e5);background-color:#147de0;border-color:#147de0;color:#fff}
.secondary:hover{background:#0f6fc2;border-color:#0f6fc2;color:#fff}
.drawer .secondary{cursor:pointer}
/* Admin product names: products with no image were squeezed into the 36px image column. Force name/price into the wide column. */
.adminProductRow>span b,.adminProductRow>span small{grid-column:2;overflow-wrap:normal;word-break:normal}

/* Order Now button under each product card (2026-11-02) */
.orderNow{width:100%;justify-content:center;margin-top:10px;border:0;cursor:pointer}

/* 2026-11-02: Add to cart + Order Now side by side, and 4 buttons in archived rows */
.buyRow{display:flex;gap:8px;margin-top:10px}
.buyRow .add{flex:1;justify-content:center}
.buyRow .orderNow{flex:1;margin-top:0}
.adminProductRow.archivedRow{grid-template-columns:minmax(0,1fr) auto auto auto auto}