/* ============================================================
   Mobile Homepage 响应式
   Source: main.css lines 6250-6395
   ============================================================ */

/* ============================================================
   Mobile Homepage — UIPro 375px design
   ============================================================ */
@media (max-width: 767px) {

    /* ── Mobile hero ──────────────────────────────────────── */
    .hero-v2 {
        min-height: 100svh;
        background-image: url('../images/Head@3x.png');
        background-size: cover;
        background-position: center top;
        padding-top: var(--navbar-h);
    }
    .hero-v2__bg-img { display: none; }
    .hero-v2__row {
        flex-direction: column;
        gap: 24px;
        padding: 40px 20px 0;
    }
    .hero-v2__content { max-width: 100%; }
    .hero-v2__title { font-size: clamp(28px, 8vw, 40px); line-height: 1.2; }
    .hero-v2__desc  { font-size: 15px; }
    .hero-v2__actions { flex-direction: column; gap: 12px; }
    .hero-v2__actions .hero-btn { width: 100%; justify-content: center; }
    .hero-v2__image { display: none; }  /* hero image hidden — background handles it on mobile */
    .hero-v2__price-badge {
        position: static;
        display: inline-flex;
        margin-top: 16px;
        border-radius: 12px;
        padding: 12px 20px;
    }
    .hero-v2__stats {
        position: static;
        margin-top: 32px;
        border-radius: 12px 12px 0 0;
        padding: 16px;
    }
    .hero-v2__stats-inner {
        flex-wrap: wrap;
        gap: 12px 0;
    }
    .hero-v2__stat { flex: 0 0 50%; border-right: none; }
    .hero-v2__stat-divider { display: none; }
    .hero-v2__stat-number { font-size: 22px; }
    .hero-v2__brands { position: static; }
    .hero-v2__brands-inner { flex-wrap: wrap; gap: 12px; padding: 12px 20px; }
    .hero-v2__brands-logos { flex-wrap: wrap; gap: 12px; }
    .brand-logo-img { height: 10px !important; }

    /* ── Mobile categories ────────────────────────────────── */
    .categories-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .categories-grid::-webkit-scrollbar { display: none; }
    .category-card {
        flex: 0 0 160px;
        min-width: 160px;
        padding: 20px 16px;
    }
    .category-card__icon svg { width: 48px; height: 48px; }

    /* ── Mobile hot-selling ───────────────────────────────── */
    .hot-selling-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hot-selling-right { width: 100%; }
    .hot-selling-top-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .hot-selling-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .deal-card { min-height: 320px; }
    .deal-card__top-bar { padding: 12px 14px; }
    .deal-card__top-bar-title { font-size: 12px; }
    .compact-card-v { flex-direction: row; align-items: stretch; }
    .compact-card-v__img-wrap { width: 100px; flex-shrink: 0; }
    .compact-card-h { flex-direction: column; }
    .compact-card-h__img-wrap { height: 120px; width: 100%; }

    /* Trust stats: 2-col grid on mobile */
    .trust-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .trust-stat { padding: 16px; }
    .trust-stat__value { font-size: 22px; }

    /* ── Mobile stories ───────────────────────────────────── */
    .stories-grid { grid-template-columns: 1fr; }
    .story-card { min-height: 260px; }

    /* ── Mobile industries ────────────────────────────────── */
    .industries-grid { grid-template-columns: 1fr; gap: 12px; }
    .industry-card-col { gap: 12px; }
    .industry-card--tall { min-height: 200px; }
    .industries-section__title { font-size: 28px; }

    /* ── Mobile about ─────────────────────────────────────── */
    .about-layout { flex-direction: column; gap: 32px; }
    .about-images { min-height: 240px; }
    .about-images__col-left,
    .about-images__col-right { flex: 1; }
    .about-features { grid-template-columns: 1fr; gap: 16px; }
    .about-content__title { font-size: 26px; }
    .about-content__actions { flex-direction: column; gap: 12px; }
    .about-content__actions .btn { width: 100%; justify-content: center; }

    /* ── Mobile timeline ──────────────────────────────────── */
    .timeline-track { flex-direction: column; gap: 20px; }
    .timeline-connector { display: none; }
    .timeline-item { padding-top: 0; padding-left: 28px; }
    .timeline-item__dot { top: 4px; left: 0; }
    .timeline-item__year { font-size: 20px; }

    /* ── Mobile evidence cards ────────────────────────────── */
    .evidence-cards { grid-template-columns: 1fr; gap: 12px; }
    .evidence-card { min-height: 240px; }

    /* ── Mobile testimonials ──────────────────────────────── */
    .testimonials-grid { grid-template-columns: 1fr; }

    /* ── Mobile blog ──────────────────────────────────────── */
    .blog-grid { grid-template-columns: 1fr; }

    /* ── Mobile CTA ───────────────────────────────────────── */
    .cta-v2__inner { padding: 48px 20px; text-align: center; }
    .cta-v2__title { font-size: 28px; }
    .cta-v2__actions { flex-direction: column; gap: 12px; align-items: stretch; }
    .cta-v2__actions .btn { width: 100%; justify-content: center; }

    /* ── Mobile section typography ────────────────────────── */
    .section__title { font-size: 26px; }
    .section-header { flex-direction: column; gap: 16px; align-items: flex-start; }
    .section { padding: 52px 0; }
}