//**
 * GreenTech E-Commerce - Responsive Styles
 */

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
    :root {
        --container-padding: 20px;
    }
    
    /* Header */
    .search-box {
        max-width: 300px;
    }
    
    .header-link span,
    .dropdown-toggle span {
        display: none;
    }
    
    /* Grid */
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --container-padding: 16px;
        --space-16: 48px;
        --space-10: 32px;
        --space-8: 24px;
    }
    
    /* Header */
    .header-wrapper {
        height: 60px;
    }
    
    .search-box {
        display: none;
    }
    
    .header-actions {
        gap: var(--space-1);
    }
    
    .header-link:not(.icon-only),
    .dropdown {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Typography */
    .section-title {
        font-size: 22px;
    }
    
    /* Grid */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    /* Buttons */
    .btn-lg {
        padding: var(--space-3) var(--space-6);
    }
    
    /* Forms */
    .form-control {
        height: 44px;
    }
    
    /* Pagination */
    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ============================================
   SMALL MOBILE (< 480px)
   ============================================ */
@media (max-width: 479px) {
    /* Grid */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Section Header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    /* Card */
    .card-body {
        padding: var(--space-3);
    }
    
    /* Price */
    .price-current {
        font-size: 16px;
    }
    
    .price-old {
        font-size: 13px;
    }
}

/* ============================================
   LARGE SCREENS (> 1536px)
   ============================================ */
@media (min-width: 1536px) {
    :root {
        --container-max: 1600px;
    }
}