/* ===== CSS变量定义 ===== */
:root {
    /* 高级感配色方案 */
    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-medium-gray: #e9ecef;
    --color-dark-gray: #6c757d;
    --color-charcoal: #495057;
    --color-black: #212529;
    --color-gold: #d4af37;
    --color-primary: #dc3545;

    /* 文字颜色 */
    --text-white: #ffffff;
    --text-black: #212529;
    --text-gray: #6c757d;
    --text-dark: #343a40;
    --text-muted: #868e96;

    /* 字体 */
    --font-primary: 'Noto Serif SC', serif;
    --font-secondary: 'Playfair Display', serif;

    /* 间距 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;
    --spacing-2xl: 5rem;
    --spacing-3xl: 6rem;
    --spacing-4xl: 8rem;
    --spacing-5xl: 10rem;
    --spacing-6xl: 12rem;

    /* 过渡效果 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 阴影 */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.2);

    /* 边框圆角 */
    --border-radius: 8px;
    --border-radius-large: 16px;
    --border-radius-lg: 12px;
    --border-radius-xl: 20px;
}

/* ===== 基础样式重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-black);
    background-color: var(--color-white);
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

/* ===== 通用组件 ===== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-family: var(--font-secondary);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.section-header--white .section-title {
    color: var(--text-white);
}

.section-header--white .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-width: fit-content;
}

.btn--primary {
    background-color: var(--color-black);
    color: var(--text-white);
    border-color: var(--color-black);
}

.btn--primary:hover {
    background-color: var(--color-charcoal);
    border-color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn--secondary {
    background-color: transparent;
    color: var(--text-white);
    border-color: var(--color-white);
}

.btn--secondary:hover {
    background-color: var(--color-white);
    color: var(--text-black);
}

.btn--white {
    background-color: var(--color-white);
    color: var(--text-black);
    border-color: var(--color-white);
}

.btn--white:hover {
    background-color: transparent;
    color: var(--text-white);
    border-color: var(--color-white);
}

.btn--large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

/* ===== 导航栏 ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    background-color: transparent;
    border-bottom: none;
    transition: var(--transition-normal);
    padding: var(--spacing-md) 0;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-sm) 0;
}

/* 移动端菜单遮罩层 */
.navbar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    z-index: 1900;
    pointer-events: none;
}

.navbar__overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

/* 左侧品牌区域 */
.navbar__brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar__brand a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* 中间导航菜单 */
.navbar__menu {
    align-items: center;
    flex: 1;
    justify-content: center;
}

.navbar__brand h1 {
    font-family: var(--font-secondary);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: var(--transition-normal);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    top:200px;
}

.navbar.scrolled .navbar__brand h1 {
    color: var(--text-black);
    text-shadow: none;
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.navbar__item {
    position: relative;
}

.navbar__link {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff; /* 确保首页导航栏文字为纯白色 */
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 增强文字阴影确保可读性 */
}

.navbar__link:hover,
.navbar__link.active {
    color: #ffffff; /* 悬停时保持纯白色 */
    transform: translateY(-1px);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); /* 悬停时增强阴影 */
}

.navbar.scrolled .navbar__link {
    color: var(--text-black);
    text-shadow: none;
}

.navbar.scrolled .navbar__link:hover,
.navbar.scrolled .navbar__link.active {
    color: var(--color-charcoal);
    transform: translateY(-1px);
}

.navbar__link i {
    font-size: 0.75rem;
    transition: var(--transition-fast);
}

.navbar__dropdown:hover .navbar__link i {
    transform: rotate(180deg);
}

/* 下拉菜单 */
.navbar__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    padding: var(--spacing-sm) 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-normal);
}

.navbar__dropdown:hover .navbar__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar__dropdown-menu li {
    padding: 0;
}

.navbar__dropdown-menu a {
    display: block;
    padding: 0.75rem var(--spacing-sm);
    color: var(--text-black);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.navbar__dropdown-menu a:hover {
    background-color: var(--color-light-gray);
    color: var(--color-charcoal);
}

/* 右侧用户功能区 */
.navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

/* 搜索功能 */
.navbar__search {
    position: relative;
}

.search-toggle {
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.navbar.scrolled .search-toggle {
    color: var(--text-black);
    text-shadow: none;
}

.search-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.scrolled .search-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 确保navbar__search容器有相对定位 */
.navbar__search {
    position: relative;
}

.search-box {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    min-width: 550px; /* 增加搜索框最小宽度以适应单选按钮 */
    max-width: 650px; /* 增加最大宽度 */
    z-index: 9911;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.search-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 确保搜索框不影响文档流 */
.search-box::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-white);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.search-box.focused {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(0) scale(1.02);
}

/* 搜索表单布局 */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 搜索类型单选按钮组样式 */
.search-type-radio-group {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 12px;
    justify-content: center;
}

.radio-option {
    position: relative;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--color-white);
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark);
    min-width: 80px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.radio-option label:hover {
    border-color: rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.radio-option input[type="radio"]:checked + label {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.radio-option label i {
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

/* 搜索输入和按钮区域 */
.search-input-section {
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 54px;
    width: 100%;
}

.search-input-section:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.search-input-section:focus-within {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15), 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* 搜索框内部元素间的分隔线 */
.search-type-selector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(220, 53, 69, 0.2), transparent);
}

/* 搜索按钮悬停效果增强 */
/* .search-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.search-submit:hover::after {
    left: 100%;
} */



/* 搜索输入区域样式 */
.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: stretch;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.search-input {
    flex: 1;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    outline: none;
    background: transparent;
    color: var(--color-dark);
    height: 100%;
    min-width: 350px; /* 扩展输入框最小宽度 */
}

.search-input::placeholder {
    color: #6c757d;
    font-style: italic;
}

.search-submit {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    border: none;
    padding: 1rem 1.5rem;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .search-submit:hover {
    background: linear-gradient(135deg, #c02a37, #b02a37);
    transform: scale(1.05);
}

.search-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.search-submit:hover::before {
    left: 100%;
}

.search-submit i {
    font-size: 1rem;
} */

/* 搜索状态指示器 */
.search-status {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.search-status.show {
    display: flex;
}

.search-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.search-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 搜索建议容器 */
.search-suggestions-container {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.search-suggestions-container.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-white);
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
    background-color: #f8f9fa;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-type {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.search-suggestion-type.product {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.search-suggestion-type.post {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.search-suggestion-type.page {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.search-suggestion-title {
    flex: 1;
    font-weight: 500;
    color: var(--color-dark);
}

.search-suggestion-meta {
    font-size: 0.8rem;
    color: #6c757d;
}

/* 搜索错误提示 */
.search-error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ff4757;
    color: white;
    padding: 8px 12px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 0.8rem;
    text-align: center;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 购物车功能 */
.navbar__cart {
    position: relative;
}

.cart-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 1.1rem;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.navbar.scrolled .cart-link {
    color: var(--text-black);
    text-shadow: none;
}

.cart-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.scrolled .cart-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff4757; /* 红色背景 */
    color: #ffffff; /* 白色文字 */
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 50%; /* 圆形角标 */
    min-width: 18px;
    height: 18px; /* 确保圆形 */
    text-align: center;
    line-height: 1;
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid #ffffff; /* 白色边框增强对比度 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

/* 购物车红色徽章样式 */
.cart-badge {
    display: block !important;
    background: linear-gradient(135deg, #ff4757, #ff3742);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    border: 2px solid var(--text-white);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.cart-count.show {
    display: flex !important; /* 当有商品时显示角标 */
    animation: cartBounce 0.3s ease-out; /* 添加动画效果 */
}

/* 购物车角标动画 */
@keyframes cartBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 购物车更新动画 */
.cart-link.cart-updated {
    animation: cartPulse 0.6s ease-out;
}

@keyframes cartPulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 通知样式 */
.notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.notification--success {
    background-color: #2ed573;
}

.notification--error {
    background-color: #ff4757;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* 购物车图标样式 */
.header-cart {
    position: relative;
    color: #ffffff; /* 确保购物车图标为纯白色 */
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.header-cart:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.cart-icon {
    font-size: 1.2rem;
    color: #ffffff;
}

.navbar.scrolled .header-cart {
    color: var(--text-black);
    text-shadow: none;
}

.navbar.scrolled .cart-icon {
    color: var(--text-black);
}

.navbar.scrolled .header-cart:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 用户图标样式 */
.user-icon {
    font-size: 1.1rem;
    color: #ffffff;
}

.navbar.scrolled .user-icon {
    color: var(--text-black);
}

/* 用户登录功能 */
.navbar__user .user-link {
    color: #ffffff; /* 确保用户链接为纯白色 */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    font-size: 0.9rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 增强文字阴影 */
}

.navbar.scrolled .navbar__user .user-link {
    color: var(--text-black);
    text-shadow: none;
}

.navbar__user .user-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.scrolled .navbar__user .user-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 移动端菜单切换按钮 */
.navbar__toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.navbar__toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--text-white);
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    transform-origin: center;
}

/* 移动端菜单切换按钮激活状态 */
.navbar__toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.navbar__toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar__toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.navbar.scrolled .navbar__toggle span {
    background-color: var(--color-black);
    box-shadow: none;
}

/* WordPress管理栏适配 */
.admin-bar .navbar {
    top: 32px; /* WordPress管理栏高度 */
}

/* 移动端WordPress管理栏适配 */
@media screen and (max-width: 782px) {
    .admin-bar .navbar {
        top: 46px; /* 移动端WordPress管理栏高度 */
    }

    /* 移动端菜单在管理栏存在时的位置调整 */
    .admin-bar .navbar__menu {
        top: calc(100% + 46px);
    }
}

/* 桌面端菜单在管理栏存在时的位置调整 */
@media screen and (min-width: 783px) {
    .admin-bar .navbar__menu {
        top: calc(100% + 32px);
    }
}

/* ===== Hero区域 ===== */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* 视频背景容器 - 优化填充效果 */
.hero__video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: -1;
    /* 确保视频完全填充容器 */
    min-width: 100%;
    min-height: 100%;
    /* 防止视频缩放问题 */
    transform: scale(1.02);
}

.hero__video.active {
    opacity: 1;
    z-index: 0;
}

/* Fallback静态图片 */
.hero__fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 当视频加载失败时显示fallback图片 */
.hero__background.video-error .hero__fallback-image {
    opacity: 1;
    z-index: 1;
}

.hero__background.video-error .hero__video-container {
    opacity: 0;
}

/* 视频加载状态 */
.hero__video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    z-index: 5;
    display: none;
}

.hero__background.loading .hero__video-loading {
    display: block;
}

/* 视频加载动画 */
.hero__video-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 性能优化：减少重绘 */
.hero__video {
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 确保视频完全填充，防止边缘留白 */
    transform: scale(1.01);
    transform-origin: center center;
}

/* 预加载优化 */
.hero__video:not(.active) {
    pointer-events: none;
}

/* 确保视频在所有浏览器中正确显示 */
.hero__video::-webkit-media-controls {
    display: none !important;
}

.hero__video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* 防止视频右键菜单 */
.hero__video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* 确保视频容器完全填充Hero区域 */
.hero {
    overflow: hidden;
}

.hero__background {
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* 针对不同屏幕比例的优化 */
@media (aspect-ratio: 16/9) {
    .hero__video {
        transform: scale(1.0);
    }
}

@media (aspect-ratio: 4/3) {
    .hero__video {
        transform: scale(1.05);
    }
}

@media (min-aspect-ratio: 21/9) {
    .hero__video {
        transform: scale(1.1);
    }
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    z-index: 0; /* 确保在图片之上 */
}

/* 导航栏完全透明，隐藏遮罩层 */
.hero__navbar-overlay {
    display: none; /* 完全隐藏遮罩层 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖整个Hero背景图片 */
    background: rgba(0, 0, 0, 0.35); /* 半透明黑灰 */
    backdrop-filter: blur(1px);
    transition: var(--transition-normal);
    z-index: 1; /* 位于Hero图片之上 */
    pointer-events: none; /* 确保不影响导航栏的交互 */
}

/* 当导航栏滚动获得白色背景时，减少遮罩层的效果 */
.hero__navbar-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.hero__content {
    text-align: center;
    color: var(--text-white);
    max-width: 800px;
    padding: 0 var(--spacing-sm);
}

.hero__title {
    font-family: var(--font-secondary);
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #ffffff;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.8),
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.9);
    position: relative;
    filter: brightness(1.1) contrast(1.2);
}

.hero__subtitle {
    font-size: 1.35rem;
    margin-bottom: var(--spacing-xl);
    color: #ffffff;
    opacity: 0.98;
    line-height: 1.7;
    font-weight: 400;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.01em;
    filter: brightness(1.05) contrast(1.1);
}

.hero__buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.hero__buttons .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 160px;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.hero__buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.hero__buttons .btn:hover::before {
    left: 100%;
}

.hero__buttons .btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #c41e3a 100%);
    border: none;
    color: white;
    transform: translateY(0);
}

.hero__buttons .btn--primary :hover {
    background: linear-gradient(135deg, #c41e3a 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(220, 53, 69, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
}
.wc-block-components-button__text{
    color:#fff;
}
.wc-block-cart__submit-container{
      background: linear-gradient(135deg, var(--color-primary) 0%, #c41e3a 100%);
    border: none;
    color: white;
    transform: translateY(0);
}
.wc-block-cart__submit-container:hover {
    background: linear-gradient(135deg, #c41e3a 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(220, 53, 69, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
}
.hero__buttons .btn--secondary {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: white;
    backdrop-filter: blur(10px);
    transform: translateY(0);
}

.hero__buttons .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(255, 255, 255, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 移除视频控制按钮和指示器样式 */

.hero__scroll {
    position: absolute;
    bottom: var(--spacing-lg);
    left: var(--spacing-xl);
    color: var(--text-white);
    font-size: 1.5rem;
    cursor: pointer;
    animation: bounce 2s infinite;
    z-index: 10;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ===== 服务区域 ===== */
.services {
    padding: var(--spacing-md) 0;
    background-color: var(--color-light-gray);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.service-card {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

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

.service-card__icon {
    width: 80px;
    height: 80px;
    background-color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-sm);
    transition: var(--transition-normal);
}

.service-card__icon i {
    font-size: 2rem;
    color: var(--text-white);
}
@media (max-width: 768px) {
    .service-card__icon i {
    font-size: 1rem;
    color: var(--text-white);
}
}

.service-card:hover .service-card__icon {
    transform: scale(1.1);
}

.service-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.service-card__description {
    color: var(--text-gray);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.service-card__link {
    color: var(--text-black);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
}

.service-card__link:hover {
    color: var(--color-charcoal);
    transform: translateX(5px);
}

/* ===== 精选案例区域 ===== */
.featured-portfolio {
    position: relative;
    padding: var(--spacing-xxl) 0;
    overflow: hidden;
}

.featured-portfolio__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.featured-portfolio__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-portfolio__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    z-index: -1;
}

.featured-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.portfolio-preview {
    position: relative;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    aspect-ratio: 4/3;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.portfolio-preview__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.portfolio-preview:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.portfolio-preview__link:hover {
    text-decoration: none;
}

.portfolio-preview__link h3,
.portfolio-preview__link p {
    color: inherit;
    text-decoration: none;
}

.portfolio-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-preview:hover img {
    transform: scale(1.08);
    filter: brightness(0.8);
}

.portfolio-preview__content {
    position: absolute;
    bottom: -20px; /* 向下移动20px */
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    padding-top: calc(var(--spacing-xl) + 20px); /* 增加顶部内边距以适应向下移动 */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 40%, /* 调整渐变位置 */
        rgba(0, 0, 0, 0.3) 70%, /* 调整渐变位置 */
        transparent 100%
    );
    color: var(--text-white);
    transform: translateY(0);
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-preview:hover .portfolio-preview__content {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.8) 40%, /* 调整渐变位置以配合向下移动 */
        rgba(0, 0, 0, 0.4) 70%, /* 调整渐变位置以配合向下移动 */
        transparent 100%
    );
}

.portfolio-preview__content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.portfolio-preview__content p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.95;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.6);
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* 添加一个始终可见的轻微文字提示 */
.portfolio-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.portfolio-preview:hover::after {
    opacity: 0;
}

.featured-portfolio__cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.featured-portfolio__cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 50px; /* 椭圆形状 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--color-primary) 0%, #c41e3a 100%);
    color: white;
    box-shadow:
        0 4px 15px rgba(220, 53, 69, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.featured-portfolio__cta .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.featured-portfolio__cta .btn:hover::before {
    left: 100%;
}

.featured-portfolio__cta .btn:hover {
    background: linear-gradient(135deg, #c41e3a 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(220, 53, 69, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ===== 关于我们预览区域 ===== */
.about-preview {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

@media (max-width: 768px) {
.about-preview {
    padding: var(--spacing-md) 0;
    background-color: var(--color-white);
}
}

.about-preview__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.about-preview__text {
    padding-right: var(--spacing-md);
}

.about-preview__text .section-title {
    text-align: left;
    margin-bottom: var(--spacing-sm);
}

.about-preview__description {
    font-size: 1.25rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
.about-preview__description {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}
}

.about-preview__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-sm);
}

.stat-number {
    font-family: var(--font-secondary);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-black);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-preview__image {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.about-preview__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 联系我们预览区域 ===== */
.contact-preview {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.contact-preview__content {
    max-width: 800px;
    margin: 0 auto;
}

.contact-info {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.contact-item__icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item__icon i {
    font-size: 1.25rem;
    color: var(--text-white);
}

.contact-item__content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.contact-item__content p {
    color: var(--text-gray);
    line-height: 1.6;
}

.contact-cta {
    text-align: center;
}

/* ===== 页脚 ===== */
.footer {
    background-color: var(--color-black);
    color: var(--text-white);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    align-items: start;
}

/* 左栏：联系信息、社交媒体、二维码 */
.footer__left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* 联系信息样式 */
.footer__contact h4 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.contact-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.contact-info i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* 社交媒体样式 */
.footer__social h4 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
}

.social-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.social-link:hover {
    color: var(--color-primary);
    background: rgba(220, 53, 69, 0.1);
    transform: translateY(-2px);
}

.social-link i {
    font-size: 1rem;
}

/* 微信客服二维码样式 */
.footer__qrcode h4 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.qr-code-container {
    text-align: center;
}

.qr-code-img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 2px solid rgba(220, 53, 69, 0.2);
    margin-bottom: var(--spacing-sm);
}

.qr-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin: 0;
}


.contact-info p {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.5;
}

.contact-info i {
    width: 18px;
    color: var(--text-white);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.9rem;
}


.social-links {
    display: flex;
    gap: var(--spacing-xs);
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.social-link:hover::before {
    left: 100%;
}

.social-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-link i {
    font-size: 1.1rem;
    color: var(--text-white);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.social-link span {
    flex: 1;
    white-space: nowrap;
}

/* ===== 微信二维码展示区域样式 ===== */
.wechat-qr-section {

}

.qr-section-title {
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.wechat-qr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.qr-item {
    text-align: center;
    padding: 5px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.qr-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.qr-item:hover::before {
    left: 100%;
}

.qr-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.qr-image-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-sm);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-white);
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.qr-item:hover .qr-image-container {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.2);
}

.qr-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjRjhGOUZBIi8+CjxwYXRoIGQ9Ik0yMCAyMEg2MFY2MEgyMFYyMFoiIGZpbGw9IiNFNUU3RUIiLz4KPHN2ZyBnPSIjOTk5OTk5IiBmb250LXNpemU9IjEycHgiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiI+Cjx0ZXh0IHg9IjQwIiB5PSI0NSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UVI8L3RleHQ+Cjwvc3ZnPgo=') center/contain no-repeat;
}

.qr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 53, 69, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.qr-item:hover .qr-overlay {
    opacity: 1;
}

.qr-overlay i {
    color: var(--color-white);
    font-size: 1.5rem;
}

.qr-title {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

.qr-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* 导航链接区域 */
.footer__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}



.footer__column h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-white);
}

.footer__column ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__column a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    transition: var(--transition-fast);
    text-decoration: none;
}

.footer__column a:hover {
    color: var(--text-white);
    padding-left: 0.25rem;
}

/* ===== 平台优势与流程介绍 ===== */
.platform-advantages {
    padding: var(--spacing-xl) 0;
    position: relative;
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.8) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(248, 249, 250, 0.9) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.platform-advantages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(220, 53, 69, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(220, 53, 69, 0.03) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.platform-advantages > .container {
    position: relative;
    z-index: 1;
}

.platform-advantages .section-header {
    margin-bottom: var(--spacing-xl);
}

/* 平台优势网格 */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

.advantage-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-large);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.advantage-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.advantage-item > * {
    position: relative;
    z-index: 1;
}

.advantage-item:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.advantage-item__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
}

.advantage-item__icon i {
    font-size: 2rem;
    color: var(--text-white);
}

.advantage-item:hover .advantage-item__icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

.advantage-item__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.advantage-item__description {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}

/* 服务流程部分 */
.process-section {
    margin-top: var(--spacing-xxl);
}

.process-section .section-header {
    margin-bottom: var(--spacing-xl);
}

.process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
}

