/* Feys Baking Club — v0 desain baru (2026-11-01). Referensi pemilik: banner besar Pastry Depot + struktur halaman
   King Arthur (banner → kategori → terlaris → spotlight). Kakao & stroberi di atas putih; judul Gloock, teks Plus Jakarta
   Sans (keduanya OFL, self-host). Aturan skill: mobile-native, better-accessibility, animate, no-ai-design-slop. */
@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/gloock-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format("woff2");
}

:root {
  --kakao: #2b1a14;
  --kakao-tua: #1d120e;
  --stroberi: #c8374c;      /* teks putih di atasnya ±5:1 (WCAG AA) */
  --stroberi-terang: #e04a5f; /* hanya dekorasi (logo), bukan latar teks */
  --gula: #f6f1eb;
  --garis: #e8e0d6;
  --redup: #6b5d55;
  --putih: #ffffff;
  --dingin: #1f5f86;
  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Kurva gerak (skill animate, Emil Kowalski) — jangan buat kurva tandingan. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  interpolate-size: allow-keywords;   /* FAQ bisa beranimasi ke tinggi 'auto' (browser baru) */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Rasa "aplikasi" di HP (skill mobile-native): tanpa kilatan abu-abu saat tap, tanpa pembesaran teks landscape. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html.kunci-gulir { overflow: hidden; }   /* halaman tidak ikut tergulir saat keranjang terbuka */
button, a, .chip, summary { touch-action: manipulation; }   /* tap langsung, tanpa jeda 300 ms */
button, .chip { user-select: none; -webkit-user-select: none; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  background: var(--putih); color: var(--kakao);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--stroberi); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; text-wrap: balance; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--stroberi); outline-offset: 2px; }
main:focus { outline: none; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--kakao); color: var(--putih); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* Tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 13px 22px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.tombol-utama { background: var(--stroberi); color: var(--putih); }
.tombol-terang { background: var(--putih); color: var(--kakao); }
.link-panah { font-weight: 700; color: var(--kakao); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--stroberi); }

/* Bar atas */
.topbar {
  position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--garis); padding-top: env(safe-area-inset-top, 0px);
}
.topbar-in { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--kakao); text-decoration: none; }
.wordmark { font-family: var(--serif); font-size: 1.6rem; line-height: 1; display: flex; flex-direction: column; }
.wordmark small { font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--redup); margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--kakao); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--stroberi); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cart-btn {
  display: flex; align-items: center; gap: 8px; background: var(--kakao); color: var(--putih);
  border: 0; border-radius: 999px; padding: 8px 8px 8px 16px; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.badge { display: inline-block; background: var(--stroberi); color: var(--putih); border-radius: 999px; min-width: 26px; padding: 2px 8px; font-size: .82rem; text-align: center; }

/* Banner besar (Beranda) — selebar layar, geser dengan scroll-snap */
.hero { position: relative; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hero-track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: clamp(520px, 74svh, 680px); display: flex; overflow: hidden; }
.slide-kakao { background: var(--kakao); color: var(--putih); }
.slide-gula { background: #f1e2d2; color: var(--kakao); }
.slide-stroberi { background: var(--stroberi); color: var(--putih); }
.slide-stroberi .tombol-utama, .slide-kakao .tombol-utama { background: var(--putih); color: var(--kakao); }
.slide-in { display: grid; gap: 24px; align-content: center; width: 100%; padding-top: 32px; padding-bottom: 56px; position: relative; }
.slide-teks h2 { font-size: clamp(2.3rem, 9vw, 4.6rem); margin: 0 0 14px; max-width: 13ch; }
.slide-teks p { margin: 0 0 24px; font-size: 1.05rem; max-width: 42ch; opacity: .88; }
.slide-produk { order: -1; justify-self: center; width: min(62vw, 300px); aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--putih); box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }
.slide-produk img { width: 100%; height: 100%; object-fit: cover; }
.slide-foto { color: var(--putih); }
.slide-latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,18,14,.72), rgba(29,18,14,.15) 70%); }
/* Banner bertulisan (tulisan sudah di gambar desktop): teks situs disembunyikan secara visual saja (tetap ada untuk
   Google & pembaca layar, tombolnya tetap bisa difokus keyboard), tanpa pudar gelap, tinggi mengikuti rasio gambar
   (2560x1100) supaya tulisan di gambar tidak terpotong dan banner mengecil utuh saat jendela dikecilkan (seperti
   Pastry Depot); seluruh banner = link (.slide-link, untuk mouse/sentuh). Selama ada banner bertulisan, slide teks
   lain ikut rasio yang sama dan dibuat ringkas (tanpa kartu produk di layar sempit), supaya tidak memaksa tinggi
   hero melebihi gambar — kalau slide teks tetap lebih tinggi, banner bertulisan tidak ikut melar (align-items). */
