/* ============================================================
   TEMA TASKULIT.ID — tata letak & rasa visual bergaya "Ocean"
   (preset Expression, Clean Canvas) dibangun ulang dari nol.

   Tidak ada kode tema Shopify yang disalin di sini: seluruh berkas ini
   ditulis sendiri, hanya mengikuti proporsi, warna, dan tipografi yang
   sama. Tujuannya satu — halaman ringan yang tetap terasa mahal.

   Aturan yang dipegang:
   - Satu berkas CSS untuk seluruh situs. Tidak ada framework, tidak ada
     @import ke internet. Font pun dimuat dari server sendiri.
   - Semua ukuran memakai skala yang sudah ditentukan di :root, supaya
     jarak antar bagian konsisten tanpa angka ajaib bertebaran.
   - Layar kecil didahulukan; aturan untuk layar lebar ditambahkan lewat
     @media di bawah tiap bagian, bukan dikumpulkan di akhir berkas.
   ============================================================ */

/* ---------- 1. Dasar & token ---------- */

:root {
  /* Warna — diambil dari preset Ocean */
  --teal: #008085;          /* aksen utama: tombol, tautan, harga diskon */
  --teal-gelap: #00666a;    /* keadaan hover */
  --teal-muda: #e6f2f2;     /* latar lembut untuk blok sorotan */
  --sage: #c6d8d3;          /* pita pengumuman di paling atas */
  --sage-muda: #eef4f2;

  --judul: #3c3c3c;         /* seluruh h1–h6 dan harga */
  --teks: #727685;          /* teks isi */
  --teks-samar: #9296a3;    /* keterangan, label kecil */
  --nav: #5c5c5f;           /* tautan navigasi */
  --garis: #e6e7ea;         /* garis pemisah */
  --garis-tua: #d4d6dc;
  --latar: #ffffff;
  --latar-lembut: #f7f8f9;  /* latar kartu & bagian selang-seling */
  --merah: #c0392b;         /* label diskon, peringatan stok */
  --kuning: #f7c346;        /* bintang ulasan */

  /* Bentuk */
  --radius: 3px;            /* Ocean nyaris bersudut tajam */
  --radius-besar: 6px;

  /* Jarak — kelipatan 4 */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px;

  /* Lebar isi */
  --lebar: 1280px;
  --lebar-sempit: 760px;    /* untuk badan artikel: ±75 karakter per baris */
  --tepi: 16px;             /* jarak ke tepi layar di ponsel */

  --bayang: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
  --bayang-kuat: 0 4px 12px rgba(0, 0, 0, .08), 0 16px 48px rgba(0, 0, 0, .08);

  --alih: 160ms ease;       /* durasi transisi baku */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; transition: color var(--alih); }
a:hover { color: var(--teal-gelap); }

/* Fokus keyboard harus selalu terlihat — ini syarat aksesibilitas, bukan hiasan. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Hormati pengguna yang mematikan animasi di setelan sistemnya. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 2. Tipografi ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--r3);
  color: var(--judul);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(28px, 5vw, 44px); }
h2 { font-size: clamp(23px, 3.4vw, 32px); }
h3 { font-size: clamp(19px, 2.4vw, 23px); }
h4 { font-size: 18px; }

p { margin: 0 0 var(--r4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--teks);
}

/* Judul bagian dengan garis tipis di bawah — pola khas Ocean. */
.judul-bagian {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r4);
  margin-bottom: var(--r5);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--garis);
}
.judul-bagian h2 { margin: 0; }
.judul-bagian .tautan-semua {
  flex: none;
  font-size: 15px;
  color: var(--nav);
}
.judul-bagian .tautan-semua:hover { color: var(--teal); }

