/* =============================================================
   TechHaven Kenya — Stylesheet
   Palette: Coffee Brown + Warm Gold + Cream, with a Teal accent
   ============================================================= */

:root{
  --brown-darkest:#2A1810;
  --brown-dark:#3E2723;
  --brown:#6F4E37;
  --brown-light:#A9746E;
  --brown-soft:#C8A488;
  --cream:#FFF8F0;
  --cream-dark:#F3E5D8;
  --gold:#D4A94C;
  --gold-light:#F1D48C;
  --terracotta:#C1502E;
  --teal:#2F6F62;
  --teal-light:#3F9482;
  --text-dark:#2E1D1A;
  --text-mid:#5C4A42;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(62,39,35,.12);
  --shadow-lg:0 20px 45px rgba(62,39,35,.20);
  --radius:16px;
  --radius-sm:10px;
  --font-head:'Poppins',sans-serif;
  --font-body:'Manrope',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--cream);
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--brown-darkest);}
button, .btn{font-family:var(--font-body);cursor:pointer;border:none;}

/* ---------------- Topbar ---------------- */
.topbar{background:var(--brown-darkest);color:var(--gold-light);font-size:.8rem;padding:8px 0;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.topbar-inner span{display:flex;align-items:center;gap:6px;}
.topbar-inner svg{width:14px;height:14px;}

/* ---------------- Navbar ---------------- */
.navbar{background:linear-gradient(135deg,var(--brown-dark),var(--brown));position:sticky;top:0;z-index:50;box-shadow:var(--shadow);}
.navbar-inner{display:flex;align-items:center;gap:24px;padding:16px 24px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{background:var(--gold);color:var(--brown-darkest);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);box-shadow:var(--shadow);}
.brand-mark svg{width:24px;height:24px;}
.brand-text{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--cream);display:flex;flex-direction:column;line-height:1;}
.brand-text span{color:var(--gold-light);}
.brand-text small{font-family:var(--font-body);font-weight:600;letter-spacing:3px;font-size:.55rem;color:var(--brown-soft);margin-top:3px;}

.nav-search{flex:1;display:flex;min-width:220px;max-width:520px;background:var(--cream);border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--gold);}
.nav-search input{flex:1;border:none;background:transparent;padding:11px 18px;font-size:.9rem;color:var(--text-dark);}
.nav-search input:focus{outline:none;}
.nav-search button{background:var(--gold);color:var(--brown-darkest);font-weight:700;padding:0 20px;border-radius:999px;font-size:.85rem;}

.cart-pill{display:flex;align-items:center;gap:8px;background:var(--terracotta);color:var(--cream);padding:10px 18px;border-radius:999px;font-weight:600;position:relative;transition:transform .2s;}
.cart-pill:hover{transform:translateY(-2px);}
.cart-pill svg{width:20px;height:20px;}
.cart-badge{background:var(--gold);color:var(--brown-darkest);border-radius:999px;min-width:20px;height:20px;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:800;padding:0 5px;}

/* ---------------- Hero ---------------- */
.hero{
  background:radial-gradient(circle at 20% 20%, rgba(212,169,76,.25), transparent 45%),
             linear-gradient(120deg,var(--brown-darkest),var(--brown-dark) 60%, var(--brown));
  color:var(--cream);
  padding:70px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-80px;bottom:-120px;width:340px;height:340px;
  background:var(--gold);opacity:.15;border-radius:50%;
}
.hero-inner{display:flex;align-items:center;gap:40px;flex-wrap:wrap;position:relative;z-index:1;}
.hero-copy{flex:1;min-width:280px;}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(212,169,76,.18);color:var(--gold-light);padding:6px 14px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:1px;margin-bottom:18px;}
.hero-copy h1{font-size:2.6rem;line-height:1.15;margin-bottom:16px;color:var(--cream);}
.hero-copy h1 span{color:var(--gold-light);}
.hero-copy p{color:var(--brown-soft);max-width:480px;margin-bottom:26px;font-size:1.02rem;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:var(--gold);color:var(--brown-darkest);padding:14px 30px;border-radius:999px;font-weight:700;box-shadow:0 12px 24px rgba(212,169,76,.35);transition:.25s;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(212,169,76,.45);}
.btn-ghost{border:2px solid var(--brown-soft);color:var(--cream);padding:12px 28px;border-radius:999px;font-weight:600;transition:.25s;}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light);}

