@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

:root {
  --bs-font-sans-serif: 'Inter', sans-serif !important;
  --fs-bg: #000000;
  --fs-bg2: #0a0a0a;
  --fs-bg3: #111111;
  --fs-border: #1a1a1a;
  --fs-text: #ffffff;
  --fs-muted: #555555;
  --fs-muted2: #333333;
}

/* ── Base ── */
html, body {
  background: var(--fs-bg) !important;
  color: var(--fs-text) !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ── */
.navbar {
  background: var(--fs-bg) !important;
  border-bottom: 1px solid var(--fs-border) !important;
  box-shadow: none !important;
}

.navbar .navbar-brand span {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

.navbar .navbar-brand img {
  max-height: 2rem !important;
}

.navbar .nav-link {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--fs-muted) !important;
  transition: color 0.2s !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
}

.navbar .btn-outline-primary {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-color: var(--fs-border) !important;
  color: var(--fs-muted) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
}

.navbar .btn-outline-primary:hover {
  background: var(--fs-bg3) !important;
  color: #fff !important;
}

/* ── Hero ── */
.hero {
  background-color: var(--fs-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fs-border) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 80vh !important;
}

.hero .bg-overlay {
  display: none !important;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--fs-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, #000 35%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  padding: 6rem 2rem !important;
}

.hero .content h1 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  line-height: 1.05 !important;
  background: linear-gradient(180deg, #ffffff 0%, #555555 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 1.25rem !important;
}

.hero .content p {
  font-size: 15px !important;
  color: var(--fs-muted) !important;
  margin-bottom: 2rem !important;
}

.hero .content .btn-primary {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  padding: 12px 32px !important;
  text-transform: uppercase !important;
  margin-bottom: 2.5rem !important;
}

.hero .content .btn-primary:hover {
  background: #e0e0e0 !important;
  color: #000 !important;
}

.hero .content .stats {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 999px !important;
}

.hero .content .stats div .value {
  color: #fff !important;
  font-weight: 600 !important;
}

.hero .content .stats div .label {
  color: var(--fs-muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.5px !important;
}

.hero .fake-searchbar input {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 1rem 2rem 1rem 4rem !important;
}

.hero .fake-searchbar input:focus {
  border-color: #444 !important;
  box-shadow: none !important;
}

/* ── Products section ── */
.section-title h1,
.section-title h2 {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: var(--fs-muted) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ── Product cards ── */
.products .card {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 6px !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
}

.products .card:hover {
  background: var(--fs-bg3) !important;
  border-color: #2a2a2a !important;
  transform: translateY(-2px) !important;
}

.products .card .card-img-top {
  background: #111 !important;
  border-bottom: 1px solid var(--fs-border) !important;
  border-radius: 6px 6px 0 0 !important;
}

.products .card .info {
  color: var(--fs-muted) !important;
}

.products .card .info .price {
  color: #e0e0e0 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.products .card .card-title {
  color: #c8c8c8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.products .card .card-img-top .overlay .btn {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.products .card .card-img-top .overlay .btn:hover {
  background: #e0e0e0 !important;
}

.text-primary {
  color: var(--fs-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.stock-unlimited {
  color: #3a8a3a !important;
}

/* ── Sidebar filters ── */
.bg-gray {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
}

.form-label.fw-bold {
  color: #888 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.form-control,
.form-select {
  background: var(--fs-bg) !important;
  border: 1px solid var(--fs-border) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #444 !important;
  box-shadow: none !important;
  background: var(--fs-bg) !important;
}

.btn-primary {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.btn-primary:hover {
  background: #ddd !important;
  color: #000 !important;
}

.btn-outline-primary,
.btn-outline {
  background: transparent !important;
  color: var(--fs-muted) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.btn-outline-primary:hover,
.btn-outline:hover {
  border-color: #444 !important;
  color: #fff !important;
  background: transparent !important;
}

/* ── Footer ── */
footer.footer {
  background: var(--fs-bg) !important;
  border-top: 1px solid var(--fs-border) !important;
}

.footer h5 {
  color: var(--fs-muted2) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

.footer .nav li a {
  color: var(--fs-muted2) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.footer .nav li a:hover {
  color: #fff !important;
}

.footer .logo p {
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--fs-muted) !important;
}

/* ── Modals ── */
.modal-content {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 8px !important;
}

.modal-header,
.modal-footer {
  border-color: var(--fs-border) !important;
}

.btn-close {
  filter: invert(1) !important;
  opacity: 0.4 !important;
}

.btn-close:hover {
  opacity: 0.8 !important;
}

/* ── Cards / panels ── */
.card {
  background: var(--fs-bg2) !important;
  border-color: var(--fs-border) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* ── Misc ── */
.text-muted { color: var(--fs-muted) !important; }
hr, .divider { border-color: var(--fs-border) !important; }
a { color: #fff !important; }
a:hover { color: #aaa !important; }

.pagination .page-item:not(.active) .page-link {
  background: var(--fs-bg2) !important;
  border-color: var(--fs-border) !important;
  color: var(--fs-muted) !important;
}

.pagination .page-item.active .page-link {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

/* ── Announcement ── */
.announcement {
  background: var(--fs-bg2) !important;
  border-bottom: 1px solid var(--fs-border) !important;
  color: var(--fs-muted) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

.announcement a {
  color: #fff !important;
}

/* ── Search modal ── */
.search-modal .modal-content {
  background: var(--fs-bg2) !important;
}

.hero .search-modal .searchbar input {
  background: var(--fs-bg) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 999px !important;
  color: #fff !important;
}

/* ── Product page ── */
.product-wrapper {
  background: var(--fs-bg) !important;
}

/* ── Testimonials ── */
.testimonial {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
}

/* ── FAQ accordion ── */
.accordion-item {
  background: var(--fs-bg2) !important;
  border-color: var(--fs-border) !important;
}

.accordion-button {
  background: var(--fs-bg2) !important;
  color: #fff !important;
}

.accordion-button:not(.collapsed) {
  background: var(--fs-bg3) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Currency selector ── */
.currency-selector .choices__inner {
  background-color: transparent !important;
  border-color: var(--fs-border) !important;
}

/* ── Features ── */
.features .list .feature {
  background: var(--fs-bg2) !important;
  border: 1px solid var(--fs-border) !important;
}