/* Label kecil huruf besar — dipakai di atas judul blok promo. */
.label-kecil {
  display: block;
  margin-bottom: var(--r2);
  color: var(--teks-samar);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Disembunyikan dari mata, tetap terbaca pembaca layar. */
.khusus-pembaca-layar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tautan "lompat ke isi" untuk pengguna keyboard. */
.lompat-isi {
  position: absolute;
  left: var(--r4);
  top: -60px;
  z-index: 100;
  padding: var(--r2) var(--r4);
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius);
  transition: top var(--alih);
}
.lompat-isi:focus { top: var(--r2); color: #fff; }

/* ---------- 3. Tata letak ---------- */

.wrap {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--tepi);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--r5); } }

.bagian { padding-block: var(--r7); }
@media (min-width: 768px) { .bagian { padding-block: var(--r8); } }

.bagian-lembut { background: var(--latar-lembut); }

.grid { display: grid; gap: var(--r4); }
@media (min-width: 768px) { .grid { gap: var(--r5); } }

/* ---------- 4. Tombol & isian ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  padding: 10px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background var(--alih), border-color var(--alih), color var(--alih);
}
.btn:hover { background: var(--teal-gelap); color: #fff; }
/* Ikon di dalam tombol harus tunduk pada ukuran teks, bukan memuai memenuhi
   tombol. Tanpa batas ini SVG sebaris mengambil seluruh ruang yang tersedia. */
.btn svg { flex: none; width: 18px; height: 18px; }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
}

.btn-garis {
  background: transparent;
  border-color: var(--garis-tua);
  color: var(--judul);
}
.btn-garis:hover {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}

.btn-putih {
  background: #fff;
  color: var(--judul);
}
.btn-putih:hover { background: #fff; color: var(--teal); }

.btn-kecil { padding: 7px 16px; font-size: 14px; }
.btn-lebar { width: 100%; }

.btn-wa { background: #25d366; }
.btn-wa:hover { background: #1da851; }

input[type=text], input[type=tel], input[type=email], input[type=search],
input[type=number], select, textarea {
  width: 100%;
  padding: 10px var(--r3);
  border: 1px solid var(--garis-tua);
  border-radius: var(--radius);
  background: #fff;
  color: var(--judul);
  font: inherit;
  font-size: 16px;   /* 16px mencegah Safari iOS otomatis memperbesar layar */
  transition: border-color var(--alih);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  outline: none;
}
label { display: block; margin-bottom: var(--r1); font-size: 14px; color: var(--judul); }

/* ---------- 5. Pita pengumuman ---------- */

.pengumuman {
  background: var(--sage);
  color: var(--judul);
  font-size: 14px;
  text-align: center;
}
.pengumuman .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  min-height: 38px;
  padding-block: var(--r1);
}
.pengumuman a { color: var(--judul); text-decoration: underline; text-underline-offset: 3px; }
.pengumuman a:hover { color: var(--teal-gelap); }

/* ---------- 6. Kepala halaman ---------- */

.kepala {
  position: relative;
  z-index: 40;
  background: var(--latar);
  border-bottom: 1px solid var(--garis);
}

/* Baris atas: kontak kiri — logo tengah — ikon kanan. */
.kepala-atas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--r3);
  padding-block: var(--r4);
}

.kepala-kiri { display: flex; align-items: center; gap: var(--r4); font-size: 14px; }
.kepala-kanan { display: flex; align-items: center; justify-content: flex-end; gap: var(--r1); }

.merek {
  display: inline-flex;
  align-items: center;
  /* tanpa jarak: "TASKULIT" dan ".id" harus menempel jadi satu kata */
  gap: 0;
  color: var(--judul);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.merek:hover { color: var(--judul); }
.merek img { width: 34px; height: 34px; }
.merek b { font-weight: 700; }
.merek span { font-weight: 400; color: var(--teks); }

/* Tombol ikon (cari, keranjang, menu) */
.ikon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--nav);
  cursor: pointer;
  transition: color var(--alih), background var(--alih);
}
.ikon-btn:hover { color: var(--teal); background: var(--latar-lembut); }
.ikon-btn svg { width: 21px; height: 21px; }

