/* ==========================================================================
   OTENTIQ — the spirit of Jogja
   Design system: "Jogja Heritage Editorial"

   Token warna diambil dengan sampling piksel dari logo resmi pada
   "katalog otentiq.pdf": biru nila #15426A, emas Tugu #B47E16,
   hijau daun #617F3D, krem #E7D5B8.

   Catatan kontras (WCAG AA):
   - --ot-gold (#B47E16) rasionya 3.5:1 di atas putih. Boleh untuk judul
     besar, garis, ikon, dan latar tombol — TIDAK untuk teks kecil.
     Untuk teks kecil berwarna emas pakai --ot-gold-ink (#8A5F0F, 5.6:1).
   - --ot-green di atas putih 4.6:1, --ot-brick 6.5:1, --ot-muted di atas
     krem 5.1:1. Semua lulus AA untuk teks normal.
   ========================================================================== */

:root {
  /* Warna merek */
  --ot-blue:        #15426A;   /* primer — nila, dari huruf "OTENTIQ" */
  --ot-blue-deep:   #0E2F4D;   /* footer & area gelap */
  --ot-blue-soft:   #246BA5;   /* link & aksen ringan */
  --ot-gold:        #B47E16;   /* sekunder — emas Tugu (dekorasi & tombol) */
  --ot-gold-ink:    #8A5F0F;   /* varian aman untuk TEKS kecil */
  --ot-gold-soft:   #DCC38A;   /* garis & ornamen di atas gelap */
  --ot-green:       #617F3D;   /* aksen daun */
  --ot-brick:       #B3261E;   /* harga diskon / peringatan */
  --ot-wa:          #0F7A40;   /* WhatsApp, digelapkan agar teks putih AA */

  /* Netral hangat */
  --ot-cream:       #F6EFE3;   /* latar seksi */
  --ot-cream-deep:  #E7D5B8;   /* latar kartu & placeholder */
  --ot-ink:         #1B1712;   /* teks utama */
  --ot-muted:       #6E6459;   /* teks sekunder */
  --ot-border:      #E2D8C7;   /* garis */
  --ot-border-soft: #EFE7DA;

  /* Tipografi */
  --ot-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ot-body:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ruang */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --ot-container: 1280px;
  --ot-radius: 3px;
  --ot-shadow:  0 1px 2px rgba(27,23,18,.05), 0 12px 32px -20px rgba(27,23,18,.30);
  --ot-ease: cubic-bezier(.22,.61,.36,1);

  /* Alias lama supaya markup/inline-style warisan tetap konsisten */
  --ec-blue-bar:    var(--ot-blue-deep);
  --ec-blue-deep:   var(--ot-blue);
  --ec-red:         var(--ot-brick);
  --ec-green-wa:    var(--ot-wa);
  --ec-gray-strike: var(--ot-muted);
  --ec-black:       var(--ot-ink);
  --ec-border:      var(--ot-border);
  --ec-muted:       var(--ot-muted);
  --ec-container:   var(--ot-container);
}

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

body {
  margin: 0;
  font-family: var(--ot-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ot-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--ot-display); font-weight: 700; line-height: 1.18; margin: 0; }

/* Fokus keyboard selalu terlihat — jangan pernah dihapus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ot-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.ec-container { max-width: var(--ot-container); margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Ornamen & judul */
/* Floret 5 kelopak — mengutip bunga emas di ujung huruf "Q" pada logo. */
.ot-ornament { color: var(--ot-gold); flex: 0 0 auto; }

.ot-eyebrow {
  font-family: var(--ot-body);
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ot-gold-ink);
}

.ot-heading { text-align: center; margin: var(--sp-9) 0 var(--sp-6); }
.ot-heading__rule {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ot-heading__rule::before,
.ot-heading__rule::after {
  content: ""; height: 1px; width: clamp(28px, 8vw, 74px);
  background: linear-gradient(90deg, transparent, var(--ot-gold));
}
.ot-heading__rule::after { background: linear-gradient(90deg, var(--ot-gold), transparent); }
.ot-heading :is(h1, h2) {
  font-family: var(--ot-display);
  font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; color: var(--ot-blue);
  margin: 0;
}
.ot-heading p {
  max-width: 56ch; margin: var(--sp-3) auto 0;
  font-size: 15px; color: var(--ot-muted);
}

/* Judul section warisan (dipakai partial lama) */
.ec-section-title {
  font-family: var(--ot-display); text-align: center;
  font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; color: var(--ot-blue);
  margin: var(--sp-9) 0 var(--sp-6);
}

.ot-viewall-wrap { display: flex; justify-content: center; }
.ec-viewall {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ot-blue); border-bottom: 1px solid var(--ot-gold);
  padding-bottom: 3px; margin: var(--sp-6) auto 0;
}
.ec-viewall:hover { color: var(--ot-gold-ink); }

/* ---------------------------------------------------------- Announcement */
.ec-announce {
  background: var(--ot-blue-deep); color: var(--ot-cream);
  font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
  text-align: center; padding: 9px 16px;
}
.ec-announce a { display: inline-block; }
.ec-announce a:hover { color: var(--ot-gold-soft); }

