/*
 Theme Name: Zonngoo
 Description: 我的独立定制主题。
 Version: 1.0
*/
/* 1. 替换为 Poppins 的 Google Fonts 链接 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. 变量与全局基础设置
   ========================================================================== */
:root {
    --primary-color: #050505;
    --secondary-color: #aaaaaa;
    --btn-hover-color: #0031ff;
    --txt-hover-color: #050505;
    --txt-white-color: #ffffff;
    --menu-hover-color: #000;
    --accent-red: #bb1b21;
    --text-dark: #333;
    --text-gray: #666;
    --menu-color: #000;
    --border-color: #eee;
    --container-max: 1800px;
    --container-min: 1500px;
}

html,
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--primary-color);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
    padding-top: 0;
}

html,
body,
button,
input,
select,
textarea,
a {
    font-family: 'Poppins', sans-serif !important;
    text-decoration: none;
}

*,
*::before,
*::after {
    font-family: 'Poppins', sans-serif !important;
}

a {
    color: var(--txt-hover-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--txt-hover-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ==========================================================================
   2. 导航栏 (Desktop & Global Mega Menu)
   ========================================================================== */
.header-nav .menu-link,
.main-menu a,
.secondary-menu a,
.menu-item a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-nav .logo img {
    display: block;
    height: 39px;
    max-height: 60px !important;
    /* 根据你的导航栏高度调整 */
    width: auto;
    transition: opacity 0.3s ease;
}

.header-nav .logo a:hover img {
    opacity: 0.8;
}

#global-mega-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999999;
}

/* --- 基础显隐控制 --- */
.mobile-only {
    display: none;
}

.pc-only {
    display: block;
}

@media screen and (min-width: 1024px) {
    body {
        padding-top: 70px !important;
    }

    #global-mega-menu-wrapper {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 110px;
        background: #fff;
        z-index: 999999;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-container {
        max-width: var(--container-max);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        /* 纵向排列两行 */
        padding: 0 40px;
    }

    /* 第一行样式 */
    .nav-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }

    .nav-top-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .brand-slogan {
        font-size: 13px;
        color: #000;
        font-weight: 500;
    }

    /* 第二行样式 */
    .nav-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        /* 固定导航行高度 */
        margin-bottom: 10px;
        position: relative;
    }

    .logo {
        font-weight: 800;
        font-size: 22px;
        letter-spacing: 1px;
    }

    .main-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        flex: 1;
    }

    .menu-item {
        position: static;
        display: flex;
        align-items: center;
    }

    .menu-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 15px;
        height: 100%;
        color: var(--text-dark);
        font-size: 14px;
        font-weight: 600;
        position: relative;
    }

    .menu-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
        height: 3px;
        background: #000;
        transform: scaleX(0);
        transition: 0.3s;
    }


    /* 2. 只有当带有 is-active 类时才显示 */
    .menu-item.is-active .mega-panel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 3. 激活时箭头旋转 */
    .menu-item.is-active .menu-arrow svg {
        transform: rotate(180deg);
    }

    .menu-item:hover .menu-link::after {
        transform: scaleX(1);
    }

    .menu-item a:hover {
        color: var(--txt-hover-color);
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .secondary-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 20px;
        height: 100%;
    }

    /*
    .secondary-menu a { color: var(--text-dark); font-size: 13px; font-weight: 500; }
    .secondary-menu a:hover { color: var(--menu-hover-color); }
    */
    .nav-top-right {
        display: flex;
        align-items: center;
        /* 垂直居中核心 */
        justify-content: flex-end;
        /* 如果需要靠右对齐 */
        gap: 30px;
        /* 图标组与文字菜单之间的间距 */
        white-space: nowrap;
        /* 强制不换行 */
    }

    .top-secondary-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 20px;
    }

    .top-secondary-menu a {
        color: var(--text-dark);
        font-size: 13px;
        font-weight: 500;
    }

    .top-secondary-menu a:hover {
        color: var(--menu-hover-color);
    }

    .header-icons {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-dark);
        padding: 5px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .icon-btn:hover {
        color: var(--menu-hover-color);
    }

    .header-icons svg {
        vertical-align: middle;
        /* 消除 baseline 对齐产生的底部间隙 */
    }

    /* 右上角通知信息*/
    .nav-icons-container {
        position: relative;
        display: inline-block;
    }

    .bell-count {
        position: absolute;
        top: -8px;
        right: -10px;
        background: var(--accent-red);
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    /* 弹出层主体 */
    .notif-modal {
        display: none;
        position: absolute;
        /* 对齐调整：在铃铛下方并向左偏移，确保右侧靠近铃铛 */
        top: calc(100% + 45px);
        right: -10px;
        width: 360px;
        background: #ffffff;
        border-radius: 10px;
        /* 极圆润的欧美风 */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        padding: 20px;
        animation: modalFadeIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* 顶部的三角形小箭头（指向铃铛） */
    .notif-modal::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 22px;
        /* 调整此值直到对齐铃铛中心 */
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }

    /* 头部布局：标题在左，关闭在最右 */
    .notif-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 5px;
    }

    .notif-header h3 {
        font-weight: 700;
        font-size: 20px;
    }

    .close-notif-btn {
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: #000;
        line-height: 1;
    }

    /* 产品卡片样式 */
    .notif-card {
        display: flex;
        align-items: center;
        background: #fff;
        border: 1.5px solid #f0f0f0;
        border-radius: 20px;
        padding: 12px;
        margin-bottom: 12px;
        position: relative;
        transition: all 0.2s ease;
    }

    .notif-card:hover {
        border-color: #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .notif-card img {
        width: 65px;
        height: 65px;
        border-radius: 14px;
        object-fit: cover;
        margin-right: 15px;
    }

    .notif-info h4 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .notif-info p {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* ============================================================
   Support & Explore Mega Menu 完整样式
   ============================================================ */

    /* 1. 容器：定义 3 列网格 (图片 1.2 : 文字 1 : 文字 1) */
    .support-grid-layout {
        display: flex;
        justify-content: flex-start;
        /* 基础对齐 */
        align-items: flex-start;
        padding: 60px 80px;
        max-width: 1600px;
        margin: 0 auto;
    }

    .support-col {
        flex: 0 0 220px;
        /* 每个文字栏固定宽度，防止换行 */
        margin-left: 5px;
        /* 两列文字之间的间距 */
    }

    /* 2. 左侧图片区 (support-promo) */
    .support-promo {
        flex: 0 0 480px;
        /* 固定宽度为 480px，不缩放 */
    }

    .support-links-group {
        display: flex;
        /* 核心：将这一整组推向容器的最右侧 */
        margin-left: auto;
        /* 控制 Support 和 Explore 两列之间的距离，不再是无限大 */
        gap: 120px;
    }

    .promo-card {
        text-decoration: none;
        display: block;
        width: 100%;
    }

    .promo-card img {
        max-width: 100%;
        ;
        height: auto;
        border-radius: 8px;
        /* 轻微圆角 */
        display: block;
        transition: transform 0.5s ease;
    }

    /* 图片悬停效果 */
    .promo-card:hover img {
        transform: scale(1.05);
    }

    /* 图片下方的标题文字 */
    .promo-text p {
        margin-top: 15px;
        font-size: 15px;
        font-weight: 700;
        color: #000;
        line-height: 1.4;
    }

    /* 3. 文字列样式 (support-col) */
    .col-title {
        font-size: 13px;
        color: #999;
        /* 浅灰色标题 */
        font-weight: 600;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

    .col-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .col-links li {
        margin-bottom: 18px;
    }

    .col-links li a {
        font-size: 14px;
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    /* 4. 链接悬停：变蓝 + 右滑 */
    .col-links li a:hover {
        color: var(--accent-red);
        transform: translateX(6px);
    }



    /* 调整原来的下划线动画位置 */
    .menu-link::after {
        bottom: 5px;
    }

    /* --- Mega Panel --- */
    .mega-panel {

        display: none;
        position: fixed;
        top: 110px;
        left: 0;
        width: 100vw;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border-top: 1px solid var(--border-color);
    }

    .mega-container {
        max-width: var(--container-max);
        margin: 0 auto;
        display: flex;
        min-height: 400px;
    }

    .mega-sidebar {
        width: 240px;
        padding: 20px 0;
        border-right: 1px solid var(--border-color);
    }

    .sidebar-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidebar-group-title {
        padding: 15px 40px 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-color);
    }

    .tab-link {
        display: flex;
        align-items: center;
        padding: 12px 40px;
        color: var(--text-gray);
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
        display: block;
        border-left: 3px solid transparent;
    }

    .tab-link:hover {
        color: var(--text-dark);
        background: #fcfcfc;
    }

    .tab-link.active {
        background: #f4f4f4;
        color: #000;
        font-weight: 700;
    }

    .tab-link.best-seller {
        font-weight: 800;
        margin-bottom: 5px;
    }

    .mega-content-area .tab-panel {
        display: none !important;
    }

    .mega-content-area .tab-panel.active {
        display: block !important;
    }

    /* 鼠标手势，确保用户知道可以点击 */
    .tab-link,
    .third-cat-item {
        cursor: pointer !important;
    }

    .third-cat-item {
        display: block;
        /* 确保占据整行，方便悬停 */
        cursor: pointer;
        line-height: 35px;
        font-size: 0.9em;
        transition: all 0.2s ease;
        /* 增加平滑过渡 */
        position: relative;
        padding-left: 55px;
        z-index: 1;
    }

    .third-cat-item:hover {
        background-color: #f5f5f5 !important;
        /* 使用稍深一点的灰色测试，看是否生效 */
    }

    /* 点击选中后的明显效果 */
    .third-cat-item.active {
        background-color: #f0f0f0;
        font-weight: bold;
    }

    .toggle-icon {
        display: inline-flex;
        /* 消除 span 默认的行高间隙 */
        align-items: center;
        justify-content: center;
        line-height: 0;
        /* 防止行高撑开高度 */
    }

    .toggle-icon svg {
        display: block;
        transition: transform 0.3s;
        transform: translateY(3px);
    }

    .tab-link-wrapper.is-open .toggle-icon svg {
        transform: rotate(180deg);
        transform: translateY(3px);
    }

    .mega-content-area {
        flex: 1;
        padding: 30px;
    }


    /* 当菜单打开时，禁止 body 滚动 */
    body.menu-open {
        overflow: hidden !important;
        height: 100vh !important;
        /* 锁定视口高度 */
        position: fixed;
        /* 某些浏览器需要这个来彻底锁定 */
        width: 100%;
    }

    /* 1. 遮罩层：全屏、半透明、默认隐藏 */
    .site-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        /* 背景变暗 */
        z-index: 998;
        /* 低于下拉菜单，高于内容 */
        display: none;
        cursor: pointer;
    }

    /* 2. 下拉菜单：确保层级最高 */
    .mega-panel {
        z-index: 999 !important;
    }

    /* 3. 导航栏容器：确保它在最前面 */
    .header-nav {
        position: relative;
        z-index: 1000;
    }

    /* 4. 当菜单打开时，显示遮罩层并禁止页面滚动 */
    body.menu-open .site-overlay {
        display: block;
    }

    body.menu-open {
        overflow: hidden;
        /* 防止开启菜单后背景还能滚动 */
    }

    /* 面板头部布局 */
    .panel-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        /* 增加一条细线分割 */
    }

    /* 类别大标题 */
    .panel-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        margin: 0;
        line-height: 1;
    }

    /* View All 链接样式 */
    .view-all-link {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        color: #666;
        /* 建议用你的变量 --btn-hover-color */
        text-decoration: none;
        font-weight: 500;
        transition: transform 0.3s ease;
        margin-top: 2px;

    }

    .view-all-link svg {
        transition: transform 0.3s ease;
    }

    .view-all-link:hover {
        opacity: 0.8;
    }

    .view-all-link:hover svg {
        transform: translateX(3px);
        /* 悬停时小箭头动一下 */
    }

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

    .product-card {
        color: inherit;
        text-align: center;
    }

    /* 缩小图片容器 */
    .img-wrapper {
        background: #f7f7f7;
        padding: 10px;
        /* 减小内边距 */
        border-radius: 4px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 确保图片垂直居中 */
        position: relative;
        height: 180px;
        /* 给容器一个固定高度，方便控制图片视觉大小 */
        overflow: hidden;
    }

    /* 控制图片大小 */
    .img-wrapper img {
        max-width: 90%;
        /* 图片宽度不撑满，留白会让图片显得更小、更高端 */
        max-height: 150px;
        /* 修改此处：从 150px 调小到 120px */
        width: auto;
        height: auto;
        object-fit: contain;
        /* 确保图片比例不失真 */
        mix-blend-mode: multiply;
        transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    }

    .product-card:hover .img-wrapper img {
        transform: scale(1.08);
        /* 图片轻微放大 */

    }

    .product-title {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        margin: 0;
        /* 如果标题太长，可以限制为两行 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .badge {
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 10px;
        color: var(--accent-red);
        border: 1px solid var(--accent-red);
        padding: 1px 6px;
        border-radius: 10px;
    }


    .menu-arrow {
        display: flex;
        transition: 0.3s;
    }

    /* 默认状态：设置旋转和缩放的过渡动画 */
    .menu-arrow svg {
        transition: transform 0.3s ease, fill 0.3s ease;
        display: inline-block;
        /* 确保 transform 生效 */
        vertical-align: middle;
    }

    /* 鼠标悬停在整个菜单项时：放大箭头 */
    .menu-item:hover .menu-arrow svg {
        transform: scale(1.6);
        /* 放大 1.3 倍，比 font-size 更靠谱 */
        color: var(--accent-red);
        /* 可选：悬停时箭头变色，更明显 */
    }

    /* 只有当菜单被点击激活 (is-active) 时：旋转并保持放大 */
    .menu-item.is-active .menu-arrow svg {
        transform: rotate(180deg) scale(1.6);
    }
}

