/*
 * WES 全局组件样式
 * 生成日期: 2026-05-03
 * 来源: Figma Make TSX 组件中的通用样式模式
 *
 * ===== 使用说明 =====
 * 部署位置: /var/www/wesvision.cn/public/wp-content/themes/wes-child/assets/css/
 * 由 functions.php 自动加载, 无需手动 enqueue
 *
 * ===== 在 Elementor 中使用 =====
 * 在 Elementor 的 Advanced → CSS Classes 中添加对应的 class 名:
 *   例: 给 Container 添加 class "wes-section" 即可应用标准 section 间距
 *
 * ===== 命名规则 =====
 * .wes-*        组件级样式
 * .wes-btn-*    按钮变体
 * .wes-card-*   卡片变体
 * .wes-section-* Section 变体
 */


/* ═══════════════════════════════════════════════════════════
 * 1. 基础重置 & 全局排版
 * ═══════════════════════════════════════════════════════════ */

body {
    font-family: var(--wes-font-family-cn);
    color: var(--wes-color-text-body);
    background-color: var(--wes-color-bg-page);
    line-height: var(--wes-line-height-relaxed);
    font-feature-settings: 'cv01' 1, 'cv02' 1, 'tnum' 1;
    /* cv01: 区分 l/1/I | cv02: 简化 a/g | tnum: 等高数字(规格表对齐) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════
 * 2. Section 容器
 *
 * 用法: 在 Elementor 外层 Container 的 CSS Classes 中添加
 *   "wes-section"         — 白色背景 section
 *   "wes-section-alt"     — 灰色交替背景
 *   "wes-section-dark"    — 深色背景 (如 Footer)
 *   "wes-section-hero"    — Hero 全屏 section
 * ═══════════════════════════════════════════════════════════ */

.wes-section {
    padding-top: var(--wes-section-padding-y);
    padding-bottom: var(--wes-section-padding-y);
    background-color: var(--wes-color-bg-card);
    border-bottom: 1px solid var(--wes-color-border);
}

.wes-section-alt {
    padding-top: var(--wes-section-padding-y);
    padding-bottom: var(--wes-section-padding-y);
    background-color: var(--wes-color-bg-page);
    border-bottom: 1px solid var(--wes-color-border);
}

.wes-section-dark {
    padding-top: var(--wes-section-padding-y);
    padding-bottom: var(--wes-section-padding-y);
    background-color: var(--wes-color-navy-900);
    color: var(--wes-color-text-inverse);
}

.wes-section-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 响应式 section 间距 */
@media (max-width: 1024px) {
    .wes-section,
    .wes-section-alt,
    .wes-section-dark {
        padding-top: var(--wes-section-padding-y-tablet);
        padding-bottom: var(--wes-section-padding-y-tablet);
    }
}
@media (max-width: 767px) {
    .wes-section,
    .wes-section-alt,
    .wes-section-dark {
        padding-top: var(--wes-section-padding-y-mobile);
        padding-bottom: var(--wes-section-padding-y-mobile);
    }
}


/* ═══════════════════════════════════════════════════════════
 * 3. 按钮系统
 *
 * 用法: 在 Elementor Button widget 的 CSS Classes 中添加:
 *   "wes-btn wes-btn-primary"    — 蓝色主按钮
 *   "wes-btn wes-btn-secondary"  — 灰色次按钮
 *   "wes-btn wes-btn-outline"    — 蓝色边框按钮
 *   "wes-btn wes-btn-ghost"      — 透明按钮 (用于深色背景)
 * ═══════════════════════════════════════════════════════════ */

.wes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--wes-btn-padding-y) var(--wes-btn-padding-x);
    border-radius: var(--wes-radius-lg);
    font-weight: var(--wes-font-weight-semibold);
    font-size: var(--wes-font-size-lg);
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--wes-transition-normal);
    border: 2px solid transparent;
    text-decoration: none;
}

.wes-btn-primary {
    background-color: var(--wes-color-btn-primary-bg);
    color: var(--wes-color-btn-primary-text);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
}
.wes-btn-primary:hover {
    background-color: var(--wes-color-btn-primary-bg-hover);
    box-shadow: var(--wes-shadow-btn);
    transform: translateY(-2px);
}

.wes-btn-secondary {
    background-color: var(--wes-color-btn-secondary-bg);
    color: var(--wes-color-navy-800);
    border-color: var(--wes-color-border);
}
.wes-btn-secondary:hover {
    border-color: var(--wes-color-primary);
    color: var(--wes-color-primary);
}

.wes-btn-outline {
    background-color: transparent;
    color: var(--wes-color-btn-outline-text);
    border-color: var(--wes-color-btn-outline-border);
}
.wes-btn-outline:hover {
    background-color: var(--wes-color-primary);
    color: #ffffff;
}

.wes-btn-ghost {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}
.wes-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════════
 * 4. 卡片系统
 *
 * 用法: 在 Elementor Container 的 CSS Classes 中添加 "wes-card"
 * ═══════════════════════════════════════════════════════════ */