.hero-badges{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;}
.hero-badges div{display:flex;align-items:center;gap:10px;color:var(--brown-soft);font-size:.85rem;}
.hero-badges svg{width:20px;height:20px;color:var(--gold-light);}

.hero-visual{flex:0 0 300px;display:flex;justify-content:center;align-items:center;}
.hero-orb{width:280px;height:280px;border-radius:50%;background:linear-gradient(155deg,var(--gold-light),var(--gold) 60%,var(--terracotta));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);position:relative;animation:float 5s ease-in-out infinite;}
.hero-orb svg{width:120px;height:120px;color:var(--brown-darkest);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ---------------- Category strip ---------------- */
.cat-strip{padding:40px 0 10px;}
.cat-strip h2{font-size:1.3rem;margin-bottom:20px;}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
.cat-card{background:var(--white);border-radius:var(--radius-sm);padding:20px 14px;text-align:center;box-shadow:var(--shadow);transition:.25s;border:2px solid transparent;}
.cat-card:hover{transform:translateY(-5px);border-color:var(--gold);}
.cat-card.active{border-color:var(--terracotta);background:var(--cream-dark);}
.cat-card .icon-wrap{width:52px;height:52px;margin:0 auto 12px;background:var(--brown);color:var(--gold-light);border-radius:14px;display:flex;align-items:center;justify-content:center;}
.cat-card .icon-wrap svg{width:26px;height:26px;}
.cat-card span{font-size:.8rem;font-weight:700;color:var(--brown-dark);}

/* ---------------- Products ---------------- */
.section{padding:48px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:10px;}
.section-head h2{font-size:1.6rem;}
.section-head p{color:var(--text-mid);font-size:.9rem;}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;}
.product-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:flex;flex-direction:column;position:relative;}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.product-thumb{background:linear-gradient(160deg,var(--cream-dark),var(--brown-soft));height:150px;display:flex;align-items:center;justify-content:center;position:relative;}
.product-thumb svg{width:64px;height:64px;color:var(--brown-darkest);opacity:.85;}
.badge-featured{position:absolute;top:12px;left:12px;background:var(--terracotta);color:#fff;font-size:.65rem;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.5px;}
.badge-software{position:absolute;top:12px;right:12px;background:var(--teal);color:#fff;font-size:.65rem;font-weight:800;padding:4px 10px;border-radius:999px;}
.product-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--teal);font-weight:700;}
.product-body h3{font-size:1rem;line-height:1.3;color:var(--brown-darkest);}
.product-body p.desc{font-size:.8rem;color:var(--text-mid);flex:1;}
.product-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.price{font-weight:800;color:var(--brown-dark);font-size:1.05rem;font-family:var(--font-head);}
.add-btn{background:var(--brown);color:var(--gold-light);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s;}
.add-btn:hover{background:var(--terracotta);color:#fff;transform:scale(1.08);}
.add-btn svg{width:18px;height:18px;}
.stock-low{font-size:.7rem;color:var(--terracotta);font-weight:700;}

/* ---------------- Trust strip ---------------- */
.trust-strip{background:var(--brown-dark);color:var(--cream);padding:32px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;text-align:center;}
.trust-grid div{display:flex;flex-direction:column;align-items:center;gap:8px;}
.trust-grid svg{width:28px;height:28px;color:var(--gold-light);}
.trust-grid strong{font-family:var(--font-head);}
.trust-grid span{font-size:.8rem;color:var(--brown-soft);}

/* ---------------- Cart page ---------------- */
.cart-layout{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:flex-start;}
@media(max-width:860px){.cart-layout{grid-template-columns:1fr;}}
.cart-line{background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px;display:flex;gap:16px;align-items:center;margin-bottom:14px;}
.cart-line .thumb{width:64px;height:64px;background:var(--cream-dark);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cart-line .thumb svg{width:32px;height:32px;color:var(--brown);}
.cart-line .info{flex:1;}
.cart-line h4{font-size:.95rem;}
.cart-line .unit-price{font-size:.8rem;color:var(--text-mid);}
.qty-control{display:flex;align-items:center;gap:8px;background:var(--cream-dark);border-radius:999px;padding:4px;}
.qty-control button{width:26px;height:26px;border-radius:50%;background:var(--brown);color:#fff;font-weight:700;}
.qty-control span{min-width:20px;text-align:center;font-weight:700;}
.remove-link{color:var(--terracotta);font-size:.75rem;font-weight:700;margin-left:14px;}
.line-total{font-weight:800;color:var(--brown-dark);min-width:90px;text-align:right;}

.summary-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;position:sticky;top:100px;}
.summary-card h3{margin-bottom:16px;}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem;color:var(--text-mid);}
.summary-row.total{border-top:2px dashed var(--cream-dark);margin-top:10px;padding-top:14px;font-size:1.1rem;font-weight:800;color:var(--brown-darkest);}
.btn-checkout{display:block;width:100%;text-align:center;background:var(--terracotta);color:#fff;padding:15px;border-radius:999px;font-weight:800;margin-top:18px;transition:.25s;}
.btn-checkout:hover{background:var(--brown-dark);}
.empty-cart{text-align:center;padding:80px 20px;}
.empty-cart svg{width:70px;height:70px;color:var(--brown-soft);margin:0 auto 16px;}

/* ---------------- Checkout ---------------- */
.checkout-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:flex-start;}
@media(max-width:860px){.checkout-layout{grid-template-columns:1fr;}}
.form-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;}
.form-card h3{margin-bottom:6px;}
.form-card .hint{font-size:.82rem;color:var(--text-mid);margin-bottom:20px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.82rem;font-weight:700;color:var(--brown-dark);margin-bottom:6px;}
.form-group input, .form-group textarea{width:100%;padding:12px 14px;border-radius:10px;border:2px solid var(--cream-dark);font-family:var(--font-body);font-size:.9rem;background:var(--cream);}
.form-group input:focus, .form-group textarea:focus{outline:none;border-color:var(--gold);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}

