/* ==================== 全局重置与基础 ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #f0f2f5;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: color .2s; }
a:hover { color: #40a9ff; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: inherit; outline: none; border: none; }

/* ==================== 网站顶部品牌导航栏（整站最顶端，蓝色商务配色，宽度拉通） ==================== */
.site-header {
    width: 100%;
    background: linear-gradient(135deg, #0c1e3e 0%, #1a3a6e 55%, #1890ff 100%);
    box-shadow: 0 2px 12px rgba(12,30,62,.25);
}
.site-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
}
.site-header .site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.site-header .site-brand .brand-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    white-space: nowrap;
}
.site-header .nav-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: ;
}
.site-header .nav-links a {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all .2s;
}
.site-header .nav-links a:hover {
    color: #fff;
    background: rgba(255,255,255,.16);
}
.site-header .nav-links a.active {
    color: #1a3a6e;
    background: #fff;
    font-weight: 600;
}

/* ==================== Banner区域 300px（内容区内） ==================== */
.banner {
    height: 300px;
    background: linear-gradient(135deg, #0c1e3e 0%, #1a3a6e 25%, #1c3faa 55%, #1890ff 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(12,30,62,.25);
}
.banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(12,30,62,.9), transparent);
}
.banner .banner-content {
    text-align: center;
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 20px;
}
.banner .banner-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
/* Banner 标题前图标：高度与标题文字一致、垂直居中 */
.banner .banner-title i {
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.125em;
}
.banner .banner-subtitle {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;
    opacity: .9;
    margin-bottom: 20px;
}
.banner .banner-tags {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.banner .banner-tag {
    padding: 8px 24px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    font-size: 14px;
    backdrop-filter: blur(10px);
}
.banner .banner-tag:hover {
    background: rgba(255,255,255,.2);
}

/* ==================== 主体布局 ==================== */
.main-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    min-height: calc(100vh - 32px);
}
/* 顶部品牌栏下方的主体行：左侧栏 + 右侧内容 */
.main-body {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex: 1 1 auto;
}

