/* ==========================================================================
   COMPONENTS — Navbar · Hero · Cards · Sections · Footer · Cart
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.announce {
  background: var(--forest-900);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem var(--space-gutter);
}
.announce strong { color: var(--gold-400); font-weight: 600; }

/* --------------------------------------------------------------------------
   NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(253, 251, 247, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.navbar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 26px rgba(20,18,15,0.06);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  margin-right: auto;
}
.nav-logo__mark { width: 34px; height: 34px; flex: none; color: var(--gold-500); }
.nav-logo__text {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--charcoal-900);
}
.nav-logo__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold-600);
  text-transform: uppercase;
  margin-top: 3px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
}
.nav-link {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--text-soft);
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--charcoal-900); }
.nav-link:hover::after, .nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  min-width: 0;
}

.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--charcoal-700);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(20,26,22,0.06); color: var(--forest-700); }
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--charcoal-900);
  background: var(--gold-400);
  border-radius: var(--r-full);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.cart-count.is-on { transform: scale(1); }

.nav-cta { display: inline-flex; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-800);
}
.nav-burger svg { width: 24px; height: 24px; }

@media (max-width: 1080px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner { justify-content: space-between; }
  .nav-logo { margin-right: 0; }
}

/* Mobile: rapatkan ikon agar navbar tidak melampaui lebar viewport */
@media (max-width: 620px) {
  .nav-inner { gap: 0.4rem; }
  .nav-actions { gap: 0; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .nav-burger { width: 38px; height: 38px; }
  .nav-burger svg { width: 22px; height: 22px; }
  .nav-logo { min-width: 0; gap: 0.5rem; }
  .nav-logo__mark { width: 28px; height: 28px; }
  .nav-logo__text { font-size: 0.95rem; letter-spacing: 0.07em; }
  .nav-logo__sub { font-size: 0.45rem; letter-spacing: 0.16em; }
  .cart-count { top: 1px; right: 0; min-width: 16px; height: 16px; font-size: 0.58rem; }
}

/* Sembunyikan tombol Shopee di navbar pada layar sangat kecil
   (tetap tersedia di sticky CTA, footer, dan menu) */
@media (max-width: 430px) {
  .nav-logo__sub { display: none; }
  #btnSearch { display: none; }
}

/* --------------------------------------------------------------------------
   DRAWER — MOBILE MENU
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* display:none saat tertutup -> panel yang di-translate tidak memperlebar
     scrollWidth dokumen (penyebab scroll horizontal tak diinginkan). */
  display: none;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.drawer.is-open {
  display: block;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 22, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(410px, 88vw);
  max-width: 100%;
  height: 100%;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-600);
}
.drawer__body { padding: 1rem 0; flex: 1; }
.drawer__foot { padding: 1.5rem; border-top: 1px solid var(--line); flex: none; }

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--charcoal-900);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mobile-nav-link:hover, .mobile-nav-link.is-active {
  background: var(--sand-100);
  padding-left: 2rem;
  color: var(--forest-700);
}
.mobile-nav-link span { font-family: var(--font-sans); font-size: 0.7rem; color: var(--gold-600); }