/* --------------------------------------------------------------- Header */
.ec-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--ot-border);
}
/* Garis emas tipis — menandai batas header tanpa menambah berat visual. */
.ec-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ot-gold) 30%, var(--ot-gold) 70%, transparent);
  opacity: .5;
}
.ec-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-4); height: 78px;
}
.ec-header__logo { display: flex; align-items: center; gap: 10px; }
/* Wordmark cukup detail (ada Tugu + ornamen + tagline), jadi butuh tinggi
   memadai supaya "the spirit of Jogja" tetap terbaca. */
.ec-header__logo img { height: 58px; width: auto; object-fit: contain; }
.ec-header__logo span {
  font-family: var(--ot-display); font-size: 22px; font-weight: 700;
  letter-spacing: .04em; color: var(--ot-blue);
}

.ec-nav { display: flex; align-items: center; gap: var(--sp-6); justify-self: center; }
.ec-nav__item { position: relative; }
.ec-nav__item > a {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ot-ink); padding: 28px 0; white-space: nowrap;
}
.ec-nav__item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1.5px;
  background: var(--ot-gold); transform: scaleX(0); transform-origin: center;
  transition: transform .22s var(--ot-ease);
}
.ec-nav__item > a:hover::after,
.ec-nav__item:focus-within > a::after { transform: scaleX(1); }
.ec-caret { font-size: 8px; opacity: .65; }

.ec-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 208px; background: #fff;
  border: 1px solid var(--ot-border); border-top: 2px solid var(--ot-gold);
  box-shadow: var(--ot-shadow); padding: var(--sp-2) 0;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ot-ease), transform .18s var(--ot-ease);
}
.ec-nav__item.has-children:hover > .ec-dropdown,
.ec-nav__item.has-children:focus-within > .ec-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ec-dropdown a {
  display: block; padding: 9px 18px; font-size: 13.5px; color: var(--ot-ink);
  transition: background .15s, color .15s;
}
.ec-dropdown a:hover { background: var(--ot-cream); color: var(--ot-blue); }

.ec-header__actions { display: flex; align-items: center; gap: var(--sp-1); justify-self: end; }
.ec-iconbtn {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: var(--ot-ink); transition: color .15s;
}
.ec-iconbtn:hover { color: var(--ot-gold-ink); }
.ec-cart-count {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--ot-brick); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}
/* `display:grid` di atas mengalahkan [hidden]{display:none} bawaan browser,
   jadi badge harus disembunyikan eksplisit saat keranjang kosong. */
.ec-cart-count[hidden] { display: none; }

.ec-searchbar {
  border-top: 1px solid var(--ot-border); background: var(--ot-cream);
  padding: var(--sp-3) 0;
}
.ec-searchbar input {
  width: 100%; padding: 12px 16px; font-size: 15px; font-family: var(--ot-body);
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: #fff;
}
.ec-searchbar input:focus { border-color: var(--ot-gold); outline: none; }

.ec-burger { display: none; }

/* ------------------------------------------------------------------ Hero */
.ot-hero {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 70vh, 700px);
  display: grid;
  background: var(--ot-blue-deep);
  overflow: hidden;
}
/* Semua slide menempati sel grid yang sama sehingga saling menumpuk tanpa
   position:absolute — tinggi seksi tetap mengikuti slide terpanjang. */
.ot-hero__slide {
  grid-area: 1 / 1; position: relative;
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ot-ease), visibility 0s linear .7s;
}
.ot-hero__slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .7s var(--ot-ease), visibility 0s;
}
.ot-hero__bg { position: absolute; inset: 0; }
.ot-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
/* Scrim: menjamin teks putih tetap kontras di atas foto apa pun. */
.ot-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,26,43,.88) 0%, rgba(9,26,43,.62) 42%, rgba(9,26,43,.18) 78%),
    linear-gradient(0deg,  rgba(9,26,43,.55) 0%, transparent 42%);
}
.ot-hero__inner { position: relative; z-index: 2; padding: var(--sp-8) 0; width: 100%; }
.ot-hero__content { max-width: 620px; }
.ot-hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ot-gold-soft); margin-bottom: var(--sp-4);
}
.ot-hero__badge::before { content: ""; width: 30px; height: 1px; background: var(--ot-gold-soft); }
.ot-hero__title {
  font-family: var(--ot-display); color: #fff;
  font-size: clamp(34px, 5.4vw, 62px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 var(--sp-4);
}
.ot-hero__title em { font-style: italic; color: var(--ot-gold-soft); }
.ot-hero__desc {
  font-size: clamp(15px, 1.5vw, 17.5px); color: rgba(255,255,255,.90);
  line-height: 1.65; margin: 0 0 var(--sp-6); max-width: 46ch;
}
.ot-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.ot-hero__dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--sp-5);
  display: flex; justify-content: center; gap: 10px;
}
.ot-hero__dot {
  position: relative;
  width: 34px; height: 4px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
  background: rgba(255,255,255,.40); transition: background .25s;
}
.ot-hero__dot.is-active { background: var(--ot-gold); }
/* Perbesar area sentuh ke 44px tanpa mengubah bentuk visual titiknya. */
.ot-hero__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------- Kartu produk */
.ec-card { position: relative; display: block; }
.ec-card__media {
  position: relative; overflow: hidden;
  background: var(--ot-cream-deep); aspect-ratio: 4 / 5;
  border-radius: var(--ot-radius);
}
.ec-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ot-ease);
}
.ec-card:hover .ec-card__media img { transform: scale(1.05); }
.ec-card__eyebrow {
  margin-top: var(--sp-4); text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ot-muted);
}
.ec-card__title {
  font-family: var(--ot-display);
  margin: var(--sp-2) 0; font-size: 17px; font-weight: 600;
  line-height: 1.35; text-align: center; color: var(--ot-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .18s;
}
.ec-card:hover .ec-card__title { color: var(--ot-blue); }
/* Produk tanpa kategori tidak punya eyebrow — beri jarak dari gambar di sini. */
.ec-card__media + .ec-card__title { margin-top: var(--sp-4); }

.ec-price { text-align: center; font-size: 14.5px; font-family: var(--ot-body); }
.ec-price__old {
  color: var(--ot-muted); text-decoration: line-through;
  margin-right: 8px; font-size: 13px;
}
.ec-price__now { color: var(--ot-blue); font-weight: 700; letter-spacing: .01em; }
.ec-price__now.is-sale { color: var(--ot-brick); }

.ec-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: #8C6210; color: #fff; /* emas Tugu digelapkan: kontras teks putih 3,5 → 5,4 */
  font-family: var(--ot-body);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px;
}
.ec-badge--inline { position: static; display: inline-block; margin-top: var(--sp-2); }
.ec-badge--flash  { background: var(--ot-brick); }

