/* =======================================================
   H5 移动端适配（最小侵入：仅覆盖，不改原样式）
   ======================================================= */

/* ---------- 平板 / 小笔记本 ---------- */
@media (max-width: 1024px) {
    .container-1200 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    .banner-area {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1200 / 370;
        margin: 15px auto !important;
        border-radius: 8px !important;
    }

    .search-container { width: 100% !important; max-width: 560px; }
}

/* ---------- 手机竖屏 ---------- */
@media (max-width: 768px) {

    html, body { overflow-x: hidden; }
    body { padding-top: 0 !important; }

    /* ---- 头部：fixed 吸顶，不随滚动 ---- */
    .sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1500 !important;
    }

    .header-top { height: auto !important; }

    .header-top .container-1200 {
        position: static !important;
        height: auto !important;
        line-height: normal !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0;
        box-sizing: border-box;
    }

    .logo {
        position: static !important;
        height: auto !important;
        line-height: normal !important;
        font-size: 17px !important;
        justify-content: flex-start !important;
        padding: 4px 0;
        order: 1;
    }
    .logo img { height: 40px !important; margin-right: 8px !important; display: block !important; }
    .logo .logo-text { display: inline; font-size: 15px !important; }

    /* H5 查看价格按钮：与我要下单同字号 */
    .pc-btn-price {
        font-size: 12px !important;
        padding: 5px 0 !important;
        border-radius: 20px !important;
    }

    /* 导航：H5 端整体隐藏 */
    .main-nav { display: none !important; }

    /* ---- 搜索区 ---- */
    .header-bottom { padding: 8px 0 10px !important; }

    .search-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 12px;
    }

    .search-wrapper { height: 38px !important; }
    .search-tab { padding: 0 10px !important; line-height: 36px !important; font-size: 12px !important; }
    .search-input { font-size: 13px !important; padding: 0 8px !important; min-width: 0; }
    .search-btn { padding: 0 16px !important; font-size: 13px !important; flex-shrink: 0; }

    .search-tags {
        font-size: 11px; margin-top: 6px !important;
        white-space: nowrap; overflow-x: auto; padding-left: 0 !important;
    }
    .search-tags a { margin-right: 10px !important; }

    /* ---- Banner：与主体同宽 ---- */
    .banner-area {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        height: auto !important;
        aspect-ratio: 1200 / 370;
        margin: 10px auto !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        font-size: 14px !important;
        box-sizing: border-box;
    }
    .banner-dots { bottom: 8px !important; gap: 6px !important; }
    .banner-dot { width: 7px !important; height: 7px !important; }

    /* ---- 悬浮菜单：H5 点击弹出 ---- */
    .left-float-menu {
        right: 10px !important;
        left: auto !important;
        z-index: 1400 !important;
    }
    .float-item.active .popup-qr,
    .float-item.active .popup-map {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) scale(1) !important;
    }
    .float-item.active { background-color: #187fc4; }
    .float-item.active .float-link { color: #fff; }
    .popup-qr {
        left: auto !important;
        right: 78px !important;
        width: 160px !important;
    }
    .popup-qr img { max-width: 100%; }
    .popup-map {
        left: auto !important;
        right: 78px !important;
        width: calc(100vw - 100px) !important;
        max-width: 320px !important;
    }
    .popup-map iframe, .popup-map img { height: 240px !important; }

    /* ---- Category 分类页：与首页 pc-card 完全一致 ---- */
    .cat-sticky-head { top: var(--cat-sticky-top, 150px) !important; padding: 4px 0 8px !important; margin-bottom: 8px !important; background: var(--bg-color); }
    .cat-sticky-head h2 { font-size: 16px !important; }
    .product-thumb { height: auto !important; aspect-ratio: 1 / 1; }
    .product-info { padding: 8px !important; }
    .product-title { margin-bottom: 8px !important; gap: 4px !important; }
    .product-title .t { font-size: 12px !important; line-height: 1.4 !important; }
    .product-title .d { display: none !important; }
    .product-links { gap: 6px !important; }
    .p-link {
        font-size: 11px !important;
        padding: 5px 0 !important;
        border-radius: 14px !important;
    }
    .p-link i { font-size: 12px !important; }
    .ribbon {
        top: 4px !important;
        left: -18px !important;
        padding: 0 22px !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }
    .product-card { border-radius: 10px !important; }
    .container-1200.mt-4 { margin-top: 10px !important; }
    #category-product-container { margin-left: -4px !important; margin-right: -4px !important; }
    #category-product-container > [class*="col-"] { padding-left: 4px !important; padding-right: 4px !important; }
    #category-product-container > [class*="col-"] { margin-bottom: 8px !important; }
    .stopped-toggle {
        top: auto !important;
        left: auto !important;
        right: 10px !important;
        bottom: 176px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 14px !important;
        z-index: 901 !important;
    }
    .stopped-panel {
        top: auto !important;
        bottom: 210px !important;
        left: auto !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: 300px !important;
        max-height: 55vh !important;
        border-radius: 10px !important;
    }

    /* ---- 楼层标题 ---- */
    .floor-section h2 {
        font-size: 21px !important;
        padding-bottom: 8px !important;
        margin-top: 24px !important;
    }
    .floor-section h2 span { font-size: 13px !important; }

    .main-content { padding-top: 8px !important; }

    /* 吸顶头部高度占位：banner 从头部底部再留 10px */
    .main-content { margin-top: 108px !important; }

    /* ---- 商品卡片 ---- */
    .floor-product-container { margin-left: -6px !important; margin-right: -6px !important; }

    .pc-img-wrap { height: auto !important; aspect-ratio: 1 / 1; }

    .pc-body { padding: 8px !important; }
    .pc-title { font-size: 12px !important; margin-bottom: 8px !important; }
    .pc-actions { gap: 6px !important; }
    .pc-btn {
        font-size: 11px !important;
        padding: 5px 0 !important;
        border-radius: 14px !important;
        gap: 3px !important;
    }
    .pc-btn span { display: inline !important; }
    .pc-btn i { font-size: 12px !important; }

    /* ---- 角标：随卡片等比缩小 ---- */
    .p-badge-corner {
        top: 4px !important;
        left: -18px !important;
        padding: 0 22px !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
    }
    .p-badge-price {
        width: 100% !important;
        max-width: 100% !important;
        height: 28px !important;
        border-radius: 0 4px 4px 0 !important;
    }
    .p-badge-new { width: 44px !important; height: 28px !important; }
    .p-badge-new span { font-size: 12px !important; }
    .p-badge-line { height: 28px !important; }
    .p-badge-price-val { height: 28px !important; }
    .p-badge-price-val span { font-size: 12px !important; padding: 0 6px; }

    /* ---- 悬浮菜单：移到右下 ---- */
    .left-float-menu {
        left: auto !important;
        right: 10px !important;
        top: auto !important;
        bottom: 76px !important;
        transform: none !important;
        gap: 6px !important;
        z-index: 900;
    }

    .float-item {
        width: 44px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    }

    .float-item .float-link {
        padding: 7px 2px !important;
    }
    .float-item .float-link span { display: none !important; }
    .float-item .float-link i { font-size: 17px !important; margin-bottom: 0 !important; }

    .popup-qr { width: 128px !important; }
    .popup-map {
        width: calc(100vw - 20px) !important;
        left: auto !important;
        right: 0 !important;
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .popup-map img { height: auto !important; }

    /* ---- 页脚 ---- */
    .footer-area { padding: 24px 0 !important; margin-top: 30px !important; }

    .footer-area .container-1200 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 14px;
        box-sizing: border-box;
    }
    .footer-qrcode { width: 84px !important; height: 84px !important; }
    .footer-info {
        text-align: center !important;
        line-height: 1.9 !important;
        font-size: 12px !important;
    }
    .footer-info a { margin: 0 4px !important; }

    /* ---- H5 价格浮层 ---- */
    .h5-price-modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 20px;
    }
    .h5-price-modal.active { display: flex; }

    .h5-price-dialog {
        width: 100%;
        max-width: 340px;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .h5-price-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        background: #187fc4;
    }

    .h5-price-close {
        font-size: 20px;
        line-height: 1;
        color: #fff;
        text-decoration: none;
        padding: 0 4px;
    }

    .h5-price-body {
        padding: 16px;
        font-size: 14px;
        line-height: 1.8;
        color: #333;
        white-space: pre-wrap;
        word-break: break-all;
        overflow-y: auto;
    }

    .h5-price-num {
        color: #e60012 !important;
        font-weight: bold;
    }

    .h5-price-val {
        color: #e60012;
        font-weight: bold;
    }
}

/* ---------- 小屏手机 ---------- */
@media (max-width: 480px) {
    .search-tab { display: none !important; }
    .pc-btn { font-size: 10px !important; }
    .pc-btn span { display: inline !important; }

    .floor-section h2 { font-size: 19px !important; }
    .floor-section h2 span { font-size: 12px !important; }

    .p-badge-price-val span { font-size: 11px !important; }

    .left-float-menu { bottom: 66px !important; right: 8px !important; }
    .float-item { width: 40px !important; }

    .footer-info { font-size: 11px !important; }
}