/* --------------------------------------------------------------------------
   SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(253, 251, 247, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  place-items: start center;
  padding: clamp(4rem, 14vh, 10rem) var(--space-gutter) 2rem;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}
.search-overlay.is-open { display: grid; }

.search-box { width: min(720px, 100%); }
.search-box label {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.9rem;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 2px solid var(--charcoal-800);
  padding-bottom: 0.7rem;
}
.search-field svg { width: 24px; height: 24px; color: var(--text-muted); flex: none; }
.search-field input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--charcoal-900);
  padding: 0.2em 0;
  outline: none;
}
.search-field input::placeholder { color: var(--text-muted); }

.search-results { margin-top: 1.6rem; display: grid; gap: 0.5rem; }
.search-result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem;
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease);
}
.search-result:hover { background: var(--sand-100); }
.search-result img {
  width: 54px; height: 54px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
  background: var(--sand-100);
}
.search-result strong { display: block; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; }
.search-result small { color: var(--text-muted); font-size: var(--fs-tiny); }

.search-close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--charcoal-800);
  transition: background-color var(--dur-fast) var(--ease);
}
.search-close:hover { background: rgba(20,26,22,0.07); }
.search-close svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--forest-900);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.03fr 1fr;
  align-items: stretch;
  min-height: min(88vh, 800px);
}

.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 4.5rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  background: linear-gradient(120deg, var(--forest-900) 0%, var(--forest-800) 60%, var(--forest-700) 100%);
}
.hero__content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23DCC493' stroke-width='0.7'%3E%3Cpath d='M70 8 L112 36 L112 90 L70 118 L28 90 L28 36 Z'/%3E%3Cpath d='M70 34 L94 49 L94 77 L70 92 L46 77 L46 49 Z'/%3E%3Cpath d='M70 56 L80 62 L80 70 L70 76 L60 70 L60 62 Z'/%3E%3Cpath d='M0 70 L28 70 M112 70 L140 70'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.05;
  pointer-events: none;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-300);
}
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--text-on-dark-soft);
  max-width: 46ch;
  margin-bottom: 2.4rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--forest-800);
  min-height: 340px;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,28,22,0.55) 0%, rgba(15,28,22,0) 34%);
  pointer-events: none;
}

.hero__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-on-dark);
  background: rgba(15, 28, 22, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__meta-item {
  padding: 1.15rem clamp(0.9rem, 2vw, 1.9rem);
  border-right: 1px solid var(--line-on-dark);
}
.hero__meta-item:last-child { border-right: 0; }
.hero__meta-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--gold-300);
  margin-bottom: 0.2rem;
}
.hero__meta-item span {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media {
    order: -1;
    min-height: 54vh;
  }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(15,28,22,0.28) 0%, rgba(15,28,22,0.86) 100%);
  }
  .hero__content { padding-top: 2.2rem; padding-bottom: 2.6rem; }
  .hero__title { font-size: clamp(1.7rem, 6.4vw, 2.6rem); }
  .hero__sub { font-size: 0.98rem; margin-bottom: 1.8rem; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta-item { border-right: 0; border-bottom: 1px solid var(--line-on-dark); padding-block: 0.9rem; }
  .hero__meta-item:last-child { border-bottom: 0; }
}

/* Mobile: beri ruang untuk sticky CTA di bawah agar konten tidak tertutup */
@media (max-width: 700px) {
  body { padding-bottom: 84px; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   IMAGE FRAME — ornamen bingkai
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sand-100);
  min-width: 0;
  max-width: 100%;
}
.frame img {
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.frame--tall { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--cinema { aspect-ratio: 21 / 9; }
.frame--portrait { aspect-ratio: 4 / 5; }

.frame--framed::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(220, 196, 147, 0.5);
  border-radius: calc(var(--r-md) - 6px);
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   VALUE / TRUST CARDS
   -------------------------------------------------------------------------- */
.value-card {
  position: relative;
  padding: clamp(1.7rem, 3vw, 2.4rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}
.value-card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--sand-100);
  color: var(--gold-600);
  margin-bottom: 1.2rem;
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.value-card p { font-size: 0.93rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   EDITORIAL GRID (campaign / mosaic)
   -------------------------------------------------------------------------- */
.grid-editorial {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.grid-editorial--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); margin-top: 1rem; }
/* Dua petak kecil ditumpuk dan dipaksa mengisi tinggi kolom.
   Tinggi baris ditentukan tile besar (potret 4/5 atau lebar 16/10). Kalau
   petak kecil dibiarkan berdampingan, tingginya hanya selebar kolom dan
   menyisakan ruang kosong besar di bawahnya (terukur 608 px pada baris
   campaign, 188 px pada baris editorial). */
.grid-editorial > .grid {
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
}
/* min-height:0 wajib, supaya aspect-ratio 1/1 petak tidak ikut menaikkan
   tinggi baris lewat kontribusi min-content */
.grid-editorial > .grid > .frame { min-height: 0; }
/* Semua anak grid wajib boleh menyusut, agar aspect-ratio gambar tidak
   memaksa lebar kolom melebihi viewport */
.grid-editorial > * { min-width: 0; }

@media (max-width: 760px) {
  .grid-editorial,
  .grid-editorial--reverse { grid-template-columns: minmax(0, 1fr); }
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.trust-item {
  background: var(--cream);
  padding: 1.6rem 1.3rem;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease);
}
.trust-item:hover { background: var(--sand-50); }
.trust-item svg { width: 24px; height: 24px; color: var(--gold-600); margin: 0 auto 0.7rem; }
.trust-item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--charcoal-800);
  margin-bottom: 0.25rem;
}
.trust-item span { font-size: 0.8rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-gold);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sand-100), var(--beige-100));
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.055); }