.ec-soldout {
  position: absolute; inset: auto 0 0 0; background: rgba(14,47,77,.86); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-align: center; padding: 8px;
}

/* -------------------------------------------------------------- Slider */
.ec-slider-wrap { position: relative; }
.ec-slider {
  display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--sp-1);
}
.ec-slider::-webkit-scrollbar { display: none; }
.ec-slider > * { flex: 0 0 clamp(180px, 23%, 292px); scroll-snap-align: start; }

.ec-arrow {
  position: absolute; top: 34%; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ot-border); background: rgba(255,255,255,.96); cursor: pointer;
  display: grid; place-items: center; font-size: 17px; color: var(--ot-blue);
  box-shadow: var(--ot-shadow); transition: background .18s, border-color .18s, color .18s;
}
.ec-arrow--prev { left: -14px; }
.ec-arrow--next { right: -14px; }
.ec-arrow:hover { background: var(--ot-blue); border-color: var(--ot-blue); color: #fff; }

/* ------------------------------------------------------------- Cerita merek */
.ot-story { background: var(--ot-cream); padding: var(--sp-9) 0; margin-top: var(--sp-9); }
.ot-story__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.ot-story__media { position: relative; }
/* Lingkaran krem di belakang potongan foto — memberi bidang tanpa kotak keras. */
.ot-story__media::before {
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(96%, 460px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ot-cream-deep);
}
.ot-story__media img { position: relative; width: 100%; height: auto; }
/* Lingkaran di atas dipasang absolute, jadi ia tercetak di atas teks saudaranya
   yang statis. Di layar lebar teksnya ada di kolom sebelah sehingga tidak
   terasa; di HP (satu kolom) lingkarannya menjulur ke bawah dan menutupi
   "Tentang Otentiq" beserta ekor judulnya — teks jadi terlihat terpotong. */
.ot-story__body { position: relative; z-index: 1; }
.ot-story h2 {
  font-size: clamp(28px, 3.6vw, 44px); color: var(--ot-blue);
  margin: var(--sp-3) 0 var(--sp-4); line-height: 1.14;
}
.ot-story h2 em { font-style: italic; color: var(--ot-gold-ink); }
/* :not(.ot-eyebrow) — tanpa ini selektor ini lebih spesifik daripada
   .ot-eyebrow dan ikut membesarkan teks kecil di atas judul. */
.ot-story__body p:not(.ot-eyebrow) {
  font-size: 16px; color: var(--ot-muted); line-height: 1.75; margin: 0 0 var(--sp-4);
}
.ot-story__points {
  list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0;
  display: grid; gap: var(--sp-3);
}
.ot-story__points li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 15px; }
.ot-story__points svg { flex: 0 0 auto; color: var(--ot-green); margin-top: 3px; }
.ot-story__points strong { font-weight: 600; color: var(--ot-ink); }

/* ------------------------------------------------------------- Keunggulan */
.ec-valueprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ot-vp {
  background: #fff; border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius); padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color .2s, transform .2s var(--ot-ease), box-shadow .2s;
}
.ot-vp:hover { border-color: var(--ot-gold); transform: translateY(-2px); box-shadow: var(--ot-shadow); }
.ot-vp__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ot-cream); color: var(--ot-gold-ink); border: 1px solid var(--ot-border);
}
.ot-vp h3 { font-family: var(--ot-display); font-size: 20px; font-weight: 700; color: var(--ot-blue); }
.ot-vp p  { font-size: 14.5px; color: var(--ot-muted); line-height: 1.7; margin: 0; }
.ec-valueprops figure { margin: 0; border-radius: var(--ot-radius); overflow: hidden; }
.ec-valueprops figure img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- Testimoni */
.ec-testi { background: var(--ot-blue); padding: var(--sp-8) 0 var(--sp-9); margin-top: var(--sp-9); }
.ec-testi .ot-heading { margin-top: 0; }
.ec-testi .ot-heading h2 { color: #fff; }
.ec-testi .ot-heading p { color: rgba(255,255,255,.75); }
.ec-testi .ot-heading__rule::before { background: linear-gradient(90deg, transparent, var(--ot-gold-soft)); }
.ec-testi .ot-heading__rule::after  { background: linear-gradient(90deg, var(--ot-gold-soft), transparent); }
.ec-testi .ot-ornament { color: var(--ot-gold-soft); }
.ot-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }

