/* ============================================================
   LHW Site — base reset & chrome styles
   (dipindah dari <style> inline mockup + tambahan dropdown/carousel)
   ============================================================ */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5.5rem; }

@media (max-width: 767px) {
  .px-margin { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .gap-gutter { gap: 0.75rem !important; }
}

/* ---------- Dropdown navigasi (hover desktop + klik semua perangkat) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { display: none; }
.nav-dropdown.open > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover > .nav-dropdown-menu { display: flex; }
}
.nav-dropdown-btn[aria-expanded="true"] .nav-chev {
  transform: rotate(180deg);
}
.nav-chev { transition: transform 0.2s ease; }

/* ---------- Hero carousel (crossfade) ---------- */
.hero-slide { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-dot { transition: background-color 0.3s ease, border-color 0.3s ease; }

/* ---------- Tabel spesifikasi (oem-fitment, detail produk) ---------- */
.spec-table th {
  background: #12183d;
  color: #bcc3ff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(167, 182, 191, 0.25);
  white-space: nowrap;
}
.spec-table td {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  color: #dee0ff;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(167, 182, 191, 0.1);
}
.spec-table tr:nth-child(even) td { background: rgba(18, 24, 61, 0.45); }

/* ---------- Konten artikel (tips detail) ---------- */
.article-body p { margin-bottom: 1rem; }
.article-body h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #dee0ff;
  margin: 2rem 0 0.5rem;
}