.product-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: 0.42em 0.85em;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--charcoal-900);
  background: var(--gold-400);
  border-radius: var(--r-full);
}
.product-card__badge--muted {
  background: var(--charcoal-800);
  color: var(--cream);
}
.product-card__badge:empty { display: none; }

.product-card__ornament {
  position: absolute;
  top: 0; right: 0;
  z-index: 3;
  width: 62px; height: 62px;
  color: var(--gold-500);
  opacity: 0.9;
  pointer-events: none;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.15rem, 2vw, 1.6rem);
}
.product-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 0.45rem;
  color: var(--charcoal-900);
  transition: color var(--dur-fast) var(--ease);
}
.product-card:hover .product-card__name { color: var(--forest-700); }

.product-card__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--forest-700);
  letter-spacing: 0.01em;
  margin-bottom: 1.1rem;
  margin-top: auto;
}

/* Tombol di kartu produk disusun MENUMPUK (satu per baris), bukan berdampingan.
   Alasannya ruang: lebar kartu minimum 290px; setelah dikurangi padding hanya
   tersisa sekitar 250px. Dua tombol berdampingan menyisakan ~120px masing-masing,
   sedangkan label seperti "Pesan via WhatsApp" butuh ~180px — teksnya akan
   terpotong atau turun baris. Ditumpuk, semua label utuh dan mudah ditekan
   di layar ponsel. */
.product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-card__actions .btn {
  width: 100%;
  padding-inline: 0.9em;
  justify-content: center;
}

.product-card__stretched {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.product-card__actions { position: relative; z-index: 4; }

.product-card.is-soldout .product-card__media { filter: grayscale(0.55); opacity: 0.78; }

/* --------------------------------------------------------------------------
   PRODUCT GRID
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

/* --------------------------------------------------------------------------
   STORY SECTION (split)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .split--reverse .split__media { order: 0; }
}

.split__media { position: relative; }
.split__media-accent {
  position: absolute;
  inset: auto -18px -18px auto;
  width: 58%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  z-index: -1;
}
@media (max-width: 900px) { .split__media-accent { display: none; } }

.story-list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.story-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.story-list li svg {
  width: 18px; height: 18px;
  color: var(--gold-600);
  flex: none;
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   INGREDIENT CARD
   -------------------------------------------------------------------------- */
.ingredient-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ingredient-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.ingredient-card__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--sand-100); }
.ingredient-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.ingredient-card:hover .ingredient-card__media img { transform: scale(1.06); }
.ingredient-card__body { padding: 1.4rem; }
.ingredient-card h3 { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.ingredient-card p { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 0.8rem; }
.ingredient-card dl {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
}
.ingredient-card dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--gold-600);
}
.ingredient-card dd { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   TESTIMONIAL
   -------------------------------------------------------------------------- */
.testimonial {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial__quote {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold-300);
  margin-bottom: 0.6rem;
  display: block;
}
.testimonial__stars { display: flex; gap: 3px; margin-bottom: 0.9rem; color: var(--gold-500); }
.testimonial__stars svg { width: 15px; height: 15px; }
.testimonial__text {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--charcoal-700);
  margin-bottom: 1.3rem;
}
.testimonial__author { display: flex; align-items: center; gap: 0.85rem; }
.testimonial__avatar {
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--sand-100);
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--gold-600);
  border: 1px solid var(--line);
}
.testimonial__author strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--charcoal-800);
}
.testimonial__author small { font-size: 0.72rem; color: var(--text-muted); }