.keranjang-btn { position: relative; }
.keranjang-jml {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}
.keranjang-jml[hidden] { display: none; }

/* Baris bawah: navigasi utama, rata tengah. */
.kepala-nav {
  display: none;
  border-top: 1px solid var(--garis);
}
.kepala-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r5);
  margin: 0;
  padding: var(--r3) 0;
  list-style: none;
}
.kepala-nav a {
  position: relative;
  display: block;
  padding-block: var(--r1);
  color: var(--nav);
  font-size: 15px;
}
.kepala-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform var(--alih);
}
.kepala-nav a:hover, .kepala-nav a[aria-current] { color: var(--teal); }
.kepala-nav a:hover::after, .kepala-nav a[aria-current]::after { transform: scaleX(1); }

@media (min-width: 900px) {
  .kepala-nav { display: block; }
  .menu-btn { display: none; }
}

/* Menu geser untuk ponsel */
.menu-hp {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(320px, 86vw);
  padding: var(--r5) var(--r4);
  background: #fff;
  box-shadow: var(--bayang-kuat);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.menu-hp[data-buka] { transform: none; }
.menu-hp ul { margin: 0; padding: 0; list-style: none; }
.menu-hp li + li { border-top: 1px solid var(--garis); }
.menu-hp a {
  display: block;
  padding: var(--r3) 0;
  color: var(--judul);
  font-size: 17px;
}
.menu-hp a:hover { color: var(--teal); }
.menu-hp-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--r4);
  padding-bottom: var(--r4);
  border-bottom: 1px solid var(--garis);
}

.tirai {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 22, 28, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.tirai[data-buka] { opacity: 1; visibility: visible; }

/* Kotak pencarian yang muncul dari kepala halaman */
.cari-panel {
  display: none;
  padding-block: var(--r4);
  border-top: 1px solid var(--garis);
}
.cari-panel[data-buka] { display: block; }
.cari-form { display: flex; gap: var(--r2); max-width: 560px; margin-inline: auto; }

/* ---------- 7. Jejak navigasi ---------- */

.remah {
  padding-block: var(--r3);
  color: var(--teks-samar);
  font-size: 13px;
}
.remah a { color: var(--teks-samar); }
.remah a:hover { color: var(--teal); }
.remah span { margin-inline: var(--r1); }

/* ---------- 8. Sorotan utama di beranda ----------

   CATATAN PENTING TENTANG RESOLUSI FOTO.

   Seluruh foto produk toko ini lebarnya paling besar 320 piksel — itu batas
   yang dipasang panel admin POS saat foto diunggah, dan tidak ada salinan yang
   lebih besar di mana pun. Rancangan awal bagian ini meniru Ocean apa adanya:
   satu foto dibentangkan penuh sebagai latar selebar ±800 piksel. Hasilnya
   foto 240 piksel dipaksa membesar 2,5 kali dan terlihat jelas buram.

   Jadi susunannya diubah: foto TIDAK PERNAH dibentangkan. Latar belakangnya
   bidang warna, dan fotonya diletakkan di dalam bingkai seukuran aslinya
   memakai object-fit: contain. Rasanya jadi seperti etalase — produk berdiri
   di atas latar bersih — dan setiap foto tampil tajam karena tidak ada satu
   pun yang ditampilkan melebihi ukuran aslinya.

   Kalau suatu saat ada foto beresolusi tinggi, naikkan --foto-maks di bawah.
   Tidak ada yang lain yang perlu diubah. */

:root {
  --foto-maks: 320px;   /* lebar asli terbesar yang dimiliki foto produk */
}

.sorot-kisi {
  display: grid;
  gap: var(--r3);
  margin-top: var(--r4);
}
@media (min-width: 900px) {
  .sorot-kisi { grid-template-columns: 2fr 1fr 1fr; align-items: stretch; }
}

/* Panel besar: teks di kiri, foto produk di kanan pada ukuran aslinya. */
.sorot-besar {
  display: grid;
  gap: var(--r5);
  align-items: center;
  padding: var(--r6) var(--r5);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-muda) 100%);
  color: var(--judul);
}
@media (min-width: 600px) {
  .sorot-besar { grid-template-columns: 1fr auto; padding: var(--r7) var(--r6); }
}
.sorot-teks h2 {
  margin-bottom: var(--r3);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
}
.sorot-teks p { margin-bottom: var(--r5); font-size: 17px; color: #4a5a55; }

/* Bingkai foto: putih, berbayang tipis, dan tidak pernah lebih besar dari
   foto aslinya. `contain` menjaga proporsi — foto potret tetap potret, tidak
   dipotong atas-bawah seperti kalau memakai `cover`. */
.bingkai-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--foto-maks);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: var(--r3);
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--bayang);
}
.bingkai-foto img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 500ms ease;
}
a:hover > .bingkai-foto img,
a:hover .bingkai-foto img { transform: scale(1.03); }