.process-step {
    flex: 1;
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
    position: relative;
}

.process-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.process-step__number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.process-step__icon {
    width: 60px;
    height: 60px;
    margin: var(--spacing-md) auto var(--spacing-sm);
    background-color: var(--color-light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
}

.process-step__icon i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.process-step:hover .process-step__icon {
    background-color: var(--color-primary);
}

.process-step:hover .process-step__icon i {
    color: var(--text-white);
}

.process-step__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-xs);
}

.process-step__description {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}

.process-arrow {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}
/* ===== 推荐商品区域 ===== */
.recommended-products {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-light-gray);
}

.recommended-products .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* 确保商品卡片在不同屏幕尺寸下的响应式布局 */
@media (max-width: 1024px) {
    .recommended-products .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .recommended-products .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .recommended-products .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* 推荐商品按钮优化 */
.recommended-products .product-card__buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.recommended-products .product-card__buttons .btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.recommended-products .product-card__buttons .btn--secondary {
    flex: 1;
    min-width: 0;
    background-color: transparent;
    color: var(--text-black);
    border-color: var(--color-black);
}

.recommended-products .product-card__buttons .btn--secondary:hover {
    background-color: var(--color-black);
    color: var(--text-white);
}

.recommended-products .product-card__buttons .btn--primary {
    flex: 1;
    min-width: 0;
}

/* 法律合规信息 */
.footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md) 0;
    text-align: center;
}

.legal-info p {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.0rem;
    line-height: 1.4;
}

.legal-item {
    margin: 0 var(--spacing-xs);
}

.legal-item:not(:last-child)::after {
    content: " | ";
    color: rgba(255, 255, 255, 0.4);
}

/* 页脚底部 */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-md);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer__bottom a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-fast);
    text-decoration: none;
}

.footer__bottom a:hover {
    color: var(--text-white);
}

/* 页脚响应式设计 */
@media (max-width: 768px) {
    .footer__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer__left {
        gap: var(--spacing-md);
    }

    .footer-menu {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-md);
    }

    .social-links {
        justify-content: center;
    }

    /* 微信二维码响应式 - 平板端 */
    .wechat-qr-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .qr-image-container {
        width: 70px;
        height: 70px;
    }

    .qr-title {
        font-size: 0.85rem;
    }

    .qr-description {
        font-size: 0.7rem;
    }

    .qr-code-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .qr-code-img {
        width: 80px;
        height: 80px;
    }

    .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .social-links {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    /* 微信二维码响应式 - 移动端 */
    .wechat-qr-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }

    .qr-item {
        padding: var(--spacing-sm);
    }

    .qr-image-container {
        width: 60px;
        height: 60px;
    }

    .qr-title {
        font-size: 0.8rem;
    }

    .qr-description {
        font-size: 0.65rem;
    }

    .recommended-products .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .recommended-products .product-card__buttons .btn {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }

    /* 平台优势响应式 */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .process-flow {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .process-arrow {
        transform: rotate(90deg);
        margin: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: var(--spacing-md) 0;
    }

    .footer__links {
        grid-template-columns: 1fr;
    }

    .recommended-products .products-grid {
        grid-template-columns: 1fr;
    }

    .recommended-products .product-card__buttons {
        gap: var(--spacing-xs);
    }

    .recommended-products .product-card__buttons .btn {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
        min-width: 0;
        white-space: nowrap;
    }
}

/* 超小屏幕优化 */
@media (max-width: 320px) {
    .recommended-products .product-card__buttons {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .recommended-products .product-card__buttons .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* 平台优势移动端 */
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .advantage-item {
        padding: var(--spacing-md);
    }

    .advantage-item__icon {
        width: 60px;
        height: 60px;
    }

    .advantage-item__icon i {
        font-size: 1.5rem;
    }

    .process-step {
        padding: var(--spacing-md);
    }

    .process-step__icon {
        width: 50px;
        height: 50px;
    }

    .process-step__icon i {
        font-size: 1.25rem;
    }
}





/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .navbar .container {
        gap: var(--spacing-sm);
    }

    .navbar__menu {
        position: fixed;
        top: var(--navbar-height-mobile, 64px);
        left: 0;
        right: 0;
        background-color: var(--color-white);
        padding: var(--spacing-md);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - var(--navbar-height-mobile, 64px));
    }

    .navbar__menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar__link {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 0;
    display: flex;
    color: #333;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

    .navbar__nav {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
        width: 100%;
    }

    .navbar__actions {
        gap: var(--spacing-sm);
    }

    .navbar__user .user-text {
        display: none;
    }

    /* 搜索功能响应式 */
    .search-toggle .search-text {
        display: none;
    }

    .search-box {
        min-width: 400px;
        max-width: calc(100vw - 2rem);
        right: -1rem;
    }

    /* 单选按钮组响应式调整 */
    .search-type-radio-group {
        gap: 0.5rem;
        padding: 0.4rem;
    }

    .radio-option label {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        min-width: 70px;
    }

    .radio-option label i {
        font-size: 0.9rem;
    }

    /* 搜索输入区域响应式调整 */
    .search-input-section {
        min-height: 50px;
    }

    .search-input {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        min-width: 280px;
    }

    .search-submit {
        padding: 0.875rem 1.25rem;
        min-width: 50px;
    }

    .navbar__toggle {
        display: flex;
        position: relative;
        z-index: 2101; /* 确保切换按钮在菜单之上 */
    }

    .navbar__dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: var(--color-light-gray);
        margin-top: var(--spacing-xs);
        border-radius: var(--border-radius);
    }

    .hero__title {
        font-size: 2.8rem;
        line-height: 1.2;
        margin-bottom: var(--spacing-md);
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.4);
    }

    .hero__subtitle {
        font-size: 1.2rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
    }

    .hero__buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .hero__buttons .btn {
        width: 100%;
        max-width: 280px;
        padding: 0.9rem 2rem;
        font-size: 1rem;
    }

    /* 移动端视频优化 - 移除控制元素 */
    .hero__scroll {
        bottom: var(--spacing-sm);
        left: var(--spacing-lg);
        font-size: 1.3rem;
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .featured-portfolio__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* 移动端精选案例样式调整 */
    .portfolio-preview {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        border-radius: var(--border-radius) !important;
        overflow: hidden !important;
        aspect-ratio: auto !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        background: white !important;
    }

    .portfolio-preview:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .portfolio-preview img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
        transition: none !important;
        display: block !important;
    }

    .portfolio-preview:hover img {
        transform: none !important;
        filter: none !important;
    }

    /* 隐藏移动端的罩层和悬浮效果 */
    .portfolio-preview__content {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 8px !important;
        background: transparent !important;
        color: var(--text-black) !important;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .portfolio-preview:hover .portfolio-preview__content {
        background: transparent !important;
    }

    .portfolio-preview__content h3 {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        color: var(--text-black) !important;
        text-shadow: none !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .portfolio-preview__content p {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        opacity: 0.7 !important;
        text-shadow: none !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        color: var(--text-gray) !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 隐藏移动端的伪元素罩层 */
    .portfolio-preview::after {
        display: none !important;
    }

    .portfolio-preview:hover::after {
        display: none !important;
    }

    /* 移动端精选案例区域背景和文字颜色调整 */
    .featured-portfolio {
        background-color: var(--color-white) !important;
        position: relative !important;
    }

    .featured-portfolio__background {
        display: none !important;
    }

    .featured-portfolio__overlay {
        display: none !important;
    }

    /* 精选案例标题和副标题颜色调整 */
    .featured-portfolio .section-header--white .section-title {
        color: var(--text-black) !important;
    }

    .featured-portfolio .section-header--white .section-subtitle {
        color: var(--text-gray) !important;
    }

    /* 如果没有使用 section-header--white 类，直接覆盖 */
    .featured-portfolio .section-title {
        color: var(--text-black) !important;
    }

    .featured-portfolio .section-subtitle {
        color: var(--text-gray) !important;
    }

    /* 移动端精选案例按钮调整 */
    .featured-portfolio__cta .btn {
        padding: 0.8rem 2rem !important;
        font-size: 1rem !important;
        min-width: 160px !important;
        border-radius: 40px !important;
    }

    .about-preview__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .about-preview__text {
        padding-right: 0;
    }

    .about-preview__stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .footer__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .footer__contact-social {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .social-links {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .social-link {
        justify-content: flex-start;
        padding: 0.6rem var(--spacing-sm);
    }

    .legal-item {
        display: block;
        margin-right: 0;
        margin-bottom: 0.25rem;
    }

    .page-header__title {
        font-size: 2.5rem;
    }

    .service-content,
    .service-content--reverse {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        direction: ltr;
    }

    .service-text {
        padding: 0;
    }

    .contact-cta__buttons {
        flex-direction: column;
        align-items: center;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .contact-form {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .portfolio-filter__buttons {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--spacing-xs);
    }

    .filter-btn {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .about-intro__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .about-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .shop-filter__buttons {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--spacing-xs);
    }

    .filter-btn {
        flex-shrink: 0;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* 搜索功能小屏幕优化 */
    .search-toggle {
        padding: 0.6rem;
        border-radius: 50%;
        min-width: 44px;
        height: 44px;
        justify-content: center;
    }

    .search-box {
        min-width: 320px;
        max-width: calc(100vw - 1rem);
        right: -0.5rem;
        padding: 1rem;
    }

    /* 移动端单选按钮组调整 */
    .search-type-radio-group {
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.4rem;
    }

    .radio-option label {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
        min-width: auto;
        justify-content: flex-start;
    }

    .radio-option label i {
        font-size: 0.85rem;
    }

    /* 移动端搜索输入区域调整 */
    .search-input-section {
        flex-direction: column;
        min-height: auto;
        gap: 0.5rem;
    }

    .search-input-wrapper {
        margin-bottom: 0.5rem;
    }

    .search-input {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        border-radius: 8px;
        background: #f8f9fa;
        min-width: auto;
    }

    .search-submit {
        padding: 0.75rem;
        border-radius: 8px;
        width: 100%;
        min-width: auto;
    }

    .search-submit i {
        font-size: 0.9rem;
    }

    .hero__title {
        font-size: 2.2rem;
        line-height: 1.15;
        margin-bottom: var(--spacing-sm);
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.7),
            0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .hero__subtitle {
        font-size: 1.1rem;
        line-height: 1.5;
        padding: 0 var(--spacing-xs);
    }

    .hero__buttons .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        min-width: 140px;
    }

    .hero__scroll {
        bottom: var(--spacing-xs);
        left: var(--spacing-md);
        font-size: 1.2rem;
    }

    /* 小屏设备上优先显示静态图片以节省流量 */
    .hero__video-container {
        display: none;
    }

    .hero__fallback-image {
        opacity: 1 !important;
        z-index: 1 !important;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-preview__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-number {
        font-size: 2rem;
    }

    .footer__links {
        grid-template-columns: 1fr;
    }

    .footer__contact-social {
        grid-template-columns: 1fr;
    }

    .social-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }

    /* 微信二维码响应式 - 超小屏幕 */
    .wechat-qr-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin: 0 auto;
    }

    .qr-item {
        padding: var(--spacing-md);
        align-items: center;
        text-align: left;
        gap: var(--spacing-md);
    }

    .qr-image-container {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .qr-content {
        flex: 1;
    }

    .qr-title {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .qr-description {
        font-size: 0.7rem;
    }

    .social-link span {
        display: none;
    }

    .social-link {
        padding: 0.75rem;
        justify-content: center;
    }

    .social-link i {
        font-size: 1.2rem;
    }
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--color-dark-gray);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-charcoal);
}

/* ===== 选择文本样式 ===== */
::selection {
    background-color: var(--color-black);
    color: var(--text-white);
}

::-moz-selection {
    background-color: var(--color-black);
    color: var(--text-white);
}

/* ===== 焦点样式 ===== */
:focus {
    outline: 2px solid var(--color-charcoal);
    outline-offset: 2px;
}

/* ===== 页面标题区域 ===== */
.page-header {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 80px;
}

.page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    z-index: -1;
}

.page-header__content {
    text-align: center;
    color: var(--text-white);
}

.page-header__title {
    font-family: var(--font-secondary);
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.page-header__subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.9;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: var(--text-white);
    transition: var(--transition-fast);
}

.breadcrumb a:hover {
    opacity: 0.7;
}

/* ===== 服务详情区域 ===== */
.services-detail {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.service-section {
    margin-bottom: var(--spacing-xxl);
}

.service-section:last-child {
    margin-bottom: 0;
}

.service-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.service-content--reverse {
    direction: rtl;
}

.service-content--reverse > * {
    direction: ltr;
}

.service-text {
    padding: var(--spacing-md);
}

.service-title {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.service-description {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.service-features {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.service-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
    color: var(--text-black);
}

.service-features i {
    color: var(--color-black);
    font-size: 0.875rem;
}

.service-image {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.service-image:hover img {
    transform: scale(1.05);
}

/* ===== 联系我们CTA区域 ===== */
.contact-cta {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.contact-cta__content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-cta__content h2 {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.contact-cta__content p {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

.contact-cta__buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== 联系信息区域 ===== */
.contact-info-section {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius-large);
    transition: var(--transition-normal);
}

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

.contact-info-card__icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-card__icon i {
    font-size: 1.5rem;
    color: var(--text-white);
}

.contact-info-card__content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.contact-info-card__content p {
    color: var(--text-gray);
    line-height: 1.6;
}

.contact-info-card__content a {
    color: var(--text-gray);
    transition: var(--transition-fast);
}

.contact-info-card__content a:hover {
    color: var(--text-black);
}

/* ===== 联系表单区域 ===== */
.contact-form-section {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.contact-form-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.contact-form-text h2 {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.contact-form-text p {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.contact-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contact-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    color: var(--text-black);
}

.contact-feature i {
    color: var(--color-black);
    font-size: 0.875rem;
}

.contact-form-wrapper {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: var(--transition-fast);
    background-color: var(--color-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-charcoal);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== 地图区域 ===== */
.map-section {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.map-placeholder {
    height: 400px;
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius-large);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed var(--color-medium-gray);
}

.map-placeholder__content i {
    font-size: 3rem;
    color: var(--color-dark-gray);
    margin-bottom: var(--spacing-sm);
}

.map-placeholder__content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.map-placeholder__content p {
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

/* ===== 案例筛选区域 ===== */
.portfolio-filter {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-medium-gray);
}

.portfolio-filter__buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--text-white);
}

/* ===== 案例展示区域 ===== */
.portfolio-gallery {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.portfolio-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-normal);
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-lg);
    opacity: 0;
    transition: var(--transition-normal);
}

.portfolio-item:hover .portfolio-item__overlay {
    opacity: 1;
}

.portfolio-item__content {
    color: var(--text-white);
}

.portfolio-item__content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.portfolio-item__content p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.portfolio-item__category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}

/* ===== 关于我们页面样式 ===== */
.about-intro {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.about-intro__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.about-intro__text h2 {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.about-intro__text p {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.about-intro__text p:last-child {
    margin-bottom: 0;
}

.about-intro__image {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.about-intro__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.about-intro__image:hover img {
    transform: scale(1.05);
}

/* ===== 统计数据区域 ===== */
.about-stats {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.stat-card {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
}

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

.stat-number {
    font-family: var(--font-secondary);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.stat-description {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}

/* ===== 服务理念区域 ===== */
.about-philosophy {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.philosophy-item {
    text-align: center;
    padding: var(--spacing-lg);
}

.philosophy-item__icon {
    width: 80px;
    height: 80px;
    background-color: var(--color-light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    transition: var(--transition-normal);
}

.philosophy-item:hover .philosophy-item__icon {
    background-color: var(--color-black);
}

.philosophy-item__icon i {
    font-size: 2rem;
    color: var(--color-black);
    transition: var(--transition-normal);
}

.philosophy-item:hover .philosophy-item__icon i {
    color: var(--text-white);
}

.philosophy-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.philosophy-item p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* ===== 团队介绍区域 ===== */
.about-team {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.team-member {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.team-member__image {
    aspect-ratio: 1;
    overflow: hidden;
}

.team-member__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.team-member:hover .team-member__image img {
    transform: scale(1.05);
}

.team-member__info {
    padding: var(--spacing-lg);
    text-align: center;
}

.team-member__info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.team-member__position {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-dark-gray);
    margin-bottom: var(--spacing-sm);
}

.team-member__description {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* ===== 商城页面样式 ===== */
.shop-filter {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-medium-gray);
}

.shop-filter__buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.shop-products {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.product-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
    opacity: 1;
    transform: translateY(0);
}

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

.product-card__image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-slow);
    display: block;
    border: none;
    outline: none;
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.product-card__badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: var(--color-black);
    color: var(--text-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card__content {
    padding: var(--spacing-lg);
}

.product-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.product-card__description {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.product-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
}

.price-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-black);
}

.price-original {
    font-size: 1rem;
    color: var(--text-gray);
    text-decoration: line-through;
}

.price-unit {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.product-card__buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.product-card__btn {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
}

.product-card__buttons .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 80px;
}

.product-card__buttons .btn--secondary {
    flex: 0.8;
    min-width: 80px;
}

/* ===== 购买模态框 ===== */
.purchase-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.purchase-modal.active {
    opacity: 1;
    visibility: visible;
}

.purchase-modal__content {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
    max-width: 500px;
    width: 90%;
    text-align: center;
    transform: translateY(20px);
    transition: var(--transition-normal);
}

.purchase-modal.active .purchase-modal__content {
    transform: translateY(0);
}

.purchase-modal__content h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.purchase-modal__content p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.purchase-modal__content p:last-of-type {
    margin-bottom: var(--spacing-lg);
}

.purchase-modal__buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== 商品详情页样式 ===== */
.product-detail {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
    margin-top: 80px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-lg);
    font-size: 0.9rem;
    color: var(--text-gray);
}

.breadcrumb-nav a {
    color: var(--text-gray);
    transition: var(--transition-fast);
}

.breadcrumb-nav a:hover {
    color: var(--text-black);
}

.product-detail__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
}

/* 商品图片画廊 */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gallery-main {
    aspect-ratio: 1;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.gallery-thumbnails {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding: var(--spacing-xs) 0;
}

.thumbnail {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    object-fit: cover;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.thumbnail.active,
.thumbnail:hover {
    opacity: 1;
    box-shadow: var(--shadow-light);
}

/* 商品信息 */
.product-badges {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge--hot {
    background-color: var(--color-black);
    color: var(--text-white);
}

.badge--recommend {
    background-color: var(--color-dark-gray);
    color: var(--text-white);
}

.product-title {
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.stars {
    display: flex;
    gap: 0.25rem;
    color: #ffc107;
}

.rating-text {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.price-current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-black);
}

.price-original {
    font-size: 1.25rem;
    color: var(--text-gray);
    text-decoration: line-through;
}

.price-save {
    font-size: 0.9rem;
    color: #28a745;
    font-weight: 500;
}

.product-summary {
    margin-bottom: var(--spacing-lg);
}

.product-summary p {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
}

.product-features {
    margin-bottom: var(--spacing-lg);
}

.product-features h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.product-features ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
}

.product-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-black);
}

.product-features i {
    color: #28a745;
    font-size: 0.75rem;
}

.product-options {
    margin-bottom: var(--spacing-lg);
}

.option-group {
    margin-bottom: var(--spacing-sm);
}

.option-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.option-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-primary);
    background-color: var(--color-white);
    transition: var(--transition-fast);
}

.option-select:focus {
    outline: none;
    border-color: var(--color-charcoal);
}

.product-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.product-actions .btn {
    flex: 1;
    justify-content: center;
    gap: var(--spacing-xs);
}

.product-guarantee {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius);
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-gray);
}

.guarantee-item i {
    color: var(--color-dark-gray);
}

/* 商品详细信息标签页 */
.product-details {
    background-color: var(--color-light-gray);
}

.detail-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-medium-gray);
}

.tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
}

.tab-btn.active,
.tab-btn:hover {
    color: var(--text-black);
    border-bottom-color: var(--color-black);
}

.tab-panel {
    display: none;
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
}

.tab-panel.active {
    display: block;
}

.tab-panel h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-md);
}

.detail-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.detail-content p {
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.detail-content ul {
    list-style: none;
    margin-bottom: var(--spacing-md);
}

.detail-content li {
    padding: 0.25rem 0;
    color: var(--text-gray);
    position: relative;
    padding-left: 1.5rem;
}

.detail-content li::before {
    content: "•";
    color: var(--color-black);
    position: absolute;
    left: 0;
}

/* 服务流程样式 */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.step {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.step-number {
    width: 40px;
    height: 40px;
    background-color: var(--color-black);
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.step-content p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* 案例展示样式 */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.case-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
}

.case-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.case-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.case-item h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-black);
    margin: var(--spacing-sm) var(--spacing-sm) 0.5rem var(--spacing-sm);
}

.case-item p {
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}

/* 客户评价样式 */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.review-item {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.reviewer-name {
    font-weight: 600;
    color: var(--text-black);
}

.review-rating {
    display: flex;
    gap: 0.25rem;
    color: #ffc107;
}

.review-date {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.review-content {
    color: var(--text-gray);
    line-height: 1.7;
}

/* 相关商品推荐 */
.related-products {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-white);
}

.related-products .section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.related-products .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.related-products .product-card {
    text-align: center;
}

.related-products .product-card__content {
    padding: var(--spacing-md);
}

.related-products .product-card__title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-sm);
}

.related-products .product-card__price {
    margin-bottom: var(--spacing-md);
}

/* 响应式设计 - 商品详情页 */
@media (max-width: 768px) {
    .product-detail__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
.about-intro__content {
    display:block;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}
    .product-title {
        font-size: 1.5rem;
    }

    .price-current {
        font-size: 1.5rem;
    }

    .product-features ul {
        grid-template-columns: 1fr;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-guarantee {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .detail-tabs {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .tab-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }

    .cases-grid {
        grid-template-columns: 1fr;
    }

    .process-steps .step {
        flex-direction: column;
        text-align: center;
    }

    .gallery-thumbnails {
        justify-content: center;
    }
}

/* ===== 客服工具栏 ===== */
.customer-service-toolbar {
    position: fixed;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: var(--transition-normal);
    opacity: 0;
    visibility: hidden;
}

.customer-service-toolbar.show {
    right: 20px;
    opacity: 1;
    visibility: visible;
}

.toolbar-item {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: var(--color-black);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-medium);
}

.toolbar-item:hover {
    background-color: var(--color-charcoal);
    transform: translateX(-5px);
    box-shadow: var(--shadow-large);
}

.toolbar-item i {
    font-size: 1.25rem;
}

.toolbar-item[data-service="qq"]:hover {
    background-color: #12b7f5;
}

.toolbar-item[data-service="wechat"]:hover {
    background-color: #07c160;
}

.toolbar-item[data-service="phone"]:hover {
    background-color: #ff6b35;
}

.toolbar-item[data-service="top"]:hover {
    background-color: var(--color-dark-gray);
}

/* 工具提示 */
.tooltip {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-black);
    color: var(--text-white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    pointer-events: none;
}

.tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--color-black);
}

.toolbar-item:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-5px);
}

