/* Responsive Styles */

/* Large Screens */
@media (max-width: 1200px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }
    
    .category-card img {
        height: 350px;
    }
}

/* Medium Screens */
@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .story-preview .container,
    .artist-feature {
        flex-direction: column;
    }
    
    .story-content,
    .story-image,
    .artist-image,
    .artist-content {
        width: 100%;
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* Small Screens */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    h1 {
        font-size: 2.8rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .category-card img {
        height: 300px;
    }
}

/* Extra Small Screens */
@media (max-width: 576px) {
    .header-container {
        padding: 1rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .story-preview,
    .featured-categories,
    .emerging-artist {
        padding: var(--spacing-lg) 0;
    }
    
    /* Mobile Menu Responsive */
    .mobile-menu-content {
        padding: 80px 20px 30px;
    }
    
    .mobile-menu-grid {
        gap: 16px;
        max-width: 320px;
    }
    
    .mobile-menu-card {
        padding: 20px 12px;
    }
    
    .menu-card-title {
        font-size: 14px;
    }
    
    .menu-card-desc {
        font-size: 11px;
    }
    
    .menu-card-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .cta-button {
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .cta-icon svg {
        width: 18px;
        height: 18px;
    }
}
@media (max-width: 768px) {
  .single-product .product {
    flex-direction: column;
  }
}