/* ========================================
   sundraw - Responsive Styles
   ======================================== */

/* Tablet: 1024px */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .factory-grid { grid-template-columns: repeat(2, 1fr); }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
}

/* Mobile Large: 768px */
@media (max-width: 768px) {
    :root { --header-height: 60px; }

    /* Header & Navigation */
    .menu-toggle { display: block; }
    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-primary);
        flex-direction: column;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        height: auto;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .main-nav a::after { display: none; }
    .header-cta { display: none; }

    /* Hero */
    .hero { padding: 60px 0; }
    .hero h1 { font-size: 28px; }
    .hero-subtitle { font-size: 15px; }
    .hero-trust { flex-direction: column; align-items: center; gap: 10px; }

    /* Stats Bar */
    .stats-bar { grid-template-columns: repeat(2, 1fr); margin-top: -25px; }
    .stat-item { padding: 18px 12px; }
    .stat-item h3 { font-size: 26px; }

    /* Sections */
    .section { padding: 45px 0; }
    .section h2 { font-size: 24px; margin-bottom: 30px; }

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

    /* About */
    .about-features { grid-template-columns: 1fr; }

    /* Factory */
    .factory-grid { grid-template-columns: 1fr; }

    /* Certificates */
    .cert-grid { grid-template-columns: repeat(2, 1fr); }

    /* FAQ */
    .faq-question { font-size: 14px; padding: 15px; }
    .faq-answer p { padding: 0 15px 15px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form-card { padding: 25px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col { margin-bottom: 20px; }

    /* Page Header */
    .page-header { padding: 35px 0; }
    .page-header h1 { font-size: 26px; }

    /* Product Detail */
    .product-features { grid-template-columns: 1fr; }
    .product-thumbnails { grid-template-columns: repeat(4, 1fr); }

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

/* Mobile Small: 480px */
@media (max-width: 480px) {
    .hero h1 { font-size: 24px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .stat-item h3 { font-size: 22px; }
    .product-card-footer { flex-direction: column; }
    .cert-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
    /* Blog layout */
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-card-featured { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    /* Process steps */
    .process-steps { grid-template-columns: 1fr 1fr; }
    .process-step::after { display: none; }
    /* Factory */
    .factory-intro .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-featured { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; }
    .cert-grid { grid-template-columns: 1fr; }
}