/* --- Kartu ulasan dengan FOTO asli dari marketplace ------------------------
   Dipakai untuk menampilkan bukti ulasan pembeli (screenshot Shopee yang
   sudah dipotong bersih). Foto adalah bukti utama — jadi ditampilkan besar,
   bukan sebagai thumbnail kecil.
   -------------------------------------------------------------------------- */
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.review-card__media {
  position: relative;
  background: var(--sand-100);
  border-bottom: 1px solid var(--line);
}
.review-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.review-card__body {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.review-card__stars { display: flex; gap: 2px; color: var(--gold-500); }
.review-card__stars svg { width: 14px; height: 14px; }
.review-card__name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--charcoal-800);
}
.review-card__source {
  margin-left: auto;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}
.review-card__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--charcoal-700);
}
.review-card__product {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.review-card__product a { color: var(--gold-600); }

@media (max-width: 600px) {
  .review-card__source { display: none; }
}

/* --- Bar sosial media (profil TikTok/IG/FB) --------------------------------
   Menampilkan angka nyata dari profil brand. Angka ditulis statis di HTML
   (bukan ditarik API) karena API TikTok/Instagram butuh token dan akan
   kedaluwarsa. Perbarui manual bila angkanya berubah signifikan.
   -------------------------------------------------------------------------- */
.social-proof {
  background: var(--forest-900);
  color: var(--cream);
  padding: clamp(2.6rem, 6vw, 4rem) 0;
}
.social-proof__inner {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .social-proof__inner { grid-template-columns: 1.15fr 1fr; }
}

.social-proof__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.9rem;
}
.social-proof__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
  color: var(--cream);
}
.social-proof__text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(253, 251, 247, 0.76);
  margin: 0 0 1.6rem;
  max-width: 46ch;
}
.social-proof__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.social-proof__cta .btn {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--forest-900);
}
.social-proof__cta .btn:hover { background: var(--gold-400); border-color: var(--gold-400); }

/* Kartu angka */
.social-proof__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(253, 251, 247, 0.16);
  border: 1px solid rgba(253, 251, 253, 0.16);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Varian khusus untuk 4 kartu marketplace: tampil 2x2 di mobile, 1 baris
   berisi 4 kartu di layar lebar. Padding kartu diperketat agar tidak
   overflow di viewport sempit. */
.social-proof__stats--marketplace { gap: 1px; }
@media (min-width: 860px) {
  .social-proof__stats--marketplace { grid-template-columns: repeat(4, 1fr); }
}
.social-proof__stat {
  background: var(--forest-900);
  padding: clamp(1.1rem, 2.6vw, 1.7rem) 0.7rem;
  text-align: center;
}
/* Label platform di atas angka (mis. "TikTok" / "Shopee") — kecil dan
   redup agar angka marketplace tetap dominan di kartu. */
.social-proof__channel {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.55);
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.social-proof__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  line-height: 1.1;
  color: var(--gold-400);
  font-weight: 600;
}
/* Unit kecil ("rb" / "jt") yang mendampingi angka di header profil. */
.social-proof__unit {
  font-size: 0.6em;
  margin-left: 0.1em;
  color: rgba(253, 251, 247, 0.72);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.social-proof__label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.62);
}