/* Dua kartu kecil di sebelah kanan panel besar. */
.sorot-kartu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--r4);
  padding: var(--r5);
  border-radius: var(--radius);
  background: var(--latar-lembut);
  color: var(--judul);
  text-align: center;
}
.sorot-kartu:hover { color: var(--teal); }
.sorot-kartu .bingkai-foto { box-shadow: none; }
.sorot-kartu b { display: block; font-size: 19px; }
.sorot-kartu span { display: block; color: var(--teks-samar); font-size: 14px; }

/* ---------- 9. Blok samping + daftar koleksi ----------
   Ocean menaruh paragraf sambutan di kolom sempit sebelah kiri,
   dengan daftar koleksi memanjang di sebelahnya. */

.sambutan-kisi { display: grid; gap: var(--r5); }
@media (min-width: 900px) {
  .sambutan-kisi { grid-template-columns: 320px 1fr; align-items: start; }
}

.blok-sambutan {
  padding: var(--r5);
  border-radius: var(--radius);
  background: var(--sage-muda);
}
.blok-sambutan h2 { font-size: 23px; }

.daftar-koleksi { display: grid; gap: var(--r3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .daftar-koleksi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .daftar-koleksi { grid-template-columns: repeat(4, 1fr); } }

.kartu-koleksi {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--latar-lembut);
  color: var(--judul);
  text-align: center;
}
.kartu-koleksi img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  object-fit: contain;
  transition: transform 500ms ease;
}
.kartu-koleksi > img {
  display: block;
  aspect-ratio: 1 / 1;
  padding: var(--r3);
}
.kartu-koleksi:hover img { transform: scale(1.05); }
.kartu-koleksi b {
  display: block;
  padding: var(--r3) var(--r2) var(--r1);
  font-size: 15px;
  font-weight: 600;
}
.kartu-koleksi span {
  display: block;
  padding-bottom: var(--r3);
  color: var(--teks-samar);
  font-size: 13px;
}
.kartu-koleksi:hover b { color: var(--teal); }

/* ---------- 10. Kartu produk & kisi ---------- */

.kisi-produk {
  display: grid;
  gap: var(--r4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .kisi-produk { grid-template-columns: repeat(3, 1fr); gap: var(--r5); } }
@media (min-width: 1040px) { .kisi-produk { grid-template-columns: repeat(4, 1fr); } }

.kartu-produk {
  display: flex;
  flex-direction: column;
  color: var(--judul);
}
.kartu-produk-gbr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--r3);
  padding: var(--r3);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--latar-lembut);
}
/* `contain`, bukan `cover`. Dengan `cover`, tas yang difoto potret (240x320)
   dipotong atas-bawah supaya memenuhi kotak — bagian gagang atau alas tas
   hilang dari kartu. Dengan `contain` seluruh produk terlihat utuh dan tidak
   ada foto yang dipaksa membesar melebihi ukuran aslinya. */
