/* Hunter BOOM JOHOR — CNY red & gold live-mall theme */
:root{--r:#c8161d;--r2:#e3262d;--rd:#8f0d13;--gold:#f6c453;--gold2:#ffdf8a;--cream:#fff8ea;--ink:#33140f;--mut:#8a5a4a;--line:#f1dcc0;--wa:#1fae55;--bar:58px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:118px}
body{margin:0;background:#fdf3e3;color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 12px}
/* top bar */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(135deg,var(--rd),var(--r) 55%,#d8322a);color:#fff;box-shadow:0 2px 12px #6a0a0e55}
.top .in{max-width:1180px;margin:0 auto;padding:8px 12px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.lg{display:flex;align-items:center;gap:8px;min-width:0}
.lg svg{flex:none;width:36px;height:36px}
.lg .wm{display:flex;flex-direction:column;line-height:1.05}
.lg b{font-size:19px;letter-spacing:.3px;background:linear-gradient(180deg,#fff3c4,var(--gold) 60%,#e5a92c);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.lg small{font-size:11.5px;color:#ffe9c2;font-weight:600;letter-spacing:.5px}
.sb{flex:1 1 260px;display:flex;background:#fff;border-radius:22px;overflow:hidden;border:2px solid var(--gold);min-width:0}
.sb input{flex:1;border:0;padding:7px 12px;outline:0;min-width:0;color:var(--ink);background:transparent}
.sb button{border:0;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--rd);font-weight:800;padding:0 14px;cursor:pointer}
.tabs{width:100%;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0 9px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:4px 12px;border-radius:16px;background:#ffffff1f;color:#fff;font-size:13.5px;font-weight:600;border:1px solid #ffffff33;white-space:nowrap}
.tabs a.on,.tabs a:hover{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--rd);border-color:transparent}
/* announcement */
.ann{background:linear-gradient(90deg,#fff3d1,#ffe7b0);border-bottom:1px solid #f0cf86;color:#7a2a12;font-size:13px}
.ann .in{max-width:1180px;margin:0 auto;padding:7px 12px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.ann b{color:var(--r)}
.ann a{font-weight:700;color:var(--wa)}
/* hero */
.hero{margin:12px 0;border-radius:18px;overflow:hidden;position:relative;color:#fff;padding:22px 18px 20px;background:radial-gradient(circle at 85% 20%,#ffd36a55 0,transparent 30%),radial-gradient(circle at 70% 85%,#ff8a5a44 0,transparent 30%),radial-gradient(circle at 12% 110%,#ffcf5a33 0,transparent 40%),linear-gradient(135deg,var(--rd),var(--r) 50%,#e2402c);box-shadow:0 8px 24px #8f0d1333}
.hero:after{content:"";position:absolute;right:-30px;top:-30px;width:190px;height:190px;background:url(../img/favicon.svg) center/contain no-repeat;opacity:.13;transform:rotate(12deg)}
.hero h1{margin:0 0 6px;font-size:22px;line-height:1.3;font-weight:900;text-shadow:0 2px 6px #0004}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p{margin:0 0 12px;color:#ffeccc;font-size:14px;max-width:640px}
.hero p[lang]{font-size:12px;line-height:1.45;margin:0 0 8px;opacity:.92;max-width:720px}
.hero .tag{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:14px;background:#ffffff26;border:1px solid #ffe2a066;font-size:13px;color:#fff3d0}
.cd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px;font-size:13px;color:#ffe9c4}
.cd b{display:inline-block;min-width:44px;text-align:center;background:#fff;color:var(--r);font-size:20px;border-radius:10px;padding:2px 8px;font-weight:900}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:24px;padding:9px 18px;font-weight:800;cursor:pointer;font-size:15px}
.btn.wa{background:var(--wa);color:#fff;box-shadow:0 4px 12px #0b6b3044}
.btn.gd{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--rd);box-shadow:0 4px 12px #a3700a44}
.btn.ol{background:#fff;color:var(--r);border:1.5px solid var(--r)}
/* icons */
.ic{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#fff;border-radius:16px;padding:12px 6px;margin:0 0 14px;box-shadow:0 4px 14px #b36b1a14}
.ic a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;text-align:center;color:var(--ink);line-height:1.2}
.ic span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:radial-gradient(circle at 35% 30%,#fff6d8,#ffd77a);box-shadow:inset 0 -2px 0 #e0a83a66}
/* info strip */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}
.info div{background:#fff;border-radius:14px;padding:10px;font-size:12.5px;color:var(--mut);border:1px dashed #efc98b}
.info b{display:block;color:var(--r);font-size:14px}
/* sections & grid */
.sec{margin:0 0 22px}
.sec h2{display:flex;align-items:baseline;gap:8px;margin:6px 2px 10px;font-size:19px;color:var(--rd)}
.sec h2 small{font-size:12.5px;color:var(--mut);font-weight:500}
.sec h2 a.more{margin-left:auto;font-size:13px;color:var(--r);font-weight:600}
.g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.g{grid-template-columns:repeat(3,minmax(0,1fr))}.ic{grid-template-columns:repeat(10,1fr)}.hero h1{font-size:28px}.hero{padding:30px 28px}}
@media(min-width:960px){.g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1140px){.g{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pc{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px #a8601a17;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.pc:hover{transform:translateY(-2px);box-shadow:0 10px 22px #c8161d22}
.pc .im{position:relative;aspect-ratio:1/1;background:radial-gradient(circle at 50% 40%,#fffaf0,#fbe7c6);display:block}
.pc .im img{width:100%;height:100%;object-fit:contain}
.cd2{position:absolute;left:8px;top:8px;background:linear-gradient(135deg,var(--r),#ef4b2f);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:9px;letter-spacing:.3px;box-shadow:0 2px 6px #0002}
.pc .b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc h3{margin:0;font-size:14px;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pc .en{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .intro{margin:0;font-size:12px;line-height:1.45;color:#6d4538;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.pc .row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.pr{color:var(--r);font-weight:900;font-size:17px;white-space:nowrap}
.pr small{font-size:11px;margin-right:1px}
.pk{font-size:11px;color:var(--mut)}
.add{border:0;border-radius:16px;padding:6px 10px;font-weight:800;font-size:12.5px;cursor:pointer;background:linear-gradient(135deg,var(--r2),#f2582f);color:#fff;white-space:nowrap;box-shadow:0 3px 8px #c8161d33}
.add:active{transform:scale(.96)}
/* placeholder (no catalog photo) */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;background:radial-gradient(circle at 50% 35%,#e0342a,#9a0f15);color:#fff}
.ph svg{width:38%;max-width:120px;opacity:.9;margin-bottom:8px}
.ph b{font-size:15px;line-height:1.35;color:#fff4d2}
.ph i{font-style:normal;font-size:11px;color:#ffd9a8;margin-top:6px;border:1px solid #ffd9a866;border-radius:10px;padding:1px 8px}
.big .ph b{font-size:22px}
.nores{display:none;text-align:center;padding:30px 10px;color:var(--mut)}
/* breadcrumbs & product page */
.bc{font-size:12.5px;color:var(--mut);margin:12px 2px 8px;display:flex;flex-wrap:wrap;gap:4px}
.bc a{color:var(--r)}
.pd{display:grid;gap:14px;margin:0 0 20px}
@media(min-width:820px){.pd{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}}
.pd .im{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fffaf0,#f7dfb5);border:1px solid var(--line)}
.pd .im img{width:100%;height:100%;object-fit:contain}
.pi{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line);box-shadow:0 4px 14px #a8601a14}
.pi h1{margin:4px 0 4px;font-size:21px;line-height:1.35;color:var(--ink)}
.pi .en{color:var(--mut);font-size:13.5px;margin:0 0 10px}
.pi .pr{font-size:28px}
.pi .note{font-size:12px;color:var(--mut);margin:4px 0 12px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:22px;overflow:hidden;background:var(--cream)}
.qty button{width:40px;height:38px;border:0;background:transparent;font-size:20px;font-weight:800;color:var(--r);cursor:pointer}
.qty input{width:52px;text-align:center;border:0;background:transparent;font-weight:800;font-size:16px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.act .btn{flex:1 1 150px}
table.sp{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:14px}
table.sp th,table.sp td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.sp th{width:96px;color:var(--mut);font-weight:600;background:#fffaf0}
.desc{background:#fff;border-radius:16px;padding:14px 16px;border:1px solid var(--line);margin:0 0 18px;font-size:14px}
.desc h2{font-size:16px;margin:0 0 8px;color:var(--rd)}
.desc p{margin:0 0 8px}
.pn{display:flex;justify-content:space-between;gap:10px;margin:0 0 18px;font-size:13px}
.pn a{color:var(--r);background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* text pages */
.txt{background:#fff;border-radius:16px;padding:16px 18px;border:1px solid var(--line);margin:12px 0 18px}
.txt h1{font-size:22px;margin:0 0 10px;color:var(--rd)}
.txt h2{font-size:17px;margin:18px 0 6px;color:var(--rd)}
.txt ol,.txt ul{padding-left:20px}
/* footer */
footer{background:linear-gradient(180deg,#7d0b10,#5a070b);color:#ffe7c2;margin-top:10px;font-size:13.5px}
footer .in{max-width:1180px;margin:0 auto;padding:22px 14px 26px;display:grid;gap:16px}
@media(min-width:760px){footer .in{grid-template-columns:1.2fr 1fr 1fr}}
footer h2{color:var(--gold);font-size:17px;margin:0 0 6px}
footer h3{color:#fff;font-size:14px;margin:0 0 6px}
footer p{margin:0 0 6px}
footer a{color:#fff;text-decoration:underline;text-decoration-color:#ffffff55}
footer .cats a{display:inline-block;margin:0 10px 6px 0;text-decoration:none;color:#ffe7c2}
footer .legal{grid-column:1/-1;border-top:1px solid #ffffff22;padding-top:12px;font-size:12px;color:#f3c9a3}
/* bottom nav */
.bn{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--bar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px #7a2a1214}
.bn a,.bn button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:transparent;font-size:11.5px;color:var(--mut);cursor:pointer;position:relative;font-weight:600}
.bn svg{width:23px;height:23px}
.bn .on{color:var(--r)}
.bn .wa{color:var(--wa)}
.bdg{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--r);color:#fff;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px}
.bdg.show{display:flex}
/* floating cart */
.fc{position:fixed;right:14px;bottom:calc(var(--bar) + 14px + env(safe-area-inset-bottom));z-index:35;border:0;border-radius:28px;padding:10px 16px;background:linear-gradient(135deg,var(--r2),#f2582f);color:#fff;font-weight:800;box-shadow:0 6px 18px #c8161d55;display:none;align-items:center;gap:8px;cursor:pointer}
.fc.show{display:flex}
/* drawer */
.dw{position:fixed;inset:0;z-index:60;display:none}
.dw.open{display:block}
.dw .bg{position:absolute;inset:0;background:#2a0a0699}
.dw .pnl{position:absolute;left:0;right:0;bottom:0;max-height:86vh;background:#fffaf1;border-radius:20px 20px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 30px #0004;padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:760px){.dw .pnl{left:auto;top:0;width:420px;max-height:none;border-radius:20px 0 0 20px}}
.dw .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dw .hd b{font-size:17px;color:var(--rd)}
.dw .x{border:0;background:#f4e2c6;border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;color:var(--rd)}
.dw .ls{overflow-y:auto;padding:6px 12px;flex:1}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--line)}
.ci .t{width:56px;height:56px;border-radius:10px;background:#f7e2bd center/contain no-repeat;position:relative;overflow:hidden}
.ci .t span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:#fff;background:#b3121b;text-align:center;padding:2px}
.ci .n{font-size:13.5px;font-weight:700;line-height:1.3}
.ci .n small{display:block;color:var(--mut);font-weight:500}
.ci .qty button{width:30px;height:30px;font-size:17px}
.ci .qty input{width:34px;font-size:14px}
.ci .rm{display:block;margin-top:4px;border:0;background:none;color:var(--mut);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
.dw .ft{padding:12px 16px 14px;border-top:1px solid var(--line);background:#fff}
.dw .tt{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px}
.dw .tt b{font-size:22px;color:var(--r)}
.dw .ft p{margin:0 0 10px;font-size:11.5px;color:var(--mut)}
.dw .send{width:100%;font-size:16px;padding:13px}
.dw .em{padding:40px 10px;text-align:center;color:var(--mut)}
.toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);background:#2a0a06e6;color:#fff;padding:12px 20px;border-radius:14px;font-weight:700;z-index:80;opacity:0;pointer-events:none;transition:.2s;text-align:center;max-width:80%}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.sec h2{flex-wrap:wrap}
.sec.shelf h2 small{flex:1 1 100%;margin:0;order:3}
@media(min-width:640px){.sec.shelf h2 small{flex:0 1 auto;order:0}}
#catalog[hidden],.nores[hidden],#featured[hidden]{display:none!important}
/* video intro (v3) */
.vb{position:absolute;right:8px;top:8px;background:#000a;color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px;letter-spacing:.2px}
.vid{background:#fff;border-radius:16px;padding:14px 16px;border:1px solid var(--line);margin:0 0 18px}
.vid h2{font-size:16px;margin:0 0 10px;color:var(--rd);display:flex;align-items:baseline;gap:8px}
.vid h2 small{font-size:12px;color:var(--mut);font-weight:500}
.vf{position:relative;margin:0 auto;border-radius:14px;overflow:hidden;background:#111}
.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vf.v169{width:100%;max-width:760px;aspect-ratio:16/9}
.vf.v916{aspect-ratio:9/16;height:min(70vh,640px);max-width:100%}
.vs{margin:8px 0 0;font-size:12.5px;color:var(--mut);text-align:center}
.vs a{color:var(--r);font-weight:600}
.vph{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 14px;border-radius:14px;background:radial-gradient(circle at 50% 35%,#e0342a,#9a0f15);color:#fff}
.vph svg{width:46px;height:46px}
.vph b{font-size:16px}.vph i{font-style:normal;font-size:13px;opacity:.85}
.vph .btn{margin-top:6px}

/* 小朋友专区 */
.kids-banner{display:flex;align-items:center;gap:12px;margin:12px 0 6px;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#fff6d8,#ffe7b0);border:1px solid #f0c878;color:#8f0d13;font-weight:800;text-decoration:none;font-size:16px;box-shadow:0 3px 10px #c8902020}
.kids-banner span:first-child{font-size:26px;line-height:1}
.kids-banner small{display:block;font-weight:500;color:#8a5a4a;font-size:12.5px;margin-top:2px}
.shelf-note{margin:0 2px 12px;font-size:12.5px;color:#8a5a4a;line-height:1.55}
#kids{background:linear-gradient(180deg,#fff8e8,#fdf3e3);border-radius:18px;padding:12px 8px 16px;margin:8px -4px 14px;border:1px solid #f0c87855}

/* 送货方式 */
.ship{background:#fff;border-radius:16px;padding:14px 16px 16px;margin:0 0 14px;border:1px solid var(--line);box-shadow:0 4px 14px #a8601a14}
.ship h2{margin:0 0 10px;font-size:18px;color:var(--rd)}
.ship ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:700px){.ship ul{grid-template-columns:repeat(3,1fr)}}
.ship li{background:#fff8e8;border-radius:12px;padding:12px 14px;font-size:13.5px;color:#6d4538;line-height:1.45;border:1px solid #f0c87855}
.ship b{display:block;color:#8f0d13;font-size:15px;margin-bottom:3px}

/* 羊年春节海报 — 手机、电脑都显示 */
.cny-poster{margin:12px 0 14px;border-radius:18px;overflow:hidden;background:#8f0d13;border:2px solid var(--gold);box-shadow:0 8px 24px #8f0d1333}
.cny-poster a{display:block}
.cny-poster img{width:100%;height:auto;aspect-ratio:1200/2278;vertical-align:bottom}
@media(min-width:720px){
  .cny-poster{max-width:460px;margin-left:auto;margin-right:auto}
}