/*
Theme Name: Techsparks v8
Author: Techsparks
Description: Techsparks final v8 - Swiper slider, Customizer controls for all sections, subcategories dropdown overlay.
Version: 1.0
Text Domain: techsparks-v8
*/
@import url('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');
:root{
  --primary: #007BFF;
  --accent: #FF6B00;
  --text: #2C2C2C;
  --bg: #ffffff;
  --container: 1200px;
  --radius: 8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
a{color:var(--primary);text-decoration:none}
.site-header{background:var(--bg);border-bottom:1px solid #eee;position:sticky;top:0;z-index:140}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
.header-left{display:flex;align-items:center;gap:18px;flex:1}
.logo img{height:56px;max-height:56px}
.search-wrap{flex:1;margin:0 20px}
.search-input{width:100%;padding:12px 16px;border:1px solid #e6e6e6;border-radius:8px;font-size:16px}
.header-right{display:flex;align-items:center;gap:12px}
.header-right .account,.header-right .help,.header-right .cart{padding:8px 10px;border-radius:8px;font-weight:600;background:transparent}
.header-right .account{position:relative}
.account .dropdown{display:none;position:absolute;right:0;top:46px;background:#fff;border:1px solid #eee;padding:8px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.08);min-width:200px;z-index:200}
.account:hover .dropdown{display:block}
.main-wrap{display:flex;gap:20px;padding:18px 0}
.sidebar{width:220px;flex-shrink:0}
.category-list{background:#fff;border-radius:10px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,0.03);position:relative;z-index:210}
.category-list ul{list-style:none;margin:0;padding:0}
.category-list li{padding:8px;border-radius:6px;cursor:pointer;position:relative;font-size:14px}
.category-list li a{display:flex;align-items:center;gap:8px;color:var(--text)}
.category-list li:hover{background:#f8fafc}
/* Subcategory dropdown will appear to the right of the category list and above the hero */
.category-list li .subcats{display:none;position:absolute;left:240px;top:0;background:#fff;border:1px solid #eee;min-width:220px;padding:8px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.12);z-index:300}
.category-list li:hover > .subcats{display:block}
.content{flex:1;position:relative;z-index:10}
.hero{position:relative;border-radius:10px;overflow:hidden;height:420px;background:#f5f5f5;display:flex;align-items:center;justify-content:center}
.swiper{width:100%;height:100%}
.swiper-slide{background-size:cover;background-position:center;cursor:pointer}
.swiper-pagination-bullets .swiper-pagination-bullet{background:var(--primary);opacity:0.9}
.section{margin-top:28px;padding:18px 0;background:transparent}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat-card{background:#fff;padding:12px;border-radius:10px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.03);min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cat-card img{max-width:72px;height:auto;margin-bottom:8px}
.cat-card h3{margin:0;font-size:15px;color:var(--text)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.06);transition:transform .18s ease,box-shadow .18s ease}
.how-card .icon{width:56px;height:56px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px}
.how-card h4{margin:0 0 8px;color:var(--primary)}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.product-card{background:#fff;padding:12px;border-radius:10px;border:1px solid #f2f2f2;display:flex;flex-direction:column;justify-content:space-between}
.product-card img{width:100%;height:180px;object-fit:cover;border-radius:6px}
.price{font-weight:700;color:var(--primary);margin-top:8px}
.badge{display:inline-block;background:var(--accent);color:#fff;padding:6px 10px;border-radius:20px;font-weight:700;font-size:13px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,0.06);text-align:center}
.btn-primary{background:var(--primary);color:#fff}
.btn-buy{background:var(--accent);color:#fff}
.footer{background:#111;color:#fff;padding:24px;margin-top:28px}
.footer .socials a{display:inline-block;margin-right:8px;color:#fff;font-size:18px}
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .sidebar{width:200px}
  .hero{height:320px}
  .how-grid{grid-template-columns:repeat(3,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .main-wrap{flex-direction:column;padding:12px 0}
  .sidebar{width:100%}
  .search-wrap{order:2;margin:10px 0}
  .header-right{gap:8px}
  .hero{height:220px}
  .cat-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}
}