/* =================================================================================
   UYAAI WHOLESALE LANDING PAGE - FULL BUNDLE (v1.3.2)
   修复说明：
   1. 解决 PC 端变单列、移动端变三列的逻辑反转问题。
   2. 增加 .lp-dist-page 前缀，强制压制 style.css 的残留代码。
   3. 整合 Section 5 的紧凑布局。
   ================================================================================= */

/* 1. 全局样式与重置 */
.lp-dist-page {
    --lp-pink: #ed008e;
    --lp-black: #111;
    --lp-soft-bg: #f8f8f8;
    background: #fff;
    overflow: hidden;
}

/* 隐藏 WordPress 自动生成的原生标题 */
.page-template-page-wholesale .entry-header,
.page-template-page-wholesale .entry-title {
    display: none !important;
}

/* 移除 GeneratePress 默认容器边距 */
.page-template-page-wholesale .site-content,
.page-template-page-wholesale .inside-article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

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

/* =================================================================================
   UYAAI 胶囊型呼吸按钮 (由 style.css 迁移并升级)
   ================================================================================= */

.lp-dist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 45px; /* 稍微压缩高度，让胶囊比例更美观 */
    
    /* 核心升级 1：胶囊形状 */
    border-radius: 100px !important; 
    
    background: var(--lp-pink);
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    
    /* 动画准备 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 20px rgba(237, 0, 142, 0.2);
    
    /* 核心升级 2：绑定呼吸动画 (2.5秒一循环，更自然的商业节奏) */
    animation: uyaai-btn-pulse 2.5s infinite;
}

/* 呼吸动画：柔和的缩放 + 外发光扩散 */
@keyframes uyaai-btn-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 0, 142, 0.5), 0 10px 20px rgba(237, 0, 142, 0.2);
    }
    70% {
        transform: scale(1.03);
        /* 产生向外扩散消失的光晕感 */
        box-shadow: 0 0 0 15px rgba(237, 0, 142, 0), 0 15px 30px rgba(237, 0, 142, 0.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 0, 142, 0), 0 10px 20px rgba(237, 0, 142, 0.2);
    }
}

/* 悬停反馈：停止动画并加深颜色 */
.lp-dist-btn:hover {
    animation: none; /* 用户点击时保持稳定 */
    background: var(--lp-black);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    color: #fff !important;
}

/* 移动端适配：呼吸幅度减小，防止在窄屏产生视觉晃眼 */
@media (max-width: 991px) {
    .lp-dist-btn {
        padding: 15px 35px;
        font-size: 14px;
    }
    @keyframes uyaai-btn-pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(237, 0, 142, 0.4); }
        70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(237, 0, 142, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(237, 0, 142, 0); }
    }
}


/* 2. SECTION 1: HERO (首屏) */
.lp-hero-section {
    padding: 60px 0 !important;
    position: relative;
    background: #fff;
}
.lp-hero-title { font-size: clamp(32px, 5vw, 48px); font-weight: 900; line-height: 1.1; margin-bottom: 20px; }
.lp-hero-sub { font-size: 18px; color: #555; margin-bottom: 30px; }

/* 3. SECTION 2: MARKET POSITIONING (PC 默认 3 列) */
.lp-pos-section {
    padding: 80px 0 !important;
    background: #ffffff;
}
.lp-dist-page .lp-pos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* PC 端强制 3 列 */
    gap: 30px !important;
}
.lp-pos-card {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: 0.3s;
}
.pos-research-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 15px;
}
.pos-research-img img { width: 100%; height: 100%; object-fit: cover; }

/* 4. SECTION 4: SUPPLY CHAIN & MAP */
.lp-map-section {
    padding: 40px 0 !important;
    background: #fbfbfb;
    text-align: center;
}
.lp-map-visual-wrap {
    position: relative;
    margin-top: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.lp-map-bg { width: 100%; height: auto; display: block; }

/* 脉冲动画 */
.lp-pulse-point {
    position: absolute; width: 14px; height: 14px; background: var(--lp-pink);
    border-radius: 50%; z-index: 10; border: 2px solid #fff;
}
.lp-pulse-point::after {
    content: ""; position: absolute; top: -150%; left: -150%; width: 400%; height: 400%;
    border: 1px solid var(--lp-pink); border-radius: 50%;
    animation: uyaai-pulse 2.5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes uyaai-pulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}
.lp-warehouse-tag {
    position: absolute; background: #111; color: #fff; padding: 4px 10px;
    font-size: 11px; font-weight: 800; border-radius: 2px; bottom: 22px;
    left: 50%; transform: translateX(-50%); white-space: nowrap;
}

/* 底部指标卡片 (PC 默认 3 列) */
.lp-dist-page .lp-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* PC 端强制 3 列 */
    gap: 30px !important;
    margin-top: 50px;
}
.metric-item {
    background: #fff; padding: 40px 20px; border-radius: 8px;
    border: 1px solid #eee; text-align: center;
}
.metric-item.is-highlight { border: 2px solid var(--lp-pink); box-shadow: 0 15px 35px rgba(237, 0, 142, 0.1); }
.metric-number { font-size: 26px; font-weight: 900; display: block; margin-bottom: 10px; }
.metric-label { font-size: 11px; font-weight: 800; color: var(--lp-pink); text-transform: uppercase; }

