/* =====================================================================
   BABYGOLD BEAUTY — style
   Mobile-first (diuji di lebar 390px). Putih bersih + arang + emas lembut (aksen),
   judul serif, isi sans-serif, banyak ruang kosong.
   ===================================================================== */
:root{
  /* Latar */
  --bg:#FFFFFF;            /* latar utama */
  --bg-soft:#FAFAF8;       /* bagian yang dipisahkan (abu-abu hangat sangat muda) */
  --bg-soft-2:#F5F4F0;     /* kotak kecil di atas putih (cara pakai, kode) */
  --surface:#FFFFFF;       /* kartu */
  /* Teks: arang, bukan hitam pekat. Emas TIDAK dipakai untuk teks. */
  --ink:#2B2A28;           /* teks utama   (kontras 14,3:1 di putih) */
  --ink-soft:#5C5A55;      /* teks kedua   (kontras 6,9:1 di putih) */
  --ink-muted:#6E6B65;     /* teks tertahan, mis. tombol belum aktif (5,3:1) */
  /* Aksen emas: tombol, badge BPOM, garis, ikon */
  --gold:#C9A45C; --gold-light:#E8D6A8; --gold-deep:#82622A;
  --gold-btn:linear-gradient(180deg,#E8D19C 0%,#D3B16B 100%);
  --gold-tint:rgba(232,214,168,.24); --gold-edge:rgba(201,164,92,.55);   /* kotak pemberitahuan: tint emas tipis */
  /* Garis dan bayangan */
  --line:#ECE9E1; --line-strong:#D3CDBF; --control-line:#8C877C;
  --shadow-rest:0 1px 2px rgba(43,42,40,.05),0 10px 24px -18px rgba(43,42,40,.30);
  --shadow-soft:0 1px 2px rgba(43,42,40,.05),0 16px 32px -20px rgba(43,42,40,.30);
  --shadow-card:0 2px 4px rgba(43,42,40,.05),0 24px 44px -26px rgba(43,42,40,.34);
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:22px}
.ico{display:inline-grid;place-items:center;flex:none}
.ico svg{width:16px;height:16px}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:15px 30px;border-radius:999px;border:1px solid transparent;font:700 .95rem/1 var(--font-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease),box-shadow .3s,filter .3s,background .3s,border-color .3s}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold-btn);border-color:rgba(130,98,42,.3);color:var(--ink);box-shadow:0 10px 22px -16px rgba(130,98,42,.55),inset 0 1px 0 rgba(255,255,255,.65)}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 14px 24px -16px rgba(130,98,42,.65),inset 0 1px 0 rgba(255,255,255,.65)}
.btn-off{background:transparent;border:1px dashed var(--line-strong);color:var(--ink-muted);box-shadow:none;cursor:not-allowed}
.btn-off:active{transform:none}
/* Ukuran huruf tombol beli mengecil mengikuti lebar layar; label boleh turun ke dua baris agar "Beli di TikTok Shop" tampil utuh di kartu 2 kolom (360-430px) */
.btn-buy{min-width:0;min-height:44px;padding:10px 8px;font-size:clamp(.68rem,2.9vw,.78rem);gap:6px;letter-spacing:0;white-space:normal}
.btn-buy svg{width:15px;height:15px}
.btn-buy>span{min-width:0;text-align:center;line-height:1.15;text-wrap:balance}
@media(max-width:359px){.btn-buy{padding-inline:5px;gap:5px}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold-btn);border:1px solid rgba(130,98,42,.3);color:var(--ink);font:700 1.35rem/1 var(--font-display)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{font:700 1.1rem/1 var(--font-display);letter-spacing:.22em}
.brand-text i{font:600 .56rem/1 var(--font-body);font-style:normal;letter-spacing:.55em;color:var(--ink-soft);margin-top:5px}
/* Logo toko (dari Pengaturan Toko) menggantikan huruf "B": kotak tetap 36 px, jadi tata letak tidak bergeser */
.brand-mark{flex:none}
.brand-mark.has-logo{background:none;border:0}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.js .brand-mark img{opacity:0;transition:opacity .45s var(--ease)}
.js .brand-mark img.is-loaded{opacity:1}
/* Nama toko buatan pemilik bisa panjang: dipotong dengan "…" supaya tombol menu tidak terdorong keluar layar */
.brand.nama-kustom{min-width:0;max-width:calc(100% - 52px)}
.brand.nama-kustom .brand-text{min-width:0}
.brand.nama-kustom .brand-text b,.brand.nama-kustom .brand-text i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-top .brand.nama-kustom{max-width:100%}

.burger{width:44px;height:44px;border:0;background:transparent;position:relative;border-radius:12px;margin-right:-8px}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}

