/* 全局重置与基础样式 */
:root {
    --primary-color: #333;
    --secondary-color: #666;
    --accent-color: #000;
    --bg-light: #f5f5f5;
    --bg-white: #f9fafb;
    --footer-bg: #1a1f2e;
    --footer-text: #a0a0a0;
    --border-radius: 8px;
    --container-width: 1440px; /* 更新为设计稿宽度 */
    --hero-arrow-offset: 40px; /* 轮播左右箭头距两侧 */
    --hero-arrow-size: 50px;   /* 轮播左右箭头尺寸（与 .hero-button-next/prev width 一致） */
    --hero-content-gap: 40px;  /* hero 内容距左箭头 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--primary-color);
    line-height: 1.6;
    background-color: var(--bg-white);
}

/* 避免"走近杨桃"等轮播阴影/缩放造成横向滚动条 */
body {
    overflow-x: hidden;
    overflow-y: auto; /* 确保垂直方向可滚动 */
}

html {
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px; /* 如果需要留白，可以适当保留，但对于 1440px 宽度，通常需要更大的内容区域 */
}

/* Mall page layout - only for 系列区块，自适应留白 */
.mall-section .container {
    max-width: none;
    width: 100%;
    /* 1440 设计稿：系列内容区左右边距 30 */
    padding-left: clamp(16px, 2.1vw, 30px);
    padding-right: clamp(16px, 2.1vw, 30px);
}

/* 按钮通用样式 */
.btn {
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #fff;
    border: 1px solid var(--accent-color);
}

.btn-dark {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #333;
    color: #333;
}

/* 头部 Header */
.site-header {
    background-color: #fff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Desktop/Mobile Utility Classes (GLOBAL)
   说明：之前这段被写进了 @media (max-width: 1024px) 内，导致桌面端没有生效，从而误显示 `.mobile-only` 内容 */
.desktop-only { display: block; }
.mobile-only { display: none !important; }
.mobile-only-title {
    display: none !important;
}

@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}

/* Mobile nav menu: desktop default hidden (avoid showing as plain list on desktop) */
.mobile-nav-menu { display: none; }

.header-container {
    display: flex;
    align-items: center;
    padding-left: 78.49px !important;
    padding-right: 78.49px !important;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-link {
    display: inline-flex;
    align-items: center;
}

.logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.logo-placeholder {
    font-weight: bold;
    font-size: 24px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 67px;
}

.main-nav {
    margin-left: 50px; /* 距离左侧 Logo 110px */
    flex: 1;
}

.main-nav ul {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap; /* 强制不换行 */
}

/* 针对中等屏幕 (1024px - 1366px) 优化导航栏，防止换行 */
@media (min-width: 1025px) and (max-width: 1366px) {
    .header-container {
        padding-left: 40px !important; /* 减小两侧留白 */
        padding-right: 40px !important;
    }
    
    .main-nav {
        margin-left: 40px; /* 减小左侧间距 */
    }

    .main-nav ul {
        gap: 20px; /* 减小菜单项间距 */
    }
    
    .main-nav a {
        font-size: 14px; /* 稍微减小字号 */
        white-space: nowrap; /* 确保文字不折行 */
    }
}

.main-nav a {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 500;
}

.main-nav a:hover {
    color: #666; /* 浅色调hover */
}

.main-nav a.active {
    color: #111827;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Header: 联系我们下拉客服二维码 */
.contact-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.contact-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: 180px;
    padding: 14px 14px 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
    border: 1px solid rgba(17, 24, 39, 0.06);
    opacity: 0;
    transform: translate(-50%, -6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1100;
}

/* 增加透明伪元素填补间隙，防止鼠标移向弹框时 hover 丢失 */
.contact-panel::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 20px; /* 覆盖上方间隙 */
    background: transparent;
}

.contact-dropdown:hover .contact-panel,
.contact-dropdown:focus-within .contact-panel {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.contact-panel-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background: #fff;
}

.contact-panel-text {
    margin-top: 10px;
    text-align: center;
    line-height: 1.25;
}

.contact-panel-title {
    font-size: 14px;
    color: #3D3D3D;
}

.contact-panel-subtitle {
    font-size: 12px;
    color: #3D3D3D;
    margin-top: 4px;
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 6px 12px;
    gap: 8px;
    transition: all 0.3s ease;
}

.search-box:hover {
    border-color: #b0b0b0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-box:focus-within {
    border-color: #333;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 140px;
    color: #111827;
}

.search-box i {
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.3s;
}

.search-box img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    cursor: pointer;
    display: block;
}

.search-box i:hover {
    color: #333;
}

/* Hero Section */
.hero-section {
    position: relative;
    overflow: hidden;
    height: 600px; /* 固定高度 */
    padding: 0; 
}


/* Swiper 容器 */
.hero-swiper {
    width: 100%;
    height: 100%;
}

/* 轮播图可点击：显示手型（拖拽时 Swiper 仍可正常滑动） */
.hero-swiper {
    cursor: pointer;
}

/* Hero Section Styles */
.hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 初始状态：文字隐藏且下移 */
.hero-content h2,
.hero-content p,
.hero-content .hero-btns {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); /* 使用类似 ease-out 的贝塞尔曲线 */
}

/* 激活状态：文字浮现 */
.swiper-slide-active .hero-content h2,
.swiper-slide-active .hero-content p,
.swiper-slide-active .hero-content .hero-btns {
    opacity: 1;
    transform: translateY(0);
}

/* 错落延迟动画 (Staggered Delay) */
/* 标题最先出来 */
.swiper-slide-active .hero-content h2 {
    transition-delay: 0.1s;
}

/* 描述文字紧随其后 */
.swiper-slide-active .hero-content p {
    transition-delay: 0.3s;
}

/* 按钮最后出来 */
.swiper-slide-active .hero-content .hero-btns {
    transition-delay: 0.5s;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 改为顶部对齐 */
    padding-top: 140px; /* 通过 padding 控制垂直位置，使其偏上 */
    color: #333; /* 默认深色字，背景浅色时适用 */
    /* 左侧对齐：左边距 40（箭头距边） + 50（箭头宽） + 40（内容距箭头） = 130px */
    padding-left: calc(var(--hero-arrow-offset) + var(--hero-arrow-size) + var(--hero-content-gap));
    max-width: none;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.hero-desc {
    font-size: 24px;
    margin-bottom: 32px;
    font-weight: 400;
    color: #555;
}

.hero-btns {
    display: flex;
    gap: 16px;
}

.hero-btns .btn {
    min-width: 120px;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
}

/* 按钮悬浮效果 */
.btn-dark:hover {
    background-color: #555;
    border-color: #555;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-outline:hover {
    background-color: #333;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .hero-content {
        padding-left: 20px;
        align-items: center;
        text-align: center;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-desc {
        font-size: 18px;
    }
}

/* Hero 自定义箭头样式 */
.hero-button-next::after, .hero-button-prev::after {
    content: none !important;
}

.hero-button-next, .hero-button-prev {
    width: 45px !important;
    height: 45px !important;
    background-color: #e1e2e6 !important; /* 透明背景 */
    border: 4px solid #fff; /* 使用 #eaebf1 作为边框色，加粗以提升辨识度 */
    border-radius: 50%;
    color: transparent !important;
    transition: all 0.3s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px; /* 图标调小一点更精致 */
    opacity: 0.9;
    box-shadow: none !important;
}

.hero-button-prev { 
    left: var(--hero-arrow-offset) !important; 
    background-image: url('../image/left.png');
}

.hero-button-next { 
    right: var(--hero-arrow-offset) !important; 
    background-image: url('../image/right.png');
}

.hero-button-next:hover, .hero-button-prev:hover {
    /* background-color: rgba(234, 235, 241, 0.3) !important;  */
    border-color: #fff;
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0,0,0,0.1) !important;
}

/* Hero 分页器样式 */
.hero-pagination {
    bottom: 30px !important;
    z-index: 20 !important; /* 确保层级高于内容 */
}

.hero-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(0,0,0,0.2);
    opacity: 1;
    transition: all 0.25s ease;
    margin: 0 6px;
    border-radius: 999px;
}

/* 选中状态为横向椭圆（长条），保持圆角和动画过渡 */
.hero-pagination .swiper-pagination-bullet-active {
    width: 22px;
    height: 8px;
    background: #333;
    border-radius: 999px;
    transform: none;
}

/* Products Section */
.products-section {
    padding: 60px 0;
}

/* Personal series: 你的世界模块（1440 设计稿：左右 80，上下 64） */
.personal-series-main .series-overview {
    padding: 64px 0;
}

.personal-series-main .series-overview .container {
    /* 1440 下左右 80；小屏自动收缩 */
    padding-left: clamp(20px, 5.6vw, 80px);
    padding-right: clamp(20px, 5.6vw, 80px);
}

.personal-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 设计稿：卡片间距 60（1440 下约等于 60，小屏自动缩小） */
    gap: clamp(20px, 4.2vw, 60px);
    margin-top: 28px;
    /* 设计稿：grid 自身左右 padding 60（1440 下约等于 60，小屏自动缩小） */
    padding-left: clamp(16px, 4.2vw, 60px);
    padding-right: clamp(16px, 4.2vw, 60px);
}

.personal-product-card {
    display: block;
}

.pp-card {
    position: relative; /* 用于 overlay 定位 */
    background-color: #f6f7f9;
    border-radius: 18px;
    padding: 30px;
    /* 1440 设计稿：313 x 426，高度随宽度变化 */
    aspect-ratio: 313 / 426;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* box-shadow: 0 18px 30px rgba(17, 24, 39, 0.08); */
    transition: transform .25s ease, box-shadow .25s ease;
}

/* 卡片主体点击层：点击卡片任意位置 -> A */
.pp-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pp-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 8px 0 6px;
    position: relative;
    z-index: 2;
    pointer-events: none; /* 让点击穿透到 overlay（跳 A） */
}

/* 设计稿：图片放中间，1440 下固定 185 x 174 */
.pp-media img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
}

.only img {
    width: 240px;
    height: 220px;
}

@media (max-width: 768px) {
    .pp-media img {
        width: 160px;
        height: 150px;
    }
}

.personal-product-card:hover .pp-card {
    /* 移除位移和阴影 */
    transform: none;
    /* box-shadow: none; */
}

