/* 
 * 娣樺疂搴楅摵鎺ㄥ箍涓婚 - 涓绘牱寮忚〃
 * 閰嶈壊锛氭窐瀹濇 | 澶╃尗绾?| 绉戞妧钃?| 娓呮柊缁? */

/* ========== 鍩虹閲嶇疆 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #ff6600;
    --primary-light: #ff944d;
    --primary-dark: #cc5200;
    --primary-gray: #999;
    --text: #333;
    --text-light: #666;
    --text-muted: #999;
    --bg: #f5f5f5;
    --white: #fff;
    --border: #e5e5e5;
    --shadow: 0 2px 12px rgba(0,0,0,.08);
    --shadow-hover: 0 4px 20px rgba(0,0,0,.12);
    --radius: 8px;
    --radius-large: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    margin: 0px;
}

a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary-dark); text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

img { max-width: 100%; display: block; }

/* ========== 椤堕儴瀵艰埅 ========== */
.site-header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 20px;
}

.site-logo img { height: 40px; }
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--primary); }

.main-nav { display: flex; gap: 30px; }
.main-nav a { color: var(--text); font-size: 1rem; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; transition: all .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }

.header-search { position: relative; }
.header-search form { display: flex; align-items: center; gap: 0; }
.header-search select { padding: 7px 12px; border: 1px solid var(--border); border-right: none; border-radius: 20px 0 0 20px; font-size: .9rem; background: var(--white); cursor: pointer; outline: none; }
.header-search input { width: 200px; padding: 8px 40px 8px 12px; border: 1px solid var(--border); border-left: none; border-right: none; border-radius: 0; font-size: .9rem; }
.header-search button { padding: 8px 16px; border: 1px solid var(--border); border-left: none; border-radius: 0 20px 20px 0; background: var(--primary); color: var(--white); cursor: pointer; font-size: 1rem; }
.header-search button:hover { background: var(--primary-dark); }

/* ========== 鍒嗙被 Hero Section ========== */
.hero-section {
    background: rgba(51, 51, 51, 0.95);
    padding: 50px 20px;
    text-align: center;
    color: #fff;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .hero-title {
    font-size: 2rem;
    margin: 0;
    font-weight: 600;
}

/* ========== 鍏ㄥ睆 Banner ========== */
.hero-banner {
    position: relative;
    height: 60vh;
    min-height: 150px;
    max-height: 800px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.banner-slider {
    position: absolute;
    inset: 0;
}

.banner-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-slide:first-child,
.banner-slide.active { opacity: 1; }

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 100%);
}



.banner-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: center;
    color: #fff;
    z-index: 2;
    width: 90%;
    max-width: 800px;
}

.banner-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.banner-subtitle {
    font-size: 1.3rem;
    opacity: .9;
    margin-bottom: 30px;
}

.banner-btn {
    display: inline-block;
    padding: 14px 40px;
    background: var(--primary);
    color: #fff;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all .3s;
}

.banner-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    color: var(--white);
    text-decoration: none;
}

.banner-dots {
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
    display: none;
}

.banner-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    transition: all .3s;
}

.banner-dots .dot.active {
    background: #fff;
    width: 30px;
}

.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,0.35);
    color: #fff; font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
    padding: 0;
}
.banner-arrow:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.08); }
.banner-arrow-prev { left: 24px; }
.banner-arrow-next { right: 24px; }



.default-banner {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Banner 鎼滅储妗?*/
.banner-search {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: 3;
}

.banner-search form {
    display: flex;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}

.banner-search input {
    flex: 1;
    padding: 18px 30px;
    border: none;
    font-size: 1.1rem;
}

.banner-search button {
    padding: 18px 40px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 600;
}

.banner-search button:hover { background: var(--primary-dark); }

/* 鍒嗙被鍥炬爣 */
.cat-icon { 
    margin-right: 6px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
}
.cat-icon-img { 
    width: 20px; 
    height: 20px; 
    object-fit: contain; 
    margin-right: 0px; 
    vertical-align: middle; 
    display: inline-block;
}

/* 鍒嗙被绛涢€夋爣绛?- 纭繚鍥炬爣鍜屾枃瀛楀湪鍚屼竴琛?*/
.filter-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ========== 鍒嗙被绛涢€?========== */
.category-filter { background: var(--white); padding: 20px 0; border-bottom: 1px solid var(--border); }
.filter-tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.filter-tabs a { padding: 8px 20px; border-radius: 20px; background: var(--bg); border: 1px solid var(--bg); color: var(--text); font-size: .9rem; }
.filter-tabs a:hover, .filter-tabs a.active { border: 1px solid var(--primary); color: var(--text); text-decoration: none; }

/* ========== 搴楅摵鍒楄〃 ========== */
.shop-list { padding: 40px 0; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.shop-card {
    background: var(--white);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all .3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.shop-logo-wrap { position: relative; height: 180px; background: var(--white); display: flex; align-items: center; justify-content: center; }

.shop-logo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }

.brand-logo { border-radius: 12px; object-fit: contain;;}

.brand-logo-fallback {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 品牌精选版块 */
.brand-section { padding: 60px 0; background: var(--light); }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.brand-card {
    background: var(--white);
    border-radius: 12px;
    padding: 0;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.brand-card .btn-visit{margin:0px auto;}
.brand-info { padding: 20px; flex: 1; }
.brand-link {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 120px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 20px;
    transition: all 0.2s;
    box-sizing: border-box;
}
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.brand-logo-wrap { margin-bottom: 16px; padding:20px;}
.brand-info{ padding: 20px; }
.brand-actions{padding:20px;}
.brand-logo-img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; margin:0px auto;}
.brand-card .brand-logo-fallback { width: 80px; height: 80px; font-size: 2rem; margin: 0 auto; }
.brand-name { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.brand-belong { font-size: 0.85rem; color: var(--muted); margin: 0; }

.brand-link:hover { background: var(--primary); color: var(--white); }
@media (max-width: 768px) {
    .brand-grid { grid-template-columns: repeat(1, 1fr); gap: 12px; }
    .brand-card { padding: 16px; }
    .brand-logo-img, .brand-card .brand-logo-fallback { width: 60px; height: 60px; font-size: 1.5rem; }
}

.shop-level-badge { position: absolute; top: 12px; right: 12px; font-size: 1.5rem; }

.shop-info { padding: 20px; }

.shop-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: var(--text); text-align: center;}

.shop-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; justify-content: center;}
.shop-category, .shop-level { font-size: .8rem; padding: 4px 10px; border-radius: 12px; background: var(--bg); color: var(--text-light); }
.shop-level { background: #fff3e0; color: #e65100; }

.shop-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.shop-stars { color: #ffb300; font-size: 1rem; letter-spacing: 2px; }

.shop-actions { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); margin-top: auto; justify-content: center;}


.shop-detail-actions {
    display: flex;
    gap: 16px;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.shop-detail-actions .btn-detail,.shop-detail-actions .btn-visit{ max-width:180px;}
.btn-detail{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 25px;
    font-size: .8rem;
    font-weight: 600;
    transition: background .2s;
    text-decoration: none;
}
.btn-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 25px;
    font-size: .8rem;
    font-weight: 600;
    transition: background .2s;
    text-decoration: none;
}
.btn-detail:hover,.btn-visit:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateX(3px);
}
.btn-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 25px;
    font-size: .8rem;
    font-weight: 600;
    transition: background .2s;
    text-decoration: none;
}
.btn-visit:hover { background: var(--primary-dark); color: var(--white);}

/* ========== 鍒嗛〉 ========== */
.pagination { text-align: center; padding: 40px 0; }
.pagination a, .pagination span { display: inline-block; padding: 10px 16px; margin: 0 4px; border-radius: var(--radius); background: var(--white); color: var(--text); }
.pagination a:hover { background: var(--primary); color: var(--white); text-decoration: none; }
.pagination .current { background: var(--primary); color: var(--white); }

/* ========== 新版分页 ========== */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 40px 0;
    flex-wrap: wrap;
}
.pagination-wrapper .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all .2s;
    text-decoration: none;
}
.pagination-wrapper .page-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    text-decoration: none;
}
.pagination-wrapper .page-btn.current {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    cursor: default;
}
.pagination-wrapper .page-btn.disabled {
    color: var(--text-muted);
    background: var(--bg);
    border-color: var(--border);
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-wrapper .page-dots {
    color: var(--text-muted);
    padding: 0 4px;
}

/* ========== 店铺详情简约 Hero ========== */
.shop-detail-hero {
    background: linear-gradient(135deg, #1a3a2f 0%, #2d5a4e 100%);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 40px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.shop-detail-hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* ========== 店铺详情 Hero ========== */
.shop-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    padding: 60px 0;
}
.shop-hero-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}
.shop-hero-logo {
    position: relative;
    flex-shrink: 0;
}
.shop-hero-logo img {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    border: 3px solid rgba(255,255,255,.15);
}
.shop-hero-badge-tmall {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff0036;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255,0,54,.4);
}
.shop-hero-title {
    font-size: 2rem;
    margin-bottom: 12px;
    font-weight: 700;
}
.shop-hero-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.8);
    font-size: .95rem;
}
.hero-meta-icon {
    font-size: 1rem;
}
.shop-hero-desc {
    color: rgba(255,255,255,.7);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 600px;
}
.shop-hero-actions {
    display: flex;
    gap: 12px;
}
.shop-hero-actions .btn-primary {
    padding: 12px 32px;
    font-size: 1rem;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(255,102,0,.4);
}

