/**
 * mobile-fix-v10.css
 * 终极修复 v10 — 配合 Blade 模板 Logo 内联样式修复
 * 部署时间：2026-05-06 04:10
 * 
 * 根因：Logo img 内联 style 有 max-width:none!important 导致图片无限宽
 *       已在 Blade 模板中修改为 max-width:100%!important
 * 
 * 本 CSS 负责移动端布局强制覆盖
 */

/* ============================================
   0. 隐藏移动端导航，显示桌面端
   ============================================ */
.st-header.visible-xs-block {
    display: none !important;
}

.st-navbrand.hidden-xs,
.st-navmenu.hidden-xs,
.st-navtop.hidden-xs {
    display: block !important;
    visibility: visible !important;
}

/* ============================================
   1. 导航栏品牌区 - 3列精确布局
   ============================================ */
@media (max-width: 767px) {

    /* 容器撑满屏幕 */
    .st-navbrand .container {
        max-width: 100vw !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    /* Row 强制 flex 不换行 */
    .st-navbrand .row {
        display: flex !important;
        display: -webkit-flex !important;
        flex-wrap: nowrap !important;
        -webkit-flex-wrap: nowrap !important;
        align-items: center !important;
        -webkit-align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 空列（第1个 col-sm-2）彻底隐藏 */
    .st-navbrand .col-sm-2:first-of-type {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Logo 列 */
    .st-navbrand .col-sm-3 {
        float: none !important;
        flex: 0 0 70px !important;
        -webkit-flex: 0 0 70px !important;
        max-width: 70px !important;
        width: 70px !important;
        padding: 0 4px 0 0 !important;
    }

    /* Logo 图片 - 配合模板修改后的 max-width:100% */
    .st-navbrand-logo img {
        max-height: 40px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* 搜索框列 - 占剩余空间 */
    .st-navbrand .col-sm-5 {
        float: none !important;
        flex: 1 1 0% !important;
        -webkit-flex: 1 1 0% !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 4px !important;
        min-width: 0 !important;
    }

    /* 搜索框 */
    .st-navbrand-search {
        display: flex !important;
        display: -webkit-flex !important;
        height: 34px !important;
    }

    .st-navbrand-search .form-control {
        height: 34px !important;
        font-size: 16px !important;
        padding: 4px 8px !important;
        min-width: 0 !important;
    }

    .st-navbrand-search .input-group-addon {
        width: 36px !important;
        height: 34px !important;
        min-width: 36px !important;
    }

    /* 购物车列 */
    .st-navbrand .col-sm-2:last-of-type {
        float: none !important;
        flex: 0 0 auto !important;
        -webkit-flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 0 0 4px !important;
        white-space: nowrap !important;
    }

    /* 购物车内容 */
    .st-navbrand-cart {
        font-size: 12px !important;
        line-height: 34px !important;
    }

    .st-navbrand-cart a {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .st-cartnum.badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }

    /* ============================================
       2. 顶部栏 - 紧凑
       ============================================ */
    .st-navtop {
        font-size: 11px !important;
        padding: 3px 0 !important;
    }

    .st-navtop .container {
        max-width: 100vw !important;
        padding: 0 10px !important;
    }

    .st-navtop a {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }

    /* ============================================
       3. 分类导航栏 - 紧凑横向滚动
       ============================================ */
    .st-navmenu .container {
        max-width: 100vw !important;
        padding: 0 8px !important;
    }

    .st-navmenu {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .st-navmenu::-webkit-scrollbar {
        display: none !important;
    }

    .st-navmenu .nav-pills,
    .st-navmenu .navbar-nav {
        display: inline-flex !important;
        display: -webkit-inline-flex !important;
        flex-wrap: nowrap !important;
        -webkit-flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: max-content !important;
    }

    .st-navmenu .nav > li,
    .st-navmenu .nav-pills > li {
        display: inline-block !important;
        float: none !important;
        white-space: nowrap !important;
    }

    .st-navmenu .nav > li > a,
    .st-navmenu .nav-pills > li > a {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    /* ============================================
       4. 轮播图
       ============================================ */
    .st-banner .carousel-inner {
        max-height: 280px !important;
        height: 35vw !important;
        min-height: 160px !important;
        overflow: hidden !important;
    }

    .st-banner .carousel-inner > .item > img,
    .st-banner .carousel-inner > .item > a > img {
        width: 100% !important;
        height: 100% !important;
        max-height: 280px !important;
        object-fit: cover !important;
        -webkit-object-fit: cover !important;
    }

    /* ============================================
       5. 产品网格 2列 + 1:1图片
       ============================================ */
    .col-xs-6 {
        width: 50% !important;
        padding: 4px !important;
    }

    .product-thumb .image a img,
    .product-grid .product-thumb .image img {
        aspect-ratio: 1 / 1 !important;
        -webkit-aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        -webkit-object-fit: cover !important;
        width: 100% !important;
    }

    .product-thumb .caption h4 {
        font-size: 12px !important;
    }

    .product-thumb .price {
        font-size: 12px !important;
    }

    /* ============================================
       6. iOS Safari 修复
       ============================================ */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    * {
        -webkit-tap-highlight-color: transparent !important;
    }

    body {
        -webkit-overflow-scrolling: touch !important;
    }

    .st-navbrand,
    .st-navmenu {
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
    }

    /* ============================================
       7. 触摸优化
       ============================================ */
    button, .btn, [role="button"] {
        min-height: 44px !important;
    }
}