/* Kartu profil */
.social-proof__profile {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: rgba(253, 251, 247, 0.07);
  border: 1px solid rgba(253, 251, 247, 0.14);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-proof__profile:hover {
  background: rgba(253, 251, 247, 0.12);
  border-color: var(--gold-500);
}
.social-proof__pfp {
  width: 54px; height: 54px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex: none;
  border: 2px solid var(--gold-500);
  background: var(--forest-800, #16281F);
}
.social-proof__pname {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
}
.social-proof__pmeta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: rgba(253, 251, 247, 0.62);
}
/* @handle ditulis lebih redup dari nama tampilan agar tidak bersaing. */
.social-proof__handle {
  font-weight: 400;
  color: rgba(253, 251, 247, 0.58);
}
.social-proof__badge {
  width: 15px; height: 15px;
  color: var(--gold-400);
  flex: none;
}

/* --- Ringkasan rating marketplace ----------------------------------------- */
.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.6rem);
  margin: 0 auto 2.4rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  width: fit-content;
  max-width: 100%;
}
.rating-summary__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--charcoal-700);
  white-space: nowrap;
}
.rating-summary__item strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--charcoal-900);
}
.rating-summary__stars { display: flex; gap: 2px; color: var(--gold-500); }
.rating-summary__stars svg { width: 13px; height: 13px; }
.rating-summary__divider {
  width: 1px;
  height: 22px;
  background: var(--line);
}
@media (max-width: 560px) {
  .rating-summary { border-radius: var(--r-md); }
  .rating-summary__divider { display: none; }
}

/* --------------------------------------------------------------------------
   PROMO BANNER
   -------------------------------------------------------------------------- */
.promo-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--earth-700) 100%);
  color: var(--text-on-dark);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  isolation: isolate;
}
.promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23DCC493' stroke-width='0.8'%3E%3Cpath d='M80 10 L128 42 L128 102 L80 134 L32 102 L32 42 Z'/%3E%3Cpath d='M80 40 L107 57 L107 87 L80 104 L53 87 L53 57 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.06;
  z-index: -1;
}
.promo-banner__inner { max-width: 640px; }
.promo-banner h2 { font-size: var(--fs-h2); margin-bottom: 0.8rem; }
.promo-banner p { color: var(--text-on-dark-soft); margin-bottom: 1.8rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   CTA SPLIT (Shopee + WhatsApp)
   -------------------------------------------------------------------------- */
.cta-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cta-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.8rem, 3.6vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cta-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.cta-box__icon { width: 44px; height: 44px; margin-bottom: 0.5rem; }
/* Judul kartu CTA. Kadang h3 (di dalam section yang sudah punya h2), kadang
   h2 (kalau kartu CTA itu sendiri adalah section tingkat atas, mis. faq.html).
   Ukurannya dikunci di sini supaya level heading tidak mengubah tampilan. */
.cta-box h2,
.cta-box h3 { font-size: var(--fs-h3); }
.cta-box p { font-size: 0.93rem; color: var(--text-soft); margin-bottom: 1rem; }
.cta-box .btn { align-self: flex-start; margin-top: auto; }

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.9rem);
  bottom: clamp(1rem, 2.5vw, 1.9rem);
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.35rem 0.85rem 1rem;
  background: #1FA855;
  color: #fff;
  border-radius: var(--r-full);
  box-shadow: 0 12px 34px rgba(31, 168, 85, 0.34);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 42px rgba(31,168,85,0.42); }
.wa-float svg { width: 26px; height: 26px; flex: none; }
.wa-float__label { white-space: nowrap; }
.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(31,168,85,0.5);
  animation: wa-pulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Pada mobile, sticky CTA sudah menyediakan WhatsApp + Shopee secara permanen.
   Tombol float disembunyikan agar tidak menutupi konten atau CTA utama. */
@media (max-width: 700px) {
  .wa-float { display: none; }
}