/* ========== 相关推荐卡片 ========== */
.related-shops {
    padding: 48px 0;
}
.related-shops .section-title,.shop-cp-list .section-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    color: var(--text);
    font-weight: 700;
}


/* ========== 相关推荐（与列表页 shop-card 保持一致）========== */

.related-shops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
/* 复用 shop-card 全部样式 */
.related-shop-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all .25s;
    text-decoration: none;
    color: var(--text);
}
.related-shop-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
    text-decoration: none;
    color: var(--text);
}
/* 复用 shop-logo-wrap */
.related-shop-card .shop-logo-wrap {
    position: relative;
    height: 180px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* 复用 shop-badge */
.related-shop-card .shop-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 600;
    background: #ff0036;
    color: #fff;
}
/* 复用 shop-info */
.related-shop-card .shop-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.related-shop-card .product-seller{
    padding:0 20px;
}
.related-shop-card .shop-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}
.related-shop-card .shop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.related-shop-card .shop-category {
    color: var(--primary);
}
/* 复用 shop-actions */
.related-shop-card .shop-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

/* 响应式：相关推荐 + Hero */
@media (max-width: 992px) {
    .related-shops-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .shop-hero { padding: 40px 0; }
    .shop-hero-inner { flex-direction: column; text-align: center; }
    .shop-hero-logo img { width: 120px; height: 120px; }
    .shop-hero-title { font-size: 1.5rem; }
    .shop-hero-meta { justify-content: center; }
    .shop-hero-desc { margin: 0 auto 20px; }
    .shop-hero-actions { justify-content: center; }
}
@media (max-width: 480px) {
    .related-shops-grid { grid-template-columns: 1fr; }
    .shop-hero-logo img { width: 100px; height: 100px; }
    .shop-hero-title { font-size: 1.3rem; }
}