.kartu-produk-gbr img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 500ms ease, opacity 300ms ease;
}
.kartu-produk:hover .kartu-produk-gbr img { transform: scale(1.045); }

/* Foto kedua muncul saat kursor lewat — "rollover image" di Ocean. */
.kartu-produk-gbr .gbr-kedua {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.kartu-produk:hover .gbr-kedua { opacity: 1; }

.kartu-produk b {
  display: block;
  margin-bottom: var(--r1);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
.kartu-produk:hover b { color: var(--teal); }
.kartu-produk .merek-kecil {
  margin-bottom: var(--r1);
  color: var(--teks-samar);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.harga { color: var(--judul); font-size: 16px; }
.harga s { margin-left: var(--r2); color: var(--teks-samar); font-size: 14px; }

.label-produk {
  position: absolute;
  top: var(--r2); left: var(--r2);
  z-index: 1;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--judul);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.label-produk.diskon { background: var(--merah); }
.label-produk.habis  { background: var(--teks-samar); }

/* ---------- 11. Halaman produk ---------- */

.produk-kisi { display: grid; gap: var(--r5); }
@media (min-width: 900px) {
  .produk-kisi { grid-template-columns: 1.15fr 1fr; gap: var(--r7); align-items: start; }
}

.produk-galeri { display: grid; gap: var(--r3); }

/* Foto produk paling besar 320 piksel (lihat catatan di bagian 8). Kolom
   galeri di layar lebar bisa mencapai 600 piksel, jadi membentangkan foto ke
   sana berarti memperbesarnya dua kali lipat dan kehilangan ketajaman.
   Di sini fotonya ditaruh di tengah bingkai terang pada ukuran aslinya —
   tampak seperti produk yang difoto di atas latar bersih, dan tetap tajam. */
.produk-galeri-utama {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  /* 420px dikurangi padding 2x24px menyisakan 372px untuk fotonya. Foto
     tertinggi yang ada 320px, jadi perbesaran paling banyak 1,16x — masih
     tidak terlihat oleh mata. Angka yang lebih besar mulai terasa lembek.

     Panel admin sebenarnya menyimpan foto GALERI sampai 1200px; yang dibatasi
     320px hanya foto utama, demi lalu lintas sinkronisasi kasir. Produk lama
     terlanjur bergaleri 320px semua. Begitu ada produk yang diunggah ulang
     dengan foto besar, batas ini dan --foto-maks boleh dinaikkan bersamaan. */
  max-width: 420px;
  margin-inline: auto;
  padding: var(--r5);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--latar-lembut);
}
.produk-galeri-utama img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.produk-galeri-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--r2);
}
.produk-galeri-mini button {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  transition: border-color var(--alih);
}
.produk-galeri-mini button[aria-current='true'] { border-color: var(--teal); }
.produk-galeri-mini img { aspect-ratio: 1 / 1; object-fit: cover; }

.produk-info h1 { margin-bottom: var(--r2); }
.produk-harga {
  margin-bottom: var(--r4);
  color: var(--judul);
  font-size: 26px;
}
.produk-harga s { margin-left: var(--r3); color: var(--teks-samar); font-size: 18px; }
.produk-stok { margin-bottom: var(--r4); font-size: 15px; }
.produk-stok.ada   { color: var(--teal); }
.produk-stok.habis { color: var(--merah); }
.produk-desk { margin-block: var(--r5); }
.produk-desk h2 { font-size: 18px; }
.produk-aksi { display: grid; gap: var(--r3); margin-block: var(--r5); }
@media (min-width: 480px) { .produk-aksi { grid-template-columns: 1fr 1fr; } }

