/* ================================================
   PetMarty Mobile Responsive Optimization
   适用所有客户面向页面 - 加载在其他CSS/内联样式之后
   ================================================ */

/* ============ 通用：≤768px 平板/大手机 ============ */
@media (max-width: 768px) {
    /* 容器缩小内边距 */
    .container {
        padding: 0 12px !important;
    }

    /* === Header 紧凑化 === */
    .header-content {
        padding: 8px 0 !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* Logo 大幅缩小 */
    .logo {
        font-size: 18px !important;
        gap: 6px !important;
    }
    .logo-img {
        height: 44px !important;
        max-width: 140px !important;
    }
    .logo i {
        font-size: 22px !important;
    }

    /* Header右侧元素紧凑 */
    .header-right {
        gap: 6px !important;
        flex-shrink: 0;
    }

    /* 登录按钮缩小 */
    .login-btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
        border-radius: 16px !important;
    }
    .login-btn i {
        font-size: 12px !important;
    }
    .login-btn span {
        display: none; /* 手机只显示图标 */
    }

    /* 购物车图标缩小 */
    .cart-nav-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    /* 用户头像缩小 */
    .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .user-name {
        font-size: 12px !important;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-email {
        display: none !important;
    }
    .logout-btn {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    /* 语言切换器缩小 */
    .lang-switcher-inline {
        padding: 2px !important;
        gap: 2px !important;
    }
    .lang-switcher-inline .lang-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* 分享按钮容器隐藏（手机节省空间） */
    #shareButtonContainer {
        display: none !important;
    }

    /* === 导航栏：横向滚动 === */
    .main-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .main-nav::-webkit-scrollbar { display: none; }
    .nav-list {
        gap: 4px !important;
        padding: 6px 0 !important;
        flex-wrap: nowrap !important;
        width: max-content;
        min-width: 100%;
    }
    .nav-list a {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* === Banner/Hero === */
    .b2b-banner-content,
    .banner-slide.active {
        flex-direction: column !important;
        text-align: center !important;
    }
    .b2b-banner-text h1,
    .banner-content h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    .b2b-banner-text p {
        font-size: 14px !important;
        max-width: 100% !important;
    }
    .b2b-banner-image,
    .banner-image {
        display: none !important;
    }

    /* === 产品网格 === */
    .product-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* 产品卡片紧凑化 */
    .product-card {
        border-radius: 10px !important;
    }
    .product-card-image {
        aspect-ratio: 1 / 1 !important;
    }
    .product-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* === 特色网格 === */
    .features-grid,
    .geo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* === 表单 === */
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important; /* iOS 防止缩放 */
        padding: 10px 12px !important;
    }

    /* === Footer === */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 30px 0 !important;
    }
    .footer-brand {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* === 聊天窗口全屏化 === */
    .chat-widget {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 100px) !important;
        max-width: 400px !important;
        right: 8px !important;
        bottom: 80px !important;
        border-radius: 12px !important;
    }
    .chat-float-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 16px !important;
    }
    .chat-float-btn i {
        font-size: 22px !important;
    }

    /* === 按钮：增大触控目标 === */
    .btn,
    .btn-primary,
    .btn-secondary {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }

    /* === 通用标题缩小 === */
    .section-title,
    h2 {
        font-size: 18px !important;
    }

    /* === SEO 内容区 === */
    .seo-content {
        padding: 25px 0 !important;
    }
    .seo-content-inner h2 {
        font-size: 16px !important;
    }
    .seo-content-inner p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* === GEO 区域 === */
    .geo-content-section {
        padding: 30px 0 !important;
    }
    .geo-header h2 {
        font-size: 20px !important;
    }
    .geo-faq-grid {
        grid-template-columns: 1fr !important;
    }

    /* === 购物车 / 订单表格 === */
    .cart-table,
    .order-table,
    table.data-table {
        font-size: 13px !important;
    }

    /* === 搜索框 === */
    .search-box {
        order: 3 !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
    }
    .search-box input {
        width: 100% !important;
    }
}

/* ============ ≤480px 小手机 ============ */
@media (max-width: 480px) {
    /* 容器进一步缩小 */
    .container {
        padding: 0 10px !important;
    }

    /* Logo 更小 */
    .logo-img {
        height: 36px !important;
        max-width: 120px !important;
    }
    .logo {
        font-size: 16px !important;
    }

    /* Header 间距最小化 */
    .header-content {
        padding: 6px 0 !important;
    }
    .header-right {
        gap: 4px !important;
    }
    .cart-nav-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .user-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    /* Banner 标题更小 */
    .b2b-banner-text h1,
    .banner-content h1 {
        font-size: 18px !important;
    }

    /* 产品卡片间距 */
    .product-grid,
    .products-grid {
        gap: 8px !important;
    }

    /* 特色区单列 */
    .features-grid,
    .geo-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer 保持 2×2 网格，不竖排 */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
        text-align: left !important;
    }
    .footer-section h4 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .footer-section li {
        margin-bottom: 6px !important;
    }
    .footer-section a {
        font-size: 12.5px !important;
    }

    /* 表单标签 */
    .form-group label {
        font-size: 13px !important;
    }

    /* 聊天按钮位置调整 */
    .chat-float-btn {
        bottom: 15px !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
    }

    /* 购物车 Toast 位置 */
    .cart-login-toast {
        right: 10px !important;
        left: 10px !important;
        top: 60px !important;
        text-align: center;
    }

    /* 按钮全宽 */
    .btn-primary,
    .btn-checkout,
    .checkout-btn {
        width: 100% !important;
    }

    /* 分页按钮 */
    .page-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* ============ ≤360px 超小屏(旧iPhone SE等) ============ */
@media (max-width: 360px) {
    .container {
        padding: 0 8px !important;
    }
    .logo-img {
        height: 32px !important;
    }
    .header-right {
        gap: 3px !important;
    }
    .nav-list a {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
}

/* ============ 通用触控优化 ============ */
@media (hover: none) and (pointer: coarse) {
    /* 移动设备：禁用hover效果防止"粘滞" */
    .product-card:hover,
    .geo-card:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    }
    .btn:hover,
    .btn-primary:hover {
        transform: none !important;
    }
    .cart-nav-icon:hover {
        background: #f5f5f5 !important;
        color: #333 !important;
    }
}

/* ============ 横屏适配 ============ */
@media (max-width: 768px) and (orientation: landscape) {
    .chat-widget {
        height: 80vh !important;
    }
}


/* ============ Product Info Row (Ships/MOQ) ============ */
@media (max-width: 768px) {
    .product-info {
        gap: 4px 8px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .product-info-item {
        gap: 3px !important;
    }
    .product-info-item i {
        font-size: 10px !important;
    }
    .product-info-divider {
        display: none !important;
    }
}
@media (max-width: 480px) {
    .product-info {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 6px !important;
        font-size: 10.5px !important;
    }
    .product-info-divider {
        width: 80% !important;
        height: 1px !important;
        display: block !important;
    }
}