/*
Theme Name: KMG AC Store
Theme URI: https://kianjayamakmurgemilang.com
Author: Kianjaya Makmur Gemilang
Description: Theme toko online AC untuk rumah, kantor, dan pabrik. Running text, hero slider berfoto, katalog produk dengan filter, keranjang pesan via WhatsApp, kalkulator PK, dan SEO terstruktur. Semua konten dapat diedit dari dashboard WordPress.
Version: 1.0.0
Requires at least: 5.5
Requires PHP: 7.2
License: GPL-2.0-or-later
Text Domain: kmg
*/
:root{--ink:#0a2a3a;--c1:#0a9bbd;--c2:#f26a21;--frost:#eef7fa;--ice:#cfeaf2;--tx:#2b4350;--mu:#5d7480;--ln:#d8e6ec;--r:14px;--sh:0 12px 32px rgba(10,42,58,.10);--w:1200px}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.65 'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tx);background:#fff;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--c1)}
:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;color:var(--ink);line-height:1.2;margin:0 0 .55em;letter-spacing:-.01em;text-transform:capitalize}
h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}h2{font-size:clamp(1.45rem,2.6vw,2rem)}h3{font-size:1.12rem}
p{margin:0 0 1em}
ul,ol{padding:0;margin:0;list-style:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}.narrow2{max-width:900px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:999}.skip:focus{left:10px;top:10px}
.ico{flex:none}
.ctr{text-align:center;margin-top:28px}

/* Running text */
.marq{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:600}
.marq-t{display:inline-flex;animation:mq var(--sp,45s) linear infinite;padding:9px 0}
.marq:hover .marq-t{animation-play-state:paused}
.grp{display:inline-flex;flex:none}
.grp span{display:inline-flex;align-items:center;padding-left:34px}
.grp span:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--c1);margin-left:34px}
@keyframes mq{to{transform:translateX(-50%)}}