.produk-varian { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r4); }
.produk-varian button {
  padding: 7px 16px;
  border: 1px solid var(--garis-tua);
  border-radius: var(--radius);
  background: #fff;
  color: var(--judul);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--alih), color var(--alih);
}
.produk-varian button[aria-pressed='true'] { border-color: var(--teal); color: var(--teal); }
.produk-varian button:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* Daftar jaminan singkat di bawah tombol beli */
.produk-jaminan { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.produk-jaminan li {
  display: flex;
  gap: var(--r3);
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--garis);
  font-size: 14px;
}
.produk-jaminan svg { flex: none; width: 19px; height: 19px; color: var(--teal); }

/* ---------- 12. Produk sorotan (satu produk, tampil besar) ---------- */

.sorotan {
  display: grid;
  gap: var(--r5);
  align-items: center;
  padding: var(--r5);
  border-radius: var(--radius);
  background: var(--latar-lembut);
}
@media (min-width: 800px) {
  .sorotan { grid-template-columns: 1fr 1fr; gap: var(--r7); padding: var(--r7); }
}
.sorotan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* ---------- 13. Artikel ---------- */

.kisi-artikel { display: grid; gap: var(--r5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .kisi-artikel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kisi-artikel { grid-template-columns: repeat(3, 1fr); } }

.kartu-artikel { display: flex; flex-direction: column; color: var(--judul); }
.kartu-artikel img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--r3);
  border-radius: var(--radius);
  background: var(--latar-lembut);
  transition: opacity var(--alih);
}
.kartu-artikel:hover img { opacity: .9; }
.kartu-artikel time {
  display: block;
  margin-bottom: var(--r2);
  color: var(--teks-samar);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kartu-artikel h3 { margin-bottom: var(--r2); font-size: 19px; }
.kartu-artikel:hover h3 { color: var(--teal); }
.kartu-artikel p { color: var(--teks); font-size: 15px; }

/* Badan artikel — dibaca panjang, jadi lebarnya dibatasi dan ukurannya dinaikkan. */
.artikel-isi {
  max-width: var(--lebar-sempit);
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.75;
}
.artikel-isi h2 { margin-top: var(--r7); font-size: 26px; }
.artikel-isi h3 { margin-top: var(--r6); font-size: 21px; }
.artikel-isi img {
  margin-block: var(--r5);
  border-radius: var(--radius);
}
.artikel-isi ul, .artikel-isi ol { margin: 0 0 var(--r4); padding-left: var(--r5); }
.artikel-isi li { margin-bottom: var(--r2); }
.artikel-isi blockquote {
  margin: var(--r5) 0;
  padding: var(--r2) 0 var(--r2) var(--r5);
  border-left: 3px solid var(--sage);
  color: var(--judul);
  font-size: 19px;
  font-style: italic;
}
.artikel-isi a { text-decoration: underline; text-underline-offset: 3px; }
.artikel-isi table { width: 100%; border-collapse: collapse; margin-bottom: var(--r5); font-size: 15px; }
.artikel-isi th, .artikel-isi td { padding: var(--r2) var(--r3); border: 1px solid var(--garis); text-align: left; }
.artikel-isi th { background: var(--latar-lembut); color: var(--judul); }

.artikel-kepala {
  max-width: var(--lebar-sempit);
  margin-inline: auto;
  margin-bottom: var(--r6);
  text-align: center;
}
.artikel-kepala time { color: var(--teks-samar); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
/* Penanda artikel yang isinya sudah diperbarui — memberi tahu pembaca bahwa
   tanggal terbit lama bukan berarti isinya usang. */
.artikel-diperbarui {
  display: inline-block;
  margin-left: var(--r2);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--teal-muda);
  color: var(--teal-gelap);
  font-size: 12px;
  font-weight: 600;
}
/* Gambar utama artikel dipotong ke perbandingan 3:2.

   Foto lama dari WordPress campur aduk: ada yang potret 3024x4032 dari ponsel.
   Dibiarkan apa adanya, satu foto potret memenuhi seluruh layar dan mendorong
   isi artikel jauh ke bawah. Dengan perbandingan tetap + object-fit, tingginya
   bisa diramalkan sejak sebelum gambarnya selesai dimuat — jadi tidak ada
   pergeseran tata letak (CLS), yang termasuk salah satu nilai inti PageSpeed. */
.artikel-gbr-utama {
  max-width: 1000px;
  margin: 0 auto var(--r7);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--latar-lembut);
}
.artikel-gbr-utama img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Daftar isi otomatis di awal artikel panjang */
.daftar-isi {
  margin-bottom: var(--r6);
  padding: var(--r4) var(--r5);
  border-radius: var(--radius);
  background: var(--latar-lembut);
  font-size: 15px;
}
.daftar-isi b { display: block; margin-bottom: var(--r2); color: var(--judul); }
.daftar-isi ol { margin: 0; padding-left: var(--r5); }
.daftar-isi li { margin-bottom: var(--r1); }

