/* ============================================================
   梓翔百货优选商城 - 严选风设计系统 v3
   参考: 网易严选 / 小米有品 / Apple Store
   主色: 深墨灰 #2C3E50  |  辅色: 暖金 #C9A96E  |  底: #FAFAFA
   ============================================================ */

:root {
    --primary: #2C3E50;
    --primary-light: #34495E;
    --primary-dark: #1A2530;
    --gold: #C9A96E;
    --gold-light: #D4B884;
    --gold-dark: #A88B50;
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --text-1: #1A1A1A;
    --text-2: #555;
    --text-3: #888;
    --line: #ECECEC;
    --line-soft: #F5F5F5;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
    --radius: 8px;
    --radius-lg: 12px;
}

body { background:var(--bg); color:var(--text-1); }

/* ========== 顶部信息条:网易严选式细黑 ========== */
.top-info {
    background:#1A1A1A; color:#999;
    border-bottom:1px solid #2A2A2A;
    font-size:12px; padding:8px 0;
}
.top-info .container { display:flex; justify-content:space-between; }
.top-info .stats span { margin-right: 22px; }
.top-info .stats span i { margin-right:5px; color:#666; }
.top-info .stats span span { color:var(--gold-light); font-weight:600; }
.top-info a { color:#999; margin-left:18px; transition:.2s; }
.top-info a i { margin-right:4px; }
.top-info a:hover { color:var(--gold-light); }

/* ========== 头部 ========== */
.header { padding:24px 0 !important; align-items:center; }
.logo-icon {
    width:46px; height:46px; border-radius:10px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(44,62,80,0.25);
}
.logo-text {
    color:var(--primary) !important; font-weight:700; font-size:22px !important;
    letter-spacing:2px; margin-left:12px;
}
.search-box { flex:1; max-width:560px; margin:0 32px; }
.search-box form {
    display:flex; border:2px solid var(--primary) !important;
    border-radius:24px; overflow:hidden; background:#fff;
}
.search-box input {
    flex:1; border:none !important; padding:11px 18px !important; font-size:14px;
    outline:none; background:transparent !important;
}
.search-box button {
    background:var(--primary) !important; color:#fff !important;
    border:none; padding:0 26px !important; font-size:14px;
    cursor:pointer; transition:.2s; font-weight:500;
}
.search-box button:hover { background:var(--primary-dark) !important; }
.hot-search { font-size:11px; color:var(--text-3); padding:8px 0 0 4px; }
.hot-search a { color:var(--text-2); margin-right:14px; transition:.2s; }
.hot-search a:hover { color:var(--gold-dark); }

/* ========== 导航栏:墨灰 + 暖金高亮 ========== */
.navbar {
    background:var(--primary) !important;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
}
.nav-links { padding:0 !important; }
.nav-links li { padding:0 !important; }
.nav-links a {
    color:#fff !important; padding:14px 26px !important;
    font-size:15px; font-weight:500; transition:.2s;
    position:relative; display:inline-block;
}
.nav-links a:hover { background:rgba(201,169,110,0.18) !important; }
.nav-links a.active {
    background:transparent !important;
    color:var(--gold-light) !important;
}
.nav-links a.active::after {
    content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:36px; height:3px; background:var(--gold); border-radius:2px;
}

/* ========== 分类列表:暖金 hover ========== */
.category-box { box-shadow:var(--shadow-sm); border:none !important; border-radius:var(--radius); overflow:hidden; }
.category-title {
    background:var(--primary) !important; color:#fff !important;
    padding:14px 18px !important; font-size:15px;
}
.category-list li {
    padding:11px 18px !important; border-bottom:1px solid var(--line-soft) !important;
    transition:.2s; cursor:pointer;
}
.category-list li:hover {
    background:#FAF7F0 !important; color:var(--gold-dark) !important;
    padding-left:24px !important;
}
.category-list li:hover i { color:var(--gold-dark) !important; }
.category-list li i { color:var(--text-3); width:20px; }

/* ========== 价格统一暖金红 ========== */
.product-price, .price, .seckill-price, .rank-card .price { color:#C0392B !important; font-weight:700 !important; }

/* ========== Section 标题 ========== */
.section-title {
    font-size:20px !important; font-weight:600 !important;
    padding:20px 0 16px !important; border:none !important;
    color:var(--text-1) !important;
    display:flex; align-items:center; justify-content:space-between;
}
.section-title::before {
    content:''; display:inline-block; width:4px; height:18px;
    background:var(--gold) !important; margin-right:10px;
    border-radius:2px;
}
.section-title .sub { font-size:13px; color:var(--text-3); font-weight:normal; margin-left:10px; }
.section-title .more-link {
    font-size:13px; color:var(--text-2); font-weight:normal;
    margin-left:auto; transition:.2s;
}
.section-title .more-link:hover { color:var(--gold-dark); }
.section-title .more-link::before { display:none !important; }

/* ========== 服务承诺 6 宫格 ========== */
.service-promise {
    display:grid; grid-template-columns:repeat(6,1fr); gap:0;
    background:#fff; padding:24px 12px; margin:20px 0;
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.promise-item {
    display:flex; align-items:center; gap:12px;
    padding:8px 16px; border-right:1px solid var(--line-soft);
    transition:.2s;
}
.promise-item:last-child { border-right:none; }
.promise-item:hover { background:var(--bg); }
.promise-item i {
    font-size:28px; color:var(--gold); width:34px; text-align:center;
}
.promise-item h4 { font-size:14px; color:var(--text-1); margin:0; font-weight:600; }
.promise-item span { font-size:11px; color:var(--text-3); margin-top:2px; display:block; }
@media (max-width: 900px) { .service-promise { grid-template-columns:repeat(3,1fr); } .promise-item { border-bottom:1px solid var(--line-soft); } }

/* ========== 限时秒杀:深色调 + 金色倒计时 ========== */
.seckill-section {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:#fff; border-radius:var(--radius); padding:24px 28px; margin:20px 0;
    box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.seckill-section::before {
    content:''; position:absolute; top:-50%; right:-10%;
    width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,169,110,0.15), transparent 70%);
}
.seckill-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; position:relative; }
.seckill-head h2 { color:#fff !important; font-size:22px; margin:0; padding:0 !important; border:none; }
.seckill-head h2::before { display:none !important; }
.seckill-head h2 i { color:var(--gold-light); margin-right:8px; }
.seckill-head h2 .sub { font-size:13px; color:rgba(255,255,255,0.7); font-weight:normal; margin-left:10px; }
.countdown { font-size:18px; font-weight:bold; }
.countdown span {
    display:inline-block; min-width:36px; padding:5px 8px;
    background:rgba(0,0,0,0.4); color:var(--gold-light); border-radius:4px;
    text-align:center; margin:0 2px;
    font-family:'Courier New', monospace; font-weight:700;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
}
.seckill-head .more-link {
    color:rgba(255,255,255,0.85) !important; font-size:13px;
    border:1px solid rgba(255,255,255,0.3); padding:6px 14px; border-radius:14px;
    transition:.2s;
}
.seckill-head .more-link:hover { background:rgba(255,255,255,0.1); }
.seckill-head .more-link::before { display:none !important; }
.seckill-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; position:relative; }
.seckill-card {
    background:#fff; border-radius:var(--radius); overflow:hidden;
    transition:.25s cubic-bezier(.4,0,.2,1); cursor:pointer; color:var(--text-1);
}
.seckill-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.2); }
.seckill-card img { width:100%; aspect-ratio:1; object-fit:cover; background:#f5f5f5; }
.seckill-card .info { padding:10px 12px; }
.seckill-card .title {
    font-size:12px; color:var(--text-1); height:34px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:17px;
}
.seckill-card .price-row { display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.seckill-card .seckill-price { color:#C0392B; font-weight:700; font-size:17px; }
.seckill-card .origin-price { color:var(--text-3); text-decoration:line-through; font-size:11px; }
.seckill-card .progress {
    height:14px; background:#FFF0E5; border-radius:7px; overflow:hidden;
    margin-top:6px; position:relative;
}
.seckill-card .progress-bar {
    height:100%; background:linear-gradient(90deg, #FF6B35, #C0392B);
    border-radius:7px; transition:width .6s;
}
.seckill-card .progress span {
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    font-size:10px; color:#fff; line-height:14px; font-weight:600;
}
@media (max-width: 1100px) { .seckill-grid { grid-template-columns:repeat(3,1fr); } }

/* ========== 热销榜 TOP 10 ========== */
.ranking-section {
    background:#fff; padding:24px 24px 28px; margin:20px 0;
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.ranking-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.rank-card {
    position:relative; background:var(--bg); border-radius:var(--radius);
    overflow:hidden; cursor:pointer; transition:.25s;
}
.rank-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.rank-num {
    position:absolute; top:8px; left:8px; z-index:2;
    width:28px; height:28px; line-height:28px; text-align:center;
    background:rgba(0,0,0,0.55); color:#fff; font-weight:700; font-size:14px;
    border-radius:50%; backdrop-filter:blur(4px);
}
.rank-card.rank-1 .rank-num { background:linear-gradient(135deg, #C9A96E, #A88B50); }
.rank-card.rank-2 .rank-num { background:linear-gradient(135deg, #C0C0C0, #909090); }
.rank-card.rank-3 .rank-num { background:linear-gradient(135deg, #CD7F32, #A86A2A); }
.rank-card img { width:100%; aspect-ratio:1; object-fit:cover; background:#fff; }
.rank-card .info { padding:12px; }
.rank-card .title {
    font-size:13px; color:var(--text-1); height:36px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    line-height:18px; margin-bottom:6px;
}
.rank-card .price { color:#C0392B; font-weight:700; font-size:15px; }
.rank-card .sales { font-size:11px; color:var(--text-3); margin-top:2px; }
@media (max-width: 1100px) { .ranking-grid { grid-template-columns:repeat(3,1fr); } }

/* ========== 品牌专区 ========== */
.brand-zone {
    background:#fff; padding:24px; margin:20px 0;
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.brand-zone .sub { font-size:13px; color:var(--text-3); font-weight:normal; margin-left:8px; }
.brand-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.brand-item {
    display:flex; flex-direction:column; align-items:center;
    padding:18px 10px; background:var(--bg); border-radius:var(--radius);
    transition:.25s; cursor:pointer; text-align:center;
    border:1px solid transparent;
}
.brand-item:hover {
    transform:translateY(-3px); background:#fff;
    border-color:var(--gold-light); box-shadow:0 8px 20px rgba(201,169,110,0.18);
}
.brand-item .brand-logo {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg, #fff, var(--bg));
    border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,0.08);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px; font-size:22px; color:var(--primary); font-weight:700;
    letter-spacing:0;
}
.brand-item:hover .brand-logo { color:var(--gold-dark); border-color:var(--gold-light); }
.brand-item .brand-name { font-size:12px; color:var(--text-2); }
@media (max-width: 1100px) { .brand-grid { grid-template-columns:repeat(4,1fr); } }

/* ========== 商品卡通用增强 ========== */
.product-card { transition:.25s !important; border-radius:var(--radius) !important; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) !important; }

/* ========== 资讯卡片 ========== */
.news-card { transition:.25s !important; }
.news-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ========== 商家卡片 ========== */
.merchant-card { transition:.25s !important; }
.merchant-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* ========== 城市分站 ========== */
.cities-section .sub { font-size:13px; color:var(--text-3); font-weight:normal; margin-left:8px; }

/* ========== 品牌 banner 改深灰金 ========== */
.brand-banner {
    background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color:#fff !important; border-radius:var(--radius);
    padding:36px 40px !important;
    box-shadow:var(--shadow-md);
    position:relative; overflow:hidden;
}
.brand-banner::before {
    content:''; position:absolute; right:-50px; top:-50px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%);
}
.brand-banner h2 { color:#fff !important; font-size:24px !important; }
.apply-btn {
    background:var(--gold) !important; color:#fff !important;
    border-radius:24px !important; padding:11px 28px !important;
    font-weight:600;
    transition:.2s; box-shadow:0 4px 12px rgba(201,169,110,0.4);
}
.apply-btn:hover { background:var(--gold-dark) !important; transform:translateY(-2px); }

/* ========== 右侧广告 ========== */
.ad-image {
    background:linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    color:#fff !important;
}
.ad-item h3 { color:var(--primary) !important; }

/* slider 默认页 */
.default-slide {
    background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color:#fff;
}
.default-slide h2 { color:#fff !important; }

/* ========== 详情页购买按钮 ========== */
.product-detail-buy { background:var(--primary) !important; color:#fff !important; border-radius:24px !important; }
.product-detail-buy:hover { background:var(--primary-dark) !important; }
.product-detail-buy.secondary {
    background:#fff !important; color:var(--primary) !important; border:2px solid var(--primary) !important;
}

/* ========== 页脚:深黑大气 ========== */
.footer { background:#1A1A1A !important; color:#999 !important; padding:40px 0 0 !important; margin-top:40px; }
.footer-pillars {
    display:grid; grid-template-columns:repeat(5,1fr); gap:40px;
    padding:0 0 30px 0; border-bottom:1px solid #2A2A2A;
}
.footer-col h4 {
    color:#fff; font-size:14px; margin-bottom:16px;
    padding-bottom:8px; border-bottom:2px solid var(--gold);
    display:inline-block;
}
.footer-col a {
    display:block; color:#999; font-size:12px;
    line-height:26px; transition:.2s;
}
.footer-col a:hover { color:var(--gold-light); }
.footer-col p { color:#999; font-size:12px; line-height:22px; margin:4px 0; }
.footer-info { text-align:center; padding:20px 0; color:#666; font-size:12px; }
.footer-info p { margin:4px 0; }
.footer-info a { color:#888; }
@media (max-width: 900px) { .footer-pillars { grid-template-columns:repeat(2,1fr); } }

/* ========== 回到顶部 ========== */
.back-to-top {
    position:fixed; right:24px; bottom:80px;
    width:44px; height:44px; line-height:44px;
    background:var(--primary); color:#fff; border-radius:50%;
    text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.2);
    opacity:0; transition:.3s; z-index:999;
    cursor:pointer;
}
.back-to-top.visible { opacity:1; }
.back-to-top:hover { background:var(--gold); transform:translateY(-3px); }