/* 移动端样式 (1024px以下) */
@media screen and (max-width: 1023px) {
    .pc-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
        /* 使用 !important 覆盖主题默认的隐藏样式 */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: #fff;
        /* 或者 transparent，如果你想让它浮在Banner上 */
        z-index: 1000;
        border-bottom: 1px solid #eee;
    }

    .mobile-header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 15px;
    }

    .mobile-menu-toggle {
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
    }

    /* 修正 Banner 在移动端的偏移，防止被固定的 Header 遮挡 */
    .custom-full-banner {
        padding-top: 60px;
        min-height: 60vh;
        /* 移动端高度调小一点 */
    }

    .banner-inner-content {
        transform: none !important;
        /* 移动端取消 PC 上的位移 */
        padding: 40px 20px;
    }


    /* 移动端 Header (通常需要一个常驻顶部的简易Bar) */
    .header-nav {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }

    /* 抽屉菜单样式 */
    #mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: 0;
        /* 改为 0，靠左对齐 */
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1000000 !important;
        /* 初始状态：向左完全偏移出屏幕 */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        display: block !important;
        /* 确保不被父级隐藏 */
    }

    /* 统一菜单项头部样式 */
    .item-header {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 16px;
        color: #333;
        text-decoration: none;
        /* 针对 a 标签 */
        width: 100%;
        /* 确保撑满宽度 */
        box-sizing: border-box;
        /* 防止 padding 撑破容器 */
        cursor: pointer;
    }

    /* 确保 hover 时没有下划线或颜色异常 */
    .mobile-nav-item a.item-header:hover {
        background-color: #f9f9f9;
        color: #333;
    }

    #mobile-menu-drawer.is-active {
        transform: translateX(0);
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }

    /* 强制限制抽屉内 Logo 大小 */
    .mobile-menu-header .logo img {
        height: 30px;
        /* 必须限制高度 */
        width: auto;
        display: block;
    }

    /* 导航列表基础重置，防止内容偏移 */
    .mobile-nav-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-nav-item a,
    .item-header {
        text-decoration: none;
        color: #333;
    }

    /* 移动端菜单项样式 */
    .mobile-nav-item {
        border-bottom: 1px solid #f0f0f0;
    }

    .item-header {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 16px;
    }

    /* 子菜单默认折叠 */
    .mobile-submenu {
        display: none;
        background: #f9f9f9;
        list-style: none;
        padding-left: 0;
    }

    .mobile-submenu li a {
        display: block;
        padding: 12px 30px;
        font-size: 14px;
        color: #666;
        text-decoration: none;
    }

    /* 展开状态 */
    .mobile-nav-item.open .mobile-submenu {
        display: block;
    }

    .mobile-nav-item.open .arrow-icon {
        transform: rotate(90deg);
    }

    .support-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ==========================================================================
   3. 核心业务组件 (变体选择, Tab等)
   ========================================================================== */
