/* ============================================================
   xn_mall 主题商城 · 增强版 v2.0
   视觉参考：kehua_theme 商城（cijian.demo.kehua.love/store.htm）
   特色：绿色主题、三栏布局、轻卡片风格、暗色模式、响应式
   ============================================================ */
:root{
	--xn-primary:#5b8c5a;
	--xn-primary-dark:#4a8b5f;
	--xn-primary-light:#7cb879;
	--xn-primary-soft:#e8f5ec;
	--xn-primary-soft2:#d4edda;
	--xn-primary-soft3:#c3e6cb;
	--xn-primary-rgb:91,140,90;
	--xn-bg:#f5f6f8;
	--xn-card:#ffffff;
	--xn-card-soft:#f1f5f9;
	--xn-text:#1e293b;
	--xn-sub:#94a3b8;
	--xn-red:#ef4444;
	--xn-border:rgba(15,23,42,.05);
	--xn-border-strong:rgba(15,23,42,.07);
	--xn-shadow:0 1px 2px rgba(15,23,42,.03);
	--xn-shadow-hover:0 6px 16px rgba(15,23,42,.06);
}
html.xn-dark{
	--xn-bg:#141619;
	--xn-card:#1e2530;
	--xn-card-soft:#232b36;
	--xn-text:#e2e8f0;
	--xn-sub:#7c8a9d;
	--xn-border:rgba(255,255,255,.07);
	--xn-border-strong:rgba(255,255,255,.1);
	--xn-shadow:0 1px 2px rgba(0,0,0,.3);
	--xn-shadow-hover:0 6px 16px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
	html:not(.xn-light):not(.xn-dark){--xn-bg:#141619;--xn-card:#1e2530;--xn-card-soft:#232b36;--xn-text:#e2e8f0;--xn-sub:#7c8a9d;--xn-border:rgba(255,255,255,.07);--xn-border-strong:rgba(255,255,255,.1);--xn-shadow:0 1px 2px rgba(0,0,0,.3);--xn-shadow-hover:0 6px 16px rgba(0,0,0,.4);}
}
body.xn-mall-body{margin:0;background:var(--xn-bg);color:var(--xn-text);font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s;}
.xn-mall-wrap{max-width:1350px;margin:0 auto;padding:20px 20px 48px;box-sizing:border-box;}

/* ===== 顶部三栏（左导航 / 中Banner / 右用户公告） ===== */
.xn-mall-top{display:grid;grid-template-columns:228px minmax(0,1fr) 300px;gap:16px;align-items:flex-start;width:100%;box-sizing:border-box;}

/* ---- 左：分类导航面板 ---- */
.xn-mall-side{background:var(--xn-card);border:1px solid var(--xn-border);border-radius:10px;box-shadow:var(--xn-shadow);padding:8px;box-sizing:border-box;display:flex;flex-direction:column;max-height:340px;overflow-y:auto;}
.xn-mall-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--xn-text);font-size:14px;text-decoration:none;transition:background .15s,color .15s;line-height:1.4;}
.xn-mall-side a:hover{background:var(--xn-primary-soft);color:var(--xn-primary-dark);}
.xn-mall-side a.active{background:var(--xn-primary-soft);color:var(--xn-primary-dark);font-weight:600;box-shadow:inset 2px 0 0 var(--xn-primary);}
.xn-mall-side a .ic{width:18px;text-align:center;font-size:14px;flex-shrink:0;}
.xn-mall-side a .ar{margin-left:auto;color:var(--xn-sub);font-size:12px;transition:transform .15s;}
.xn-mall-side a:hover .ar{transform:translateX(2px);}

/* ---- 中：Banner ---- */
.xn-mall-banner{border-radius:10px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:space-between;min-height:300px;padding:34px 44px;box-sizing:border-box;
	background:linear-gradient(115deg,var(--xn-primary-soft) 0%,var(--xn-primary-soft2) 55%,var(--xn-primary-soft3) 100%);}
