/**
 * PLKC 移动端导航优化 - 横向滚动版本
 * 简单直接：导航栏可以左右滑动
 */

/* ========================================
   手机端（<= 767px）
   ======================================== */
@media (max-width: 767px) {
    /* 顶部栏优化 */
    .topbar {
        padding: 10px 12px !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 8px !important;
    }
    
    /* LOGO 缩小 */
    .logo {
        font-size: 16px !important;
        letter-spacing: 2px !important;
    }
    
    /* 用户区域 */
    .user-actions {
        gap: 6px !important;
        font-size: 11px !important;
    }
    
    .cart-link {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .user-link {
        padding: 4px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    
    /* 导航栏 - 横向滚动 */
    .nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* iOS 平滑滚动 */
    }
    
    /* 隐藏滚动条但保持滚动功能 */
    .nav::-webkit-scrollbar {
        display: none;
    }
    
    .nav {
        -ms-overflow-style: none;  /* IE和Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    .nav-inner {
        padding: 10px 12px !important;
        gap: 16px !important;
        min-width: min-content !important;
    }
    
    .nav-list {
        gap: 16px !important;
        white-space: nowrap !important;
    }
    
    .nav-item {
        font-size: 12px !important;
        letter-spacing: 0 !important;
        padding: 6px 0 !important;
        white-space: nowrap !important;
    }
    
    /* 隐藏英文，只显示中文 */
    .nav-item {
        font-size: 13px !important;
    }
    
    /* 二级导航 */
    .sub-nav {
        padding: 10px 12px !important;
        gap: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .sub-nav::-webkit-scrollbar {
        display: none;
    }
    
    .sub-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 内容区域 - 减少留白 */
    .content {
        padding: 12px 8px !important;
    }
    
    /* 网格布局 */
    .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    /* 奇数品牌优化：最后一个居中显示 */
    .grid > .brand-card:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        max-width: 50% !important;
        margin: 0 auto !important;
    }
    
    /* 品牌卡片 */
    .brand-card {
        border-radius: 6px !important;
    }
    
    .brand-name {
        font-size: 12px !important;
    }
    
    .brand-tag {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
    
    /* 页脚 */
    .footer {
        padding: 20px 12px !important;
    }
    
    .footer-inner {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* ========================================
   小手机（<= 375px）- 进一步优化
   ======================================== */
@media (max-width: 375px) {
    .logo {
        font-size: 14px !important;
        letter-spacing: 1px !important;
    }
    
    .nav-item {
        font-size: 12px !important;
    }
    
    .content {
        padding: 10px 6px !important;
    }
    
    .grid {
        gap: 6px !important;
    }
}

/* ========================================
   平板端（768px - 1024px）
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .topbar {
        padding: 16px 24px !important;
    }
    
    .logo {
        font-size: 20px !important;
    }
    
    .nav-inner {
        padding: 12px 24px !important;
        gap: 18px !important;
    }
    
    .nav-item {
        font-size: 12px !important;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    
    .content {
        padding: 20px 16px !important;
    }
}

/* ========================================
   大屏优化（>= 1921px）
   ======================================== */
@media (min-width: 1921px) {
    .topbar {
        max-width: 1600px !important;
        padding: 24px 48px !important;
    }
    
    .logo {
        font-size: 28px !important;
    }
    
    .nav-inner {
        max-width: 1600px !important;
        padding: 16px 48px !important;
    }
    
    .nav-item {
        font-size: 15px !important;
    }
    
    .grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ========================================
   通用优化
   ======================================== */

/* 触摸设备增大点击区域 */
@media (hover: none) and (pointer: coarse) {
    .nav-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* 图片优化 */
img {
    max-width: 100%;
    height: auto;
}

/* 防止文字选中 */
.nav-item,
.logo,
.user-link {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* 移动端导航栏保持相对定位 */
@media (max-width: 767px) {
    .nav {
        position: relative;
    }
}