/* 微信二维码弹窗 */
.wechat-qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.wechat-qr-modal.show {
    opacity: 1;
    visibility: visible;
}

.qr-modal-content {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: 0;
    max-width: 320px;
    width: 90%;
    box-shadow: var(--shadow-large);
    transform: scale(0.9);
    transition: var(--transition-normal);
}

.wechat-qr-modal.show .qr-modal-content {
    transform: scale(1);
}

.qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-light-gray);
}

.qr-header h3 {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin: 0;
}

.qr-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
}

.qr-close:hover {
    background-color: var(--color-light-gray);
    color: var(--text-black);
}

.qr-body {
    padding: var(--spacing-lg);
    text-align: center;
}

.qr-code {
    margin-bottom: var(--spacing-md);
}

.qr-code img {
    width: 200px;
    height: 200px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.qr-body > p {
    font-size: 1rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-md);
}

.wechat-info {
    background-color: var(--color-light-gray);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    text-align: left;
}

.wechat-info p {
    font-size: 0.9rem;
    color: var(--text-black);
    margin: 0.25rem 0;
}

.wechat-info strong {
    color: var(--color-black);
}

/* 电话模态框 */
.phone-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.phone-modal.show {
    opacity: 1;
    visibility: visible;
}

.phone-modal-content {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: 0;
    max-width: 300px;
    width: 90%;
    box-shadow: var(--shadow-large);
    transform: scale(0.9);
    transition: var(--transition-normal);
}

.phone-modal.show .phone-modal-content {
    transform: scale(1);
}

.phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-light-gray);
}

.phone-header h3 {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin: 0;
}

.phone-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
}

.phone-close:hover {
    background-color: var(--color-light-gray);
    color: var(--text-black);
}

.phone-body {
    padding: var(--spacing-lg);
    text-align: center;
}

.phone-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius);
}

.phone-number i {
    color: #ff6b35;
}

.phone-body > p {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-md);
}

.phone-actions {
    display: flex;
    justify-content: center;
}

/* 客服工具栏响应式设计 */
@media (max-width: 768px) {
    .customer-service-toolbar {
        right: -70px;
    }

    .customer-service-toolbar.show {
        right: 15px;
    }

    .toolbar-item {
        width: 45px;
        height: 45px;
    }

    .toolbar-item i {
        font-size: 1.1rem;
    }

    .tooltip {
        right: 55px;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .qr-modal-content {
        max-width: 280px;
    }

    .qr-code img {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .customer-service-toolbar {
        right: -60px;
    }

    .customer-service-toolbar.show {
        right: 10px;
    }

    .toolbar-item {
        width: 40px;
        height: 40px;
    }

    .toolbar-item i {
        font-size: 1rem;
    }

    .tooltip {
        display: none; /* 在小屏幕上隐藏提示 */
    }

    .qr-modal-content {
        max-width: 260px;
    }

    .qr-code img {
        width: 140px;
        height: 140px;
    }

    .qr-body {
        padding: var(--spacing-md);
    }
}

/* ===== 打印样式 ===== */
@media print {
    .navbar,
    .hero__scroll,
    .btn {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .hero,
    .page-header {
        height: auto;
        padding: 2rem 0;
    }

    .hero__background,
    .hero__overlay,
    .featured-portfolio__background,
    .featured-portfolio__overlay,
    .page-header__background,
    .page-header__overlay {
        display: none;
    }
}

/* ===== 通知系统 ===== */
.wedding1-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #46b450;
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 300px;
    font-size: 0.9rem;
}

.wedding1-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.wedding1-notification.error {
    background-color: #dc3232;
}

.wedding1-notification.warning {
    background-color: #ffb900;
    color: #333;
}

.wedding1-notification.info {
    background-color: #007cba;
}

.notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.notification-close:hover {
    opacity: 1;
}

.notification-message {
    flex: 1;
}

/* ===== 商城页面样式 ===== */

/* 页面标题区域 */
.page-header {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
}

.page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(220, 53, 69, 0.8) 0%,
        rgba(220, 53, 69, 0.6) 50%,
        rgba(220, 53, 69, 0.4) 100%
    );
    z-index: 2;
}

.page-header__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
}

.page-header__title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.page-header__subtitle {
        font-size: 1.35rem;
    margin-bottom: var(--spacing-xl);
    color: #ffffff;
    opacity: 0.98;
    line-height: 1.7;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.01em;
    filter: brightness(1.05) contrast(1.1);
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb a:hover {
    opacity: 0.8;
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.7);
}

/* 商品分类筛选区域 */
.shop-filter {
    padding: var(--spacing-lg) 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.shop-filter__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
    align-items: center;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background-color: white;
    border: 2px solid #e9ecef;
    border-radius: 50px;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
    transition: left 0.5s ease;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

.filter-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* 商品展示区域 */
.shop-products {
    padding: var(--spacing-xl) 0;
    min-height: 60vh;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* 商品卡片样式 */
.product-card {
    background-color: white;
    border-radius: var(--border-radius-large);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    opacity: 1;
    transform: scale(1);
}

.product-card.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.product-card__image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
    border: none;
    outline: none;
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.product-card__badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background-color: #dc3545 !important;
    color: white !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 10 !important;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4) !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* 推荐商品区域的标签样式增强 */
.recommended-products .product-card__badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background-color: #dc3545 !important;
    color: white !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 10 !important;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4) !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: 53px;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .product-card__badge,
    .recommended-products .product-card__badge {
        top: 12px !important;
        left: 12px !important;
        padding: 0.4rem 0.7rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
    }
}

.product-card__content {
    padding: var(--spacing-lg);
}

.product-card__title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.product-card__description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.price-current {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

.price-original {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.price-unit {
    font-size: 0.9rem;
    color: #666;
}

.product-card__buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.product-card__buttons .btn {
    flex: 1;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--border-radius);
}

.product-card__buttons .btn--secondary {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #e9ecef;
}

.product-card__buttons .btn--secondary:hover {
    background-color: #e9ecef;
    color: #495057;
}

.product-card__buttons .btn--primary {
    background-color: var(--color-primary);
    color: white;
    border: none;
}

.product-card__buttons .btn--primary:hover {
    background-color: #c41e3a;
    transform: translateY(-1px);
}

/* 无商品状态 */
.no-products {
    text-align: center;
    padding: var(--spacing-xl) 0;
    color: #666;
    font-size: 1.1rem;
}

/* 分页导航样式 */
.shop-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0;
    border-top: 1px solid #e9ecef;
    margin-top: var(--spacing-xl);
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.current-page {
    font-weight: 600;
    color: var(--color-primary);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 0.25rem;
}

.pagination-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pagination-number:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.pagination-number.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* 商品通知样式 */
.shop-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 9999;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 300px;
}

.shop-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.shop-notification--success {
    border-left: 4px solid #28a745;
}

.shop-notification--error {
    border-left: 4px solid #dc3545;
}

.shop-notification--info {
    border-left: 4px solid #17a2b8;
}

.shop-notification__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.shop-notification__close:hover {
    color: #666;
}

/* 商城页面响应式设计 */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }

    .shop-filter__buttons {
        gap: var(--spacing-xs);
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .page-header {
        height: 300px;
    }

    .page-header__title {
        font-size: 2.2rem;
    }

    .page-header__subtitle {
        font-size: 1rem;
    }

    .shop-filter {
        padding: var(--spacing-md) 0;
    }

    .shop-filter__buttons {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--spacing-xs);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .shop-filter__buttons::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-sm);
    }

    .product-card__content {
        padding: var(--spacing-md);
    }

    .product-card__buttons {
        flex-direction: column;
    }

    .product-card__buttons .btn {
        width: 100%;
    }

    .shop-pagination {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .pagination-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .shop-notification {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100%);
    }

    .shop-notification.show {
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .page-header {
        height: 250px;
    }

    .page-header__title {
        font-size: 1.8rem;
    }

    .page-header__subtitle {
        font-size: 0.9rem;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-card__image {
        height: 200px;
    }

    .pagination-numbers {
        display: none;
    }

    .pagination-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ===== 智能搜索功能增强 ===== */

/* 搜索类型指示器 */
.search-type-indicator {
    position: absolute;
    top: -25px;
    right: 0;
    background-color: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.search-box.active .search-type-indicator {
    opacity: 1;
    transform: translateY(0);
}

.search-type-indicator::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--color-primary);
}

/* 搜索框增强样式 - 已移至主要样式定义 */

.search-form {
    position: relative;
}

/* 搜索输入框焦点状态增强 */
.search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* 搜索类型切换按钮（可选功能） */
.search-type-toggle {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 5;
}

.search-type-toggle:hover {
    color: var(--color-primary);
    background-color: rgba(220, 53, 69, 0.1);
}

.search-type-toggle.active {
    color: var(--color-primary);
}

/* 搜索建议下拉框增强 */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-suggestions.show {
    display: block;
}

.search-suggestion-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
    background-color: #f8f9fa;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-type {
    font-size: 0.7rem;
    color: #999;
    background-color: #f1f3f4;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 500;
}

.search-suggestion-type.product {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-primary);
}

