/* Responsive Styles */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: center;
    }

    nav ul {
        flex-direction: column;
        margin-top: 15px;
    }

    nav ul li {
        margin: 10px 0;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 18px;
    }

    section h2 {
        font-size: 28px;
    }

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

    .testimonial-item {
        max-width: 90%;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin: 15px 0;
        text-align: center;
    }

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

    .product-detail-container {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .product-info .add-to-cart-btn {
        font-size: 18px;
        padding: 12px;
    }

    .cart-container {
        flex-direction: column;
        gap: 30px;
    }

    .cart-items, .cart-summary {
        padding: 20px;
    }

    .cart-item {
        flex-direction: column;
        text-align: center;
    }

    .cart-item img {
        margin-bottom: 10px;
    }

    .cart-item .item-details {
        text-align: center;
    }

    .promo-code {
        flex-direction: column;
    }

    .brand-story {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .brand-story .story-image {
        max-width: 100%;
    }

    .commitments {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .contact-form-section, .contact-info-section {
        padding: 20px;
    }

    .contact-form .btn-primary {
        width: 100%;
    }

    .legal-page h1 {
        font-size: 36px;
    }

    .legal-page h2 {
        font-size: 28px;
    }

    .legal-page h3 {
        font-size: 22px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    nav {
        padding: 0 15px;
    }

    nav ul li {
        margin-left: 20px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content p {
        font-size: 20px;
    }

    section h2 {
        font-size: 32px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .testimonial-item {
        max-width: 400px;
    }

    .footer-section {
        min-width: 200px;
    }

    .product-detail-container {
        gap: 40px;
    }

    .cart-container {
        gap: 30px;
    }

    .brand-story {
        gap: 30px;
    }

    .commitments {
        gap: 30px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    nav {
        padding: 0 20px;
    }

    nav ul li {
        margin-left: 25px;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .hero-content p {
        font-size: 22px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .testimonial-item {
        max-width: 450px;
    }

    .footer-section {
        min-width: 220px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) {
    /* Default styles are mostly for large devices */
}