/* ---------- 14. Testimoni ---------- */

.kisi-testimoni { display: grid; gap: var(--r5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .kisi-testimoni { grid-template-columns: repeat(3, 1fr); } }

.testimoni {
  padding: var(--r5);
  border-radius: var(--radius);
  background: var(--latar-lembut);
  text-align: center;
}
.testimoni .bintang { color: var(--kuning); font-size: 15px; letter-spacing: 2px; }
.testimoni blockquote { margin: var(--r3) 0; color: var(--teks); font-size: 16px; }
.testimoni cite { color: var(--judul); font-size: 14px; font-style: normal; font-weight: 600; }

/* ---------- 15. Galeri gambar & ubin promo ---------- */

.galeri { display: grid; gap: var(--r2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .galeri { grid-template-columns: repeat(4, 1fr); } }
.galeri img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }

.ubin-promo { display: grid; gap: var(--r4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .ubin-promo { grid-template-columns: repeat(3, 1fr); } }

/* Ubin promo. Sama seperti sorotan beranda: foto tidak dibentangkan jadi latar,
   melainkan berdiri di sebelah teks pada ukuran aslinya. */
.ubin {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--r4);
  align-items: center;
  padding: var(--r4);
  border-radius: var(--radius);
  background: #fff;
  color: var(--judul);
}
.ubin .bingkai-foto { width: 120px; max-width: 120px; padding: var(--r2); box-shadow: none; background: var(--latar-lembut); }
.ubin:hover { color: var(--teal); }
.ubin-isi b { display: block; font-size: 19px; line-height: 1.25; }
.ubin-isi span { color: var(--teks-samar); font-size: 14px; }

/* ---------- 16. Kaki halaman ---------- */

.kaki {
  margin-top: var(--r9);
  padding-top: var(--r7);
  border-top: 1px solid var(--garis);
  background: var(--latar);
  font-size: 15px;
}
.kaki-kisi { display: grid; gap: var(--r6); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .kaki-kisi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kaki-kisi { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.kaki h3 { margin-bottom: var(--r3); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.kaki ul { margin: 0; padding: 0; list-style: none; }
.kaki li { margin-bottom: var(--r2); }
.kaki a { color: var(--teks); }
.kaki a:hover { color: var(--teal); }

/* Daftar kontak di kaki halaman: ikon sejajar baris pertama teks, bukan
   di tengah — supaya alamat yang jatuh ke dua baris tetap rapi. */
.kaki-kontak { margin: 0; padding: 0; list-style: none; }
.kaki-kontak li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--r2);
  align-items: start;
  margin-bottom: var(--r3);
  line-height: 1.5;
}
.kaki-kontak svg { width: 17px; height: 17px; margin-top: 3px; color: var(--teal); }
.kaki-kontak a { color: var(--teks); }
.kaki-kontak a:hover { color: var(--teal); }
.kaki-cs { color: var(--teks-samar); }

.kaki-sosial { display: flex; gap: var(--r2); margin-top: var(--r4); }
.kaki-sosial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  color: var(--nav);
}
.kaki-sosial a:hover { border-color: var(--teal); color: var(--teal); }
.kaki-sosial svg { width: 18px; height: 18px; }

.kaki-bawah {
  margin-top: var(--r7);
  padding-block: var(--r4);
  border-top: 1px solid var(--garis);
  color: var(--teks-samar);
  font-size: 13px;
}
.kaki-bawah .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
}