.custom-variation-buttons-wrapper {
    margin-bottom: 20px;
}

.variation-label {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
}

.variation-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.variation-item {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    background: #fff;
}

.variation-item.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

table.variations {
    display: none !important;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**/

/* ==========================================================================
   4. 首页各版块 (Banner, Feature, Categories)
   ========================================================================== */

/* --- 搜索遮罩层 (响应式) --- */
.search-toggle,
.close-mobile-menu,
.close-search {
    background: none;
    border: none;
}

.search-overlay {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999999999;
    transform: translateY(-100%);
    visibility: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px 0;
}

.search-overlay.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

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

.search-input-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 20px;
    padding: 0 15px;
}

/* 基础按钮样式重置 */
.submit-search,
.close-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

.submit-search:hover,
.close-search:hover {
    opacity: 0.7;
}


/* 同时给输入框加一个安全限制，防止它把别人挤走 */
.search-input {
    flex: 1;
    /* 占用剩余空间 */
    min-width: 0;
    /* 【极其重要】允许输入框在必要时缩小到 0，而不是死撑宽度 */
}

/* 搜索框下边框 */
.search-input-row {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
}

/* 推荐区域样式 */
.search-recommendations {
    margin-top: 25px;
}

.recommend-title {
    font-size: 15px;
    color: #807e7eab;
    /* 灰色小标题 */
    margin-bottom: 15px;
    font-weight: 500;
}

