/* ============================================================
   ALINA — Tema "Soft Pink Modern"
   ============================================================
   Sumber tunggal warna storefront. Menimpa 14 token warna Framer
   (--token-<uuid>) yang dipakai ratusan kali lewat var() di seluruh
   HTML — jadi mengganti warna situs = mengubah file ini saja.

   Palet diturunkan dari SATU hue OKLCH (H=350, rose) memakai metode
   skill `design-tokens`, lalu dikonversi ke HEX supaya tetap tampil
   benar di browser lama (Android jadul) yang belum dukung oklch().

   Kontras terverifikasi WCAG AA:
     teks/bg 11.90:1 · muted/bg 6.35:1 (ambang teks normal 4.5:1)

   Selector `html body` (0,0,2) sengaja dipakai supaya MENANG atas
   definisi asli Framer `body{...}` (0,0,1) tanpa bergantung pada
   urutan pemuatan stylesheet — termasuk menang atas rule dark-mode
   bawaan Framer yang terduplikasi di beberapa HTML export. Situs ini
   SENGAJA cuma punya satu tema (light); tidak ada blok
   `@media (prefers-color-scheme: dark)` di sini, dan itu bukan bug.

   CATATAN CACHE: nama file WAJIB diawali `alina-` agar kena aturan
   .htaccess `no-cache, must-revalidate`. Nama polos akan di-cache
   immutable 1 tahun dan perbaikan tidak akan pernah sampai ke
   pengunjung lama.
   ============================================================ */

html body {
  /* BG halaman — putih semburat pink */
  --token-0c3bac23-c979-4738-8058-df2946813f16: #fff8fb;
  /* TEKS utama — plum pekat, bukan hitam (lebih lembut, tetap 11.9:1) */
  --token-f7892a01-b822-48a2-8611-652ef40e442c: #472c39;
  /* Surface / kartu */
  --token-35a4aab3-1db3-4fbe-b240-13c7f2ccdc3c: #fbeef3;
  /* Surface sekunder — blush lebih pekat */
  --token-bab4eb04-aa65-47ff-a62c-26873fb71c13: #f9e7ef;
  /* Border */
  --token-ccc7ddec-9347-44d5-a5d3-f16ad02866b7: #ebd6df;
  /* Teks muted / fill ikon */
  --token-585e522a-fc04-4d62-a113-eb79674160f1: #705561;
  /* Border halus / placeholder */
  --token-e92e96e8-1ba5-4c4d-ba89-737c65fe1796: #866c77;
  /* Overlay solid (mis. tombol gelap) */
  --token-e762d43b-a214-4aa4-9a90-0deb46906e14: #472c39;
  /* Overlay 80% */
  --token-9bb4c45a-5faf-46cc-b1c0-b571d0258425: #472c39cc;
  /* Tint sangat halus (hover/garis) */
  --token-12984003-55f1-454d-80b5-f10203eab695: #472c390a;
  /* Tint 15% (kaca / backdrop-blur) */
  --token-672e9d4c-607e-4d89-a5da-fe99eab349bc: #472c3926;
  /* Bayangan */
  --token-6ace36d2-d821-469b-abd6-367dcd043fa3: #472c391a;
  /* Scrim modal — plum gelap, bukan hitam mati */
  --token-c3b9f94f-32c2-46ae-b97a-2d6cf689992c: #2b1a21bf;

  /* --token-96c3d195… (#43d955) SENGAJA TIDAK diubah — itu hijau
     status "sukses". Warna semantik tidak ikut rebranding. */
}

/* Fix: Hero Section "framer-WGaDY" tingginya tetap 800px di semua breakpoint
   (cuma lebar yang di-resize di canvas Framer: 1440px -> 810px -> 390px). Di
   HP itu jadi rasio ~1:2 yang sangat tinggi. Diskalakan proporsional mengikuti
   rasio lebar aslinya (800 * lebar/1440) supaya rasio hero tetap konsisten
   dgn desktop, bukan angka sembarang.
   !important WAJIB: elemen <section>-nya sendiri punya inline style
   height:100% langsung di HTML export Framer, dan inline style selalu menang
   lawan CSS file terpisah manapun kecuali dikasih !important.
   SENGAJA DIBATASI ke `.framer-tR1hz` (cuma ada di shop.html): halaman lain
   yang pakai komponen Hero yang sama (home, product, dst) di-HYDRATE React/
   Framer Motion beneran, dan maksa height di sana bikin animasi masuknya
   gagal total (section jadi render blank, opacity:1 tapi konten di dalamnya
   tak pernah "muncul") — kejadian nyata di /: home mobile blank abis rule ini
   sempat berlaku global. /shop TIDAK hydrate sama sekali jadi aman dipaksa
   lewat CSS. Kalau nanti hero home/product juga mau dibikin responsif,
   itu harus ditangani terpisah dengan cara yang gak bentrok sama Framer
   Motion (JANGAN pakai pola height!important yang sama). */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-tR1hz .framer-WGaDY.framer-v-xx7dxl.framer-ez685k { height: 450px !important; }
}
@media (max-width: 809.98px) {
  /* 217px (proporsional murni dari rasio lebar) ternyata kekecilan: kartu teks
     "Alina + tagline + tombol" (Contents Wrapper) butuh ~152-210px sendiri dan
     nutupin hampir seluruh box, jadi foto slider nyaris tak kelihatan sama
     sekali (bukan cuma proporsional, tapi literally ketutup). Dinaikkan ke
     400px supaya ada ruang sisa yang nyata buat foto di luar kartu teks. */
  .framer-tR1hz .framer-WGaDY.framer-v-64gj2l.framer-ez685k { height: 400px !important; }
}

/* Fix: /shop punya wrapper luar (.framer-tR1hz .framer-k4rd43-container) yang
   position:sticky setinggi 75% layar (75vh) membungkus Hero Section di atas.
   Di HP, itu bikin hero "nempel" pas discroll lalu lepas mendadak begitu budget
   scroll-nya abis — kerasa seperti scroll "ketahan lalu mantul". Dimatiin
   khusus mobile; wrapper ini cuma dipakai di shop.html jadi aman gak nyentuh
   halaman lain. */
@media (max-width: 809.98px) {
  .framer-tR1hz .framer-k4rd43-container { position: static !important; height: auto !important; }
}

/* Fix: tombol "Urutkan" (Filter Button Framer, direlabel oleh alina-catalog.js)
   cuma tinggi 28px (height:min-content + padding kecil) — di bawah rekomendasi
   tap-target minimum 44px dari Apple/Google. Cuma dipakai di shop.html. */
@media (max-width: 809.98px) {
  .framer-fg6p8g-container { min-height: 44px !important; }
  .framer-fg6p8g-container .framer-4k9cwy { padding: 14px 16px !important; }
}