/* --------------------------------------------------------------------------
   STICKY MOBILE CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 860;
  background: rgba(253, 251, 247, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.55rem;
  box-shadow: 0 -6px 26px rgba(20,18,15,0.09);
}
.mobile-cta .btn { flex: 1; min-width: 0; min-height: 48px; padding-inline: 0.6em; font-size: 0.72rem; }
@media (max-width: 700px) {
  .mobile-cta { display: flex; }

  /* Ruang bawah agar isi terakhir halaman tidak tertutup bilah di atas.

     Terukur di peramban (layar 390x844, tinggi bilah 68px):
       - ponsel TANPA poni : sisa ruang 16px  -> aman, tapi mepet
       - iPhone BERPONI    : bilah jadi 102px karena env(safe-area-inset-bottom)
                             (34px), isi footer TERTUTUP 18px
     Padding ini mengembalikan ruang itu; setelahnya sisa 50-84px di semua
     keadaan. Nilainya disamakan dengan tinggi dasar bilah (68px). */
  .footer { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   CART DRAWER
   -------------------------------------------------------------------------- */
.cart-line {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.cart-line__img {
  width: 76px; height: 92px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--sand-100);
}
.cart-line__top { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.cart-line__name {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--charcoal-900);
}
.cart-line__price { font-size: 0.85rem; color: var(--forest-700); font-weight: 600; }
.cart-line__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; gap: 0.7rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  overflow: hidden;
}
.qty button {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  color: var(--charcoal-700);
  transition: background-color var(--dur-fast) var(--ease);
}
.qty button:hover { background: var(--sand-100); }
.qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.qty button svg { width: 13px; height: 13px; }
.qty input {
  width: 38px;
  border: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  background: none;
  outline: none;
  padding: 0;
  color: var(--charcoal-800);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-remove {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cart-remove:hover { color: var(--maroon-500); border-bottom-color: var(--maroon-500); }

.cart-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.cart-empty svg { width: 46px; height: 46px; color: var(--beige-300); margin: 0 auto 1rem; }
.cart-empty p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 1.4rem; }

.cart-summary { display: grid; gap: 0.65rem; margin-bottom: 1.3rem; }
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.cart-summary__row--total {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 1.28rem;
  color: var(--charcoal-900);
}

.cart-note {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   CARA PEMBAYARAN (halaman checkout)
   Kartu-kartu pilihan pembayaran. Isinya dirender dari SITE.payment
   (data/site.js) — selama data belum diisi, seluruh blok tidak tampil.
   -------------------------------------------------------------------------- */
.pay-methods {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: 1rem;
}

.pay-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  background: rgba(253, 251, 247, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.pay-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pay-card__head h3 { font-size: var(--fs-h4); margin: 0; }

.pay-card__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.62rem;
  border-radius: var(--r-full);
  background: var(--sand-100);
  border: 1px solid var(--line);
  color: var(--text-muted);
  white-space: nowrap;
}

.pay-card > p { font-size: 0.88rem; line-height: 1.6; color: var(--text-soft); margin: 0; }

.pay-card__accounts {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--charcoal-700);
}
.pay-card__holder { color: var(--text-muted); font-size: 0.82rem; }

.pay-card__qris {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* QR wajib berlatar putih. Kalau latar kartu ikut gelap (tema malam),
     kontras QR turun dan sebagian aplikasi bank gagal memindainya. */
  background: #fff;
}

/* Blok QRIS: judul, gambar, dan data merchant untuk dicocokkan pembeli. */
.qris-block {
  margin-bottom: 1.1rem;
}

.qris-block__title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0 0 .6rem;
}

.qris-block__id {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .8rem;
  max-width: 260px;
  margin: .75rem 0 0;
  font-size: .8rem;
}

.qris-block__id dt {
  color: var(--text-soft);
}