.recommend-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* 标签之间的间距 */
}

.recommend-tags a {
    text-decoration: none;
    color: #000;
    /* 黑色文字 */
    font-size: 16px;
    transition: color 0.3s;
}

.recommend-tags a:hover {
    color: #bb1b21;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
    .search-input {
        font-size: 15px;
        padding: 0 5px;
    }

    .submit-search {
        flex-shrink: 0;
        width: 25px;
        height: 25px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .recommend-tags {
        gap: 15px;
    }

    .recommend-tags a {
        font-size: 13px;
    }
}


@media screen and (max-width: 1024px) {
    .search-overlay {
        top: 60px;
        padding: 10px 0;
    }
}

/* --- Banner --- */
.custom-full-banner {
    width: 100%;
    min-height: 90vh;
    background: #000 url('/assets/banner.jpg') no-repeat center center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.banner-inner-content {
    max-width: 1200px;
    width: 90%;
    text-align: center;
    transform: translate(-150px, -100px);
}

.banner-inner-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    color: #fff;
    line-height: 1.1;
    margin: 20px 0;
}

.date-tag {
    color: #fff797;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 23px);
}

.promo-text {
    margin-bottom: 28px;
}

.promo-text span {
    color: var(--accent-red);
    font-weight: bold;
}

/* --- 统计与栅格 --- */
.zonngoo-style-section {
    max-width: var(--container-max);
    margin: 80px auto;
    padding: 0 20px;
}