.ec-testi__card {
  background: #fff; border-radius: var(--ot-radius); overflow: hidden;
  padding: var(--sp-6) var(--sp-5) 0; text-align: center;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
}
.ec-testi__title {
  font-family: var(--ot-display); color: var(--ot-blue);
  font-size: 20px; font-weight: 700; line-height: 1.3;
}
.ec-testi__sub {
  font-family: var(--ot-body); color: var(--ot-gold-ink);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.ec-testi__body { font-size: 14.5px; color: var(--ot-muted); line-height: 1.7; min-height: 84px; margin: 0; }
.ec-testi__stars { color: var(--ot-gold); letter-spacing: 4px; font-size: 16px; margin: var(--sp-4) 0 var(--sp-1); }
.ec-testi__name { font-size: 12.5px; color: var(--ot-muted); margin-bottom: var(--sp-4); }
.ec-testi__img { margin-top: auto; }
.ec-testi__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------- Instagram */
.ec-ig .ec-slider > * { border-radius: var(--ot-radius); overflow: hidden; position: relative; }
.ec-ig img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .5s var(--ot-ease); }
.ec-ig .ec-slider > a:hover img { transform: scale(1.06); }
.ec-ig .ec-slider > a::after {
  content: ""; position: absolute; inset: 0; background: rgba(14,47,77,0);
  transition: background .25s;
}
.ec-ig .ec-slider > a:hover::after { background: rgba(14,47,77,.22); }
.ot-ig-handle { color: var(--ot-gold-ink); }

/* ------------------------------------------------------- Grid, filter, paging */
.ec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8) var(--sp-5); }
.ec-controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) 0; font-size: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ot-border); margin-bottom: var(--sp-7);
}
.ec-controls label { color: var(--ot-muted); margin-right: 8px; font-size: 13px; }
.ec-controls select {
  padding: 9px 12px; border: 1px solid var(--ot-border); background: #fff;
  font-size: 14px; font-family: var(--ot-body); border-radius: var(--ot-radius); color: var(--ot-ink);
}
.ec-count { color: var(--ot-muted); font-size: 13.5px; }

.ec-pagination { display: flex; gap: var(--sp-1); justify-content: center; margin: var(--sp-8) 0; font-size: 14px; }
.ec-pagination a, .ec-pagination span {
  min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px;
  border-radius: var(--ot-radius); color: var(--ot-ink); transition: background .15s, color .15s;
}
.ec-pagination a:hover { background: var(--ot-cream); }
.ec-pagination .is-active { background: var(--ot-blue); color: #fff; font-weight: 600; }

/* --------------------------------------------------------- Detail produk */
.ec-pdp {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4.5vw, 64px); padding-top: var(--sp-7);
}
.ec-pdp__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); align-content: start; }
.ec-pdp__gallery img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--ot-cream-deep); border-radius: var(--ot-radius);
}
.ec-pdp__gallery > :first-child { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
.ec-pdp__info { position: sticky; top: 100px; align-self: start; }
.ec-pdp__title {
  font-family: var(--ot-display); font-size: clamp(26px, 3vw, 36px);
  font-weight: 700; line-height: 1.2; color: var(--ot-blue); margin: 0 0 var(--sp-3);
}
.ec-pdp__price { font-size: 20px; margin-bottom: var(--sp-5); }
.ec-pdp__price .ec-price__old { font-size: 15px; }
.ec-pdp__price .ec-price__now { font-size: 22px; }

.ec-field { margin-bottom: var(--sp-5); }
.ec-field__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ot-muted); margin-bottom: var(--sp-2);
}
.ec-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ec-chip {
  border: 1px solid var(--ot-border); background: #fff; min-height: 44px; padding: 8px 18px;
  font-size: 13.5px; font-family: var(--ot-body); color: var(--ot-ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--ot-radius); transition: border-color .15s, background .15s, color .15s;
}
.ec-chip:hover { border-color: var(--ot-gold); }
.ec-chip.is-selected { border-color: var(--ot-blue); background: var(--ot-blue); color: #fff; font-weight: 600; }
.ec-chip[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.ec-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }

.ec-pdp__sizechart { margin: 0; }
.ec-figcaption { font-size: 11.5px; color: var(--ot-muted); padding-top: 5px; }

.ec-stock-note { font-size: 12.5px; color: var(--ot-brick); margin: var(--sp-2) 0 0; }
.ec-stock-note.is-out { font-weight: 600; }

.ec-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
}
.ec-qty button {
  width: 44px; height: 44px; border: 0; background: none; font-size: 18px;
  cursor: pointer; color: var(--ot-ink);
}
.ec-qty button:hover { color: var(--ot-gold-ink); }
.ec-qty input {
  width: 52px; height: 44px; border: 0; text-align: center;
  font-size: 15px; font-family: var(--ot-body); color: var(--ot-ink); background: none;
}

