:root{
  --brand-dark:#0f172a;
  --brand-accent:#ff4d2d;
  --brand-accent-2:#ff7a18;
  --muted:#6b7280;
  --soft:#f5f7fb;
  --radius:14px;
}

html,body{height:100%;}
body{
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff;
  color:#111827;
}

.text-muted-2{color:var(--muted)!important;}
.bg-soft{background:var(--soft);}
.shadow-soft{box-shadow:0 10px 28px rgba(2,6,23,.08);}
.rounded-2xl{border-radius:var(--radius);}

/* Top Bar */
.topbar{background:#0b1222;color:#e5e7eb;font-size:.92rem;}
.topbar a{color:#e5e7eb;text-decoration:none;}
.topbar a:hover{color:#fff;text-decoration:underline;}

/* Sticky Header */
.main-header{
  position:sticky; top:0; z-index:1040;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:#0f172a;
  font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
.brand-badge{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));
  display:grid;place-items:center;color:#fff;font-weight:900;
}

.search-wrap{
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px; overflow:hidden; background:#fff;
}
.search-wrap .form-control{border:0; box-shadow:none;}
.search-wrap .btn{border-radius:0;}

.icon-btn{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:#fff;border:1px solid rgba(15,23,42,.12);
  color:#0f172a; position:relative;
}
.icon-btn:hover{background:#f8fafc;}
.cart-count{
  position:absolute; top:-7px; left:-7px;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--brand-accent);
  color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;line-height:1;
}

/* Mega Menu */
.nav-dark{background:var(--brand-dark);}
.nav-dark .nav-link,.nav-dark .navbar-brand,.nav-dark .navbar-toggler{color:#e5e7eb;}
.nav-dark .nav-link:hover{color:#fff;}
.mega-dropdown .dropdown-menu{
  width:100%; border:0; margin-top:0;
  border-radius:0 0 18px 18px;
  box-shadow:0 22px 50px rgba(2,6,23,.18);
  padding:1.25rem 0;
}
.mega-title{font-weight:800;font-size:1rem;color:#0f172a;}
.mega-link{display:block;padding:.35rem 0;color:#374151;text-decoration:none;}
.mega-link:hover{color:var(--brand-accent);text-decoration:none;}
@media (min-width: 992px){
  .mega-dropdown:hover>.dropdown-menu{display:block;}
}

/* Buttons */
.btn-accent{
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));
  border:0; color:#fff; font-weight:700;
  border-radius:12px; padding:.75rem 1rem;
}
.btn-accent:hover{filter:brightness(.95); color:#fff;}

/* Hero */
.hero{
  background:
    linear-gradient(90deg, rgba(15,23,42,.88), rgba(15,23,42,.45)),
    url('https://picsum.photos/seed/car-hero/1600/700') center/cover no-repeat;
  color:#fff;
}
.hero .badge{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

/* Vehicle selector card */
.vehicle-card{
  background:#eef3ff;
  border:1px solid rgba(37,99,235,.10);
  border-radius:18px;
}
.vehicle-card .form-select,.vehicle-card .form-control{
  border-radius:12px;
  border-color:rgba(15,23,42,.14);
  padding:.85rem .95rem;
}

/* Category cards */
.cat-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.cat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(2,6,23,.12);
  border-color:rgba(255,77,45,.35);
}
.cat-img{
  height:130px;background:#f8fafc;
  display:flex;align-items:center;justify-content:center;
}
.cat-img img{max-height:92px;width:auto;object-fit:contain;}
.cat-title{font-weight:800;}

/* Product cards */
.product-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  overflow:hidden;background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(2,6,23,.12);
  border-color:rgba(255,77,45,.35);
}
.product-img{
  background:#f8fafc; height:190px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.product-img img{max-height:150px;width:auto;object-fit:contain;}
.product-badge{
  position:absolute; top:12px; right:12px;
  background:var(--brand-accent); color:#fff;
  border-radius:999px; padding:.35rem .6rem;
  font-size:.78rem; font-weight:700;
  box-shadow:0 10px 20px rgba(255,77,45,.25);
}
.stars{color:#f59e0b; letter-spacing:1px;}

/* Promo tiles */
.promo-tile{
  border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,#0b1222,#111827);
  color:#fff; position:relative; min-height:180px;
}
.promo-tile .overlay{position:absolute; inset:0;}
.promo-tile .content{position:relative; z-index:2;}

/* Footer */
footer{background:#0b1222; color:#e5e7eb;}
footer a{color:#cbd5e1; text-decoration:none;}
footer a:hover{color:#fff; text-decoration:underline;}
.footer-input{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:12px;
  text-align: right;
}
.footer-input::placeholder{color:#9ca3af;}

/* ===== Category Page (CarID-like) ===== */
.page-hero{
  background:linear-gradient(90deg, rgba(15,23,42,.92), rgba(15,23,42,.50)),
    url('https://picsum.photos/seed/brakes-hero/1600/420') center/cover no-repeat;
  color:#fff;
}
.vehicle-strip{
  background:#eef3ff;
  border-bottom:1px solid rgba(37,99,235,.12);
}
.vehicle-strip .box{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
  padding:.75rem .9rem;
  display:flex; align-items:center; justify-content:space-between;
  min-height:54px;
}
.vehicle-strip .step{
  width:34px; height:34px;
  border-radius:9px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
  display:grid; place-items:center;
  font-weight:800; color:#111827;
}
.vehicle-strip .box .label{
  font-size:.75rem;
  color:#6b7280;
  font-weight:700;
  letter-spacing:.2px;
}
.vehicle-strip .box .value{
  font-weight:800;
}
.vehicle-strip .go-btn{
  border-radius:10px;
  min-height:54px;
  font-weight:800;
}

.dept-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:1rem 1.1rem;
  display:flex; align-items:flex-start; gap:.9rem;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.dept-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(2,6,23,.10);
  border-color:rgba(255,77,45,.25);
}
.dept-card .check{
  width:22px; height:22px;
  border-radius:6px;
  border:2px solid rgba(15,23,42,.25);
  margin-top:.1rem;
}
.dept-card.active{
  border-color:#2563eb;
  box-shadow:0 12px 28px rgba(37,99,235,.12);
}
.dept-card.active .check{
  border-color:#2563eb;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.filter-card{
  position:sticky;
  top:124px; /* header height */
}
.filter-card .section-title{
  font-weight:900;
  font-size:.95rem;
  letter-spacing:.2px;
}
.filter-card .filter-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  padding:.4rem 0;
}
.filter-card .filter-item label{cursor:pointer;}
.filter-card .hint{
  width:18px; height:18px;
  border-radius:999px;
  display:grid; place-items:center;
  font-size:.75rem;
  border:1px solid rgba(37,99,235,.35);
  color:#2563eb;
}
.toolbar{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:.85rem;
}
.toolbar .result-count{color:#6b7280;}

.mobile-action{
  border:2px solid rgba(15,23,42,.18);
  border-radius:14px;
  padding:.85rem 1rem;
  font-weight:900;
  background:#fff;
}
.mobile-action i{margin-left:.35rem;}

.product-wide{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-wide:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(2,6,23,.12);
  border-color:rgba(255,77,45,.35);
}
.product-wide .imgwrap{
  position:relative;
  background:#f8fafc;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-wide .imgwrap img{
  max-height:190px;
  width:auto;
  object-fit:contain;
}
.product-wide .deal{
  position:absolute;
  top:12px; right:12px;
  background:#dc2626;
  color:#fff;
  padding:.45rem .65rem;
  border-radius:10px;
  font-weight:900;
  font-size:.78rem;
}
.product-wide .dots{
  position:absolute;
  bottom:10px;
  left:0; right:0;
  display:flex; justify-content:center;
  gap:.35rem;
}
.product-wide .dots span{
  width:7px;height:7px;border-radius:999px;
  background:rgba(17,24,39,.35);
}
.product-wide .dots span.active{background:rgba(17,24,39,.75);}

.product-wide .title{
  font-weight:900;
  line-height:1.25;
}
.product-wide .meta{
  display:flex; align-items:center; gap:.6rem;
  flex-wrap:wrap;
}
.tag{
  border:1px solid rgba(15,23,42,.18);
  color:#334155;
  border-radius:999px;
  padding:.2rem .55rem;
  font-size:.72rem;
  font-weight:800;
}
.price{
  font-weight:900;
  font-size:1.2rem;
}

@media (max-width: 575.98px){
  .brand-text{display:none;}
  .hero{padding-top:1rem!important;}
  .filter-card{position:static; top:auto;}
}