.search-suggestion-type.post {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.search-suggestion-title {
    font-weight: 500;
    color: #333;
    flex: 1;
}

.search-suggestion-meta {
    font-size: 0.8rem;
    color: #666;
}

/* 搜索错误提示增强 */
.search-error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #dc3545;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 0.8rem;
    z-index: 1000;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 - 搜索功能 */
@media (max-width: 768px) {
    .search-type-indicator {
        top: -20px;
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .search-type-indicator::after {
        right: 8px;
        border-width: 3px;
    }

    .search-suggestions {
        max-height: 250px;
    }

    .search-suggestion-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .search-type-indicator {
        display: none; /* 在小屏幕上隐藏类型指示器 */
    }

    .search-suggestions {
        max-height: 200px;
    }

    .search-suggestion-item {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .search-suggestion-type {
        align-self: flex-end;
    }
}

/* ===== 搜索结果页面样式 ===== */

/* 搜索结果页面标题区域 */
.search-results-header {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
}

.search-results-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.search-results-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-results-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: 2;
}

.search-results-header__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto;
}

.search-results-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.search-query {
    color: var(--color-primary);
    background: linear-gradient(135deg, #dc3545, #ff6b7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-results-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 1rem;
}

.search-type-label {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
}

.search-results-count {
    opacity: 0.9;
}

.search-results-form {
    max-width: 500px;
    margin: 0 auto;
}

.search-results-form .search-form {
    position: relative;
    display: flex;
    border-radius: 50px;
    overflow: hidden;
}

.search-results-form .search-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    font-size: 1rem;
    background: transparent;
}

.search-results-form .search-input:focus {
    outline: none;
}

.search-results-form .search-submit {
    padding: 1rem 1.5rem;
    background-color: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-results-form .search-submit:hover {
    background-color: #c41e3a;
}

/* 搜索结果内容区域 */
.search-results-content {
    padding: var(--spacing-xl) 0;
    min-height: 60vh;
}

/* 搜索类型筛选 */
.search-type-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid #e9ecef;
}

.search-type-filter {
    padding: 0.75rem 1.5rem;
    background-color: #f8f9fa;
    color: #6c757d;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.search-type-filter:hover {
    background-color: #e9ecef;
    color: #495057;
    transform: translateY(-2px);
}

.search-type-filter.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* 搜索结果列表 */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.search-result-item {
    display: flex;
    background-color: white;
    border-radius: var(--border-radius-large);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
}

.search-result-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.search-result-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

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

.search-result-item:hover .search-result-thumbnail img {
    transform: scale(1.05);
}

.search-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.search-result-type {
    background-color: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.search-result-item.post .search-result-type {
    background-color: #007bff;
}

.search-result-date,
.search-result-price {
    font-size: 0.9rem;
    color: #666;
}

.search-result-price {
    font-weight: 600;
    color: var(--color-primary);
}

.search-result-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.search-result-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.search-result-excerpt {
    color: #666;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    flex: 1;
}

.search-result-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.search-result-actions .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: var(--border-radius);
}

/* 搜索分页 */
.search-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.search-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.search-pagination .page-numbers a,
.search-pagination .page-numbers span {
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
}

.search-pagination .page-numbers a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.search-pagination .page-numbers .current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* 无搜索结果样式 */
.no-search-results {
    text-align: center;
    padding: var(--spacing-xxl) 0;
    max-width: 600px;
    margin: 0 auto;
}

.no-results-icon {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: var(--spacing-lg);
}

.no-search-results h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: var(--spacing-md);
}

.no-search-results > p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.no-results-suggestions {
    background-color: #f8f9fa;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-large);
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.no-results-suggestions h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.no-results-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-results-suggestions li {
    padding: 0.5rem 0;
    color: #666;
    position: relative;
    padding-left: 1.5rem;
}

.no-results-suggestions li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.no-results-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.no-results-actions .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* 搜索结果页面响应式设计 */
@media (max-width: 768px) {
    .search-results-header {
        height: 280px;
    }

    .search-results-header__title {
        font-size: 1.8rem;
    }

    .search-results-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .search-type-filters {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .search-type-filter {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .search-result-item {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .search-result-thumbnail {
        width: 100%;
        height: 200px;
    }

    .search-result-actions {
        flex-direction: column;
    }

    .search-result-actions .btn {
        width: 100%;
        text-align: center;
    }

    .search-pagination .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }

    .no-search-results {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .no-results-icon {
        font-size: 3rem;
    }

    .no-search-results h2 {
        font-size: 1.5rem;
    }

    .no-results-actions {
        flex-direction: column;
        align-items: center;
    }

    .no-results-actions .btn {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .search-results-header {
        height: 250px;
    }

    .search-results-header__title {
        font-size: 1.5rem;
    }

    .search-results-form {
        margin: 0 var(--spacing-md);
    }

    .search-type-filters {
        margin: 0 var(--spacing-md) var(--spacing-xl) var(--spacing-md);
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .search-type-filters::-webkit-scrollbar {
        display: none;
    }

    .search-type-filter {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .search-result-item {
        margin: 0 var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .search-result-thumbnail {
        height: 180px;
    }

    .search-result-title {
        font-size: 1.2rem;
    }
}

/* ===== WooCommerce 商城页面样式 ===== */

/* 商品分类筛选区域 - 简化版，复用首页样式 */
.shop-filter {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid #dee2e6;
}

.shop-filter__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.shop-filter__buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-white);
    border: 2px solid #dee2e6;
    border-radius: 25px;
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.filter-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.shop-filter__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* WooCommerce 默认元素样式重写 */
.woocommerce-result-count {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.woocommerce-ordering select {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.9rem;
}

/*
注释掉自定义商品展示样式，直接使用首页推荐商品的样式
商品展示区域现在完全复用 .recommended-products 的样式
*/

/* 移除WooCommerce默认样式冲突 */
.woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}

/*
注释掉自定义商品卡片样式，完全使用首页推荐商品的原始样式
现在商品展示区域使用 .recommended-products 类，会自动应用首页的样式
*/

/* 分页导航样式 */
.shop-pagination {
    margin-top: var(--spacing-xl);
    text-align: center;
}

/* ===== 商品详情页面样式优化 ===== */

/* 商品详情页面布局 - 上下两栏设计 */
.product-detail {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
}

/* 面包屑导航 */
.breadcrumb-nav {
    margin-bottom: var(--spacing-lg);
}

.breadcrumb-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-gray);
}

.breadcrumb-content a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-content a:hover {
    color: var(--color-primary);
}

.breadcrumb-content span {
    color: #ccc;
}

/* 商品详情包装器 */
.product-detail__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* 上栏：主要内容区域 */
.product-detail__main-section {
    margin-bottom: var(--spacing-xxl);
    padding: var(--spacing-xl);
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-detail__main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: start;
}


/* 商品图片画廊 */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gallery-main {
    aspect-ratio: 1;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.gallery-thumbnails {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding: var(--spacing-xs) 0;
}

.thumbnail {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    object-fit: cover;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.thumbnail.active,
.thumbnail:hover {
    opacity: 1;
    box-shadow: var(--shadow-light);
}

/* 商品信息 */
.product-badges {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge--hot {
    background-color: var(--color-black);
    color: var(--text-white);
}

.badge--recommend {
    background-color: var(--color-dark-gray);
    color: var(--text-white);
}

.product-title {
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.stars {
    display: flex;
    gap: 0.25rem;
    color: #ffc107;
}

.rating-text {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.price-current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-black);
}

.price-original {
    font-size: 1.25rem;
    color: var(--text-gray);
    text-decoration: line-through;
}

.price-save {
    font-size: 0.9rem;
    color: #28a745;
    font-weight: 500;
}

.product-summary {
    margin-bottom: var(--spacing-lg);
}

.product-summary p {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
}

.product-features {
    margin-bottom: var(--spacing-lg);
}

.product-features h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.product-features ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
}

.product-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-black);
}

.product-features i {
    color: #28a745;
    font-size: 0.75rem;
}

.product-options {
    margin-bottom: var(--spacing-lg);
}

.option-group {
    margin-bottom: var(--spacing-sm);
}

.option-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom: 
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge--hot {
    background-color: var(--color-black);
    color: var(--text-white);
}

.badge--recommend {
    background-color: var(--color-dark-gray);
    color: var(--text-white);
}

.product-title {
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.stars {
    display: flex;
    gap: 0.25rem;
    color: #ffc107;
}

.rating-text {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.price-current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-black);
}

.price-original {
    font-size: 1.25rem;
    color: var(--text-gray);
    text-decoration: line-through;
}

.price-save {
    font-size: 0.9rem;
    color: #28a745;
    font-weight: 500;
}

.product-summary {
    margin-bottom: var(--spacing-lg);
}

.product-summary p {
    font-size: 1.125rem;
    color: var(--text-gray);
    line-height: 1.7;
}

.product-features {
    margin-bottom: var(--spacing-lg);
}

.product-features h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.product-features ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
}

.product-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-black);
}

.product-features i {
    color: #28a745;
    font-size: 0.75rem;
}

.product-options {
    margin-bottom: var(--spacing-lg);
}

.option-group {
    margin-bottom: var(--spacing-sm);
}

.option-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom: 0.5rem;
}

.option-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-primary);
    background-color: var(--color-white);
    transition: var(--transition-fast);
}

.option-select:focus {
    outline: none;
    border-color: var(--color-charcoal);
}

.product-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.product-actions .btn {
    flex: 1;
    justify-content: center;
    gap: var(--spacing-xs);
}

.product-guarantee {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius);
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-gray);
}

.guarantee-item i {
    color: var(--color-dark-gray);
}


.product-details {
    background-color: var(--color-light-gray);
}

.detail-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-medium-gray);
}

.product-detail__gallery .woocommerce-product-gallery {
    margin: 0;
}

.product-detail__gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

.product-detail__gallery .woocommerce-product-gallery__image {
    margin: 0;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.product-detail__gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-large);
    display: block;
}

/* 商品图片缩略图 */
.product-detail__gallery .flex-control-thumbs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.product-detail__gallery .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-detail__gallery .flex-control-thumbs li.flex-active-slide,
.product-detail__gallery .flex-control-thumbs li:hover {
    border-color: var(--color-primary);
}

.product-detail__gallery .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右侧栏：商品信息和购买区域 */
.product-detail__info {
    padding: var(--spacing-md) 0;
}

/* WooCommerce商品标题 */
.product-detail__info .product_title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: var(--spacing-md) !important;
    line-height: 1.2 !important;
}

/* WooCommerce商品评分 */
.product-detail__info .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
}

.product-detail__info .woocommerce-product-rating .star-rating {
    color: #ffc107 !important;
    font-size: 1.1rem !important;
}

.product-detail__info .woocommerce-product-rating .woocommerce-review-link {
    color: var(--text-gray) !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
}

.product-detail__info .woocommerce-product-rating .woocommerce-review-link:hover {
    color: var(--color-primary) !important;
}

/* WooCommerce商品价格 */
.product-detail__info .price {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--spacing-lg) !important;
    display: block !important;
}

.product-detail__info .price del {
    color: var(--text-gray) !important;
    font-size: 1.5rem !important;
    margin-right: var(--spacing-sm) !important;
}

.product-detail__info .price ins {
    text-decoration: none !important;
    color: var(--color-primary) !important;
}

/* WooCommerce商品简短描述 */
.product-detail__info .woocommerce-product-details__short-description {
    color: var(--text-gray) !important;
    line-height: 1.6 !important;
    margin-bottom: var(--spacing-lg) !important;
    font-size: 1rem !important;
}

.product-detail__info .woocommerce-product-details__short-description p {
    margin: 0 0 var(--spacing-md) 0 !important;
}

/* WooCommerce购买表单 */
.product-detail__info .cart {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    margin-bottom: var(--spacing-lg) !important;
    flex-wrap: wrap !important;
}

.product-detail__info .cart .quantity {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-xs) !important;
}

.product-detail__info .cart .quantity label {
    font-size: 1rem !important;
    color: var(--text-black) !important;
    font-weight: 500 !important;
}

.product-detail__info .cart .quantity input {
    width: 80px !important;
    padding: 0.75rem !important;
    border: 2px solid #dee2e6 !important;
    border-radius: var(--border-radius) !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.product-detail__info .cart .quantity input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
    outline: none !important;
}

/* WooCommerce添加到购物车按钮 */
.product-detail__info .cart .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--color-primary), #e63946) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: var(--border-radius) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
    min-width: 200px !important;
}

.product-detail__info .cart .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #c02a37, #b02a37) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
}

/* WooCommerce商品元信息 */
.product-detail__info .product_meta {
    margin-top: var(--spacing-lg) !important;
    padding-top: var(--spacing-lg) !important;
    border-top: 1px solid #e9ecef !important;
    font-size: 0.9rem !important;
    color: var(--text-gray) !important;
}

.product-detail__info .product_meta span {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
}

.product-detail__info .product_meta a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.product-detail__info .product_meta a:hover {
    text-decoration: underline !important;
}

/* 购买区域 */
.product-actions {
    margin-bottom: var(--spacing-lg);
}

.product-actions .cart {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.product-actions .cart .quantity {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.product-actions .cart .quantity label {
    font-size: 0.9rem;
    color: var(--text-black);
    font-weight: 500;
}

.product-actions .cart .quantity input {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}

.product-actions .cart .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: var(--text-white);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.product-actions .cart .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #c02a37, #b02a37);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.product-actions .cart .single_add_to_cart_button i {
    font-size: 1rem;
}

/* 咨询按钮样式（如果需要） */
.consult-btn {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.consult-btn:hover {
    background-color: var(--color-primary);
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* 商品元信息 */
.product-detail__info .product_meta {
    margin-top: var(--spacing-lg) !important;
    padding-top: var(--spacing-lg) !important;
    border-top: 1px solid #dee2e6 !important;
    font-size: 0.9rem !important;
    color: var(--text-gray) !important;
}

.product-detail__info .product_meta span {
    display: block !important;
    margin-bottom: 0.5rem !important;
}

/* 下栏：详情区域 */
.product-detail__details-section {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl);
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

/* 下栏与上栏的视觉分隔 */
.product-detail__details-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), #e63946);
    border-radius: 2px;
    transform: translateX(-50%);
}

/* 商品详情标签页 */
.product-detail__tabs {
    margin: 0;
}

/* WooCommerce标签页样式 */
.product-detail__tabs .woocommerce-tabs {
    background-color: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
}

.product-detail__tabs .wc-tabs {
    display: flex !important;
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
    padding: 0 !important;
    border-bottom: 2px solid #e9ecef !important;
    list-style: none !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.product-detail__tabs .wc-tabs li {
    flex: 1 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    position: relative !important;
}

.product-detail__tabs .wc-tabs li a {
    display: block !important;
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    text-align: center !important;
    color: var(--text-gray) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: none !important;
    position: relative !important;
}

.product-detail__tabs .wc-tabs li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), #e63946);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
}

.product-detail__tabs .wc-tabs li.active a,
.product-detail__tabs .wc-tabs li a:hover {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.product-detail__tabs .wc-tabs li.active a::after,
.product-detail__tabs .wc-tabs li a:hover::after {
    width: 80%;
}

.product-detail__tabs .wc-tab {
    padding: var(--spacing-xxl) !important;
    display: none !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--text-gray) !important;
    background-color: #f8f9fa !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
    border: 1px solid #e9ecef !important;
    border-top: none !important;
}

.product-detail__tabs .wc-tab.active {
    display: block !important;
}

.product-detail__tabs .wc-tab h2 {
    color: var(--text-black) !important;
    font-size: 1.8rem !important;
    margin-bottom: var(--spacing-xl) !important;
    font-weight: 700 !important;
    text-align: center !important;
    position: relative !important;
}

.product-detail__tabs .wc-tab h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #e63946);
    transform: translateX(-50%);
    border-radius: 2px;
}

.product-detail__tabs .wc-tab h3 {
    color: var(--text-black) !important;
    font-size: 1.4rem !important;
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-lg) !important;
    font-weight: 600 !important;
}

.product-detail__tabs .wc-tab h4 {
    color: var(--text-black) !important;
    font-size: 1.2rem !important;
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    font-weight: 600 !important;
}

.product-detail__tabs .wc-tab p {
    margin-bottom: var(--spacing-lg) !important;
    text-align: justify !important;
}

.product-detail__tabs .wc-tab ul {
    padding-left: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-lg) !important;
}

.product-detail__tabs .wc-tab li {
    margin-bottom: var(--spacing-sm) !important;
    position: relative !important;
}

.product-detail__tabs .wc-tab li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: var(--color-primary);
    font-weight: bold;
}

/* 文章列表页面样式 - Portfolio风格 */
/* 页面标题区域 */
.page-header {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-white);
}

.page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    z-index: 2;
}

.page-header__content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-header__title {
     font-family: var(--font-secondary);
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.9);
    position: relative;
    filter: brightness(1.1) contrast(1.2);
}

.page-header__title span {
    color: var(--color-primary);
}