.zonngoo-container-section {
    max-width: var(--container-max);
    margin: 10px auto 30px;
    padding: 0 20px;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.header-left h2 {
    font-size: clamp(24px, 4vw, 42px);
    line-height: 1.1;
    margin: 0;
    color: #000;
    font-weight: 500;
}

.header-right-wrapper {
    display: flex;
    gap: 40px;
}

.stat-item {
    font-size: 13px;
    line-height: 1.4;
}

.stat-item strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

/* ==========================================================================
   Zonngoo Custom Grid System
   ========================================================================== */

/* 1. 基础容器：默认就是 1 列 (手机端) */
.zg-grid {
    display: grid;
    gap: 20px;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
}

/* 2. 间距辅助类 */
.gap-sm {
    gap: 10px;
}

.gap-lg {
    gap: 40px;
}

/* 3. 中等屏幕 (平板: 768px - 1023px) */
@media screen and (min-width: 768px) {

    /* 在平板上，如果原来是多列布局，统一先降级为 2 列，避免太挤 */
    .zg-grid[class*="cols-"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4. 大屏幕 (桌面端: 1024px+) */
@media screen and (min-width: 1024px) {
    .zg-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zg-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .zg-grid.cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .zg-grid.cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* 子项跨列辅助类 (仅在桌面端生效) */
    .span-2 {
        grid-column: span 2;
    }

    .span-3 {
        grid-column: span 3;
    }

    .span-full {
        grid-column: 1 / -1;
    }
}

.feature-grid {
    gap: 20px;
}

.grid-card {
    position: relative;
    /*height: 600px;*/
    width: 100%;
    aspect-ratio: 1500 / 1190;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    background-color: #f5f5f5;
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.card-journey {
    background-image: url('/assets/left-1.jpg');
}

.card-prime {
    background-image: url('/assets/right-1.jpg');
}

.grid-card:hover .card-bg {
    transform: scale(1.08);
}

.card-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 40px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    color: #fff;
    transition: transform 0.4s ease;
}

.grid-card:hover .card-overlay {
    transform: translateY(-5px);
}

.card-overlay h3 {
    font-size: 28px;
    margin: 0 0 10px;
    color: #fff;
}

.card-overlay p {
    font-size: 16px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.shop-link {
    display: inline-block;
    background: #fff;
    color: #333333;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
}

.shop-link:hover,
.grid-card:hover .shop-link,
.image-box-link:hover .shop-link,
.product-card:hover .shop-link {
    background-color: var(--btn-hover-color);
    color: #fff;
}

/* --- 产品类别 --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.main-title {
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #1d1d1f;
}

/* 箭头样式 */
.swiper-arrow {
    display: flex;
    gap: 10px;
}



.swiper-arrow-prev,
.swiper-arrow-next {
    width: 48px;
    height: 48px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.06);
}

.swiper-arrow-prev svg,
.swiper-arrow-next svg {
    width: 24px;
    fill: #1d1d1f;
}

.swiper-arrow-prev:hover,
.swiper-arrow-next:hover {
    border: 1px solid #cfcdcd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* 移动端适配 */
@media (max-width: 768px) {

    .swiper-arrow {
        transform: scale(0.85);
    }
}

.category-card {
    background-color: #f5f5f7;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.img-box {
    width: 100%;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.img-box img {
    max-width: 95%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.card-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
    opacity: 0.8;
    margin: 0;
    transition: color 0.3s ease;
}

.category-card:hover {
    background-color: #efefef;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.category-card:hover .img-box img {
    transform: scale(1.1);
}

.category-card:hover .card-text {
    color: var(--txt-hover-color);
}


/* ==========================================================================
   5. 首頁客戶評價
   ========================================================================== */
/* 卡片样式 */
.card-inner {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 15px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    cursor: pointer;
    height: 450px;
    overflow: hidden;
    transform: translateY(-8px);
}

.card-inner:hover,
.card-inner.active {
    background: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: #333333;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-name {
    font-weight: 700;
    font-size: 15px;
    color: #333;
}

.rating-stars {
    color: #f77234;
    font-size: 16px;
    margin-bottom: 12px;
}

.review-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #1d1d1f;
}

.review-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 70px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* 底部产品*/
.linked-product {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f9fa !important;
    border-left: 3px solid var(--accent-red);
    transition: background 0.3s ease;
    padding: 15px;
    border-radius: 10px;
}

.lp-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 4px;
}

.lp-name {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}



/* ==========================================================================
   5. 售后支持 & 推广 (Support Section)
   ========================================================================== */
.full-section {
    background-color: #f5f5f7;
    width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.content-container {
    display: flex;
    width: 100%;
    height: 600px;
    gap: 20px;
}

.header-top-left {
    position: absolute;
    top: 40px;
    left: 40px;
    color: white;
    z-index: 2;
}

.header-top-left h2 {
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.1;
}

.footer-bottom-left {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.image-box-link {
    text-decoration: none;
    display: block;
    flex: 3;
    overflow: hidden;
    border-radius: 10px;
}

.image-box {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #333;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.25, 1);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.25, 1);
}

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

.image-overlay-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
}

.image-box-link:hover .image-overlay-hover {
    background: rgba(0, 0, 0, 0.1);
}

.text-cards-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    flex: 1;
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: 0.5s;
}

.info-card:hover {
    border-color: #D7D0D0;
    transform: translateY(-10px);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-label {
    font-weight: 800;
    font-size: 13px;
    color: #333;
    letter-spacing: 0.5px;
}

.card-icon {
    font-size: 26px;
}

.card-msg {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #1d1d1f;
    margin: 0;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 桌面端一行四个*/
    gap: 20px;
    width: 100%;
    margin: 50px auto;
}

.stats-card {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* 柔和阴影 */
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-5px);
    /* 悬停微动效果 */
}

.stats-number {
    font-size: 48px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 10px;
    display: inline-block;
}

/* 加上 + 号或 M+ 后缀 */
.stats-number::after {
    content: '+';
}

.stats-label {
    font-size: 16px;
    color: #86868b;
    font-weight: 500;
}

/* 响应式适配：平板端一行两个，手机端一行*/
@media (max-width: 992px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-msg {
        font-size: 16px;
    }

    .header-top-left {
        top: 30px;
        left: 10px;
    }

    .header-top-left h2 {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .stats-container {
        grid-template-columns: 1fr;
    }

    .stats-number {
        font-size: 36px;
    }
}

/* ==========================================================================
   6. 博客/新闻版块 (Blog/News)
   ========================================================================== */
.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.all-blogs-link {
    display: inline-flex;
    align-items: center;
    color: var(--secondary-color);
    gap: 5px;
}

.all-blogs-link .icon-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    color: var(--accent-red);
}

.all-blogs-link:hover .icon-arrow {
    transform: translate(2px, -2px);
}

@media (max-width: 768px) {
    .featured-header {
        /* 将布局方向从水平改为垂直 */
        flex-direction: column;
        /* 改为从左对齐（如果不设置，默认会居中显示，取决于你的需求） */
        align-items: flex-start;
        /* 增加元素之间的垂直间距 */
        gap: 10px;
    }

}

/* 容器基础样式 */
.zg-grid.cols-3 {
    align-items: start;
}

/* 基础卡片 */
.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: #333;
}

/* --- 大图样式 (左侧) --- */
.large-item .news-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 20px;
}

.large-item .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.large-item .news-title {
    font-size: 16px;
    line-height: 1.2;
    margin-top: 15px;
}

/* 右侧小图容器 */
.news-sidebar {
    grid-column: span 1;
    /* 占据剩下的 1 列 */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* 这里控制右侧三个小项之间的【上下间距】 */
}

/* 小图卡片布局 */
.small-item .news-card {
    display: flex;
    flex-direction: row;
    /* 横向排列图片和文字 */
    gap: 20px;
    align-items: flex-start;
}

.small-item .news-image {
    flex: 2;
    /* 占用 2 份比例 */
    aspect-ratio: 3 / 2;
    /* 保持统一的图片比例，防止高矮不一 */
    overflow: hidden;
    border-radius: 5px;
}

.small-item .news-content {
    flex: 3;
    /* 占用 3 份比例 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 让文字在垂直方向上居中对齐图片 */
    align-self: center;
}

.small-item .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-item:hover .news-image img {
    transform: scale(1.1);
}

.small-item .news-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    /* 限制标题行数，防止撑开间距 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 公用元数据 (分类和日期) --- */
.news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.news-category {
    background: var(--accent-red);
    color: #fff;
    padding: 2px 8px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
}

.news-date {
    color: #888;
}


/* 响应式：平板和手机端 */
@media screen and (max-width: 1023px) {
    .news-sidebar {
        grid-column: span 2;
        /* 在 2 列布局时占满整行 */
        margin-top: 20px;
    }

    .small-item .news-card {
        flex-direction: column;
    }

    .small-item .news-image,
    .small-item .news-content {
        flex: none;
        width: 100%;
    }
}



.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.blog-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
    display: block;
}