/* 图片放大效果 */
.personal-product-card:hover .pp-media img {
    transform: scale(1.15); /* 放大 1.05 倍 */
    transition: transform 0.6s ease;
}

.personal-product-card .pp-media img {
    /* 确保图片有过渡动画 */
    transition: transform 0.6s ease;
}

.pp-head {
    text-align: center;
    position: relative;
    z-index: 2;
    pointer-events: none; /* 让点击穿透到 overlay（跳 A） */
}

.pp-title {
    margin-top: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.pp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    position: relative;
    z-index: 3; /* 位于 overlay 之上 */
    pointer-events: none; /* 默认点击穿透，只有按钮/链接可点 */
}

.pp-link {
    font-size: 12px;
    color: #898989;
    text-decoration: underline;
    transition: color .2s ease, transform .2s ease;
    cursor: pointer;
    pointer-events: auto; /* 允许 hover/点击 */
}

.pp-link:hover {
    color: #111827;
    /* transform: translateY(-1px); */
}

.pp-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    pointer-events: auto; /* 允许 hover/点击（跳 B） */
    /* 添加这行，防止被外层容器的 hover 影响 */
    transform: none !important;
    box-shadow: none !important;
}

/* 立即购买 hover：颜色变化（按你的要求默认展示，仅 hover 变色） */
.pp-buy:hover {
    background: #515157; /* 修改hover背景色 */
    /* 恢复 hover 时的位移和阴影（如果需要） */
    /* transform: translateY(-1px) !important; */
    box-shadow: none !important; /* 移除hover时的阴影 */
}

/* Personal series: 特性展示区域（feature-showcase）间距调优
   设计稿（1440）：container 距左右 80，内部再有左右 32 的 padding */
.personal-series-main .feature-showcase .container {
    padding-left: clamp(20px, 5.6vw, 80px);
    padding-right: clamp(20px, 5.6vw, 80px);
}

.personal-series-main .feature-showcase-inner {
    padding-left: clamp(12px, 2.2vw, 32px);
    padding-right: clamp(12px, 2.2vw, 32px);
}

/* Cooperate page（商务合作）：1440 设计稿下仅"联系我们/商务合作"模块左右边距 80（不影响轮播） */
.cooperate-page .cooperate-contact > .container {
    padding-left: clamp(20px, 5.6vw, 80px);
    padding-right: clamp(20px, 5.6vw, 80px);
}

/* About page（关于）: 1440 设计稿下内容左右边距 110（仅 main 内容区） */
.about-page main .container {
    padding-left: clamp(20px, 7.6vw, 110px);
    padding-right: clamp(20px, 7.6vw, 110px);
}

@media (max-width: 992px) {
    .personal-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 3vw, 40px);
    }
}

@media (max-width: 640px) {
    .personal-products-grid {
        grid-template-columns: 1fr;
    }
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    font-weight: bold;
    color: #333;
}

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

.product-card-link {
    display: block; /* 使链接包裹整个卡片 */
    text-decoration: none;
}

/* 产品卡片样式 */
.product-card {
    position: relative;
    border-radius: 12px;
    /* aspect-ratio 设置为 654 / 310，高度随宽度自适应 */
    aspect-ratio: 654 / 310;
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #f5f5f7; /* 设置默认背景色 */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.product-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    /* 让产品主体更靠下，给顶部文案留出空间（避免"压住图片"） */
    background-position: center 40%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: transform 0.5s ease;
}

/* PC 端背景图设置 */
.product-bg-1 { background-image: url('../image/pc/index/product-1.png'); }
.product-bg-2 { background-image: url('../image/pc/index/product-2.png'); }
.product-bg-3 { background-image: url('../image/pc/index/product-3.png'); }
.product-bg-4 { background-image: url('../image/pc/index/product-4.png'); }
.product-bg-5 { background-image: url('../image/pc/index/product-5.png'); }
.product-bg-6 { background-image: url('../image/pc/index/product-6.png'); }
.product-bg-7 { background-image: url('../image/pc/index/product-7.png'); }
.product-bg-8 { background-image: url('../image/pc/index/product-8.png'); }

/* 移动端图片默认隐藏 (PC端不显示) */
.mobile-product-img {
    display: none;
}

.product-card--p5 .product-bg {
    background-position: center 75% ;
}

/* Product 7 单独调整：背景位置更靠上（20%） */
.product-card--p7 .product-bg {
    background-position: center 10%;
}

.product-card:hover .product-bg {
    transform: scale(1.02); /* 图片微放大 */
}

/* 触摸设备（移动端）禁用 hover 动画：避免点一下卡片就上浮/放大 */
@media (hover: none) and (pointer: coarse) {
    /* 首页产品卡片 */
    .product-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .product-card:hover .product-bg {
        transform: none !important;
    }

    .product-btn:hover {
        background-color: #333 !important;
        transform: none !important;
    }

    /* 个人系列产品卡片 */
    .personal-product-card:hover .pp-card {
        transform: none !important;
        box-shadow: none !important;
    }

    .personal-product-card:hover .pp-media img {
        transform: none !important;
    }

    .pp-buy:hover {
        background: #111827 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .pp-link:hover {
        color: #898989 !important;
        transform: none !important;
    }
}

.product-content {
    /* 文案固定在卡片顶部居中，不占满高度，避免覆盖产品主体 */
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 0;
    right: 0;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.product-tag {
    font-size: 10px;
    color: #727272;
    display: block;
    line-height: 1.2;
}

.product-title {
    font-size: 18px;
    font-weight: bold;
    color: #111827;
}

.product-desc {
    font-size: 12px;
    color: #111827;
    line-height: 1.6;
}

.product-btn {
    display: inline-block;
    padding: 6px 14px;
    background-color: #333;
    color: #fff;
    font-size: 10px;
    border-radius: 20px;
    opacity: 1; /* 默认显示 */
    transform: translateY(0); /* 默认无位移 */
    transition: all 0.3s ease;
    margin-top: 6px;
    /* 重点：防止被父容器 .product-card:hover 影响 */
    transform: none !important;
    box-shadow: none !important;
}

.product-btn:hover {
    background-color: #515157; /* 修改hover背景色，保持一致 */
    transform: translateY(-1px) !important; /* 仅在 hover 自身时位移 */
    box-shadow: none !important; /* 移除阴影 */
}

/* ============================================= */
/* 走近杨桃 - 3D轮播样式 (新增部分) */
/* ============================================= */
.about-section {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

.about-swiper-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.about-swiper {
    width: 100%;
    height: 400px;
    padding: 20px 0 60px;
}

.swiper-slide.about-slide {
    width: 70% !important; /* 控制每张幻灯片宽度 */
    max-width: 700px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 只过渡视觉属性，不能用 all，否则 Swiper loop 重定位会出问题 */
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    opacity: 0.5;
    transform: scale(0.85);
    cursor: move;
}

/* 激活的幻灯片（中间） */
.swiper-slide-active.about-slide {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* 旁边的幻灯片 */
.swiper-slide-prev.about-slide,
.swiper-slide-next.about-slide {
    opacity: 0.7;
    transform: scale(0.9);
    z-index: 5;
}

/* 更远的幻灯片 */
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
    opacity: 0.3;
    transform: scale(0.8);
}

.slide-content {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.about-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    cursor: pointer;
    outline: none;
}

.about-video:focus,
.about-video:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 导航按钮样式 */
.about-button-prev,
.about-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5); /* 改为半透明黑色背景 */
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.about-button-prev {
    left: 20px;
}

.about-button-next {
    right: 20px;
}

.about-button-prev:hover,
.about-button-next:hover {
    background: rgba(0, 0, 0, 0.8); /* hover 时加深背景 */
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

.about-button-prev img,
.about-button-next img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* 分页器样式 */
.about-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 100;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(0,0,0,0.2);
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer !important;
}

.swiper-pagination-bullet-active {
    background: #333;
    transform: scale(1.2);
}

/* ============================================= */
/* 走近杨桃 - 3D轮播样式响应式调整 */
/* ============================================= */
@media (max-width: 1200px) {
    .swiper-slide.about-slide {
        width: 80% !important;
    }
}

@media (max-width: 992px) {
    .about-swiper {
        height: 350px;
    }
    
    .swiper-slide.about-slide {
        width: 85% !important;
    }
}

@media (max-width: 768px) {
    /* 首页移动端：走近杨桃容器不加左右 padding，保证 315x434 完整显示且两侧能露出 */
    .about-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-section .section-title {
        display: block !important;
        margin-bottom: 18px;
    }

    .about-swiper {
        /* 750 设计稿：315 x 434 */
        height: 434px;
        padding: 0 0 44px; /* 给分页器留空间（不加左右 padding） */
        overflow: visible; /* 允许两侧 slide 露出 */
    }
    
    .about-swiper-container {
        overflow: visible;
    }

    /* Swiper 自行管理 wrapper 布局，不额外覆盖 */

    .swiper-slide.about-slide {
        width: 315px !important;
        height: 434px;
        border-radius: 12px;
    }
    
    .about-button-prev,
    .about-button-next {
        width: 40px;
        height: 40px;
    }
    
    .about-button-prev {
        left: 10px;
    }
    
    .about-button-next {
        right: 10px;
    }
}

/* 移动端"走近杨桃"样式调整 */
@media (max-width: 768px) {
    /* 隐藏左右箭头 */
    .about-button-prev,
    .about-button-next {
        display: none !important;
    }

    /* 指示点：进度条效果（底色 #BBBBBB，填充跟随播放进度变为 #213050） */
    .about-pagination .swiper-pagination-bullet {
        width: 24px;
        height: 4px;
        border-radius: 999px;
        background: #BBBBBB !important;
        opacity: 1;
        margin: 0 4px;
        position: relative;
        overflow: hidden;
        transform: none !important;
    }

    .about-pagination .swiper-pagination-bullet::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #213050;
        transform: scaleX(var(--progress, 0));
        transform-origin: left center;
        transition: transform 0.12s linear;
    }

    /* active 仅表示当前项，不再直接改颜色/宽度 */
    .about-pagination .swiper-pagination-bullet-active {
        background: #BBBBBB !important;
    }
}