.page-header__subtitle {
        font-size: 1.35rem;
    margin-bottom: var(--spacing-xl);
    color: #ffffff;
    opacity: 0.98;
    line-height: 1.7;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.01em;
    filter: brightness(1.05) contrast(1.1);
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: var(--text-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.breadcrumb span {
    color: rgba(255, 255, 255, 0.6);
}

/* 文章筛选区域 */
.portfolio-filter {
    padding: var(--spacing-xl) 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.portfolio-filter__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.portfolio-filter__buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-white);
    color: var(--text-gray);
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.portfolio-filter__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.sort-dropdown {
    position: relative;
}

.sort-select {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-white);
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.sort-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* 搜索表单样式 */
.portfolio-filter__search {
    flex: 1;
    max-width: 400px;
}

.search-form {
    position: relative;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    padding-right: 3rem;
    background-color: var(--color-white);
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.search-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* .search-submit {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.search-submit:hover {
    color: var(--color-primary);
} */

/* 文章展示区域 - Portfolio网格布局 */
.portfolio-gallery {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* .portfolio-item {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    cursor: pointer;
    min-height: 350px;
    display: flex;
    flex-direction: column;
} */
/*
.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.portfolio-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
    display: block;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(220, 53, 69, 0.9) 100%
    );
    opacity: 0;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.portfolio-item:hover .portfolio-item__overlay {
    opacity: 1;
}

.portfolio-item__content {
    text-align: center;
    color: #ffffff;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.portfolio-item:hover .portfolio-item__content {
    transform: translateY(0);
}

.portfolio-item__content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.portfolio-item__content h3 a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: inherit;
}

.portfolio-item__content p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    color: #f8f9fa;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.portfolio-item__meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.85rem;
    color: #f8f9fa;
    flex-wrap: wrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.portfolio-item__meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #f8f9fa;
}

.portfolio-item__meta i {
    font-size: 0.8rem;
    color: #ffffff;
}

.portfolio-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.portfolio-item__link:hover {
    background-color: #ffffff;
    color: var(--color-primary);
    transform: translateY(-2px);
    text-shadow: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.portfolio-item__link i {
    transition: transform 0.3s ease;
    color: inherit;
}

.portfolio-item__link:hover i {
    transform: translateX(3px);
} */

/* 分页导航 */
.pagination-wrapper {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.navigation.pagination {
    display: inline-block;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.nav-links a,
.nav-links .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-white);
    color: var(--text-gray);
    text-decoration: none;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-links a:hover,
.nav-links .current {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.nav-links .prev,
.nav-links .next {
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* 无内容状态 */
.no-posts-found {
    text-align: center;
    padding: var(--spacing-5xl) 0;
}

.no-posts-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.no-posts-content i {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: var(--spacing-lg);
}

.no-posts-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
}

.no-posts-content p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.search-suggestions {
    background-color: #f8f9fa;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.search-suggestions h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
}

.search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-suggestions li {
    padding: 0.3rem 0;
    color: var(--text-gray);
    position: relative;
    padding-left: 1.2rem;
}

.search-suggestions li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.search-form--large {
    margin: var(--spacing-lg) 0;
}

.search-form--large .search-input-wrapper {
    max-width: 400px;
    margin: 0 auto;
}

.search-form--large .search-field {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
}

.search-form--large .search-submit {
    right: 0.75rem;
    padding: 0.75rem;
}

.search-form--large .search-submit span {
    margin-left: 0.5rem;
}

/* 文章列表页面响应式设计 */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-lg);
    }

    .portfolio-filter__wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .portfolio-filter__buttons {
        justify-content: center;
    }

    .portfolio-filter__controls {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .page-header {
        height: 50vh;
        min-height: 300px;
    }

    .page-header__title {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .page-header__subtitle {
        font-size: 1rem;
    }

    .portfolio-filter {
        padding: var(--spacing-lg) 0;
    }

    .portfolio-filter__buttons {
        gap: var(--spacing-xs);
    }

    .filter-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.85rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .portfolio-item img {
        height: 220px;
        object-position: center;
    }

    .portfolio-item__content h3 {
        font-size: 1.3rem;
    }

    .portfolio-item__meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .nav-links {
        gap: var(--spacing-xs);
    }

    .nav-links a,
    .nav-links .current {
        min-width: 40px;
        height: 40px;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }

    .breadcrumb {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-header__content {
        padding: 0 var(--spacing-sm);
    }

    .portfolio-filter__buttons {
        flex-direction: column;
        align-items: center;
    }

    .filter-btn {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }

    .portfolio-item {
        min-height: 300px;
    }

    .portfolio-item img {
        height: 180px;
    }

    .portfolio-item__overlay {
        padding: var(--spacing-md);
    }

    .portfolio-item__content h3 {
        font-size: 1.2rem;
    }

    .portfolio-item__content p {
        font-size: 0.9rem;
    }

    .no-posts-content {
        padding: 0 var(--spacing-sm);
    }

    .search-form--large .search-input-wrapper {
        max-width: 100%;
    }
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-item {
    animation: fadeInUp 0.6s ease forwards;
}

.portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio-item:nth-child(3) { animation-delay: 0.3s; }
.portfolio-item:nth-child(4) { animation-delay: 0.4s; }
.portfolio-item:nth-child(5) { animation-delay: 0.5s; }
.portfolio-item:nth-child(6) { animation-delay: 0.6s; }

/* 加载状态 */
.portfolio-grid.loading .portfolio-item {
    opacity: 0.5;
    pointer-events: none;
}

/* 筛选动画 */
.portfolio-item.filtered-out {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* 静态内容页面样式 */
/* 静态页面头部 */
.static-page-header {
    position: relative;
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-white);
}

.static-page-header .page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.static-page-header .page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.static-page-header .page-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(220, 53, 69, 0.8) 0%,
        rgba(220, 53, 69, 0.6) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 2;
}

.static-page-header .page-header__content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.static-page-header .page-header__title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4);
}

.static-page-header .page-header__subtitle {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    color: #ffffff;
    opacity: 0.95;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.5);
}

/* 静态内容区域 */
.static-content {
    padding: 3rem 0;
    background: linear-gradient(
        180deg,
        #f8f9fa 0%,
        #ffffff 50%,
        #f1f3f4 100%
    );
    position: relative;
}

.static-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 100%
    );
    z-index: 1;
}

.static-content__wrapper {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.static-content__main {
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fafbfc 100%
    );
    border-radius: var(--border-radius-xl);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.static-content__body {
    padding: var(--spacing-md);
    line-height: 1.8;
    color: var(--text-dark);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    word-spacing: 0.05em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.static-content__body h1,
.static-content__body h2,
.static-content__body h3,
.static-content__body h4,
.static-content__body h5,
.static-content__body h6 {
    color: var(--text-dark);
    font-weight: 700;
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.static-content__body h1 {
    font-size: 2.8rem;
    background: linear-gradient(135deg, var(--color-primary), #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.static-content__body h2 {
    font-size: 2.2rem;
    color: var(--color-primary);
    position: relative;
    padding-left: var(--spacing-lg);
}

.static-content__body h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(135deg, var(--color-primary), #e74c3c);
    border-radius: 2px;
}

.static-content__body h3 {
    font-size: 1.6rem;
    color: var(--text-dark);
}

.static-content__body h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
}

.static-content__body p {
    margin-bottom: var(--spacing-lg);
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: left;
    color: var(--text-dark);
    max-width: none;
    hyphens: auto;
    word-break: break-word;
}

.static-content__body p:last-child {
    margin-bottom: 0;
}

.static-content__body p + p {
    margin-top: var(--spacing-md);
}

/* 首段样式 */
.static-content__body > p:first-of-type {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom: var(--spacing-xl);
}

.static-content__body ul,
.static-content__body ol {
    margin-bottom: var(--spacing-xl);
    padding-left: var(--spacing-xl);
    line-height: 1.7;
}

.static-content__body ul {
    list-style: none;
}

.static-content__body ul li {
    position: relative;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    color: var(--text-dark);
    font-weight: 400;
}

.static-content__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, var(--color-primary), #e74c3c);
    border-radius: 50%;
    transform: translateY(-50%);
}

.static-content__body ol {
    counter-reset: list-counter;
    list-style: none;
}

.static-content__body ol li {
    position: relative;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-xl);
    color: var(--text-dark);
    font-weight: 400;
    counter-increment: list-counter;
}

.static-content__body ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--color-primary), #e74c3c);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.static-content__body blockquote {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-left: 5px solid var(--color-primary);
    padding: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
    font-style: italic;
    font-size: 1.15rem;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.static-content__body blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: var(--spacing-lg);
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.3;
    font-family: serif;
}

.static-content__body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--spacing-xl) 0;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
}

.static-content__body th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    background: linear-gradient(135deg, var(--color-primary), #e74c3c);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    border: none;
    position: relative;
}

.static-content__body th:first-child {
    border-top-left-radius: var(--border-radius-lg);
}

.static-content__body th:last-child {
    border-top-right-radius: var(--border-radius-lg);
}

.static-content__body td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid #f1f3f4;
    transition: all 0.2s ease;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.6;
    vertical-align: top;
}

.static-content__body tbody tr:hover td {
    background-color: rgba(220, 53, 69, 0.02);
    transform: translateY(-1px);
}

.static-content__body tbody tr:last-child td {
    border-bottom: none;
}

.static-content__body tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius-lg);
}

.static-content__body tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius-lg);
}

/* 表格响应式优化 */
@media (max-width: 768px) {
    .static-content__body table {
        font-size: 0.9rem;
        margin: var(--spacing-lg) 0;
    }

    .static-content__body th,
    .static-content__body td {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .static-content__body th {
        font-size: 0.9rem;
    }
}

/* 特殊内容组件 */
.static-content__body .highlight-box {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #ffc107;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

.static-content__body .highlight-box h4 {
    color: #856404;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.static-content__body .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.static-content__body .info-card {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.static-content__body .info-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.05);
}

.static-content__body .info-card i {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    display: block;
}

.static-content__body .info-card h5 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-dark);
}

.static-content__body .info-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    margin-bottom: 0;
    line-height: 1.6;
}

/* 图片样式优化 */
.static-content__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: var(--spacing-xl) 0;
    transition: all 0.3s ease;
}

.static-content__body img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 图片对齐样式 */
.static-content__body .alignleft {
    float: left;
    margin: 0 var(--spacing-lg) var(--spacing-lg) 0;
}

.static-content__body .alignright {
    float: right;
    margin: 0 0 var(--spacing-lg) var(--spacing-lg);
}

.static-content__body .aligncenter {
    display: block;
    margin: var(--spacing-xl) auto;
    text-align: center;
}

/* 代码块样式 */
.static-content__body pre {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.static-content__body code {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-primary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    font-weight: 500;
}

.static-content__body pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* 链接样式优化 */
.static-content__body a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.static-content__body a:hover {
    color: #e74c3c;
    border-bottom-color: #e74c3c;
}

/* 表单样式优化 */
.static-content__body form {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.static-content__body label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.static-content__body input[type="text"],
.static-content__body input[type="email"],
.static-content__body input[type="tel"],
.static-content__body input[type="url"],
.static-content__body input[type="password"],
.static-content__body input[type="number"],
.static-content__body textarea,
.static-content__body select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: var(--color-white);
    transition: all 0.3s ease;
    margin-bottom: var(--spacing-md);
}

.static-content__body input:focus,
.static-content__body textarea:focus,
.static-content__body select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    transform: translateY(-1px);
}

.static-content__body textarea {
    min-height: 120px;
    resize: vertical;
}

.static-content__body button,
.static-content__body input[type="submit"],
.static-content__body input[type="button"] {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: var(--text-white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.static-content__body button:hover,
.static-content__body input[type="submit"]:hover,
.static-content__body input[type="button"]:hover {
    background: linear-gradient(135deg, #e63946, var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* 分隔线样式 */
.static-content__body hr {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    margin: var(--spacing-2xl) 0;
    border-radius: 2px;
}

/* 视频和嵌入内容样式 */
.static-content__body iframe,
.static-content__body embed,
.static-content__body object,
.static-content__body video {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: var(--spacing-xl) 0;
}

.static-content__body .wp-video,
.static-content__body .wp-audio-shortcode {
    margin: var(--spacing-xl) 0;
}

/* 引用和标注样式 */
.static-content__body cite {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.static-content__body small {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.static-content__body mark {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: var(--text-dark);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: 500;
}

/* 定义列表样式 */
.static-content__body dl {
    margin: var(--spacing-xl) 0;
}

.static-content__body dt {
    font-weight: 700;
    color: var(--text-dark);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    font-size: 1.05rem;
}

.static-content__body dd {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-gray);
    line-height: 1.6;
}

/* 地址和联系信息样式 */
.static-content__body address {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-left: 4px solid var(--color-primary);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    font-style: normal;
    line-height: 1.6;
    color: var(--text-dark);
}

/* 页面元信息 */
.static-content__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-3xl);
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.static-content__meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.static-content__meta-item i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

.static-content__meta-item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.static-content__meta-item a:hover {
    color: var(--color-primary);
}

/* 操作按钮 */
.static-content__actions {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-3xl);
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    justify-content: center;
    flex-wrap: wrap;
}

.static-content__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.static-content__actions .btn--primary {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
}

.static-content__actions .btn--primary:hover {
    background-color: #c82333;
    border-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.static-content__actions .btn--secondary {
    background-color: var(--color-white);
    color: var(--text-gray);
    border-color: #e9ecef;
}

.static-content__actions .btn--secondary:hover {
    background-color: #f8f9fa;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 侧边栏样式 */
.static-content__sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.static-sidebar {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.static-sidebar__section {
    padding: var(--spacing-lg);
    border-bottom: 1px solid #e9ecef;
}

.static-sidebar__section:last-child {
    border-bottom: none;
}

.static-sidebar__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-primary);
}

.static-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.static-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    color: var(--text-gray);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.static-sidebar__link:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
    transform: translateX(5px);
}

.static-sidebar__link i {
    color: var(--color-primary);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.static-sidebar__contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-gray);
}

.contact-item i {
    color: var(--color-primary);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

/* 评论区域 */
.static-comments {
    padding: var(--spacing-3xl) 0;
    background-color: #f8f9fa;
}

.static-comments__wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-3xl);
}

/* 页面链接分页 */
.page-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-2xl) 0;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-lg);
    font-weight: 500;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-links-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-right: var(--spacing-sm);
}

.page-links a,
.page-links .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background-color: var(--color-white);
    color: var(--text-gray);
    text-decoration: none;
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    font-weight: 500;
}