.blog-image {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

.blog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 15px 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.85));
    transition: transform 0.3s ease;
}

.blog-title {
    color: white;
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.2em;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-line-clamp 0.4s;
}




/* ==========================================================================
   8. 首頁產品
   ========================================================================== */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-tabs {
    display: flex;
    gap: 5px;
    background: #f1f1f2;
    padding: 5px;
    border-radius: 30px;
}

.tab-btn {
    border: none;
    background: transparent;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    transition: 0.3s;
}

.tab-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 内容区域 */
.tab-content {
    display: none;
}

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

/* 卡片样式自适应 */
.product-card .pro-card-inner {
    background: #f5f5f7;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-shadow: 0 15px 15px rgba(255, 255, 255, 0.3);
    transform: translateY(2px);

}

/* 右上角标*/
.product-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}

.tag-red {
    background: var(--accent-red);
}

/* 红色 HOT */
.tag-blue {
    background: #0031ff;
}

/* 绿色 NEW */

.card-img {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-img img {
    width: 100%;
    /* 强制图片适配容器宽度 */
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.5s ease;
}

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

.product-title {
    font-size: 18px;
    font-weight: 700;
    height: 44px;
    overflow: hidden;
    margin-bottom: 10px;
}

.product-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
    height: 2.8em;
    /* 固定两行高度：1.4 * 2 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.product-card .shop-link {
    align-self: flex-start;
    /* 关键：使其不撑满，靠左*/
}

/* 底部按钮：*/
.bottom-controls {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.swiper-button-disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* 移动端适配 */
@media (max-width: 991px) {
    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   7. 页脚 (Footer)
   ========================================================================== */
.zonngoo-footer-outer {
    background-color: #464646;
    width: 100%;
    color: #fff;
    padding: 80px 0 40px 0;
    line-height: 1.6;
}

.footer-content {
    max-width: var(--container-min);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
    ;
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 60px;
}

.footer-col h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--txt-white-color);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: var(--secondary-color);
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--txt-white-color);
}

.contact-details p,
.contact-item {
    color: var(--secondary-color);
    font-size: 16px;
    margin-bottom: 10px;
}

.contact-item {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item a {
    color: var(--secondary-color);
}

.contact-icon {
    width: 16px;
    height: 16px;
    color: var(--secondary-color);
}

.text-wrapper {
    display: flex;
    flex-direction: column;
    /* 纵向排列 */
    gap: 4px;
    /* 两行之间的间距 */
}

.social-links {
    display: flex;
    gap: 15px;
    margin: 25px 0;
}

.social-item {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.social-item svg {
    width: 18px;
    height: 18px;
}

.social-item:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-3px);
}

.footer-legal-bar {
    padding-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.legal-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.copyright {
    font-size: 16px;
    color: var(--secondary-color);
    margin: 0;
}

.legal-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.legal-links a {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: 0.6;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: var(--txt-white-color);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        /* 强制改为单列 */
        gap: 0 !important;
        padding-bottom: 20px !important;
    }

    .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* 添加分割线 */
    }

    .footer-col h3 {
        -webkit-tap-highlight-color: transparent;
        outline: none;
        background: transparent !important;
        margin-bottom: 0 !important;
        padding: 20px 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px !important;
        /* 移动端字号稍微调小一点更精致 */
    }

    .footer-col h3:active,
    .footer-col h3:focus {
        background: transparent !important;
        color: inherit;
        /* 保持原色，不随点击变色 */
    }

    /* 生成右侧的 + 号图标 */
    .footer-col h3::after {
        content: '+';
        font-size: 22px;
        font-weight: 300;
        transition: transform 0.3s ease;
        color: var(--secondary-color);
    }

    /* 激活状态：+ 号变为 - 号并旋转 */
    .footer-col.active h3::after {
        content: '\2212';
        /* 减号的 Unicode */
        transform: rotate(180deg);
    }

    /* 默认隐藏下方的列表内容 */
    .footer-col ul,
    .footer-col .contact-details,
    .footer-col .social-links {
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        margin: 0 !important;
    }

    /* 激活状态：展开内容 */
    .footer-col.active ul,
    .footer-col.active .contact-details,
    .footer-col.active .social-links {
        max-height: 800px;
        /* 足够容纳内容的高度 */
        opacity: 1;
        padding-bottom: 20px;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   8. 联系我们
   ========================================================================== */

.contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.contact-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #0031ff;
}

.contact-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #222;
}

