/* responsive.css - Brutalist Industrial Responsive */

@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hero-visual {
        display: none;
    }

    .hero-text {
        max-width: 100%;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    /* Header Mobile */
    .store-header {
        position: fixed;
    }

    .header-main {
        padding: 0 var(--space-4);
        height: 64px;
    }

    .header-nav {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--space-4);
        gap: var(--space-2);
        z-index: 999;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }

    .header-nav.mobile-open {
        display: flex;
    }

    .nav-item {
        width: 100%;
        padding: var(--space-3) var(--space-4);
    }

    .header-search {
        display: none;
    }

    .header-actions .admin-btn span {
        display: none;
    }

    /* Hero Mobile */
    .hero-section {
        padding: var(--space-12) 0;
    }

    .hero-content {
        padding: 0 var(--space-4);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .stat-number {
        font-size: 1.75rem;
    }

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

    .btn-hero {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* Features Mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feature-card {
        display: flex;
        flex-direction: row;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .feature-icon {
        flex-shrink: 0;
    }

    .feature-content {
        flex: 1;
    }

    /* Categories Mobile */
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    /* Products Mobile */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .filter-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
    }

    /* CTA Mobile */
    .cta-section {
        padding: var(--space-12) 0;
    }

    .cta-title {
        font-size: 1.75rem;
    }

    .cta-subtitle {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-cta {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    /* Main Content Offset */
    .store-main {
        padding-top: 64px;
    }

    /* Section Mobile */
    .section {
        padding: var(--space-12) 0;
    }

    .section-container {
        padding: 0 var(--space-4);
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-eyebrow {
        font-size: 0.7rem;
    }

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

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .footer-social {
        justify-content: center;
    }
}

/* Dropdown Mobile Styles */
.dropdown-wrapper {
    position: relative;
}

.dropdown-trigger {
    cursor: pointer;
}

.dropdown-trigger i {
    margin-left: var(--space-1);
    transition: transform var(--transition-fast);
}

.dropdown-wrapper.open .dropdown-trigger i {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    padding-left: var(--space-6);
    margin-top: var(--space-2);
}

.dropdown-wrapper.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--slate-100);
}

/* Cart Drawer Mobile */
@media (max-width: 768px) {
    .cart-drawer {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .products-header {
        flex-direction: column;
        align-items: flex-start;
    }
}