/* ==================== 侧边栏 - 蓝色商务扁平化 ==================== */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #0c1e3e, #1a3a6e);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}
.sidebar-section {
    border-bottom: 1px solid #f0f0f0;
}
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section-title {
    padding: 12px 20px;
    font-size: 13px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.sidebar-section-title:hover { color: #1890ff; }
.sidebar-section-title .arrow {
    transition: transform .2s;
    font-size: 12px;
}
.sidebar-section.collapsed .arrow { transform: rotate(-90deg); }
.sidebar-section.collapsed .sidebar-section-body { display: none; }
.sidebar-section-body { padding: 4px 0 8px; }

/* 产品类型导航 */
.type-nav-item {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.type-nav-item:hover {
    background: #f0f7ff;
    color: #1890ff;
    border-left-color: #1890ff;
}
.type-nav-item.active {
    background: #e6f7ff;
    color: #1890ff;
    border-left-color: #1890ff;
    font-weight: 600;
}
.type-nav-item .type-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* 省份树 */
.province-tree-item {
    padding: 8px 20px 8px 28px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .15s;
}
.province-tree-item:hover { background: #f0f7ff; color: #1890ff; }
.province-tree-item.active { color: #1890ff; font-weight: 600; }
.province-tree-item .region-name { display: flex; align-items: center; gap: 6px; }
.province-tree-item .pinyin-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: #e6f7ff;
    color: #1890ff;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    font-family: "Courier New", monospace;
    flex-shrink: 0;
}
.province-tree-item.active .pinyin-letter { background: #1890ff; color: #fff; }
.province-tree-item .city-count {
    font-size: 11px;
    color: #bbb;
    background: #f5f5f5;
    padding: 1px 6px;
    border-radius: 10px;
}
.city-sublist {
    padding: 2px 0 4px;
    display: none;
}
.city-sublist.show { display: block; }
.city-sublist-item {
    padding: 6px 20px 6px 44px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.city-sublist-item:hover { color: #1890ff; }
.city-sublist-item.active { color: #1890ff; font-weight: 600; }
.city-sublist-item .plate-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: #f0f0f0;
    color: #999;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    font-family: "Courier New", monospace;
    flex-shrink: 0;
}
.city-sublist-item:hover .plate-letter { background: #e6f7ff; color: #1890ff; }
.city-sublist-item.active .plate-letter { background: #1890ff; color: #fff; }

/* ==================== 微信二维码区域 ==================== */
.sidebar-wechat {
    padding: 20px 16px;
    text-align: center;
    background: linear-gradient(180deg, #f0f7ff 0%, #fafcff 100%);
    border-top: 1px solid #e8f0fe;
}
.sidebar-wechat .wechat-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a3a6e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-wechat .wechat-title i { font-size: 16px; color: #07c160; }
.sidebar-wechat .wechat-qr-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto 10px;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(24,144,255,.15);
    overflow: hidden;
    position: relative;
}
.sidebar-wechat .wechat-qr-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}
.sidebar-wechat .wechat-qr-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.sidebar-wechat .wechat-qr-placeholder i {
    font-size: 48px;
    color: #07c160;
}
.sidebar-wechat .wechat-qr-placeholder span {
    font-size: 11px;
    color: #bbb;
}
.sidebar-wechat .wechat-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}
.sidebar-wechat .wechat-desc strong { color: #1890ff; }

/* ==================== QQ联系方式区域 ==================== */
.sidebar-qq {
    padding: 16px 16px 14px;
    text-align: center;
    background: linear-gradient(180deg, #f0f9ff 0%, #fafcff 100%);
    margin-top: auto;
}
.sidebar-qq .qq-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a3a6e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-qq .qq-title i { font-size: 16px; color: #12b7f5; }
.sidebar-qq .qq-number {
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    color: #12b7f5;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 6px 16px;
    border: 1px solid #b3e6fb;
    border-radius: 8px;
    background: #fff;
    transition: all .2s;
    cursor: pointer;
}
.sidebar-qq .qq-number:hover {
    background: #12b7f5;
    color: #fff;
    border-color: #12b7f5;
    box-shadow: 0 2px 10px rgba(18,183,245,.3);
}
.sidebar-qq .qq-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    margin-top: 8px;
}

/* ==================== 地域筛选条（内容区内） ==================== */
.region-filter {
    background: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.region-filter .filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}
.region-filter .filter-row + .filter-row {
    border-top: 1px solid #f5f5f5;
    margin-top: 4px;
    padding-top: 8px;
}
.region-filter .filter-label {
    font-size: 13px;
    color: #999;
    font-weight: 600;
    white-space: nowrap;
    min-width: 56px;
    padding-top: 4px;
    flex-shrink: 0;
}
.region-filter .filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.region-filter .region-chip {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid #e8e8e8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fafafa;
    white-space: nowrap;
}
.region-filter .region-chip:hover {
    color: #1890ff;
    border-color: #91d5ff;
    background: #f0f7ff;
}
.region-filter .region-chip.active {
    background: #1890ff;
    color: #fff;
    border-color: #1890ff;
    font-weight: 600;
}
.region-filter .region-chip .chip-letter {
    font-size: 10px;
    font-weight: 700;
    opacity: .65;
    font-family: "Courier New", monospace;
}
.region-filter .region-chip.active .chip-letter {
    opacity: 1;
    color: rgba(255,255,255,.8);
}
.region-filter .region-chip .chip-count {
    color: #aaa;
    font-size: 11px;
    margin-left: 2px;
    font-weight: 400;
}
.region-filter .region-chip.active .chip-count {
    color: rgba(255,255,255,.85);
}
.region-filter .city-row {
    display: flex;
}
.region-filter .city-row.show {
    display: flex;
}

/* ==================== 主内容区 ==================== */
.content-area {
    flex: 1;
    min-width: 0;
}

/* 筛选栏 */
.filter-bar {
    background: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-bar .search-box {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.filter-bar .search-box input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.filter-bar .search-box input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 3px rgba(24,144,255,.1);
}
.filter-bar .search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 16px;
}
.filter-bar .filter-select {
    height: 40px;
    padding: 0 30px 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}
.filter-bar .btn-search {
    height: 40px;
    padding: 0 28px;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(24,144,255,.3);
}
.filter-bar .btn-search:hover {
    box-shadow: 0 4px 12px rgba(24,144,255,.4);
    transform: translateY(-1px);
}
.filter-bar .breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
    width: 100%;
}
.filter-bar .breadcrumb .crumb-active { color: #1890ff; font-weight: 600; }

/* ==================== 产品卡片（新版竖排图标布局） ==================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-color: rgba(24,144,255,.25);
}
.product-card-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}
.product-card-header .product-name {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a3a6e;
    line-height: 1.35;
    word-break: break-all;
    display: flex;
    align-items: center;
    min-height: 48px; /* 名称区域高度约为单行文字的2倍 */
}
/* 头部右侧：国旗在上，渠道简称在下 */
.product-card-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}
/* 地区 + 分类标签行 */
.product-card-sub {
    padding: 10px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-bottom: 1px solid #f5f5f5;
    background: #fafcff;
}
.product-card-sub .pc-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
/* 渠道简称 + 产品分类 分组，两者固定间隔 8px */
.product-card-sub .pc-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pc-flag {
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.pc-flag .flag-img {
    font-size: 18px; /* 与产品名称字号一致 */
    width: calc(1.35em * 20 / 13); /* 宽度按国旗 20:13 比例随高度联动 */
    height: 1.35em; /* = 产品名称行高 (18px × 1.35)，两者高度一致 */
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    display: block;
}
.pc-flag .flag-fallback {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.product-card-sub .product-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-card-sub .product-loc i {
    color: #1890ff;
    font-size: 14px;
}
.product-card-sub .product-type-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border-width: 1px;
    border-style: solid;
}
.badge-cloud { background: #e6f7ff; color: #1890ff; border-color: #91d5ff; }
.badge-vps { background: #fff7e6; color: #fa8c16; border-color: #ffd591; }
.badge-gjb { background: #f6ffed; color: #52c41a; border-color: #b7eb8f; }
.badge-srv { background: #fff1f0; color: #f5222d; border-color: #ffa39e; }
.badge-gpu { background: #f9f0ff; color: #722ed1; border-color: #d3adf7; }
.badge-sgs { background: #fffbe6; color: #faad14; border-color: #ffe58f; }
/* 渠道简称 badge：与分类 badge 区分，用品牌橙紫色；显示在次级行分类徽标前 */
.product-channel-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #d6dcff;
}

.product-card-body {
    padding: 8px 18px;
    flex: 1;
}
.product-config-list {
    display: flex;
    flex-direction: column;
}
.config-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.config-row:last-child {
    border-bottom: none;
}
.config-row i {
    font-size: 15px;
    color: #1890ff;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.config-row .config-label {
    color: #999;
    white-space: nowrap;
    min-width: 42px;
    flex-shrink: 0;
}
.config-row .config-value {
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.product-card-footer {
    padding: 14px 18px 14px;
    border-top: 1px solid #f5f5f5;
    background: #fafcff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 价格卡片式选择 */
.price-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.price-card {
    flex: 1;
    min-width: 64px;
    padding: 8px 6px;
    border: 1.5px solid #e3e8ef;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
}
.price-card:hover {
    border-color: rgba(24,144,255,.5);
}
.price-card.active {
    border-color: #1890ff;
    background: #eaf4ff;
    box-shadow: 0 2px 8px rgba(24,144,255,.18);
}
.price-card .pc-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}
.price-card .pc-value {
    font-size: 17px;
    color: #333;
    font-weight: 800;
    line-height: 1.1;
}
.price-card.active .pc-label,
.price-card.active .pc-value {
    color: #1890ff;
}
.btn-buy {
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(24,144,255,.3);
}
.btn-buy:hover {
    box-shadow: 0 4px 12px rgba(24,144,255,.4);
    transform: translateY(-1px);
}

/* ==================== 分页 ==================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding-bottom: 20px;
}
.pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: all .2s;
}
.pagination button:hover:not(:disabled) {
    border-color: #1890ff;
    color: #1890ff;
}
.pagination button.active {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
}
.pagination button:disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* ==================== 空状态 ==================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #bbb;
}
.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: .3;
}
.empty-state .empty-text { font-size: 16px; }

/* ==================== 加载状态 ==================== */
.loading-overlay {
    text-align: center;
    padding: 40px;
    color: #999;
}
.loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #1890ff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== 底部 - 蓝色商务4列 ==================== */
.footer { background: #0d47a1; color: rgba(255,255,255,.75); }
.footer-main { max-width: 1200px; margin: 0 auto; padding: 50px 20px 40px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .footer-logo .brand-name { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.footer-brand .footer-desc { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.65); }
.footer-brand .footer-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer-brand .footer-contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
.footer-brand .footer-contact-item i { font-size: 15px; color: #40a9ff; }
.footer-brand .footer-contact-item a { color: rgba(255,255,255,.85); }
.footer-brand .footer-contact-item a:hover { color: #fff; }
.footer-column h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 18px; letter-spacing: 1px; }
.footer-column ul { display: flex; flex-direction: column; gap: 12px; }
.footer-column ul li a { font-size: 13px; color: rgba(255,255,255,.65); transition: color .2s; }
.footer-column ul li a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-copyright { max-width: 1200px; margin: 0 auto; padding: 20px; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }

/* 微信客服 / QQ客服 联系列 */
.footer-contact-col .footer-qr {
    width: 112px; height: 112px;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.footer-contact-col .footer-qr img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.footer-contact-col .footer-account {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,.85);
    margin-bottom: 8px;
}
.footer-contact-col .footer-account i { font-size: 16px; }
.footer-contact-col .footer-account i.bi-wechat { color: #07c160; }
.footer-contact-col .footer-account i.bi-qq { color: #12b7f5; }
.footer-contact-col .footer-account .wx-id,
.footer-contact-col .footer-account span { font-weight: 700; letter-spacing: .5px; }
.footer-contact-col .footer-tip {
    font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5;
}
.footer-contact-col .footer-qq-link {
    display: inline-block; margin-bottom: 12px; cursor: pointer;
}
.footer-contact-col .footer-qq-link img {
    width: 112px; height: 112px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
}
.footer-contact-col .footer-qq-link:hover img {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .banner { height: 240px; }
    .banner .banner-title { font-size: 28px; }
}
@media (max-width: 768px) {
    .site-header-inner { flex-wrap: wrap; gap: 12px; padding: 0 12px; }
    .main-wrapper { padding: 12px; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 36px 20px; }
    .footer-brand { grid-column: 1 / -1; }
    .banner { height: 200px; border-radius: 8px; }
    .banner .banner-title { font-size: 22px; letter-spacing: 1px; }
    .banner .banner-subtitle { font-size: 12px; }
    .banner .banner-tag { font-size: 12px; padding: 4px 12px; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card-header .product-name { font-size: 15px; }
    .product-card-header .pc-flag .flag-img { font-size: 15px; } /* 同步缩小，保持与名称高度一致 */
    .product-card-footer { padding: 10px 14px 12px; }
    .price-card .pc-value { font-size: 15px; }
    .btn-buy { height: 36px; font-size: 13px; }
    .region-filter .filter-chips { gap: 4px; }
    .region-filter .region-chip { font-size: 12px; padding: 3px 8px; }
}

/* ==================== 滚动条美化 ==================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #c8d4e6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1890ff; }

/* ==================== Bootstrap Icons 适配 ==================== */
.banner-tag i { margin-right: 6px; vertical-align: -1px; }
.contact-info span i { margin-right: 4px; }
.sidebar-header i { margin-right: 6px; }
.sidebar-section-title .arrow i { font-size: 12px; }
.type-nav-item .type-icon i { font-size: 16px; }
.search-box .search-icon i { font-size: 16px; }
.empty-state .empty-icon i { font-size: 64px; }
.logo-icon i { font-size: 20px; }
.crumb-sep { display: inline-flex; align-items: center; }
.crumb-sep i { font-size: 12px; }
.pagination button i { font-size: 12px; }
.config-row i { font-size: 15px; }

/* ==================== 全局动态展示效果（高级感） ==================== */

/* 1. Banner 动态渐变 + 光晕 */
.banner {
    background: linear-gradient(120deg, #0c1e3e 0%, #16357a 22%, #1c3faa 48%, #1890ff 72%, #36cfc9 100%);
    background-size: 280% 280%;
    animation: bannerShift 16s ease infinite;
}
@keyframes bannerShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 漂浮光晕（由 JS 注入 .banner-orb 节点） */
.banner .banner-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
    opacity: .55;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.banner .banner-orb.o1 {
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(54,207,201,.85), transparent 70%);
    top: -60px; left: 8%;
    animation: orbFloat1 13s ease-in-out infinite;
}
.banner .banner-orb.o2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(64,169,255,.8), transparent 70%);
    bottom: -100px; right: 6%;
    animation: orbFloat2 17s ease-in-out infinite;
}
.banner .banner-orb.o3 {
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
    top: 30%; left: 52%;
    animation: orbFloat3 11s ease-in-out infinite;
}
@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(40px,30px) scale(1.12); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-50px,-26px) scale(1.08); }
}
@keyframes orbFloat3 {
    0%,100% { transform: translate(0,0) scale(1); opacity:.5; }
    50%     { transform: translate(-30px,24px) scale(1.2); opacity:.75; }
}

/* Banner 文字入场 */
.banner .banner-title { animation: fadeUp .9s .1s both; }
.banner .banner-subtitle { animation: fadeUp .9s .25s both; }
.banner .banner-tag { animation: fadeUp .9s both; }
.banner .banner-tag:nth-child(1) { animation-delay: .35s; }
.banner .banner-tag:nth-child(2) { animation-delay: .45s; }
.banner .banner-tag:nth-child(3) { animation-delay: .55s; }
.banner .banner-tag:nth-child(4) { animation-delay: .65s; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 2. 产品卡片错峰入场 */
.product-card {
    animation: cardIn .55s cubic-bezier(.21,.61,.35,1) backwards;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(12,30,62,.18);
    border-color: rgba(24,144,255,.35);
}

/* 3. 选中价格卡片脉冲微光（突出推荐周期） */
.price-card.active {
    animation: pricePulse 2.8s ease-in-out infinite;
}
@keyframes pricePulse {
    0%,100% { box-shadow: 0 2px 8px rgba(24,144,255,.18); }
    50%     { box-shadow: 0 4px 18px rgba(24,144,255,.42); }
}

/* 4. 侧边栏导航悬停流光 */
.type-nav-item::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1890ff, #36cfc9);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.type-nav-item { position: relative; overflow: hidden; }
.type-nav-item:hover::after,
.type-nav-item.active::after { transform: scaleY(1); }

/* 5. 地域筛选卡片入场 */
.region-filter, .filter-bar { animation: fadeUp .7s both; }
.region-filter { animation-delay: .05s; }
.filter-bar { animation-delay: .15s; }

/* 6. 回到顶部悬浮按钮（由 JS 注入） */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(24,144,255,.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition: opacity .3s, transform .3s, visibility .3s, box-shadow .2s;
    z-index: 1200;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    box-shadow: 0 10px 28px rgba(24,144,255,.6);
    transform: translateY(-3px) scale(1.05);
}
.back-to-top::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(24,144,255,.35);
    animation: ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse {
    0%   { transform: scale(.85); opacity: .8; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* 7. 无障碍：尊重减弱动态偏好 */
@media (prefers-reduced-motion: reduce) {
    .banner, .banner .banner-orb, .banner .banner-title, .banner .banner-subtitle,
    .banner .banner-tag, .product-card, .region-filter, .filter-bar,
    .price-card.active, .back-to-top::after {
        animation: none !important;
    }
    .product-card { opacity: 1; transform: none; }
}