.wes-card {
    background-color: var(--wes-color-bg-card);
    border-radius: var(--wes-radius-xl);
    border: 1px solid var(--wes-color-border);
    padding: var(--wes-card-padding);
    transition: all var(--wes-transition-normal);
}
.wes-card:hover {
    transform: translateY(var(--wes-hover-lift-md));
    box-shadow: var(--wes-shadow-2xl);
}

/* 产品卡片 — 带图片上方 */
.wes-card-product {
    background-color: var(--wes-color-bg-card);
    border-radius: var(--wes-radius-xl);
    border: 1px solid var(--wes-color-border);
    overflow: hidden;
    transition: all var(--wes-transition-normal);
}
.wes-card-product:hover {
    transform: translateY(var(--wes-hover-lift-md));
    box-shadow: var(--wes-shadow-2xl);
}
.wes-card-product:hover img {
    transform: scale(1.1);
}
.wes-card-product img {
    transition: transform 0.5s ease;
}

/* 玻璃态卡片 — 用于 Hero 中的功能卡片 */
.wes-card-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wes-radius-xl);
    padding: var(--wes-card-padding-sm);
    transition: all var(--wes-transition-normal);
}
.wes-card-glass:hover {
    transform: translateY(var(--wes-hover-lift-sm));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════
 * 5. Section 标题模式
 *
 * 用法: 用 Elementor Container (Boxed) 包裹标题和副标题
 *   外层 Container: CSS Classes = "wes-section-header"
 *   H2 Heading: 使用全局字体 wes_h2
 *   Text Editor: 使用全局字体 wes_body, 颜色 wes_text_muted
 * ═══════════════════════════════════════════════════════════ */

.wes-section-header {
    text-align: center;
    margin-bottom: 56px;
}
.wes-section-header h2 {
    font-size: var(--wes-font-size-h2);
    font-weight: var(--wes-font-weight-bold);
    color: var(--wes-color-text-heading);
    margin-bottom: 16px;
}
.wes-section-header p {
    color: var(--wes-color-text-muted);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════
 * 6. 标签 / 徽章
 * ═══════════════════════════════════════════════════════════ */

.wes-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--wes-radius-full);
    font-size: var(--wes-font-size-xs);
    font-weight: var(--wes-font-weight-semibold);
}

.wes-badge-blue {
    background-color: rgba(33, 150, 243, 0.15);
    color: var(--wes-color-primary);
    border: 1px solid rgba(33, 150, 243, 0.4);
}

.wes-badge-green {
    background-color: var(--wes-color-wechat-bg);
    color: var(--wes-color-wechat);
}

.wes-badge-red {
    background-color: var(--wes-color-danger-bg);
    color: var(--wes-color-danger);
}


/* ═══════════════════════════════════════════════════════════
 * 7. WooCommerce 去电商化样式覆盖
 *
 * 说明: 这些样式与 wes-custom 插件的 PHP hooks 配合使用
 *   PHP 负责移除 DOM 元素, CSS 负责兜底隐藏
 *   双保险策略: 即使 PHP hook 失效, CSS 也能隐藏
 * ═══════════════════════════════════════════════════════════ */

/* 隐藏价格 */
.woocommerce-loop-product__price,
.woocommerce-Price-amount,
.price del,
.price ins,
.single-product .price {
    display: none !important;
}

/* 隐藏加购按钮 */
.add_to_cart_button,
.add_to_cart_inline,
.added_to_cart,
.single_add_to_cart_button {
    display: none !important;
}

/* 隐藏库存状态 */
.stock,
.in-stock,
.out-of-stock {
    display: none !important;
}

/* ShopLentor 去电商化覆盖 */
.shoplentor-product-grid .price,
.shoplentor-product-grid .woocommerce-Price-amount,
.shoplentor-product-grid .add_to_cart_button,
.shoplentor-product-grid .add_to_cart_inline {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
 * 8. 统计数字 (用 Inter 字体)
 *
 * 用法: 在 Heading widget 的 CSS Classes 中添加 "wes-stat-number"
 * ═══════════════════════════════════════════════════════════ */

.wes-stat-number {
    font-family: var(--wes-font-family-en);
    font-weight: var(--wes-font-weight-bold);
    color: var(--wes-color-primary);
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════
 * 9. 产品型号标签 (用等宽字体)
 * ═══════════════════════════════════════════════════════════ */

.wes-model-code {
    font-family: var(--wes-font-family-en);
    font-size: var(--wes-font-size-xs);
    color: var(--wes-color-primary);
    letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════
 * 10. 询价按钮 (替代 WooCommerce 加购)
 *
 * 用法: 在自定义 HTML widget 中使用 .wes-btn-inquire class
 * ═══════════════════════════════════════════════════════════ */

.wes-btn-inquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    background-color: var(--wes-color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--wes-radius-md);
    font-size: var(--wes-font-size-sm);
    font-weight: var(--wes-font-weight-semibold);
    cursor: pointer;
    transition: all var(--wes-transition-normal);
}
.wes-btn-inquire:hover {
    background-color: var(--wes-color-primary-dark);
    box-shadow: var(--wes-shadow-md);
}