/* ============================================================
   主题系统 themes.css —— 春夏秋冬 4 套季节主题
   后台「主题管理」切换，body 挂 theme-1 ~ theme-4
   每套主题：布局骨架差异 + 双主色渐变，统一圆角风格
   ============================================================ */

/* 布局变量桥接：主题可改变侧栏方向与网格列数 */
body[class*="theme-"] .site-main { flex-direction: var(--main-dir, row); }
body[class*="theme-"] .product-grid { grid-template-columns: repeat(var(--grid-cols, 4), 1fr); gap: var(--grid-gap, 15px); }

/* 搜索按钮按季节配色 */
.theme-1 .search-form button { background: linear-gradient(135deg, #22c55e, #f472b6); }
.theme-2 .search-form button { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.theme-3 .search-form button { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.theme-4 .search-form button { background: linear-gradient(135deg, #1e3a8a, #38bdf8); }
.theme-1 .search-form input:focus { border-color: #22c55e; }
.theme-2 .search-form input:focus { border-color: #0ea5e9; }
.theme-3 .search-form input:focus { border-color: #ea580c; }
.theme-4 .search-form input:focus { border-color: #1e3a8a; }

/* ========== 主题1 春季 · 花开春意（樱花背景 + 嫩绿粉点缀） ==========
   布局：单行导航（logo 左上 + 菜单右侧）、4列大圆角卡片 */
body.theme-1 {
    --main-dir: row;
    --grid-cols: 4;
    --grid-gap: 16px;
    background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('bg/spring.jpg') center/cover no-repeat fixed;
    color: #23402f;
}
body.theme-1 a:hover { color: #16a34a; }
body.theme-1 .site-header { background: rgba(255,255,255,0.94); border-bottom: none; box-shadow: 0 2px 18px rgba(34,197,94,0.12); }
body.theme-1 .header-inner { justify-content: space-between; }
body.theme-1 .logo { font-size: 30px; }
body.theme-1 .logo a { background: linear-gradient(90deg, #16a34a, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.theme-1 .main-nav ul { gap: 8px; }
body.theme-1 .main-nav li a { border-radius: 22px; padding: 7px 24px; }
body.theme-1 .main-nav li a:hover { color: #16a34a; background: #dcfce7; }
body.theme-1 .main-nav li a.active { background: linear-gradient(90deg, #22c55e, #f472b6); color: #fff; box-shadow: 0 4px 12px rgba(244,114,182,0.35); }
body.theme-1 .menu-toggle span { background: #16a34a; }
body.theme-1 .sidebar-box { border: none; background: rgba(255,255,255,0.96); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(34,197,94,0.08); }
body.theme-1 .sidebar-title { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #fff; }
body.theme-1 .sidebar-list li a:hover { background: #dcfce7; color: #15803d; padding-left: 20px; }
body.theme-1 .sidebar-list li a.active { color: #16a34a; }
body.theme-1 .banner { border-radius: 18px; }
body.theme-1 .banner-text { background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(244,114,182,0.9)); border-radius: 40px; letter-spacing: 1px; box-shadow: 0 8px 24px rgba(34,197,94,0.3); }
body.theme-1 .section-title { border-bottom: none; }
body.theme-1 .section-title h2 { color: #15803d; }
body.theme-1 .section-title h2::before { content: ""; display: inline-block; width: 12px; height: 20px; border-radius: 6px; background: linear-gradient(180deg, #22c55e, #fde047); margin-right: 8px; vertical-align: -3px; }
body.theme-1 .product-card { border: 1px solid #dcfce7; border-radius: 16px; background: #fff; overflow: hidden; }
body.theme-1 .product-card:hover { border-color: #86efac; box-shadow: 0 12px 26px rgba(34,197,94,0.16); transform: translateY(-3px); }
body.theme-1 .product-card .product-img { border-radius: 10px; overflow: hidden; }
body.theme-1 .product-card .price { color: #16a34a; }
body.theme-1 .product-card .btn-buy { background: linear-gradient(90deg, #22c55e, #14b8a6); border-radius: 22px; }
body.theme-1 .product-card .btn-buy:hover { background: #15803d; }
body.theme-1 .pagination a { border-radius: 20px; }
body.theme-1 .pagination a:hover, body.theme-1 .pagination a.active { background: linear-gradient(90deg, #22c55e, #14b8a6); border-color: transparent; }
body.theme-1 .site-footer { background: linear-gradient(135deg, #14532d, #065f46); }
body.theme-1 .site-footer a { color: #bbf7d0 !important; }
body.theme-1 .site-footer h3 { color: #86efac; }
body.theme-1 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); color: #6ee7b7; }
body.theme-1 .detail-price { color: #16a34a; }
body.theme-1 .detail-content h3 { color: #15803d; }
body.theme-1 .main-image { border-radius: 14px; border-color: #dcfce7; }
body.theme-1 .about-content, body.theme-1 .contact-content, body.theme-1 .news-detail { border: 1px solid #dcfce7; border-radius: 16px; background: #fff; }
body.theme-1 .news-list li a:hover { color: #16a34a; }

/* ========== 主题2 夏季 · 清爽海洋（海天背景 + 浅天蓝点缀） ==========
   布局：通栏浅蓝渐变导航、侧栏居右、4列圆角卡片 */
body.theme-2 {
    --main-dir: row-reverse;
    --grid-cols: 4;
    --grid-gap: 15px;
    background: linear-gradient(rgba(255,255,255,0.52), rgba(255,255,255,0.52)), url('bg/summer.jpg') center/cover no-repeat fixed;
    color: #173b52;
}
body.theme-2 a:hover { color: #0284c7; }
body.theme-2 .site-header { background: linear-gradient(90deg, #bae6fd, #e0f2fe, #bae6fd); border-bottom: none; box-shadow: 0 3px 16px rgba(14,165,233,0.18); }
body.theme-2 .header-inner { justify-content: space-between; }
body.theme-2 .logo a { color: #0369a1; }
body.theme-2 .main-nav li a { color: #0c4a6e; border-radius: 20px; }
body.theme-2 .main-nav li a:hover { color: #0369a1; background: rgba(255,255,255,0.85); }
body.theme-2 .main-nav li a.active { background: linear-gradient(90deg, #0ea5e9, #22d3ee); color: #fff; box-shadow: 0 4px 12px rgba(14,165,233,0.4); }
body.theme-2 .menu-toggle span { background: #0369a1; }
body.theme-2 .sidebar-box { border: none; background: rgba(255,255,255,0.96); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(14,165,233,0.1); }
body.theme-2 .sidebar-title { background: linear-gradient(135deg, #0ea5e9, #22d3ee); color: #fff; }
body.theme-2 .sidebar-list li a:hover { background: #e0f2fe; color: #0369a1; padding-left: 20px; }
body.theme-2 .sidebar-list li a.active { color: #0284c7; }
body.theme-2 .banner { border-radius: 14px; }
body.theme-2 .banner-text { background: linear-gradient(135deg, rgba(14,165,233,0.9), rgba(34,211,238,0.9)); border-radius: 30px; box-shadow: 0 8px 24px rgba(14,165,233,0.35); }
body.theme-2 .section-title { border-bottom: 2px solid #bae6fd; }
body.theme-2 .section-title h2 { color: #0369a1; }
body.theme-2 .section-title h2::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #0ea5e9, #facc15); margin-top: 5px; }
body.theme-2 .product-card { border: 1px solid #bae6fd; border-radius: 12px; background: #fff; overflow: hidden; }
body.theme-2 .product-card:hover { border-color: #7dd3fc; box-shadow: 0 10px 24px rgba(14,165,233,0.16); transform: translateY(-3px); }
body.theme-2 .product-card .price { color: #0284c7; }
body.theme-2 .product-card .btn-buy { background: linear-gradient(90deg, #0ea5e9, #22d3ee); border-radius: 8px; }
body.theme-2 .product-card .btn-buy:hover { background: #0369a1; }
body.theme-2 .pagination a { border-radius: 6px; }
body.theme-2 .pagination a:hover, body.theme-2 .pagination a.active { background: linear-gradient(90deg, #0ea5e9, #22d3ee); border-color: transparent; }
body.theme-2 .site-footer { background: linear-gradient(135deg, #082f49, #0c4a6e); }
body.theme-2 .site-footer a { color: #bae6fd !important; }
body.theme-2 .site-footer h3 { color: #7dd3fc; }
body.theme-2 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); color: #7dd3fc; }
body.theme-2 .detail-price { color: #0284c7; }
body.theme-2 .detail-content h3 { color: #0369a1; }
body.theme-2 .main-image { border-radius: 12px; border-color: #bae6fd; }
body.theme-2 .about-content, body.theme-2 .contact-content, body.theme-2 .news-detail { border: 1px solid #bae6fd; border-radius: 14px; background: #fff; }
body.theme-2 .news-list li a:hover { color: #0284c7; }

/* ========== 主题3 秋季 · 金秋丰收（枫林背景 + 橙金点缀） ==========
   布局：深色橙棕渐变通栏导航、侧栏居左、3列大卡片 */
body.theme-3 {
    --main-dir: row;
    --grid-cols: 3;
    --grid-gap: 22px;
    background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('bg/autumn.jpg') center/cover no-repeat fixed;
    color: #4a2c12;
}
body.theme-3 a:hover { color: #ea580c; }
body.theme-3 .site-header { background: linear-gradient(90deg, #431407, #7c2d12, #431407); border-bottom: 3px solid #f59e0b; box-shadow: 0 4px 20px rgba(124,45,18,0.35); }
body.theme-3 .header-inner { justify-content: space-between; }
body.theme-3 .logo a { color: #fcd34d; text-shadow: 0 2px 6px rgba(0,0,0,0.3); letter-spacing: 2px; }
body.theme-3 .main-nav li a { color: #fde9d0; }
body.theme-3 .main-nav li a:hover { color: #fff; background: rgba(245,158,11,0.22); }
body.theme-3 .main-nav li a.active { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #431407; font-weight: bold; }
body.theme-3 .menu-toggle span { background: #fcd34d; }
body.theme-3 .sidebar-box { border: 1px solid #f3d9b0; background: #fffdf8; border-radius: 14px; overflow: hidden; }
body.theme-3 .sidebar-title { background: linear-gradient(135deg, #c2410c, #f59e0b); color: #fff; }
body.theme-3 .sidebar-list li a:hover { background: #fef0dc; color: #c2410c; padding-left: 20px; }
body.theme-3 .sidebar-list li a.active { color: #c2410c; }
body.theme-3 .banner { border-radius: 14px; }
body.theme-3 .banner-text { background: linear-gradient(135deg, rgba(194,65,12,0.92), rgba(245,158,11,0.92)); letter-spacing: 2px; box-shadow: 0 8px 24px rgba(194,65,12,0.35); }
body.theme-3 .section-title { border-bottom: 2px solid #f3d9b0; }
body.theme-3 .section-title h2 { color: #9a3412; }
body.theme-3 .section-title h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #ea580c, #f59e0b); margin-top: 5px; }
body.theme-3 .product-card { border: 1px solid #f3d9b0; border-radius: 14px; background: #fffdf8; overflow: hidden; position: relative; }
body.theme-3 .product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ea580c, #f59e0b, #fbbf24); opacity: 0; transition: opacity 0.3s; }
body.theme-3 .product-card:hover { border-color: #f59e0b; box-shadow: 0 12px 28px rgba(194,65,12,0.16); transform: translateY(-3px); }
body.theme-3 .product-card:hover::before { opacity: 1; }
body.theme-3 .product-card .product-img { border-radius: 10px; overflow: hidden; }
body.theme-3 .product-card .price { color: #c2410c; }
body.theme-3 .product-card .btn-buy { background: linear-gradient(90deg, #c2410c, #f59e0b); border-radius: 20px; }
body.theme-3 .product-card .btn-buy:hover { background: #9a3412; }
body.theme-3 .pagination a { border-radius: 20px; }
body.theme-3 .pagination a:hover, body.theme-3 .pagination a.active { background: linear-gradient(90deg, #c2410c, #f59e0b); border-color: transparent; color: #fff; }
body.theme-3 .site-footer { background: linear-gradient(135deg, #431407, #7c2d12); border-top: 3px solid #f59e0b; }
body.theme-3 .site-footer a { color: #fed7aa !important; }
body.theme-3 .site-footer h3 { color: #fbbf24; letter-spacing: 2px; }
body.theme-3 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); color: #fdba74; }
body.theme-3 .detail-price { color: #c2410c; }
body.theme-3 .detail-content h3 { color: #9a3412; }
body.theme-3 .main-image { border-radius: 14px; border-color: #f3d9b0; }
body.theme-3 .about-content, body.theme-3 .contact-content, body.theme-3 .news-detail { border: 1px solid #f3d9b0; border-radius: 14px; background: #fffdf8; }
body.theme-3 .news-list li a:hover { color: #c2410c; }

/* ========== 主题4 冬季 · 冰雪纯净（雪景背景 + 冰蓝点缀） ==========
   布局：居中导航、侧栏居左、4列大圆角无框卡片 */
body.theme-4 {
    --main-dir: row;
    --grid-cols: 4;
    --grid-gap: 18px;
    background: linear-gradient(rgba(255,255,255,0.58), rgba(255,255,255,0.58)), url('bg/winter.jpg') center/cover no-repeat fixed;
    color: #1e3a5f;
}
body.theme-4 a:hover { color: #0284c7; }
body.theme-4 .site-header { background: rgba(255,255,255,0.92); border-bottom: 1px solid #e0ecf7; box-shadow: 0 2px 14px rgba(56,189,248,0.1); }
body.theme-4 .header-inner { justify-content: center; gap: 50px; }
body.theme-4 .logo { font-size: 30px; }
body.theme-4 .logo a { background: linear-gradient(90deg, #1e3a8a, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.theme-4 .main-nav li a { border-radius: 22px; }
body.theme-4 .main-nav li a:hover { color: #0369a1; background: #e0f2fe; }
body.theme-4 .main-nav li a.active { background: linear-gradient(90deg, #1e3a8a, #38bdf8); color: #fff; box-shadow: 0 4px 12px rgba(30,58,138,0.3); }
body.theme-4 .menu-toggle span { background: #1e3a8a; }
body.theme-4 .sidebar-box { border: none; background: rgba(255,255,255,0.95); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(56,189,248,0.1); }
body.theme-4 .sidebar-title { background: linear-gradient(135deg, #1e3a8a, #38bdf8); color: #fff; }
body.theme-4 .sidebar-list li a:hover { background: #e0f2fe; color: #0369a1; padding-left: 20px; }
body.theme-4 .sidebar-list li a.active { color: #0369a1; }
body.theme-4 .banner { border-radius: 20px; }
body.theme-4 .banner-text { background: linear-gradient(135deg, rgba(30,58,138,0.88), rgba(56,189,248,0.88)); border-radius: 44px; letter-spacing: 2px; font-weight: 400; box-shadow: 0 8px 26px rgba(30,58,138,0.3); }
body.theme-4 .section-title { border-bottom: 1px solid #e0ecf7; }
body.theme-4 .section-title h2 { color: #1e3a8a; font-weight: 600; }
body.theme-4 .section-title h2::before { content: ""; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #e0f2fe); margin-right: 8px; vertical-align: -3px; }
body.theme-4 .product-card { border: none; border-radius: 18px; background: #fff; overflow: hidden; padding: 12px 12px 14px; box-shadow: 0 2px 8px rgba(56,189,248,0.06); }
body.theme-4 .product-card:hover { box-shadow: 0 14px 30px rgba(56,189,248,0.18); transform: translateY(-3px); }
body.theme-4 .product-card .product-img { border-radius: 12px; overflow: hidden; }
body.theme-4 .product-card .price { color: #0369a1; }
body.theme-4 .product-card .btn-buy { background: linear-gradient(90deg, #1e3a8a, #38bdf8); border-radius: 20px; }
body.theme-4 .product-card .btn-buy:hover { background: #1e3a8a; }
body.theme-4 .pagination a { border-radius: 20px; border-color: #cfe6f5; }
body.theme-4 .pagination a:hover, body.theme-4 .pagination a.active { background: linear-gradient(90deg, #1e3a8a, #38bdf8); border-color: transparent; }
body.theme-4 .site-footer { background: linear-gradient(135deg, #172554, #0c4a6e); }
body.theme-4 .site-footer a { color: #bae6fd !important; }
body.theme-4 .site-footer h3 { color: #7dd3fc; }
body.theme-4 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); color: #93c5fd; }
body.theme-4 .detail-price { color: #0369a1; }
body.theme-4 .detail-content h3 { color: #1e3a5f; }
body.theme-4 .main-image { border-radius: 16px; border-color: #e0ecf7; }
body.theme-4 .about-content, body.theme-4 .contact-content, body.theme-4 .news-detail { border: 1px solid #e0ecf7; border-radius: 18px; background: #fff; }
body.theme-4 .news-list li a:hover { color: #0284c7; }

/* ========== 手机端适配（双行导航收回单行，侧栏回顶部，不破版） ========== */
@media (max-width: 768px) {
    body.theme-1, body.theme-2, body.theme-3, body.theme-4 { background-attachment: scroll; }
    body.theme-1 .header-inner, body.theme-2 .header-inner, body.theme-3 .header-inner, body.theme-4 .header-inner {
        flex-direction: row !important; height: auto !important; min-height: 56px !important;
        padding: 0 10px !important; justify-content: space-between !important; gap: 0 !important;
        box-sizing: border-box !important; width: 100% !important;
    }
    body.theme-1 .main-nav.open { background: #fff; }
    body.theme-1 .main-nav.open li a { color: #23402f; }
    body.theme-1 .main-nav.open li a.active { background: linear-gradient(90deg, #22c55e, #f472b6); color: #fff; }
    body.theme-2 .main-nav.open { background: #e0f7ff; }
    body.theme-2 .main-nav.open li a { color: #173b52; }
    body.theme-2 .main-nav.open li a.active { background: linear-gradient(90deg, #0ea5e9, #22d3ee); color: #fff; }
    body.theme-3 .main-nav.open { background: #fdf6ec; }
    body.theme-3 .main-nav.open li a { color: #4a2c12; }
    body.theme-3 .main-nav.open li a.active { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #431407; }
    body.theme-4 .main-nav.open { background: #f0f9ff; }
    body.theme-4 .main-nav.open li a { color: #1e3a5f; }
    body.theme-4 .main-nav.open li a.active { background: linear-gradient(90deg, #1e3a8a, #38bdf8); color: #fff; }
    /* 移动端侧栏移到内容下方（所有主题一致），夏季主题的右侧栏不生效 */
    body.theme-2 .sidebar { width: 100% !important; order: 2 !important; }
    body.theme-2 .site-main { flex-direction: column !important; }
}
