/* Header & footer baru untuk SEMUA halaman toko.
   Semua aturan diberi awalan "sh-" dan dibatasi di dalam .sh supaya tidak bentrok dengan CSS tema lama. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:local("Inter"),url(/home2/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:local("Inter"),url(/home2/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:local("Inter"),url(/home2/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:local("Inter"),url(/home2/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:local("Inter"),url(/home2/fonts/inter-800.woff2) format("woff2")}

.sh{--navy:#1e3a5f;--y:#fde68a;--foot:#1c2330;--line:#e9edf3;--mut:#3d4451;--ink:#111;font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:14.5px;line-height:1.55;color:#111;letter-spacing:0;text-align:left;text-transform:none}
.sh,.sh *,.sh *::before,.sh *::after{box-sizing:border-box}
.sh a,.sh a:hover,.sh a:focus{color:inherit;text-decoration:none;background:none;outline-offset:2px}
.sh a:hover{text-decoration:none}
.sh h3,.sh p,.sh ul{margin:0;padding:0}
.sh img{display:block;border:0}
.sh button,.sh input{font:inherit;letter-spacing:0;text-transform:none}
.sh svg{flex:none}
.sh-w{max-width:1680px;margin:0 auto;padding:0 40px}

/* ---- bar biru paling atas ---- */
.sh-ut{background:var(--navy);color:#fff;font-size:12.5px}
.sh-ut .sh-w{display:flex;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px}
.sh-ut nav{display:flex;gap:24px;align-items:center}
.sh-ut,.sh-ut a,.sh-ut b,.sh-ut small,.sh-ul,.sh-lgn{color:#fff!important;opacity:1}
.sh-ut nav a,.sh-mkt{display:flex;align-items:center;gap:7px;white-space:nowrap;position:relative;cursor:pointer;font-size:12.5px}
.sh-ut a:hover{text-decoration:underline}
.sh-ut small{font-size:9px}
.sh-mkd{display:none;position:absolute;right:0;top:100%;margin-top:9px;background:#fff;border-radius:12px;box-shadow:0 14px 34px #1e3a5f2e;padding:8px;min-width:190px;z-index:60}
.sh-mkt.sh-open .sh-mkd{display:block}
@media(hover:hover){.sh-mkt:hover .sh-mkd{display:block}}
.sh-mkd a,.sh-ut .sh-mkd a{display:flex!important;align-items:center;gap:10px;color:#111!important;padding:8px 10px;border-radius:8px;font-size:13.5px;text-decoration:none!important}
.sh-mkd a:hover{background:#f1f4f9}
.sh-mkd img{width:52px;height:22px;object-fit:contain}

/* ---- header ---- */
.sh-hdr{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line)}
.sh-top{display:flex;gap:20px;align-items:center;padding-top:16px;padding-bottom:16px}
.sh-logo{display:block}
.sh-logo img{height:44px;width:auto}
.sh-s{flex:1;display:flex;align-items:center;background:#f5f7fa;border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 20px;margin:0}
.sh-s input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);outline:0;padding:9px 0;box-shadow:none;height:auto}
.sh-s button{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:9px 22px;font-weight:600;cursor:pointer}
.sh-ib{display:flex;gap:10px}
.sh-pill{position:relative;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap;border:0}
.sh-pill.sh-g{background:#e7f6ee;color:#17724a}
.sh-pill.sh-n{background:#eef2f8;color:var(--navy)}
.sh-pill.sh-h{background:#fdecef;color:#c2385a;padding:10px 12px}
.sh-cc{position:absolute;top:-5px;right:-5px;background:var(--navy);color:#fff;font:700 10px Inter,sans-serif;font-style:normal;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.sh-burger{display:none;border:0;background:transparent;color:var(--navy);cursor:pointer;padding:6px}

.sh-nv{border-top:1px solid var(--line)}
.sh-nv .sh-w{display:flex;gap:2px;justify-content:space-between;white-space:nowrap;scrollbar-width:none}
.sh-nv .sh-w::-webkit-scrollbar{display:none}
.sh-nv a{display:inline-block;padding:12px 14px;font-weight:600;font-size:14px;color:#111}
.sh-nv a:hover{color:var(--navy)}
.sh-nv a.sh-on{color:var(--navy)}
.sh-nv small{font-size:9px}
.sh-dd{position:relative;display:inline-block}
.sh-mm{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px #1e3a5f22;padding:10px;min-width:200px;z-index:60;grid-auto-flow:column;grid-auto-columns:minmax(170px,auto);gap:6px 18px;white-space:normal}
.sh-dd.sh-open .sh-mm{display:grid}
@media(hover:hover){.sh-dd:hover .sh-mm,.sh-dd:focus-within .sh-mm{display:grid}}
.sh-mc{display:flex;flex-direction:column}
.sh-mc a{padding:5px 10px;font-weight:500;font-size:13.5px;color:#111;border-radius:8px}
.sh-mc a:hover{background:#f5f7fa;color:var(--navy)}
.sh-mc a.sh-mh{font-weight:700}

/* ---- menu geser (HP/tablet) ---- */
.sh-drbg{position:fixed;inset:0;background:#0f172a99;z-index:9000;opacity:0;pointer-events:none;transition:.25s}
.sh-drbg.sh-on{opacity:1;pointer-events:auto}
.sh-dr{position:fixed;top:0;bottom:0;left:0;width:min(84vw,340px);background:#fff;z-index:9001;transform:translateX(-100%);transition:transform .28s;overflow-y:auto}
.sh-dr.sh-on{transform:none}
.sh-drh{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;font-weight:700}
.sh-drh button{border:0;background:transparent;cursor:pointer;color:#111}
.sh-dr a,.sh-dr summary{display:block;padding:14px 18px;font-weight:600;border-bottom:1px solid var(--line);color:#111;cursor:pointer;list-style:none}
.sh-dr summary::-webkit-details-marker{display:none}
.sh-dr summary::after{content:"+";float:right;color:var(--mut)}
.sh-dr details[open] summary::after{content:"–"}
.sh-dr a.sh-drs{padding:11px 18px 11px 32px;font-weight:500;font-size:14px;background:#f7f8fb}
html.sh-lock{overflow:hidden}

/* ---- footer ---- */
.sh-ftr{background:var(--foot);color:#fff;padding:48px 0 22px;margin-top:40px}
.sh-ftr,.sh-ftr a,.sh-ftr h3,.sh-ftr p,.sh-ftr b{color:#fff}
.sh-fc{display:grid;grid-template-columns:1.25fr repeat(4,1fr) 1.35fr;gap:26px}
.sh-fc h3{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.02em}
.sh-fc h3.sh-mt{margin-top:18px}
.sh-fc a{display:block;padding:4px 0;font-size:13.5px}
.sh-fc a:hover{text-decoration:underline}
.sh-ic{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.sh-fc .sh-ic a{display:flex;width:36px;height:36px;padding:0;border-radius:50%;align-items:center;justify-content:center}
.sh-fc .sh-ic a.sh-mk{width:88px;height:38px;border-radius:10px;background:#fff;padding:7px 10px}
.sh-mk img{width:100%;height:100%;object-fit:contain}
.sh-fmap .sh-mp{height:190px;border-radius:12px;background:#0000002a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh-mp iframe{width:100%;height:100%;border:0}
.sh-mp button{background:#fff;color:#111;border:0;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer}
.sh-lg{display:flex;gap:56px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid #2f3746}
.sh-lg h3{margin:0 0 10px;font-size:14px;font-weight:700}
.sh-lr{display:flex;gap:10px;flex-wrap:wrap}
.sh-lr img{height:32px;width:auto;background:#fff;border-radius:8px;padding:4px 10px}
.sh-fb{margin-top:22px;font-size:12.5px;border-top:1px solid #2f3746;padding-top:16px}
.sh-fb p{margin:0 0 10px;max-width:1100px}

/* ---- tombol WhatsApp melayang ---- */
.sh-fw{position:fixed;right:22px;bottom:22px;z-index:9000;display:flex;align-items:center;gap:10px;background:#25d366;color:#fff!important;border-radius:999px;padding:14px 20px;font-weight:700;box-shadow:0 10px 28px #25d36655}
.sh-fw svg{width:26px;height:26px}

/* ---- tablet ---- */
@media(max-width:1100px){
  .sh-w{padding-left:20px;padding-right:20px}
  .sh-burger{display:block}
  .sh-nv{display:none}
  .sh-pill.sh-g{font-size:0;gap:0;padding:11px}
  .sh-top{gap:14px}
  .sh-fc{grid-template-columns:1fr 1fr 1fr}
  .sh-fc>div:last-child{grid-column:span 3}
  .sh-ul{display:none}
  .sh-ut .sh-w{justify-content:flex-end}
}
/* ---- HP ---- */
@media(max-width:800px){
  .sh-w{padding-left:16px;padding-right:16px}
  .sh-ut .sh-w{padding-top:8px;padding-bottom:8px;justify-content:space-between}
  .sh-ut nav{gap:14px;width:100%;justify-content:space-between}
  .sh-ut nav a,.sh-mkt{font-size:12px}
  .sh-ut nav a[href^="mailto"],.sh-ut nav a[href*="wa.me"]{display:none}
  .sh-mkd{right:auto;left:0}
  .sh-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-top:14px;padding-bottom:12px}
  .sh-logo{justify-self:start}.sh-ib{justify-self:end;gap:8px}
  .sh-logo img{height:38px}
  .sh-s{order:5;grid-column:1/-1}
  .sh-pill span{display:none}
  .sh-pill.sh-g,.sh-pill.sh-n,.sh-pill.sh-h{padding:11px;font-size:0;gap:0}
  .sh-fc{grid-template-columns:1fr 1fr;gap:22px}
  .sh-fc>div:first-child,.sh-fc>div:last-child{grid-column:span 2}
  .sh-lg{gap:26px}
  .sh-fw{right:14px;bottom:84px;padding:13px}
  .sh-fw span{display:none}
}
@media(max-width:400px){
  .sh-w{padding-left:12px;padding-right:12px}
  .sh-ut nav{gap:8px}.sh-ut nav a,.sh-mkt{font-size:11.5px}
  .sh-top{gap:8px;padding-top:12px;padding-bottom:10px}.sh-logo img{height:32px}.sh-burger{padding:4px}
  .sh-pill.sh-g,.sh-pill.sh-n,.sh-pill.sh-h{padding:9px}.sh-ib{gap:6px}
}
/* layar pendek (HP miring): header tidak melayang */
@media(max-height:520px){.sh-hdr{position:static}.sh-fw{padding:11px}.sh-fw span{display:none}}
/* Paksa font Inter di dalam header/footer walaupun CSS tema lama memaksa font lain */
.sh,.sh *{font-family:Inter,"Segoe UI",system-ui,sans-serif!important}
.sh svg *{font-family:inherit!important}
/* Submenu kategori: maksimal 4 kolom, tidak keluar layar */
.sh-mm{grid-auto-flow:row!important;grid-template-columns:repeat(var(--cols,3),minmax(170px,1fr))!important;width:calc(var(--cols,3)*190px + 20px);max-width:calc(100vw - 32px);gap:8px 18px!important}