.slide-link { display: none; }
@media (min-width: 561px) {
  .hero-track:has(.slide-bertulisan) { align-items: flex-start; }
  .hero-track:has(.slide-bertulisan) .slide { aspect-ratio: 2560 / 1100; min-height: 0; }
  .hero-track:has(.slide-bertulisan) .slide:not(.slide-bertulisan) { min-height: auto; }
  .hero-track:has(.slide-bertulisan) .slide-in { padding-top: 20px; padding-bottom: 56px; gap: 16px; }
  .hero-track:has(.slide-bertulisan) .slide-teks h2 { font-size: clamp(1.7rem, 4.2vw, 4.2rem); margin-bottom: 10px; }
  .hero-track:has(.slide-bertulisan) .slide-teks p { font-size: clamp(.9rem, 1.3vw, 1.05rem); margin-bottom: 16px; }
  .hero-track:has(.slide-bertulisan) .slide-produk { width: min(100%, 30vw, 440px); }
  .slide-bertulisan { aspect-ratio: 2560 / 1100; min-height: 0; }
  .slide-bertulisan::after { display: none; }
  .slide-bertulisan .slide-teks h2, .slide-bertulisan .slide-teks p {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .slide-bertulisan .slide-teks .tombol { position: absolute; left: -9999px; }
  .slide-bertulisan .slide-teks .tombol:focus-visible { position: static; }
  .slide-bertulisan .slide-link { display: block; position: absolute; inset: 0; z-index: 2; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .hero-track:has(.slide-bertulisan) .slide-produk { display: none; }
}
/* Sama untuk HP kalau gambar_hp juga bertulisan; tinggi ikut rasio gambar HP (1080x1720). */
@media (max-width: 560px) {
  .slide-bertulisan-hp { aspect-ratio: 1080 / 1720; min-height: 0; }
  .slide-bertulisan-hp::after { display: none; }
  .slide-bertulisan-hp .slide-teks h2, .slide-bertulisan-hp .slide-teks p {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .slide-bertulisan-hp .slide-teks .tombol { position: absolute; left: -9999px; }
  .slide-bertulisan-hp .slide-teks .tombol:focus-visible { position: static; }
  .slide-bertulisan-hp .slide-link { display: block; position: absolute; inset: 0; z-index: 2; }
}
/* HP: gambar versi tegak (gambar_hp) — teks di atas, produk di bawah; pudar gelap dari atas supaya teks terbaca. */
@media (max-width: 560px) {
  .slide-foto .slide-in { align-content: start; padding-top: 40px; }
  .slide-foto::after { background: linear-gradient(180deg, rgba(29,18,14,.85) 0%, rgba(29,18,14,.35) 45%, rgba(29,18,14,0) 65%); }
}
.slide-foto .slide-in { z-index: 1; }
.hero-kontrol { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.hero-dots { display: flex; gap: 4px; }
.dot { width: 32px; height: 32px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 22px; height: 4px; border-radius: 4px; background: currentColor; opacity: .4; transition: opacity 200ms ease, width 200ms var(--ease-out); }
.dot[aria-current="true"]::before { opacity: 1; width: 30px; }
/* Kontrol di atas kapsul gelap supaya terbaca di semua warna slide & foto. */
.hero-kontrol > * { background: rgba(29,18,14,.55); backdrop-filter: blur(6px); }
.hero-dots { border-radius: 999px; padding: 0 6px; }
.hero-dots, .hero-jeda { color: var(--putih); }
.hero-jeda { border: 0; border-radius: 999px; padding: 7px 14px; min-height: 32px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }


/* Seksi Beranda */
.seksi { padding: 52px 0; }
.seksi-gula { background: var(--gula); }
.seksi-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.seksi-head h2 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0; }
.seksi-sub { margin: 6px 0 0; color: var(--redup); }

.kat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kat { display: grid; gap: 4px; color: var(--kakao); text-decoration: none; }
.kat-foto { aspect-ratio: 1; border-radius: 18px; background: var(--gula); overflow: hidden; display: block; }
.kat-foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 300ms var(--ease-out); }
.kat-nama { font-weight: 700; margin-top: 6px; }
.kat-jml { color: var(--redup); font-size: .85rem; }

.rail-nav { display: none; gap: 8px; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--kakao); background: var(--putih); color: var(--kakao); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { scroll-snap-align: start; }

.spotlight { display: grid; gap: 48px; }
.sorot { display: grid; gap: 22px; align-items: center; }
.sorot-foto { aspect-ratio: 4 / 3; border-radius: 24px; background: var(--gula); overflow: hidden; display: grid; place-items: center; }
.sorot-foto img { width: 72%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.sorot-kat { margin: 0; color: var(--stroberi); font-weight: 700; font-size: .9rem; }
.sorot h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 6px 0 12px; max-width: 16ch; }
.sorot-teks > p:not(.sorot-kat):not(.price) { color: var(--redup); max-width: 46ch; margin: 0 0 14px; }
.sorot .price { font-size: 1.4rem; margin: 0 0 18px; }
.sorot-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* Halaman Belanja */
.belanja { padding-top: 28px; padding-bottom: 56px; }
.belanja-head h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: 0; }
.belanja-head .seksi-sub { margin-bottom: 18px; }
.search {
  display: flex; align-items: center; gap: 10px; max-width: 640px;
  background: var(--putih); border: 1.5px solid var(--kakao); border-radius: 999px; padding: 0 18px; color: var(--kakao);
}
.search:focus-within { outline: 3px solid var(--stroberi); outline-offset: 2px; }
#cari { flex: 1; min-width: 0; border: 0; background: none; padding: 13px 0; font: inherit; font-size: 1rem; color: var(--kakao); outline: none; }
#cari::placeholder { color: #8b7e76; }
.belanja-isi { display: grid; gap: 16px; margin-top: 20px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1.5px solid var(--garis); background: var(--putih); color: var(--kakao);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-align: left;
}
.chip[aria-pressed="true"] { background: var(--kakao); border-color: var(--kakao); color: var(--putih); }
.hasil { margin: 0 0 12px; color: var(--redup); font-size: .9rem; }

/* Kartu produk */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.thumb { position: relative; aspect-ratio: 1; background: var(--gula); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.inisial { font-family: var(--serif); font-size: 3rem; color: var(--redup); }
.takaran { position: absolute; left: 8px; top: 8px; background: var(--kakao); color: var(--putih); font-weight: 700; font-size: .8rem; line-height: 1; padding: 6px 9px; border-radius: 999px; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card h3 { margin: 0; font-size: .93rem; line-height: 1.32; font-weight: 600; }
.varian { color: var(--redup); font-size: .8rem; }
.dingin { color: var(--dingin); font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.dingin svg { flex: none; }
.price { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 1.05rem; }
.add {
  margin-top: 8px; border: 1.5px solid var(--kakao); border-radius: 999px; padding: 9px 8px;
  background: var(--putih); color: var(--kakao); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.add.tombol { margin-top: 0; border: 0; padding: 13px 22px; background: var(--stroberi); color: var(--putih); }
.add:disabled { border-color: var(--garis); background: var(--gula); color: var(--redup); cursor: not-allowed; }
.card.habis img { opacity: .55; }
.kosong { color: var(--redup); text-align: center; padding: 28px 0; }

/* Info toko */
.info { padding: 52px 0; }
.info-grid { display: grid; gap: 32px; }
.info h2, .kontak h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 4.5vw, 2.2rem); }
.blok h2 + .daftar { margin-bottom: 26px; }
.langkah { list-style: none; counter-reset: langkah; margin: 0; padding: 0; display: grid; gap: 14px; }
.langkah li { counter-increment: langkah; position: relative; padding: 7px 0 0 52px; min-height: 38px; }
.langkah li::before {
  content: counter(langkah); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--stroberi); color: var(--putih); font-weight: 800;
}
.daftar { margin: 0; padding-left: 20px; }
.daftar li { margin-bottom: 6px; }
.faq details { border-top: 1px solid var(--garis); }
.faq details:last-child { border-bottom: 1px solid var(--garis); }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--stroberi); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--redup); max-width: 70ch; }
/* Isi FAQ meluncur terbuka 200 ms (resep accordion). Browser lama tetap terbuka langsung, tanpa rusak. */
.faq details::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size 200ms var(--ease-out), opacity 200ms var(--ease-out), content-visibility 200ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }

/* Kontak & footer */
.kontak { background: var(--kakao); color: var(--putih); padding: 44px 0; }
.kontak h2 { color: var(--putih); }
.kontak p { margin: 0; color: rgba(255,255,255,.82); }
.kontak a:not(.tombol) { color: var(--putih); }
.kontak-in { display: grid; gap: 22px; }
.kontak .tombol { justify-self: start; }
.kontak .tombol:focus-visible { outline-color: var(--putih); }
.footer { background: var(--kakao-tua); color: rgba(255,255,255,.72); font-size: .85rem; padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark-kecil { font-size: 1.3rem; color: var(--putih); }
.wordmark-kecil small { color: rgba(255,255,255,.6); }

/* Keranjang */
/* Latar gelap memudar bersama keranjang. visibility ditunda supaya fade-out terlihat. */
.overlay {
  position: fixed; inset: 0; background: rgba(29,18,14,.5); z-index: 20;
  opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s 280ms;
}
.overlay.open { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease-out); }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; height: 100dvh; width: min(420px, 100%); background: var(--putih); z-index: 30;
  transform: translateX(100%); transition: transform 280ms var(--ease-out); display: flex; flex-direction: column;
}
/* Masuk 420 ms dengan kurva laci ala iOS; keluar lebih cepat (280 ms) — sistem merespons, jangan ditunggu. */
.drawer.open { transform: none; transition: transform 420ms var(--ease-drawer); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom: 1px solid var(--garis); }
.drawer-head h2 { margin: 0; font-size: 1.6rem; }
.x { border: 0; background: none; color: inherit; font-size: 1.9rem; cursor: pointer; line-height: 1; width: 40px; height: 40px; }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px)); flex: 1; }
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.cart-item .nm { font-weight: 600; font-size: .92rem; }
.cart-item .meta { color: var(--redup); font-size: .8rem; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--garis); background: var(--putih); color: var(--kakao); font: inherit; font-weight: 800; cursor: pointer; }
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 700; }
.form input, .form textarea, .form select {
  padding: 11px 12px; border: 1.5px solid var(--garis); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 400; background: var(--putih); color: var(--kakao);
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--kakao); outline: none; box-shadow: 0 0 0 3px rgba(200,55,76,.25); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; padding: 8px 0; }
.total b { font-size: 1.3rem; }
.note { font-size: .8rem; color: var(--redup); margin: 0; }
.wa-btn { width: 100%; padding: 15px; font-size: 1rem; }

