/* ─────────────────────────────────────── */
/* RESPONSIVE STYLES - MOOLE Website      */
/* ─────────────────────────────────────── */

@media (max-width: 1100px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card:first-child {
        grid-row: span 1;
    }

    .about-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .about-tag-big {
        font-size: 100px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    /* Navbar adjustments */
    .navbar {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Section adjustments */
    section {
        padding: 70px 20px;
    }

    .hero {
        padding: 80px 20px 50px;
        justify-content: flex-start;
    }

    .hero-slider {
        position: relative;
        width: 100%;
        height: 50vh;
        margin-bottom: 24px;
        border-radius: 12px;
    }

    .hero-title {
        font-size: clamp(56px, 18vw, 100px);
        margin-top: 0;
        margin-bottom: 16px;
    }

    .hero-desc {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        font-size: 16px;
    }

    .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .hero-number {
        font-size: 200px;
    }

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

    /* Categories grid */
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .cat-card:first-child {
        min-height: 300px;
    }

    /* Brand strip */
    .brand-strip {
        flex-wrap: wrap;
        gap: 30px;
        padding: 60px 20px;
        justify-content: center;
    }

    .brand-divider {
        display: none;
    }

    /* Stores grid */
    .stores-grid {
        grid-template-columns: 1fr;
    }

    /* Reviews grid */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter */
    .newsletter-section {
        padding: 70px 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .about-badge {
        right: 10px;
    }

    /* Lookbook on mobile */
    .lookbook-header {
        padding: 0 20px;
    }

    .lookbook-scroll {
        padding: 0 20px;
    }

    /* Reviews reveal on mobile*/
    .review-card.reveal {
        animation-delay: 0.08s;
    }

    /* Collections grid */
    .collections-grid {
        grid-template-columns: 1fr;
    }

    /* Influencers grid */
    .influencers-grid {
        grid-template-columns: 1fr;
    }

    /* Sustainability */
    .sustainability-content {
        grid-template-columns: 1fr;
    }

    /* FAQ grid */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-content {
        grid-template-columns: 1fr;
    }

    .size-table {
        font-size: 12px;
    }

    .size-table th,
    .size-table td {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    /* Hero title */
    .hero-title {
        font-size: clamp(48px, 20vw, 80px);
    }

    /* Products on small screens */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-card:first-child {
        grid-row: span 1;
    }

    /* Lookbook on small screens */
    .lookbook-item {
        width: 280px;
    }

    .lookbook-img {
        height: 360px;
    }

    /* Hero scroll text */
    .hero-scroll {
        bottom: 20px;
    }

    /* Section padding */
    section {
        padding: 50px 16px;
    }

    .hero {
        padding: 0 16px 40px;
    }

    /* Hero actions stack */
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* Newsletter form */
    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-input,
    .newsletter-btn {
        width: 100%;
    }

    /* Footer adjustments */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer {
        padding: 60px 16px 32px;
    }

    .footer-logo {
        font-size: 32px;
    }

    /* Brand strip */
    .brand-strip {
        padding: 40px 16px;
    }

    .stat-num {
        font-size: 48px;
    }

    .manifesto-text {
        font-size: clamp(18px, 3vw, 28px);
    }

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

    .about-image-box {
        min-height: 300px;
        font-size: 80px;
    }

    .about-badge {
        padding: 16px 20px;
        font-size: 11px;
        bottom: 20px;
        right: 20px;
    }

    .about-tag-big {
        font-size: 60px;
        top: 10px;
        left: 10px;
    }

    /* Categories on small screens */
    .cat-name {
        font-size: 24px;
    }

    .cat-card:first-child .cat-name {
        font-size: 32px;
    }

    /* Stores header adjustments */
    .store-city {
        font-size: 24px;
    }

    .store-city-num {
        font-size: 60px;
    }

    /* Lookbook header */
    .lookbook-header {
        padding: 0 16px;
    }

    .lookbook-scroll {
        padding: 0 16px;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(32px, 6vw, 56px);
    }

    /* Hamburger menu on small screens */
    .hamburger {
        justify-content: center;
    }

    /* Review text size */
    .review-text {
        font-size: 14px;
    }

    /* Newsletter title */
    .newsletter-title {
        font-size: clamp(32px, 8vw, 64px);
    }

    .newsletter-sub {
        font-size: 14px;
    }
}

/* Extra small devices */
@media (max-width: 320px) {
    .hero-title {
        font-size: 48px;
        line-height: 0.8;
    }

    .section-title {
        font-size: 28px;
    }

    .stat-num {
        font-size: 40px;
    }

    .nav-logo {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .cart-btn {
        font-size: 10px;
        padding: 6px 12px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 11px;
        padding: 12px 20px;
    }

    .newsletter-section {
        padding: 40px 12px;
    }

    .newsletter-content {
        padding: 0;
    }

    .footer {
        padding: 40px 12px 20px;
    }

    .footer-logo {
        font-size: 24px;
    }

    .footer-tagline {
        font-size: 12px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .hero-scroll,
    .newsletter-section {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}