/* ========== 缁熻鍖哄潡 ========== */
.shop-stats { background: var(--white); padding: 40px 0; margin-top: 40px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat-item { padding: 24px; }
.stat-num { display: block; font-size: 2.5rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 1rem; color: var(--text-light); margin-top: 8px; }

/* ========== 椤佃剼 ========== */
.site-footer { background: #2a2a2a; color: #aaa; padding: 40px 0; }
.footer-content { text-align: center; }
.footer-copyright { margin-bottom: 16px; }
.footer-keywords a { color: #888; margin: 0 8px; }
.footer-keywords a:hover { color: var(--primary); }

/* ========== 搴楅摵璇︽儏椤?========== */
.shop-detail { padding: 40px 0; }

.breadcrumb { margin-bottom: 32px; font-size: .9rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-light); }
.breadcrumb span { margin: 0 8px; }

.shop-detail-card { background: var(--white); border-radius: var(--radius-large); box-shadow: var(--shadow); }
.shop-detail-card > * { overflow: visible; position: relative; z-index: 1; }

.shop-detail-header { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 32px; border-bottom: 1px solid var(--border); }

.shop-logo-large-wrap { display: flex; align-items: center; justify-content: center; }
.shop-logo-large { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; }
.shop-logo-placeholder { width: 160px; height: 160px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 4rem; }

.shop-detail-title { font-size: 1.8rem; margin-bottom: 16px; }
.shop-detail-meta { margin-bottom: 16px; }
.meta-item { display: inline-block; margin-right: 24px; margin-bottom: 12px; }
.meta-item .meta-item-icon{ width:30px; height:30px; background-size: cover;}
.meta-item .shop-type-1{ background-image:url('images/tmall.png'); background-repeat: none; }
.meta-item .shop-type-0{ background-image:url('images/tabbao.png'); background-repeat: none; }
.meta-item strong { color: var(--text); }
.level-badge { background: #fff3e0; padding: 4px 12px; border-radius: 12px; }
.stars-display { color: #ffb300; letter-spacing: 2px; }

.shop-detail-desc { margin-bottom: 20px; }
.shop-detail-desc p { margin: 8px 0 0 0; color: var(--text-light); }

.shop-visit-btn { margin-top: 24px; }
.btn-primary-large { display: inline-block; padding: 14px 40px; background: var(--primary); color: var(--white); border-radius: var(--radius); font-size: 1.1rem; font-weight: 600; }
.btn-primary-large:hover { background: var(--primary-dark); text-decoration: none; }

.shop-detail-content { padding: 32px; line-height: 1.8; }
.shop-detail-content h2 { font-size: 1.4rem; margin: 32px 0 16px; color: var(--text); }
.shop-detail-content p { margin-bottom: 16px; }
.shop-detail-content img { border-radius: var(--radius); margin: 16px 0; }

.shop-seo-tags { padding: 24px 32px; background: var(--bg); display: flex; gap: 12px; flex-wrap: wrap; }
.shop-seo-tags a { padding: 6px 16px; background: var(--white); border-radius: 16px; font-size: .85rem; color: var(--text-light); }
.shop-seo-tags a:hover { background: var(--primary); color: var(--white); text-decoration: none; }

/* 鐩稿叧鎺ㄨ崘 */
.related-shops { margin-top: 48px; }
.section-title { font-size: 1.3rem; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.shop-grid-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.shop-card-small { display: flex; flex-direction: column; align-items: center; padding: 16px; background: var(--white); border-radius: var(--radius); text-align: center; }
.shop-card-small img { width: 80px; height: 80px; border-radius: 8px; margin-bottom: 8px; object-fit: cover; }
.shop-card-small span { font-size: .9rem; color: var(--text); }
.shop-card-small:hover { box-shadow: var(--shadow); }

/* ========== 绌虹姸鎬?========== */
.no-shops { text-align: center; padding: 80px 20px; color: var(--text-muted); }

/* ========== 鍝嶅簲寮?========== */
@media (max-width: 768px) {
    .header-inner { flex-wrap: wrap; height: auto; padding: 12px 0px; gap: 8px; }
    .site-logo { flex-shrink: 0; }
    .header-search { flex: 1; min-width: 0; }
    .header-search input { width: calc(100% - 52px); }
    .main-nav { order: 3; width: 100%; justify-content: center; gap: 16px; margin-top: 12px; }
    .hero-title { font-size: 1.8rem; }
    .shop-detail-header { grid-template-columns: 1fr; text-align: center; }
    .shop-logo-large-wrap { margin-bottom: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .shop-grid { grid-template-columns: repeat(1, 1fr); gap: 12px; }
    .brand-grid { grid-template-columns: repeat(1, 1fr);}
    
    .btn-detail, .btn-visit { font-size: .8rem; padding: 6px 20px; }
    .filter-tabs { justify-content: center; }
}

/* ========== 鏂扮増搴楅摵璇︽儏鏍峰紡 ========== */
.shop-detail-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 40px;
}

.shop-detail-logo {
    position: relative;
    text-align: center;
}

.shop-detail-logo img {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: var(--shadow);
}

.badge-tmall {
    position: absolute;
    top: -8px;
    right: 20px;
    background: #ff0036;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
}

.shop-detail-name {
    font-size: 2rem;
    margin-bottom: 16px;
}

.shop-detail-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.meta-item {
    color: var(--text-light);
}

/* 服务/物流评分 */
.shop-scores {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}
.score-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.score-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.score-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.shop-detail-nick {
    color: var(--text-muted);
    margin-bottom: 12px;
}

.shop-detail-desc {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 24px;
}

.shop-detail-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}

.stat-box {
    text-align: left;
}

.stat-box .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-box .stat-label {
    font-size: .85rem;
    color: var(--text-light);
}

.btn-primary {
    padding: 14px 40px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--primary-dark);
    text-decoration: none;
}

.btn-secondary {
    padding: 14px 30px;
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius);
}

.btn-secondary:hover {
    background: var(--border);
    text-decoration: none;
}

/* 鎼滅储椤?*/
.search-section {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 60px 0;
    text-align: center;
    color: #fff;
}

.search-title {
    font-size: 2rem;
    margin-bottom: 24px;
}

.search-form-large {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
}

.search-form-large input {
    flex: 1;
    padding: 20px 30px;
    border: none;
    font-size: 1.1rem;
}

.search-form-large button {
    padding: 20px 40px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.search-form-large button:hover {
    background: var(--primary-dark);
}

.search-result-info {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius);
}

.no-results {
    text-align: center;
    padding: 80px 20px;
}

.no-results p {
    margin-bottom: 16px;
    color: var(--text-muted);
}

/* 搴楅摵寰界珷 */
.shop-badge {
    position: absolute;
    top: 6px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    text-indent: -9999px;
}

.shop-badge.tmall {
    background: none;
    color: #fff;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-image: url(images/tmall.png);
}

.shop-badge.taobao {
    background: none;
    color: #fff;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-image: url(images/tabbao.png);
}

.shop-badge.recommend {
    background: var(--primary);
    color: #fff;
}

/* 搴楅摵缁熻琛?*/
.shop-stats-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: .85rem;
}

.stat-commission {
    color: var(--primary);
    font-weight: 600;
}

.stat-items {
    color: var(--text-muted);
}

/* 闈㈠寘灞?*/
.breadcrumb {
    background: var(--white);
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb .sep {
    color: var(--text-muted);
}

.breadcrumb .current {
    color: var(--text);
}

/* 鍝嶅簲寮忚皟鏁?*/
@media (max-width: 768px) {
    .hero-banner {
        height: auto;
        min-height: 0;
        aspect-ratio: 800 / 944;
    }
    .banner-slide {
        position: absolute;
    }
    .banner-arrow { width: 36px; height: 36px; font-size: 18px; }
    .banner-arrow-prev { left: 12px; }
    .banner-arrow-next { right: 12px; }
    
    .banner-title {
        font-size: 2rem;
    }
    
    .banner-content {
        position: relative;
        transform: none;
        margin: 0 auto;
    }
    
    .shop-detail-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .shop-detail-logo img {
        width: 150px;
        height: 150px;
    }
    
    .shop-detail-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .shop-detail-stats {
        justify-content: center;
    }
}

/* ========== 锟斤拷锟铰凤拷锟斤拷页锟芥（锟睫诧拷锟斤拷锟斤拷锟?========= */

.category-main {
    min-height: calc(100vh - 300px);
}

/* 锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟?*/
.category-hero {
    background: rgba(51, 51, 51, 0.95);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 40px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
}

.category-desc {
    font-size: 18px;
    opacity: 0.95;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.category-meta {
    font-size: 14px;
    opacity: 0.9;
}

.post-count {
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}

/* 锟斤拷锟斤拷锟叫憋拷 */
.posts-list {
    max-width: 900px;
    margin: 0 auto;
}

.post-card {
    background: var(--white);
    border-radius: var(--radius-large);
    padding: 40px;
    margin-bottom: 35px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    display: flex;
    gap: 35px;
    align-items: flex-start;
}

.post-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

/* 锟斤拷锟斤拷锟斤拷锟斤拷图 */
.post-thumbnail {
    flex-shrink: 0;
    width: 240px;
    height: 160px;
    border-radius: var(--radius);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

/* 锟斤拷锟斤拷锟斤拷锟斤拷 */
.post-content {
    flex: 1;
    min-width: 0;
}

.post-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 18px 0;
    line-height: 1.4;
}

.post-title a {
    color: var(--text);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* 锟斤拷锟斤拷元锟斤拷息 */
.post-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-meta i {
    color: var(--primary);
    font-size: 13px;
}


/* 锟斤拷锟斤拷摘要 */
.post-excerpt {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 25px;
}

/* 锟侥讹拷锟斤拷锟洁按钮 */
.post-more {
    display: flex;
    justify-content: flex-start;
}
.post-more a {
    color: var(--white) !important;
    text-decoration: none;
    font-size: 14px;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: white;
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    background: var(--primary-dark);
    color: white;
    text-decoration: none;
    transform: translateX(3px);
}

.read-more-btn i {
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

/* 锟斤拷页 */
/* 文章列表分页 */
.posts-pagination {
    margin-top: 50px;
    text-align: center;
}

.posts-pagination li{ list-style: none;}

.pagination-wrapper {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.pagination-wrapper a,
.pagination-wrapper span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.pagination-wrapper a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.pagination-wrapper .current a {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    cursor: default;
}

.pagination-wrapper .disabled,
.pagination-wrapper .dots {
    color: var(--text-muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.no-posts {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 18px;
}

/* 锟斤拷应式锟斤拷锟?*/
@media (max-width: 768px) {
    .category-hero {
        padding: 40px 20px;
    }
    
    .category-title {
        font-size: 28px;
    }
    
    .category-desc {
        font-size: 16px;
    }
    
    .post-card {
        flex-direction: column;
        padding: 20px;
    }
    
    .post-thumbnail {
        width: 100%;
        height: 200px;
    }
    
    .post-title {
        font-size: 19px;
    }
    
    .post-meta {
        gap: 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .category-title {
        font-size: 24px;
    }
    
    .post-card {
        padding: 15px;
    }
    
    .post-thumbnail {
        height: 180px;
    }
    
    .read-more-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
}
/* ========== 文章详情页 ========== */
.post-main {
    min-height: calc(100vh - 300px);
}
.page-hero {
    background: rgba(51, 51, 51, 0.95);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 40px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.page-hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.page-card {
    background: var(--white);
    border-radius: var(--radius-large);
    padding: 50px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}
.page-card .page-body {
    line-height: 1.8;
    color: var(--text-color);
}
.post-hero {
    background: rgba(51, 51, 51, 0.95);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 40px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.post-hero .post-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.3;
}
.post-hero .post-meta {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 14px;
    opacity: 0.9;
    flex-wrap: wrap;
}
.post-hero .post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-hero .post-meta i { opacity: 0.7; }
.post-article {
    background: var(--white);
    border-radius: var(--radius-large);
    padding: 50px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}
.post-article .post-title {
    line-height: 1.9;
    color: var(--primary);
}
.post-content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
}
.post-content p { margin-bottom: 20px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    margin: 30px 0 15px 0;
    font-weight: 600;
    line-height: 1.4;
}
.post-content h2 { font-size: 26px; }
.post-content h3 { font-size: 22px; }
.post-content h4 { font-size: 18px; }
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 20px 0;
}
.post-content a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}
.post-content a:hover { border-bottom-color: var(--primary); }
.post-content blockquote {
    border-left: 4px solid var(--primary);
    background: rgba(255, 102, 0, 0.05);
    padding: 20px 25px;
    margin: 25px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content ul, .post-content ol { margin: 20px 0; padding-left: 25px; }
.post-content li { margin-bottom: 8px; }
.post-content pre, .post-content code {
    background: #f5f5f5;
    border-radius: var(--radius);
    font-family: 'Courier New', monospace;
}
.post-content code { padding: 2px 6px; font-size: 14px; }
.post-content pre { padding: 20px; overflow-x: auto; margin: 20px 0; }
.post-content pre code { padding: 0; background: none; }
.post-article .post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-light);
    flex-wrap: wrap;
}
.post-article .post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-article .post-meta i { color: var(--primary); opacity: 0.7; }
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}
.nav-prev, .nav-next { flex: 1; max-width: 45%; }
.nav-next { text-align: right; }
.nav-prev span, .nav-next span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.nav-prev a, .nav-next a {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}
.nav-prev a:hover, .nav-next a:hover { color: var(--primary); }
.related-posts {
    margin-top: 50px;
    padding-top: 40px;
}
.section-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title i { color: var(--primary); }
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.related-post-card {
    background: var(--white);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}
.related-post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.related-post-thumb { height: 160px; overflow: hidden; }
.related-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.related-post-card:hover .related-post-thumb img { transform: scale(1.05); }
.related-post-info { padding: 20px; }
.related-post-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-post-title a { color: var(--text); text-decoration: none; }
.related-post-title a:hover { color: var(--primary); }
.related-post-date {
    font-size: 13px;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 992px) { .related-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .shop-detail-hero-title { font-size: 28px; }
    .page-hero-title { font-size: 28px; }
    .page-card { padding: 30px 20px; }
    .post-hero .post-title { font-size: 28px; }
    .post-hero .post-meta { gap: 15px; font-size: 13px; }
    .post-article { padding: 30px 20px; }
    .post-content { font-size: 15px; }
    .post-navigation { flex-direction: column; }
    .nav-prev, .nav-next { max-width: 100%; }
    .related-posts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .shop-detail-hero { padding: 35px 15px; }
    .shop-detail-hero-title { font-size: 24px; }
    .page-hero { padding: 35px 15px; }
    .page-hero-title { font-size: 24px; }
    .post-hero { padding: 35px 15px; }
    .post-hero .post-title { font-size: 24px; }
    .post-hero .post-meta { gap: 10px; }
    .post-article { padding: 20px 15px; }
}

/* ========== 评论区域 ========== */
.comments-section { margin-top: 50px; }
.comments-hero {
    background: rgba(51, 51, 51, 0.95);
    color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 40px;
    border-radius: var(--radius-large);
}
.comments-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.comments-main { margin: 0 auto; padding: 0 0px 60px; }
.comments-list { margin-bottom: 40px; }
.comment-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    margin-bottom: 20px;
    background: var(--white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    transition: all 0.3s;
}
.comment-item:hover { box-shadow: var(--shadow-hover); }
.comment-avatar { flex-shrink: 0; }
.comment-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 14px;
}
.comment-author {
    font-weight: 600;
    color: var(--text);
}
.comment-time {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.comment-badge {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.comment-content {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 15px;
}
.comment-content p { margin-bottom: 10px; }
.comment-actions {
    display: flex;
    gap: 15px;
    font-size: 13px;
}
.comment-link, .comment-reply {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}
.comment-link:hover, .comment-reply:hover { color: var(--primary); }
.comments-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.comments-empty i { font-size: 48px; margin-bottom: 15px; display: block; }
.comments-empty p { font-size: 16px; }
.comment-form-wrapper {
    background: var(--white);
    border-radius: var(--radius-large);
    padding: 40px;
    box-shadow: var(--shadow);
}
.form-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-title i { color: var(--primary); }

/* 评论表单样式 (Typecho 生成) */
.comment-form { /* Typecho 生成的表单容器 */ }
.comment-form fieldset { border: none; padding: 0; margin: 0; }
.comment-form p { margin-bottom: 20px; }
.comment-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    transition: border-color 0.3s;
    font-family: inherit;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.comment-form textarea { min-height: 150px; resize: vertical; }
.comment-form button[type="submit"] {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 35px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}
.comment-form button[type="submit"]:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.comments-closed {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.comments-closed i { font-size: 48px; margin-bottom: 15px; display: block; }
.comments-closed p { font-size: 16px; }

/* 响应式 */
@media (max-width: 768px) {
    .comments-hero { padding: 35px 15px; }
    .comments-title { font-size: 24px; }
    .comment-item { flex-direction: column; padding: 20px; }
    .comment-avatar img { width: 48px; height: 48px; }
    .comment-meta { flex-wrap: wrap; gap: 10px; }
    .comment-form-wrapper { padding: 25px; }
}
@media (max-width: 480px) {
    .comments-main { padding: 0 15px 40px; }
    .comment-item { padding: 15px; }
    .comment-form-wrapper { padding: 20px; }
}


/* ========== 评论表单美化（追加） ========== */

/* 覆盖旧表单样式 */
.comment-form p { margin-bottom: 0; }

.form-header { margin-bottom: 30px; }

.form-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-title i { color: var(--primary); }

.form-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* 登录状态提示 */
.logged-in-info {
    background: rgba(255, 102, 0, 0.05);
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 25px;
    font-size: 14px;
    color: var(--text);
}

.logged-in-info a { color: var(--primary); text-decoration: none; font-weight: 500; }
.logged-in-info a:hover { text-decoration: underline; }

.logout-link {
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-muted) !important;
}

/* 表单布局 */
.comment-form { margin: 0; }
.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-group-half { flex: 1; }

/* 输入框美化 - 图标 + 浮动标签 */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper > i {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 14px;
    z-index: 1;
    transition: color 0.3s;
}

.form-input {
    width: 100%;
    padding: 14px 15px 14px 42px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--white);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    top: -8px;
    left: 12px;
    font-size: 11px;
    color: var(--primary);
    background: var(--white);
    padding: 0 6px;
}

.input-wrapper:focus-within > i { color: var(--primary); }

.form-label {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.3s;
}

/* 多行文本框 */
.textarea-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.textarea-wrapper > i {
    position: absolute;
    left: 15px;
    top: 14px;
    color: var(--text-muted);
    font-size: 14px;
    z-index: 1;
    transition: color 0.3s;
}

.form-textarea {
    width: 100%;
    padding: 14px 15px 14px 42px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    min-height: 140px;
    resize: vertical;
    transition: all 0.3s;
    font-family: inherit;
    line-height: 1.6;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.textarea-wrapper:focus-within > i { color: var(--primary); }

.form-textarea:focus + .form-label,
.form-textarea:not(:placeholder-shown) + .form-label {
    top: -8px;
    left: 12px;
    font-size: 11px;
    color: var(--primary);
    background: var(--white);
    padding: 0 6px;
}

/* 提交按钮美化 */
.form-actions { margin-top: 25px; }

.submit-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #ff6a00 100%);
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #e65c00 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3);
}

/* 响应式 */
@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 0; }
}

@media (max-width: 480px) {
    .submit-btn { width: 100%; justify-content: center; }
}

/* ========== 评论表单 - 图标+标签同行布局 ========== */

/* 图标+标签在同一行 */
.input-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-light);
}

.input-header i {
    color: var(--primary);
    font-size: 14px;
    opacity: 0.8;
}

.input-header .form-label {
    position: static !important;
    transform: none !important;
    font-size: 14px !important;
    color: var(--text-light) !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

/* 输入框样式（移除左侧 padding，不需要给图标留空间）*/
.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--white);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

/* 移除旧的 input-wrapper 绝对定位样式 */
.input-wrapper,
.textarea-wrapper {
    position: static !important;
    display: block !important;
}

.input-wrapper > i,
.textarea-wrapper > i {
    position: static !important;
    margin-right: 0;
}

/* ========== 修复图标与label水平对齐 ========== */
.input-header {
    display: flex;
    align-items: center;      /* 垂直居中 */
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1;           /* 统一样式高度 */
}

.input-header i {
    color: var(--primary);
    font-size: 14px;
    opacity: 0.8;
    display: inline-flex;     /* 让图标也是flex，方便对齐 */
    align-items: center;
    justify-content: center;
    width: 16px;              /* 固定宽度，保证对齐 */
    height: 16px;
}

.input-header .form-label {
    position: static !important;
    transform: none !important;
    font-size: 14px !important;
    color: var(--text-light) !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: auto !important;
    line-height: 1;           /* 与图标保持一致 */
    margin: 0;                /* 移除可能的margin */
}

/* ========== 好店推荐 & 资讯版块 ========== */

/* 版块通用头部 */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.section-title i {
    color: var(--primary);
    font-size: 28px;
}

.section-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0;
}