.page-links a:hover,
.page-links .page-link:hover {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.page-links .current {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
}

/* 静态页面响应式设计 */
@media (max-width: 1024px) {
    .static-content__wrapper.has-sidebar {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .static-content__sidebar {
        position: static;
        order: -1;
    }

    .static-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }

    .static-sidebar__section {
        border-bottom: none;
        border-right: 1px solid #e9ecef;
    }

    .static-sidebar__section:last-child {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .static-page-header {
        height: 40vh;
        min-height: 300px;
    }

    .static-page-header .page-header__title {
        font-size: clamp(2rem, 6vw, 2.5rem);
        color: #ffffff;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.6);
    }

    .static-page-header .page-header__subtitle {
        font-size: 1rem;
        color: #ffffff;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.7),
            0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .static-content {
        padding: var(--spacing-4xl) 0;
    }

    .static-content__wrapper {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .static-content__body {
        padding: var(--spacing-xl);
        font-size: 1rem;
        line-height: 1.7;
    }

    .static-content__body > p:first-of-type {
        font-size: 1.1rem;
    }

    .static-content__body h1 {
        font-size: 2rem;
        margin-bottom: var(--spacing-lg);
    }

    .static-content__body h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-md);
    }

    .static-content__body h3 {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-md);
    }

    .static-content__body h4 {
        font-size: 1.1rem;
    }

    .static-content__body ul,
    .static-content__body ol {
        padding-left: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .static-content__body ul li,
    .static-content__body ol li {
        margin-bottom: var(--spacing-xs);
    }

    .static-content__body blockquote {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
        font-size: 1rem;
    }

    .static-content__body .info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .static-content__body form {
        padding: var(--spacing-lg);
    }

    .static-content__body pre {
        padding: var(--spacing-md);
        font-size: 0.85rem;
        overflow-x: auto;
    }
}

    .static-content__body .info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .static-content__body .info-card {
        padding: var(--spacing-lg);
    }

    .static-content__body blockquote {
        padding: var(--spacing-lg);
        font-size: 1rem;
    }

    .static-content__body table {
        font-size: 0.9rem;
    }

    .static-content__body th,
    .static-content__body td {
        padding: var(--spacing-md);
    }
}

    .static-content__body h1 {
        font-size: 2rem;
    }

    .static-content__body h2 {
        font-size: 1.5rem;
    }

    .static-content__body h3 {
        font-size: 1.25rem;
    }

    .static-content__meta {
        padding: var(--spacing-md) var(--spacing-xl);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .static-content__actions {
        padding: var(--spacing-md) var(--spacing-xl);
        flex-direction: column;
        align-items: stretch;
    }

    .static-content__actions .btn {
        justify-content: center;
    }

    .static-sidebar {
        grid-template-columns: 1fr;
    }

    .static-sidebar__section {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }

    .static-sidebar__section:last-child {
        border-bottom: none;
    }

    .static-comments__wrapper {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 480px) {
    .static-page-header {
        height: 35vh;
        min-height: 250px;
    }

    .static-page-header .page-header__content {
        padding: 0 var(--spacing-sm);
    }

    .static-page-header .page-header__title {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .static-page-header .page-header__subtitle {
        font-size: 0.9rem;
    }

    .static-content__body {
        padding: var(--spacing-lg);
        font-size: 0.95rem;
    }

    .static-content__body > p:first-of-type {
        font-size: 1.05rem;
    }

    .static-content__body h1 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-md);
    }

    .static-content__body h2 {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-sm);
    }

    .static-content__body h3 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-sm);
    }

    .static-content__body h4 {
        font-size: 1rem;
    }

    .static-content__body p {
        margin-bottom: var(--spacing-md);
    }

    .static-content__body ul,
    .static-content__body ol {
        padding-left: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .static-content__body blockquote {
        padding: var(--spacing-md);
        margin: var(--spacing-md) 0;
        font-size: 0.95rem;
    }

    .static-content__body table {
        font-size: 0.8rem;
        margin: var(--spacing-md) 0;
    }

    .static-content__body th,
    .static-content__body td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .static-content__body form {
        padding: var(--spacing-md);
    }

    .static-content__body input,
    .static-content__body textarea,
    .static-content__body select {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }

    .static-content__body pre {
        padding: var(--spacing-sm);
        font-size: 0.8rem;
    }

    .static-content__body .info-card {
        padding: var(--spacing-md);
    }

    .static-content__meta {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.8rem;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

    .static-content__actions {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .static-content__actions .btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.8rem;
    }

    .static-sidebar__section {
        padding: var(--spacing-md);
    }

    .static-sidebar__title {
        font-size: 1rem;
    }

    .static-sidebar__link {
        font-size: 0.8rem;
        padding: var(--spacing-xs);
    }

    .contact-item {
        font-size: 0.8rem;
    }

    .static-comments__wrapper {
        padding: var(--spacing-lg);
    }

    .page-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-links a {
        min-width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
}

/* 特殊页面样式 */
.static-content__body .form-container {
    background-color: #f8f9fa;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-xl) 0;
}

.static-content__body .form-container h3 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.static-content__body .highlight-box {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.static-content__body .highlight-box h4 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.static-content__body .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.static-content__body .info-card {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.static-content__body .info-card h5 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.static-content__body .info-card i {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* 商品详情页面响应式设计 */
@media (max-width: 1024px) {
    .product-detail__main-content {
        gap: var(--spacing-xl);
    }

    .product-detail__main-section {
        padding: var(--spacing-lg);
    }

    .product-detail__details-section {
        padding: var(--spacing-lg);
    }

    .product-detail__info .product_title {
        font-size: 2rem !important;
    }

    .product-detail__info .price {
        font-size: 2rem !important;
    }

    .product-detail__tabs .wc-tabs li a {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: 1.1rem !important;
    }

    .product-detail__tabs .wc-tab {
        padding: var(--spacing-xl) !important;
    }
}

@media (max-width: 768px) {
    .product-detail {
        padding: var(--spacing-lg) 0;
    }

    .product-detail .container {
        padding: 0 var(--spacing-md);
    }

    /* 上栏移动端改为垂直布局 */
    .product-detail__main-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .product-detail__main-section {
        padding: var(--spacing-md);
    }

    .product-detail__details-section {
        padding: var(--spacing-md);
    }

    .product-detail__info .product_title {
        font-size: 1.8rem !important;
    }

    .product-detail__info .price {
        font-size: 1.8rem !important;
    }

    .product-detail__info .cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--spacing-sm) !important;
    }

    .product-detail__info .cart .quantity {
        justify-content: center !important;
    }

    .product-detail__info .cart .single_add_to_cart_button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 缩略图在移动端调整 */
    .product-detail__gallery .flex-control-thumbs {
        justify-content: center;
    }

    .product-detail__gallery .flex-control-thumbs li {
        width: 60px;
        height: 60px;
    }

    /* 下栏标签页响应式 */
    .product-detail__tabs .wc-tabs {
        flex-direction: column !important;
        border-radius: var(--border-radius) !important;
    }

    .product-detail__tabs .wc-tabs li a {
        text-align: left !important;
        padding: var(--spacing-md) !important;
        font-size: 1rem !important;
    }

    .product-detail__tabs .wc-tabs li a::after {
        left: 0 !important;
        transform: none !important;
        width: 0 !important;
        height: 100% !important;
        top: 0 !important;
        border-radius: 0 2px 2px 0 !important;
    }

    .product-detail__tabs .wc-tabs li.active a::after,
    .product-detail__tabs .wc-tabs li a:hover::after {
        width: 4px !important;
    }

    .product-detail__tabs .wc-tab {
        padding: var(--spacing-lg) !important;
        border-radius: var(--border-radius) !important;
    }

    .product-detail__tabs .wc-tab h2 {
        font-size: 1.5rem !important;
        text-align: left !important;
    }

    .product-detail__tabs .wc-tab h2::after {
        left: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .product-detail .container {
        padding: 0 var(--spacing-sm);
    }

    .product-detail__main-section {
        padding: var(--spacing-sm);
    }

    .product-detail__details-section {
        padding: var(--spacing-sm);
    }

    .product-detail__info .product_title {
        font-size: 1.5rem !important;
    }

    .product-detail__info .price {
        font-size: 1.5rem !important;
    }

    .product-detail__info .cart .quantity input {
        width: 60px !important;
        padding: 0.5rem !important;
    }

    .product-detail__info .cart .single_add_to_cart_button {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* 缩略图进一步缩小 */
    .product-detail__gallery .flex-control-thumbs li {
        width: 50px;
        height: 50px;
    }

    .product-detail__tabs .wc-tabs li a {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.9rem !important;
    }

    .product-detail__tabs .wc-tab {
        padding: var(--spacing-md) !important;
        font-size: 1rem !important;
    }

    .product-detail__tabs .wc-tab h2 {
        font-size: 1.3rem !important;
    }

    .product-detail__tabs .wc-tab h3 {
        font-size: 1.2rem !important;
    }

    .product-detail__tabs .wc-tab h4 {
        font-size: 1.1rem !important;
    }
}

/*
注释掉所有自定义商品卡片样式，完全使用首页推荐商品的原始样式
现在商品展示区域使用 .recommended-products 类，会自动应用首页的所有样式
包括：商品卡片、图片、标题、描述、价格、按钮等所有元素
*/

/* WooCommerce商品展示样式优化 - 确保与首页推荐商品完全一致 */

/* 通用商品图片优化 - 适用于所有商品展示区域 */
.product-card__image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.product-card__image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* 确保WooCommerce商品使用首页推荐商品的样式 */
.woocommerce .recommended-products .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-lg) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 移除WooCommerce默认样式冲突 */
.woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    display: block !important;
}

/* 确保商品卡片样式正确应用 */
.recommended-products .product-card {
    background-color: var(--color-white) !important;
    border-radius: var(--border-radius-large) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: var(--transition-normal) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.recommended-products .product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-medium) !important;
}

/* 商品图片样式 - 统一优化 */
.recommended-products .product-card__image,
.woocommerce .product-card__image,
.products-grid .product-card__image {
    position: relative !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    background-color: var(--color-light-gray) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.recommended-products .product-card__image img,
.woocommerce .product-card__image img,
.products-grid .product-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: var(--transition-slow) !important;
    display: block !important;
    border: none !important;
    outline: none !important;
}

.recommended-products .product-card:hover .product-card__image img,
.woocommerce .product-card:hover .product-card__image img,
.products-grid .product-card:hover .product-card__image img {
    transform: scale(1.05) !important;
}

/* 商品标签样式 */
/* .recommended-products .product-card__badge {
    position: absolute !important;
    top: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    background-color: var(--color-primary) !important;
    color: var(--text-white) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
} */

/* 商品内容区域 */


.recommended-products .product-card__title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.recommended-products .product-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.recommended-products .product-card__title a:hover {
    color: var(--color-primary) !important;
}

.recommended-products .product-card__description {
    font-size: 0.9rem !important;
    color: var(--text-gray) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--spacing-sm) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 商品价格样式 */
.recommended-products .product-card__price {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    margin-bottom: var(--spacing-md) !important;
}

.recommended-products .price-current,
.recommended-products .product-card__price .woocommerce-Price-amount {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

.recommended-products .price-original,
.recommended-products .product-card__price del {
    font-size: 1rem !important;
    color: var(--text-gray) !important;
    text-decoration: line-through !important;
}

/* 商品按钮样式增强 */
.recommended-products .product-card__buttons .btn {
    flex: 1 !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.recommended-products .product-card__buttons .btn--secondary {
    background-color: transparent !important;
    color: var(--text-black) !important;
    border: 1px solid var(--color-medium-gray) !important;
}

.recommended-products .product-card__buttons .btn--secondary:hover {
    background-color: var(--color-black) !important;
    color: var(--text-white) !important;
    border-color: var(--color-black) !important;
}

.recommended-products .product-card__buttons .btn--primary {
    background: linear-gradient(135deg, var(--color-primary), #e63946) !important;
    color: var(--text-white) !important;
    border: none !important;
}

.recommended-products .product-card__buttons .btn--primary:hover {
    background: linear-gradient(135deg, #c02a37, #b02a37) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.recommended-products .product-card__buttons .btn--disabled {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* 商品价格显示优化 */
.recommended-products .product-card__price .woocommerce-Price-amount bdi {
    font-weight: inherit !important;
    color: inherit !important;
}

.recommended-products .product-card__price ins {
    text-decoration: none !important;
    background: none !important;
}

.recommended-products .product-card__price del {
    opacity: 0.7 !important;
    margin-right: 0.5rem !important;
}

/* WooCommerce响应式设计优化 */
@media (max-width: 1024px) {
    .woocommerce .recommended-products .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-md) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce .recommended-products .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }
}

@media (max-width: 480px) {
    .woocommerce .recommended-products .products-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    /* 移动端商品图片进一步优化 */
    .product-card__image {
        aspect-ratio: 4/3 !important;
        min-height: 180px !important;
    }
}

/* 无商品状态 */
.no-products-found {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.no-products-content {
    max-width: 400px;
    margin: 0 auto;
}

.no-products-content i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: var(--spacing-lg);
}

.no-products-content h3 {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.no-products-content p {
    color: #6c757d;
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

/* 商品详情页样式 */
.product-header {
    padding: var(--spacing-lg) 0;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.product-detail {
    padding: var(--spacing-xl) 0;
}

.product-detail__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.product-detail__content {
    flex-direction: column;
}

.product-detail__info {
    flex: 1;
}

/* WooCommerce 商品详情页元素样式 */
.woocommerce div.product .product_title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    margin-bottom: var(--spacing-md) !important;
    line-height: 1.2 !important;
}

.woocommerce div.product .woocommerce-product-rating {
    margin-bottom: var(--spacing-md) !important;
}

.woocommerce div.product p.price {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--spacing-lg) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #6c757d !important;
    margin-bottom: var(--spacing-lg) !important;
}

.woocommerce div.product form.cart {
    margin-bottom: var(--spacing-lg) !important;
}

.woocommerce div.product form.cart .button {
    background: linear-gradient(135deg, var(--color-primary), #e63946) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.woocommerce div.product form.cart .button:hover {
    background: linear-gradient(135deg, #c02a37, #b02a37) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3) !important;
}

/* 商品图片样式 */
.woocommerce div.product div.images {
    margin-bottom: 0 !important;
}

.woocommerce div.product div.images img {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: var(--color-white) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 商品标签页样式 */
.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--spacing-xl) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8f9fa !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 1rem 1.5rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--color-white) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0 0 8px 8px !important;
    padding: var(--spacing-lg) !important;
}

/* 相关商品推荐样式 */
.related-products {
    padding: var(--spacing-xl) 0;
    background: #f8f9fa;
}

.related-products .section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.related-products .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.related-products .section-subtitle {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
}

/* WooCommerce 相关商品样式覆盖 */
.woocommerce .upsells.products,
.woocommerce .related.products,
.woocommerce .cross-sells {
    background: #f8f9fa !important;
    padding: var(--spacing-xl) 0 !important;
    margin: var(--spacing-xl) 0 0 !important;
}

.woocommerce .upsells.products h2,
.woocommerce .related.products h2,
.woocommerce .cross-sells h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    text-align: center !important;
    margin-bottom: var(--spacing-xl) !important;
}

/* 服务保障样式 */
.service-guarantee {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
    border-top: 1px solid #dee2e6;
}

.guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.guarantee-item:hover {
    background: var(--color-white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.guarantee-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.guarantee-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.guarantee-content p {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* WooCommerce 分页样式 */
.woocommerce nav.woocommerce-pagination {
    margin-top: var(--spacing-xl) !important;
    text-align: center !important;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex !important;
    gap: 0.5rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0 !important;
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 0.75rem 1rem !important;
    background: var(--color-white) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* 响应式设计 - WooCommerce 商城页面优化 */
@media (max-width: 1024px) {
    .shop-filter__wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .shop-filter__buttons {
        max-width: 100%;
        justify-content: center;
    }

    .shop-filter__controls {
        justify-content: space-between;
        width: 100%;
    }

    .filter-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .filter-btn i {
        font-size: 0.8rem;
    }

    .shop-products__header {
        text-align: center;
    }

    .category-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .shop-filter {
        position: static;
        padding: var(--spacing-md) 0;
    }

    .shop-filter__wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-filter__buttons {
        justify-content: center;
        max-width: 100%;
    }

    .filter-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .filter-btn span {
        font-size: 0.8rem;
    }

    .filter-btn .category-count {
        font-size: 0.7rem;
    }

    .filter-btn--child {
        margin-left: 0;
        padding: 0.5rem 0.75rem;
    }

    .shop-filter__view-toggle {
        order: -1;
        align-self: center;
        margin-bottom: var(--spacing-sm);
    }

    .shop-products {
        padding: var(--spacing-lg) 0;
    }

    .shop-products__header {
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }

    .category-title {
        font-size: 1.25rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .category-description {
        font-size: 1rem;
    }

    .product-detail__wrapper {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }

    .woocommerce div.product .product_title {
        font-size: 2rem !important;
    }

    .guarantee-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    .guarantee-item {
        padding: var(--spacing-md) !important;
    }

    /* 商品按钮响应式 */
    .shop-products .product-card__buttons .btn {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .shop-filter__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        flex-direction: row;
        justify-content: center;
        border-radius: 8px;
    }

    .filter-btn i {
        font-size: 0.85rem;
    }

    .shop-products {
        padding: var(--spacing-md) 0;
    }

    .shop-products__count {
        text-align: center;
        font-size: 0.85rem;
    }

    .category-title {
        font-size: 1.1rem;
    }

    .category-description {
        font-size: 0.9rem;
    }

    /* 移动端商品图片优化 */
    .product-card__image,
    .recommended-products .product-card__image,
    .woocommerce .product-card__image,
    .products-grid .product-card__image {
        aspect-ratio: 4/3 !important;
        height: auto !important;
        min-height: 200px !important;
    }

    .product-card__image img,
    .recommended-products .product-card__image img,
    .woocommerce .product-card__image img,
    .products-grid .product-card__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .woocommerce div.product .product_title {
        font-size: 1.75rem !important;
    }

    .related-products .section-title {
        font-size: 2rem;
    }

    /* 商品按钮移动端优化 */
    .shop-products .product-card__buttons {
        flex-direction: row;
        gap: var(--spacing-xs);
    }

    .shop-products .product-card__buttons .btn {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
        min-width: 0;
        white-space: nowrap;
    }
}

@media (max-width: 320px) {
    .filter-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .shop-products .product-card__buttons {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .shop-products .product-card__buttons .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .category-title {
        font-size: 1rem;
    }

    .shop-products__header {
        margin-bottom: var(--spacing-md);
    }
}
/* ===== 发展历程页面样式 ===== */
.development-timeline {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

/* 增强的时间轴主线 - 更粗更明显 */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom,
        var(--color-primary) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%);
    transform: translateX(-50%);
    border-radius: 3px;
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* 时间轴主线上的装饰点 */
.timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    border: 3px solid var(--color-white);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--spacing-xl);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

/* 优化内容区域布局 - 减少边距 */
.timeline-item:nth-child(even) .timeline-content {
    margin-left: 0;
    margin-right: calc(50% + 50px);
    text-align: right;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: calc(50% + 50px);
    margin-right: 0;
    text-align: left;
}

/* 增强的时间轴标记点 */
.timeline-marker {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.timeline-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.8rem;
    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.5),
        0 0 0 4px var(--color-white),
        0 0 0 6px rgba(212, 175, 55, 0.3);
    transition: var(--transition-normal);
    position: relative;
}

.timeline-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    animation: pulse 2s infinite;
}

.timeline-icon:hover {
    transform: scale(1.1);
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.7),
        0 0 0 4px var(--color-white),
        0 0 0 8px rgba(212, 175, 55, 0.4);
}

.timeline-year {
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-medium);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--shadow-medium);
    border: 3px solid var(--color-primary);
    min-width: 60px;
    text-align: center;
}

/* 优化的内容卡片 - 移除图片，紧凑布局 */
.timeline-card {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow:
        var(--shadow-medium),
        0 0 0 1px rgba(212, 175, 55, 0.1);
    transition: var(--transition-normal);
    border-left: 4px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}

.timeline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.timeline-card:hover {
    transform: translateY(-8px);
    box-shadow:
        var(--shadow-large),
        0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* 紧凑的内容区域 */


.timeline-info h3 {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.timeline-date {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-date::before {
    content: '📅';
    font-size: 1rem;
}

.timeline-description {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0;
}

/* ========== 基础布局 (桌面端) ========== */
.woocommerce-MyAccount {
    display: flex;
    flex-wrap: nowrap;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    gap: 20px;
}

/* 左侧导航 (桌面端) */
.woocommerce-MyAccount-navigation {
    width: 250px;
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 8px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation li {
    margin: 15px 0;
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px;
    font-size: 16px;
    color: #ccc;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.woocommerce-MyAccount-navigation a:hover {
    background-color: #555;
    color: white;
}

.woocommerce-MyAccount-navigation .is-active a {
    background-color: #007cba;
    color: white;
    font-weight: bold;
}

/* 右侧内容 */
.woocommerce-MyAccount-content {
    flex-grow: 1;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* 桌面端隐藏按钮 */
.mobile-nav-toggle {
    display: none;
}

/* ========== 手机端响应式 ========== */
@media (max-width: 992px) {
    .woocommerce-MyAccount {
        flex-direction: column;
        padding: 10px;
    }

    /* 隐藏原本导航 */
    .woocommerce-MyAccount-navigation {
        position: fixed;
        top: 0;
        left: -260px;
        width: 250px;
        height: 100%;
        background-color: #333;
        padding: 20px;
        box-shadow: 4px 0 10px rgba(0,0,0,0.2);
        transition: left 0.3s ease-in-out;
        z-index: 9999;
    }

    /* 滑出状态 */
    .woocommerce-MyAccount-navigation.open {
        left: 0;
    }

    /* 内容全宽 */
    .woocommerce-MyAccount-content {
        width: 100%;
        padding: 15px;
    }

    /* 显示菜单按钮 */
    .mobile-nav-toggle {
        display: block;
        background: #007cba;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 6px;
        padding: 10px 16px;
        margin-bottom: 10px;
        cursor: pointer;
        width: fit-content;
    }
}





.footer-brand {
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.footer-logo i {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-description {
    color: #fff;
    line-height: 1.6;
    margin-bottom: 25px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.social-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.footer-links h6 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-contact h6 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary);
}

.contact-item i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.footer-divider {
    border: none;
    height: 1px;
    background: var(--border-color);
    margin: 40px 0 30px;
}

.copyright {
    color: var(--text-secondary);
    margin: 0;
}

.footer-nav {
    display: flex;
    gap: 25px;
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.footer-nav a:hover {
    color: var(--primary-color);
}


.category-list-image {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}


/* === Archive/Post list fixes: ensure images fill container and remove yellow stripe === */
.archive .portfolio-gallery .portfolio-item,
.blog .portfolio-gallery .portfolio-item {
    /* keep aspect ratio container; ensure no unintended bottom border/stripe */
    aspect-ratio: 4/3;
    overflow: hidden;
    border-bottom: none !important;
}
.archive .portfolio-gallery .portfolio-item img,
.blog .portfolio-gallery .portfolio-item img {
    width: 100%;
    height: 100% !important; /* override responsive heights (220px/180px) */
    object-fit: cover;
    object-position: center;
    display: block;
}
/* remove any decorative pseudo elements that could appear as a bottom stripe */
.archive .portfolio-gallery .portfolio-item::after,
.blog .portfolio-gallery .portfolio-item::after {
    content: none !important;
}


/* === Archive cards: default bottom title bar + hover full overlay === */
.archive .portfolio-gallery .portfolio-item {
    position: relative;
}
/* Default: show only a bottom gradient bar with title */
.archive .portfolio-gallery .portfolio-item__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    opacity: 1; /* keep visible for title bar */
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex; align-items: flex-end;
    /* bottom-up gradient: black at bottom -> red -> transparent */
    /* background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(220, 53, 69, 0.55) 40%,
        rgba(0, 0, 0, 0.0) 100%
    ); */
    transition: height 0.35s ease, padding 0.35s ease, background 0.35s ease;
}
/* Only title visible by default; other details hidden */
.archive .portfolio-gallery .portfolio-item__content { color: #ffffff; }
.archive .portfolio-gallery .portfolio-item__content h3 { color: #ffffff; margin: 0; }
.archive .portfolio-gallery .portfolio-item__content > :not(h3) {
    opacity: 0; max-height: 0; transform: translateY(6px);
    color: rgba(255,255,255,0);
    overflow: hidden; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease, max-height 0.25s ease;
}
/* Hover: expand overlay to full content; keep existing hover bg effect */
.archive .portfolio-gallery .portfolio-item:hover .portfolio-item__overlay {
    left: 0; right: 0; top: 0; bottom: 0; height: 100%;
    padding: var(--spacing-lg);
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}
.archive .portfolio-gallery .portfolio-item:hover .portfolio-item__content,
.archive .portfolio-gallery .portfolio-item:hover .portfolio-item__content * {
    color: #ffffff !important; transition: color 0.25s ease;
}
.archive .portfolio-gallery .portfolio-item:hover .portfolio-item__content > * {
    opacity: 1; max-height: 500px; transform: translateY(0);
    pointer-events: auto;
}
/* Mobile/touch: always show full content for better usability */
@media (hover: none) {
    .archive .portfolio-gallery .portfolio-item__overlay {
        top: 0; left: 0; right: 0; bottom: 0; height: 100%;
        padding: var(--spacing-lg);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    }
    .archive .portfolio-gallery .portfolio-item__content > * {
        opacity: 1; max-height: 500px; transform: none; color: #ffffff;
    }
}


/* === Navigation: current item/parent/ancestor highlight (glass, red-black) === */
.navbar__nav > li.current-menu-item > a.navbar__link,
.navbar__nav > li.current_page_item > a.navbar__link,
.navbar__nav > li.current-menu-parent > a.navbar__link,
.navbar__nav > li.current-menu-ancestor > a.navbar__link {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(220,53,69,0.7) 0%, rgba(0,0,0,0.7) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 8px 24px rgba(220,53,69,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  border: none;
}

/* Highlight for submenu items */
.navbar__dropdown-menu li.current-menu-item > a,
.navbar__dropdown-menu li.current_page_item > a,
.navbar__dropdown-menu li.current-menu-parent > a,
.navbar__dropdown-menu li.current-menu-ancestor > a {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(220,53,69,0.7) 0%, rgba(0,0,0,0.7) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}

/* ===== 推荐案例样式 ===== */
/* 案例网格布局 */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

/* 案例项目样式 */
.case-item {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.case-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 案例链接样式 */
.case-item__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 案例图片区域 */
.case-item__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

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

.case-item:hover .case-item__image img {
    transform: scale(1.05);
}

/* 推荐标识 */
.case-item__badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

.recommended-badge {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.recommended-badge::before {
    content: '★';
    font-size: 0.8rem;
}

/* 案例内容区域 */
.case-item__content {
    padding: var(--spacing-lg);
}

.case-item__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.case-item:hover .case-item__title {
    color: var(--color-primary);
}

/* 分类标签 */
.case-item__category {
    margin-bottom: var(--spacing-sm);
}

.case-item__category span {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-primary);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 摘要文本 */
.case-item__excerpt {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

/* 元信息 */
.case-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid var(--color-light-gray);
    padding-top: var(--spacing-sm);
}

.case-item__meta time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.case-item__meta time::before {
    content: '📅';
    font-size: 0.8rem;
}

/* 空状态样式 */
.case-item--empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xxl);
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.8) 0%,
        rgba(255, 255, 255, 0.9) 100%);
    border: 2px dashed rgba(220, 53, 69, 0.2);
    border-radius: var(--border-radius-large);
}

.case-item__empty-content {
    max-width: 400px;
    margin: 0 auto;
}

.case-item__empty-icon {
    margin-bottom: var(--spacing-md);
}

.case-item--empty h4 {
    font-size: 1.5rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-sm);
}

.case-item--empty p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.case-item__stats {
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(220, 53, 69, 0.1);
}

/* ===== 博客文章页面样式 ===== */

/* 博客列表页面 */
.blog-listing {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.blog-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.blog-main {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-light);
}

/* 文章网格布局 */
.posts-grid {
    display: grid;
    gap: var(--spacing-xl);
}

/* 文章卡片样式 */
.post-card {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-medium-gray);
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(220, 53, 69, 0.2);
}

.post-card__content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* 文章图片 */
.post-card__image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--border-radius);
}

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

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

.post-card__badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

/* 文章内容 */
.post-card__body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.post-card__category {
    margin-bottom: var(--spacing-xs);
}

.category-tag {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.category-tag:hover {
    background: var(--color-primary);
    color: white;
}

.category-tag--large {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.post-card__title {
    margin: 0;
    line-height: 1.3;
}

.post-card__title a {
    color: var(--text-black);
    font-size: 1.5rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 1rem;
    margin: var(--spacing-sm) 0;
}

/* 文章元信息 */
.post-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-light-gray);
}

.post-meta__left {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.post-date,
.post-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.post-date i,
.post-author i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

.read-more-btn {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-more-btn:hover {
    background: linear-gradient(135deg, #c41e3a, var(--color-primary));
    transform: translateX(5px);
}

.read-more-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

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

/* 分页导航 */
.pagination-wrapper {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.pagination {
    display: inline-flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.pagination .page-numbers {
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    color: var(--text-gray);
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.pagination .page-numbers.dots {
    border: none;
    background: none;
    color: var(--text-muted);
}

/* 无文章状态 */
.no-posts {
    text-align: center;
    padding: var(--spacing-xxl);
}

.no-posts__content {
    max-width: 400px;
    margin: 0 auto;
}

.no-posts__icon {
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

.no-posts h3 {
    font-size: 1.5rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-sm);
}

.no-posts p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* 博客侧边栏 */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.sidebar-widget {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-medium-gray);
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-title i {
    color: var(--color-primary);
    font-size: 1rem;
}

.widget-content {
    color: var(--text-gray);
}

/* 最新文章列表 */
.recent-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recent-posts-list li {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-light-gray);
}

.recent-posts-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-posts-list a {
    color: var(--text-black);
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.recent-posts-list a:hover {
    color: var(--color-primary);
}

.recent-posts-list .post-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    display: block;
}

/* 分类列表 */
.categories-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.categories-list a {
    color: var(--text-gray);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.categories-list a:hover {
    color: var(--color-primary);
    padding-left: var(--spacing-sm);
}

.categories-list .post-count {
    background: var(--color-light-gray);
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.categories-list a:hover .post-count {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-primary);
}

/* ===== 单篇文章页面样式 ===== */

/* 文章背景图片区域 */
.article-header {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.article-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.article-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    z-index: -1;
}

.article-header__content {
    text-align: center;
    color: var(--text-white);
    max-width: 800px;
    padding: 0 var(--spacing-sm);
}

.article-header .breadcrumb {
    margin-bottom: var(--spacing-md);
}

.article-header .breadcrumb a,
.article-header .breadcrumb span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.article-header .breadcrumb a:hover {
    color: white;
}

.article-section-info {
    margin-top: var(--spacing-md);
}

.section-label {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.article-category {
    margin-bottom: var(--spacing-md);
    text-align: center;
    padding-top: 20px;
}

.article-header__title {
    font-family: var(--font-secondary);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.article-recommended {
    margin-bottom: var(--spacing-md);
}

.recommended-badge--large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.recommended-badge--large i {
    margin-right: 0.5rem;
}

/* 文章元信息 */
.article-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.article-meta__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.article-meta__item i {
    color: var(--color-primary);
    font-size: 0.9rem;
}

.article-meta__item strong {
    color: white;
}

/* 文章信息区域 */
.article-info-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-medium-gray);
}

.article-info-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--spacing-sm);
}

.article-info-content .category-tag {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: var(--spacing-md);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.article-info-content .category-tag:hover {
    background: linear-gradient(135deg, #c41e3a, var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* 栏目分类图片样式 */
.article-category-image {
    margin: var(--spacing-lg) 0;
    display: flex;
    justify-content: center;
}

.category-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 200px;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.category-image-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-image-wrapper:hover .category-image {
    transform: scale(1.05);
}

.category-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.category-image-label {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.article-info__title {
    font-family: var(--font-secondary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-black);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.article-info-content .recommended-badge {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 3px 12px rgba(220, 53, 69, 0.3);
    margin-bottom: var(--spacing-md);
}

.article-info-content .article-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.article-info-content .article-meta__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-gray);
    background: var(--color-light-gray);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-medium-gray);
    transition: all 0.3s ease;
}

.article-info-content .article-meta__item:hover {
    background: rgba(220, 53, 69, 0.05);
    border-color: var(--color-primary);
}

.article-info-content .article-meta__item i {
    color: var(--color-primary);
    font-size: 0.9rem;
}

.article-info-content .article-meta__item strong {
    color: var(--text-black);
    font-weight: 600;
}

/* 文章内容区域 */
.article-content {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light-gray);
}

.article-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* 单栏布局 */
.article-layout--single {
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin: 0 auto;
}

.article-main {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-light);
}

/* 全宽文章主体 */
.article-main--full {
    width: 100%;
}

/* 文章摘要 */
.article-excerpt {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.02));
    border-left: 4px solid var(--color-primary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
}

.article-excerpt__title {
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-excerpt__title::before {
    content: '📝';
    font-size: 1rem;
}

.article-excerpt__content {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 1.1rem;
    font-style: italic;
}

/* 文章正文 */
.article-body {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--text-black);
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    color: var(--text-black);
    font-weight: 700;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    line-height: 1.3;
}

.article-body h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-sm);
}

.article-body h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.article-body p {
    margin-bottom: var(--spacing-md);
}

.article-body img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    margin: var(--spacing-lg) 0;
}

.article-body blockquote {
    background: var(--color-light-gray);
    border-left: 4px solid var(--color-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--border-radius);
    font-style: italic;
    color: var(--text-gray);
}

.article-body ul,
.article-body ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.article-body li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.article-body code {
    background: var(--color-light-gray);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-primary);
}

.article-body pre {
    background: var(--color-charcoal);
    color: var(--text-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}

.article-body pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* 分页链接 */
.page-links {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.page-links-title {
    font-weight: 700;
    color: var(--text-black);
    margin-right: var(--spacing-sm);
}

.page-links a,
.page-links span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 2px solid var(--color-medium-gray);
    border-radius: var(--border-radius);
    color: var(--text-gray);
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-links a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* 文章标签 */
.article-tags {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--color-light-gray);
    border-radius: var(--border-radius);
}

.article-tags__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-tags__title i {
    color: var(--color-primary);
}

.article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.tag-link {
    background: var(--color-white);
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid rgba(220, 53, 69, 0.2);
    transition: all 0.3s ease;
}

.tag-link:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* 文章导航 */
.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--color-light-gray);
    border-radius: var(--border-radius);
}

.article-nav__prev,
.article-nav__next {
    min-height: 80px;
}

.article-nav__link {
    display: block;
    padding: var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-medium-gray);
    transition: all 0.3s ease;
    height: 100%;
}

.article-nav__link:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.article-nav__direction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-nav__direction i {
    color: var(--color-primary);
}

.article-nav__title {
    color: var(--text-black);
    font-weight: 700;
    line-height: 1.3;
    font-size: 1.1rem;
}

.article-nav__next .article-nav__direction {
    justify-content: flex-end;
}

/* 作者信息 */
.author-bio {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.02));
    border-radius: var(--border-radius-large);
    margin: var(--spacing-xl) 0;
    border: 1px solid rgba(220, 53, 69, 0.1);
}

.author-bio__avatar {
    flex-shrink: 0;
}

.author-bio__avatar img {
    border-radius: 50%;
    border: 3px solid var(--color-primary);
}

.author-bio__content {
    flex: 1;
}

.author-bio__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: var(--spacing-sm);
}

.author-bio__description {
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

.author-bio__links {
    display: flex;
    gap: var(--spacing-sm);
}

.author-link {
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.author-link:hover {
    background: #c41e3a;
    transform: translateY(-2px);
}

/* 文章侧边栏 */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* 目录导航 */
.toc-widget {
    position: sticky;
    top: 100px;
}

.article-toc {
    max-height: 400px;
    overflow-y: auto;
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc li {
    margin-bottom: var(--spacing-xs);
}

.article-toc a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--text-gray);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    line-height: 1.4;
}

.article-toc a:hover,
.article-toc a.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: rgba(220, 53, 69, 0.05);
    padding-left: 1rem;
}

.article-toc .toc-h2 {
    font-weight: 700;
}

.article-toc .toc-h3 {
    padding-left: 1.5rem;
    font-size: 0.85rem;
}

.article-toc .toc-h4 {
    padding-left: 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 相关文章 */
.related-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.related-post-item {
    border-bottom: 1px solid var(--color-light-gray);
    padding-bottom: var(--spacing-md);
}

.related-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-post-link {
    display: flex;
    gap: var(--spacing-sm);
    align-items: start;
    transition: all 0.3s ease;
}

.related-post-link:hover {
    transform: translateX(5px);
}

.related-post-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.related-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-post-content {
    flex: 1;
}

.related-post-title {
    color: var(--text-black);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.related-post-link:hover .related-post-title {
    color: var(--color-primary);
}

.related-post-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 响应式设计 - 博客页面 */
@media (max-width: 1024px) {
    .blog-content,
    .article-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .blog-sidebar,
    .article-sidebar {
        order: -1;
    }

    .toc-widget {
        position: static;
    }
}

@media (max-width: 768px) {
    .post-card__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .post-card__image {
        aspect-ratio: 16/9;
    }

    .post-card__body {
        padding: var(--spacing-md);
    }

    .post-card__title a {
        font-size: 1.25rem;
    }

    .post-meta__left {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }

    .article-header__title {
        font-size: 2rem;
    }

    .article-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .article-navigation {
        grid-template-columns: 1fr;
    }

    .author-bio {
        flex-direction: column;
        text-align: center;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blog-main,
    .article-main {
        padding: var(--spacing-md);
    }

    .sidebar-widget {
        padding: var(--spacing-md);
    }

    .article-header__title {
        font-size: 1.75rem;
    }

    .article-body {
        font-size: 1rem;
    }

    .article-body h2 {
        font-size: 1.5rem;
    }

    .article-body h3 {
        font-size: 1.25rem;
    }

    .read-more-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ===== 推荐内容区域样式 ===== */

/* 推荐内容区域 */
.recommendations-section {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.8) 0%,
        rgba(255, 255, 255, 0.9) 100%);
    border-top: 1px solid var(--color-medium-gray);
}

.recommendations-block {
    margin-bottom: var(--spacing-xxl);
}

.recommendations-block:last-child {
    margin-bottom: 0;
}

.recommendations-title {
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-black);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.recommendations-title i {
    color: var(--color-primary);
    font-size: 1.8rem;
}

/* 推荐文章网格 */
.recommended-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* 推荐文章卡片 */
.recommended-post-card {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-medium-gray);
    position: relative;
}

.recommended-post-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(220, 53, 69, 0.2);
}

.recommended-post-card__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

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

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

.recommended-post-card__badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

.recommended-post-card__content {
    padding: var(--spacing-lg);
}

.recommended-post-card__title {
    margin: 0 0 var(--spacing-sm);
    line-height: 1.3;
}

.recommended-post-card__title a {
    color: var(--text-black);
    font-size: 1.125rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.recommended-post-card__title a:hover {
    color: var(--color-primary);
}

.recommended-post-card__excerpt {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
}

.recommended-post-card__meta {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.recommended-post-card__meta i {
    color: var(--color-primary);
    margin-right: 0.25rem;
}

/* 推荐商品网格 */
.recommended-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

/* 推荐商品卡片 */
.recommended-product-card {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-medium-gray);
    position: relative;
}

.recommended-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(220, 53, 69, 0.2);
}

.recommended-product-card__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.recommended-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recommended-product-card:hover .recommended-product-card__image img {
    transform: scale(1.05);
}

.recommended-product-card__badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

.sale-badge {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.recommended-product-card__content {
    padding: var(--spacing-lg);
}

.recommended-product-card__title {
    margin: 0 0 var(--spacing-sm);
    line-height: 1.3;
}

.recommended-product-card__title a {
    color: var(--text-black);
    font-size: 1.125rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.recommended-product-card__title a:hover {
    color: var(--color-primary);
}

.recommended-product-card__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.recommended-product-card__price .woocommerce-Price-amount {
    font-weight: 700;
}

.recommended-product-card__price del {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-right: 0.5rem;
}

.recommended-product-card__actions {
    display: flex;
    gap: var(--spacing-sm);
}

.recommended-product-card__actions .btn {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    text-align: center;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.recommended-product-card__actions .btn--secondary {
    background: transparent;
    color: var(--text-black);
    border: 2px solid var(--color-medium-gray);
}

.recommended-product-card__actions .btn--secondary:hover {
    background: var(--color-black);
    color: white;
    border-color: var(--color-black);
}

.recommended-product-card__actions .btn--primary {
    background: linear-gradient(135deg, var(--color-primary), #e63946);
    color: white;
    border: 2px solid var(--color-primary);
}

.recommended-product-card__actions .btn--primary:hover {
    background: linear-gradient(135deg, #c41e3a, var(--color-primary));
    transform: translateY(-2px);
}

/* 无推荐内容状态 */
.no-recommendations {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-muted);
    font-style: italic;
    grid-column: 1 / -1;
}

/* 推荐内容区域响应式设计 */
@media (max-width: 1024px) {
    .recommendations-title {
        font-size: 1.75rem;
    }

    .recommended-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }

    .recommended-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .recommendations-section {
        padding: var(--spacing-xl) 0;
    }

    .recommendations-block {
        margin-bottom: var(--spacing-xl);
    }

    .recommendations-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .recommended-posts-grid,
    .recommended-products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .recommended-post-card__content,
    .recommended-product-card__content {
        padding: var(--spacing-md);
    }

    .recommended-post-card__title a,
    .recommended-product-card__title a {
        font-size: 1rem;
    }

    .recommended-product-card__actions {
        flex-direction: column;
    }

    .recommended-product-card__actions .btn {
        flex: none;
    }
}

@media (max-width: 480px) {
    .recommendations-section {
        padding: var(--spacing-lg) 0;
    }

    .recommendations-title {
        font-size: 1.25rem;
    }

    .recommended-post-card__content,
    .recommended-product-card__content {
        padding: var(--spacing-sm);
    }

    .recommended-post-card__badge,
    .recommended-product-card__badge {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
    }

    .recommended-badge,
    .sale-badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    .recommended-product-card__actions .btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
}

/* 文章信息区域响应式设计 */
@media (max-width: 1024px) {
    .article-info__title {
        font-size: 2.2rem;
    }

    .article-info-content .article-meta {
        gap: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .article-header {
        min-height: 35vh;
    }

    .article-info-section {
        padding: var(--spacing-lg) 0;
    }

    .article-info__title {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-md);
    }

    .article-info-content .article-meta {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .article-info-content .article-meta__item {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* 分类图片响应式 - 平板 */
    .category-image-wrapper {
        height: 160px;
        max-width: 500px;
    }

    .category-image-label {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .article-header {
        min-height: 30vh;
    }

    .article-info-section {
        padding: var(--spacing-md) 0;
    }

    .article-info__title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .article-info-content .category-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .article-info-content .recommended-badge {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .article-info-content .article-meta__item {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    /* 分类图片响应式 - 手机 */
    .article-category-image {
        margin: var(--spacing-md) 0;
    }

    .category-image-wrapper {
        height: 120px;
        max-width: 100%;
        border-radius: var(--border-radius);
    }

    .category-image-overlay {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
    }

    .category-image-label {
        font-size: 0.9rem;
    }
}

.woocommerce-password-strength {
    color:#ff3742;
}


/* ===== 首页 关于我们 区域：移动端隐藏图片 ===== */
@media screen and (max-width: 767px) {
    /* 仅在首页的 about-preview 区域生效，避免影响其他页面 */
    .about-preview__image {
        display: none !important;
    }
     .f4 {
        display: none !important;
    }
     .f3 {
        display: none !important;
    }
     .f2 {
        display: none !important;
    }
}


/* ===== 首页 服务流程 区域：移动端横向一行显示 ===== */
@media screen and (max-width: 768px) {
    /* 使用首页作用域，避免影响其他页面 */
    body.home .process-flow {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    /* 若使用另一套结构（.process-steps/.step），同样横向排列 */
    body.home .process-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    /* 精简卡片尺寸，保持触摸友好 */
    body.home .process-step,
    body.home .process-steps .step {
        padding: var(--spacing-sm);
        border-radius: var(--border-radius);
        min-height: 120px; /* 触摸友好 */
    }

    body.home .process-step__number {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
        top: -10px;
        line-height: 22px;
    }

    body.home .process-step__icon {
        width: 44px;
        height: 44px;
        margin: var(--spacing-sm) auto var(--spacing-xs);
    }

    body.home .process-step__icon i {
        font-size: 1.1rem;
    }

    body.home .process-step__title,
    body.home .process-steps .step .title {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }

    body.home .process-step__description,
    body.home .process-steps .step .desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* 移动端横排下隐藏竖向箭头 */
    body.home .process-arrow {
        display: none;
    }
}


/* ===== 首页 推荐服务区域（移动端两列网格） ===== */
@media screen and (max-width: 768px) {
    /* 仅作用于首页的推荐服务模块 */
    body.home .recommended-products .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; /* 强制两列 */
        gap: var(--spacing-sm);
    }

    /* 卡片内容更紧凑，适配窄列 */
    body.home .recommended-products .product-card__content {
        padding: var(--spacing-md);
    }

    /* 图片高度适配（保持4:3比例，降低最小高度避免过长） */
    body.home .recommended-products .product-card__image {
        aspect-ratio: 4/3;
        min-height: 160px;
    }

    /* 标题、描述、价格字号缩小一些，增强信息密度 */
    body.home .recommended-products .product-card__title {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    body.home .recommended-products .product-card__description {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-sm);
    }
    body.home .recommended-products .product-card__price {
        margin-bottom: var(--spacing-sm);
    }
    body.home .recommended-products .price-current,
    body.home .recommended-products .product-card__price .woocommerce-Price-amount {
        font-size: 1.1rem;
    }
    body.home .recommended-products .price-original,
    body.home .recommended-products .product-card__price del {
        font-size: 0.85rem;
    }

    /* 按钮更紧凑，但保持触摸友好 */
    body.home .recommended-products .product-card__buttons {
        gap: var(--spacing-xs);
    }
    body.home .recommended-products .product-card__buttons .btn {
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
        min-height: 40px; /* 触摸友好 */
    }
}

/* 超小屏幕依然保持两列（覆盖原有 <=480px 的单列规则） */
@media screen and (max-width: 480px) {
    body.home .recommended-products .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xs);
    }
    body.home .recommended-products .product-card__image {
        min-height: 140px;
}
}


/* ===== 商城列表页（归档/分类）移动端两列布局覆盖 ===== */
@media screen and (max-width: 768px) {
    /* 仅作用于 WooCommerce 商城归档页与分类页 */
    body.woocommerce.archive .shop-products .products-grid,
    body.post-type-archive-product .shop-products .products-grid,
    body.tax-product_cat .shop-products .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm);
    }

    /* 商品卡片内容紧凑化（仅商城列表） */
    body.woocommerce.archive .shop-products .product-card__content,
    body.post-type-archive-product .shop-products .product-card__content,
    body.tax-product_cat .shop-products .product-card__content {
        padding: var(--spacing-md) !important;
    }

    body.woocommerce.archive .shop-products .product-card__image,
    body.post-type-archive-product .shop-products .product-card__image,
    body.tax-product_cat .shop-products .product-card__image {
        aspect-ratio: 4/3;
        min-height: 150px;
        object-fit: cover;
    }

    body.woocommerce.archive .shop-products .product-card__title,
    body.post-type-archive-product .shop-products .product-card__title,
    body.tax-product_cat .shop-products .product-card__title {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    body.woocommerce.archive .shop-products .product-card__description,
    body.post-type-archive-product .shop-products .product-card__description,
    body.tax-product_cat .shop-products .product-card__description {
        font-size: 0.8rem;
        line-height: 1.45;
        margin-bottom: var(--spacing-xs);
    }

    body.woocommerce.archive .shop-products .product-card__price,
    body.post-type-archive-product .shop-products .product-card__price,
    body.tax-product_cat .shop-products .product-card__price {
        margin-bottom: var(--spacing-xs);
    }
    body.woocommerce.archive .shop-products .price-current,
    body.post-type-archive-product .shop-products .price-current,
    body.tax-product_cat .shop-products .price-current,
    body.woocommerce.archive .shop-products .product-card__price .woocommerce-Price-amount,
    body.post-type-archive-product .shop-products .product-card__price .woocommerce-Price-amount,
    body.tax-product_cat .shop-products .product-card__price .woocommerce-Price-amount {
        font-size: 1rem;
    }
    body.woocommerce.archive .shop-products .price-original,
    body.post-type-archive-product .shop-products .price-original,
    body.tax-product_cat .shop-products .price-original,
    body.woocommerce.archive .shop-products .product-card__price del,
    body.post-type-archive-product .shop-products .product-card__price del,
    body.tax-product_cat .shop-products .product-card__price del {
        font-size: 0.8rem;
    }

    /* 按钮更紧凑且触摸友好 */
    body.woocommerce.archive .shop-products .product-card__buttons,
    body.post-type-archive-product .shop-products .product-card__buttons,
    body.tax-product_cat .shop-products .product-card__buttons { gap: var(--spacing-xs); }
    body.woocommerce.archive .shop-products .product-card__buttons .btn,
    body.post-type-archive-product .shop-products .product-card__buttons .btn,
    body.tax-product_cat .shop-products .product-card__buttons .btn {
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
        min-height: 40px;
    }

    /* 分类按钮容器改为两列网格（覆盖原有横向滚动/单列） */
    body.woocommerce.archive .shop-filter__buttons,
    body.post-type-archive-product .shop-filter__buttons,
    body.tax-product_cat .shop-filter__buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--spacing-xs) !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        overflow: visible !important;
    }
    body.woocommerce.archive .shop-filter__buttons .filter-btn,
    body.post-type-archive-product .shop-filter__buttons .filter-btn,
    body.tax-product_cat .shop-filter__buttons .filter-btn {
        width: 100%;
        text-align: center;
        padding: 0.6rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* 超小屏继续保持两列并收紧间距 */
@media screen and (max-width: 480px) {
    body.woocommerce.archive .shop-products .products-grid,
    body.post-type-archive-product .shop-products .products-grid,
    body.tax-product_cat .shop-products .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xs);
    }
    body.woocommerce.archive .shop-products .product-card__image,
    body.post-type-archive-product .shop-products .product-card__image,
    body.tax-product_cat .shop-products .product-card__image { min-height: 135px; }

    body.woocommerce.archive .shop-filter__buttons,
    body.post-type-archive-product .shop-filter__buttons,
    body.tax-product_cat .shop-filter__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--spacing-xs) !important;
    }
}




/* ===== WooCommerce 默认产品列表（ul.products）移动端两列覆盖，仅作用于商城列表页 ===== */
@media screen and (max-width: 768px) {
    body.woocommerce.archive ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--spacing-sm) !important;
    }
    body.woocommerce.archive ul.products li.product,
    body.post-type-archive-product ul.products li.product,
    body.tax-product_cat ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        display: block !important;
        padding: var(--spacing-md) !important; /* 卡片内边距适配两列 */
    }

    /* 图片、标题、描述与价格紧凑化（兼容默认类名与主题卡片类名） */
    body.woocommerce.archive ul.products li.product img,
    body.post-type-archive-product ul.products li.product img,
    body.tax-product_cat ul.products li.product img,
    body.woocommerce.archive ul.products li.product .product-card__image,
    body.post-type-archive-product ul.products li.product .product-card__image,
    body.tax-product_cat ul.products li.product .product-card__image {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        min-height: 150px;
    }

    body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title,
    body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
    body.woocommerce.archive ul.products li.product .product-card__title,
    body.post-type-archive-product ul.products li.product .product-card__title,
    body.tax-product_cat ul.products li.product .product-card__title {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    body.woocommerce.archive ul.products li.product .woocommerce-product-details__short-description,
    body.post-type-archive-product ul.products li.product .woocommerce-product-details__short-description,
    body.tax-product_cat ul.products li.product .woocommerce-product-details__short-description,
    body.woocommerce.archive ul.products li.product .product-card__description,
    body.post-type-archive-product ul.products li.product .product-card__description,
    body.tax-product_cat ul.products li.product .product-card__description {
        font-size: 0.8rem;
        line-height: 1.45;
        margin-bottom: var(--spacing-xs);
    }

    body.woocommerce.archive ul.products li.product .price,
    body.post-type-archive-product ul.products li.product .price,
    body.tax-product_cat ul.products li.product .price,
    body.woocommerce.archive ul.products li.product .woocommerce-Price-amount,
    body.post-type-archive-product ul.products li.product .woocommerce-Price-amount,
    body.tax-product_cat ul.products li.product .woocommerce-Price-amount {
        font-size: 1rem;
    }
    body.woocommerce.archive ul.products li.product del,
    body.post-type-archive-product ul.products li.product del,
    body.tax-product_cat ul.products li.product del { font-size: 0.8rem; }

    body.woocommerce.archive ul.products li.product .button,
    body.post-type-archive-product ul.products li.product .button,
    body.tax-product_cat ul.products li.product .button,
    body.woocommerce.archive ul.products li.product .btn,
    body.post-type-archive-product ul.products li.product .btn,
    body.tax-product_cat ul.products li.product .btn {
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
        min-height: 40px; /* 触摸友好 */
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    body.woocommerce.archive ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--spacing-xs) !important;
    }
    body.woocommerce.archive ul.products li.product img,
    body.post-type-archive-product ul.products li.product img,
    body.tax-product_cat ul.products li.product img { min-height: 135px; }
}