.mpesa-pay-btn{width:100%;background:linear-gradient(135deg,var(--teal),var(--teal-light));color:#fff;padding:16px;border-radius:14px;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;box-shadow:0 12px 24px rgba(47,111,98,.3);transition:.25s;}
.mpesa-pay-btn:hover{transform:translateY(-2px);}
.mpesa-pay-btn svg{width:20px;height:20px;}
.mpesa-pay-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.mini-order-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;}
.mini-item{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--cream-dark);}

/* ---------------- Payment Modal ---------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(42,24,16,.7);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-overlay.active{display:flex;}
.modal-box{background:var(--white);border-radius:20px;max-width:400px;width:100%;padding:36px 28px;text-align:center;box-shadow:var(--shadow-lg);}
.modal-icon{width:80px;height:80px;border-radius:50%;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.modal-icon svg{width:38px;height:38px;color:var(--teal);}
.modal-icon.spin svg{animation:spin 1.2s linear infinite;color:var(--gold);}
.modal-icon.success{background:rgba(47,111,98,.15);}
.modal-icon.success svg{color:var(--teal);}
.modal-icon.fail{background:rgba(193,80,46,.15);}
.modal-icon.fail svg{color:var(--terracotta);}
@keyframes spin{to{transform:rotate(360deg);}}
.modal-box h3{margin-bottom:10px;}
.modal-box p{color:var(--text-mid);font-size:.9rem;margin-bottom:20px;}
.modal-box .btn-primary, .modal-box .btn-ghost{display:inline-block;}

/* ---------------- Product detail ---------------- */
.pdp-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:flex-start;}
@media(max-width:800px){.pdp-layout{grid-template-columns:1fr;}}
.pdp-visual{background:linear-gradient(160deg,var(--cream-dark),var(--brown-soft));border-radius:var(--radius);height:340px;display:flex;align-items:center;justify-content:center;}
.pdp-visual svg{width:130px;height:130px;color:var(--brown-darkest);}
.pdp-info h1{font-size:1.7rem;margin-bottom:10px;}
.pdp-price{font-size:1.8rem;font-weight:800;color:var(--brown-dark);font-family:var(--font-head);margin:14px 0;}
.pdp-desc{color:var(--text-mid);margin-bottom:20px;}
.qty-add-row{display:flex;align-items:center;gap:16px;margin-top:20px;}

