:root {
  --accent: #0052E0;
  --text: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text);
  line-height: 1.6;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; text-decoration: none; color: var(--text); }

nav a {
  margin-left: 16px;
  color: var(--muted);
  text-decoration: none;
  /* Tap target >= 44px (R-03). Padding vertikal, bukan tinggi tetap, supaya
     tetap ikut membesar kalau basis font pembaca diperbesar. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
nav a:hover { color: var(--accent); }

.hero { padding: 48px 0; text-align: center; }
.hero h1 { font-size: 2rem; margin: 0 0 8px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

.product-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.product-card img { width: 100%; height: auto; border-radius: 4px; }
.product-card h3 { font-size: 1rem; margin: 8px 0; }
.product-card a { color: var(--text); text-decoration: none; }

.price { font-weight: 600; }
.price s { color: var(--muted); font-weight: 400; margin-left: 6px; }
.old-price { color: var(--muted); text-decoration: line-through; }

.out-of-stock { color: #B91C1C; font-weight: 600; }

.button, button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  /* R-03: 44px minimum tap target. Padding vertikal 10px + font 1rem
     menghasilkan 38px, jadi min-height dipasang eksplisit. */
  padding: 10px 18px;
  min-height: 44px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
.total { font-size: 1.2rem; font-weight: 700; margin-top: 16px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer__legal a {
  /* R-03: tautan footer dinaikkan ke >= 44px. Inline-flex supaya tinggi baris
     tidak melebar mengikuti line-height teks sekitarnya. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Tanpa dua baris ini tautan mewarisi warna dan garis bawah bawaan browser,
     jadi satu-satunya warna di halaman selain aksen. */
  color: var(--accent);
  text-decoration: none;
}
.site-footer__legal a:hover { text-decoration: underline; }

.attribution { font-size: 0.75rem; }

/* Header dan grid di layar sempit.
   Di bawah 640px brand dan nav tidak muat berdampingan: brand pecah dua baris
   dan nav melipat tidak rata, jadi header jadi tinggi. Nav turun ke barisnya
   sendiri dan keduanya di tengah. Tap target 44px di atas tetap berlaku, jadi
   aturan ini hanya mengatur susunan, bukan ukuran sasaran sentuh. */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    padding: 12px 16px;
  }

  /* Nama toko jangan pecah dua baris; lebih baik nav yang turun. */
  .brand { white-space: nowrap; }

  .site-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  /* Jarak antar item diatur dari sisi kanan supaya item pertama rata tengah
     tanpa tergeser margin kiri. */
  nav a { margin-left: 0; }
  nav a + a { margin-left: 16px; }
}