/* 订单确认页整体样式 */
.about-intro {
 padding: 40px 20px;
 background: #f9f9f9;
 font-family: "Helvetica Neue", Arial, sans-serif;
}


.about-intro .woocommerce-order {
 background: #fff;
 max-width: 800px;
 margin: 0 auto;
 padding: 30px;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* 成功提示 */
.woocommerce-notice--success {
 background: #e6ffed;
 color: #256029;
 padding: 12px 16px;
 border-left: 4px solid #34c759;
 border-radius: 8px;
 margin-bottom: 20px;
 font-weight: 600;
}


/* 订单概要信息 */
.woocommerce-order-overview {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 12px;
 padding: 20px;
 background: #fafafa;
 border-radius: 10px;
 border: 1px solid #eee;
 margin-bottom: 25px;
}


.woocommerce-order-overview li {
 list-style: none;
 font-size: 15px;
}


.woocommerce-order-overview strong {
 display: block;
 font-weight: 600;
 color: #333;
 margin-top: 2px;
}


/* 订单详情表格 */
.woocommerce-order-details__title,
.woocommerce-column__title {
 font-size: 20px;
 font-weight: 700;
 margin: 20px 0 10px;
 border-left: 4px solid #0073aa;
 padding-left: 8px;
 color: #0073aa;
}


.woocommerce-table--order-details {
 width: 100%;
 border-collapse: collapse;
 background: #fff;
 margin-bottom: 20px;
 border-radius: 8px;
 overflow: hidden;
}


.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
 border-bottom: 1px solid #eee;
 padding: 12px 15px;
 font-size: 15px;
}