/* ---------- 17. Laci keranjang ---------- */

.laci {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  background: #fff;
  box-shadow: var(--bayang-kuat);
  transform: translateX(100%);
  transition: transform 240ms ease;
}
.laci[data-buka] { transform: none; }
.laci-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--garis);
}
.laci-kepala h2 { margin: 0; font-size: 19px; }
.laci-isi { flex: 1; overflow-y: auto; padding: var(--r4) var(--r5); }
.laci-kaki { padding: var(--r4) var(--r5); border-top: 1px solid var(--garis); }
.laci-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--r4);
  color: var(--judul);
  font-size: 18px;
  font-weight: 600;
}

.baris-keranjang { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--r3); padding-block: var(--r4); border-bottom: 1px solid var(--garis); }
.baris-keranjang img { width: 72px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.baris-keranjang b { display: block; font-size: 14px; font-weight: 400; line-height: 1.4; }
.baris-keranjang .harga { font-size: 14px; }
.jml-atur { display: inline-flex; align-items: center; border: 1px solid var(--garis-tua); border-radius: var(--radius); }
.jml-atur button { width: 30px; height: 30px; border: 0; background: none; color: var(--nav); font-size: 16px; cursor: pointer; }
.jml-atur span { min-width: 28px; text-align: center; font-size: 14px; }

.kosong { padding: var(--r7) 0; color: var(--teks-samar); text-align: center; }

/* ---------- 18. Penyaring & urutan di halaman koleksi ---------- */

.koleksi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  margin-bottom: var(--r5);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--garis);
  font-size: 14px;
}
.saring-pil { display: flex; flex-wrap: wrap; gap: var(--r2); }
.saring-pil a {
  padding: 6px 14px;
  border: 1px solid var(--garis-tua);
  border-radius: 999px;
  color: var(--nav);
  font-size: 14px;
}
.saring-pil a:hover { border-color: var(--teal); color: var(--teal); }
.saring-pil a[aria-current] { border-color: var(--teal); background: var(--teal); color: #fff; }

/* ---------- 19. Halaman & utilitas ---------- */

.halaman-kepala { padding-block: var(--r6) var(--r5); text-align: center; }
.halaman-kepala p { max-width: 640px; margin-inline: auto; }

.pesan {
  padding: var(--r3) var(--r4);
  border-radius: var(--radius);
  background: var(--teal-muda);
  color: var(--teal-gelap);
  font-size: 15px;
}
.pesan.galat { background: #fdecea; color: #a3261a; }

/* Disembunyikan di ponsel supaya baris kepala tidak berdesakan. */
.sembunyi-hp { display: none; color: var(--nav); }
.sembunyi-hp svg { width: 20px; height: 20px; }
.sembunyi-hp:hover { color: var(--teal); }
@media (min-width: 900px) { .sembunyi-hp { display: inline-flex; } }

.tengah { text-align: center; }
.mt-5 { margin-top: var(--r5); }
.mt-6 { margin-top: var(--r6); }
.mb-0 { margin-bottom: 0; }

/* Tombol WhatsApp melayang — dipertahankan karena ini jalur pesanan utama toko. */
.wa-apung {
  position: fixed;
  right: var(--r4);
  bottom: var(--r4);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: var(--bayang-kuat);
  transition: transform var(--alih);
}
.wa-apung:hover { transform: scale(1.06); color: #fff; }
.wa-apung svg { width: 28px; height: 28px; }

@media print {
  .kepala, .kaki, .wa-apung, .laci, .menu-hp, .tirai, .pengumuman { display: none !important; }
  body { color: #000; }
}