.section-more {
    text-align: center;
    margin-top: 40px;
}

.more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.more-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

/* ========== 好店推荐版块 ========== */
.recommend-section {
    padding: 80px 0;
    background: var(--bg);
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.recommend-card {
    background: var(--white);
    border-radius: var(--radius-large);
    padding: 20px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: var(--shadow);
}

.recommend-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.recommend-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border);
    transition: border-color 0.3s;
}

.recommend-card:hover .recommend-logo {
    border-color: var(--primary);
}

.recommend-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.recommend-name a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.recommend-name a:hover {
    color: var(--primary);
}

.recommend-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.recommend-cat {
    padding-right: 10px;
    border-right: 1px solid var(--border);
}

/* ========== 资讯版块 ========== */
.news-section {
    padding: 80px 0;
    background: var(--white);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    background: var(--bg);
    border-radius: var(--radius-large);
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: var(--shadow);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.news-thumb {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.news-card:hover .news-thumb img {
    transform: scale(1.05);
}

.news-info {
    padding: 20px;
}

.news-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.news-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.news-title a:hover {
    color: var(--primary);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.news-meta i {
    margin-right: 4px;
}

.news-excerpt {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-card .read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
}

.news-card .read-more-btn:hover {
    background: var(--primary-dark);
    transform: translateX(3px);
}

/* 响应式 */
@media (max-width: 1024px) {
    .recommend-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
    }
    .section-title i {
        font-size: 20px;
    }
    .recommend-section,
    .news-section {
        padding: 50px 0;
    }
    .recommend-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .recommend-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== 资讯中心页面 ========== */

.news-list-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.news-list-title {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.news-list-title i {
    color: var(--primary);
}

.news-list-subtitle {
    font-size: 16px;
    opacity: 0.8;
    margin: 0;
}

.news-list-section {
    padding: 60px 0;
    background: var(--bg);
}

.news-list-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-list-card {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.news-list-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-hover);
}

.news-list-thumb {
    flex: 0 0 300px;
    height: 220px;
    overflow: hidden;
}

.news-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.news-list-card:hover .news-list-thumb img {
    transform: scale(1.05);
}

.news-list-info {
    flex: 1;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-list-info .news-list-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: left;
    justify-content: flex-start;
}

.news-list-info .news-list-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.news-list-info .news-list-title a:hover {
    color: var(--primary);
}

.news-list-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.news-list-meta i {
    margin-right: 4px;
}

.news-list-excerpt {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 15px;
}

.news-list-info .read-more-btn {
    align-self: flex-start;
}

/* 分页 */
.news-pagination {
    margin-top: 50px;
    text-align: center;
}

.page-navigator {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.page-navigator span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 14px;
}

.page-navigator span:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.page-navigator .current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.no-news {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.no-news i {
    font-size: 64px;
    margin-bottom: 20px;
    display: block;
    opacity: 0.5;
}

.no-news p {
    font-size: 18px;
}

/* 响应式 */
@media (max-width: 768px) {
    .news-list-hero {
        padding: 50px 0;
    }
    
    .news-list-title {
        font-size: 28px;
    }
    
    .news-list-card {
        flex-direction: column;
    }
    
    .news-list-thumb {
        flex: 0 0 200px;
        height: 200px;
    }
    
    .news-list-info {
        padding: 20px;
    }
    
    .news-list-meta {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ========== 评论嵌套效果 ========== */

/* 评论容器 */
.comments-list {
    margin-bottom: 40px;
}

/* 单个评论项 */
.comment-item {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.comment-item:hover {
    box-shadow: var(--shadow-hover);
}

/* 子评论缩进 */
.comment-child {
    margin-left: 60px;
    border-left: 3px solid var(--primary);
    padding-left: 20px;
}

.comment-depth-2 {
    margin-left: 60px;
}
.comment-depth-3 {
    margin-left: 120px;
}
.comment-depth-4 {
    margin-left: 180px;
}
.comment-depth-5 {
    margin-left: 240px;
}

/* 评论内容 */
.comment-body {
    position: relative;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.comment-author {
    font-weight: 600;
    color: var(--text);
}

.comment-author a {
    color: var(--primary);
    text-decoration: none;
}

.comment-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 11px;
}

.comment-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 10px;
}

.comment-content p {
    margin-bottom: 8px;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.comment-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.comment-link:hover {
    color: var(--primary);
}

.comment-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.comment-reply:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

/* 取消回复按钮 */
.cancel-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 15px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.cancel-reply:hover {
    color: #e74c3c;
}

/* 评论表单在回复时移动效果 */
#respond {
    transition: all 0.3s;
}

#respond.comment-replying {
    background: #f9f9f9;
    border: 2px solid var(--primary);
}

/* 响应式 */
@media (max-width: 768px) {
    .comment-child,
    .comment-depth-2,
    .comment-depth-3,
    .comment-depth-4,
    .comment-depth-5 {
        margin-left: 20px;
        padding-left: 15px;
    }
    
    .comment-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ========== 评论嵌套效果 ========== */

/* 评论容器 */
.comments-list {
    margin-bottom: 40px;
}

/* 单个评论项 */
.comment-item {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.comment-item:hover {
    box-shadow: var(--shadow-hover);
}

/* 子评论缩进 */
.comment-child {
    margin-left: 60px;
    border-left: 3px solid var(--primary);
    padding-left: 20px;
}

.comment-depth-2 {
    margin-left: 60px;
}
.comment-depth-3 {
    margin-left: 120px;
}
.comment-depth-4 {
    margin-left: 180px;
}
.comment-depth-5 {
    margin-left: 240px;
}

/* 评论内容 */
.comment-body {
    position: relative;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.comment-author {
    font-weight: 600;
    color: var(--text);
}

.comment-author a {
    color: var(--primary);
    text-decoration: none;
}

.comment-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 11px;
}

.comment-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 10px;
}

.comment-content p {
    margin-bottom: 8px;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.comment-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.comment-link:hover {
    color: var(--primary);
}

.comment-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.comment-reply:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

/* 取消回复按钮 */
.cancel-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 15px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.cancel-reply:hover {
    color: #e74c3c;
}

/* 评论表单在回复时移动效果 */
#respond {
    transition: all 0.3s;
}

#respond.comment-replying {
    background: #f9f9f9;
    border: 2px solid var(--primary);
}

/* 响应式 */
@media (max-width: 768px) {
    .comment-child,
    .comment-depth-2,
    .comment-depth-3,
    .comment-depth-4,
    .comment-depth-5 {
        margin-left: 20px;
        padding-left: 15px;
    }
    
    .comment-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
}


/* ========== 弹窗样式 ========== */
.site-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}
.site-popup-overlay.show {
    display: flex;
    opacity: 1;
}
.site-popup-wrap {
    position: relative;
    max-width: 400px;
    width: 80%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: popupIn 0.35s ease;
}
@keyframes popupIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.site-popup-img-wrap { position: relative; display: block; width: 100%; }
.site-popup-img-wrap img { display: block; width: 100%; }
.site-popup-img-desktop { display: block; }
.site-popup-img-mobile  { display: none; }
.site-popup-img-wrap .site-popup-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
    border-bottom: 3px solid rgba(0,0,0,.15);
}
.site-popup-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    margin-top: 4px;
}
.site-popup-btn:hover { opacity: 0.88; color: #fff; }
.site-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    z-index: 10;
    padding: 0;
    transition: background 0.2s;
}
.site-popup-close:hover { background: rgba(0,0,0,0.75); }

/* 复制提醒浮层 */
.popup-remind-toast {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 15px;
    z-index: 10001;
    display: none;
    transition: opacity 0.6s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 80vw;
    text-align: center;
}
@media (max-width: 576px) {
    .popup-remind-toast { font-size: 14px; padding: 12px 20px; white-space: normal; }
}
@media (max-width: 576px) {
    .site-popup-wrap { max-width: 95%; }
    .site-popup-img-desktop { display: none; }
    .site-popup-img-mobile  { display: block; }
    .site-popup-img-wrap .site-popup-btn { bottom: 12px; font-size: 0.88rem; padding: 8px 24px; }
}

/* ========== 产品列表页卡片 ========== */
.product-card .shop-logo-wrap {
    height: 200px;
}
.product-pic {
    width: 160px !important;
    height: 160px !important;
    border-radius: 12px !important;
    object-fit: cover;
}
.product-title {
    font-size: 1rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-title a {
    color: var(--text);
    text-decoration: none;
}
.product-title a:hover {
    color: var(--primary);
}
.product-sub-title {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.product-orig-price {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.product-coupon-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f63;
}
.product-commission {
    font-size: 0.8rem;
    background: #fff3e0;
    color: #e65100;
    padding: 2px 8px;
    border-radius: 10px;
}
.product-coupon {
    margin-bottom: 8px;
}
.coupon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f63, #ff8c00);
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: 10px;
    margin-right: 6px;
}
.coupon-date {
    font-size: 0.78rem;
    color: var(--text-light);
}

/* ========== 产品详情页 ========== */
.product-detail-card {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 992px) {
    .product-detail-card {
        grid-template-columns: 1fr;
    }
    .product-images {
        position: relative;
        top: 0;
    }
}
.product-main-image {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}
.product-main-image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.product-badge-hot {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #f63;
    color: #fff;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}
.product-badge-tmall {
    position: absolute;
    top: 16px;
    right: 16px;
}
.product-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.product-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}
.product-thumb:hover,
.product-thumb.active {
    border-color: var(--primary);
}
.product-info {
    padding: 0;
}
.product-detail-title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}
.product-sub-title-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}
.product-price-block {
    background: var(--light);
    border-radius: 12px;
    padding: 16px 0 0 0;
    margin-bottom: 16px;
}
.price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.price-row:last-child {
    margin-bottom: 0;
}
.price-row-coupon .price-final {
    font-size: 1.6rem;
    color: #f63;
}
.price-label {
    font-size: 0.85rem;
    color: var(--text-light);
    min-width: 50px;
}
.price-orig {
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.price-final {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f63;
}
.coupon-save {
    font-size: 0.85rem;
    color: #f63;
    background: #fff0e0;
    padding: 2px 8px;
    border-radius: 10px;
}
.product-coupon-block {
    margin-bottom: 16px;
}
.coupon-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff5ee, #ffe4cc);
    border: 1px solid #fdb88a;
    border-radius: 10px;
    padding: 10px 16px;
}
.coupon-info.coupon-expired {
    background: var(--light);
    border-color: #ddd;
}
.coupon-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #f63;
}
.coupon-expired .coupon-amount {
    color: var(--text-muted);
    font-weight: 400;
}
.coupon-period {
    font-size: 0.82rem;
    color: var(--text-light);
}
.product-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.product-seller {
    display: flex;
    align-items: center;
    margin: 20px 0;
    font-size: 0.9rem;
}
.seller-label {
    color: var(--text-light);
}
.seller-nick {
    color: var(--text);
    font-weight: 600;
}
.shop-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}
.shop-type-badge.tmall {
    background: #ff5000;
    color: #fff;
}
.shop-type-badge.taobao {
    background: #00bbee;
    color: #fff;
}
.product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding:20px 0;
}
.product-actions .btn-visit {
    flex: 1;
    min-width: 160px;
}
.btn-coupon {
    background: linear-gradient(135deg, #f63, #ff8c00) !important;
}
.btn-coupon:hover {
    background: linear-gradient(135deg, #e55, #ff7000) !important;
}/* 商品详情区块 */
.product-description-section {
    padding: 40px 0;
    background: #fff;
}
.product-description-section .section-title {
    font-size: 1.4rem;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--primary-gray);
    text-align: left;
    display:block;
}
.product-description-content {
    background: var(--light);
    border-radius: 12px;
    padding: 24px;
}
.desc-placeholder {
    text-align: left;
    color: var(--text-muted);
}
.desc-placeholder > p {
    font-size: 0.95rem;
    margin-bottom: 24px;
}
.desc-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.desc-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
}
.desc-info-label {
    font-size: 0.82rem;
    color: var(--text-light);
}
.desc-info-value {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
}
.desc-images-placeholder {
    background: #fff;
    border-radius: 8px;
    padding: 60px 20px;
    border: 2px dashed #ddd;
}
.desc-images-note {
    font-size: 0.9rem;
    color: var(--text-light);
}
@media (max-width: 768px) {
    .desc-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .desc-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .desc-info-item {
        padding: 8px 12px;
    }
}
/* 购买按钮禁用态 */
.btn-disabled {
    background: #ccc !important;
    color: #999 !important;
    cursor: not-allowed;
    pointer-events: none;
}


