:root{--ink:#111;--muted:#777;--line:#e8e8e8;--bg:#fff;--soft:#f6f6f6;--accent:#e0392f;--ok:#0f7a4d}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{outline:1px solid #bbb}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:50}
.topbar{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{font-weight:700;font-size:20px;letter-spacing:1px;display:flex;align-items:center}
.logo img{height:38px;display:block;border-radius:4px}
.logo span{color:var(--accent)}
nav.main{display:flex;gap:4px;align-items:center;flex:1}
nav.main>a,nav.main .drop>a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;display:block}
nav.main>a:hover,nav.main .drop>a:hover{background:var(--soft)}
.drop{position:relative}
.drop .menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;min-width:200px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.drop:hover .menu{display:block}
.drop .menu a{padding:8px 10px;border-radius:6px;font-size:14px;display:block}
.drop .menu a:hover{background:var(--soft)}
.switchers{display:flex;gap:8px}
.switchers select{width:auto;padding:7px 8px;font-size:13px}
.cartbtn{position:relative;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;font-weight:500}
.cartbtn b{background:var(--accent);color:#fff;border-radius:99px;padding:0 7px;font-size:12px;margin-left:4px}
.breadcrumb{font-size:13px;color:var(--muted);padding:16px 0 4px}
.breadcrumb a:hover{color:var(--accent)}
h1.page{font-size:24px;margin:8px 0 18px}
.hero{position:relative;border-radius:14px;overflow:hidden;margin:18px 0 8px;background:#eee;aspect-ratio:21/8}
.hero .slide{position:absolute;inset:0;display:none;align-items:center;padding:0 8%;color:#fff;flex-direction:column;justify-content:center;text-align:center}
.hero .slide.on{display:flex}
.hero h2{font-size:34px;margin-bottom:8px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hero p{font-size:16px;opacity:.92}
.hero .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.hero .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.hero .dots i.on{background:#fff}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 14px}
.sec h2{font-size:20px}
.sec a{font-size:13px;color:var(--muted)}
.sec a:hover{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.hscroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}
.hscroll .card{flex:0 0 220px;scroll-snap-align:start}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-track{background:var(--soft);border-radius:99px}
.hscroll::-webkit-scrollbar-thumb{background:#c9c7bd;border-radius:99px}
.hscroll::-webkit-scrollbar-thumb:hover{background:#b4b2a9}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .15s}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.card .ph{aspect-ratio:3/4;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .ph img,.pd-img img{width:100%;height:100%;object-fit:cover}
.card .info{padding:12px}
.card .name{font-size:14px;font-weight:500;margin-bottom:4px}
.card .price{font-weight:700;color:var(--ink)}
.card .cat{font-size:12px;color:var(--muted);margin-top:2px}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:18px}
.pd-img{aspect-ratio:3/4;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.pd h1{font-size:24px;margin-bottom:6px}
.pd .price{font-size:24px;font-weight:700;margin:10px 0 4px}
.pd .sku{color:var(--muted);font-size:13px}
.sizetabs{display:flex;gap:6px;margin:14px 0 8px;flex-wrap:wrap}
.sizetabs button{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:13px}
.sizetabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 20px}
.sizes button{min-width:56px;padding:9px 0;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:14px}
.sizes button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;border:1px solid var(--ink);font-size:15px;font-weight:600;background:var(--ink);color:#fff;text-align:center}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.wa{background:#1faa53;border-color:#1faa53;color:#fff}
.btn:hover{opacity:.9}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:middle}
table.tbl th{color:var(--muted);font-weight:500;font-size:13px}
.cartline{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}
.cartline .ph{width:74px;aspect-ratio:3/4;background:var(--soft);border-radius:8px;overflow:hidden;flex:none}
.cartline .ph img{width:100%;height:100%;object-fit:cover}
.cart-total{display:flex;justify-content:space-between;font-size:17px;font-weight:700;margin:18px 0}
.form{max-width:520px}
.form label{display:block;font-size:13px;font-weight:500;margin:14px 0 5px}
.invoice{border:1px solid var(--line);border-radius:14px;padding:28px;max-width:760px;margin:20px auto}
.invoice h2{font-size:22px;margin-bottom:2px}
.invoice .meta{color:var(--muted);font-size:13px;margin-bottom:18px}
.invoice .brandrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.badge.new{background:#fdf0ee;color:var(--accent)}
.badge.ok{background:#e7f4ee;color:var(--ok)}
footer.site{border-top:1px solid var(--line);margin-top:60px;padding:26px 0;color:var(--muted);font-size:13px}
.fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#1faa53;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:80}
.fab:hover{transform:scale(1.05)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:99;display:none}
/* home category tree */
.catbox{margin-top:8px}
.tagchecks{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.tagchk{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:14px;font-weight:500;cursor:pointer;background:#fff;user-select:none}
.tagchk input{width:auto;margin:0;accent-color:var(--ink)}
.tagchk.on{border-color:var(--ink);background:var(--ink);color:#fff}
.cattree{display:flex;gap:44px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.cattree .grp a.top{font-weight:700;font-size:14px}
.cattree .grp a.top:hover{color:var(--accent)}
.cattree .sub{margin-top:8px}
.cattree .sub div{margin:3px 0}
.cattree .sub a{font-size:13px;color:var(--muted)}
.cattree .sub a:hover{color:var(--accent)}
/* 公告区（灰底） */
.noticebar{margin:14px 0 2px;border:1px solid var(--line);background:#f4f4f2;color:#444;border-radius:10px;font-size:13px;overflow:hidden}
.noticebar .wrap{padding:10px 20px;display:flex;flex-direction:column;gap:2px}
.noticebar .lbl{font-weight:700;margin-right:10px;color:var(--accent)}
.noticebar.scroll{white-space:nowrap;padding:10px 0}
.noticebar .track{display:inline-block;white-space:nowrap;animation:nbmarq 22s linear infinite}
.noticebar.scroll:hover .track{animation-play-state:paused}
@keyframes nbmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* banner 3D 走马灯（竖版 3:4） */
.hero3d{position:relative;height:380px;perspective:1200px;margin:18px 0 4px;overflow:hidden;border-radius:14px;background:var(--soft)}
.slide3d{position:absolute;top:50%;left:50%;width:270px;height:360px;margin:-180px 0 0 -135px;transition:transform .5s,opacity .5s;border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.28);cursor:pointer}
.card3d{width:100%;height:100%;background-size:cover;background-position:center;position:relative}
.cap3d{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;padding:10px 14px}
.cap3d b{display:block;font-size:15px}
.cap3d span{font-size:12px;opacity:.85}
.hnav{position:absolute;top:50%;transform:translateY(-50%);z-index:300;width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1}
.hnav:hover{background:rgba(0,0,0,.65)}
.hnav.prev{left:14px}.hnav.next{right:14px}
.dots3d{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:300}
.dots3d i{width:8px;height:8px;border-radius:50%;background:#c9c7bd;cursor:pointer}
.dots3d i.on{background:var(--ink)}
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0 18px}
.qtybox button{width:38px;height:38px;border:none;background:var(--soft);font-size:18px}
.qtybox button:hover{background:#e5e3da}
.qtybox input{width:52px;height:38px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:15px;font-weight:600;border-radius:0}
.qtybox input:focus{outline:none}
/* 浏览过的商品（缩略图 + hover 放大） */
.hotgrid{display:flex;gap:16px;flex-wrap:wrap}
.hitem{position:relative;text-align:center;font-size:12px;color:var(--muted);cursor:default}
.hitem img.sm{width:56px;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block;margin:0 auto 4px}
.hitem .big{display:none;position:absolute;top:-40px;left:64px;width:520px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:600;background:#fff}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:999;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.hitem:hover .big{display:block}
.hitem b{color:var(--ink);font-weight:500}
/* 商品多图管理 */
.imggrid{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.imgcell{position:relative;width:74px}
.imgcell img{width:74px;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.imgcell .cover{position:absolute;left:3px;top:3px;background:var(--accent);color:#fff;font-size:10px;border-radius:4px;padding:1px 5px}
.imgcell .x{position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:11px;line-height:1;cursor:pointer}
/* 商品多图画廊（前台） */
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs img{width:54px;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.thumbs img.on{border:2px solid var(--ink)}
/* 尺码勾选 */
.szwrap{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:6px}
.szpill{display:inline-block;padding:4px 9px;margin:3px;border:1px solid var(--line);border-radius:6px;font-size:12px;cursor:pointer;background:#fff;user-select:none}
.szpill:hover{border-color:var(--ink)}
.szpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* home browse: 左类目树 + 右实时筛选 */
.browse{display:flex;gap:28px;align-items:flex-start;margin-top:6px}
.browse-side{width:210px;flex:none}
.browse-side .tagchecks{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
.browse-side .tagchk{padding:7px 14px;font-size:13px}
.catlink{display:block;font-size:13px;padding:4px 0;color:var(--ink)}
.catlink:hover{color:var(--accent)}
.catlink.on{color:var(--accent);font-weight:700}
.catlink.all{font-weight:700;margin-bottom:4px}
.browse-grid{grid-template-columns:repeat(4,1fr);gap:16px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pager .mini{min-width:34px}
.pager .mini[disabled]{opacity:.4;cursor:default}
/* admin */
.admin{display:grid;grid-template-columns:190px 1fr;gap:0;min-height:70vh}
.admin aside{border-right:1px solid var(--line);padding:20px 10px}
.admin aside a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:2px}
.admin aside a.on{background:var(--ink);color:#fff}
.admin main{padding:22px 26px}
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat .box{border:1px solid var(--line);border-radius:12px;padding:16px}
.stat .box b{font-size:24px;display:block}
.stat .box span{color:var(--muted);font-size:13px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:14px;padding:24px;width:min(560px,92vw);max-height:88vh;overflow:auto}
.modal h3{margin-bottom:6px}
.tree ul{margin-left:18px;list-style:none}
.tree li{padding:4px 0}
.tree .catrow{display:flex;gap:8px;align-items:center;font-size:14px}
.chip{font-size:12px;background:var(--soft);border-radius:6px;padding:2px 8px;color:var(--muted)}
.mini{padding:5px 10px;font-size:12px;border-radius:7px;border:1px solid var(--line);background:#fff}
.mini.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.mini.danger{color:var(--accent);border-color:#f0c9c6}
[dir="rtl"] nav.main{flex-direction:row-reverse}
@media(max-width:900px){.pd{grid-template-columns:1fr}.admin{grid-template-columns:1fr}.admin aside{display:flex;overflow:auto;border-right:none;border-bottom:1px solid var(--line)}.admin aside a{white-space:nowrap}.stat{grid-template-columns:repeat(2,1fr)}nav.main{display:none}}

/* admin category map (visual tree) */
.catlegend{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin:12px 0 6px;flex-wrap:wrap}
.lvbadge{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:2px 8px;line-height:1.5}
.lvb1{background:#111}.lvb2{background:#0e7490}.lvb3{background:#b45309}.lvb4{background:#7c3aed}
.catcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.catcard.lv1{border-left:4px solid #111}
.catcard.lv2{border-left:4px solid #0e7490}
.catcard.lv3{border-left:4px solid #b45309}
.catcard.lv4{border-left:4px solid #7c3aed}
.catmap{display:flex;flex-direction:column;gap:10px}
.cathead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cname{font-size:15px}
.ccount{font-size:12px;color:var(--muted);background:#f4f4f2;border-radius:999px;padding:2px 10px;white-space:nowrap}
.cbtns{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chip.soft{background:#f4f4f2;color:var(--muted)}
.catkids{margin-top:10px;margin-left:20px;border-left:2px dashed var(--line);padding-left:14px;display:flex;flex-direction:column;gap:8px}

/* admin notices inline edit */
.noti-add{display:flex;gap:8px;margin:6px 0 18px}
.noti-add input{flex:1}
.notirow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.notirow input{flex:1}
.notilist{margin-top:4px}

/* notices multiline */
.notirow textarea{flex:1;resize:vertical;font-family:inherit}
.noti-add textarea{flex:1;resize:vertical;font-family:inherit}
.noticebar .wrap div{white-space:pre-line}

/* notice textarea min size */
.notirow textarea{min-height:88px}
.noti-add textarea{min-height:88px}

/* shipping estimate note */
.shipnote{margin-top:8px;font-size:13px;color:var(--muted);background:#f6f6f4;border:1px dashed var(--line);border-radius:8px;padding:8px 12px;line-height:1.7}
.shipnote br+*{color:var(--accent)}

/* order edit: product search hits */
.oe-hit{padding:8px 12px;border:1px solid var(--line);border-radius:8px;margin-top:6px;cursor:pointer;font-size:14px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
.oe-hit:hover{border-color:var(--accent);color:var(--accent)}