/*!
 * Haomai Power — Responsive Styles
 * Version: 1.0.0
 */

/* ==========================================================================
   Tablet: ≤ 1024px
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --header-height: 64px;
    }

    /* Header */
    .main-navigation { display: none; }
    .menu-toggle { display: flex; }

    /* Mega menu grid collapsed */
    .mega-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Product showcase */
    .product-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Product grids */
    .product-grid-cols-3,
    .product-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page layouts */
    .page-layout.with-sidebar {
        flex-direction: column;
    }

    .page-layout.with-sidebar .products-sidebar {
        width: 100%;
        order: -1;
    }

    .page-layout .page-sidebar {
        width: 100%;
    }

    .about-layout {
        flex-direction: column;
    }

    .about-sidebar { width: 100%; }
    .about-nav { display: flex; flex-wrap: wrap; }
    .about-nav li { border-bottom: none; border-right: 1px solid var(--color-gray-100); }

    /* Product main layout */
    .product-main {
        grid-template-columns: 1fr;
    }

    /* Contact layout */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* News archive */
    .news-archive-inner {
        flex-direction: column;
    }

    .news-archive-image { width: 100%; height: 200px; }

    .news-item-image { width: 200px; }

    .features-list {
        grid-template-columns: 1fr;
    }

    /* Stats bar */
    .stats-bar {
        gap: var(--spacing-2xl);
    }

    .stat-number { font-size: var(--font-size-4xl); }
}

/* ==========================================================================
   Mobile: ≤ 768px
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --spacing-4xl: 3rem;
        --spacing-3xl: 2.5rem;
        --spacing-2xl: 1.5rem;
        --font-size-5xl: 2.2rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.6rem;
        --font-size-2xl: 1.3rem;
    }

    /* Top bar */
    .top-bar { display: none; }

    /* Hero slider */
    .hero-slide-content {
        padding: var(--spacing-xl) 0 var(--spacing-md);
    }

    .hero-slide-title { font-size: var(--font-size-xl); }
    .hero-slide-desc { font-size: var(--font-size-sm); }

    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next { display: none; }

    /* Product showcase */
    .product-showcase-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stats bar */
    .stats-bar {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: var(--spacing-lg); }
    .stat-item:last-child { border-bottom: none; padding-bottom: 0; }

    /* Service cards */
    .service-cards-row {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* News */
    .news-item-inner {
        flex-direction: column;
    }

    .news-item-image {
        width: 100%;
        height: 200px;
    }

    .news-item-image img { height: 200px; }

    .news-item-first .news-item-inner {
        padding: var(--spacing-lg) 0;
    }

    .news-item-title { font-size: var(--font-size-base); }

    /* Product grids */
    .product-grid-cols-3,
    .product-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid { gap: var(--spacing-md); }

    /* Tabs */
    .product-tabs-nav {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1 1 50%;
        text-align: center;
        font-size: var(--font-size-xs);
        padding: 10px;
    }

    /* Specs table */
    .specs-table th { width: 45%; }

    /* Contact form */
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        gap: var(--spacing-xl);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-col { text-align: center; }
    .footer-social { justify-content: center; }
    .footer-qr img { margin-left: auto; margin-right: auto; }

    /* Footer bottom */
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Page layout */
    .page-layout {
        flex-direction: column;
        padding: var(--spacing-xl) 0;
    }

    .page-layout .page-sidebar { width: 100%; }

    /* Single product */
    .product-cta { flex-direction: column; }

    .product-cta .btn { width: 100%; justify-content: center; }

    /* 404 page */
    .error-404-code { font-size: 80px; }

    .suggested-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .error-404-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Comments */
    .comment-list .children {
        margin-left: var(--spacing-md);
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    /* Post navigation */
    .post-nav-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* About nav */
    .about-nav { flex-direction: column; }
    .about-nav li { border-right: none; border-bottom: 1px solid var(--color-gray-100); }

    /* Search overlay */
    .search-overlay .search-field { font-size: var(--font-size-base); padding: 12px 16px; }
    .search-overlay .search-submit { padding: 12px 18px; font-size: var(--font-size-sm); }

    /* Archive header */
    .archive-toolbar { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
}

/* ==========================================================================
   Small Mobile: ≤ 480px
   ========================================================================== */

@media (max-width: 480px) {
    /* Product grids */
    .product-grid-cols-3,
    .product-grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Mega menu */
    .mega-menu-grid {
        grid-template-columns: 1fr;
    }

    /* Search result */
    .search-result-item {
        flex-direction: column;
    }

    .search-result-thumb {
        width: 100%;
        height: 150px;
    }

    /* Tabs */
    .tab-btn {
        flex: 1 1 100%;
    }

    /* Tab content */
    .tab-content {
        padding: var(--spacing-md);
    }

    /* Specs table */
    .specs-table th { width: 100%; display: block; border-right: none; padding-bottom: 2px; }
    .specs-table td { display: block; padding-top: 2px; }
    .specs-table tr { display: block; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-gray-200); }
    .specs-table tr:last-child { border-bottom: none; }

    /* Product header */
    .product-title { font-size: var(--font-size-2xl); }

    /* 404 */
    .suggested-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Large Desktop: ≥ 1400px
   ========================================================================== */

@media (min-width: 1400px) {
    :root {
        --container-max: 1300px;
    }
}