/* ===== 活动列表页 ===== */
.activity-list { padding: 40px 0; }
.activity-list .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-header { margin-bottom: 24px; }
.section-header h2 { font-size: 1.2rem; color: var(--text); }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

.activity-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.activity-card.ended { opacity: 0.7; }
.activity-card.ended:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.activity-material {
    width: 100%; height: 200px; overflow: hidden; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
}
.activity-material img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.activity-card:hover .activity-material img { transform: scale(1.05); }
.activity-material.no-material { display: none; }

.activity-info { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.activity-name {
    font-size: 1.1rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}

.activity-time {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 0.85rem; color: #888;
}
.time-range { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.activity-status {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 0.78rem; font-weight: 500; white-space: nowrap;
}
.activity-status.ongoing { background: #e8f5e9; color: #2e7d32; }
.activity-status.upcoming { background: #e3f2fd; color: #1565c0; }
.activity-status.ended { background: #f5f5f5; color: #999; }

.activity-desc {
    font-size: 0.88rem; color: #666; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}

.activity-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.activity-actions .btn-detail {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; background: var(--primary, #ff6a00); color: #fff; border-radius: 20px;
    font-size: 0.88rem; text-decoration: none; transition: background 0.2s;
}
.activity-actions .btn-detail:hover { background: var(--primary-hover, #e55d00); }
.ended-label { font-size: 0.82rem; color: #ccc; }

.no-activities { text-align: center; padding: 80px 20px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-icon { font-size: 3rem; }
.empty-state p { font-size: 1rem; color: #999; }
.empty-state .btn-detail {
    display: inline-flex; padding: 10px 28px;
    background: var(--primary, #ff6a00); color: #fff; border-radius: 20px;
    text-decoration: none; font-size: 0.9rem;
}

@media (max-width: 768px) {
    .activity-grid { grid-template-columns: 1fr; gap: 16px; }
    .activity-material { height: 160px; }
    .activity-list { padding: 24px 0; }
    .site-logo img{height:30px;}
}
@media (max-width: 480px) {
    .activity-material { height: 140px; }
    .activity-info { padding: 16px; }
    .activity-name { font-size: 1rem; }
}

/* ===== 活动详情页 ===== */
.activity-detail-card { align-items: start; }

.activity-detail-card .product-main-image { border-radius: 8px; }
.activity-detail-card .product-main-image img { aspect-ratio: 800 / 450; object-fit: cover; }

.activity-badge-status {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; color: #fff;
}
.activity-badge-status.ongoing { background: #2e7d32; }
.activity-badge-status.upcoming { background: #1565c0; }
.activity-badge-status.ended { background: #999; }

.activity-detail-time-block {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: var(--light, #f8f9fa); border-radius: 8px;
    margin-bottom: 16px; gap: 12px;
}
.activity-time-row { display: flex; align-items: center; gap: 10px; }
.time-icon { font-size: 1.3rem; }
.time-detail { display: flex; flex-direction: column; gap: 2px; }
.time-label { font-size: 0.78rem; color: #999; }
.time-value { font-size: 0.95rem; color: var(--text); font-weight: 500; }

.activity-status-badge {
    display: inline-block; padding: 4px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.activity-status-badge.ongoing { background: #e8f5e9; color: #2e7d32; }
.activity-status-badge.upcoming { background: #e3f2fd; color: #1565c0; }
.activity-status-badge.ended { background: #f5f5f5; color: #999; }

.activity-info-block { margin-bottom: 16px; }
.activity-info-label { font-size: 0.88rem; color: #888; font-weight: 500; margin-bottom: 6px; }
.activity-info-text {
    font-size: 0.92rem; color: #555; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.btn-activity-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; font-size: 0.95rem; }
.btn-disabled { background: #e0e0e0 !important; color: #999 !important; cursor: not-allowed; }
.btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 0.88rem; }

.activity-related-card { border-radius: 8px; }
.activity-related-card .activity-related-img { border-radius: 6px; overflow: hidden; height:auto; border-bottom-left-radius:0px; border-bottom-right-radius: 0px; }
.activity-related-card .activity-related-img img.shop-logo { aspect-ratio: 800 / 450; object-fit: cover; }
.activity-related-card 
.activity-detail-content { font-size: 0.95rem; color: #555; line-height: 1.8; white-space: pre-wrap; padding: 20px 0; }

@media (max-width: 992px) {
    .activity-detail-time-block { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .activity-detail-time-block { padding: 12px; }
}
/* ===== 活动列表页 ===== */
.activity-list { padding: 40px 0; }
.activity-list .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-header { margin-bottom: 24px; }
.section-header h2 { font-size: 1.2rem; color: var(--text); }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

.activity-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.activity-card.ended { opacity: 0.7; }
.activity-card.ended:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.activity-material {
    width: 100%; height: 200px; overflow: hidden; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
}
.activity-material img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.activity-card:hover .activity-material img { transform: scale(1.05); }
.activity-material.no-material { display: none; }

.activity-info { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.activity-name {
    font-size: 1.1rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}

.activity-time {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 0.85rem; color: #888;
}
.time-range { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.activity-status {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 0.78rem; font-weight: 500; white-space: nowrap;
}
.activity-status.ongoing { background: #e8f5e9; color: #2e7d32; }
.activity-status.upcoming { background: #e3f2fd; color: #1565c0; }
.activity-status.ended { background: #f5f5f5; color: #999; }

.activity-desc {
    font-size: 0.88rem; color: #666; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}

.activity-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.activity-actions .btn-detail {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; background: var(--primary, #ff6a00); color: #fff; border-radius: 20px;
    font-size: 0.88rem; text-decoration: none; transition: background 0.2s;
}
.activity-actions .btn-detail:hover { background: var(--primary-hover, #e55d00); }
.ended-label { font-size: 0.82rem; color: #ccc; }

.no-activities { text-align: center; padding: 80px 20px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-icon { font-size: 3rem; }
.empty-state p { font-size: 1rem; color: #999; }
.empty-state .btn-detail {
    display: inline-flex; padding: 10px 28px;
    background: var(--primary, #ff6a00); color: #fff; border-radius: 20px;
    text-decoration: none; font-size: 0.9rem;
}

@media (max-width: 768px) {
    .activity-grid { grid-template-columns: 1fr; gap: 16px; }
    .activity-list { padding: 24px 0; }
}
@media (max-width: 480px) {
    .activity-info { padding: 16px; }
    .activity-name { font-size: 1rem; }
}

/* ===== 活动详情页 ===== */
.activity-detail-card { align-items: start; }

.activity-detail-card .product-main-image { border-radius: 8px; }
.activity-detail-card .product-main-image img { aspect-ratio: 800 / 450; object-fit: cover; }

.activity-badge-status {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; color: #fff;
}
.activity-badge-status.ongoing { background: #2e7d32; }
.activity-badge-status.upcoming { background: #1565c0; }
.activity-badge-status.ended { background: #999; }

.activity-detail-time-block {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: var(--light, #f8f9fa); border-radius: 8px;
    margin-bottom: 16px; gap: 12px;
}
.activity-time-row { display: flex; align-items: center; gap: 10px; }
.time-icon { font-size: 1.3rem; }
.time-detail { display: flex; flex-direction: column; gap: 2px; }
.time-label { font-size: 0.78rem; color: #999; }
.time-value { font-size: 0.95rem; color: var(--text); font-weight: 500; }

.activity-status-badge {
    display: inline-block; padding: 4px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.activity-status-badge.ongoing { background: #e8f5e9; color: #2e7d32; }
.activity-status-badge.upcoming { background: #e3f2fd; color: #1565c0; }
.activity-status-badge.ended { background: #f5f5f5; color: #999; }

.activity-info-block { margin-bottom: 16px; }
.activity-info-label { font-size: 0.88rem; color: #888; font-weight: 500; margin-bottom: 6px; }
.activity-info-text {
    font-size: 0.92rem; color: #555; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.btn-activity-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; font-size: 0.95rem; }
.btn-disabled { background: #e0e0e0 !important; color: #999 !important; cursor: not-allowed; }
.btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 0.88rem; }

.activity-related-card { border-radius: 8px; }
.activity-related-card .activity-related-img { border-radius: 6px; overflow: hidden; }
.activity-related-card .activity-related-img img.shop-logo { aspect-ratio: 800 / 450; object-fit: cover; }

.activity-detail-content { font-size: 0.95rem; color: #555; line-height: 1.8; white-space: pre-wrap; padding: 20px 0; }

@media (max-width: 992px) {
    .activity-detail-time-block { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .activity-detail-time-block { padding: 12px; }
    .time-value { font-size: 0.85rem; }
}
/* ===== 热门活动版块 ===== */
.activity-hot-section { padding: 40px 0; }
.activity-hot-section .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.activity-hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

.activity-hot-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
}
.activity-hot-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.activity-hot-card.ended { opacity: 0.7; }
.activity-hot-card.ended:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.activity-hot-img {
    width: 100%; height: 200px; overflow: hidden; background: #f5f5f5;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.activity-hot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.activity-hot-card:hover .activity-hot-img img { transform: scale(1.05); }

.activity-hot-status-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; color: #fff;
}
.activity-hot-status-badge.ongoing { background: #2e7d32; }
.activity-hot-status-badge.upcoming { background: #1565c0; }

.activity-hot-info { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.activity-hot-name {
    font-size: 1.1rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}
.activity-hot-name a { color: inherit; text-decoration: none; }
.activity-hot-name a:hover { color: var(--primary, #ff6a00); }

.activity-hot-time {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 0.85rem; color: #888;
}

/* ===== 热销商品版块 ===== */
.product-hot-section { padding: 40px 0; }
.product-hot-section .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.product-hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.product-hot-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;
}
.product-hot-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

.product-hot-img {
    width: 100%; height: 200px; overflow: hidden; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
}
.product-hot-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-hot-info { padding: 16px; }
.product-hot-name { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.product-hot-name a { color: var(--text); text-decoration: none; }
.product-hot-name a:hover { color: var(--primary, #ff6a00); }
.product-hot-category { font-size: 0.85rem; color: #888; }

/* 响应式 */
@media (max-width: 768px) {
    .activity-hot-grid, .product-hot-grid { grid-template-columns: 1fr; gap: 16px; }
    .activity-hot-img { height: 160px; }
    .activity-hot-section, .product-hot-section { padding: 24px 0; }
}
@media (max-width: 480px) {
    .activity-hot-img { height: 140px; }
    .activity-hot-info { padding: 16px; }
    .activity-hot-name { font-size: 1rem; }
    .product-hot-grid { grid-template-columns: 1fr; }
}

/* ========== 首页优惠券版块 ========== */
.coupon-home-section {
    padding: 40px 0;
    background: linear-gradient(135deg, #ff6b35 0%, #e63946 50%, #c0392b 100%);
}
.coupon-home-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.coupon-home-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.coupon-home-section .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}
.coupon-home-section .section-title i {
    margin-right: 8px;
    color:var(--white);
}
.coupon-home-section .more-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.coupon-home-section .more-link:hover {
    color: #fff;
}
.coupon-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.coupon-home-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    min-height: 90px;
}
.coupon-home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.coupon-home-card.status-upcoming {
    opacity: 0.85;
}
.coupon-home-card .coupon-amount {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #ff6b35, #e63946);
    border-radius: 50%;
    color: #fff;
    line-height: 1;
}
.coupon-home-card .coupon-amount .cp-symbol {
    font-size: 0.75rem;
    font-weight: 600;
}
.coupon-home-card .coupon-amount .cp-value {
    font-size: 1.6rem;
    font-weight: 800;
}
.coupon-home-card.status-upcoming .coupon-amount {
    background: linear-gradient(135deg, #888, #666);
}
.coupon-home-card .coupon-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.coupon-home-card .coupon-info .cp-shop {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.coupon-home-card .coupon-info .cp-condition {
    font-size: 0.78rem;
    color: #e63946;
    margin: 0;
}
.coupon-home-card .coupon-info .cp-time {
    font-size: 0.72rem;
    color: #999;
    margin: 0;
}
.coupon-home-card .coupon-info .cp-received {
    font-size: 0.7rem;
    color: #aaa;
}
.coupon-home-card .cp-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    background: #e63946;
    color: #fff;
    transition: background 0.2s;
    white-space: nowrap;
}
.coupon-home-card .cp-btn:hover {
    background: #c0392b;
    color: #fff;
}
.coupon-home-card.status-upcoming .cp-btn {
    background: #888;
}
.coupon-home-card.status-upcoming .cp-btn:hover {
    background: #666;
}
.coupon-home-section .section-more {
    text-align: center;
    margin-top: 28px;
}
.coupon-home-section .section-more .more-btn {
    display: inline-block;
    padding: 10px 32px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 24px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.coupon-home-section .section-more .more-btn:hover {
    background: rgba(255,255,255,0.35);
    color: #fff;
}
@media (max-width: 992px) {
    .coupon-home-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .coupon-home-grid { grid-template-columns: repeat(2, 1fr); }
    .coupon-home-section { padding: 28px 0; }
}
@media (max-width: 480px) {
    .coupon-home-grid { grid-template-columns: 1fr; }
    .coupon-home-card { min-height: 80px; }
}

/* ========== 首页优惠券版块（重构版） ========== */
.coupon-home-section {
    padding: 32px 0;
    background: linear-gradient(135deg, #ff6b35 0%, #e63946 100%);
}
.coupon-home-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.coupon-home-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.coupon-home-section .section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.coupon-home-section .section-title i {
    margin-right: 8px;
}
.coupon-home-section .more-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.88rem;
}
.coupon-home-section .more-link:hover {
    color: #fff;
}

/* 网格布局 */
.coupon-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* 卡片布局 */
.coupon-home-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.coupon-home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.coupon-home-card.status-upcoming {
    opacity: 0.75;
}

/* 左侧金额盒子 */
.coupon-amount-box {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    height: 50px;
    padding: 4px 8px;
    background: #e63946;
    border-radius: 6px;
    color: #fff;
    line-height: 1;
}
.coupon-amount-box .cp-currency {
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 2px;
}
.coupon-amount-box .cp-number {
    font-size: 1.5rem;
    font-weight: 800;
}
.status-upcoming .coupon-amount-box {
    background: #999;
}

/* 中间店铺信息 */
.coupon-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.coupon-detail .cp-shop-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.coupon-detail .cp-condition {
    font-size: 0.78rem;
    color: #e63946;
    margin: 0;
    font-weight: 500;
}
.coupon-detail .cp-date {
    font-size: 0.72rem;
    color: #999;
    margin: 0;
}

/* 右侧按钮 */
.cp-btn-action {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    background: #e63946;
    color: #fff;
    transition: background 0.2s;
    white-space: nowrap;
}
.cp-btn-action:hover {
    background: #c0392b;
    color: #fff;
}
.status-upcoming .cp-btn-action {
    background: #aaa;
}
.status-upcoming .cp-btn-action:hover {
    background: #888;
}

/* 底部更多按钮 */
.coupon-home-section .section-more {
    text-align: center;
    margin-top: 20px;
}
.coupon-home-section .section-more .more-btn {
    display: inline-block;
    padding: 8px 28px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.2s;
}
.coupon-home-section .section-more .more-btn:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

/* 响应式 */
@media (max-width: 992px) {
    .coupon-home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .coupon-home-grid { grid-template-columns: 1fr; gap: 10px; }
    .coupon-home-section { padding: 24px 0; }
    .coupon-home-section .section-title { font-size: 1.2rem; }
}
/* ========== 优惠券列表页 coupons.php ========== */

/* Hero */
.cp-hero {
    padding: 48px 0;
    background: linear-gradient(135deg, #ff6b35 0%, #e63946 100%);
    text-align: center;
}
.cp-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.cp-hero-title { font-size: 2rem; font-weight: 700; color: #fff; margin: 0 0 8px 0; }
.cp-hero-sub { font-size: 1rem; color: rgba(255,255,255,0.9); margin: 0; }

/* 筛选栏 */
.cp-filter { padding: 20px 0; background: #f5f5f5; border-bottom: 1px solid #eee; }
.cp-filter .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.cp-filter-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cp-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; min-width: 200px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
.cp-input:focus { border-color: #e63946; }
.cp-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; outline: none; }
.cp-select:focus { border-color: #e63946; }
.cp-btn-submit { padding: 8px 20px; background: #e63946; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background 0.2s; }
.cp-btn-submit:hover { background: #c0392b; }
.cp-btn-clear { padding: 8px 16px; color: #666; text-decoration: none; font-size: 0.9rem; }
.cp-btn-clear:hover { color: #333; }

/* 列表区域 */
.cp-list { padding: 40px 0; }
.cp-list .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* 网格 */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* 卡片 */
.cp-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; gap: 12px; }
.cp-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* 卡片主体 */
.cp-card-body { display: flex; align-items: center; gap: 16px; }
.cp-card-inactive { opacity: 0.65;}
.cp-amount-box { flex-shrink: 0; width: auto; height: 50px; min-width: 100px; padding:5px; background: #e63946; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.cp-amount-inactive { background: #999; }
.cp-currency { font-size: 0.85rem; font-weight: 600; }
.cp-number { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.cp-info { flex: 1; min-width: 0; }
.cp-shop-name { font-size: 1rem; font-weight: 600; color: #222; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-condition { font-size: 0.85rem; color: #e63946; margin: 0; font-weight: 500; }

/* 卡片底部 */
.cp-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #999; }
.cp-date {}
.cp-received {}

/* 卡片按钮 */
.cp-btn-grab { display: block; text-align: center; padding: 9px; background: #275d3e; color: #fff; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: background 0.2s; }
.cp-btn-grab:hover { background: #27ae60; color: #fff; }
.cp-btn-pending { text-align: center; padding: 9px; background: #999; color: #fff; border-radius: 4px; font-size: 0.9rem;display: inline-flex; align-items: center; justify-content: center; flex:1;}

/* 分页 */
.cp-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.cp-page-btn { padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; font-size: 0.9rem; transition: border-color 0.2s, color 0.2s; }
.cp-page-btn:hover { border-color: #e63946; color: #e63946; }
.cp-page-current { padding: 8px 16px; background: #e63946; color: #fff; border-radius: 4px; font-size: 0.9rem; }

/* 空状态 */
.cp-empty { text-align: center; padding: 60px 20px; color: #999; }
.cp-empty-title { font-size: 1.2rem; margin-bottom: 12px; color: #666; }

/* 响应式 */
@media (max-width: 768px) {
    .cp-hero { padding: 36px 0; }
    .cp-hero-title { font-size: 1.5rem; }
    .cp-list { padding: 28px 0; }
    .cp-grid { grid-template-columns: 1fr; }
    .cp-filter-form { gap: 8px; }
    .cp-input { min-width: 140px; }
}

/* ===== 优惠券详情页 ===== */
.cp-detail-hero {
    background: linear-gradient(135deg, #ff6b35 0%, #ff3d00 100%);
    color: #fff;
    padding: 48px 0 40px;
    text-align: center;
}
.cp-detail-hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}
.cp-detail-hero-sub {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}
.cp-detail { padding: 32px 0 48px; }
.cp-detail-card {
    display: flex;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}
.cp-detail-amount-col {
    width: 280px;
    min-width: 280px;
    background: linear-gradient(160deg, #ff6b35 0%, #e91e63 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    gap: 16px;
}
.cp-detail-amount-box { text-align: center; color: #fff; }
.cp-detail-currency { font-size: 1.8rem; font-weight: 700; vertical-align: top; margin-right: 2px; }
.cp-detail-number { font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.cp-detail-condition { display: block; font-size: 0.9rem; opacity: 0.9; margin-top: 8px; }
.cp-detail-amount-inactive { opacity: 0.6; }
.cp-status-badge {
    font-size: 0.85rem;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.cp-status-badge.active  { background: rgba(76,175,80,0.85); }
.cp-status-badge.pending { background: rgba(255,193,7,0.9); color: #333; }
.cp-status-badge.expired { background: rgba(158,158,158,0.85); }
.cp-detail-info-col {
    flex: 1;
    padding: 36px 36px 36px 32px;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.cp-detail-shop-name { font-size: 1.5rem; font-weight: 700; color: #222; margin-bottom: 20px; margin-top: 0; }
.cp-detail-meta-list { margin-bottom: 28px; }
.cp-detail-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}
.cp-detail-meta-item:last-child { border-bottom: none; }
.cp-meta-label { color: #888; min-width: 90px; display: flex; align-items: center; gap: 6px; }
.cp-meta-label i { font-size: 0.85rem; }
.cp-meta-value { color: #333; flex: 1; }
.cp-meta-value a { color: #ff6600; text-decoration: none; }
.cp-meta-value a:hover { text-decoration: underline; }
.cp-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.cp-detail-actions .btn-visit { padding: 12px 28px; font-size: 1rem; }
.cp-detail-actions .btn-coupon { background: linear-gradient(135deg, #ff6b35, #ff3d00); color: #fff; border: none; }
.cp-detail-actions .btn-coupon:hover { background: linear-gradient(135deg, #ff5722, #e64a19); transform: translateY(-1px); }
.cp-detail-actions .btn-disabled { background: #e0e0e0; color: #9e9e9e; cursor: not-allowed; pointer-events: none; }
.cp-detail-desc-block, .cp-detail-shop-block {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cp-desc-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-desc-title i { color: #ff6600; }
.cp-desc-content { font-size: 0.95rem; color: #555; line-height: 1.8; white-space: pre-wrap; }
.cp-shop-recommend-card { display: flex; align-items: center; gap: 20px; padding: 8px 0; }
.cp-shop-recommend-logo {
    width: 72px; height: 72px; border-radius: 12px;
    overflow: hidden; flex-shrink: 0;
    background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
}
.cp-shop-recommend-logo img { width: 100%; height: 100%; object-fit: cover; }
.cp-shop-logo-placeholder { color: #ccc; font-size: 2rem; }
.cp-shop-recommend-info { flex: 1; }
.cp-shop-recommend-name { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
.cp-shop-recommend-name a { color: #222; text-decoration: none; }
.cp-shop-recommend-name a:hover { color: #ff6600; }
.cp-shop-recommend-cat { font-size: 0.85rem; color: #888; margin: 0 0 4px; }
.cp-shop-recommend-loc { font-size: 0.85rem; color: #aaa; margin: 0; }
.cp-shop-recommend-loc i { margin-right: 4px; }
.cp-shop-recommend-action { flex-shrink: 0; }
@media (max-width: 768px) {
    .cp-detail-hero { padding: 32px 0 28px; }
    .cp-detail-hero-title { font-size: 1.5rem; }
    .cp-detail-card { flex-direction: column; }
    .cp-detail-amount-col {
        width: 100%; min-width: unset;
        padding: 28px 24px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .cp-detail-number { font-size: 3rem; }
    .cp-detail-info-col { padding: 24px 20px; }
    .cp-detail-shop-name { font-size: 1.2rem; }
    .cp-detail-actions .btn-visit { padding: 10px 20px; font-size: 0.95rem; }
    .cp-shop-recommend-card { flex-wrap: wrap; }
    .cp-shop-recommend-action { width: 100%; }
    .cp-shop-recommend-action .btn-detail { display: block; text-align: center; }
}

/* 优惠券卡片按钮组 */
.cp-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.cp-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: #ff6600;
    background: #fff;
    border: 1px solid #ff6600;
    transition: all 0.2s ease;
    flex: 1;
}
.cp-btn-detail:hover {
    background: #fff5f0;
    border-color: #ff5500;
    color: #ff5500;
}
.cp-card-actions .cp-btn-grab {
    flex: 1;
}



/* 搜索框 */
.cp-search-box {
    margin-bottom: 16px;
}

.cp-search-form {
    display: flex;
    gap: 8px;
}

.cp-search-input {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}

.cp-search-input:focus {
    border-color: #e63946;
}

.cp-search-input::placeholder {
    color: #aaa;
}

.cp-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff6b35 0%, #e63946 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.cp-search-btn:hover {
    opacity: 0.9;
}

.cp-search-btn svg {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cp-search-form {
        max-width: 100%;
    }
}

.tips {
    padding: 12px 16px;
    background: #fff8f0;
    border: 1px solid #f0d9c0;
    border-left: 4px solid #e63946;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}

.tag-item{
    padding: 3px 6px;
    background: #fff8f0;
    border: 1px solid #f0d9c0;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #666;
    margin-right:3px;
}

/* ========== 二维码 tooltip（按钮下方） ========== */
.qr-trigger-wrap { position: relative; display: inline-block; vertical-align: top; }
/* 按钮本身，移除了 inline-block 让它撑开宽度 */
.qr-trigger-wrap .btn-visit { display: inline-block; }
/* tooltip 放在按钮外部，作为 wrap 的直接子元素 */
.qr-tooltip {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(100% + 10px);   /* 紧贴按钮下方 */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    text-align: center;
    white-space: nowrap;
}
/* 鼠标悬停在 wrap 时显示 tooltip（不用按钮悬停） */
.qr-trigger-wrap:hover > .qr-tooltip { display: block; }
/* 鼠标移到 tooltip 上也要保持显示 */
.qr-tooltip:hover { display: block; }
.qr-tooltip .qr-loading { font-size: 12px; color: #999; padding: 16px 8px; display: block; }
.qr-tooltip .qr-code { display: block; margin: 0 auto; }
.qr-tooltip .qr-code img { margin: 0 auto; }
.qr-tooltip .qr-tip { font-size: 11px; color: #999; margin-top: 6px; display: block; }
/* 小三角箭头 */
.qr-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #fff;
}


/* ===== 店铺详情页 hover 二维码 ===== */
.shop-qr-hover { position: relative; display: inline-block; }
.shop-qr-popup {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    text-align: center;
    width:200px;
    height:auto;
}
/* 移入 hover 容器时显示二维码（按钮或二维码本身都算在容器内） */
.shop-qr-hover:hover .shop-qr-popup { display: block; }
.shop-qr-popup::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #fff;
}
.shop-qr-popup .shop-qr-tip { font-size: 11px; color: #999; margin-bottom: 10px; }