/* Responsive */

@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 140px;
    }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { max-width: 420px; margin: 0 auto; }
    .brand-story { grid-template-columns: 1fr; gap: 40px; }
    .product-detail { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }
    .about-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
    :root { --header-h: 64px; }
    .header-inner { padding: 0 20px; }
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        background: var(--bg);
        padding: 30px 20px;
        transform: translateY(-120%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .main-nav.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .mobile-menu-toggle { display: flex; }
    .section-inner, .page-hero { padding-left: 20px; padding-right: 20px; }
    .section { padding: 60px 0; }
    .footer-inner { padding: 0 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .products-toolbar { flex-direction: column; align-items: flex-start; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { border-right: 1px solid var(--border); }
    .values-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .product-name { font-size: 0.95rem; }
    .hero-title { font-size: 2.5rem; }
    .btn { padding: 14px 24px; font-size: 0.7rem; }
    .values-grid { grid-template-columns: 1fr; }
}