/* 移动端适配样式 */

/* 超高分辨率屏幕优化（2K/2.5K/4K 安卓设备） */
@media (min-width: 412px) and (max-width: 768px) {
    /* 推荐卡片自适应宽度 - 利用高分辨率优势 */
    section.w-full.flex.items-center.gap-\[50px\].overflow-x-auto > div.flex-shrink-0 {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 180px !important;
        max-width: 200px !important;
    }
    
    /* 商品网格间距优化 - 更大间距 */
    section.container.mx-auto.px-6.py-12.grid.grid-cols-4 {
        gap: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 视频质量优化 - 保持清晰度 */
    section.w-full.h-\[750px\] video,
    section.w-full.h-\[750px\] img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
    
    /* 字体渲染优化 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 超大屏幕手机优化（如三星 Note 系列、华为 Mate 系列等） */
@media (min-width: 450px) and (max-width: 768px) {
    /* 推荐卡片宽度进一步增加 */
    section.w-full.flex.items-center.gap-\[50px\].overflow-x-auto > div.flex-shrink-0 {
        min-width: 200px !important;
        max-width: 220px !important;
    }
    
    /* 商品网格间距更宽松 */
    section.container.mx-auto.px-6.py-12.grid.grid-cols-4 {
        gap: 1.25rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    /* 视频高度适当增加 */
    section.w-full.h-\[750px\] {
        height: 55vh !important;
        min-height: 450px !important;
    }
}

/* 首页视频区域优化 - 针对所有手机 */
@media (max-width: 768px) {
    /* 视频高度调整 */
    section.w-full.h-\[750px\] {
        height: 50vh !important;
        min-height: 400px;
    }
    
    /* 推荐系列卡片横向滚动 - 针对父容器 */
    section.w-full.flex.items-center.gap-\[50px\].overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-left: 20px !important;
        padding-right: 20px !important;
        flex-wrap: nowrap !important; /* 禁止换行 */
        display: flex !important; /* 强制 flex 布局 */
    }
    
    /* 推荐卡片保持合理宽度，不被挤压 - 针对直接子元素 */
    section.w-full.flex.items-center.gap-\[50px\].overflow-x-auto > div.flex-shrink-0 {
        flex: 0 0 auto !important; /* 自动宽度 */
        width: auto !important;
        min-width: 160px !important;
        max-width: 180px !important;
    }
    
    /* 商品网格改为 2 列 - 仅在移动端生效 */
    section.container.mx-auto.px-6.py-12.grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* 规格展示优化 */
    section.w-full.bg-white.py-\[50px\] img {
        height: auto !important;
    }
    
    /* 特性图标调整 */
    .flex.items-center.gap-\[15px\].w-1\/3 {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 小屏幕手机优化（< 640px） */
@media (max-width: 640px) {
    /* 视频高度进一步调整 */
    section.w-full.h-\[750px\] {
        height: 45vh !important;
        min-height: 350px;
    }
    
    /* 推荐卡片宽度调整 */
    section.w-full.flex.items-center.gap-\[50px\].overflow-x-auto > div.flex-shrink-0 {
        min-width: 140px !important;
        max-width: 160px !important;
    }
    
    /* 字体缩小 */
    .text-2xl {
        font-size: 1.125rem !important;
    }
    
    /* 内边距减小 */
    .px-\[60px\] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* 通用容器优化 */
@media (max-width: 768px) {
    /* 容器内边距优化 */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 标题字体缩小 */
    h1 {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem;
    }
    
    h2 {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem;
    }
    
    h3 {
        font-size: 1.125rem; /* 18px */
        line-height: 1.75rem;
    }
    
    /* 表格优化 - 横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
    
    /* 卡片间距优化 */
    .card-mobile {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* 按钮优化 */
    .btn-mobile {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    /* 网格布局优化 */
    .grid-mobile-1 {
        grid-template-columns: 1fr;
    }
    
    .grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 图片优化 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 表单优化 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px; /* 防止 iOS 自动缩放 */
        width: 100%;
    }
    
    /* 筛选按钮优化 */
    .filter-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    
    .filter-buttons button {
        flex-shrink: 0;
    }
    
    /* 列表项优化 */
    .list-item-mobile {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    /* 价格字体优化 */
    .price-text {
        font-size: 1.125rem;
    }
    
    /* 底部导航优化 */
    .footer-mobile {
        padding: 2rem 1rem;
    }
}

/* 小屏幕手机优化（< 640px） */
@media (max-width: 640px) {
    /* 更小的内边距 */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* 字体进一步缩小 */
    h1 {
        font-size: 1.25rem;
    }
    
    h2 {
        font-size: 1.125rem;
    }
    
    /* 卡片优化 */
    .card-mobile-sm {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    /* 按钮更小 */
    .btn-mobile-sm {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-menu-panel {
        max-height: 80vh;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增大点击区域 */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 移除 hover 效果 */
    .hover\\:bg-gray-100:hover {
        background-color: transparent;
    }
    
    /* 使用 active 状态 */
    button:active, a:active {
        opacity: 0.7;
    }
}

/* 安全区域适配（iPhone X+） */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .sticky {
        top: max(env(safe-area-inset-top), 0px);
    }
}

/* 加载动画优化 */
.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast 提示优化 */
.toast-mobile {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    max-width: calc(100% - 2rem);
}

/* 模态框优化 */
.modal-mobile {
    padding: 1rem;
}

.modal-content-mobile {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}