@media (max-width: 576px) {
    /* 保持 750 设计稿比例：315 x 434
       注意：opacity / transform 不在此处覆盖，统一由下方 1024px 断点控制
       （之前的 !important 会与 1024px 断点冲突，导致切换后布局错乱） */
    .swiper-slide.about-slide {
        cursor: grab;
    }
}

/* About page hero */
.about-hero {
    position: relative;
    min-height: 560px;
    background: url('../image/pc/about/bg.png') center/cover no-repeat;
    color: #f8fafc;
    overflow: hidden;
}

.about-hero-inner {
    position: relative;
    padding: 40px 0 80px;
}

.about-hero-title {
    font-size: 64px;
    letter-spacing: 6px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 36px;
}

.about-hero-title-img {
    max-width: 60%;
    height: auto;
    display: block;
    margin-bottom: 36px;
}

.about-card-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center; /* 底部对齐，中间卡片更高突出 */
}

.about-card {
    flex: 1;
    min-width: 240px;
    max-width: 340px;
    height: 258px;
    background: #7e8486;
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-card.large {
    flex: 1.3;
    max-width: 460px;
    height: 314px;
}

.about-card p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    text-indent: 2em;
    margin: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

@media (min-width: 1025px) {
    .about-card.hang-punct p {
        /* 预留“标点悬挂”空间，避免被卡片裁切 */
        padding-right: 0.7em;
        line-break: strict;
        visibility: hidden;
    }

    .about-card.hang-punct p .hang-end {
        display: inline-block;
        transform: translateX(0.7em);
    }

    .about-card.hang-punct p[data-hang-ready="1"] {
        visibility: visible;
    }
}

/* terminal page */
.terminal-main {
    position: relative;
}
.terminal-img {
    width: 100%;
    height: auto;
    display: block;
}
.terminal-container {
    position: absolute;
    left: 197px;
    top: 50%;
    transform: translateY(-50%);
}

.terminal-container h1 {
    font-size: 48px;
    color: #111827;
    font-weight: bold;
}

.terminal-container p {
    font-size: 20px;
    color: #111827;
    margin-top: 40px;
}

.terminal-container .btn {
    background: #2A2E43;
    border-radius: 200px;
    width: 186px;
    height: 48px;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 40px;
}

.terminal-container .btn:hover {
    background-color: #555;
    border-color: #555;
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 终端页面移动端适配 */
@media (max-width: 1024px) {
    /* 使用移动端专用背景图（位于 image/mobile/terminal/bg.png）
       隐藏原始 <img>，并将内容放在背景图下方居中 */
    .terminal-main {
        background: url('../image/mobile/terminal/bg.png') no-repeat center 30%;
        background-size: clamp(180px, 40vw, 320px) auto;
        min-height: 555px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* 隐藏页面中用于 PC 的 img，避免双图叠加 */
    .terminal-img {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    .terminal-container {
        position: relative !important;
        left: auto !important;
        top: 145px !important;
        transform: none !important;
        padding: 0 20px !important;
        text-align: center !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .terminal-container h1 {
        font-size: 32px !important;
        line-height: 1.2;
        margin: 0 auto;
    }

    .terminal-container p {
        font-size: 16px !important;
        margin-top: 16px;
        color: #111827;
    }

    .terminal-container .btn {
        width: auto !important;
        height: auto !important;
        padding: 7px 26px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        margin-top: 20px !important;
        display: inline-block;
    }
}

@media (max-width: 420px) {
    .terminal-main {
        background-size: clamp(140px, 46vw, 260px) auto;
        padding-top: clamp(180px, 48vw, 300px);
    }
    .terminal-container h1 {
        font-size: 24px !important;
    }
    .terminal-container p {
        font-size: 12px !important;
    }
    .terminal-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Mall page */
.mall-main {
    background: #FFFFFF;
}

.mall-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.mall-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.mall-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 7%, rgba(255, 255, 255, 0) 16%);
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.mall-hero-overlay > .container {
    max-width: none;
    /* 1440 设计稿：hero 文案容器距左右 180 */
    padding-left: clamp(20px, 12.5vw, 180px);
    padding-right: clamp(20px, 12.5vw, 180px);
}

.mall-hero-text {
    max-width: 520px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mall-hero-text h1 {
    font-size: 34px;
    font-weight: 800;
}

.mall-hero-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 12px;
    display: grid;
    gap: 8px;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.8;
}

.mall-hero-list li {
    position: relative;
    padding-left: 14px;
}

.mall-hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #1f2937;
    border-radius: 50%;
}

.mell-btn {
    width: 128px;
    background: #206EDC;
    height: 58px;
    border: 1px solid #206EDC;
    box-sizing: border-box;
    line-height: 58px;
    padding: 0;
    color: #FFFFFF;
    font-size: 16px;
}

/* 立即购买 hover 颜色变化 */
.mell-btn:hover,
.mell-btn:focus-visible {
    background: #185BC0;
    border-color: #185BC0;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(32, 110, 220, 0.25);
}

.mall-section {
    padding-bottom: 30px;
}

.mall-title {
    text-align: center;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 30px;
}

.mall-banner {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1380 / 346; /* 与设计稿一致，随宽度自适应高度 */
    display: block; /* 让 a.mall-banner 也能撑满整行，整张图可点击 */
}

.mall-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mall-banner-full {
    width: 100%;
    margin-bottom: 24px;
}

.mall-banner:hover .mall-banner-img {
    transform: scale(1.05);
}

.mall-banner:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* 增加悬浮阴影效果 */
    transition: box-shadow 0.3s ease;
}

/* Mall Banner Text Content */
.mall-banner-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 42%; /* 稍微放宽一点，允许文字多展示 */
}

.content-left {
    left: 26%; /* 调整距离，离产品更近 */
    text-align: left;
    align-items: flex-start;
}

.content-right {
    right: 22%; /* 调整距离，离产品更近 */
    text-align: left;
    align-items: flex-start;
}

.right-only {
    right: 30%;
}

.right-only2 {
    right: 27%;
}

/* 针对中等屏幕 (1024px - 1300px) 的微调，防止文字撞车 */
@media (min-width: 1025px) and (max-width: 1300px) {
    .content-left { left: 8%; } /* 小屏幕下还是得躲远点 */
    .content-right { right: 8%; }
    .mall-banner-content { max-width: 40%; }
    .mb-title { font-size: 28px; }
}

/* White text variation for dark backgrounds */
.text-white .mb-series,
.text-white .mb-title,
.text-white .mb-desc {
    color: #fff;
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.3); */
}

/* Special button style for dark backgrounds */
.text-white .mb-btn {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

.text-white .mb-btn:hover {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    color: #000;
}

.mb-series {
    font-size: 16px;
    /* margin-bottom: 10px; */
    color: #000000;
    font-weight: 500;
    position: relative;
}

.pro {
    color: #000000;
    background: #FFFFFF;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 26px; 
    position: absolute;
    top: -4px;
    right: -40px;
    line-height: normal;
}

.mb-title {
    font-size: 36px;
    font-weight: 700;
    /* margin-bottom: 16px; */
    color: #000000;
    letter-spacing: 1px;
}

.mb-desc {
    font-size: 16px;
    margin-bottom: 10px;
    color: #000000;
    line-height: 1.5;
}

.mb-btn {
    display: inline-block;
    padding: 5px 22px;
    background-color: #000;
    color: #fff;
    border-radius: 30px;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid #000;
    text-align: center;
    min-width: 100px;
}

.mb-btn:hover {
    background-color: #444; /* hover 变色 */
    border-color: #444;
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
    .mb-title {
        font-size: 28px;
    }
    .mb-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .content-left, .content-right {
        left: 5%;
        right: 5%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .mall-hero-text h1 {
        font-size: 26px;
    }
    .mall-banner-full {
        height: 200px;
    }
}

/* About stats */
.about-stats {
    position: relative;
    background: #f5f7f8;
    padding: 60px 0 80px;
    background-image: url('../image/pc/about/stats-bg.png');
    background-size: cover;
    background-position: center;
}

.about-stats .container {
    position: relative;
}

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

.stat-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 26px 30px;
    box-shadow: 0 12px 30px rgba(75, 85, 99, 0.5);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #374151;
}

.stat-label {
    margin-top: 6px;
    font-size: 14px;
    color: #6b7280;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #666;
}

/* Footer */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 60px 0 20px;
    font-size: 14px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* 全站 Footer 菜单：1440 设计稿下左右边距 110 */
    padding-left: clamp(20px, 7.6vw, 100px);
    padding-right: clamp(20px, 7.6vw, 100px);
}

.footer-brand {
    flex: 1;
}

.logo-placeholder.small {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
    width: auto !important; /* 覆盖默认宽度 */
    display: block; /* 确保占行 */
}

.logo-placeholder.small img {
    height: 36px; /* 底部 Logo 高度控制 */
    width: auto;
    display: block;
}

.social-icons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #fff;
    font-size: 18px;
    opacity: 1;
    transition: opacity 0.3s;
}

.social-icons a:hover {
    opacity: 1.2;
}

/* 微信悬浮二维码容器 */
.social-item-wx {
    position: relative;
    display: inline-block;
}

/* 二维码弹出层 */
.wx-qr-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 120px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    text-align: center;
    pointer-events: none; /* 防止遮挡 */
}

/* 弹出层中的图片 */
.wx-qr-popup img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 小三角箭头 */
.wx-qr-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Hover 显示 */
.social-item-wx:hover .wx-qr-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-15px);
    pointer-events: auto;
}

.custom-icon-xhs-img {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    object-fit: contain;
    font-size: 20px; /* 控制大小 */
    display: inline-block;
}

.footer-links {
    flex: 1;
}

.footer-links h4, .footer-contact h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-contact {
    flex: 1.5;
}

/* 响应式：悬浮工具条位置微调 */
.floating-toolbar { bottom: 100px; }

