/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet Styles */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-md) !important;
    }
    
    .hero-title {
        font-size: 3rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.5rem !important;
    }
    
    .hero-commitment {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }
    
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-lg) !important;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-lg) !important;
    }
    
    .footer-widgets-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }
    
    .footer-brand {
        max-width: none !important;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-sm) !important;
    }
    
    .site-header {
        padding: 30px 0 !important;
    }
    
    .site-title {
        font-size: 2.8rem !important;
    }
    
    .site-description {
        font-size: 1.1rem !important;
    }
    
    .main-navigation ul {
        flex-direction: column !important;
        gap: var(--space-sm) !important;
        padding: var(--space-lg) !important;
        max-width: 400px !important;
        margin: 20px auto 0 auto !important;
    }
    
    .main-navigation a {
        padding: var(--space-md) !important;
        font-size: 1.1rem !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.3rem !important;
    }
    
    .hero-description {
        font-size: 1.1rem !important;
    }
    
    .hero-content {
        padding: var(--space-xl) var(--space-lg) !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-md) !important;
    }
    
    .cta-button,
    .cta-button-secondary {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
    }
    
    .certifications-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    .section-title {
        font-size: 2.5rem !important;
    }
    
    .section-subtitle {
        font-size: 1.1rem !important;
    }
    
    .footer-widgets-content {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .site-info-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-lg) !important;
    }
    
    .woocommerce ul.products li.product .button {
        font-size: 0.9rem !important;
        padding: var(--space-sm) var(--space-md) !important;
    }
    
    .woocommerce-products-header h1 {
        font-size: 2rem !important;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .site-title {
        font-size: 2.2rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .hero-content {
        padding: var(--space-lg) var(--space-md) !important;
    }
    
    .certifications-content,
    .categories-content {
        padding: var(--space-lg) var(--space-md) !important;
    }
    
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    .woocommerce ul.products li.product .button {
        font-size: 0.85rem !important;
        padding: var(--space-sm) var(--space-md) !important;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.1rem !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 1.2rem !important;
    }
}