.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--ot-body); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  min-height: 50px; padding: 14px 26px;
  border: 0; cursor: pointer; width: 100%; text-align: center;
  border-radius: var(--ot-radius);
  transition: background .18s, color .18s, transform .12s var(--ot-ease);
}
.ec-btn:hover  { transform: translateY(-1px); }
.ec-btn:active { transform: translateY(0); }
.ec-btn--primary { background: var(--ot-gold); color: var(--ot-ink); }
.ec-btn--primary:hover { background: var(--ot-gold-ink); color: #fff; }
.ec-btn--wa { background: var(--ot-wa); color: #fff; }
.ec-btn--wa:hover { background: #0B5F31; }
.ec-btn--buy { background: var(--ot-blue); color: #fff; }
.ec-btn--buy:hover { background: var(--ot-blue-deep); }
.ec-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.ec-btn--ghost:hover { background: rgba(255,255,255,.14); }
.ec-btn--auto { width: auto; }
.ec-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ec-btn-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); }
.ec-btn-row .ec-btn--wa { width: auto; padding: 14px 20px; }

.ec-payments { border-top: 1px solid var(--ot-border); margin-top: var(--sp-6); padding-top: var(--sp-5); }
.ec-payments h4 {
  font-family: var(--ot-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted); margin: 0 0 var(--sp-3);
}
.ec-payments__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ec-payments img { height: 24px; width: auto; }
.ec-paychip {
  border: 1px solid var(--ot-border); border-radius: 2px; padding: 5px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ot-muted); background: var(--ot-cream);
}

.ec-desc { margin-top: var(--sp-6); font-size: 15px; line-height: 1.8; color: var(--ot-muted); }
.ec-desc h3 {
  font-family: var(--ot-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ot-ink); margin: 0 0 var(--sp-3);
}
.ec-desc p { margin: 0 0 var(--sp-3); }

/* ------------------------------------------------------------- Keranjang */
/* Markup keranjang dirender oleh site.js — kelas di bawah menjaga tampilannya
   tetap satu bahasa dengan sisa situs (tanpa hex di dalam JavaScript). */
.ec-cart-scroll { overflow-x: auto; }
.ec-cart-table { width: 100%; border-collapse: collapse; min-width: 580px; }
.ec-cart-row { border-bottom: 1px solid var(--ot-border); }
.ec-cart-cell { padding: var(--sp-3); font-size: 14px; vertical-align: middle; }
.ec-cart-cell--media { padding-left: 0; width: 88px; }
.ec-cart-cell--num { text-align: right; white-space: nowrap; }
.ec-cart-cell--qty { text-align: center; white-space: nowrap; }
.ec-cart-thumb {
  width: 68px; height: 85px; object-fit: cover;
  background: var(--ot-cream-deep); border-radius: var(--ot-radius);
}
.ec-cart-title { font-family: var(--ot-display); font-size: 16px; font-weight: 600; color: var(--ot-ink); }
.ec-cart-opts { font-size: 12.5px; color: var(--ot-muted); margin-top: 3px; }
.ec-cart-step {
  width: 32px; height: 32px; border: 1px solid var(--ot-border); background: #fff;
  cursor: pointer; color: var(--ot-ink); border-radius: var(--ot-radius); font-size: 15px;
}
.ec-cart-step:hover { border-color: var(--ot-gold); }
.ec-cart-qty { display: inline-block; min-width: 36px; font-weight: 600; }
.ec-cart-sub { font-weight: 700; color: var(--ot-blue); }
.ec-cart-remove {
  border: 0; background: none; color: var(--ot-brick); cursor: pointer;
  font-size: 13px; font-family: var(--ot-body); padding: 6px;
}
.ec-cart-remove:hover { text-decoration: underline; }
.ec-cart-summary {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap; border-top: 2px solid var(--ot-blue);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
}
.ec-cart-total { font-size: 16px; }
.ec-cart-total strong { font-family: var(--ot-display); font-size: 22px; color: var(--ot-blue); }
.ec-cart-note { font-size: 13px; color: var(--ot-muted); margin-top: var(--sp-3); }
.ec-cart-link { border-bottom: 1px solid var(--ot-gold); }

/* --------------------------------------------------------------- Footer */
.ec-footer { background: var(--ot-blue-deep); color: #fff; padding: var(--sp-9) 0 0; margin-top: var(--sp-9); }
.ec-footer h4 {
  font-family: var(--ot-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ot-gold-soft);
  margin: 0 0 var(--sp-4);
}
.ec-footer a { font-size: 14px; color: rgba(255,255,255,.82); transition: color .15s; }
.ec-footer a:hover { color: var(--ot-gold-soft); }
/* Pita atas: identitas merek di kiri, newsletter di kanan. */
.ec-footer__top {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px);
  padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.14);
}
.ec-footer__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px);
  padding-top: var(--sp-7);
}
.ec-footer__links { display: flex; flex-direction: column; gap: 11px; }
.ec-footer__brand img { height: 74px; width: auto; margin-bottom: var(--sp-4); }
.ec-footer__brand p { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0; max-width: 40ch; }
.ec-footer__news p { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0 0 var(--sp-4); }
.ec-footer__form {
  display: flex; border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--ot-radius); overflow: hidden;
}
.ec-footer__form input {
  flex: 1; background: transparent; border: 0; padding: 13px 14px;
  color: #fff; font-size: 14px; font-family: var(--ot-body); min-width: 0;
}
.ec-footer__form input::placeholder { color: rgba(255,255,255,.55); }
.ec-footer__form input:focus { outline: none; }
.ec-footer__form button {
  background: var(--ot-gold); border: 0; color: var(--ot-ink);
  padding: 0 18px; cursor: pointer; display: grid; place-items: center;
  min-width: 52px; transition: background .18s;
}
.ec-footer__form button:hover { background: var(--ot-gold-soft); }
.ec-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-8); padding: var(--sp-5) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  font-size: 13px; color: rgba(255,255,255,.65); flex-wrap: wrap;
}
.ec-social { display: flex; gap: var(--sp-2); }
.ec-social a { display: grid; place-items: center; width: 40px; height: 40px; color: rgba(255,255,255,.85); }
.ec-social a:hover { color: var(--ot-gold-soft); }

