/* 首页手机端横向滑动控制 */

/* 手机端禁用整个页面的横向滑动 */
@media (max-width: 768px) {
    /* 禁用body和html的横向滑动 */
    html, body {
        overflow-x: hidden !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        /* 防止横向滚动 */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }
    
    /* 禁用所有容器的横向滑动 */
    .container,
    .zongkuang,
    .kuanwei,
    .kuanwei1,
    .kuanwei2,
    .indexbox,
    .hdt-ratio,
    .chanxinbox {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        /* 防止内容溢出 */
        box-sizing: border-box !important;
    }
    
    /* 确保所有内容都在容器内 */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 禁用图片和视频的横向溢出 */
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* 禁用表格的横向滚动 */
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
}

/* 允许特定板块的滑动功能 */
@media (max-width: 768px) {
    /* 轮播图板块 - 允许滑动 */
    .swiper-container.lunbo {
        overflow: visible !important;
        overflow-x: visible !important;
        /* 确保轮播图可以正常滑动 */
        touch-action: pan-x !important;
    }
    
    /* 产品展示板块 - 允许滑动 */
    .swiper-container.chanhua,
    .swiper-container.chanhua1,
    .swiper-container.chanhua2 {
        overflow: visible !important;
        overflow-x: visible !important;
        /* 允许水平滑动 */
        touch-action: pan-x !important;
        /* 确保滑动区域可见 */
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 横幅图片板块 - 允许滑动 */
    .swiper-container.huapin,
    .swiper-container.huapin1 {
        overflow: visible !important;
        overflow-x: visible !important;
        touch-action: pan-x !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 其他滑动板块 - 允许滑动 */
    .swiper-container.fkui,
    .swiper-container.nbke {
        overflow: visible !important;
        overflow-x: visible !important;
        touch-action: pan-x !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 确保滑动内容不会影响页面布局 */
    .swiper-wrapper {
        /* 允许内容溢出，但限制在滑动容器内 */
        overflow: visible !important;
        /* 确保滑动元素正确定位 */
        position: relative !important;
    }
    
    .swiper-slide {
        /* 滑动元素可以超出容器 */
        overflow: visible !important;
        /* 确保滑动元素正确定位 */
        position: relative !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    /* 进一步限制横向滑动 */
    html, body {
        overflow-x: hidden !important;
        /* 防止触摸设备的横向滑动 */
        touch-action: pan-y !important;
        /* 禁用横向滚动 */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: none !important;
    }
    
    /* 确保所有内容都在屏幕内 */
    .container,
    .zongkuang,
    .kuanwei,
    .kuanwei1,
    .kuanwei2,
    .indexbox {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
    }
    
    /* 滑动板块在超小屏幕上的特殊处理 */
    .swiper-container {
        /* 确保滑动区域不会超出屏幕 */
        max-width: 100% !important;
        width: 100% !important;
        /* 允许必要的滑动 */
        overflow-x: visible !important;
        touch-action: pan-x !important;
    }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 平板端也禁用不必要的横向滑动 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* 允许滑动板块正常功能 */
    .swiper-container {
        overflow: visible !important;
        overflow-x: visible !important;
        touch-action: pan-x !important;
    }
}

/* 防止触摸设备的意外滑动 */
@media (max-width: 768px) {
    /* 禁用body的触摸滑动 */
    body {
        /* 只允许垂直滑动 */
        touch-action: pan-y !important;
        /* 禁用横向滑动 */
        touch-action: pan-x none !important;
        /* 防止横向滚动 */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }
    
    /* 滑动板块允许触摸滑动 */
    .swiper-container {
        /* 允许水平触摸滑动 */
        touch-action: pan-x !important;
        /* 确保触摸事件正常工作 */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}

/* 修复可能的布局问题 */
@media (max-width: 768px) {
    /* 确保所有内容都在视口内 */
    .kuanwei,
    .kuanwei1,
    .kuanwei2,
    .indexbox {
        /* 防止内容溢出 */
        overflow: hidden !important;
        /* 确保宽度正确 */
        width: 100% !important;
        max-width: 100% !important;
        /* 修复可能的定位问题 */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* 修复可能的负边距问题 */
    .kuanwei,
    .kuanwei1,
    .kuanwei2,
    .indexbox,
    .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* 确保滑动板块正常工作 */
    .swiper-container {
        /* 重置可能的overflow设置 */
        overflow: visible !important;
        overflow-x: visible !important;
        /* 确保滑动功能正常 */
        position: relative !important;
        z-index: 10 !important;
    }
}

/* 特殊处理：确保重要内容可见 */
@media (max-width: 768px) {
    /* 标题和描述文字 */
    .titzong,
    .titdesc,
    .widget-title {
        /* 确保文字不被截断 */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        /* 防止横向溢出 */
        max-width: 100% !important;
        width: auto !important;
    }
    
    /* 产品展示区域 */
    .productbox,
    .kitem {
        /* 确保产品正常显示 */
        max-width: 100% !important;
        width: 100% !important;
        /* 防止内容溢出 */
        overflow: hidden !important;
    }
}

/* 调试样式 - 开发时使用 */
/* 取消注释以下代码来查看滑动区域 */
/*
@media (max-width: 768px) {
    .swiper-container {
        border: 2px solid red !important;
    }
    
    .swiper-container.lunbo {
        border: 2px solid blue !important;
    }
    
    .swiper-container.chanhua {
        border: 2px solid green !important;
    }
}
*/