/* Mantapglow design tokens v2 — forest/cream/sage/terracotta (ref: moodboard 2026-10-31) */
:root {
  --forest: #26402f;         /* hijau hutan gelap — header, footer, teks utama, tombol */
  --forest-2: #1b2f21;       /* hijau lebih gelap — bg header/footer solid */
  --charcoal: #26402f;       /* alias lama dipertahankan agar komponen lama konsisten */
  --charcoal-2: #1b2f21;
  --ink: #1b2f21;
  --ivory: #faf5e8;          /* warm ivory — bg utama */
  --cream: #f0e6d0;          /* cream — bg kartu/foto */
  --sand: #e3d6b8;           /* stone/sand lembut */
  --sage: #93a583;           /* sage — pendamping */
  --sage-soft: #c3cdb6;
  --olive: #5c6b4e;          /* olive — teks sekunder dark-section */
  --olive-soft: #8a9479;
  --terracotta: #c3673c;     /* aksen CTA/banner */
  --gold: #b08a4e;           /* garis tipis dekoratif (warisan kemasan) */
  --label: #eee6d4;
  --muted: #5f6b57;
  --line: rgba(38,64,47,.14);

  --f-display: "Fraunces", "Instrument Serif", "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track: .18em;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r: 10px;
  --r-lg: 28px;
  --max: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin:0; font-family:var(--f-body); font-size:16px; line-height:1.6; color:var(--forest); background:var(--ivory); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--charcoal); color:var(--ivory); padding:8px 14px; z-index:100; }
.skip:focus { left:8px; }

.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s5); }
.eyebrow { font-size:11px; letter-spacing:var(--track); text-transform:uppercase; color:var(--muted); margin:0 0 var(--s4); }
.eyebrow::before { content:""; display:inline-block; width:24px; height:1px; background:var(--gold); vertical-align:middle; margin-right:10px; }
h1,h2,h3 { font-family:var(--f-display); font-weight:400; line-height:1.05; margin:0; letter-spacing:-.01em; }
h1 { font-size:clamp(44px, 11vw, 96px); }
h2 { font-size:clamp(34px, 7vw, 60px); }
h3 { font-size:26px; }
p { margin:0 0 var(--s4); }
.lead { font-size:18px; color:var(--muted); max-width:36ch; }

/* Placeholder data — wajib terlihat jelas saat development */
.ph { display:inline-block; font-family:ui-monospace,monospace; font-size:.78em; letter-spacing:0; background:repeating-linear-gradient(45deg,#fff3c4 0 6px,#ffe9a0 6px 12px); color:#5a4300; padding:1px 6px; border:1px dashed #b38b00; border-radius:2px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; font:500 13px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:1px solid var(--charcoal); background:var(--charcoal); color:var(--ivory); border-radius:var(--r); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn:hover { background:var(--ink); }
.btn:active { transform:translateY(1px); }
.btn--ghost { background:transparent; color:var(--charcoal); }
.btn--ghost:hover { background:var(--charcoal); color:var(--ivory); }
.btn--light { background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
.btn--light:hover { background:transparent; color:var(--ivory); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.link { font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:4px; }

/* Header */
.hdr { position:sticky; top:0; z-index:50; background:rgba(244,238,227,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid transparent; transition:border-color .3s; }
.hdr.is-scrolled { border-color:var(--line); }
.hdr__in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; color:var(--charcoal); text-decoration:none; }
.logo { display:inline-block; aspect-ratio:1066/536; height:30px; background-color:currentColor; -webkit-mask:url(assets/logo.svg) center/contain no-repeat; mask:url(assets/logo.svg) center/contain no-repeat; }
.nav { display:none; gap:var(--s6); }
.nav a { font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; padding:8px 0; border-bottom:1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color:var(--gold); }
.hdr__act { display:flex; align-items:center; gap:var(--s2); }
.icon-btn { position:relative; width:44px; height:44px; display:grid; place-items:center; background:none; border:0; cursor:pointer; color:var(--charcoal); }
.icon-btn svg { width:22px; height:22px; }
.badge { position:absolute; top:6px; right:4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--olive); color:var(--ivory); font-size:10px; line-height:18px; text-align:center; font-weight:600; }
.badge[data-count="0"] { display:none; }
.menu-toggle { display:grid; }
@media (min-width: 900px) { .nav { display:flex; } .menu-toggle { display:none; } }

/* Mobile drawer */
.drawer { position:fixed; inset:0; z-index:80; pointer-events:none; }
.drawer__bg { position:absolute; inset:0; background:rgba(22,22,22,.55); opacity:0; transition:opacity .3s; }
.drawer__panel { position:absolute; top:0; bottom:0; width:min(88vw, 420px); background:var(--ivory); padding:var(--s5); display:flex; flex-direction:column; transition:transform .35s var(--ease); overflow-y:auto; }
.drawer--left .drawer__panel { left:0; transform:translateX(-100%); }
.drawer--right .drawer__panel { right:0; transform:translateX(100%); }
.drawer.is-open { pointer-events:auto; }
.drawer.is-open .drawer__bg { opacity:1; }
.drawer.is-open .drawer__panel { transform:none; }
.drawer__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s6); }
.drawer.is-open .drawer__panel { box-shadow:0 0 40px rgba(0,0,0,.18); }
.drawer:not(.is-open) .drawer__panel { visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s; }
.drawer__nav a { display:block; font-family:var(--f-display); font-size:34px; line-height:1.2; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); }
.drawer__sub { margin-top:auto; padding-top:var(--s6); display:grid; gap:12px; font-size:14px; }
.drawer__sub a { text-decoration:none; color:var(--muted); }
.drawer__sub .btn { margin-bottom:var(--s3); }