/* Respons tekan (skill emil-design-eng): mengecil sedikit saat ditekan, 120 ms. */
.add, .cart-btn, .chip, .tombol, .qty button, .x, .rail-btn, .hero-jeda {
  transition: transform 120ms var(--ease-out), background-color 120ms ease, color 120ms ease;
}
.add:active, .cart-btn:active, .chip:active, .tombol:active, .qty button:active, .rail-btn:active { transform: scale(.97); }
.add span { display: inline-block; }
/* Hover hanya untuk perangkat dengan mouse — di HP hover "nyangkut" setelah tap. */
@media (hover: hover) and (pointer: fine) {
  .add:not(:disabled):not(.tombol):hover { background: var(--kakao); color: var(--putih); }
  .tombol-utama:hover { background: #b02f43; }
  .chip:not([aria-pressed="true"]):hover { border-color: var(--kakao); }
  .kat:hover .kat-foto img { transform: scale(1.04); }
  .rail-btn:hover { background: var(--kakao); color: var(--putih); }
  .nav a:not([aria-current]):hover { background: var(--gula); }
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .kat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .rail { grid-auto-columns: 210px; gap: 16px; }
}
@media (min-width: 900px) {
  .slide-in { grid-template-columns: 1.1fr .9fr; align-items: center; padding-top: 48px; padding-bottom: 72px; }
  .slide-produk { order: 0; width: min(100%, 440px); }
  .rail-nav { display: flex; }
  .rail { margin: 0; padding-left: 0; padding-right: 0; scroll-padding-left: 0; grid-auto-columns: calc((100% - 64px) / 5); }
  .sorot { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sorot:nth-child(even) .sorot-foto { order: 2; }
  .belanja-isi { grid-template-columns: 220px 1fr; align-items: start; gap: 32px; }
  .chips { flex-direction: column; margin: 0; padding: 0; overflow: visible; position: sticky; top: 84px; }
  .chip { border-color: transparent; border-radius: 10px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .blok-lebar { grid-column: 1 / -1; }
  .kontak-in { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ikon-tas { display: none; }
@media (max-width: 560px) {
  /* HP: tombol keranjang jadi ikon tas + angka; teks "Keranjang" tetap ada untuk pembaca layar. */
  .cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ikon-tas { display: block; }
  .cart-btn { padding: 8px 8px 8px 12px; }
  .wordmark small { display: none; }
  .wordmark { font-size: 1.4rem; }
  .nav a { padding: 8px 8px; font-size: .95rem; }
  .topbar-in { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Lebih sedikit & lembut, bukan nol: geser/skala dibuang, pudar tetap (aturan skill animate). */
  .drawer, .drawer.open { transition: none; }
  .faq details::details-content { transition: opacity 150ms ease, content-visibility 150ms allow-discrete; }
  .add, .cart-btn, .chip, .tombol, .qty button, .x, .rail-btn { transition: background-color 120ms ease, color 120ms ease; }
  .add:active, .cart-btn:active, .chip:active, .tombol:active, .qty button:active, .rail-btn:active { transform: none; }
  .kat-foto img { transition: none; }
}