/* ---------------------------------------------------------- Lokasi toko */
/* scroll-margin: header menempel di atas, tanpa ini judul seksi tertutup
   header saat orang membuka tautan "#lokasi". */
.ot-loc { padding-bottom: var(--sp-9); scroll-margin-top: 90px; }
.ot-loc__grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 4vw, 48px); align-items: start;
}
.ot-loc__card {
  background: #fff; border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
  padding: clamp(20px, 4vw, 32px); display: grid; gap: var(--sp-5);
}
.ot-loc__row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ot-loc__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--ot-cream); color: var(--ot-blue);
}
.ot-loc__label {
  font-family: var(--ot-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ot-muted);
  margin: 0 0 4px;
}
.ot-loc__value { font-size: 15.5px; line-height: 1.7; color: var(--ot-ink); font-style: normal; margin: 0; }
.ot-loc__value a { color: var(--ot-blue-soft); }
.ot-loc__value a:hover { text-decoration: underline; }
.ot-loc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Peta: bidang tetap supaya tidak ada lompatan tata letak saat iframe termuat. */
.ot-loc__map {
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
  overflow: hidden; background: var(--ot-cream); aspect-ratio: 4 / 3;
}
.ot-loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Alamat singkat di footer */
.ec-footer__addr {
  font-style: normal; font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.72); margin: var(--sp-4) 0 0;
}
.ec-footer__hours { display: block; color: rgba(255,255,255,.55); }
.ec-footer__maps {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2);
  color: var(--ot-gold-soft) !important;
}
.ec-footer__maps:hover { text-decoration: underline; }

/* ------------------------------------------------------------- WA float */
.ec-wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ot-wa); display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.26); transition: transform .2s var(--ot-ease);
}
.ec-wa-fab:hover { transform: scale(1.06); }

/* ---------------------------------------------------------------- Jurnal */
.ot-blog { padding-bottom: var(--sp-8); }