html.xn-dark .xn-mall-banner{background:linear-gradient(115deg,#1c2b22 0%,#223328 55%,#29402f 100%);}
.xn-mall-banner .b-txt{position:relative;z-index:2;max-width:56%;}
.xn-mall-banner .b-title{font-size:32px;font-weight:800;color:var(--xn-primary-dark);margin:0 0 14px;line-height:1.25;}
html.xn-dark .xn-mall-banner .b-title{color:var(--xn-primary-soft2);}
.xn-mall-banner .b-sub{font-size:15px;color:var(--xn-sub);margin:0 0 26px;line-height:1.6;}
.xn-mall-banner .b-btn{display:inline-block;background:var(--xn-primary);color:#fff;padding:11px 26px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;box-shadow:0 2px 6px rgba(var(--xn-primary-rgb),.3);transition:background .15s,transform .15s;}
.xn-mall-banner .b-btn:hover{background:var(--xn-primary-dark);transform:translateY(-1px);}
.xn-mall-banner .b-img{position:absolute;right:30px;top:50%;transform:translateY(-50%);max-height:230px;max-width:40%;border-radius:10px;object-fit:cover;box-shadow:0 8px 24px rgba(15,23,42,.12);}

/* ---- 右：用户卡片 + 公告 ---- */
.xn-mall-right{display:flex;flex-direction:column;gap:16px;min-height:100%;}
.xn-mall-ucard{background:var(--xn-card);border:1px solid var(--xn-border);border-radius:10px;padding:18px;box-shadow:var(--xn-shadow);box-sizing:border-box;}
.xn-mall-urow{display:flex;align-items:center;gap:12px;}
.xn-mall-urow img.avatar{width:48px;height:48px;border-radius:50%;background:var(--xn-card-soft);object-fit:cover;}
.xn-mall-urow a.avatar-link{display:inline-block;border-radius:50%;line-height:0;text-decoration:none;cursor:pointer;}
.xn-mall-urow a.avatar-link:hover img.avatar{box-shadow:0 0 0 3px var(--xn-primary,#5b8c5a);}
.xn-mall-urow .coin{font-size:20px;font-weight:800;color:var(--xn-primary);}
.xn-mall-urow .lv{font-size:11px;background:var(--xn-primary-soft);color:var(--xn-primary-dark);border-radius:4px;padding:1px 6px;margin-left:6px;font-weight:600;}
.xn-mall-urow .hi{font-size:12px;color:var(--xn-sub);margin-top:4px;}
.xn-mall-uacts{display:flex;justify-content:space-around;margin-top:16px;}
.xn-mall-uacts a{text-align:center;color:var(--xn-sub);font-size:12px;text-decoration:none;transition:color .15s;}
.xn-mall-uacts a:hover{color:var(--xn-primary);}
.xn-mall-uacts .ic{width:38px;height:38px;border-radius:10px;background:var(--xn-primary-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:16px;}
.xn-mall-notice{background:var(--xn-card);border:1px solid var(--xn-border);border-radius:10px;padding:16px 18px;box-shadow:var(--xn-shadow);flex:1;box-sizing:border-box;}
.xn-mall-notice .n-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;margin-bottom:10px;}
.xn-mall-notice .n-head a{font-size:12px;color:var(--xn-sub);font-weight:400;text-decoration:none;}
.xn-mall-notice .n-head a:hover{color:var(--xn-primary);}
.xn-mall-notice ul{list-style:none;margin:0;padding:0;}
.xn-mall-notice li{padding:8px 0;border-bottom:1px dashed var(--xn-border-strong);font-size:13px;line-height:1.5;}
.xn-mall-notice li:last-child{border-bottom:0;}
.xn-mall-notice li .d{font-size:11px;color:var(--xn-sub);margin-top:3px;}

/* ===== 推荐商品（复刻 kehua-store-card 视觉 + 防错位固定高度） ===== */
.xn-mall-sec-title{font-size:20px;font-weight:800;margin:30px 0 18px;display:flex;align-items:baseline;gap:8px;}
.xn-mall-sec-title::after{content:'';display:block;width:44px;height:3px;background:var(--xn-primary);border-radius:2px;margin-top:8px;}
.xn-mall-sec-title .more{margin-left:auto;font-size:13px;font-weight:400;color:var(--xn-sub);text-decoration:none;}
.xn-mall-sec-title .more:hover{color:var(--xn-primary);}

.xn-mall-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch;}
.xn-mall-good{position:relative;background:var(--xn-card);border-radius:10px;border:1px solid var(--xn-border);box-shadow:var(--xn-shadow);overflow:hidden;display:flex !important;flex-direction:column !important;text-decoration:none;color:var(--xn-text);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;}
.xn-mall-good:hover{transform:translateY(-2px);box-shadow:var(--xn-shadow-hover);border-color:var(--xn-border-strong);}
.xn-mall-good .g-cover{width:100% !important;height:200px !important;min-height:200px !important;max-height:200px !important;object-fit:cover !important;display:block !important;background:var(--xn-card-soft);aspect-ratio:6/4;flex-shrink:0;}
.xn-mall-good .g-body{padding:10px 12px 12px;display:block;flex:1;min-height:0;box-sizing:border-box;}
.xn-mall-good .g-title{font-size:14px;font-weight:700;line-height:20px !important;height:40px !important;min-height:40px !important;max-height:40px !important;overflow:hidden !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;margin:0 0 4px;}
.xn-mall-good .g-brief{font-size:12px;color:var(--xn-sub);margin:0 0 8px;height:18px !important;min-height:18px !important;max-height:18px !important;line-height:18px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis;display:block;}
.xn-mall-good .g-price{margin-top:auto;padding-top:8px;min-height:34px;overflow:hidden;display:block !important;}
.xn-mall-good .g-pnum{float:left;color:var(--xn-red);font-weight:800;font-size:18px;line-height:1.6;display:inline-block;}
.xn-mall-good .g-pnum small{font-size:12px;font-weight:700;display:inline-block;}
.xn-mall-good .g-pnum strong{font-size:18px;font-weight:800;line-height:1.2;color:var(--xn-red);display:inline-block;}
.xn-mall-good .g-sold{float:left;margin-left:8px;font-size:11px;color:var(--xn-sub);padding:3px 8px;border-radius:999px;background:var(--xn-card-soft);display:inline-block;line-height:1.4;white-space:nowrap;}
.xn-mall-good .g-buy{float:right;background:var(--xn-primary);color:#fff !important;font-size:12px;font-weight:500;padding:4px 14px;border-radius:6px;text-decoration:none;line-height:1.6;display:inline-block;transition:background .15s;}
.xn-mall-good .g-buy:hover{background:var(--xn-primary-dark);}

.xn-mall-empty{background:var(--xn-card);border:1px solid var(--xn-border);border-radius:10px;padding:40px;text-align:center;color:var(--xn-sub);font-size:14px;box-shadow:var(--xn-shadow);}

/* ===== 悬浮工具条 + 暗色切换 ===== */
.xn-mall-float{position:fixed;right:18px;top:40%;display:flex;flex-direction:column;gap:10px;z-index:99;}
.xn-mall-float a{width:42px;height:42px;background:var(--xn-card);border:1px solid var(--xn-border);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:var(--xn-shadow);font-size:18px;text-decoration:none;color:var(--xn-primary);transition:background .15s,color .15s,transform .15s;}
.xn-mall-float a:hover{background:var(--xn-primary);color:#fff;transform:translateY(-1px);}

/* 提示条 */
.xn-mall-msg{background:var(--xn-primary-soft);color:var(--xn-primary-dark);border-radius:10px;padding:10px 16px;margin-bottom:16px;font-size:14px;}

/* ===== 响应式 ===== */
@media(max-width:1200px){.xn-mall-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.xn-mall-right{display:none;}.xn-mall-top{grid-template-columns:228px minmax(0,1fr);}}
@media(max-width:900px){.xn-mall-side{display:none;}.xn-mall-top{grid-template-columns:minmax(0,1fr);}.xn-mall-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.xn-mall-banner{padding:24px;}.xn-mall-banner .b-title{font-size:24px;}.xn-mall-banner .b-img{position:static;transform:none;max-width:45%;margin-top:16px;}}
@media(max-width:600px){.xn-mall-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.xn-mall-wrap{padding:12px 12px 40px;}.xn-mall-good .g-cover{height:150px !important;min-height:150px !important;max-height:150px !important;}.xn-mall-banner{min-height:220px;padding:20px;}}