.contact-card a {
    color: #050505;
    text-decoration: none;
    margin-bottom: 5px;
}

.service-tag {
    display: inline-block;
    margin-top: 15px;
    padding: 4px 12px;
    background: #f5f5f7;
    border-radius: 20px;
    font-size: 12px;
    color: #888;
}

/* ==========================================================================
   8. 响应式适配 (Responsive)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .stats-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .header-right-wrapper {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .feature-grid,
    .blog-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 移动端双列 */
        gap: 30px;
    }

    .zonngoo-style-section {
        margin: 35px auto;
        padding: 0 20px;
    }
}

@media screen and (max-width: 900px) {
    .promo-section {
        height: auto;
        padding: 40px 20px;
    }

    .content-container {
        flex-direction: column;
        height: auto;
    }

    .image-box {
        height: 350px;
        flex: none;
    }

    .info-card {
        height: 200px;
        flex: none;
    }

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

@media screen and (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        /* 小手机单列 */
    }
}

@media screen and (max-width: 600px) {

    .grid-card {
        aspect-ratio: 1500 / 1190 !important;
        height: auto;
    }

    .card-overlay {
        padding: 30px 20px;
    }

    .card-overlay h3 {
        font-size: 22px;
    }

    .header-right-wrapper {
        flex-wrap: wrap;
    }

    .stat-item {
        width: 45%;
    }

    .banner-inner-content {
        transform: translate(0, 0);
        text-align: center;
    }

    .blog-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .zonngoo-footer-outer {
        padding: 50px 0 30px 0;
    }

    .footer-legal-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   9. 特殊功能类 (Helpers)
   ========================================================================== */
.cusbtn {
    background-color: #000;
    color: #fff;
}

/* ==========================================================================
    新闻详情页+support
   ========================================================================== */

/* 顶部英雄区 */
.article-hero {
    background-color: #000;
    /* 深色背景 */
    color: #fff;
    padding: 60px 0 80px;
    text-align: left;
}

.article-support {
    background-color: #fff;
    color: #000;
    padding: 10px 0;
}

.article-hero .container,
.article-support .container {
    margin: 0 auto;
    padding: 0 20px;
}

.article-hero .container {
    width: 1100px;
}

.breadcrumb {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #ccc;
    text-decoration: none;
}

.article-title {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
    max-width: 900px;
}

.support-title {
    text-align: center;
    font-size: 48px;
    /* 增大字号 */
    font-weight: 700;
    /* 加粗，增强视觉重心 */
    line-height: 1.2;
    margin-bottom: 20px;
    /* 与下方内容拉开距离 */
    color: #000;
    letter-spacing: -0.02em;
    /* 稍微收紧字间距，更有质感 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .support-title {
        font-size: 28px;
        padding: 0 15px;
    }
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 16px;
}

/* 下方内容区 */
.article-container {
    background: #fff;
    padding: 40px 0;
}

.article-container .container {
    max-width: 900px;
    /* 正文区通常窄一点，方便阅读 */
    margin: 0 auto;
    padding: 0 20px;
}

/* 分类小导航 */
.article-sub-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sub-nav-brand {
    font-size: 20px;
    font-weight: bold;
}

.sub-nav-links a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

/* 正文图片响应式 */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.entry-content p {
    line-height: 1.8;
    font-size: 18px;
    color: #444;
    margin-bottom: 25px;
}

/* 响应式适配：手机端 */
@media (max-width: 768px) {
    .article-title {
        font-size: 28px;
    }

    .article-hero,
    .article-support {
        padding: 40px 0;
    }

    .article-sub-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sub-nav-links {
        display: none;
        /* 手机端内容页通常隐藏分类导航以精简页面 */
    }
}

.article-share {
    display: flex;
    gap: 12px;
}

.article-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #555;
    /* 灰色边框 */
    border-radius: 50%;
    /* 圆形 */
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

/* 核心：设置 SVG 图标本身的颜色和大小 */
.article-share svg {
    width: 16px;
    /* 图标在圆圈内的大小 */
    height: 16px;
    fill: #ccc;
    /* 核心修改：设置图标颜色为浅灰色，在黑底上清晰可见 */
    transition: fill 0.3s ease;
}

/* 悬停效果：圆圈变白，图标变白 */
.article-share a:hover {
    border-color: #fff;
    /* 圆圈边框变纯白 */
    background: rgba(255, 255, 255, 0.1);
    /* 添加微弱的白色背景凸显 */
}

.article-share a:hover svg {
    fill: #fff;
    /* 图标颜色变纯白 */
}

/* ==========================================================================
    contact recall
   ========================================================================== */

.contact-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #F1F2F3;
    font-weight: 600;
    padding: 16px;
}

.contact-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px;
    border-bottom: 1px solid #eee;
}

/* 移动端响应式适配 (小于 992px) */
@media (max-width: 992px) {
    .contact-header {
        display: none;
    }

    /* 隐藏表头 */
    .contact-row {
        grid-template-columns: 1fr 2fr;
        /* 改为两列布局 */
        gap: 12px;
    }

    .desktop-only {
        display: none;
    }

    .col-info {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #86868c;
    }

    .col-country {
        font-size: 14px;
        font-weight: 600;
    }
}

/* ==========================================================================
    Power for Every Moment
   ========================================================================== */
/* --- 基础容器：PC端保持原有风格 (这部分不需要改，只作保留参考) --- */
.zonngoo-main-banner-swiper {
    height: 880px;
    width: 100%;
}

.banner-item {
    position: relative;
    /* 确保文字绝对定位相对于此 */
    width: 100%;
    height: 100%;
}