/* Topbar & header */
.top{background:var(--frost);border-bottom:1px solid var(--ln);font-size:13.5px;color:var(--mu)}
.top-in{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.top-l,.top-r{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.top a,.top span{display:inline-flex;align-items:center;gap:6px}
.hd{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--ln)}
.hd.sm{box-shadow:0 8px 24px rgba(10,42,58,.12)}
.hd-in{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px}
.ic{background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;display:inline-flex;position:relative}
.mnb{display:none}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-img{max-height:52px;width:auto}
.lg-mk{width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center}
.lg-t{display:flex;flex-direction:column;line-height:1.15}
.lg-t b{font:700 1.02rem 'Sora',sans-serif;color:var(--ink)}
.lg-t small{color:var(--c1);font-weight:600;font-size:12.5px}
.srch{flex:1;display:flex;max-width:520px;border:2px solid var(--ln);border-radius:999px;overflow:hidden;background:#fff}
.srch:focus-within{border-color:var(--c1)}
.srch input{flex:1;border:0;padding:10px 18px;font:inherit;min-width:0;background:none}
.srch input:focus{outline:0}
.srch button{border:0;background:var(--c1);color:#fff;padding:0 18px;cursor:pointer}
.hcall{display:flex;align-items:center;gap:10px;color:var(--ink);margin-left:auto}
.hcall .ico{color:var(--c1)}
.hcall span{display:flex;flex-direction:column;line-height:1.2}
.hcall small{color:var(--mu);font-size:12px}
.hcall b{font-family:'Sora',sans-serif;font-size:.95rem}
.cnt{position:absolute;top:0;right:0;min-width:20px;height:20px;border-radius:10px;background:var(--c2);color:#fff;font:700 11px/20px 'Sora',sans-serif;text-align:center;font-style:normal;padding:0 5px}
.hd2{background:var(--ink)}
.hd2-in{display:flex;align-items:stretch;gap:6px}
.cat{position:relative}
.catb{background:var(--c1);color:#fff;border:0;font:700 14.5px 'Sora',sans-serif;padding:0 22px;height:100%;min-height:46px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-transform:capitalize}
.cat-m{display:none;position:absolute;left:0;top:100%;width:min(720px,92vw);background:#fff;box-shadow:var(--sh);border-radius:0 0 var(--r) var(--r);padding:22px 26px;grid-template-columns:repeat(3,1fr);gap:24px;z-index:60}
.cat.open .cat-m{display:grid}
.cat-m h4{font-size:.95rem;color:var(--c1);margin-bottom:.5em}
.cat-m li a{display:block;padding:4px 0;color:var(--tx)}
.menu{display:flex;flex-wrap:wrap}
.menu>li{position:relative}
.menu>li>a{display:block;padding:13px 16px;color:#fff;font-weight:600;font-size:15px}
.menu>li>a:hover,.menu .current-menu-item>a{background:rgba(255,255,255,.1);color:#fff}
.menu .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:200px;background:#fff;box-shadow:var(--sh);z-index:60}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .sub-menu a{display:block;padding:10px 16px;color:var(--tx)}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;border-radius:999px;padding:10px 20px;font:700 14.5px 'Sora',sans-serif;cursor:pointer;transition:transform .15s,background .15s,color .15s;text-transform:capitalize;line-height:1.2}
.btn:active{transform:scale(.97)}
.b1{background:var(--c1);color:#fff}.b1:hover{background:var(--ink);color:#fff}
.b2{background:var(--c2);color:#fff}.b2:hover{background:var(--ink);color:#fff}
.b0{background:#fff;color:var(--ink);border-color:var(--ln)}.b0:hover{border-color:var(--c1);color:var(--c1)}
.lg{padding:14px 28px;font-size:15.5px}.sm{padding:7px 14px;font-size:13px}.wide{width:100%}

/* Hero */
.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0,0 80%);z-index:2}
.sls{position:absolute;inset:0}
.sl{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s}
.sl.on{opacity:1}
.sl:after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,42,58,.94) 10%,rgba(10,42,58,.64) 55%,rgba(10,42,58,.34))}
.sl.nobg{background:linear-gradient(135deg,#0a2a3a 20%,#0b6a86)}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:116px;min-height:560px}
.slt{display:none}
.slt.on{display:block;animation:fi .7s ease}
@keyframes fi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hh{display:block;font:800 clamp(2rem,4.3vw,3.3rem)/1.12 'Sora',sans-serif;color:#fff;margin:0 0 .45em;text-transform:capitalize;letter-spacing:-.02em}
.hs{font-size:1.15rem;color:#dcecf2;max-width:560px;margin-bottom:1.6em}
.dots{display:flex;gap:10px;margin-top:34px}
.dots button{width:34px;height:5px;border-radius:3px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.dots button.on{background:var(--c2)}
.calc{background:#fff;color:var(--tx);border-radius:18px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.calc h2{font-size:1.3rem;margin-bottom:.2em}
.calc p{color:var(--mu);font-size:14.5px}
.calc label{display:block;font-weight:700;font-size:13.5px;color:var(--ink);margin:12px 0 5px}
.calc input,.calc select,.flt select,.cf input,.cf textarea,.cart-f input,.cart-f textarea{width:100%;border:2px solid var(--ln);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--tx)}
.calc input:focus,.calc select:focus,.flt select:focus,.cf input:focus,.cf textarea:focus,.cart-f input:focus,.cart-f textarea:focus{outline:0;border-color:var(--c1)}
.calc .btn{width:100%;margin-top:16px}
.pkr{margin-top:14px}
.pkr p{margin:0 0 .6em;font-size:15px;color:var(--ink)}
.pkr .sm{font-size:12.5px;color:var(--mu)}
.pkr .btn{margin-top:4px}
.er-m{color:#b3261e;font-weight:600}.ok-m{color:#0b7a3b;font-weight:700}

/* Merk */
.brands{border-bottom:1px solid var(--ln)}
.brands .wrap{display:flex;align-items:center;gap:20px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.brands p{margin:0;font-weight:700;color:var(--mu)}
.brands ul{display:flex;gap:10px;flex-wrap:wrap}
.brands a{display:block;padding:8px 18px;border:2px solid var(--ln);border-radius:999px;font:700 14px 'Sora',sans-serif;color:var(--ink)}
.brands a:hover{border-color:var(--c1);color:var(--c1)}

/* Seksi */
.sec{padding:72px 0}
.sec.alt{background:var(--frost)}
.sh{max-width:680px;margin:0 0 34px}
.sh p{color:var(--mu);font-size:1.08rem;margin:0}
.g3,.g4{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;background:#fff;border:2px solid var(--ln);border-radius:var(--r);padding:28px;transition:border-color .2s,box-shadow .2s}
.tile:hover{border-color:var(--c1);box-shadow:var(--sh);color:var(--tx)}
.tile-i{width:64px;height:64px;border-radius:16px;background:var(--frost);color:var(--c1);display:grid;place-items:center;margin-bottom:16px}
.tile p{flex:1;color:var(--mu)}
.more{display:inline-flex;align-items:center;gap:6px;font:700 14px 'Sora',sans-serif;color:var(--c1)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tabs button{border:2px solid var(--ln);background:#fff;border-radius:999px;padding:8px 20px;font:700 14px 'Sora',sans-serif;color:var(--ink);cursor:pointer}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* Kartu produk */
.pc{background:#fff;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.pc:hover{box-shadow:var(--sh);border-color:var(--ice)}
.pc-i{position:relative;display:block;background:var(--frost);aspect-ratio:26/22}
.pc-i img{width:100%;height:100%;object-fit:cover}
.bdg,.dsc{position:absolute;top:12px;font:700 12px 'Sora',sans-serif;padding:4px 10px;border-radius:999px;color:#fff}
.bdg{left:12px;background:var(--ink)}.dsc{right:12px;background:var(--c2)}
.pc-b{padding:18px;display:flex;flex-direction:column;flex:1}
.pc-m{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--mu);font-weight:600;margin-bottom:6px}
.pc-m span+span{padding-left:10px;border-left:1px solid var(--ln)}
.pc-t{font-size:1.02rem;margin-bottom:.5em}
.pc-b p{font-size:14.5px;color:var(--mu)}
.pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pr b{font:800 1.18rem 'Sora',sans-serif;color:var(--ink)}
.pr b.cs,.cs{color:var(--c1);font-weight:700}
.pr s{color:var(--mu);font-size:14px}
.pr.big b{font-size:1.9rem}
.stk{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-bottom:14px}
.stk:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stk.ok{color:#0b7a3b}.stk.po{color:#b26a00}.stk.no{color:#b3261e}
.pc-a{display:flex;gap:8px;margin-top:auto}
.pc-a .btn{flex:1;padding:9px 10px;font-size:13px}
.pc.post .pc-b .more{margin-top:auto}

/* Layanan, alasan, angka, langkah */
.svc{background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:26px}
.svc-i{width:54px;height:54px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.svc p{margin:0;color:var(--mu)}
.stat{background:var(--ink);color:#cfe3ea}
.stat h2,.stat h3{color:#fff}
.stat .sh p{color:#9fc0cc}
.wy{display:flex;gap:16px}
.wy-i{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(10,155,189,.2);color:#6fdcf3;display:grid;place-items:center}
.wy p{margin:0;color:#b5ced8}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.15)}
.nums b{display:block;font:800 clamp(2.2rem,4vw,3.2rem)/1 'Sora',sans-serif;color:#fff}
.nums span{color:#9fc0cc;font-size:14.5px}
.steps{counter-reset:s}
.steps li{position:relative;padding:26px;border:1px solid var(--ln);border-radius:var(--r);background:#fff}
.steps b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c2);color:#fff;font:700 1rem 'Sora',sans-serif;margin-bottom:14px}
.steps p{margin:0;color:var(--mu)}
.fq{background:#fff;border:1px solid var(--ln);border-radius:12px;margin-bottom:10px;padding:0 20px}
.fq summary{cursor:pointer;font:700 1rem 'Sora',sans-serif;color:var(--ink);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"+";color:var(--c1);font-size:1.4rem;line-height:1}
.fq[open] summary:after{content:"−"}
.fq p{padding-bottom:16px;margin:0;color:var(--mu)}
.tm{margin:0;background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:26px}
.stars{display:flex;gap:2px;color:var(--c2)}.stars .ico{fill:currentColor}
.tm blockquote{margin:14px 0;font-size:1.05rem;color:var(--ink)}
.tm figcaption b{display:block;font-family:'Sora',sans-serif;color:var(--ink)}
.tm figcaption span{color:var(--mu);font-size:14px}

/* Tabel harga */
.tw{overflow-x:auto;border:1px solid var(--ln);border-radius:var(--r);background:#fff}
.pt{width:100%;border-collapse:collapse;min-width:640px}
.pt th{background:var(--ink);color:#fff;text-align:left;padding:14px 18px;font:700 14px 'Sora',sans-serif}
.pt td{padding:14px 18px;border-top:1px solid var(--ln)}
.pt tbody tr:hover{background:var(--frost)}
.pt td a{font-weight:700;color:var(--ink)}.pt td a:hover{color:var(--c1)}
.ra{text-align:right}

/* Halaman dalam */
.ph{background:linear-gradient(135deg,var(--ink),#0b5870);color:#fff;padding:40px 0 44px}
.ph.slim{padding:14px 0;background:var(--frost);color:var(--mu)}
.ph h1{color:#fff;margin:.3em 0 0}
.ph .lead{color:#cfe3ea;max-width:720px;margin:.6em 0 0;font-size:1.08rem}
.bc{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#9fc0cc}
.ph.slim .bc{color:var(--mu)}
.bc a:hover{color:#fff}.ph.slim .bc a:hover{color:var(--c1)}
.entry{font-size:1.06rem}
.entry h2,.entry h3{margin-top:1.4em}
.entry ul{list-style:disc;padding-left:1.3em;margin-bottom:1em}.entry ol{list-style:decimal;padding-left:1.3em;margin-bottom:1em}
.entry img{border-radius:var(--r)}
.entry a{color:var(--c1);text-decoration:underline}
.feat{margin-bottom:20px}.feat img{border-radius:var(--r);width:100%}
.meta{color:var(--mu);font-size:14px}
.empty{text-align:center;padding:56px 20px;background:var(--frost);border-radius:var(--r)}
.pg ul{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.pg a,.pg span{display:block;padding:8px 15px;border:2px solid var(--ln);border-radius:999px;font-weight:700}
.pg .current{background:var(--ink);border-color:var(--ink);color:#fff}

/* Katalog */
.shop{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.flt{background:var(--frost);border-radius:var(--r);padding:22px;position:sticky;top:150px}
.flt h2{font-size:1.1rem}
.flt label{display:block;font-weight:700;font-size:13.5px;margin:12px 0 5px;color:var(--ink)}
.flt .btn{width:100%;margin-top:18px}
.rst{display:block;text-align:center;margin-top:10px;font-size:14px;color:var(--mu);text-decoration:underline}
.rc{color:var(--mu);margin-bottom:16px}

/* Detail produk */
.sp-g+.sp-i{min-width:0}
.sp{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;margin-bottom:50px}
.sp-main{background:var(--frost);border-radius:var(--r);overflow:hidden}
.sp-main img{width:100%;aspect-ratio:1/.86;object-fit:contain}
.sp-th{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sp-th button{width:80px;height:80px;padding:0;border:2px solid var(--ln);border-radius:10px;overflow:hidden;background:var(--frost);cursor:pointer}
.sp-th button.on{border-color:var(--c1)}.sp-th img{width:100%;height:100%;object-fit:cover}
.sp-t{font-size:clamp(1.6rem,3vw,2.2rem)}
.ex{color:var(--mu)}
.opt{background:var(--frost);border-radius:var(--r);padding:18px;margin:18px 0}
.chk{display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer;margin-bottom:14px}
.chk input{width:18px;height:18px;accent-color:var(--c1)}
.chk.sm{font-size:13px;margin:6px 0}
.qrow{display:flex;gap:12px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ln);border-radius:999px;background:#fff;overflow:hidden}
.qty button{width:36px;height:36px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink)}
.qty input,.qty span{width:44px;text-align:center;border:0;font:700 15px 'Sora',sans-serif;background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.trust{margin-top:20px;display:grid;gap:8px}
.trust li{display:flex;gap:10px;align-items:center;color:var(--mu)}.trust .ico{color:var(--c1)}
.pane{display:none}.pane.on{display:block}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--ln)}
.spec th{width:34%;background:var(--frost);color:var(--ink)}

/* Kontak */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.fi li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.fi .ico{color:var(--c1);margin-top:3px}
.fi.big li{font-size:1.05rem}
.map{margin-top:20px;border-radius:var(--r);overflow:hidden;border:1px solid var(--ln)}
.map iframe{width:100%;height:260px;border:0;display:block}
.cf{background:var(--frost);border-radius:var(--r);padding:28px}
.cf label{display:block;font-weight:700;font-size:14px;margin:14px 0 5px;color:var(--ink)}
.cf .btn{margin-top:20px}
.hp{position:absolute;left:-9999px}

/* CTA & footer */
.fcta{background:linear-gradient(100deg,var(--c1),#0b5870);color:#fff}
.fcta-in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:44px;padding-bottom:44px;flex-wrap:wrap}
.fcta h2{color:#fff;margin:0 0 .2em}.fcta p{margin:0;color:#e0f4f9}
.ft{background:var(--ink);color:#b5ced8;padding-top:56px}
.ft-in{display:grid;grid-template-columns:1.3fr .8fr 1.1fr 1.1fr;gap:36px;padding-bottom:40px}
.ft h3{color:#fff;font-size:1.05rem}
.ft a:hover{color:#fff}
.fm li{margin-bottom:8px}
.soc{display:flex;gap:14px;flex-wrap:wrap;font-weight:700}
.ft .fi .ico{color:#6fdcf3}
.ft-b{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:14px}
.fwa{position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;background:#1faa59;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.fwa:hover{color:#fff;background:#178a47}
.fup{position:fixed;right:24px;bottom:88px;z-index:70;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}

/* Keranjang */
.ovl{position:fixed;inset:0;background:rgba(10,42,58,.55);z-index:90}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s;box-shadow:-12px 0 40px rgba(0,0,0,.2)}
.cart.open{transform:none}
.cart-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ln)}
.cart-h h2{margin:0;font-size:1.2rem}
.cart-b{flex:1;overflow:auto;padding:12px 20px}
.cart-e{color:var(--mu);text-align:center;padding:40px 10px}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--ln)}
.ci img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--frost)}
.ci b{font-size:14.5px;display:block;line-height:1.3}.ci small{color:var(--mu);display:block}
.ci .qty{margin-top:6px}.ci .qty button{width:30px;height:30px}.ci .qty span{width:34px;line-height:30px}
.ci-r{text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.ci-r button{background:none;border:0;color:#b3261e;font-size:13px;cursor:pointer;text-decoration:underline}
.cart-f{border-top:1px solid var(--ln);padding:16px 20px;display:flex;flex-direction:column;gap:8px;background:var(--frost);max-height:58vh;overflow:auto}
.cart-f small{color:var(--mu);font-size:12.5px}
.cart-t{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.cart-t b{font:800 1.35rem 'Sora',sans-serif;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;z-index:120;opacity:0;pointer-events:none;transition:.3s;font-weight:600;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Responsif */
@media(max-width:1020px){
  .g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}
  .hero-in{grid-template-columns:1fr;padding-top:48px;padding-bottom:100px}
  .ft-in{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}.flt{position:static}
  .sp{grid-template-columns:1fr}.ct{grid-template-columns:1fr}
  .hcall span{display:none}
}
@media(max-width:820px){
  .mnb{display:inline-flex}
  .top-l span,.top-r{display:none}
  .hd-in{gap:10px}
  .srch{order:5;flex-basis:100%;max-width:none}
  .hd-in{flex-wrap:wrap}
  .hcall{margin-left:auto}
  .cartb{order:3}
  .hd2{display:none}
  body.nav-open .hd2{display:block}
  .hd2-in{flex-direction:column;padding-bottom:10px}
  .menu{flex-direction:column}
  .catb{min-height:44px;width:100%}
  .cat-m{position:static;width:100%;grid-template-columns:1fr;box-shadow:none;border-radius:0}
  .menu .sub-menu{position:static;display:block;background:transparent;box-shadow:none}
  .menu .sub-menu a{color:#cfe3ea;padding-left:30px}
  .nums{grid-template-columns:repeat(2,1fr)}
  .sec{padding:52px 0}
}
@media(max-width:600px){
  .g3,.g4{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .top-l a+a{display:none}
  .calc{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .marq{overflow-x:auto}
}