:root{--bg:#F6F0E4;--card:#FFFFFF;--line:#E3D8C4;--ink:#141922;--soft:#5C6370;--accent:#D72A1F;--accent2:#12384F;--gold:#E9B44C;--danger:#D72A1F;--f-display:'Fraunces';--f-body:'DM Sans'}
/* Tema "Barbershop paper": kertas krem, tinta navy, merah maple, tiang barber. Warna & font dari config.theme (lihat build.mjs). */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 var(--f-body),system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:radial-gradient(900px 420px at 100% 0,color-mix(in srgb,var(--gold) 28%,transparent),transparent),radial-gradient(700px 380px at 0 30%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent)}
a{color:var(--accent2);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3,.logo,.price,.pr,.big{font-family:var(--f-display),Georgia,serif;letter-spacing:-.02em}
img{max-width:100%}

/* strip, header, tiang barber */
.announce{background:var(--accent2);color:#fff;text-align:center;font-size:13.5px;padding:7px 12px;letter-spacing:.02em}
.announce b{color:var(--gold)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 5%;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:23px;color:var(--ink);text-decoration:none}
.logo i{width:16px;height:32px;border-radius:8px;border:2px solid var(--ink);background:repeating-linear-gradient(160deg,var(--accent) 0 6px,#fff 6px 12px,var(--accent2) 12px 18px,#fff 18px 24px)}
.top nav{display:flex;gap:4px;overflow-x:auto;font-size:14.5px;font-weight:500;scrollbar-width:none}
.top nav a{color:var(--ink);text-decoration:none;white-space:nowrap;padding:6px 12px;border-radius:8px}
.top nav a:hover{background:var(--ink);color:var(--bg)}
.pole{height:9px;background:repeating-linear-gradient(135deg,var(--accent) 0 16px,#fff 16px 32px,var(--accent2) 32px 48px,#fff 48px 64px);background-size:90px 100%;animation:pole 6s linear infinite}
@keyframes pole{to{background-position:90px 0}}
@media(prefers-reduced-motion:reduce){.pole{animation:none}html{scroll-behavior:auto}}
main{max-width:1160px;margin:auto;padding:0 5% 64px}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:54px 0 26px}
.kick{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.kick:before{content:"\2605 ";color:var(--gold)}
.hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.03;font-weight:800;margin:0 0 18px}
.hero p{max-width:52ch;color:var(--soft);margin:0 0 26px;font-size:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn2{display:inline-block;padding:11px 20px;border:2px solid var(--ink);border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700}.btn2:hover{background:var(--ink);color:var(--bg)}
.spot{position:relative;justify-self:center;width:min(100%,360px);transform:rotate(2deg)}
.spot .arch{background:#fff;border:2px solid var(--ink);border-radius:999px 999px 22px 22px;padding:26px 22px 18px;box-shadow:10px 10px 0 var(--accent2)}
.spot img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%}
.spot .now{display:flex;justify-content:space-between;align-items:end;gap:10px;font-size:14px;border-top:2px dashed var(--line);margin-top:14px;padding-top:12px}
.spot .now b{font:800 24px var(--f-display),serif;color:var(--accent)}
.spot .stamp{position:absolute;right:-14px;top:18px;z-index:1;width:86px;height:86px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-align:center;font:800 13px/1.15 var(--f-display),serif;transform:rotate(12deg);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent)}

/* section headings */
h2{font-size:clamp(25px,3.2vw,36px);margin:66px 0 4px;font-weight:800}
h2:after{content:"";display:block;width:64px;height:5px;margin-top:10px;background:repeating-linear-gradient(135deg,var(--accent) 0 8px,var(--accent2) 8px 16px)}
.sub{color:var(--soft);margin:10px 0 22px}

/* kategori: papan menu */
.chairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:0;margin-top:28px;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--card)}
.chair{display:block;padding:20px 20px 18px;text-decoration:none;color:var(--ink);border-right:2px solid var(--ink);position:relative;transition:background .15s}
.chair:last-child{border-right:0}
.chair:hover{background:color-mix(in srgb,var(--gold) 30%,#fff)}
.chair .big{display:block;font-size:46px;line-height:1;font-weight:800;color:var(--accent);opacity:.9}
.chair b{display:block;font:800 19px/1.2 var(--f-display),serif;margin:8px 0 4px}
.chair span{color:var(--soft);font-size:14.5px}
@media(max-width:700px){.chair{border-right:0;border-bottom:2px solid var(--ink)}.chair:last-child{border-bottom:0}}

/* papan peringkat (list horizontal) */
.board{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:r}
.hrow{counter-increment:r;display:grid;grid-template-columns:44px 84px 1fr auto;gap:16px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px 16px 12px 12px;transition:transform .12s,box-shadow .12s}
.hrow:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.hrow:before{content:counter(r);font:800 34px var(--f-display),serif;color:var(--accent);text-align:center}
.hrow:first-child{background:color-mix(in srgb,var(--gold) 26%,#fff)}
.hrow img{display:block;width:84px;height:84px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line)}
.hrow .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);font-weight:700;text-decoration:none;line-height:1.35}
.hrow .t:hover{text-decoration:underline}
@media(max-width:640px){.hrow{grid-template-columns:34px 64px 1fr;padding:10px}.hrow img{width:64px;height:64px}.hrow .buy{grid-column:1/-1;margin:0}}

/* kartu produk */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:10px;height:100%;transition:transform .12s,box-shadow .12s}
.card:hover,.card:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent2)}
.card a.cl{color:inherit;text-decoration:none}
.ph{position:relative;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.off{position:absolute;left:8px;top:8px;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;padding:2px 9px;border-radius:99px}
.card h3{font:500 14.5px/1.4 var(--f-body),sans-serif;letter-spacing:0;margin:10px 4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:8px 10px;align-items:baseline;margin:6px 4px auto;flex-wrap:wrap}
.meta b{font:800 20px var(--f-display),serif;color:var(--ink)}
.meta s{color:#8a8f98;font-size:13.5px}
.meta span{color:var(--soft);font-size:13px}
.hrow .meta{margin:4px 0 0}
.buy{display:block;text-align:center;background:var(--accent);color:#fff!important;font-weight:800;padding:11px 16px;border-radius:10px;border:2px solid var(--ink);margin-top:10px;text-decoration:none;white-space:nowrap;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.buy:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cta .buy{display:inline-block;margin:0}
.hrow .buy{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{padding:8px 16px;border:2px solid var(--ink);border-radius:99px;text-decoration:none;color:var(--ink);background:var(--card);font-weight:500}
.chips a:hover{background:var(--ink);color:var(--bg)}

/* breadcrumb & halaman dalam */
.crumb{font-size:14px;color:var(--soft);padding:24px 0 0}.crumb a{color:var(--soft)}
.ch{font-size:clamp(30px,4.4vw,48px);line-height:1.08;font-weight:800;margin:14px 0 14px}
.cintro{max-width:72ch;color:#2b3340}
.cintro p{margin:0 0 14px}
.upd{font-size:13.5px;color:var(--soft)!important;margin:8px 0 0}
.pick{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;background:color-mix(in srgb,var(--gold) 26%,#fff);border:2px solid var(--ink);border-radius:16px;padding:14px 18px;margin:8px 0 28px;box-shadow:6px 6px 0 var(--ink)}
.pick img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:12px;display:block}
.pick small{font-weight:800;letter-spacing:.1em;color:var(--accent)}
.pick .t{display:block;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.35}
.pick .buy{margin:0}
@media(max-width:640px){.pick{grid-template-columns:72px 1fr}.pick img{width:72px;height:72px}.pick .buy{grid-column:1/-1}}

/* halaman produk */
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;padding:18px 0 8px;align-items:start}
.gal{position:sticky;top:90px}
.gal .ph{border:2px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--accent2)}
.thumbs{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.thumbs button{padding:0;border:2px solid var(--ink);background:#fff;border-radius:10px;cursor:pointer;overflow:hidden;width:64px;height:64px}
.thumbs button:hover{border-color:var(--accent)}
.thumbs img{display:block;width:100%;height:100%;object-fit:contain}
.badge{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 12px;border-radius:99px;border:2px solid var(--ink)}
.prod h1{font-size:clamp(26px,3.4vw,38px);line-height:1.14;margin:12px 0}
.price{font-size:38px;font-weight:800;color:var(--accent);margin:6px 0}
.price s{font-size:20px;color:#8a8f98;font-weight:500;margin-left:8px}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.facts span{border:1.5px solid var(--ink);border-radius:99px;padding:2px 12px;font-size:13.5px;background:var(--card)}
.prod .buy{font-size:18px;padding:14px 20px}
.toc{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px 22px;margin:36px 0 0;max-width:760px}
.toc ol{margin:6px 0 0;padding-left:20px}.toc li{margin:2px 0}
.post{max-width:760px}
.post h2{margin-top:44px;font-size:clamp(22px,2.6vw,30px)}
.post p{margin:14px 0}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}
.pc>div{border:2px solid var(--ink);border-radius:14px;padding:6px 20px 14px;background:var(--card)}
.pc h3{margin:12px 0 4px;font-size:19px}.pc ul{margin:0;padding-left:20px}
.pro{box-shadow:5px 5px 0 #2f8f5b}.con{box-shadow:5px 5px 0 var(--accent)}
.faq h3{font-size:19px;margin:22px 0 4px}.faq p{margin:0}
.faq>h2{margin-top:46px}
.post .buy{margin-top:34px;display:inline-block}
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.gcards a{display:block;height:100%;padding:18px 20px;background:var(--card);border:2px solid var(--ink);border-radius:14px;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.gcards a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold)}
.gcards b{display:block;font:800 18px/1.3 var(--f-display),serif;margin-bottom:6px}
.gcards span{color:var(--soft);font-size:14.5px}

/* bar beli mobile */
.bar{display:none}
@media(max-width:760px){
 .hero,.prod{grid-template-columns:1fr}.hero{padding-top:34px}.spot{margin:10px auto 0}.gal{position:static}.pc{grid-template-columns:1fr}
 .pp main{padding-bottom:96px}
 .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;gap:14px;align-items:center;justify-content:space-between;padding:10px 5% calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:2px solid var(--ink)}
 .bar b{font:800 22px var(--f-display),serif;color:var(--accent)}.bar .buy{margin:0;flex:1}
}

footer{border-top:2px solid var(--ink);background:var(--accent2);color:#dfe8ee;padding:34px 5% 40px;font-size:14px}
footer p{max-width:900px;margin:0 auto 10px}
footer a{color:var(--gold)}