.loc-list { display: inline-block; text-align: left; margin-top: 15px; }
.loc-row { font-size: 14px; color: #666; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.loc-row::before { content: "•"; color: var(--lp-pink); font-weight: bold; }

/* 5. SECTION 5: INDUSTRIAL POWER (紧凑黑区) */
.lp-factory-section {
    position: relative;
    padding: 50px 0 !important;
    background: #111 !important;
    color: #fff !important;
    text-align: center;
}
.lp-badge { color: var(--lp-pink); font-weight: 800; letter-spacing: 2px; font-size: 12px; margin-bottom: 15px; display: inline-block; }
.lp-giant-stat { font-size: clamp(60px, 10vw, 110px); font-weight: 900; color: var(--lp-pink); line-height: 1 !important; margin: 10px 0 !important; display: block; }
.lp-factory-desc { font-size: 18px !important; color: #fff !important; margin-bottom: 40px !important; font-weight: 600; }

.lp-factory-badges { display: flex; justify-content: center; gap: 40px; margin-top: 20px; flex-wrap: wrap; }
.f-badge { display: flex; flex-direction: column; align-items: center; }
.f-badge span:first-child { font-size: 22px; font-weight: 800; color: #fff; }
.f-badge span:last-child { font-size: 10px; color: #888; text-transform: uppercase; }

/* 6. MOBILE ADAPTATION (移动端适配 - 核心修复点) */
@media (max-width: 991px) {
    /* 强制所有网格在手机端变为 1 列 */
    .lp-dist-page .lp-pos-grid,
    .lp-dist-page .lp-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .lp-hero-section { text-align: center; padding-top: 20px !important; }
    
    /* 解决手机端底色冲突 */
    .lp-hero-bg-accent { display: none !important; }
    
    .lp-factory-section { padding: 40px 20px !important; }
    .lp-giant-stat { font-size: 64px !important; }
    .lp-factory-desc { font-size: 14px !important; }

/*  压缩第二屏（Positioning Section）的顶部空位 */
    .lp-dist-page .lp-pos-section {
        padding-top: 40px !important;    /* 强制将 80px 压缩为 40px */
        padding-bottom: 40px !important; /* 底部同步收紧 */
    }

    /* 2. 压缩标题区域的边距 */
    .lp-dist-page .lp-pos-header {
        margin-bottom: 30px !important;  /* 缩小标题与下方卡片的距离 */
    }

    /* 3. 消除标题本身可能自带的顶部外边距 */
    .lp-dist-page .lp-section-title {
        margin-top: 0 !important;
        font-size: 26px !important;      /* 手机端字号稍微收一点，更精致 */
    }

     /* 1. 核心压缩：将上下 60px 的 padding 砍掉一大半 */
    .lp-dist-page .lp-map-section {
        padding: 25px 0 !important; /* 上下只留 25px，左右 0 */
    }

    /* 2. 压缩地图标题下方的间距 */
    .lp-dist-page .lp-map-content {
        margin-bottom: 20px !important; /* 原本是 40px，在手机上太浪费了 */
    }

    /* 3. 压缩地图标题的字体和边距 */
    .lp-dist-page .lp-map-section .lp-section-title {
        margin-bottom: 10px !important;
        font-size: 24px !important; /* 手机端标题稍微收一点 */
    }
}

/* 核心修复：彻底抽干第一屏底部的内边距 */
    .lp-dist-page .lp-hero-section {
        padding-bottom: 0 !important; /* 强制将底部的 60px 归零 */
    }


/* -----------------------------------------------------------------
   一劳永逸：强制 UYAAI 批发落地页模板彻底占满屏幕，消除 GeneratePress 容器边距
   ----------------------------------------------------------------- */

/* 1. 强制最外层网格容器 100% 宽度，清除左右边距 */
body.page-template-page-wholesale-php .grid-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. 清除主内容区的内外边距 */
body.page-template-page-wholesale-php .site-content {
    padding: 0 !important;
}

body.page-template-page-wholesale-php .site-main {
    margin: 0 !important;
}

/* 3. 清除 GeneratePress 文章内部容器的默认间距 */
body.page-template-page-wholesale-php .inside-article {
    padding: 0 !important;
    margin: 0 !important;
}
/* -----------------------------------------------------------------
   【终极补丁：强制主内容区 #primary 无视侧边栏并拉伸至 100%】
   ----------------------------------------------------------------- */
body.page-template-page-wholesale-php #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}