/* ============================================================
   ayiauto.com 工业品商城 前台样式
   主色：工业红 #E60012 / 深灰 #222 / 浅灰 #f5f6f8
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; background: #f5f6f8; color: #333; font-size: 14px; }
a { color: #333; text-decoration: none; }
a:hover { color: #1e56a0; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
.container { width: 1200px; margin: 0 auto; }
.c-red { color: #e60012 !important; }
.c-blue { color: #2563eb !important; }
.c-green { color: #16a34a !important; }
.c-orange { color: #ea580c !important; }
.c-purple { color: #7c3aed !important; }
.c-gray { color: #9ca3af !important; }

/* ---------- 顶栏 ---------- */
.topbar { background: #222; color: #ccc; font-size: 12px; }
.topbar-inner { display: flex; justify-content: space-between; height: 32px; line-height: 32px; }
.topbar a { color: #ccc; }
.topbar a:hover { color: #fff; }
.topbar .sep { margin: 0 8px; color: #555; }

/* ---------- 头部 ---------- */
.header { background: #fff; border-bottom: 2px solid #1e56a0; }
.header-inner { display: flex; align-items: center; padding: 16px 0; gap: 30px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 46px; height: 46px; background: #1e56a0; color: #fff; font-size: 28px; font-weight: 800; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-text strong { font-size: 24px; color: #1e56a0; display: block; line-height: 1.1; }
.logo-text small { color: #666; letter-spacing: 2px; }
.search-box { flex: 1; display: flex; max-width: 560px; }
.search-box input { flex: 1; height: 42px; border: 2px solid #1e56a0; border-right: none; border-radius: 4px 0 0 4px; padding: 0 14px; font-size: 14px; outline: none; }
.search-box button { width: 90px; background: #1e56a0; color: #fff; border: none; border-radius: 0 4px 4px 0; font-size: 15px; }
.cart-link { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; position: relative; }
.cart-icon { font-size: 22px; }
.cart-num { background: #1e56a0; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; position: absolute; top: -8px; left: 14px; }

/* ---------- 导航 ---------- */
.nav { background: #fff; border-bottom: 1px solid #eee; }
.nav-inner { display: flex; align-items: stretch; height: 44px; }
.cat-menu { width: 240px; position: relative; }
.cat-title { background: #1e56a0; color: #fff; height: 44px; line-height: 44px; text-align: center; font-weight: 700; cursor: pointer; }
.cat-dropdown { display: none; position: absolute; top: 44px; left: 0; width: 240px; background: #fff; border: 1px solid #eee; border-top: none; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cat-menu:hover .cat-dropdown { display: block; }
.cat-item { position: relative; }
.cat-item > a { display: block; padding: 9px 16px; font-size: 14px; }
.cat-item:hover > a { background: #1e56a0; color: #fff; }
.cat-sub { display: none; position: absolute; left: 240px; top: 0; width: 320px; background: #fff; border: 1px solid #eee; padding: 16px; z-index: 101; box-shadow: 4px 4px 16px rgba(0,0,0,.1); }
.cat-sub a { display: inline-block; margin: 0 14px 10px 0; color: #555; }
.cat-sub a:hover { color: #1e56a0; }
.cat-item:hover .cat-sub { display: block; }
.nav-links { flex: 1; display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 0 18px; line-height: 44px; font-size: 15px; font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: #1e56a0; border-bottom: 2px solid #1e56a0; }

/* ---------- 主内容 ---------- */
.main { padding: 20px 0 40px; min-height: 480px; }
.alert { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.crumbs { margin-bottom: 16px; color: #888; font-size: 13px; }
.crumbs a { color: #555; }
.crumbs a:hover { color: #1e56a0; }
.crumbs span { margin: 0 8px; }

/* ---------- 轮播 ---------- */
.banner { position: relative; height: 320px; border-radius: 8px; overflow: hidden; margin-bottom: 20px; background: #1f2937; }
.banner-slide { display: none; position: absolute; inset: 0; }
.banner-slide.active { display: block; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.banner-text { position: absolute; left: 60px; bottom: 40px; color: #fff; font-size: 26px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.banner-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.banner-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.banner-dots span.active { background: #1e56a0; }

/* ---------- 快捷入口 ---------- */
.quick-entry { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.qe-item { background: #fff; border-radius: 8px; padding: 18px 16px; text-align: center; border: 1px solid #eee; transition: transform .15s, box-shadow .15s; }
.qe-item:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.qe-item b { display: block; font-size: 16px; margin-bottom: 4px; }
.qe-item span { font-size: 12px; color: #888; }
.qe-red b { color: #1e56a0; } .qe-blue b { color: #2563eb; } .qe-green b { color: #16a34a; }
.qe-orange b { color: #ea580c; } .qe-purple b { color: #7c3aed; } .qe-cyan b { color: #0891b2; }

/* ---------- 面板 ---------- */
.panel { background: #fff; border-radius: 8px; border: 1px solid #eee; margin-bottom: 20px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; }
.panel-head h3 { font-size: 17px; }
.panel-head a { font-size: 13px; color: #888; }
.panel-body { padding: 18px; }

/* ---------- 品牌 ---------- */
.brand-row { display: flex; flex-wrap: wrap; padding: 14px 10px; }
.brand-item { width: 16.66%; text-align: center; padding: 10px 6px; font-weight: 600; color: #444; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-item:hover { background: #eaf1fa; color: #1e56a0; }
.brand-logo { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-name { font-size: 13px; }

/* ---------- 商品卡片 ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; }
.p-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.p-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.p-img { height: 180px; display: flex; align-items: center; justify-content: center; background: #fafafa; }
.p-img img { max-height: 160px; max-width: 90%; object-fit: contain; }
.p-name { padding: 8px 12px; font-size: 12px; line-height: 1.5; height: 52px; box-sizing: border-box; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.p-price { padding: 2px 12px; color: #e60012; font-weight: 700; }
.p-price em { font-style: normal; font-size: 12px; }
.p-price b, .p-price { font-size: 20px; }
.p-price small { color: #999; font-weight: 400; font-size: 12px; margin-left: 4px; }
.p-meta { display: flex; justify-content: space-between; padding: 6px 12px 12px; font-size: 12px; color: #999; }

/* ---------- 目录 ---------- */
.catalog-layout { display: flex; gap: 16px; align-items: flex-start; }
.filter-side { width: 220px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 6px 14px 14px; flex-shrink: 0; }
.filter-block { padding: 12px 0; border-bottom: 1px dashed #eee; }
.filter-block:last-child { border-bottom: none; }
.filter-block h4 { font-size: 14px; margin-bottom: 10px; color: #222; }
.filter-cats > li > a { display: block; padding: 6px 0; font-weight: 600; }
.filter-cats > li > a.on { color: #1e56a0; }
.filter-cats ul { padding-left: 14px; }
.filter-cats ul a { display: block; padding: 4px 0; color: #666; font-size: 13px; }
.filter-cats ul a.on { color: #1e56a0; }
.filter-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; color: #555; cursor: pointer; }
.filter-item input { accent-color: #1e56a0; }
.catalog-main { flex: 1; min-width: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 0 0 16px; }
.list-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
.sort-tabs a { display: inline-block; padding: 4px 14px; border-radius: 14px; font-size: 14px; color: #555; }
.sort-tabs a.on { background: #1e56a0; color: #fff; }
.list-count { color: #999; font-size: 13px; }
.empty { text-align: center; padding: 80px 20px; color: #999; }
.empty .btn { margin-top: 16px; }
.pager { text-align: center; padding: 16px; }
.btn-load-more { display: inline-block; padding: 8px 40px; border: 1px solid #ddd; border-radius: 18px; color: #555; }
.btn-load-more:hover { border-color: #1e56a0; color: #1e56a0; }
.pager-end { color: #bbb; }
.pager .pg { display: inline-block; padding: 5px 12px; margin: 0 3px; border: 1px solid #ddd; border-radius: 4px; }
.pager .pg.on { background: #1e56a0; border-color: #1e56a0; color: #fff; }

/* ---------- 详情页 ---------- */
.detail-layout { display: flex; gap: 24px; align-items: flex-start; }
.detail-gallery { width: 420px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 14px; flex-shrink: 0; }
.g-main { height: 380px; display: flex; align-items: center; justify-content: center; background: #fafafa; border-radius: 6px; }
.g-main img { max-height: 360px; object-fit: contain; }
.g-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.g-thumbs img { width: 60px; height: 60px; object-fit: contain; border: 2px solid #eee; border-radius: 4px; cursor: pointer; }
.g-thumbs img:hover { border-color: #1e56a0; }
.detail-info { flex: 1; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 24px; }
.d-title { font-size: 20px; line-height: 1.5; }
.d-sub { color: #999; font-size: 13px; margin: 8px 0 16px; }
.d-price-box { background: #fff8f8; border: 1px solid #ffd6d6; border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; }
.d-price-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.d-price-label { color: #999; width: 52px; flex-shrink: 0; }
.d-price em { font-style: normal; font-size: 14px; }
.d-price b { font-size: 30px; color: #1e56a0; }
.d-price-market { color: #aaa; text-decoration: line-through; font-size: 14px; }
.tier-list { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.tier-list span { background: #fff; border: 1px solid #1e56a0; color: #1e56a0; border-radius: 4px; padding: 3px 10px; font-size: 12px; }
.d-spec { display: flex; align-items: flex-start; margin-bottom: 14px; }
.d-spec-label { width: 52px; color: #999; padding-top: 8px; flex-shrink: 0; }
.d-spec-values { display: flex; gap: 10px; flex-wrap: wrap; }
.spec-btn { padding: 6px 16px; border: 1px solid #ddd; background: #fff; border-radius: 4px; font-size: 13px; }
.spec-btn.on { border-color: #1e56a0; color: #1e56a0; background: #fff5f5; }
.spec-btn.disabled { opacity: .4; cursor: not-allowed; }
.d-qty { display: flex; align-items: center; margin-bottom: 18px; }
.qty-stepper { display: inline-flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.qty-stepper button { width: 34px; height: 34px; border: none; background: #f7f7f7; font-size: 16px; }
.qty-stepper input { width: 52px; height: 34px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; text-align: center; outline: none; }
.qty-tip { margin-left: 14px; color: #999; font-size: 12px; }
.d-actions { display: flex; gap: 14px; margin-bottom: 20px; }
.btn { display: inline-block; padding: 9px 26px; border-radius: 4px; font-size: 14px; border: 1px solid transparent; text-align: center; }
.btn-cart { background: #fff; border-color: #1e56a0; color: #1e56a0; font-size: 15px; padding: 11px 30px; }
.btn-cart:hover { background: #fff5f5; }
.btn-buy { background: #1e56a0; color: #fff; font-size: 15px; padding: 11px 30px; }
.btn-buy:hover { background: #143f7c; }
.btn-primary { background: #1e56a0; color: #fff; }
.btn-primary:hover { background: #143f7c; color: #fff; }
.btn-default { background: #fff; border-color: #ddd; color: #555; }
.btn-default:hover { border-color: #1e56a0; color: #1e56a0; }
.btn-block { width: 100%; }
.btn-lg { padding: 13px 48px; font-size: 16px; }
.btn-sm { padding: 5px 14px; font-size: 13px; }
.d-attrs { border-top: 1px dashed #eee; padding-top: 14px; }
.d-attrs h4 { margin-bottom: 8px; }
.d-attrs table { width: 100%; font-size: 13px; border-collapse: collapse; }
.d-attrs td { padding: 6px 10px; border: 1px solid #f0f0f0; }
.d-attrs td:first-child { background: #fafafa; width: 140px; color: #666; }

/* ---------- 购物车 ---------- */
.cart-table { background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 16px; }
.cart-head, .cart-row { display: flex; align-items: center; padding: 0 16px; }
.cart-head { height: 46px; background: #fafafa; font-weight: 600; color: #555; border-bottom: 1px solid #eee; }
.cart-row { min-height: 96px; border-bottom: 1px solid #f5f5f5; }
.cart-row:last-child { border-bottom: none; }
.col-check { width: 50px; flex-shrink: 0; }
.col-info { flex: 1; min-width: 0; }
.col-price { width: 110px; text-align: right; color: #666; }
.col-qty { width: 140px; text-align: center; }
.col-total { width: 130px; text-align: right; color: #1e56a0; font-weight: 700; }
.col-op { width: 70px; text-align: center; }
.ci-name { font-size: 14px; }
.ci-spec { color: #999; font-size: 12px; margin-top: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-left: 8px; }
.badge-gray { background: #f3f4f6; color: #666; }
.badge-red { background: #fef2f2; color: #dc2626; }
.qty-stepper.small button { width: 28px; height: 30px; }
.qty-stepper.small input { width: 44px; height: 30px; }
.link { border: none; background: none; color: #2563eb; font-size: 13px; }
.link:hover { text-decoration: underline; }
.link-danger { color: #dc2626; }
.cart-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 14px 20px; }
.cb-right { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sum-amount { font-size: 16px; color: #1e56a0; }
.sum-amount b { font-size: 26px; }

/* ---------- 结算 ---------- */
.addr-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.addr-item { border: 2px solid #eee; border-radius: 6px; padding: 12px 14px; cursor: pointer; position: relative; line-height: 1.8; }
.addr-item.on { border-color: #1e56a0; background: #fff8f8; }
.addr-item input { margin-right: 6px; accent-color: #1e56a0; }
.addr-item em { position: absolute; right: 10px; top: 8px; background: #1e56a0; color: #fff; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.addr-item span { color: #777; font-size: 13px; }
.addr-form { padding: 0 16px 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.addr-form input { height: 38px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px; width: 180px; }
.addr-form .w-full { flex: 1; min-width: 240px; }
.cart-table.compact .cart-head { height: 40px; }
.order-remark { padding: 14px 16px; border-top: 1px solid #f0f0f0; }
.order-remark input { height: 36px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px; }
.w-60 { width: 60%; }
.w-full { width: 100%; }
.checkout-summary { padding: 18px 24px; text-align: right; }
.cs-line { display: flex; justify-content: flex-end; gap: 40px; padding: 4px 0; font-size: 14px; }
.cs-line.total { font-size: 16px; margin-top: 8px; }
.cs-line.total b { font-size: 24px; }
.checkout-summary .btn { margin-top: 14px; }

/* ---------- 订单 ---------- */
.order-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff8f8; border-bottom: 1px solid #ffd6d6; }
.order-status-bar b { font-size: 18px; color: #1e56a0; }
.order-no { color: #999; font-size: 13px; }
.order-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 18px 20px; border-bottom: 1px solid #f0f0f0; }
.order-info-grid h4 { font-size: 14px; margin-bottom: 8px; color: #555; }
.order-info-grid p { font-size: 13px; color: #666; line-height: 1.7; }
.order-actions { padding: 16px 20px; display: flex; gap: 12px; }
.pay-panel { padding: 40px; text-align: center; }
.pay-head p { margin: 12px 0 24px; color: #666; }
.pay-methods { display: flex; justify-content: center; gap: 16px; margin-bottom: 28px; }
.pay-method { display: flex; align-items: center; gap: 8px; border: 2px solid #eee; border-radius: 8px; padding: 16px 26px; cursor: pointer; font-size: 15px; }
.pay-method.on { border-color: #1e56a0; background: #fff8f8; }
.pm-ico { font-size: 22px; }
.pay-tip { color: #aaa; font-size: 12px; margin-top: 14px; }
.success-panel { padding: 60px 40px; text-align: center; }
.success-ico { width: 72px; height: 72px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.success-panel h2 { margin-bottom: 12px; }
.success-panel p { color: #666; margin: 6px 0; }
.success-actions { margin-top: 24px; display: flex; gap: 14px; justify-content: center; }

/* ---------- 个人中心 ---------- */
.account-layout { display: flex; gap: 16px; align-items: flex-start; }
.account-side { width: 210px; background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.account-user { background: #fafafa; padding: 20px; text-align: center; border-bottom: 1px solid #eee; }
.au-avatar { width: 56px; height: 56px; border-radius: 50%; background: #1e56a0; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.account-user b { display: block; }
.account-user span { color: #999; font-size: 12px; }
.account-side ul a { display: block; padding: 11px 20px; color: #555; border-left: 3px solid transparent; }
.account-side ul a.on, .account-side ul a:hover { color: #1e56a0; border-left-color: #1e56a0; background: #fff8f8; }
.account-main { flex: 1; min-width: 0; }
.order-card { background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.order-card-head { display: flex; gap: 24px; padding: 10px 16px; background: #fafafa; font-size: 13px; color: #666; }
.order-card-body { padding: 10px 16px; }
.order-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.order-item img { width: 52px; height: 52px; object-fit: contain; background: #fafafa; border-radius: 4px; }
.oi-info { flex: 1; }
.oi-info span { display: block; font-size: 14px; }
.oi-info small { color: #999; }
.oi-price { color: #1e56a0; font-weight: 600; }
.order-card-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid #f0f0f0; }
.oc-actions { display: flex; gap: 8px; }
.addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.addr-card { border: 1px solid #eee; border-radius: 6px; padding: 12px 14px; line-height: 1.9; }
.addr-card p { color: #777; font-size: 13px; }
.addr-ops { text-align: right; display: flex; gap: 10px; justify-content: flex-end; }
.addr-add { border: 2px dashed #ddd; border-radius: 6px; background: #fafafa; color: #888; font-size: 14px; min-height: 90px; }
.addr-add:hover { border-color: #1e56a0; color: #1e56a0; }
.addr-form-box { padding: 16px 20px; }
.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.form-row label { width: 100px; color: #666; flex-shrink: 0; }
.form-row input[type="text"], .form-row input[type="password"], .form-row input[type="email"] { height: 36px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px; width: 200px; }
.form-row input[type="checkbox"] { accent-color: #1e56a0; }

/* ---------- 登录注册 ---------- */
.auth-body { background: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-box { width: 400px; background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.1); padding: 36px 40px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-brand strong { font-size: 20px; color: #1e56a0; }
.auth-brand small { color: #999; }
.auth-box h1 { font-size: 22px; margin-bottom: 22px; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.auth-field input { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 6px; padding: 0 14px; font-size: 14px; outline: none; }
.auth-field input:focus { border-color: #1e56a0; }
.auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.auth-demo { text-align: center; color: #aaa; font-size: 12px; margin-top: 18px; }

/* ---------- 页脚 ---------- */
.footer { background: #222; color: #aaa; margin-top: 20px; }
.footer-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 0; }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.footer-col a { display: block; color: #aaa; font-size: 13px; padding: 3px 0; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 13px; line-height: 1.8; }
.footer-col p a { display: inline; padding: 0; }
.footer-copy { border-top: 1px solid #333; padding: 14px 0; font-size: 12px; text-align: center; }
.wechat-qr { margin-top: 12px; text-align: left; }
.wechat-qr img { width: 110px; height: 110px; border: 3px solid #fff; border-radius: 6px; }
.wechat-qr span { display: block; color: #bbb; font-size: 12px; margin-top: 6px; }

/* ---------- 悬浮栏（回顶/客服） ---------- */
.float-bar { position: fixed; right: 18px; bottom: 120px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; border: none; background: #1e56a0; color: #fff; box-shadow: 0 4px 14px rgba(230,0,18,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.float-btn:hover { background: #143f7c; }
.fs-ico { font-size: 18px; line-height: 1; }
.fs-text { font-size: 10px; }
.float-btn#btnTop { background: #4b5563; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.float-btn#btnTop:hover { background: #374151; }
.service-pop { position: fixed; right: 86px; bottom: 130px; width: 260px; background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.18); z-index: 501; overflow: hidden; }
.service-pop .sp-head { background: #1e56a0; color: #fff; padding: 10px 14px; font-size: 14px; }
.service-pop .sp-body { padding: 14px; font-size: 13px; color: #444; line-height: 2; }
.service-pop .kb-tip { margin-top: 8px; padding: 8px 10px; background: #f0f9ff; color: #0369a1; border-radius: 6px; font-size: 12px; }

/* ---------- 资讯 ---------- */
.news-layout { display: flex; gap: 16px; align-items: flex-start; }
.news-main { flex: 1; min-width: 0; }
.news-side { width: 260px; flex-shrink: 0; }
.news-tabs { display: flex; gap: 4px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; }
.news-tabs a { padding: 6px 16px; border-radius: 16px; font-size: 14px; color: #555; }
.news-tabs a.on { background: #1e56a0; color: #fff; }
.news-tabs a.sub { color: #888; font-size: 13px; }
.news-side-cats a.sub { padding-left: 24px; font-size: 12px; color: #888; }
.news-list { padding: 6px 16px; }
.news-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f5f5f5; }
.news-item:hover h3 { color: #1e56a0; }
.news-cover { width: 160px; height: 92px; flex-shrink: 0; }
.news-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.news-body { flex: 1; min-width: 0; }
.news-body h3 { font-size: 16px; line-height: 1.5; }
.news-summary { color: #888; font-size: 13px; margin: 6px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-meta { display: flex; gap: 14px; color: #999; font-size: 12px; align-items: center; }
.news-side-cats { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.news-side-cats a { padding: 7px 12px; border-radius: 6px; color: #555; font-size: 13px; }
.news-side-cats a.on, .news-side-cats a:hover { background: #eaf1fa; color: #1e56a0; }
.news-related { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.news-related a { color: #555; font-size: 13px; line-height: 1.5; }
.news-related a:hover { color: #1e56a0; }
.article { padding: 24px 30px; }
.article-title { font-size: 24px; line-height: 1.5; }
.article-meta { color: #999; font-size: 13px; margin: 10px 0 16px; display: flex; gap: 18px; }
.article-cover { margin-bottom: 16px; }
.article-cover img { max-height: 340px; width: 100%; object-fit: cover; border-radius: 8px; }
.article-content { font-size: 15px; line-height: 1.9; color: #333; }
.article-share { margin-top: 24px; padding-top: 14px; border-top: 1px dashed #eee; color: #999; font-size: 13px; }
.article-share a { margin-left: 8px; color: #2563eb; }
.article-share a:hover { text-decoration: underline; }

/* ---------- 后台图库 ---------- */
.img-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 16px; }
.img-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #fafafa; }
.img-card img { width: 100%; height: 110px; object-fit: contain; }
.img-meta { padding: 6px 8px; }
.img-name { display: block; font-size: 12px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-cat { display: inline-block; font-size: 11px; color: #888; background: #f0f0f0; border-radius: 3px; padding: 1px 6px; margin-top: 3px; }
.img-ops { padding: 0 8px 8px; display: flex; gap: 10px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1240px) {
    .container { width: 100%; padding: 0 12px; }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .quick-entry { grid-template-columns: repeat(3, 1fr); }
    .detail-layout { flex-direction: column; }
    .detail-gallery { width: 100%; }
}

/* ---------- 移动端（≤768px） ---------- */
@media (max-width: 768px) {
    .header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
    .logo { width: 100%; justify-content: center; }
    .logo-mark { width: 40px; height: 40px; font-size: 24px; }
    .logo-text strong { font-size: 20px; }
    .search-wrap { order: 3; width: 100%; max-width: 100%; }
    .hot-words { white-space: normal; line-height: 1.8; }
    .cart-link { margin-left: auto; }
    .nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-inner .nav-links { min-width: max-content; }
    .nav-links { flex-wrap: nowrap; white-space: nowrap; min-width: max-content; }
    .nav-links a { padding: 10px 12px; }
    .cat-menu { display: none; } /* 移动端隐藏悬浮分类菜单 */

    .banner { height: 150px; }
    .banner-text h2 { font-size: 18px; }
    .banner-text p { font-size: 12px; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
    .p-card .p-img { height: 130px; }
    .p-card .p-img img { max-height: 115px; }
    .p-name { font-size: 11px; line-height: 1.4; height: 47px; }
    .p-price b { font-size: 16px; }

    .quick-entry { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
    .qe-item { padding: 10px 4px; }
    .qe-ico { font-size: 26px; }

    .catalog-layout { flex-direction: column; }
    .filter-side { width: 100%; order: 2; }
    .catalog-main { order: 1; width: 100%; }
    .filter-side .filter-block { display: none; }
    .filter-side .filter-block:first-child { display: block; }
    .sort-tabs { overflow-x: auto; white-space: nowrap; }

    .detail-layout { flex-direction: column; }
    .detail-gallery { width: 100%; }
    .detail-info { width: 100%; padding: 0; }
    .sku-btn { padding: 8px 12px; font-size: 13px; }

    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
    .cart-table td { text-align: left !important; }

    .checkout-layout { flex-direction: column; }
    .checkout-side { width: 100%; }

    .news-layout { flex-direction: column; }
    .news-side { width: 100%; }
    .news-item { flex-direction: column; }
    .news-cover { width: 100%; height: 150px; }
    .article { padding: 16px; }
    .article-title { font-size: 18px; }

    .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 12px; }
    .wechat-qr img { width: 90px; height: 90px; }

    .float-bar { right: 10px; bottom: 80px; }
    .float-btn { width: 44px; height: 44px; }
    .service-pop { right: 62px; bottom: 90px; width: 230px; }

    .crumbs { font-size: 12px; }
    .panel-head h3 { font-size: 15px; }
    .form-row { flex-wrap: wrap; }
    .form-row label { width: 100%; }
    .w-50, .w-60, .ipt.w-50, .ipt.w-60 { width: 100% !important; }
    .table-responsive { overflow-x: auto; }
}

/* ---------- 小屏手机（≤480px） ---------- */
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .p-name { height: 47px; }
    .quick-entry { grid-template-columns: repeat(3, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .brand-row { }
    .brand-item { width: 33.3%; }
    .news-tabs a { padding: 5px 10px; font-size: 12px; }
    .btn { font-size: 13px; padding: 7px 12px; }
    .banner { height: 130px; }
}