/* Hero */
.hero { position:relative; background:var(--cream); overflow:hidden; }
.hero__grid { display:grid; gap:var(--s6); padding-top:var(--s7); padding-bottom:var(--s8); }
.hero__media { position:relative; aspect-ratio:1; overflow:hidden; }
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero__copy h1 em { font-style:italic; color:var(--olive); }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1.05fr; align-items:center; padding-top:var(--s8); padding-bottom:var(--s9); gap:var(--s8); }
}

/* Sections */
.sec { padding:var(--s8) 0; }
.sec--dark { background:var(--charcoal); color:var(--ivory); }
.sec--dark .eyebrow, .sec--dark .lead { color:#b7b0a3; }
.sec--olive { background:var(--olive); color:var(--ivory); }
.sec__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:var(--s4); margin-bottom:var(--s6); }
@media (min-width: 900px) { .sec { padding:var(--s9) 0; } }

/* Product card */
.grid-p { display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width: 600px) { .grid-p { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1000px) { .grid-p { grid-template-columns:repeat(3,1fr); } .grid-p--4 { grid-template-columns:repeat(4,1fr); } }
.card { display:flex; flex-direction:column; }
.card__link { text-decoration:none; color:inherit; display:block; }
.card__img { aspect-ratio:4/5; background:var(--cream); overflow:hidden; position:relative; }
.card__img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card__img img { transform:scale(1.03); }
.card__body { padding:var(--s4) 0 0; display:grid; gap:4px; }
.card__name { font-family:var(--f-display); font-size:26px; margin:0; font-weight:400; }
.card__meta { font-size:14px; color:#5b564e; }
.card__price { font-size:15px; font-weight:500; }
.card__price small { font-weight:400; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.card__add { margin-top:var(--s3); min-height:44px; border:1px solid var(--charcoal); background:none; font:500 11px var(--f-body); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; color:var(--charcoal); transition:background .25s var(--ease), color .25s var(--ease); }
.card__add:hover { background:var(--charcoal); color:var(--ivory); }
.card--cta { background:var(--charcoal); color:var(--ivory); padding:var(--s6); justify-content:space-between; min-height:320px; text-decoration:none; }
.card--cta h3 { font-size:32px; color:var(--ivory); margin:0 0 var(--s3); }
.card--cta p { color:#bdb6a8; margin:0; }
.card--cta .link { color:var(--gold); margin-top:var(--s5); }
.card--cta .eyebrow { color:var(--gold); }
.tag { position:absolute; top:12px; left:12px; background:var(--ivory); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 10px; }

/* Approach / pillars */
.pillars { display:grid; gap:var(--s6); }
.pillar { border-top:1px solid rgba(244,238,227,.2); padding-top:var(--s5); }
.pillar__n { font-family:var(--f-display); font-size:20px; color:var(--gold); }
.pillar h3 { margin:var(--s2) 0 var(--s3); }
@media (min-width: 900px) { .pillars { grid-template-columns:repeat(3,1fr); } }

/* Routine */
.steps { display:grid; gap:0; counter-reset:step; border-top:1px solid var(--line); }
.step { display:grid; grid-template-columns:56px 1fr; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--line); }
.step__n { font-family:var(--f-display); font-size:40px; line-height:1; color:var(--olive); }
.step h3 { font-size:24px; margin-bottom:6px; }
.step p { color:var(--muted); margin:0; }
.time-toggle { display:inline-flex; border:1px solid var(--charcoal); margin-bottom:var(--s5); }
.time-toggle button { min-height:44px; padding:0 22px; background:none; border:0; font:500 12px var(--f-body); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; color:var(--charcoal); }
.time-toggle button[aria-pressed="true"] { background:var(--charcoal); color:var(--ivory); }

/* Story */
.story { display:grid; gap:var(--s6); align-items:center; }
.story__img { aspect-ratio:4/5; overflow:hidden; }
.story__img img { width:100%; height:100%; object-fit:cover; object-position:30% center; }
@media (min-width: 900px) { .story { grid-template-columns:1fr 1fr; gap:var(--s8); } }

/* FAQ */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:var(--s5) 40px var(--s5) 0; position:relative; font-family:var(--f-display); font-size:22px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--f-body); font-weight:300; font-size:26px; transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq .ans { padding:0 0 var(--s5); color:var(--muted); max-width:62ch; }

/* Footer */
.ftr { background:var(--ink); color:#cfc8ba; padding:var(--s8) 0 var(--s6); font-size:14px; }
.ftr__grid { display:grid; gap:var(--s6); }
.ftr h4 { font:500 11px var(--f-body); letter-spacing:var(--track); text-transform:uppercase; color:var(--gold); margin:0 0 var(--s4); }
.ftr ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ftr a { text-decoration:none; }
.ftr a:hover, .ftr__btn:hover { color:var(--ivory); }
.ftr__btn { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.ftr__brand .logo { height:48px; color:var(--label); margin-bottom:var(--s4); }
.ftr__base { margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.1); font-size:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); }
@media (min-width: 900px) { .ftr__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; } }

/* PDP */
.crumbs { font-size:12px; letter-spacing:.1em; color:var(--muted); padding:var(--s4) 0; }
.crumbs a { text-decoration:none; }
.pdp { display:grid; gap:var(--s6); padding-bottom:var(--s8); }
.gallery__main { aspect-ratio:1; background:var(--cream); overflow:hidden; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__thumbs { display:flex; gap:var(--s2); margin-top:var(--s2); }
.gallery__thumbs button { width:72px; aspect-ratio:1; padding:0; border:1px solid transparent; background:var(--cream); cursor:pointer; overflow:hidden; }
.gallery__thumbs button[aria-current="true"] { border-color:var(--charcoal); }
.gallery__thumbs img { width:100%; height:100%; object-fit:cover; }
.gallery__thumbs .empty { display:grid; place-items:center; font-size:9px; color:var(--muted); border:1px dashed var(--sand); }
.pdp__info h1 { font-size:clamp(40px, 9vw, 64px); margin-bottom:var(--s3); }
.pdp__sub { color:var(--muted); margin-bottom:var(--s5); }
.pdp__price { font-size:22px; font-weight:500; margin-bottom:var(--s2); }
.stock { font-size:13px; color:var(--olive); display:flex; align-items:center; gap:8px; margin-bottom:var(--s5); }
.stock::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--charcoal); height:52px; }
.qty button { width:48px; height:100%; background:none; border:0; font-size:20px; cursor:pointer; color:var(--charcoal); }
.qty input { width:44px; text-align:center; border:0; background:none; font:500 16px var(--f-body); color:var(--charcoal); -moz-appearance:textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance:none; }
.buy { display:flex; gap:var(--s3); margin-bottom:var(--s5); }
.buy .btn { flex:1; }
.acc { border-top:1px solid var(--line); margin-top:var(--s5); }
.acc details { border-bottom:1px solid var(--line); }
.acc summary { list-style:none; cursor:pointer; padding:var(--s4) 32px var(--s4) 0; position:relative; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:300; }
.acc details[open] summary::after { content:"–"; }
.acc .body { padding:0 0 var(--s5); color:var(--muted); font-size:15px; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s4) 0; margin-bottom:var(--s5); }
.facts div { font-size:12px; color:var(--muted); }
.facts strong { display:block; font-size:14px; color:var(--charcoal); font-weight:500; margin-top:2px; }
@media (min-width: 900px) {
  .pdp { grid-template-columns:1.1fr 1fr; gap:var(--s8); align-items:start; }
  .pdp__info { position:sticky; top:88px; }
}
/* Sticky buy bar mobile */
.buybar { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--ivory); border-top:1px solid var(--line); padding:10px var(--s5) calc(10px + env(safe-area-inset-bottom)); display:flex; gap:var(--s3); align-items:center; transform:translateY(110%); transition:transform .35s var(--ease); }
.buybar.is-visible { transform:none; }
.buybar__p { flex:1; font-size:13px; line-height:1.3; }
.buybar__p strong { display:block; font-family:var(--f-display); font-weight:400; font-size:20px; }
@media (min-width: 900px) { .buybar { display:none; } }