.footer-contact li {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.footer-contact li i,
.footer-contact li img {
    margin-top: 4px;
    width: 16px; /* 图标宽度 */
    height: 16px; /* 图标高度 */
    object-fit: contain;
    flex-shrink: 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    color: #6B7280;
    font-size: 12px;
}

/* 备案号链接 */
.icp-link {
    color: inherit; /* 默认继承 footer 文字颜色 */
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.icp-link:hover {
    color: #fff; /* 悬浮变白 */
    text-decoration: underline;
    cursor: pointer; /* 确保鼠标变成手型 */
}

.floating-toolbar {
    position: fixed;
    right: 50px;
    bottom: 140px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 移动端滚动时隐藏悬浮按钮，停止滚动后淡入显示 */
@media (max-width: 1024px) {
    .floating-toolbar.scrolling-hide {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }
}

.float-item {
    position: relative;
    display: flex;
    justify-content: flex-end;
    transition: opacity 0.3s ease;
}

.float-btn {
    width: 40px; /* Initial width */
    height: 40px;
    background-color: #fff;
    border-radius: 20px; /* Pill shape when expanded */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    color: #666;
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    flex-direction: row; /* 恢复默认方向：图标在左，文字在右 */
    justify-content: flex-end; /* 初始状态靠右，保证图标在圆内居中 */
}

.float-btn i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.float-btn img {
    width: 22px; /* 调整图片大小 */
    height: 22px;
    margin: 9px; /* (40-22)/2 居中 */
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* 针对前两个按钮（电话和客服）图标再小一点 */
.float-btn--phone img,
.float-btn--kf img {
    width: 18px;
    height: 18px;
    margin: 12px; /* (40-20)/2 = 10px 居中 */
}

.float-btn-text {
    max-width: 0;
    opacity: 0;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.float-btn:hover {
    background-color: #e5e7eb;
    color: #111827;
    width: auto; /* Allow expansion */
    padding-right: 16px; /* Space for text on the right */
}

.float-btn:hover .float-btn-text {
    max-width: 150px;
    opacity: 1;
    margin-left: -2px; /* Adjust spacing near icon */
}

/* 特殊处理：返回顶部按钮 hover 时不展开文字，只变色 */
.float-btn--top:hover {
    width: 40px; /* 保持圆形 */
    padding-right: 0;
}

.float-btn--top:hover .float-btn-text {
    display: none; /* 隐藏文字 */
}

/* 企业客服 & 公众号 hover 时只变色，不展开 */
.float-btn--kf:hover,
.float-btn--gzh:hover {
    width: 40px;
    padding-right: 0;
}

.float-btn:focus-visible {
    outline: none;
    background-color: #e5e7eb;
    color: #111827;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 2px 10px rgba(0,0,0,0.1);
}

/* 悬浮按钮 hover 展示内容 */
.float-panel {
    position: absolute;
    right: calc(100% + 14px);
    top: 0;
    transform: translateX(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    background: #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
    border: 1px solid rgba(17, 24, 39, 0.06);
    z-index: 1001;
}

/* 增加透明伪元素填补间隙，防止鼠标移向弹框时 hover 丢失 */
.float-panel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%; /* 从弹框右侧开始 */
    width: 20px; /* 覆盖 14px 的间隙 */
    background: transparent;
}

.float-item:hover .float-panel,
.float-item:focus-within .float-panel {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.float-panel--qr {
    width: auto;
    min-width: 130px;
    padding: 14px 14px 12px;
}

.float-panel-img {
    width: 103px;
    height: 103px;
    display: block;
    background: #fff;
    margin: 0 auto;
}

.float-panel-text {
    margin-top: 10px;
    text-align: center;
    line-height: 1.25;
}

.float-panel-title {
    font-size: 14px;
    color: #3D3D3D;
}

.float-panel-subtitle {
    font-size: 12px;
    color: #3D3D3D;
    margin-top: 4px;
}

/* 通用图片弹窗（产品卡片点击） */
body.yt-modal-open {
    overflow: hidden;
}

.yt-image-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
}

.yt-image-modal.is-open {
    display: block;
}

.yt-image-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
}

.yt-image-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 48px));
    margin: 10vh auto;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    max-height: 76vh;
    overflow: auto;
}

.yt-image-modal__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    background: #fff;
    max-height: 70vh;
    object-fit: contain;
}

.yt-image-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 24px;
    line-height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.yt-image-modal__close:hover {
    background: rgba(0, 0, 0, 0.88);
}

@media (max-width: 768px) {
    .yt-image-modal__dialog {
        width: min(520px, calc(100vw - 28px));
        margin: 12vh auto;
        padding: 14px;
        border-radius: 18px;
    }
    .yt-image-modal__img {
        border-radius: 14px;
    }
}

/* Cooperate hero overlay */
.hero-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.12));
    display: flex;
    align-items: center;
}

.hero-copy {
    max-width: 520px;
    color: #fff;
    padding-left: clamp(20px, 6vw, 120px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-copy h1 {
    font-size: 42px;
    font-weight: 800;
}

.hero-copy p {
    font-size: 20px;
    font-weight: 600;
}

.hero-btns {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

/* Cooperate contact area */
.cooperate-contact {
    background: #fff; /* 背景色改为白色 */
    padding: 30px 0 40px;
}

/* Cooperate: desktop/mobile layout switches (avoid affecting other pages) */
.cooperate-page .desktop-only-grid { display: grid; }
.cooperate-page .mobile-only-block { display: none; }

.coop-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* 左侧样式 */
.section-label {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 24px;
    padding-left: 0;
}

.contact-card {
    background: #fff;
    border-radius: 16px;
    /* 卡片头无阴影，逐渐往下有：y轴偏移大，模糊大，spread为负值可以收缩阴影范围避免向上溢出 */
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.1);
    overflow: hidden;
    width: 100%;
    /* 增加内边距，让内容（包括图片）都在卡片内部有间距 */
    padding: 30px 24px 36px;
}

.contact-top-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px 8px 0 0; /* 图片圆角 */
}

.contact-info {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    padding: 15px;
}

.contact-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    display: block;
}