.qris-block__id dd {
  margin: 0;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.qris-block__hint {
  max-width: 260px;
  margin: .6rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Tombol selalu menempel di dasar kartu supaya sejajar antar kartu. */
.pay-card .btn { margin-top: auto; }

/* Deretan tombol di panel ringkasan checkout. */
.checkout-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }

/* Nomor pesanan di panel ringkasan checkout. */
.order-no {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.order-no strong {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--charcoal-900);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.field label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--text-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--charcoal-900);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--maroon-500); }
.field__error { font-size: 0.74rem; color: var(--maroon-500); min-height: 1em; }
.field__hint { font-size: 0.76rem; color: var(--text-muted); margin: 0; }

/* --- Form data pengiriman (halaman checkout) ---------------------------- */
.ship-box { margin-top: 2rem; }

.ship-grid { display: grid; gap: 0 1.1rem; }
@media (min-width: 620px) { .ship-grid { grid-template-columns: 1fr 1fr; } }
.ship-grid .field--full { grid-column: 1 / -1; }
/* Baris galat kosong tidak boleh menyisakan celah. */
.ship-grid .field__error:empty { min-height: 0; }

.ship-box__origin {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.ship-box__origin svg { width: 14px; height: 14px; flex: none; margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--charcoal-900);
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--forest-700); }
.accordion__icon {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--gold-600);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.accordion__icon svg { width: 13px; height: 13px; }
.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  background: var(--gold-500);
  color: var(--cream);
  border-color: var(--gold-500);
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding-bottom: 1.4rem;
  font-size: 0.94rem;
  color: var(--text-soft);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--forest-900);
  color: var(--text-on-dark);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23DCC493' stroke-width='0.7'%3E%3Cpath d='M75 8 L120 38 L120 96 L75 126 L30 96 L30 38 Z'/%3E%3Cpath d='M75 36 L101 53 L101 81 L75 98 L49 81 L49 53 Z'/%3E%3Cpath d='M75 58 L85 64 L85 74 L75 80 L65 74 L65 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.045;
  z-index: -1;
  pointer-events: none;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand-mark { width: 40px; height: 40px; color: var(--gold-400); margin-bottom: 1rem; }
.footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 0.7rem;
}
.footer__tagline {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-on-dark-soft);
  max-width: 38ch;
  margin-bottom: 1.5rem;
}
/* Judul grup di footer. Sebelumnya h4 — diturunkan jadi h3 supaya tidak
   melompat dari h2 konten (mis. kisah-borneo / tentang-kami / kontak) atau
   dari h1 (404). Selector menyebut h3 DAN h4 supaya ukuran tetap sama kalau
   markup lama masih tersisa. */
.footer h3,
.footer h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1.2rem;
}
.footer__links { display: grid; gap: 0.7rem; }
.footer__links a {
  font-size: 0.9rem;
  color: var(--text-on-dark-soft);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer__links a:hover { color: var(--gold-300); padding-left: 5px; }

.footer__contact { display: grid; gap: 0.85rem; }
.footer__contact-item { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; }
.footer__contact-item svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; margin-top: 4px; }
.footer__contact-item a { color: var(--text-on-dark-soft); transition: color var(--dur-fast) var(--ease); }
.footer__contact-item a:hover { color: var(--gold-300); }