.nav{position:fixed;left:0;right:0;top:var(--header-h);display:flex;flex-direction:column;padding:8px 22px 20px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 30px 40px -32px rgba(43,42,40,.28);transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.nav.open{opacity:1;transform:none;visibility:visible}
.nav a{padding:16px 2px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.nav a:last-child{border-bottom:0}

/* ---------- 1. hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:44px 0 72px;background:var(--bg)}
.hero-in{display:grid;gap:44px;justify-items:center}
.hero h1{line-height:.92}
.h1-main{display:block;font-size:clamp(3.8rem,20vw,7.4rem);font-weight:600;letter-spacing:-.02em}
.h1-sub{display:block;margin-top:14px;font:600 .72rem/1 var(--font-body);letter-spacing:.7em;text-indent:.7em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:899px){.h1-sub{margin-top:calc(clamp(3.8rem,20vw,7.4rem)*.11 + 10px)}}
.lead{max-width:21.5rem;margin:26px auto 32px;font-size:1.03rem;color:var(--ink-soft)}

.hero-art{position:relative;isolation:isolate;width:min(72%,290px)}
.arch{position:relative;aspect-ratio:4/5;border-radius:50% 50% 28px 28px / 40% 40% 28px 28px;overflow:hidden;background:radial-gradient(120% 80% at 50% 22%,#FFFDF5 0%,#F8EDCD 54%,#ECD9A9 100%);box-shadow:var(--shadow-card),inset 0 0 0 1px rgba(255,255,255,.6)}
.arch svg{width:100%;height:100%}
/* Banner beranda (dari Pengaturan Toko): mengisi lengkungan, menggantikan ilustrasi bawaan. Muncul pudar setelah termuat. */
.arch.pakai-banner #heroScene{display:none}
.arch img.hero-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .arch img.hero-banner{opacity:0;transition:opacity .7s var(--ease)}
.js .arch img.hero-banner.is-loaded{opacity:1}
.arch-ring{position:absolute;inset:0;border:1px solid var(--gold);border-radius:50% 50% 28px 28px / 40% 40% 28px 28px;transform:translate(12px,12px);opacity:.55;z-index:-1}
.spark{position:absolute;color:var(--gold);animation:twinkle 3.8s ease-in-out infinite}
.s1{width:24px;height:24px;top:7%;right:-12px}
.s2{width:15px;height:15px;top:44%;left:-20px;animation-delay:1.4s}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.12) rotate(20deg)}}
.float-a{animation:floaty 7s ease-in-out infinite}
.float-b{animation:floaty 8s ease-in-out -2s infinite}
.float-c{animation:floaty 9s ease-in-out -4s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- seksi umum ---------- */
.section{padding:80px 0}
.section-tint{background:var(--bg-soft);border-block:1px solid var(--line)}
.section-head{max-width:34rem;margin:0 0 40px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(2.2rem,9vw,3.4rem);margin:16px 0 14px}
.section-head p:not(.eyebrow){color:var(--ink-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 .68rem/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.section-head.center .eyebrow::after{content:"";width:24px;height:1px;background:var(--gold)}
.mini-title{font:700 .68rem/1 var(--font-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- 2. lini produk ---------- */
.lines{display:grid;gap:14px;max-width:620px;margin-inline:auto}
.lines>li{display:flex}
.line{width:100%;display:grid;grid-template-columns:64px minmax(0,1fr) 36px;align-items:center;gap:16px;padding:14px 16px 14px 14px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-rest);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.line:active{transform:scale(.99)}
.line-thumb{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(90% 90% at 50% 30%,var(--t1) 0%,var(--t2) 100%)}
.line-thumb .art{width:62%;height:auto}
.line-count{display:block;font:700 .62rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.line-txt b{display:block;font:600 1.45rem/1.05 var(--font-display)}
.line-txt small{display:block;margin-top:5px;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.line-go{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-deep);transition:background .3s,color .3s}
.line-go svg{width:16px;height:16px}

/* ---------- 3. produk ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 22px 10px;margin:-4px -22px -2px;scroll-padding-inline:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;min-height:42px;border:1px solid var(--line-strong);background:transparent;padding:11px 18px;border-radius:999px;font:600 .84rem/1 var(--font-body);transition:background .25s,color .25s,border-color .25s}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip small{font-size:.7rem;opacity:.75;margin-left:6px;font-weight:600}
.count{margin:14px 0 22px;font-size:.8rem;font-weight:600;color:var(--ink-soft);text-align:center}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:339px){.grid{grid-template-columns:minmax(0,1fr)}}
.empty{grid-column:1/-1;text-align:center;padding:48px 16px;color:var(--ink-soft)}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-rest);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.card-media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(95% 80% at 50% 36%,var(--t1,#FFFFFF) 0%,var(--t2,#F3EEE2) 100%)}
.card-media .art{width:64%;height:auto;filter:drop-shadow(0 12px 10px rgba(43,42,40,.16));transition:transform .8s var(--ease)}
/* Kartu sempit: beri ruang di bawah ilustrasi agar tidak bertabrakan dengan keterangan "Ilustrasi sementara" */
@media(max-width:399px){.card-media .art{width:58%;margin-top:-8%}}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ph-note{position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;padding:4px 8px;border-radius:999px;font:600 .56rem/1 var(--font-body);letter-spacing:.06em;background:rgba(255,255,255,.88);color:var(--ink-soft)}
.tag{position:absolute;top:10px;right:10px;z-index:2;pointer-events:none;padding:5px 10px;border-radius:999px;font:800 .6rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;background:var(--gold-btn);color:var(--ink)}
.card-body{display:flex;flex:1;flex-direction:column;gap:7px;padding:14px 12px 14px;border-top:1px solid var(--line)}
.card-series{font:700 .58rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.card-title{font-size:1.2rem;line-height:1.12}
/* Judul 1 dan 2 baris diratakan hanya di kartu 2 kolom HP; di layout lain tidak perlu */
@media(min-width:340px) and (max-width:519px){.card-title{min-height:2.24em}}
.card-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.card-open::after{content:"";position:absolute;inset:0;z-index:1}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-weight:800;font-size:.98rem}
.price s{font-weight:500;font-size:.78rem;color:var(--ink-soft)}
.price-empty{font-weight:500;font-size:.76rem;color:var(--ink-soft)}
.bpom{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;padding:5px 10px 5px 7px;border-radius:999px;border:1px solid rgba(201,164,92,.7);background:rgba(232,214,168,.26);font:700 .64rem/1.2 var(--font-body);letter-spacing:.04em;color:var(--ink-soft)}
.bpom svg{width:13px;height:13px;flex:none;color:var(--gold-deep);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bpom b{font-weight:800;color:var(--ink);white-space:nowrap}
/* Kartu 2 kolom di HP sempit: nomor BPOM tidak boleh terpotong di tengah angka */
@media(max-width:430px){.bpom{padding:5px 8px;letter-spacing:0}.bpom svg{display:none}}
.bpom.is-empty{border-style:dashed;border-color:var(--line-strong);background:transparent;color:var(--ink-soft)}
.buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(138px,100%),1fr));gap:8px;margin-top:auto;padding-top:10px;position:relative;z-index:2}
.shop-note{margin:36px auto 0;max-width:30rem;text-align:center;font-size:.8rem;color:var(--ink-soft)}

/* ---------- 4. pabrik ---------- */
.factory-in{display:grid;gap:32px}
.factory-copy h2{font-size:clamp(2.2rem,9vw,3.4rem);margin:16px 0 16px}
.factory-copy p:not(.eyebrow){color:var(--ink-soft);max-width:30rem}
.factory-photo{margin:0;position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:linear-gradient(150deg,#FBFAF6,#F0ECE2);border:1px solid var(--line)}
.factory-photo img{width:100%;height:100%;object-fit:cover}
.photo-ph{position:absolute;inset:14px;border:1.5px dashed var(--line-strong);border-radius:20px;display:grid;place-content:center;justify-items:center;gap:12px;padding:0 18px;text-align:center;color:var(--ink-soft);font:600 .8rem/1.3 var(--font-body);letter-spacing:.04em}
.photo-ph svg{width:64px;height:64px}
.certs{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.cert{flex:0 0 calc((100% - 24px) / 3);max-width:128px;aspect-ratio:1/1;display:grid;place-items:center;padding:14px;overflow:hidden;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.cert img{width:100%;height:100%;object-fit:contain}
/* Logo dan sertifikat unggahan pemilik bisa tegak: baris/kolom grid dikunci sebesar kotak supaya height:100% terhitung dan
   object-fit:contain bekerja (tanpa ini gambar tegak memanjang keluar kotak) */
.brand-mark,.cert{grid-template:minmax(0,1fr)/minmax(0,1fr)}
.brand-mark img,.cert img{min-width:0;min-height:0}
.cert.is-empty{background:transparent;border:1.5px dashed var(--line-strong);color:var(--ink-soft);padding:8px}
.cert-ph{display:grid;justify-items:center;gap:6px;text-align:center;font:600 .62rem/1.25 var(--font-body);letter-spacing:.04em}
.cert-ph svg{width:30px;height:30px}
.factory-cta{display:grid;gap:14px;justify-items:start}
.factory-cta p{font-size:.84rem;color:var(--ink-soft);max-width:22rem}

/* ---------- 5. footer ---------- */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:56px 0 calc(32px + env(safe-area-inset-bottom))}
/* Beri ruang agar tombol WhatsApp melayang tidak menutupi baris hak cipta */
body:has(.wa-fab:not([hidden])) .site-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.foot-top{display:grid;gap:14px;justify-items:start;margin-bottom:34px}
.foot-line{font-family:var(--font-display);font-size:1.35rem;line-height:1.25;color:var(--ink)}
.foot-group{margin-bottom:28px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.social a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font:600 .86rem/1 var(--font-body);text-decoration:none;transition:border-color .3s,background .3s}
.social a.is-off{border-style:dashed;background:transparent;color:var(--ink-muted);cursor:default}
.foot-note{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.76rem;line-height:1.6;color:var(--ink-soft)}

.wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold-light);box-shadow:0 16px 28px -12px rgba(43,42,40,.45);transition:transform .3s var(--ease)}
.wa-fab .ico svg{width:26px;height:26px}
.wa-fab:focus-visible{box-shadow:0 0 0 7px #fff,0 16px 28px -12px rgba(43,42,40,.45)}

/* ---------- jendela detail ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;align-items:end;justify-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(30,29,27,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s}
.modal-card{position:relative;width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-radius:28px 28px 0 0;animation:sheet .5s var(--ease)}
.modal-card:focus{outline:none}
.modal-x{position:absolute;top:12px;right:12px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(43,42,40,.4)}
.modal-x svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.modal-x:focus-visible{box-shadow:0 0 0 7px #fff,0 6px 16px -8px rgba(43,42,40,.4)}
.modal-media{position:relative;aspect-ratio:1/1;max-height:38vh;max-height:38dvh;width:100%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(95% 80% at 50% 36%,var(--t1,#FFFFFF) 0%,var(--t2,#F3EEE2) 100%)}
.modal-media .art{height:78%;width:auto;filter:drop-shadow(0 16px 14px rgba(43,42,40,.18))}
.modal-media img{width:100%;height:100%;object-fit:cover}
.modal-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:1;pointer-events:none}
.modal-body{padding:24px 22px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.modal-body h3{font-size:2.15rem}
.modal-body .price{font-size:1.35rem}
.m-desc{color:var(--ink-soft)}
.m-how{align-self:stretch;margin-top:2px;padding:16px 18px;border-radius:18px;background:var(--bg-soft-2)}
.m-how h4{font:700 .68rem/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.m-how p{font-size:.92rem}
.m-buy{align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.m-buy .btn{min-width:0;min-height:50px;font-size:.84rem;padding-inline:10px}
.m-note{font-size:.74rem;color:var(--ink-soft);padding-bottom:calc(8px + env(safe-area-inset-bottom))}
@keyframes fade{from{opacity:0}}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
/* HP: tombol beli menempel di dasar lembar agar selalu terlihat */
@media(max-width:759px){
  /* Tombol tutup ikut menempel di atas lembar saat isi digulir (tinggi bersih 0 agar tata letak tidak bergeser) */
  .modal-x{position:sticky;top:12px;margin:12px 12px -54px auto}
  .modal-media img{position:absolute;inset:0}
  .m-buy{position:sticky;bottom:0;z-index:3;margin:6px -22px 0;align-self:stretch;width:calc(100% + 44px);padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--surface) 80%,rgba(255,255,255,0));border-top:1px solid var(--line)}
}

/* ---------- animasi muncul saat scroll ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media print{.js .reveal{opacity:1!important;transform:none!important}}

/* ---------- layar lebih lebar ---------- */
@media(hover:hover){
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:rgba(201,164,92,.55)}
  .card:hover .card-media .art,.card:hover .card-media img{transform:scale(1.06)}
  .line:hover{transform:translateY(-3px);border-color:rgba(201,164,92,.6);box-shadow:var(--shadow-soft)}
  .line:hover .line-go{background:var(--gold-btn);color:var(--ink)}
  .chip:not([aria-pressed="true"]):hover{border-color:var(--gold-deep)}
  .social a:not(.is-off):hover{border-color:var(--gold-deep);background:#fff}
  .wa-fab:hover{transform:scale(1.06)}
}
@media(min-width:760px){
  .modal{align-items:center;padding:24px}
  .modal-card{width:min(940px,100%);max-height:88vh;max-height:88dvh;border-radius:30px;display:grid;grid-template-columns:1fr 1fr;padding:0}
  .modal-media{aspect-ratio:auto;max-height:none;min-height:100%}
  .modal-media::after{left:auto;top:0;width:1px;height:auto}
  .modal-body{padding:44px 40px;justify-content:center}
  .grid{gap:20px}
  .card-body{padding:16px 16px 16px;gap:8px}
  .card-title{font-size:1.35rem}
  .chips{flex-wrap:wrap;justify-content:center;overflow:visible;padding:0;margin:0}
}
@media(min-width:900px){
  :root{--header-h:72px}
  .wrap{padding-inline:32px}
  .burger{display:none}
  .nav{position:static;flex-direction:row;align-items:center;gap:34px;padding:0;background:none;border:0;box-shadow:none;transform:none;opacity:1;visibility:visible}
  .nav a{padding:6px 0;border:0;font-size:.9rem;position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav a:hover::after{transform:scaleX(1)}

  .hero{text-align:left;padding:96px 0 112px}
  .hero-in{grid-template-columns:1.1fr .9fr;gap:72px;justify-items:stretch;align-items:center}
  .lead{margin-left:0;margin-right:0;font-size:1.12rem;max-width:26rem}
  .h1-sub{text-indent:0}
  .hero-art{justify-self:center;width:min(100%,400px)}

  .section{padding:120px 0}
  .section-head{margin-bottom:56px}
  .lines{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:18px}
  .lines li:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 9px);justify-self:center;width:100%}
  .line{padding:18px 20px 18px 18px;grid-template-columns:76px minmax(0,1fr) 40px}
  .line-thumb{width:76px;height:76px;border-radius:22px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .card-body{padding:20px 20px 20px}

  .factory-in{grid-template-columns:1.05fr .95fr;column-gap:72px;row-gap:36px;align-items:start;grid-template-areas:"copy photo" "certs photo" "cta photo"}
  .factory-copy{grid-area:copy}
  .factory-photo{grid-area:photo;aspect-ratio:4/5;align-self:start;width:100%;min-width:0}
  .factory-certs{grid-area:certs}
  .factory-cta{grid-area:cta}
  .factory-in.no-photo{grid-template-columns:minmax(0,640px);grid-template-areas:none;justify-content:start}
  .factory-in.no-photo>*{grid-area:auto}
  /* Ada foto tetapi tanpa sertifikat: tombol langsung di bawah paragraf, tinggi lebih foto jatuh di bawah tombol */
  .factory-in.no-certs:not(.no-photo){grid-template-areas:"copy photo" "cta photo";grid-template-rows:auto 1fr}

  .site-footer{padding-top:72px}
  .site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;column-gap:48px;align-items:start}
  .foot-top{margin-bottom:0}
  .foot-group{margin-bottom:0}
  .social{margin-top:16px}
  /* Hubungi kami menempati satu baris sendiri di bawah kolom lainnya; alamat dan email berdampingan */
  #foot-kontak{grid-column:1/-1;margin-top:44px}
  .foot-note{grid-column:1/-1;grid-template-columns:1fr auto;gap:24px}
  .brand.nama-kustom{max-width:min(100%,440px)}
}
@media(min-width:1180px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* Mode warna tinggi (Windows High Contrast): chip yang dipilih harus tetap tampak berbeda */
@media(forced-colors:active){
  .chip[aria-pressed="true"]{background:Highlight;color:HighlightText;border-color:Highlight;forced-color-adjust:none}
  .chip[aria-pressed="true"] small{opacity:1}
  .chip[aria-pressed="true"]:focus-visible{outline-color:Highlight}
}

/* =====================================================================
   BERANDA — rapi dan lapang ala Apple  (khusus index.html: <body class="home">; admin.html tidak terpengaruh)
   Prinsip yang dipakai (skill apple-design):
   - Respons instan: tombol dan kartu bereaksi saat DISENTUH (bukan saat dilepas) lalu kembali dengan pegas.
   - Gerak berbasis pegas tanpa pantulan; semua bisa diinterupsi; yang bergerak hanya transform dan opacity.
   - Hierarki dari ukuran, berat, dan jarak; huruf besar dirapatkan, huruf kecil dilonggarkan.
   - Header memakai bahan tembus pandang; lembar detail produk bisa diseret turun untuk menutup (HP).
   - "Kurangi gerak" diganti pudar lembut; "kurangi transparansi" dan "kontras tinggi" juga dihormati.
   Warna khas Babygold tetap: emas (aksen), putih, dan merah muda lembut (kilau hero dan footer).
   ===================================================================== */
:root{
  --rose:#F8E6E3; --rose-soft:#FDF6F5;
  --spring:cubic-bezier(.22,1,.36,1);       /* cadangan bila browser belum mengenal linear() */
  --dur-ui:.55s; --dur-soft:.68s;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,0.044,0.143,0.261,0.381,0.492,0.59,0.673,0.741,0.797,0.842,0.878,0.906,0.928,0.945,0.958,0.968,0.976,0.982,0.986,0.99,0.992,0.994,0.996,0.997,0.998,1)}   /* pegas teredam kritis: tanpa pantulan */
}

/* Huruf cadangan judul: selama font web belum datang atau gagal dimuat, huruf serif cadangan (lebih lebar) diperkecil agar judul tidak terpotong */
@font-face{font-family:"Cormorant Fallback";font-weight:600 700;src:local("Georgia Bold"),local("Georgia-Bold"),local("Noto Serif Bold"),local("NotoSerif-Bold");size-adjust:75%}
@font-face{font-family:"Cormorant Fallback";font-weight:400 500;src:local("Georgia"),local("Noto Serif"),local("NotoSerif-Regular");size-adjust:75%}

/* ---------- dasar ---------- */
.home{font-size:1.0625rem;line-height:1.55;text-rendering:optimizeLegibility;font-optical-sizing:auto;-webkit-tap-highlight-color:transparent;--font-display:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;overflow-x:clip}
/* gulir halus untuk tautan bagian baru menyala setelah pengunjung menyentuh/menekan sesuatu; tautan langsung (/#pabrik) tiba seketika */
html.js:not(.halus){scroll-behavior:auto}
/* jendela detail mengunci gulir: bilah gulir klasik hilang, isi dikompensasi supaya tidak bergeser */
html.lock .home{padding-right:var(--sbw,0px)}
html.lock .home .wa-fab{right:calc(16px + var(--sbw,0px))}
.home h1,.home h2{letter-spacing:-.024em;line-height:1.04}
.home h3{letter-spacing:-.012em}

/* ---------- header: bahan tembus pandang, garis halus muncul saat digulir ---------- */
.home .site-header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:0;box-shadow:0 .5px 0 rgba(43,42,40,0);transition:box-shadow .35s}
.home .site-header.scrolled{box-shadow:0 .5px 0 rgba(43,42,40,.18)}
.home .brand,.home .burger{transition:transform var(--dur-ui) var(--spring)}
.home .brand:active{transform:scale(.97);transition:transform .08s ease-out}
.home .burger:active{transform:scale(.9);transition:transform .08s ease-out}
.home .burger span{transition:transform .3s var(--ease)}
.home .burger span:last-child{top:18px;transform:translateY(7px)}
.home .burger[aria-expanded="true"] span:first-child{top:18px;transform:translateY(3.5px) rotate(45deg)}
.home .burger[aria-expanded="true"] span:last-child{top:18px;transform:translateY(3.5px) rotate(-45deg)}

@media(max-width:899px){
  .home .nav{background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);padding:4px 24px 16px;transform-origin:top center;transform:translateY(-12px) scale(.985);transition:opacity .25s,transform var(--dur-ui) var(--spring),visibility .25s}
  .home .nav.open{transform:none}
  .home .nav a{padding:18px 2px;font-size:1.125rem;letter-spacing:-.01em}
  .home .nav a:active{opacity:.5}
  .home .site-header:has(.nav.open){-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
}

/* ---------- tombol ---------- */
.home .btn{font-size:1rem;transition:transform var(--dur-ui) var(--spring),box-shadow .35s,filter .3s,background .3s,border-color .3s}
.home .btn:not(.btn-buy){min-height:54px;padding:16px 32px}
.home .btn:active{transform:scale(.96);transition:transform .08s ease-out,box-shadow .1s,filter .1s}
.home .btn-off:active{transform:none}
.home .btn-buy{min-height:48px;font-size:clamp(.8rem,3.3vw,.9rem)}

/* ---------- 1. hero ---------- */
.home .hero{padding:52px 0 104px;background:radial-gradient(92% 44% at 50% 78%,var(--rose) 0%,rgba(248,230,227,0) 72%),var(--bg)}
.home .hero h1{--h1:calc(clamp(2rem,23vw,8.6rem) * var(--h1-k,1))}   /* --h1-k: pengecil untuk nama toko yang kata pertamanya panjang (diatur app.js; bawaan 1 = tidak berubah) */
.home .h1-main{font-size:var(--h1);letter-spacing:-.04em;line-height:.9}
.home .hero h1.nama-kustom .h1-main{overflow-wrap:anywhere}   /* nama buatan pemilik: kata yang tetap terlalu lebar dipatahkan, bukan keluar layar */
/* Teks isian pemilik (slogan, tentang pabrik, alamat): baris baru yang diketik tetap dihormati */
.lead,.foot-line,#pabrik-teks,.kontak-alamat{white-space:pre-line;overflow-wrap:anywhere}
.home .h1-sub{margin-top:calc(var(--h1)*.11 + 10px)}
/* Nama buatan pemilik yang panjang turun ke beberapa baris: beri jarak antarbaris. Margin dikurangi setengah jarak tambahan (.3em)
   agar baris pertama tetap di tempat yang sama; nama bawaan tidak tersentuh. */
.home .hero h1.nama-kustom .h1-sub{line-height:1.6;margin-top:calc(var(--h1)*.11 + 10px - .3em);overflow-wrap:anywhere}
.home .hero-in{gap:52px}
@media(max-width:899px){.home .hero-in{grid-template-columns:minmax(0,1fr)}}
.home .lead{font-size:1.1875rem;line-height:1.5;max-width:22rem;margin:28px auto 36px}
.home .hero-art{width:min(80%,330px)}
@media(min-width:900px){
  .home .hero{padding:112px 0 140px;background:radial-gradient(46% 76% at 72% 50%,var(--rose) 0%,rgba(248,230,227,0) 72%),var(--bg)}
  .home .lead{font-size:1.3rem;max-width:28rem;margin:30px 0 40px}
  .home .hero-art{width:min(100%,470px)}
}

/* ---------- seksi umum ---------- */
.home .section{padding:92px 0}
.home .section-head{margin-bottom:44px}
.home .section-head h2{font-size:clamp(2.45rem,10.5vw,3.9rem);margin:18px 0 16px;letter-spacing:-.026em}
.home .section-head p:not(.eyebrow){font-size:1.0625rem}
.home .eyebrow{font-size:.72rem}
.home .mini-title{font-size:.72rem}
@media(min-width:900px){
  .home .section{padding:148px 0}
  .home .section-head{margin-bottom:68px}
}

/* ---------- 2. lini produk ---------- */
.home .lines{gap:14px}
.home .line{grid-template-columns:76px minmax(0,1fr) 40px;gap:18px;padding:16px 18px 16px 16px;border-radius:30px;transition:transform var(--dur-ui) var(--spring),border-color .3s,box-shadow .4s var(--ease)}
.home .line:active{transform:scale(.982);transition:transform .08s ease-out}
.home .line-thumb{width:76px;height:76px;border-radius:24px}
.home .line-txt b{font-size:1.65rem;letter-spacing:-.015em}
.home .line-txt small{font-size:.875rem}
.home .line-count{font-size:.7rem}
.home .line-go{width:40px;height:40px}
@media(max-width:389px){
  .home .line{grid-template-columns:60px minmax(0,1fr) 34px;gap:14px;padding:14px}
  .home .line-thumb{width:60px;height:60px;border-radius:20px}
  .home .line-go{width:34px;height:34px}
}

/* ---------- 3. produk: foto besar ---------- */
.home .chip{min-height:44px;padding:12px 20px;font-size:.9rem;transition:transform var(--dur-ui) var(--spring),background .25s,color .25s,border-color .25s}
.home .chip:active{transform:scale(.94);transition:transform .08s ease-out}
.home .count{font-size:.875rem}
.home .grid{grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:560px){.home .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(min-width:900px){.home .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
@media(min-width:1180px){.home .grid{gap:36px}}
.home .card{border-radius:30px;transition:transform var(--dur-soft) var(--spring),box-shadow .5s var(--ease),border-color .3s}
.home .card:has(.card-open:active){transform:scale(.985);transition:transform .09s ease-out}
.home .card-body{padding:22px 22px 24px;gap:10px}
.home .card-series{font-size:.72rem;letter-spacing:.18em}
.home .card-title{font-size:1.65rem;line-height:1.08;min-height:0;letter-spacing:-.015em}
.home .price{font-size:1.15rem;font-variant-numeric:tabular-nums}
.home .price s{font-size:.9rem}
.home .price-empty{font-size:.9rem}
.home .bpom{font-size:.74rem;padding:6px 12px 6px 9px;letter-spacing:.04em}
.home .bpom svg{display:block}
.home .buy{gap:10px;padding-top:12px;grid-template-columns:repeat(auto-fit,minmax(min(max(138px,8.625rem),100%),1fr))}
.home .card-media .art{width:60%;margin-top:0}
.home .ph-note{font-size:.66rem;padding:5px 10px;left:12px;bottom:12px}
.home .tag{top:14px;right:14px;font-size:.66rem;padding:6px 12px}
.home .shop-note{font-size:.84rem}
.js .home .card-media img{opacity:0;transition:opacity .8s var(--ease),transform 1.1s var(--spring)}
.js .home .card-media img.is-loaded{opacity:1}
@media(hover:hover){
  .home .card:hover{transform:translateY(-8px)}
  .home .card:hover .card-media .art,.home .card:hover .card-media img{transform:scale(1.035)}
}

/* ---------- 4. pabrik ---------- */
.home .factory-copy h2{font-size:clamp(2.45rem,10.5vw,3.9rem);margin:18px 0 18px;letter-spacing:-.026em}
.home .factory-copy p:not(.eyebrow){font-size:1.0625rem}
.home .factory-photo{border-radius:32px}
.home .factory-cta p{font-size:.9rem}

/* ---------- 5. footer ---------- */
.home .site-footer{background:var(--rose-soft)}
.home .foot-line{font-size:1.5rem;letter-spacing:-.01em}
.home .social a{min-height:48px;font-size:.9rem;transition:transform var(--dur-ui) var(--spring),border-color .3s,background .3s}
.home .social a:active{transform:scale(.95);transition:transform .08s ease-out}
.home .social a.is-off:active{transform:none}
/* Hubungi kami (alamat dan email dari Pengaturan Toko) */
.kontak{display:grid;gap:6px;justify-items:start;margin-top:14px;max-width:26rem}
.kontak-alamat{font-size:.9rem;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere}
.kontak-email{display:inline-flex;align-items:center;min-height:44px;font:600 .9rem/1.3 var(--font-body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere;transition:text-decoration-color .3s,opacity .2s}
.home .kontak-alamat,.home .kontak-email{font-size:.95rem}
.home .kontak-email:active{opacity:.55;transition:opacity .08s ease-out}
@media(hover:hover){.kontak-email:hover{text-decoration-color:var(--gold-deep)}}
/* Layar lebar: alamat dan email berdampingan dalam satu baris (ditaruh setelah aturan dasar di atas agar tidak tertimpa) */
@media(min-width:900px){
  .kontak{display:flex;flex-wrap:wrap;align-items:center;gap:4px 40px;max-width:none;margin-top:16px}
  .kontak-alamat{max-width:30rem}
}
.home .foot-note{font-size:.8rem}
.home .wa-fab{transition:transform var(--dur-ui) var(--spring)}
.home .wa-fab:active{transform:scale(.9);transition:transform .08s ease-out}

/* ---------- gerak saat halaman dibuka dan digulir ---------- */
@keyframes homeReveal{from{opacity:0;transform:translateY(26px) scale(.985)}}
@keyframes homeRise{from{opacity:.01;transform:translateY(22px)}}
@keyframes homeArt{from{opacity:.01;transform:translateY(34px) scale(.95)}}
@keyframes homeRing{from{opacity:.01;transform:translate(12px,46px) scale(.95)}}
@keyframes homeDrift{to{transform:translateY(46px) scale(.95);opacity:.7}}
@keyframes homeFade{to{transform:translateY(-26px)}}
@keyframes homeFadeOnly{from{opacity:0}}
/* muncul saat digulir: elemen menunggu (tersembunyi), lalu naik dengan pegas; tahap akhir dilepas agar efek sentuh/hover bebas */
.js .home .reveal:not(.in){opacity:0;transform:none}
.js .home .reveal:not(.card){transition:none}   /* kartu memakai transisi .home .card sendiri agar angkat/tekan kembali dengan pegas */
.js .home .reveal.in{opacity:1;animation:homeReveal .9s var(--spring) var(--d,0ms) backwards}
@media(prefers-reduced-motion:no-preference){
  .js .home .hero-copy>*{animation:homeRise 1s var(--spring) backwards}
  .js .home .hero-copy>:nth-child(2){animation-delay:.09s}
  .js .home .hero-copy>:nth-child(3){animation-delay:.18s}
  .js .home .hero-art .arch{animation:homeArt 1.2s var(--spring) .12s backwards}
  .js .home .hero-art .arch-ring{animation:homeRing 1.2s var(--spring) .12s backwards}
}
/* hero bergeser dan memudar pelan mengikuti gulir (hanya di browser yang mendukung) */
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .home .hero-art{animation:homeDrift linear both;animation-timeline:scroll(root block);animation-range:0 80vh}
    .home .hero-copy{animation:homeFade linear both;animation-timeline:scroll(root block);animation-range:0 60vh}
  }
}

/* hero di luar layar: jeda gerak tanpa akhir (melayang, kilau) supaya tidak menghitung ulang tampilan tiap frame */
.home .hero.is-away .float-a,.home .hero.is-away .float-b,.home .hero.is-away .float-c,.home .hero.is-away .spark{animation-play-state:paused}

/* ---------- jendela detail: lembar yang bisa diseret (HP) / dialog dari kartu (desktop) ---------- */
.home .modal-backdrop{animation:none;background:rgba(30,29,27,.34);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .4s var(--ease)}
.home .modal.is-open .modal-backdrop{opacity:1}
.home .modal-card{animation:none;transform:translateY(100%);transition:transform var(--dur-soft) var(--spring),opacity .3s var(--ease)}
.home .modal.is-open .modal-card{transform:none}
.home .modal-grab{position:absolute;top:9px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(43,42,40,.3);z-index:6;pointer-events:none}
.home .modal-body h3{font-size:2.3rem;letter-spacing:-.022em}
.home .m-desc{font-size:1.0625rem}
.home .m-how h4{font-size:.72rem}
.home .m-note{font-size:.8rem}
.home .m-buy .btn{font-size:.8rem;padding-inline:8px}
.home .m-buy{grid-template-columns:repeat(auto-fit,minmax(min(8.2rem,100%),1fr))}
.js .home .modal-media img{opacity:0;transition:opacity .6s var(--ease)}
.home .modal-media img{-webkit-user-drag:none;user-select:none}
.js .home .modal-media img.is-loaded{opacity:1}
@media(max-width:759px){
  .home .modal-media{max-height:50dvh;touch-action:none}
  .home .modal-card{overscroll-behavior:contain;box-shadow:0 260px 0 0 var(--surface)}
}
@media(min-width:760px){
  .home .modal-grab{display:none}
  .home .modal-card{transform:scale(.9);opacity:0;transform-origin:var(--ox,50%) var(--oy,50%)}
  .home .modal.is-open .modal-card{transform:none;opacity:1}
}
.home .modal-x{transition:transform var(--dur-ui) var(--spring)}
.home .modal-x{width:44px;height:44px}
.home .modal-x:active{transform:scale(.88);transition:transform .08s ease-out}
@media(max-width:759px){.home .modal-x{margin-bottom:-56px}}

/* ---------- teks kecil: tidak turun di bawah 12px (tulisan BEAUTY pada logo sengaja tidak disentuh) ---------- */
.home .eyebrow,.home .mini-title,.home .card-series,.home .line-count,.home .h1-sub,.home .m-how h4,.home .tag,.home .ph-note,.home .chip small,.home .cert-ph{font-size:.75rem}
.home .bpom{font-size:.78rem}

/* ---------- layar pendek / HP mendatar: hero tidak dipudarkan dan lebih rapat agar tombol terlihat ---------- */
@media(max-height:520px){.home .hero-copy,.home .hero-art{animation:none}}
@media(max-height:520px) and (orientation:landscape){
  .home .hero{padding-top:24px;padding-bottom:56px}
  .home .hero h1{--h1:calc(clamp(3rem,17vh,5rem) * var(--h1-k,1))}
  .home .lead{margin-top:16px;margin-bottom:24px}
}

/* =====================================================================
   CERAH — putih lebih menyala (khusus beranda)
   Pengukuran piksel menunjukkan hampir separuh halaman berupa abu-abu / putih tulang yang kusam, bukan putih murni.
   Di sini: latar bagian dan footer jadi putih murni / putih kemerahmudaan cerah, bayangan abu-abu jadi bayangan hangat,
   pastel latar foto dan gradien ilustrasi dicerahkan, emas tombol dibuat lebih bercahaya. Warna teks TIDAK diubah (kontras tetap).
   ===================================================================== */
.home,.admin{
  --bg-soft:#FFFFFF; --bg-soft-2:#FFFFFF; --rose:#FFFFFF; --rose-soft:#FFFFFF;   /* semua latar putih murni */
  --line:#EEE6DD; --line-strong:#E2D8CC;
  --gold-btn:linear-gradient(180deg,#F4E5BA 0%,#E3C47F 100%);
  --shadow-rest:0 1px 2px rgba(150,110,50,.06),0 12px 26px -18px rgba(150,110,50,.26);
  --shadow-soft:0 1px 2px rgba(150,110,50,.06),0 16px 32px -20px rgba(150,110,50,.28);
  --shadow-card:0 2px 4px rgba(150,110,50,.06),0 26px 46px -26px rgba(150,110,50,.34);
}
.home .site-header{background:rgba(255,255,255,.94)}
.home .arch{background:radial-gradient(120% 80% at 50% 22%,#FFFFFF 0%,#FFFBEE 55%,#FBF0D3 100%)}
.home .factory-photo{background:#FFFFFF}
.home .photo-ph{border-color:#E6DACB}
/* di atas latar putih, kotak yang tadinya dibedakan lewat warna dibedakan lewat garis tipis */
.home .m-how{border:1px solid var(--line)}
.home .line-thumb{box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- preferensi pengguna ---------- */
@media(prefers-reduced-motion:reduce){
  /* gerak diganti pudar lembut */
  .js .home .reveal.in{animation:homeFadeOnly .4s ease backwards!important}
  .home .modal-card{transform:none;opacity:0;transition:opacity .2s linear!important}
  .home .modal.is-open .modal-card{opacity:1}
  .home .modal-backdrop{transition:opacity .2s linear!important}
  .home .card:hover,.home .btn:active,.home .chip:active,.home .line:active,.home .brand:active,.home .burger:active,.home .social a:active,.home .wa-fab:active,.home .modal-x:active{transform:none}
  .home .card:has(.card-open:active){transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .home .site-header,.home .nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .home .modal-backdrop{background:rgba(30,29,27,.5);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more){
  .home .site-header,.home .nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--ink)}
  .home .card,.home .line{border-color:var(--ink-soft)}
  :where(.home) .chip,.home .social a,.home .btn-off{border-color:var(--control-line)}
}

/* Kerangka kartu saat produk sedang dimuat dari penyimpanan online; pesan galat + tombol coba lagi */
.skel{pointer-events:none}
.skel .card-media{background:linear-gradient(100deg,#F5F1EA 30%,#FBF9F5 50%,#F5F1EA 70%);background-size:220% 100%;animation:skel 1.5s linear infinite}
.skel .card-body{display:grid;gap:12px;align-content:start}
.skel .sk{display:block;height:14px;border-radius:7px;background:#F5F1EA}
@keyframes skel{to{background-position:-220% 0}}
/* Kerangka bagian lini dan filter: ada sejak HTML pertama dengan tinggi tetap, jadi halaman tidak bergeser saat data tiba */
.line-skel{height:148px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(100deg,#F5F1EA 30%,#FBF9F5 50%,#F5F1EA 70%);background-size:220% 100%;animation:skel 1.5s linear infinite}
.chip-skel{flex:none;display:block;width:104px;height:44px;border-radius:999px;background:#F5F1EA}
.count:empty::before{content:"\00a0"}
@media(prefers-reduced-motion:reduce){.skel .card-media,.line-skel{animation:none}}
/* app.js gagal dimuat / JavaScript mati / terlalu lama (>3,5 dtk, kelas js dicabut): kerangka disembunyikan agar tidak terlihat memuat selamanya.
   Sengaja memakai :not(.js):not(.ready) (kekhususan lebih tinggi dari .lines>li) sehingga juga berlaku saat JavaScript mati. Kerangka milik app.js (kelas ready) tidak terpengaruh. */
html:not(.js):not(.ready) .skel,html:not(.js):not(.ready) .line-skel,html:not(.js):not(.ready) .chip-skel{display:none}
#grid:focus{outline:none}
.empty .btn{margin-top:16px}

/* Teks panjang tanpa spasi dipatahkan di dalam kotaknya, tidak melebar keluar halaman atau jendela detail */
.card-series,.card-open,.line-txt b,#m-series,#m-title,.m-desc,.m-how p{overflow-wrap:anywhere}
/* HP selebar 320 px: kata 11-12 huruf (mis. "Perlindungan", "Moisturizing") tetap muat utuh di judul lini */
@media(max-width:339px){.home .line-txt b{font-size:1.5rem}}

/* Nama toko panjang tanpa spasi di baris hak cipta tidak boleh melebarkan halaman (layar 320 px) */
.foot-note,.foot-note p{min-width:0;overflow-wrap:anywhere}