.banner-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* 遮罩层：PC端左侧渐变 */
.banner-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
}

/* 文字和按钮通用样式 (PC) */
.banner-content {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
    max-width: 600px;
}

.banner-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.1;
}

.banner-subtitle {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.9;
}

.shop-link {
    display: inline-block;
    padding: 12px 35px;
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

/* --- 【关键】响应式调整：移动端 (屏幕小于 768px) --- */
@media (max-width: 768px) {

    /* 1. 【最关键】让容器高度根据宽度自动调整比例 */
    /* 这里的比例取决于你的图片。
       如果是 16:9，设置比例为 56.25vw (9 / 16 * 100)。
       如果是 4:3，设置比例为 75vw (3 / 4 * 100)。
       以下是通用的中间方案（约 16:10） */
    .zonngoo-main-banner-swiper {
        height: 60vw;
        /* 动态高度，屏幕越窄，高度越低 */
        min-height: 350px;
        /* 给一个最小保底高度，防止文字没空间 */
        max-height: 500px;
        /* 给一个最大保底高度 */
    }

    /* 图片区域和图片本身：必须占满这个动态高度容器 */
    .banner-img-wrap,
    .banner-img-wrap img {
        height: 100%;
    }

    /* 图片裁剪方式：依然用 cover，但现在不会上下留白了 */
    .banner-img-wrap img {
        object-fit: cover;
    }

    /* 2. 遮罩层：针对全屏文字统一加深，防止移动端背景图杂乱 */
    .banner-img-wrap::after {
        background: rgba(0, 0, 0, 0.45);
    }

    /* 3. 文字定位调整 */
    .banner-content {
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
        text-align: center;
        /* 文字相对于动态图片区域垂直居中 */
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
    }

    /* 4. 再次缩小字号和按钮尺寸 */
    .banner-title {
        font-size: 28px;
        /* 从 32px 降到 28px，确保更整洁 */
        margin-bottom: 8px;
        color: #fff !important;
        /* 确保文字是白色的 */
    }

    .banner-subtitle {
        font-size: 15px;
        /* 从 16px 降到 15px */
        margin-bottom: 20px;
        /* 减小间距 */
    }

    .shop-link {
        padding: 10px 25px;
        /* 缩小按钮 */
        font-size: 14px;
    }
}

/* --- 分页器样式 (保持原样) --- */
.banner-pagination-container {
    padding: 15px 0;
    background: #fff;
    display: flex;
    justify-content: center;
}

.home-every-swiper .swiper-pagination {
    position: static !important;
    width: auto !important;
}

.home-every-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    margin: 0 5px !important;
}

.home-every-swiper .swiper-pagination-bullet-active {
    width: 25px;
    background: #333;
    border-radius: 4px;
}

/* ==========================================================================
    home video
   ========================================================================== */

/* 容器基础设置 */
.hero-video-wrapper {
    position: relative;
    width: 100%;
    height: 85vh;
    /* 占屏幕高度的80% */
    min-height: 450px;
    overflow: hidden;
    background-color: #000;
    /* 视频未加载时的底色 */
}

/* 视频全屏铺满技巧 */
.res-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* 核心：保持比例裁剪铺满 */
}

.hero-heading {
    font-family: 'Archivo Black', sans-serif;
    ;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    /* 稍微紧凑，更有张力 */
    text-transform: uppercase;
    margin-bottom: 40px;
}

/* 黑色半透明遮罩，为了让文字更清晰 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 30%透明度的黑色 */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

/* 内容层 */
.logo-display {
    margin: 20px 0;
}

.logo-img {
    max-width: 380px;
    width: 100%;
    height: auto;
    /* 增加微妙投影，让透明 LOGO 在渐变背景上更立体 */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.06));
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.02);
}

/* 初始状态：透明且向上偏移 */
.fade-in-delay {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* 激活状态：回到原位并显示 */
.fade-in-delay.show {
    opacity: 1;
    transform: translateY(0);
}


/* 响应式调整：手机端缩减字体 */
@media (max-width: 768px) {
    .hero-video-wrapper {
        height: 60vh;
    }
}

/* ==========================================================================
    cookie box
   ========================================================================== */
/* 悬浮小盒子样式 */
.cookie-box {
    position: fixed;
    bottom: 24px;
    right: 24px; /* 放在右下角更符合现代习惯，也可以改 left: 50% + transform */
    width: 360px; /* 限制宽度，形成小盒子感 */
    background: #ffffff;
    
    /* 核心：浮边框效果 */
    border: 1px solid rgba(0, 0, 0, 0.08); 
    border-radius: 14px;
    padding: 16px 20px;
    
    /* 核心：高阶阴影 (Apple Style) */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    
    z-index: 10000;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* 激活显示 */
.cookie-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-container {
    display: flex;
    flex-direction: column; /* 垂直排列更有“盒子”感 */
    gap: 12px;
}

.cookie-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #424245; /* 次要文字色 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cookie-text a {
    color: #0071e3; /* Apple Blue */
    text-decoration: none;
    font-weight: 500;
}

.cookie-text a:hover {
    text-decoration: underline;
}

.cookie-btns {
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    padding: 6px 18px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.btn-primary:hover {
    background: #000000;
}

.btn-primary:active {
    transform: scale(0.96); /* 点击时的微交互 */
}

/* 移动端适配：居中显示 */
@media (max-width: 480px) {
    .cookie-box {
        left: 15px;
        right: 15px;
        width: auto;
        bottom: 15px;
    }
    .btn-primary {
        width: 100%; 
        text-align: center;
        padding: 10px; 
    }
}