/* Pil kategori & tag — target sentuh 44px */
.ot-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-7);
}
.ot-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--ot-border); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ot-ink); background: #fff;
  transition: background .15s, border-color .15s, color .15s;
}
.ot-pill:hover { background: var(--ot-cream); border-color: var(--ot-cream-deep); }
.ot-pill.is-active { background: var(--ot-blue); border-color: var(--ot-blue); color: #fff; }
.ot-pill__count { font-size: 12px; opacity: .72; }
.ot-pill--sm { font-size: 13.5px; padding: 0 14px; }

.ot-blog__filter {
  text-align: center; font-size: 14.5px; color: var(--ot-muted);
  margin: calc(-1 * var(--sp-5)) 0 var(--sp-7);
}
.ot-blog__filter a { color: var(--ot-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Kartu artikel */
.ot-post { display: flex; flex-direction: column; min-width: 0; }
.ot-post__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1200 / 630; background: var(--ot-cream-deep); border-radius: var(--ot-radius);
}
.ot-post__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ot-ease);
}
.ot-post:hover .ot-post__media img { transform: scale(1.04); }
.ot-post__noimg { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ot-cream); }
.ot-post__body { padding-top: var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; }
.ot-post__cat { display: inline-block; padding: 4px 0; }
.ot-post__cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.ot-post__title {
  font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ot-ink);
  margin: var(--sp-1) 0 var(--sp-2); text-wrap: balance;
}
.ot-post__title a { transition: color .18s; }
.ot-post__title a:hover, .ot-post:hover .ot-post__title a { color: var(--ot-blue); }
.ot-post__excerpt {
  margin: 0 0 var(--sp-3); font-size: 15px; line-height: 1.65; color: var(--ot-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ot-post__meta { margin: 0; font-size: 13px; color: var(--ot-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.ot-post__more { margin: var(--sp-5) 0 0; }

.ot-post--featured {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--ot-border);
}
.ot-post--featured .ot-post__body { padding-top: 0; }
.ot-post--featured .ot-post__title { font-size: clamp(26px, 3vw, 36px); color: var(--ot-blue); line-height: 1.2; }
.ot-post--featured .ot-post__excerpt { font-size: 16px; -webkit-line-clamp: 4; }

.ot-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-6); }

/* Halaman artikel */
.ot-crumbs ol {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: var(--sp-5) 0 0;
  font-size: 13px; color: var(--ot-muted);
}
.ot-crumbs li + li::before { content: "/"; margin: 0 var(--sp-2); color: var(--ot-border); }
.ot-crumbs a { display: inline-block; padding: 6px 0; }
.ot-crumbs a:hover { color: var(--ot-blue); text-decoration: underline; text-underline-offset: 3px; }

.ot-article__head { max-width: 780px; margin: var(--sp-7) auto var(--sp-6); text-align: center; }
.ot-article__head .ot-eyebrow { display: inline-block; padding: 4px 0; }
.ot-article__title {
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; color: var(--ot-blue);
  margin: var(--sp-2) 0 var(--sp-4); text-wrap: balance;
}
.ot-article__meta { margin: 0; font-size: 14px; color: var(--ot-muted); }
.ot-article__cover { max-width: 1040px; margin: 0 auto var(--sp-7); }
.ot-article__cover img {
  width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  background: var(--ot-cream-deep); border-radius: var(--ot-radius);
}

/* Isi artikel dari editor Quill — lebar baris ±68 karakter supaya enak dibaca */
.ot-prose {
  max-width: 68ch; margin: 0 auto;
  font-size: 18px; line-height: 1.75; color: var(--ot-ink); overflow-wrap: break-word;
}
.ot-prose::after { content: ""; display: block; clear: both; }
.ot-prose > :first-child { margin-top: 0; }
.ot-prose p { margin: 0 0 1.25em; }
.ot-prose h1, .ot-prose h2 { font-size: 1.6em; color: var(--ot-blue); margin: 1.9em 0 .6em; line-height: 1.25; }
.ot-prose h3 { font-size: 1.25em; margin: 1.6em 0 .5em; line-height: 1.3; }
.ot-prose a { color: var(--ot-blue-soft); text-decoration: underline; text-underline-offset: 3px; }
.ot-prose a:hover { color: var(--ot-gold-ink); }
.ot-prose strong { font-weight: 700; }
.ot-prose ul, .ot-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.ot-prose li { margin: 0 0 .4em; padding-left: .2em; }
/* Quill 2 menyimpan semua daftar sebagai <ol>, jenisnya di data-list */
.ot-prose li[data-list="bullet"] { list-style-type: disc; }
.ot-prose li[data-list="ordered"] { list-style-type: decimal; }
.ot-prose .ql-ui { display: none; }
.ot-prose blockquote {
  margin: 1.75em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--ot-gold);
  font-family: var(--ot-display); font-style: italic; font-size: 1.15em; color: var(--ot-blue);
}
.ot-prose img { max-width: 100%; height: auto; border-radius: var(--ot-radius); margin: 1.5em auto; }
.ot-prose p > img:only-child { margin: 0 auto; }
.ot-prose hr { border: 0; border-top: 1px solid var(--ot-border); margin: 2.5em 0; }
.ot-prose code { font-size: .88em; background: var(--ot-cream); padding: .1em .35em; border-radius: 2px; }
.ot-prose pre, .ot-prose .ql-code-block-container {
  margin: 1.5em 0; padding: 1em 1.2em; overflow-x: auto; border-radius: var(--ot-radius);
  background: #17212B; color: #F3EFE8; font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.ot-prose iframe, .ot-prose .ql-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; margin: 1.5em 0;
  border-radius: var(--ot-radius);
}
.ot-prose .ql-align-center  { text-align: center; }
.ot-prose .ql-align-right   { text-align: right; }
.ot-prose .ql-align-justify { text-align: justify; }
.ot-prose .ql-indent-1 { padding-left: 3em; }
.ot-prose .ql-indent-2 { padding-left: 6em; }
.ot-prose .ql-indent-3 { padding-left: 9em; }
/* Carousel dari editor: geser ke samping (sentuh, trackpad, atau bilah gulir) */
.ot-prose .content-carousel { margin: 1.75em 0; }
.ot-prose .cc-track {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.ot-prose .cc-track img {
  flex: 0 0 86%; margin: 0; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: center;
}

.ot-article__foot { max-width: 68ch; margin: var(--sp-7) auto 0; font-size: 18px; }
.ot-article__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.ot-share {
  border-top: 1px solid var(--ot-border); border-bottom: 1px solid var(--ot-border);
  padding: var(--sp-5) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
}
.ot-share__title {
  font-family: var(--ot-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted);
}
.ot-share__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ot-share__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: #fff;
  font: 500 14px/1 var(--ot-body); color: var(--ot-ink); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ot-share__btn:hover { background: var(--ot-cream); }
.ot-share__btn--wa { background: var(--ot-wa); border-color: var(--ot-wa); color: #fff; }
.ot-share__btn--wa:hover { background: #0B5F31; }
.ot-share__status { font-size: 13.5px; color: var(--ot-green); }

.ot-related { padding-bottom: var(--sp-8); }

@media (max-width: 1080px) {
  .ot-post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }
}
@media (max-width: 760px) {
  .ot-post--featured { grid-template-columns: 1fr; gap: 0; }
  .ot-post--featured .ot-post__body { padding-top: var(--sp-4); }
}
@media (max-width: 640px) {
  .ot-post-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ot-pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 0 18px 4px; }
  .ot-pill { flex: 0 0 auto; }
  .ot-article__head { margin-top: var(--sp-5); text-align: left; }
  .ot-article__cover { margin-left: -18px; margin-right: -18px; margin-bottom: var(--sp-6); }
  .ot-article__cover img { border-radius: 0; }
  .ot-prose, .ot-article__foot { font-size: 17px; }
  .ot-prose h1, .ot-prose h2 { font-size: 1.45em; }
  /* Gambar "kiri/kanan + teks" terlalu sempit di HP — jadikan penuh */
  .ot-prose img[style*="float"] { float: none !important; width: 100% !important; margin: 1.25em 0 !important; }
  .ot-prose .ql-indent-1, .ot-prose .ql-indent-2, .ot-prose .ql-indent-3 { padding-left: 1.5em; }
}

/* ------------------------------------------------------------- Keadaan */
.ec-empty { text-align: center; color: var(--ot-muted); font-size: 15px; padding: var(--sp-9) 24px; }
.ec-empty h1 { font-family: var(--ot-display); color: var(--ot-blue); }

/* ------------------------------------------------------------ Responsif */
@media (max-width: 1080px) {
  .ec-grid { grid-template-columns: repeat(3, 1fr); }
  .ec-footer__top { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ec-valueprops { grid-template-columns: 1fr; }
  .ot-story__grid { grid-template-columns: 1fr; }
  .ot-story__media { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 900px) {
  /* Flex, bukan grid: kolom `auto` bisa terhimpit di layar sempit sehingga
     ikon akun & keranjang terdorong keluar layar. */
  .ec-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); height: 66px;
  }
  .ec-burger {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; background: none; cursor: pointer; flex: 0 0 auto; color: var(--ot-ink);
  }
  .ec-header__logo { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .ec-header__logo img { height: 42px; }
  .ec-header__actions { flex: 0 0 auto; }
  .ec-iconbtn { width: 40px; }
  /* Diposisikan terhadap .ec-header (sticky = containing block), bukan viewport:
     offset tetap seperti `top: 66px` akan menabrak header saat announcement bar
     membungkus jadi dua baris. */
  .ec-nav {
    position: absolute; top: 100%; left: 0;
    width: min(282px, 82vw); max-height: calc(100vh - 100%); background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-3) 0;
    border-right: 1px solid var(--ot-border);
    border-bottom: 1px solid var(--ot-border);
    box-shadow: var(--ot-shadow); overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s var(--ot-ease); z-index: 55;
  }
  .ec-nav.is-open { transform: translateX(0); }
  .ec-nav__item > a { padding: 14px 20px; justify-content: space-between; }
  .ec-nav__item > a::after { display: none; }
  .ec-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 var(--sp-2) var(--sp-4);
    min-width: 0; display: none;
  }
  .ec-nav__item.is-open > .ec-dropdown { display: block; }
  .ot-loc__grid { grid-template-columns: 1fr; }
  .ec-pdp { grid-template-columns: 1fr; }
  .ec-pdp__info { position: static; }
  .ec-pdp__gallery > :first-child { aspect-ratio: 4 / 5; }
}