.woocommerce-table--order-details th {
 background: #f5f5f5;
 font-weight: 600;
 text-align: left;
}


.woocommerce-table--order-details tfoot th {
 text-align: right;
 font-weight: 600;
}


/* 再次购买按钮 */
.order-again .button {
 display: inline-block;
 background: #0073aa;
 color: #fff;
 padding: 10px 18px;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 600;
 transition: background 0.3s ease;
}


.order-again .button:hover {
 background: #005d88;
}


/* 地址信息 */
.woocommerce-customer-details address {
 font-style: normal;
 line-height: 1.6;
 background: #fafafa;
 padding: 15px;
 border-radius: 8px;
 border: 1px solid #eee;
}
/* 表格整体样式 */
#order_review {
  max-width: 800px;
  margin: 20px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-collapse: collapse;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}


/* 表头 */
#order_review th {
  background-color: #f7f7f7;
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e5e5;
}


/* 表格内容 */
#order_review td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}


/* 产品名称 */
.product-name {
  font-weight: 500;
  color: #333;
}


/* 产品数量 */
.product-quantity {
  text-align: center;
  color: #555;
}


/* 金额 */
.product-total,
.product-subtotal {
  font-weight: 600;
  color: #e63946; /* 红色表示价格 */
  text-align: right;
}


/* 表格尾部 */
#order_review tfoot th {
  background-color: #fafafa;
  font-size: 16px;
  font-weight: 600;
}


#order_review tfoot td {
  font-size: 16px;
  font-weight: 600;
}


/* 支付方式 */
#wc_payment_methods li {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}


#wc_payment_methods li:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  border-color: #999;
}


#wc_payment_methods img {
  height: 24px;
  margin-left: 10px;
  vertical-align: middle;
}


.payment_box {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}


/* WooCommerce 结算页面下单按钮 - 统一主题红黑风格 */
.woocommerce-checkout #place_order,
#place_order {
  display: block !important;
  width: 100% !important;
  background-color: var(--color-primary) !important;
  color: var(--text-white) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--border-radius) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin-top: 20px !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important;
}

.woocommerce-checkout #place_order:hover,
#place_order:hover {
  background-color: var(--color-black) !important;
  border-color: var(--color-black) !important;
  color: var(--text-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(33, 37, 41, 0.3) !important;
}

.woocommerce-checkout #place_order:active,
#place_order:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}


/* 隐私政策文字 */
.woocommerce-privacy-policy-text p {
  font-size: 13px;
  color: #999;
  margin-top: 10px;
  line-height: 1.6;
}


.woocommerce-privacy-policy-link {
  color: #1abc9c;
  text-decoration: underline;
}


.woocommerce-privacy-policy-link:hover {
  color: #16a085;
}


/* 针对结账页的下单按钮 */
.wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, #c41e3a 100%);
    border: none;
    color: white;
    transform: translateY(0);
}

.wc-block-components-checkout-place-order-button:hover {
   background: linear-gradient(135deg, #c41e3a 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(220, 53, 69, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
}