/* Cart drawer */
.cart__items { flex:1; display:grid; align-content:start; gap:var(--s4); }
.ci { display:grid; grid-template-columns:72px 1fr auto; gap:var(--s3); align-items:start; padding-bottom:var(--s4); border-bottom:1px solid var(--line); }
.ci img { width:72px; height:72px; object-fit:cover; background:var(--cream); }
.ci__name { font-family:var(--f-display); font-size:20px; line-height:1.1; }
.ci__meta { font-size:13px; color:var(--muted); }
.ci .qty { height:44px; margin-top:8px; }
.ci .qty button { width:44px; font-size:18px; }
.ci .qty input { width:34px; font-size:15px; }
.ci__line { font-size:13px; color:var(--charcoal); margin-top:2px; }
.ci__rm { background:none; border:0; font-size:13px; text-decoration:underline; color:var(--muted); cursor:pointer; min-height:44px; padding:0 4px; }
.cart__empty { text-align:center; padding:var(--s8) 0; color:var(--muted); }
.cart__foot { border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s4); }
.cart__row { display:flex; justify-content:space-between; margin-bottom:var(--s2); }
.cart__note { font-size:13px; color:#5b564e; margin:var(--s3) 0; }

/* Toast */
.toast { position:fixed; left:50%; bottom:90px; transform:translate(-50%, 20px); background:var(--charcoal); color:var(--ivory); padding:12px 20px; font-size:14px; opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:90; }
.toast.is-on { opacity:1; transform:translate(-50%,0); }

/* Demo disclaimer */
.ftr__disclaimer { font-size:13px; color:#cfc8ba; max-width:70ch; margin:var(--s6) 0 0; padding:var(--s4) var(--s5); border:1px solid rgba(196,160,106,.4); }
.ftr__disclaimer strong { color:var(--gold); font-weight:500; }

/* Demo dialog */
dialog[data-demo] { border:0; padding:0; max-width:460px; width:92vw; background:var(--ivory); color:var(--charcoal); }
dialog[data-demo]::backdrop { background:rgba(22,22,22,.55); }
.demo__in { padding:var(--s6); }
.demo__in h3 { font-size:28px; margin-bottom:var(--s3); }
.demo__badge { display:inline-block; background:var(--olive); color:var(--ivory); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; margin-bottom:var(--s4); }
.demo__list { list-style:none; margin:0 0 var(--s5); padding:var(--s4) 0 0; display:grid; gap:8px; border-top:1px solid var(--line); }
.demo__list li { display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.demo__list li.sum { border-top:1px solid var(--line); padding-top:8px; margin-top:4px; font-weight:600; }
.demo__actions { display:flex; gap:var(--s3); flex-wrap:wrap; }
.demo__actions .btn { flex:1; min-width:160px; }

/* Catalog */
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { min-height:44px; padding:0 18px; border:1px solid var(--line); background:none; font:500 12px var(--f-body); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; color:var(--muted); }
.filters button[aria-pressed="true"] { border-color:var(--charcoal); background:var(--charcoal); color:var(--ivory); }
.catalog__bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--line); }
.catalog__bar select { height:44px; border:1px solid var(--line); background:var(--ivory); padding:0 10px; font:500 13px var(--f-body); color:var(--charcoal); }
.catalog__count { font-size:13px; color:var(--muted); }
.empty-state { text-align:center; padding:var(--s8) 0; color:var(--muted); }
.page-head { padding-top:var(--s7); padding-bottom:var(--s6); }

/* Routine list */
.rlist { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.rstep { display:grid; grid-template-columns:96px 1fr; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--line); align-items:start; }
.rstep img { width:96px; height:96px; object-fit:cover; background:var(--cream); }
.rstep__n { font-family:var(--f-display); font-size:18px; color:#8a6d3f; }
.rstep h3 { font-size:24px; margin:2px 0 4px; }
.rstep p { color:var(--muted); margin:0 0 8px; }
@media (min-width:700px) { .rstep { grid-template-columns:140px 1fr; } .rstep img { width:140px; height:140px; } }

/* Forms */
.field { display:grid; gap:6px; margin-bottom:var(--s4); }
.field label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#4a463f; }
.field input, .field textarea { border:1px solid rgba(31,31,30,.6); background:#fbf8f2; padding:12px 14px; font:inherit; min-height:48px; color:var(--charcoal); border-radius:var(--r); }
.field input:focus, .field textarea:focus { border-color:var(--charcoal); outline:none; box-shadow:0 0 0 2px var(--gold); }
.field textarea { min-height:130px; resize:vertical; }
.field [aria-invalid="true"] { border-color:#a13a2e; }
.field__err { font-size:12.5px; color:#a13a2e; min-height:18px; }
.form__ok { background:var(--olive); color:var(--ivory); padding:14px 18px; margin-top:var(--s4); }

/* About / contact */
.split { display:grid; gap:var(--s7); }
@media (min-width:900px) { .split { grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; } }
.media-4x5 { aspect-ratio:4/5; overflow:hidden; background:var(--cream); }
.media-4x5 img { width:100%; height:100%; object-fit:cover; }
.mosaic { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.mosaic img { aspect-ratio:1; width:100%; object-fit:cover; }
@media (max-width:699px) { .mosaic { grid-template-columns:repeat(6,1fr); } .mosaic img { grid-column:span 2; } .mosaic img:nth-child(n+4) { grid-column:span 3; } }
.info-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.info-list li { padding:var(--s4) 0; border-bottom:1px solid var(--line); display:grid; gap:2px; }
.info-list span { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* Reveal */
.rv { opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
}


/* =====================================================================
   V2 — arah visual forest / cream / sage / terracotta
   ===================================================================== */
h1,h2,h3 { font-weight:500; letter-spacing:-.015em; }
h1 { font-size:clamp(42px, 9.5vw, 82px); line-height:1.02; }
h2 { font-size:clamp(32px, 5.6vw, 52px); line-height:1.06; }
.lead { color:#4d5a46; }
.eyebrow { color:var(--olive); font-weight:500; }
.eyebrow::before { background:var(--terracotta); }

/* Buttons: pill */
.btn { border-radius:999px; border-color:var(--forest); background:var(--forest); color:var(--ivory); letter-spacing:.12em; font-weight:600; }
.btn:hover { background:var(--forest-2); }
.btn--ghost { background:transparent; color:var(--forest); }
.btn--ghost:hover { background:var(--forest); color:var(--ivory); }
.btn--terra { background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.btn--terra:hover { background:#a9552f; border-color:#a9552f; }
.btn--light { background:var(--ivory); border-color:var(--ivory); color:var(--forest); }
.btn--light:hover { background:transparent; color:var(--ivory); }
.link { border-color:var(--terracotta); font-weight:600; }

/* Header forest */
.hdr { background:var(--forest-2); color:var(--ivory); backdrop-filter:none; border:0; }
.hdr.is-scrolled { border-color:transparent; box-shadow:0 2px 14px rgba(0,0,0,.18); }
.hdr__in { height:68px; }
.hdr .brand, .hdr .icon-btn { color:var(--ivory); }
.hdr .logo { height:32px; }
.nav a { color:#e9e3d2; font-weight:500; }
.nav a:hover, .nav a[aria-current="page"] { border-color:var(--terracotta); color:#fff; }
.badge { background:var(--terracotta); }
@media (min-width:900px) { .hdr__in { display:grid; grid-template-columns:1fr auto 1fr; } .hdr__act { justify-self:end; } .nav { justify-self:center; } }
.drawer__panel { background:var(--ivory); }
.drawer__panel { border-radius:0 var(--r-lg) var(--r-lg) 0; }
.drawer--right .drawer__panel { border-radius:var(--r-lg) 0 0 var(--r-lg); }

/* Decorative: leaves + sun shadow (dekorasi visual saja) */
.leaf { position:absolute; pointer-events:none; color:var(--sage); opacity:.55; }
.sunshade { position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 70px, rgba(120,95,50,.07) 70px 130px, transparent 130px 210px);
  mask:linear-gradient(90deg, transparent 0, #000 40%, #000 100%); -webkit-mask:linear-gradient(90deg, transparent 0, #000 40%, #000 100%); }

/* Hero v2 */
.hero2 { position:relative; background:var(--cream); overflow:hidden; }
.hero2__grid { position:relative; display:grid; gap:var(--s6); padding-top:var(--s7); padding-bottom:var(--s7); align-items:center; }
.hero2__copy { position:relative; z-index:2; }
.hero2__copy h1 em { font-style:italic; color:var(--terracotta); font-weight:400; }
.hero2__copy .lead { margin-top:var(--s5); max-width:40ch; }
.hero2__cta { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.hero2__media { position:relative; z-index:1; display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:1fr 1fr; gap:12px; aspect-ratio:1.05; }
.hero2__media figure { margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--sand); box-shadow:0 18px 40px -22px rgba(38,64,47,.45); }
.hero2__media figure:first-child { grid-row:span 2; border-radius:999px 999px var(--r-lg) var(--r-lg); }
.hero2__media img { width:100%; height:100%; object-fit:cover; }
.hero2__stone { position:absolute; z-index:0; border-radius:50%; background:var(--sand); }
@media (min-width:900px) {
  .hero2__grid { grid-template-columns:1fr 1.1fr; gap:var(--s8); padding-top:var(--s8); padding-bottom:var(--s8); }
}

/* Info strip */
.strip { background:var(--forest); color:var(--ivory); }
.strip__in { display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.strip a { display:flex; gap:12px; align-items:center; padding:20px 12px; text-decoration:none; border-right:1px solid rgba(250,245,232,.12); }
.strip a:last-child { border-right:0; }
.strip svg { width:30px; height:30px; flex:none; color:var(--sage-soft); }
.strip strong { display:block; font-size:14px; font-weight:600; }
.strip span { font-size:12.5px; color:#c9d0bd; }
@media (max-width:899px) { .strip a:nth-child(2) { border-right:0; } .strip a:nth-child(-n+2) { border-bottom:1px solid rgba(250,245,232,.12); } }
@media (min-width:900px) { .strip__in { grid-template-columns:repeat(4,1fr); } .strip a { padding:26px 22px; } }

/* Product cards v2 — frame melengkung (arch), object-fit contain-safe */
.grid-p { gap:var(--s5) var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:1000px) { .grid-p--5 { grid-template-columns:repeat(5,1fr); } }
.card { background:#fff9ee; border-radius:var(--r-lg); padding:10px 10px 14px; box-shadow:0 1px 0 var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(38,64,47,.5); }
.card__img { aspect-ratio:4/5; border-radius:999px 999px 18px 18px; background:var(--sand); }
.card__img img { object-position:center 45%; }
.card:hover .card__img img { transform:scale(1.04); }
.card__body { padding:14px 6px 0; text-align:center; }
.card__name { font-size:22px; font-weight:500; }
.card__meta { font-size:13px; color:var(--muted); }
.card__price { color:var(--forest); font-weight:600; }
.card__add { border-radius:999px; border-color:var(--forest); color:var(--forest); margin:12px 6px 0; }
.card__add:hover { background:var(--forest); color:var(--ivory); }
.tag { top:auto; bottom:12px; left:50%; transform:translateX(-50%); border-radius:999px; background:rgba(250,245,232,.94); color:var(--forest); font-weight:600; white-space:nowrap; }
.card--cta { background:var(--forest); border-radius:var(--r-lg); }
@media (max-width:420px) { .card__name { font-size:19px; } .card__add { font-size:10px; letter-spacing:.08em; } }

/* Twin banners */
.twin { display:grid; gap:var(--s4); }
@media (min-width:900px) { .twin { grid-template-columns:1fr 1fr; } }
.bnr { position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch; border-radius:var(--r-lg); overflow:hidden; min-height:300px; }
.bnr__txt { padding:var(--s6); display:flex; flex-direction:column; justify-content:center; gap:var(--s3); position:relative; z-index:1; }
.bnr__txt h3 { font-size:clamp(26px, 3.2vw, 36px); line-height:1.1; }
.bnr__txt p { margin:0; font-size:15px; }
.bnr__txt .btn { align-self:flex-start; margin-top:var(--s3); min-height:46px; padding:0 22px; font-size:12px; }
.bnr__img { position:relative; }
.bnr__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bnr--forest { background:var(--forest); color:var(--ivory); }
.bnr--forest p { color:#cfd6c4; }
.bnr--cream { background:var(--sand); color:var(--forest); }
.bnr--cream p { color:#4d5a46; }
@media (max-width:560px) { .bnr { grid-template-columns:1fr; } .bnr__img { aspect-ratio:16/10; order:-1; } }

/* 3-step routine */
.steps3 { display:grid; gap:var(--s4); list-style:none; padding:0; margin:0; counter-reset:s; }
@media (min-width:800px) { .steps3 { grid-template-columns:repeat(3,1fr); gap:var(--s5); } }
.s3 { position:relative; background:#fff9ee; border-radius:var(--r-lg); padding:var(--s5); display:grid; grid-template-columns:84px 1fr; gap:var(--s4); align-items:center; }
@media (min-width:800px) { .s3 { grid-template-columns:1fr; text-align:center; padding:var(--s6) var(--s5); } .s3 .s3__img { margin:0 auto; } }
.s3__img { width:84px; height:84px; border-radius:50%; overflow:hidden; background:var(--sand); }
@media (min-width:800px) { .s3__img { width:132px; height:132px; } }
.s3__img img { width:100%; height:100%; object-fit:cover; }
.s3__n { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); font-weight:600; }
.s3 h3 { font-size:28px; margin:2px 0 6px; }
.s3 p { margin:0; color:var(--muted); font-size:14.5px; }
.s3__arrow { display:none; }
@media (min-width:800px) { .s3:not(:last-child)::after { content:"→"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:var(--sage); font-size:24px; z-index:2; } }
.steps-note { font-size:13px; color:var(--muted); margin-top:var(--s4); text-align:center; }

/* Story v2 */
.story2 { display:grid; gap:var(--s6); align-items:center; }
@media (min-width:900px) { .story2 { grid-template-columns:1fr 1fr; gap:var(--s8); } }
.story2__media { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.story2__media img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-lg); }
.story2__media img:first-child { border-radius:999px 999px var(--r-lg) var(--r-lg); margin-top:36px; }

/* Closing terracotta banner */
.closing { position:relative; background:var(--terracotta); color:#fff; border-radius:var(--r-lg); overflow:hidden; display:grid; align-items:center; }
.closing__txt { padding:var(--s7) var(--s6); position:relative; z-index:1; }
.closing__txt h2 { color:#fff; }
.closing__txt p { color:#fbe3d4; max-width:40ch; margin:var(--s4) 0 var(--s5); }
.closing__imgs { display:flex; gap:10px; padding:0 var(--s6) var(--s6); }
.closing__imgs img { flex:1; min-width:0; aspect-ratio:3/4; object-fit:cover; border-radius:999px 999px 16px 16px; border:3px solid rgba(255,255,255,.35); }
@media (min-width:900px) { .closing { grid-template-columns:1fr 1.1fr; } .closing__imgs { padding:var(--s6) var(--s6) var(--s6) 0; } }

/* Sections v2: kurangi ruang kosong */
.sec { padding:var(--s7) 0; }
@media (min-width:900px) { .sec { padding:var(--s8) 0; } }
.sec--dark { background:var(--forest); }
.sec--sage { background:#e7eadc; }
.sec__head { margin-bottom:var(--s5); }

/* Footer forest */
.ftr { background:var(--forest-2); color:#d6dccb; }
.ftr h4 { color:var(--sage-soft); }
.ftr__brand .logo { color:var(--ivory); height:44px; }
.ftr__disclaimer { border-color:rgba(195,103,60,.6); border-radius:var(--r); color:#e9e3d2; background:rgba(255,255,255,.03); }
.ftr__disclaimer strong { color:#e79a73; }
.ftr__base { border-color:rgba(250,245,232,.12); }

/* Catalog / PDP / pages konsisten */
.page-head2 { position:relative; background:var(--cream); overflow:hidden; padding:var(--s7) 0 var(--s6); margin-bottom:var(--s6); }
.page-head2 h1 { font-size:clamp(40px, 8vw, 68px); }
.page-head2 .lead { margin-top:var(--s3); }
.filters button { border-radius:999px; border-color:rgba(38,64,47,.25); color:var(--forest); }
.filters button[aria-pressed="true"] { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
.catalog__bar select { border-radius:999px; padding:0 16px; border-color:rgba(38,64,47,.25); background:#fff9ee; }
.time-toggle { border-radius:999px; overflow:hidden; border-color:var(--forest); }
.time-toggle button { color:var(--forest); }
.time-toggle button[aria-pressed="true"] { background:var(--forest); }
.gallery__main { border-radius:999px 999px var(--r-lg) var(--r-lg); background:var(--sand); }
.pdp__info .pdp__price { color:var(--forest); }
.qty { border-radius:999px; border-color:var(--forest); overflow:hidden; }
.qty button, .qty input { color:var(--forest); }
.facts { border-radius:var(--r); }
.ci img { border-radius:12px; }
.rstep img { border-radius:50%; }
.mosaic { gap:10px; }
.mosaic img { border-radius:var(--r-lg); }
.mosaic img:nth-child(odd) { border-radius:999px 999px var(--r-lg) var(--r-lg); }
.field input, .field textarea { border-radius:var(--r); border-color:rgba(38,64,47,.45); }
.form__ok { border-radius:var(--r); background:var(--forest); }
.demo__badge { border-radius:999px; background:var(--terracotta); }
dialog[data-demo] { border-radius:var(--r-lg); }
.buybar { background:var(--ivory); }
.pillar__n { color:var(--terracotta); }
.sec--dark .pillar__n { color:#e79a73; }
.faq summary { font-weight:500; }

/* V2 fixes: grid 5 kolom + CTA tile hanya mobile (genapkan 2 kolom) */
@media (min-width:1000px) { .grid-p--5 .card--cta { display:none; } }
@media (min-width:600px) and (max-width:999px) { .grid-p--5 { grid-template-columns:repeat(3,1fr); } .grid-p--5 .card--cta { display:flex; } }
.card--cta { min-height:0; padding:var(--s5); }
.card--cta h3 { font-size:26px; }
.card--cta .link, .card--cta .eyebrow { color:#e79a73; }
.card--cta .eyebrow::before { background:#e79a73; }
.card--cta p { color:#cfd6c4; font-size:14px; }
.sec--dark .eyebrow, .sec--dark .lead { color:#c9d0bd; }
.pillar { border-top-color:rgba(250,245,232,.2); }
.page-head2 .eyebrow { margin-bottom:var(--s3); }

/* V2 polish round 1 — fix cropping, alignment, contrast */
.card__img img { object-position:center 30%; }
.card { display:flex; flex-direction:column; }
.card__body { display:flex; flex-direction:column; flex:1; }
.card__meta { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; }
.card__price-row { margin-top:auto; }
.card__add { margin-top:12px; }
.tag { top:12px; bottom:auto; left:12px; transform:none; font-size:10px; padding:5px 9px; }

.strip a { align-items:flex-start; }
.strip div { padding-top:2px; }
.strip span { opacity:.92; }

.hero2__media { gap:14px; }
.hero2__media figure:nth-child(2) { margin-bottom:0; }
.hero2__media figure:nth-child(3) { margin-top:0; }

.s3 { align-items:flex-start; }
@media (min-width:800px) { .s3 { align-items:center; } }
.s3 p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.s3__arrow, .s3:not(:last-child)::after { display:none !important; }

.story2__media img:first-child { margin-top:0; }
.story2__media img { border-radius:var(--r-lg) !important; object-position:center 35%; }
.story2 > div.rv:last-child { max-width:46ch; }

.closing__txt { padding:var(--s6); }
.closing__txt p { max-width:none; }
.closing .leaf { display:none; }
.bnr__img img { object-position:center 25%; }

.ftr__brand { padding-left:0; }
.ftr__grid { align-items:start; }
.ftr__disclaimer { max-width:none; }

.card--cta { align-items:flex-start; justify-content:center; gap:4px; }

.card__link { display:flex; flex-direction:column; flex:1; text-decoration:none; }
.card__price { margin-top:auto; padding-top:8px; }
.card__price small { font-size:10.5px; letter-spacing:.1em; }
@media (max-width:599px) { .grid-p--5 .card--cta { grid-column:span 2; } .card--cta h3 { font-size:24px; } }
.card--cta .eyebrow { letter-spacing:.12em; white-space:nowrap; }
.card--cta .link { white-space:nowrap; }

/* Matikan animasi scroll-reveal agar konten selalu tampil utuh */
.rv { opacity:1 !important; transform:none !important; transition:none !important; }

.card__img { position:relative; }
.tag { position:absolute; top:12px; left:12px; bottom:auto; transform:none; background:rgba(250,245,232,.95); color:var(--forest); font-weight:600; font-size:10.5px; padding:6px 10px; border-radius:999px; }