.footer__social { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.footer__social a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-full);
  color: var(--text-on-dark-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.footer__social a:hover {
  border-color: var(--gold-400);
  color: var(--gold-300);
  background: rgba(220, 196, 147, 0.08);
}
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  border-top: 1px solid var(--line-on-dark);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: rgba(242, 237, 227, 0.5);
}
.footer__bottom a:hover { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
.breadcrumb a { transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover { color: var(--gold-600); }
.breadcrumb span { opacity: 0.5; }

/* --------------------------------------------------------------------------
   PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  background: var(--forest-900);
  color: var(--text-on-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23DCC493' stroke-width='0.7'%3E%3Cpath d='M70 8 L112 36 L112 90 L70 118 L28 90 L28 36 Z'/%3E%3Cpath d='M70 34 L94 49 L94 77 L70 92 L46 77 L46 49 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.05;
  z-index: -1;
}
.page-head h1,
.page-head h2,
.page-head h3 {
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  max-width: 22ch;
  color: var(--cream);
}
.page-head h1 { font-size: var(--fs-h1); }
.page-head p { color: var(--text-on-dark-soft); max-width: 62ch; font-size: 1.05rem; }
.page-head .breadcrumb { color: rgba(242,237,227,0.55); }
.page-head .breadcrumb a:hover { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pd-gallery { display: grid; gap: 0.8rem; }
.pd-gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--sand-100), var(--beige-100));
}
.pd-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__thumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pd-thumb {
  width: 76px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sand-100);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-active { border-color: var(--gold-500); box-shadow: 0 0 0 2px rgba(184,149,90,0.24); }

.pd-info h1 { font-size: var(--fs-h1); margin-bottom: 0.9rem; }
.pd-price {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  color: var(--forest-700);
  margin-bottom: 1.3rem;
}
.pd-shortdesc { font-size: 1.03rem; color: var(--text-soft); margin-bottom: 1.8rem; }
.pd-actions { display: grid; gap: 0.7rem; margin-bottom: 1.5rem; }
@media (min-width: 560px) { .pd-actions { grid-template-columns: 1fr 1fr; } }
.pd-actions .btn { width: 100%; }
/* "Beli Sekarang" (beli langsung di situs) menempati satu baris penuh di
   atas dua tombol lain, supaya jalur pembelian utama langsung terlihat
   tanpa harus membaca dulu. */
.pd-actions__primary { grid-column: 1 / -1; }

.pd-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.pd-assurance span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pd-assurance svg { width: 15px; height: 15px; color: var(--gold-600); }

.pd-tabs { border-top: 1px solid var(--line); margin-top: 3rem; }
.pd-tab-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--line); }
.pd-tab-btn {
  padding: 1rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pd-tab-btn:hover { color: var(--charcoal-800); }
.pd-tab-btn.is-active { color: var(--forest-700); border-bottom-color: var(--gold-500); }
.pd-tab-panel { display: none; padding-top: 2rem; }
.pd-tab-panel.is-active { display: block; animation: fade-up 500ms var(--ease-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pd-tab-panel p { color: var(--text-soft); max-width: 74ch; }

/* --- Spesifikasi produk (tab "Informasi Produk") ------------------------ */
.pd-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .pd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pd-specs > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .pd-specs > div:nth-child(odd) { padding-right: 2rem; }
  .pd-specs > div:nth-child(even) {
    padding-left: 2rem;
    border-left: 1px solid var(--line);
  }
}
.pd-specs dt {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
  line-height: 1.5;
}
.pd-specs dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
  overflow-wrap: break-word;
}
/* Sembunyikan baris yang datanya belum tersedia (agar tidak ada "—" kosong) */
.pd-specs > div[hidden] { display: none; }

/* --- Blok manfaat di dalam tab "Kandungan" ----------------------------- */
.pd-benefits {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--beige-100);
  border-left: 3px solid var(--gold-500);
  border-radius: 2px;
}
/* Judul blok manfaat. Sebelumnya h4 sehingga melompat dari h1 nama produk.
   Sekarang h2 (section tingkat atas di halaman produk). Ukuran aslinya
   (sans kecil huruf kapital) dipertahankan lewat selector ini. */
.pd-benefits h2,
.pd-benefits h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-700);
  margin-bottom: 0.5rem;
}
.pd-benefits p { margin: 0; max-width: 74ch; }

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--sand-50);
}
.empty-state svg { width: 40px; height: 40px; color: var(--beige-300); margin: 0 auto 1.1rem; }
.empty-state h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.empty-state p { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem;
  background: var(--forest-800);
  color: var(--cream);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  font-size: 0.83rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur);
  max-width: calc(100vw - 2rem);
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; }
@media (max-width: 700px) { .toast { bottom: 96px; } }