.contact-info ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.contact-info li i,
.contact-info li img {
    margin-top: 3px; /* 微调对齐 */
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 右侧样式 */
.coop-title-group {
    margin-bottom: 20px;
}

.coop-title-group h2 {
    font-size: 28px;
    color: #1f2937;
    margin-bottom: 8px;
    font-weight: 800;
}

.coop-title-group p {
    color: #6b7280;
    font-size: 15px;
}

.qr-panel {
    background: #f8f9fc;
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%; /* 使其高度自适应或填满 */
    min-height: 472px; /* 增加高度以匹配设计 */
    justify-content: center;
    margin-left: 20px;
    max-width: 910px;
}

.qr-panel-inner {
    background: #fff;
    border-radius: 14px;
    padding: 20px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-panel-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.qr-img {
    max-width: 292px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px; /* 给图片加回圆角 */
}

.qr-name {
    font-size: 18px;
    font-weight: 700;
    color: #4B5563;
    margin-bottom: 6px;
    text-align: center;
    margin-top: 20px; /* 增加图片与文字间距 */
}

.qr-phone {
    font-size: 16px;
    font-weight: 600;
    color: #4B5563;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-copy h1 { font-size: 32px; }
    .hero-copy p { font-size: 18px; }
    .hero-btns { flex-wrap: wrap; }
    .hero-section { height: 480px; }
    .coop-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .qr-panel {
        min-height: auto;
        padding: 30px 20px;
    }
}

/* 响应式调整 (简单示例) */
@media (max-width: 768px) {
    .about-card,
    .about-card.large {
        height: auto;
        max-width: 100%;
    }
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .about-hero-title {
        font-size: 42px;
        letter-spacing: 3px;
    }

    .about-card-grid {
        gap: 18px;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .floating-toolbar {
        right: 16px;
    }
}

@media (max-width: 992px) {
    .about-card-grid {
        justify-content: center;
    }

    .about-card,
    .about-card.large {
        max-width: 520px;
    }
}/* 璐拱寮圭獥鏍峰紡 */
.buy-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.buy-modal.active {
    display: flex;
}

.buy-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.buy-modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    width: 300px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 10;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.buy-qr-code {
    width: 180px;
    height: 180px;
    margin-bottom: 20px;
    display: inline-block;
}

.buy-modal-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
}

.buy-modal-footer {
    display: flex;
    justify-content: center;
}

.buy-modal-close-btn {
    background-color: #2563EB; /* 钃濊壊鎸夐挳 */
    color: #fff;
    border: none;
    border-radius: 20px; /* 鍦嗚鎸夐挳 */
    padding: 10px 40px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

.buy-modal-close-btn:hover {
    background-color: #1d4ed8;
}

.badge-5g {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    background-color: #333;
    color: #fff;
    padding: 2px 12px;
    border-radius: 12px;
    margin-left: 10px;
    font-weight: normal;
    line-height: 1.4;
    transform: translateY(10px);
}

/* 移动端：DTU（Slide index=4）不显示 5G 角标，PC 仍保留 */
@media (max-width: 1024px) {
    .hero-swiper .hero-slide[data-swiper-slide-index="4"] .badge-5g {
        display: none !important;
    }
}

/* ========================================= */
/* 移动端适配专用样式 (Mobile Optimization) */
/* ========================================= */

/* 1. 默认隐藏菜单按钮（桌面端不显示） */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 10px;
    z-index: 1002; /* 确保层级高于导航 */
}

/* --- 1. PC 端逻辑隔离 (确保这些在移动端下被重置) --- */
.m-arrow, .mobile-subscribe-info {
    display: none; /* PC 端绝对不显示箭头和移动端文案 */
}


.mall-main-page .mall-hero-text .mobile-only {
    display: none; /* PC 端隐藏移动端文案 */
}

/* --- 默认：在 PC 端隐藏移动端特有模块 --- */
.mobile-only-section { 
    display: none; 
}

/* 2. 媒体查询：针对 1024px 以下的屏幕（手机 + 平板竖屏）扩大适配范围 */
@media (max-width: 1024px) {

    /* --- 修复 Header 间距 --- */
    /* 必须用 !important 覆盖原有的 !important */
    .header-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        justify-content: space-between; /* 两端对齐 */
        height: 59px !important; /* 750px 设计稿下 118px -> 约 59px (CSS 像素) */
        flex-direction: row; /* 保持横向排列 */
        position: relative; /* 为 Logo 绝对定位做参照 */
    }

    /* 沉浸式导航栏：背景透明，悬浮顶部 */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        padding: 0;
        /* 平滑过渡：滚动时透明↔白色不突兀 */
        /* transition: background-color 0.3s ease, box-shadow 0.3s ease; */
    }

    /* 菜单打开/关闭过渡期间：汉堡线和联系我们始终用黑色那套 */
    body.menu-open .contact-trigger,
    body.menu-closing .contact-trigger {
        background-color: #111 !important;
        color: #fff !important;
        border: none !important;
    }

    body.menu-closing .hamburger-line {
        background-color: #333;
    }

    .site-header.header-white .contact-trigger {
        background-color: #fff !important;
        /* border: 1px solid #fff !important; */
        color: #111827 !important;
    }

    /* 显示菜单按钮 - 放在左侧 */
    .mobile-menu-toggle {
        display: block;
        order: 1; /* 最左边 */
        padding: 0; /* 移除内边距以便对齐 */
        margin-right: auto; /* 挤向左边 */
        z-index: 1002;
    }

    /* 调整 Logo 大小与位置 - 绝对居中 */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1002;
    }

    .logo-img {
        height: 30px; /* 手机上 Logo 稍微调小 */
        transition: opacity 0.3s ease;
    }

    /* 移动端显示 Header Actions，但隐藏搜索框，只留联系我们 */
    .header-actions {
        display: flex !important; /* 强制显示 */
        order: 3; /* 最右边 */
        gap: 0;
        z-index: 1002;
    }

    .search-box {
        display: none !important; /* 移动端隐藏搜索 */
    }

    /* 调整移动端“联系我们”按钮样式 - 黑色胶囊 */
    .contact-trigger {
        font-size: 12px !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        background-color: #111 !important;
        color: #fff !important;
        border: none !important;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    /* 隐藏联系我们下拉的二维码面板，避免移动端误触弹出 */
    .contact-panel {
        display: none !important;
    }

    /* --- 核心：移动端折叠菜单样式 --- */
    /* 隐藏原有的 main-nav 在移动端的显示逻辑，改用新的 mobile-nav-menu */
    .main-nav {
        display: none; /* 移动端默认隐藏桌面导航 */
    }

    /* 桌面端恢复显示 */
    @media (min-width: 1025px) {
        .main-nav {
            display: block;
            margin-left: 110px;
            flex: 1;
            position: static;
            width: auto;
            background: transparent;
            padding: 0;
            box-shadow: none;
            max-height: none;
            opacity: 1;
            overflow: visible;
        }
        
        /* 针对中等屏幕的调整 */
        @media (max-width: 1366px) {
            .main-nav { margin-left: 40px; }
        }
    }

    /* 新的移动端全屏菜单容器 - 覆盖 header 区域，整体滑出/滑走 */
    .mobile-nav-menu {
        display: block;
        position: fixed;
        top: 0;          /* 从顶部开始，覆盖 header 区域 */
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 1000;   /* 低于 header 元素(1002)，高于页面内容 */
        padding: 79px 30px 20px 30px; /* 59px(header高度) + 20px(原顶部间距) */
        overflow-y: auto;
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.45s;
    }

    /* 菜单打开状态 - 滑到原位 */
    body.menu-open .mobile-nav-menu {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }

    /* 菜单打开时，隐藏悬浮按钮 */
    body.menu-open .floating-toolbar {
        display: none !important;
    }

    /* 菜单打开时，隐藏悬浮按钮 */
    body.menu-open .floating-toolbar {
        display: none !important;
    }

    /* 菜单打开时 Logo 强制变黑 (配合 JS) */
    /* 菜单打开时 Header 上的文字颜色调整已经在 JS 里处理了 Logo src */

    /* 移动端菜单列表样式 */
    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-list > li {
        border-bottom: 1px solid #f5f5f5;
        /* 菜单项动画：默认隐藏状态 */
        opacity: 0;
        transform: translateY(20px);
        /* 关闭时：快速消失、无延迟 */
        transition: opacity 0.2s ease,
                    transform 0.2s ease;
        transition-delay: 0s;
    }

    /* 菜单打开时：菜单项逐个交错淡入+上滑（类似大疆效果） */
    body.menu-open .mobile-nav-list > li {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
                    transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    body.menu-open .mobile-nav-list > li:nth-child(1) { transition-delay: 0.05s; }
    body.menu-open .mobile-nav-list > li:nth-child(2) { transition-delay: 0.10s; }
    body.menu-open .mobile-nav-list > li:nth-child(3) { transition-delay: 0.15s; }
    body.menu-open .mobile-nav-list > li:nth-child(4) { transition-delay: 0.20s; }
    body.menu-open .mobile-nav-list > li:nth-child(5) { transition-delay: 0.25s; }
    body.menu-open .mobile-nav-list > li:nth-child(6) { transition-delay: 0.30s; }
    body.menu-open .mobile-nav-list > li:nth-child(7) { transition-delay: 0.35s; }

    .mobile-nav-list > li > a,
    .mobile-nav-list .menu-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        font-size: 16px;
        color: #333;
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
    }

    /* 子菜单箭头 */
    .arrow-icon {
        width: 12px;
        height: 12px;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(45deg);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        margin-right: 5px;
    }

    /* 展开状态箭头 */
    .has-submenu.open .arrow-icon {
        transform: rotate(-135deg); /* 向上指 */
    }

    /* 子菜单容器 */
    .mobile-submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: #fff;
    }

    /* 子菜单项也有交错动画 */
    .mobile-submenu li {
        padding-left: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .has-submenu.open .mobile-submenu li {
        opacity: 1;
        transform: translateY(0);
    }
    .has-submenu.open .mobile-submenu li:nth-child(1) { transition-delay: 0.05s; }
    .has-submenu.open .mobile-submenu li:nth-child(2) { transition-delay: 0.10s; }
    .has-submenu.open .mobile-submenu li:nth-child(3) { transition-delay: 0.15s; }
    .has-submenu.open .mobile-submenu li:nth-child(4) { transition-delay: 0.20s; }
    .has-submenu.open .mobile-submenu li:nth-child(5) { transition-delay: 0.25s; }

    .mobile-submenu li a {
        display: block;
        padding: 15px 0 15px 10px; /* 子菜单缩进一点 */
        font-size: 14px;
        color: #666;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .mobile-submenu li a:active {
        color: #111;
    }

    /* 汉堡按钮 - 三条线折叠成X动画 */
    .hamburger-box {
        width: 22px;
        height: 18px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hamburger-line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease;
        transform-origin: center center;
    }

    /* header-white 模式下汉堡线变白 */
    .site-header.header-white .hamburger-line {
        background-color: #fff;
    }

    /* 菜单打开时：汉堡线强制变黑 */
    body.menu-open .hamburger-line {
        background-color: #333;
    }

    /* 打开动画：上线旋转45度、中线消失、下线旋转-45度 → 形成X */
    body.menu-open .hamburger-line.line-1 {
        transform: translateY(8px) rotate(45deg);
    }

    body.menu-open .hamburger-line.line-2 {
        opacity: 0;
        transform: scaleX(0);
    }

    body.menu-open .hamburger-line.line-3 {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* 菜单打开时，Header 里的元素强制黑色 */
    /* ... existing code ... */

    /* Desktop/Mobile Utility Classes */
    .mobile-only {
        display: none !important;
    }

    @media (max-width: 768px) {
        .desktop-only {
            display: none !important;
        }
        .mobile-only {
            display: flex !important;
        }
        
        /* Mobile Floating Toolbar Styles */
        .floating-toolbar {
            bottom: 100px; /* 调整移动端位置 */
            right: 20px;
            gap: 15px;
        }

        .mobile-float-btn {
            width: 48px;
            height: 48px;
            background: #fff; /* 纯白背景 */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 0;
        }

        .mobile-float-btn img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            margin: 0;
        }
    }

    /* --- 修复 Hero/Banner 区域 (全屏沉浸) --- */
    .hero-section {
        height: 100vh; /* 全屏体验 */
        max-height: none;
        margin-top: 0; /* 顶到最上面 */
    }
    
    .hero-bg-img {
        /* 关键：调整图片显示方式 */
        object-fit: cover; 
        object-position: center; 
    }

    .hero-content {
        height: 100%;
        padding-top: 110px; /* 文字靠上，避开导航栏 */
        padding-bottom: 0; 
        justify-content: flex-start; /* 内容顶对齐 */
        align-items: center; /* 水平居中 */
        text-align: center; /* 文字居中 */
        background: none; /* 移除全局遮罩，根据 slide 单独处理 */
    }

    .hero-title {
        font-size: 32px;
        margin-bottom: 12px;
        color: #000; 
        font-weight: 800;
        position: relative;
        z-index: 2;
    }
    
    .hero-desc {
        font-size: 16px;
        margin-bottom: 0;
        color: #333;
        position: relative;
        z-index: 2;
    }

    /* 针对暗色背景 Slide 的文字样式 */
    .slide-style-dark .hero-title,
    .slide-style-dark .hero-desc {
        color: #fff !important;
    }

    .mobile-float-btn {
        width: 48px;
        height: 48px;
        background: #fff; /* 纯白背景 */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        padding: 0;
        transition: none; /* 移除所有过渡效果，防止点击变形 */
    }

    .mobile-float-btn:hover,
    .mobile-float-btn:active,
    .mobile-float-btn:focus {
        background-color: #fff !important; /* 保持白色背景 */
        width: 48px !important; /* 强制保持宽度 */
        height: 48px !important; /* 强制保持高度 */
        padding: 0 !important; /* 强制保持内边距 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* 保持阴影 */
        transform: none !important; /* 禁止位移或缩放 */
    }

    .mobile-float-btn img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        margin: 0;
    }

    /* 移动端 Header 滚动时的固定样式 */
    .site-header.header-scrolled {
        background-color: #FFFFFF !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }

    /* 滚动时强制黑色 Logo 和汉堡菜单 (覆盖 slideChange 的白色设置) */
    .site-header.header-scrolled .logo-img {
        /* JS 会处理 src，这里只需确保不被隐藏 */
        opacity: 1;
    }

    /* 滚动时汉堡菜单 */


    /* 滚动时联系我们按钮 */
    .site-header.header-scrolled .contact-trigger {
        background-color: #111 !important;
        color: #fff !important;
        border: none !important;
    }
    .hero-btns {
        margin-top: auto; /* 推到最底部 */
        margin-bottom: 70px; /* 留出底部空间 (分页器位置) */
        flex-direction: row; /* 按钮横排 */
        gap: 15px;
        justify-content: center;
        width: 100%;
        position: relative;
        z-index: 2;
    }
    
    /* 调整 Hero 按钮样式 */
    .hero-btns .btn {
        min-width: 110px;
        font-size: 14px;
        padding: 10px 20px;
        border-radius: 4px;
    }
    
    /* 黑色按钮 */
    .hero-btns .btn-dark {
        background-color: #333;
        border-color: #333;
        color: #fff;
    }
    
    /* 描边按钮 */
    .hero-btns .btn-outline {
        background-color: rgba(255,255,255,0.2);
        border: 1px solid #333;
        color: #333;
        backdrop-filter: blur(2px);
    }

    /* 暗色 Slide 下的描边按钮 */
    .slide-style-dark .hero-btns .btn-outline {
        border-color: #fff;
        color: #fff;
        background-color: rgba(0,0,0,0.2);
    }

    /* 调整轮播箭头位置，避免遮挡内容 */
    .hero-button-prev, .hero-button-next {
        display: none !important; /* 手机端通常隐藏箭头，靠滑动 */
    }
    
    /* 移动端 hero 分页器：进度条样式 */
    .hero-pagination {
        bottom: 40px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-pagination .swiper-pagination-bullet {
        width: 32px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255,255,255,0.35);
        opacity: 1;
        margin: 0 4px;
        position: relative;
        overflow: hidden;
        transition: none;
        transform: none !important;
    }

    /* 进度条填充层 */
    .hero-pagination .swiper-pagination-bullet::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #fff;
        transform: scaleX(var(--hero-progress, 0));
        transform-origin: left;
        transition: transform 0.1s linear;
    }

    .hero-pagination .swiper-pagination-bullet-active {
        width: 32px;
        background: rgba(255,255,255,0.35);
    }

    /* 暗色 Slide 下的分页器 */
    .hero-pagination.pagination-white .swiper-pagination-bullet {
        background: rgba(255,255,255,0.3);
    }
    .hero-pagination.pagination-white .swiper-pagination-bullet-active {
        background: rgba(255,255,255,0.3);
    }

    .site-footer {
        background-color: #0F142E !important; /* 强制换色 */
        padding: 30px 0 !important;
    }

    .footer-content {
        flex-direction: column !important; /* 纵向堆叠 */
        padding-left: 20px !important;
        padding-right: 20px !important;
        border-bottom: none !important;
        gap: 0 !important;
        padding-bottom: 0 !important;
    }

    /* --- 布局重排：利用 order 调整模块顺序 --- */
    .footer-links:nth-of-type(2) { order: 1; } /* 产品服务排第一 */
    .footer-links:nth-of-type(3) { order: 2; } /* 公司信息排第二 */
    .footer-contact { order: 3; }             /* 联系方式排第三 */
    .footer-brand { order: 4; }               /* Logo与社交排最底 */

    /* --- 标题与列表项样式重塑 --- */
    .footer-links h4, .footer-contact h4, .mobile-subscribe-info h4 {
        text-align: left !important;
        padding: 20px 0 !important;
        font-size: 14px !important;
        color: #fff !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 0 !important;
        font-weight: bold !important;
    }

    .footer-contact .no-border, .mobile-subscribe-info .no-border {
        border-bottom: none !important;
    }



    .mobile-subscribe-info .no-border {
        padding: 0 !important;
    }

    .footer-links ul li {
        padding: 0 10px !important;
        border-bottom: 0.5px solid rgba(255,255,255,0.2);
        margin-bottom: 0 !important;
        width: 100%;
    }

    .footer-links ul li a {
        padding: 15px 0 !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        color: #fff !important;
    }

    /* 显示箭头 */
    .m-arrow {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg);
    }

    /* --- 联系方式样式调整 --- */
    .footer-contact li {
        align-items: flex-start !important;
        text-align: left !important;
        margin-bottom: 20px !important;
        color: #fff !important;
        padding: 0 10px !important;
    }

    /* --- 底部品牌与社交区 --- */
    .footer-brand .logo-placeholder {
        display: none !important; /* 移动端底部通常不重复显示 Logo */
    }
    .footer-slogan {
        display: none !important; /* 隐藏 PC 标语 */
    }

    .mobile-subscribe-info {
        display: block; /* 显示“订阅我们” */
        margin: 20px 0 !important;
    }
    .mobile-subscribe-info p {
        color: #B5B5B5;
        font-size: 13px;
    }

    .social-icons {
        justify-content: flex-start !important;
        padding: 20px 0 !important;
        gap: 10px !important;
        margin-top: 0 !important;
    }

    .social-icons img {
        width: 24px !important;
        height: 24px !important;
        filter: brightness(0) invert(1); /* 图标变白 */
    }

    /* 1. 初始隐藏二维码，取消 PC 端的 hover 干扰 */
    .social-item-wx {
        position: relative;
    }

    .wx-qr-popup {
        position: fixed !important; /* 改为相对于窗口定位 */
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        width: 240px !important; /* 移动端二维码大一点 */
        padding: 20px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 9999 !important;
        transition: all 0.3s ease !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .wx-qr-popup img {
        width: 100% !important;
        height: auto !important;
        filter: none !important;
    }

    /* 激活状态：居中放大浮现 */
    .social-item-wx.is-active .wx-qr-popup {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
        pointer-events: auto !important;
    }

    /* 去掉 PC 端的小三角箭头，移动端居中不需要 */
    .wx-qr-popup::after {
        display: none !important;
    }

    /* 二维码下面的文字提示 */
    .wx-qr-popup::before {
        content: "长按识别二维码";
        display: block;
        color: #333;
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
        order: 2; /* 图片后显示 */
    }

    /* 2. 增加半透明背景遮罩（点击图标时由 JS 触发） */
    .qr-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9998;
        backdrop-filter: blur(2px);
        touch-action: none; /* 防止在遮罩层上滑动触发页面滚动 */
    }
    
    html.qr-open,
    body.qr-open {
        overflow: hidden; /* 防止背景滚动 */
    }


    /* --- 版权区垂直化 --- */
    .footer-bottom {
        text-align: left !important;
        padding: 0 20px 20px !important;
        margin-top: 0 !important;
    }
    
    .footer-bottom p {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 13px !important;
        color: #6B7280 !important;
    }

    /* --- 产品卡片移动端优化 (修复文字遮挡问题) --- */
    .product-card {
        /* 取消原来的宽高比限制，改用最小高度，让卡片变高 */
        aspect-ratio: auto !important; 
        min-height: auto; /* 不再强制最小高度 */
        display: block !important;
        padding: 0 !important;
        background-color: transparent !important;
        overflow: hidden;
        border-radius: 0;

    }

    .product-bg {
        /* 背景图改为 img 标签控制，这里重置样式 */
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        background-image: none !important; /* 移除背景图 */
        margin: 0 !important;
        z-index: 1;
    }
    
    .product-bg img,
    .mobile-product-img {
        width: 100%;
        height: auto;
        display: block;
        max-width: 100%; /* 满宽显示 */
        margin: 0; 
        object-fit: cover;
    }

    .product-content {
        /* 文字内容悬浮在图片之上 */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        padding: 60px 20px 0 !important; /* 上下左右留白 */
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }

    .product-title {
        font-size: 26px; /* 标题放大 */
        font-weight: 800;
        margin-bottom: 8px;
        color: #0F142E;
    }

    .product-tag {
        font-size: 14px;
        color: #727272;
        margin-bottom: 8px;
    }

    .product-desc {
        display: block !important; /* 显示描述文字 */
        font-size: 14px;
        color: #0F142E;
        margin-bottom: 10px;
    }

    .product-btn {
        margin-top: 0;
        background-color: #262629;
        color: #fff;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 14px;
    }
    
    /* 仅隐藏“产品”模块标题，不影响首页的“走近杨桃”等其它 section 标题 */
    .products-section .section-title {
        display: none;
    }

    /* 核心修复：移除 section 和 container 的 padding，让内容占满全宽 */
    .products-section {
        padding: 0 !important; /* 移除 section 的上下内边距 */
    }

    .products-section .container {
        padding: 0 !important; /* 移除 container 的左右内边距 */
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-grid {
        margin-top: 5px;
        gap: 10px;
    }

    /* --- 商城 (Mall) 页面移动端专属适配 (仅在 < 768px 触发) --- */
    .mall-hero-overlay > .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mall-hero {
        height: auto !important;
        min-height: 400px;
        display: flex;
        flex-direction: column;
    }

    .mall-hero-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; 
    }

    .mall-hero-overlay {
        position: relative;
        background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0.4) 100%);
        padding: 40px 20px;
    }

    .mall-hero-text {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .mall-hero-text h1 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .mall-hero-list {
        text-align: left;
        display: inline-block;
        margin: 0 auto 20px;
    }

    /* --- 下方系列卡片优化 (白底、上文下图风格) --- */
    .mall-banner {
        aspect-ratio: auto !important;
        height: auto !important; /* 高度自适应 */
        min-height: 420px; /* 保证有足够高度 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between; /* 上下分布 */
        background-color: #f5f5f7 !important; /* 强制浅灰底色 */
        background-image: none !important; /* 移除背景图 */
        border-radius: 16px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 40px 20px 0; /* 顶部给文字留白 */
    }

    /* 图片部分：放在下面 */
    .mall-banner-img {
        position: relative !important;
        width: 100% !important;
        height: 220px !important; /* 给图片固定高度区域 */
        object-fit: contain !important; /* 保证图片完整显示不裁剪 */
        display: block !important;
        order: 2; /* 放在后面 */
        margin-top: 20px;
    }

    /* 文字部分：放在上面 */
    .mall-banner-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 100% !important;
        padding: 0;
        margin: 0;
        background: none !important; /* 移除遮罩 */
        text-align: center !important;
        align-items: center !important;
        order: 1; /* 放在前面 */
    }

    .mb-title {
        font-size: 24px;
        font-weight: 800;
        color: #111 !important; /* 强制黑字 */
        margin-bottom: 8px;
    }

    .mb-desc {
        font-size: 14px;
        color: #666 !important; /* 强制深灰字 */
        margin-bottom: 20px;
    }

    .mb-series {
        color: #666 !important;
        font-size: 12px;
        margin-bottom: 4px;
    }

    /* 按钮：黑色实心 */
    .mb-btn,
    .text-white .mb-btn {
        background-color: #1d1d1f !important;
        color: #fff !important;
        border: none !important;
        border-radius: 999px;
        padding: 8px 24px;
        font-size: 14px;
        display: inline-block !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    /* 优化标题大小，避免手机上太大 */
    .mall-title {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }


    /* 移动端个人系列 */
    /* 1. 标题切换与样式优化 */
    .personal-series-main .series-overview {
        padding: 0 !important;
    }

    .personal-series-main .series-overview .container {
        padding: 0 !important;
    }

    .personal-series-main .series-overview .desktop-only {
        display: none !important;
    }
    

    .mobile-only-title {
        display: block !important;
        font-size: 28px;
        font-weight: 800;
        color: #262629;
        margin-bottom: 20px;
        text-align: left; /* 匹配设计稿左对齐 */
        padding-left: 26px;
        padding-top: 20px;
    }

    /* 2. 网格布局：改为单列 */
    .personal-products-grid {
        grid-template-columns: 1fr !important; /* 强制单列 */
        gap: 10px !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
        margin-top: 0;
    }

    /* 3. 卡片容器调整 */
    .pp-card {
        aspect-ratio: 323 / 413 !important; /* 取消PC端的固定宽高比 */
        background-color: #f1f1f1 !important; /* 匹配设计稿的浅灰色背景 */
        border-radius: 20px !important; /* 更圆润的边角 */
        padding: 30px 24px !important; /* 增加上下内边距 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    /* 4. 图片调整 */
    .pp-media {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 20px 0 !important;
    }

    .pp-media picture {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 移动端：同时约束宽高，避免“高比例”图片把卡片撑爆 */
    .pp-media picture img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* 5. 标题与动作条 */
    .pp-title {
        font-size: 24px !important;
        margin-bottom: 10px;
    }

    .pp-actions {
        width: 100%;
        margin-top: 15px;
        padding-top: 0;
        justify-content: space-between; /* 了解更多靠左，立即购买靠右 */
    }

    .pp-link {
        font-size: 14px !important;
    }

    .pp-buy {
        padding: 6px 16px !important;
        font-size: 14px !important;
    }
    
    /* 特殊处理 5G 角标 */
    .badge-5g-small {
        font-size: 10px;
        border: 1px solid #111827;
        color: #111827;
        padding: 0px 7px;
        border-radius: 10px;
        vertical-align: super;
    }

    .feature-showcase {
        padding: 40px 0 !important;
        background-color: #fff !important;
    }

    .feature-showcase .container {
        padding: 0 !important;   /* 让图片可以根据需要撑满或保持边距 */
    }

    /* 6. 特性展示区域 (极致轻便等) 文字对齐调整 */
    .feature-row {
        flex-direction: column !important; /* 强制上下堆叠 */
        margin-bottom: 40px !important;
        display: flex;
    }
    
    /* 即使是 PC 端 reverse 的行，在移动端也保持上文下图片 */
    .feature-row.reverse {
        flex-direction: column !important;
    }

    .feature-col {
        width: 100% !important;
    }

    /* 文字列样式调整 */
    .feature-col.text-col {
        padding: 0 20px !important; /* 增加左右间距，底部留白 */
        text-align: center; /* 文字居中 */
        order: 1; /* 确保文字在上方 */
        margin-bottom: 14px;
    }

    .feature-col.text-col h2 {
        font-size: 20px !important;
        font-weight: 800;
        color: #111827;
        margin-bottom: 8px;
        letter-spacing: 1px;
    }

    .feature-col.text-col p {
        font-size: 11px !important;
        line-height: 1.5;
        color: #111827;
        text-align: center;
    }

    /* 图片列样式调整 */
    .feature-col.image-col {
        order: 2; /* 确保图片在下方 */
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .feature-col .image-col .feature-img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* 针对设计稿：去除多余的容器间距 */
    .feature-showcase-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* About 页面整体背景与 Hero区域 */
    /* 更换移动端背景图并叠加深色遮罩以保证文字可读性 */
    .about-page .about-hero {
        background:  url('../image/mobile/about/bg.png') center/cover no-repeat !important;
        min-height: auto;
        padding-top: 60px; /* 预留 Header 空间 */
    }

    .about-page .about-hero-inner {
        padding: 30px 20px 60px ;
    }

    /* 移动端卡片容器：纵向堆叠 */
    .about-page .about-card-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    /* 匹配设计稿的半透明圆角卡片 */
    .about-page .about-card, 
    .about-page .about-card.large {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: auto;
        background: rgba(255, 255, 255, 0.15); /* 半透明白 */
        backdrop-filter: blur(8px); /* 毛玻璃效果 */
        border-radius: 10px; /* 较大的圆角 */
        padding: 24px;
        box-shadow: none !important;
    }

    /* 卡片文字样式 */
    .about-page .about-card p {
        font-size: 14px;
        line-height: 28px;
        color: #FFFFFF;
        text-indent: 0;
        margin: 0;
        text-align: justify;
        text-justify: inter-ideograph;
        letter-spacing: 2.5px;
    }

    .about-page .about-card:first-child p {
        text-indent: 2em;
        text-align: justify;
    }

    /* 1. 统计区域整体背景 */
    .about-page .about-stats {
        /* 使用移动端背景图，设置为底部对齐且不重复 */
        background:  url('../image/mobile/about/status-bg.png') center center no-repeat !important;
        background-size: 100% auto !important; /* 让底纹宽度占满 */
        padding: 30px 0 !important;
        position: relative;
        z-index: 5;
        /* 增加顶部圆角，使其与上方深色背景产生悬浮交接感 */
        border-radius: 30px 30px 0 0;
    }

    /* 2. 网格布局调整为单列 */
    .about-page .about-stats-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 3. 统计卡片样式 */
    .about-page .stat-card {
        background: rgba(255, 255, 255, 0.4); /* 半透明白，透出底纹 */
        border-radius: 14px;
        padding: 20px;
        /* 阴影调整为柔和的浅灰色 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 强制左对齐 */
    }

    /* 4. 数字与文字样式 */
    .about-page .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #4B5563; /* 深灰偏黑 */
        line-height: 1.2;
        margin-bottom: 4px;
        letter-spacing: -0.5px;
    }

    .about-page .stat-label {
        font-size: 18px;
        color: #4B5563; /* 辅助灰色 */
        font-weight: 400;
        margin-top: 0;
    }

    /* 商城页面 */
    .mall-main {
        background: #FFFFFF !important;
    }
    
    /* 1. 导航栏：固定白色背景，不悬浮在 Hero 上方 */
    .mall-main-page .site-header {
        background-color: #fff !important;
        position: fixed !important; /* 需要随滚动固定在顶部 */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1002;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Header 改为 fixed 后，给主内容补偿顶部高度，避免被遮挡 */
    .mall-main-page .mall-main {
        padding-top: 59px !important;
    }

    /* 2. Hero 容器：使用移动端背景图 */
    .mall-main-page .mall-hero {
        margin-top: 0 !important;
        min-height: 410px  !important;
        /* 背景图设在容器上，位置设为顶部居中 */
        background:  url('../image/mobile/mall/bg.png') center center no-repeat !important;
        background-size: 100% auto !important;
        display: block !important;
    }
    

    .mall-hero-overlay {
        background: none !important;
        padding: 0 !important;
    }
    

    /* 隐藏原有 HTML 的 <img> 标签，避免撑乱布局 */
    .mall-hero-img.desktop-only {
        display: none !important;
    }

    /* 1. 核心容器：解除 200px 宽度限制，允许内容根据设计稿自然换行 */
    .mall-main-page .mall-hero-text {
        width: 100% !important; 
        max-width: 100% !important; /* 解除死锁 */
        padding: 20px 15% 0 !important; /* 左右 15% 的内边距控制换行宽度，底部撑开露出产品 */
        display: flex;
        flex-direction: column;
        align-items: center; /* 整体水平居中 */
        text-align: center;
        margin: 0 !important;
        gap: 0 !important;
    }

    .mall-main-page .mall-hero-text .desktop-only {
        display: none !important; /* 隐藏 PC 端专用元素 */
    }

    .mall-main-page .mall-hero-text .mobile-only {
        display: block !important; /* 显示移动端专用元素 */
        margin: 0 !important;
    }

    /* 2. 标题样式 */
    .mall-hero-text h1 {
        font-size: 24px !important; /* 加大标题 */
        font-weight: 800;
        color: #111827 !important;
        margin-bottom: 0 !important; /* 增加间距 */
        line-height: 45px !important;
    }

    /* 3. 列表对齐：让 li 与标题保持在同一垂直中轴线上 */
    .mall-hero-list {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start; /* 列表项左对齐 */
        justify-content: center;
        gap: 12px;
        margin: 0 auto 30px !important; /* 整体居中 */
        width: fit-content !important; /* 宽度自适应内容 */
        max-width: 90%;
    }
    /* 修正后的列表圆点代码 */
    .mall-hero-list li::before {
        content: "•" !important;    /* 强制使用字符点 */
        position: absolute;
        left: 0;
        top: 0;
        font-size: 18px;
        line-height: 24px; /* 对齐圆点 */
        color: #333;
        /* 关键：清除 PC 端的实心背景圆点样式 */
        background: none !important; 
        width: auto !important;
        height: auto !important;
    }
    
    .mall-hero-list li {
        font-size: 11px;
        color: #374151;
        list-style: none;
        padding-left: 18px; /* 留出空间给绝对定位的圆点 */
        position: relative;
        text-align: left; /* 文字左对齐 */
        line-height: 24px;
        display: block;
        width: 100%;
    }

    /* 5. 蓝色矩形按钮对齐 */
    .mall-hero .mell-btn {
        width: 85px !important;
        height: 38px !important;
        line-height: 38px !important;
        background-color: #206EDC !important; /* 调整为更接近设计的蓝色 */
        border-radius: 6px !important;
        font-size: 13px !important;
        margin-top: 10px !important;
        display: block !important;
        border: none !important;
    }

    /* 商城部分产品系列 */
    .mall-section .container {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 系列标题：居中且固定 */
    .mall-title {
        text-align: center !important;
        font-size: 24px !important;
        font-weight: 800;
        margin: 30px 0 20px !important;
        display: block !important;
    }

    .pc-only-section {
        display: none !important;
    }

    .mobile-only-section {
        display: block !important;
    }

    /* 滑动包装层：左右各 37.5px 的 padding ( (375-300)/2 ) 可使 300px 的卡片居中 */
    .mall-slider-wrapper {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 0 37.5px 30px !important; 
        -webkit-overflow-scrolling: touch;
    }
    .mall-slider-wrapper::-webkit-scrollbar { display: none; }

    /* 产品卡片：调整为 300x375 对应的 80% 宽度与 0.8 比例 */
    .mall-banner {
        flex: 0 0 100% !important; /* 300/375 = 80% */
        scroll-snap-align: center;
        aspect-ratio: 300 / 375 !important; /* 保持设计稿 300x375 比例 */
        border-radius: 20px;
        background-color: transparent !important; /* 移除背景色 */
        background-size: cover;
        background-position: center;
        position: relative;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .mall-banner:hover {
        transform: none !important; /* 禁用悬停放大效果 */
        box-shadow: none !important;
    }

    /* 隐藏 PC 图片和副标题 */
    .mall-banner-img, .mb-title { display: none !important; }

    /* --- 核心修复：重新计算 nth-of-type 索引 --- */
    /* 因为 <main> 下第一个是 mall-hero，所以个人系列是第2个 section，以此类推 */
    
    /* 个人系列 (2nd section) */
    section:nth-of-type(2) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/1.png') !important; }
    section:nth-of-type(2) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/2.png') !important; }
    
    /* 家庭系列 (3rd section) */
    section:nth-of-type(3) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/3.png') !important; }
    section:nth-of-type(3) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/4.png') !important; }
    section:nth-of-type(3) .mall-banner:nth-of-type(3) { background-image: url('../image/mobile/mall/5.png') !important; }
    
    /* 企业系列 (4th section) - 之前不显示是因为索引只写到了 3 */
    section:nth-of-type(4) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/6.png') !important; }
    section:nth-of-type(4) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/7.png') !important; }
    section:nth-of-type(4) .mall-banner:nth-of-type(3) { background-image: url('../image/mobile/mall/8.png') !important; }

    section:nth-of-type(5) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/6.png') !important; }
    section:nth-of-type(5) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/7.png') !important; }
    section:nth-of-type(5) .mall-banner:nth-of-type(3) { background-image: url('../image/mobile/mall/8.png') !important; }

    /* 杨桃大会员 */
    section:nth-of-type(6) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/9.png') !important; }
    section:nth-of-type(6) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/10.png') !important; }

    /* 更多探索 */
    section:nth-of-type(7) .mall-banner:nth-of-type(1) { background-image: url('../image/mobile/mall/13.png') !important; }
    section:nth-of-type(7) .mall-banner:nth-of-type(2) { background-image: url('../image/mobile/mall/11.png') !important; }
    section:nth-of-type(7) .mall-banner:nth-of-type(3) { background-image: url('../image/mobile/mall/12.png') !important; }

    /* 描述文字：换行排列且隐藏圆点 */
    .mb-desc {
        display: flex !important;
        flex-direction: column !important; /* 强制垂直排列实现换行 */
        align-items: flex-start !important; /* 垂直排列时依然靠左 */
        font-size: 11px !important;
        line-height: 20px !important;
        color: #B7B7B7 !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    .mb-desc .mobile-dot { display: none !important; }

    /* 文案内容区与按钮样式 */
    .mall-banner-content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.5), transparent) !important;

        display: flex !important;
        flex-wrap: wrap !important; /* 允许系列名单独占一行 */
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important; /* 让文字底部与按钮底部对齐 */
        padding: 30px 20px !important;
    }
    .mb-series { 
        width: 100% !important; /* 强制占满一行，把其他元素挤到下一行 */
        font-size: 15px !important; 
        color: #fff !important; 
        font-weight: 700 !important; 
        text-align: left !important;
        margin-bottom: 8px !important;
    }

    .mb-btn {
        position: static !important; /* 关键：移除绝对定位，让它回到 flex 流中 */
        background: #fff !important;
        color: #3D3D3D !important;
        border-radius: 20px !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
        font-weight: 600;
        margin-bottom: 2px !important; /* 微调与左侧文字的对齐 */
        min-width: auto !important;
    }

    .mb-btn, .text-white .mb-btn {
        background: #FFFFFF !important;
        color: #3D3D3D !important;
    }


    /* 商务合作移动端 */
    .cooperate-page .desktop-only-grid { display: none !important; }
    .cooperate-page .mobile-only-block { display: block !important; }

    /* 移动端设计稿：不需要顶部轮播（Hero） */
    .cooperate-page .hero-section { display: none !important; }
    .cooperate-page main { padding-top: 59px; } /* 与移动端 header 高度保持一致，避免内容被遮挡 */

    /* 移动端设计稿：Header 固定白底（覆盖滚动态/header-white/menu-open/透明态） */
    body.cooperate-page .site-header,
    body.cooperate-page .site-header.header-scrolled,
    body.cooperate-page .site-header.header-white,
    body.menu-open.cooperate-page .site-header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }

    body.cooperate-page .mobile-menu-toggle svg path {
        stroke: #333 !important;
    }

    /* 商务合作页移动端：联系我们按钮保持黑色胶囊 */
    body.cooperate-page .contact-trigger {
        background-color: #111 !important;
        color: #fff !important;
        border: none !important;
    }

    .cooperate-page .cooperate-contact {
        background: #FFFFFF;
        padding: 18px 0 32px;
    }

    .cooperate-page .cooperate-contact > .container {
        padding-left: 7.5px !important;
        padding-right: 7.5px !important;
    }

    .cooperate-page .coop-mobile-view {
        display: block;
        max-width: 520px;
        margin: 0 auto;
    }

    .cooperate-page .m-coop-header-img {
        border-radius: 10px;
        overflow: hidden;
        /* box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.28); */
        background: #fff;
    }

    .cooperate-page .m-coop-header-img img {
        display: block;
        width: 100%;
        height: auto;
    }

    .m-coop-container {
        padding-left: 19px;
        padding-right: 38px;
    }

    .cooperate-page .m-coop-main-title {
        font-size: 24px;
        line-height: 46px;
        font-weight: 800;
        color: #111827;
        margin: 18px 0 12px;
    }

    .cooperate-page .m-coop-section {
        margin-top: 18px;
    }

    .cooperate-page .m-section-title {
        font-size: 18px;
        line-height: 27px;
        font-weight: 800;
        color: #2A2E43;
        margin: 0 0 12px;
    }

    .cooperate-page .m-qr-card {
        width: 196px;
        max-width: 196px;
        padding-left: 0;
        padding-right: 0;
        /* background: #fff; */
        border-radius: 7px;
        padding: 12px 0;
        box-shadow: 0 1px 1.85px 0 rgba(0, 0, 0, 0.05);
        text-align: center;
    }

    .cooperate-page .m-qr-code {
        width: min(196px, 72vw);
        max-width: 196px;
        aspect-ratio: 1 / 1;
        height: auto;
        display: block;
        border-radius: 10px;
        object-fit: cover;
        background: #f3f4f6;
        padding-left: 0;
        padding-right: 0;
    }


    .cooperate-page .m-qr-hint {
        margin-top: 10px;
        font-size: 12px;
        line-height: 18px;
        color: #4B5563;
    }

    .cooperate-page .m-contact-person {
        margin-top: 12px;
        color: #111827;
    }

    .cooperate-page .m-contact-person p {
        margin: 0;
        font-size: 9px;
        line-height: 12px;
        font-weight: bold;
        color: #4B5563 !important;
    }

    .cooperate-page .m-phone-text {
        margin-top: 4px !important;
        font-size: 8px;
        line-height: 11px;
        font-weight: normal !important;
        color: #4B5563 !important;
    }

    .cooperate-page .m-contact-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cooperate-page .m-contact-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #374151;
        font-size: 16px;
        line-height: 22px;
    }

    .cooperate-page .m-contact-list li.align-top {
        align-items: flex-start;
        line-height: 27.5px;
    }

    .cooperate-page .m-contact-list img {
        width: 18px;
        height: 18px;
        /* margin-top: 2px; */
        flex-shrink: 0;
        object-fit: contain;
    }

    .cooperate-page .m-contact-list a {
        color: #277AFF;
        text-decoration: none;
    }

    .cooperate-page .m-contact-list span {
        color: #374151;
    }

    .about-section {
        padding: 40px 0 !important;
        background: #f9fafb !important;
        overflow: visible !important; /* 关键：允许两侧 slide 露出，不被裁切 */
    }

    .about-swiper-container {
        overflow: visible !important;
    }

    .about-swiper {
        /* 容器高度要略大于视频，给底部分页器留位 */
        height: 500px !important; 
        overflow: visible !important; /* 允许两侧滑块露出 */
        padding: 0 0 60px !important; 
    }

    .swiper-slide.about-slide {
        width: 315px !important;
        height: 434px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        /* 不设 opacity/transform/scale，所有 slide 都保持原样 */
        opacity: 1 !important;
        transform: none !important;
    }

    .about-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 视频填满卡片，不留背景 */
        border-radius: 12px;
    }

    /* 指示点进度条位置 */
    .about-pagination {
        bottom: 15px !important;
    }

    .about-pagination .swiper-pagination-bullet {
        width: 32px !important; /* 长条宽度 */
        height: 4px !important;
        background: #BBBBBB !important; /* 底色 */
        border-radius: 2px !important;
        position: relative;
        overflow: hidden;
        opacity: 1 !important;
        margin: 0 4px !important;
    }

    /* 进度条内部填充层 */
    .about-pagination .swiper-pagination-bullet::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #213050; /* 进度填充颜色 */
        transform: scaleX(var(--progress, 0)); /* 由 JS 动态控制 */
        transform-origin: left;
        transition: transform 0.1s linear;
    }

    /* 杨桃AI终端 */
    
}

.footer-service-item {
    position: relative;
    display: inline-block;
}

.service-qr-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 120px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    text-align: center;
    pointer-events: none;
}

.service-qr-popup img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.service-qr-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.footer-service-item:hover .service-qr-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-15px);
    pointer-events: auto;
}

/* Footer bottom: desktop keep one-line even when using multiple <p> */
@media (min-width: 769px) {
    .footer-bottom-inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .footer-bottom-inner p {
        display: inline !important;
        margin: 0 !important;
    }
}