@media (max-width: 640px) {
  .ec-container { padding: 0 18px; }
  .ec-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-3); }

  /* Satu kartu penuh + separuh kartu berikutnya sebagai petunjuk "geser".
     Dengan lebar tetap 180px, kartu kedua terpotong tepat di angka harga
     sehingga terbaca seperti "Rp 145.0" — terlihat rusak. */
  .ec-slider > * { flex: 0 0 62%; }
  .ec-slider { scroll-padding-left: 0; }

  /* Target sentuh 44px (Apple HIG/Material): daftar tautan footer, ikon sosial,
     dan pilihan filter di halaman koleksi. */
  .ec-footer__links { gap: 0; }
  .ec-footer__links a { display: flex; align-items: center; min-height: 44px; }
  .ec-social a { width: 44px; height: 44px; }
  .ec-controls select { padding: 11px 12px; min-height: 44px; }
  .ec-controls > * { flex: 1 1 100%; }

  /* "Lihat semua": area sentuhnya diperbesar tanpa menggeser garis bawahnya. */
  .ec-viewall { position: relative; }
  .ec-viewall::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px;
  }

  /* Tombol WhatsApp mengambang: hormati area aman (home indicator iPhone). */
  .ec-wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Lingkaran krem mengikuti tinggi fotonya, bukan lebar layar. Dengan ukuran
     berbasis lebar, garis lingkarannya memotong tepat di area judul. */
  .ot-story__media::before { width: auto; height: 124%; top: 50%; }

  /* Galeri produk: digeser ke samping, bukan ditumpuk. Dengan susunan grid,
     pembeli harus menggulir ~640px hanya untuk sampai ke harga dan ukuran.
     Sepotong foto berikutnya yang terlihat jadi petunjuk bahwa bisa digeser. */
  .ec-pdp__gallery {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -18px; padding: 0 18px 6px; scrollbar-width: none;
  }
  .ec-pdp__gallery::-webkit-scrollbar { display: none; }
  .ec-pdp__gallery > * { flex: 0 0 86%; scroll-snap-align: center; }
  .ec-pdp__gallery > :first-child { aspect-ratio: 4 / 5; }
  .ec-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ec-footer__bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .ec-section-title, .ot-heading { margin: var(--sp-7) 0 var(--sp-5); }
  .ot-story, .ec-testi, .ec-footer { margin-top: var(--sp-7); }
  .ot-story { padding: var(--sp-7) 0; }
  .ec-card__title { font-size: 15px; }
  .ec-btn-row { grid-template-columns: 1fr; }
  .ec-btn-row .ec-btn--wa { width: 100%; }
  .ec-arrow { display: none; }
  .ot-hero { min-height: 520px; }
  .ot-hero__inner { padding: var(--sp-7) 0 var(--sp-8); }
  .ot-hero__actions .ec-btn { flex: 1 1 100%; }
  .ot-loc__map { aspect-ratio: 1 / 1; }
  .ot-loc__actions .ec-btn { flex: 1 1 100%; justify-content: center; }
}

/* Hormati preferensi sistem: matikan gerak non-esensial. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}