/* ---------------- Misc ---------------- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--brown-darkest);color:var(--gold-light);padding:14px 22px;border-radius:12px;box-shadow:var(--shadow-lg);font-weight:600;font-size:.9rem;transform:translateY(120%);opacity:0;transition:.3s;z-index:300;}
.toast.show{transform:translateY(0);opacity:1;}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--brown-darkest);color:var(--brown-soft);padding:50px 0 0;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-brand{font-size:1.3rem;margin-bottom:12px;}
.footer-grid p{font-size:.85rem;line-height:1.6;}
.footer-grid h4{color:var(--gold-light);font-size:.9rem;margin-bottom:14px;}
.footer-grid ul li{font-size:.85rem;margin-bottom:8px;}
.footer-grid ul li a:hover{color:var(--gold-light);}
.mpesa-badge{display:flex;align-items:center;gap:8px;background:rgba(212,169,76,.12);color:var(--gold-light);padding:10px 14px;border-radius:10px;font-size:.8rem;font-weight:700;}
.mpesa-badge svg{width:18px;height:18px;}
.footer-bottom{text-align:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;}

/* ---------------- Admin ---------------- */
.admin-body{background:var(--cream-dark);}
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;background:var(--brown-darkest);color:var(--cream);padding:24px 18px;flex-shrink:0;}
.admin-sidebar .brand-text{margin-bottom:30px;font-size:1.1rem;}
.admin-sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--brown-soft);font-size:.88rem;font-weight:600;margin-bottom:4px;}
.admin-sidebar a.active, .admin-sidebar a:hover{background:var(--brown);color:var(--gold-light);}
.admin-main{flex:1;padding:30px;}
.admin-card{background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:20px;margin-bottom:20px;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:24px;}
.stat-card{background:var(--white);border-radius:var(--radius-sm);padding:20px;box-shadow:var(--shadow);border-left:4px solid var(--gold);}
.stat-card strong{font-size:1.5rem;display:block;font-family:var(--font-head);color:var(--brown-dark);}
.stat-card span{font-size:.8rem;color:var(--text-mid);}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
table th, table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--cream-dark);}
table th{color:var(--brown-dark);font-family:var(--font-head);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;}
.status-pill{padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;}
.status-pill.paid, .status-pill.completed{background:rgba(47,111,98,.15);color:var(--teal);}
.status-pill.pending{background:rgba(212,169,76,.2);color:#8a6d1f;}
.status-pill.failed, .status-pill.cancelled{background:rgba(193,80,46,.15);color:var(--terracotta);}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brown-darkest),var(--brown));}
.login-card{background:var(--white);padding:40px;border-radius:var(--radius);width:100%;max-width:360px;box-shadow:var(--shadow-lg);}
.alert{padding:12px 16px;border-radius:10px;font-size:.85rem;margin-bottom:16px;}
.alert-error{background:rgba(193,80,46,.12);color:var(--terracotta);}
.alert-success{background:rgba(47,111,98,.12);color:var(--teal);}

@media(max-width:700px){
  .hero-copy h1{font-size:2rem;}
  .navbar-inner{flex-direction:column;align-items:stretch;}
  .nav-search{order:3;max-width:none;}
}