/* ==========================================================================
   Responsive Styles for AI Fusion Theme
   ========================================================================== */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .header-container,
    .footer-container,
    .woocommerce-container {
        max-width: 1600px;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Desktop (1024px - 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
    .header-container,
    .footer-container,
    .woocommerce-container {
        padding: 0 2rem;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Tablet Landscape (769px - 1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
    .header-container {
        padding: 0 1.5rem;
    }
    
    .main-navigation ul {
        gap: 1.5rem;
        font-size: 0.95rem;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .cart-dropdown {
        width: 340px;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Portrait & Mobile Landscape (481px - 768px) */
@media (max-width: 768px) {
    /* Header Adjustments */
    .site-header {
        padding: 0.75rem 0;
    }
    
    .header-container {
        padding: 0 1rem;
        gap: 0.75rem;
    }
    
    .site-logo img {
        max-height: 40px;
    }
    
    /* Navigation Adjustments */
    .main-navigation {
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        font-size: 0.9rem;
    }
    
    /* Cart Dropdown Mobile */
    .cart-dropdown {
        width: calc(100vw - 2rem);
        max-width: 340px;
        right: 1rem;
        left: auto;
    }
    
    .cart-dropdown::before {
        right: 30px;
    }
    
    /* Products Grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .woocommerce ul.products li.product {
        border-radius: 12px;
    }
    
    .woocommerce ul.products li.product img {
        height: 220px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1rem;
        margin: 1rem 1rem 0.5rem;
        min-height: 2.5em;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 1.2rem;
        margin: 0 1rem 1rem;
    }
    
    .woocommerce ul.products li.product .button {
        margin: 0 1rem 1rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* Container Padding */
    .woocommerce-container,
    .container {
        padding: 1rem;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-widget-area {
        text-align: center;
    }
    
    /* Buttons */
    .woocommerce a.button,
    .woocommerce button.button {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* Cart Notification */
    .cart-notification {
        top: 80px;
        right: 10px;
        left: 10px;
        width: auto;
        text-align: center;
    }
}

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
    /* Base Font Size */
    html {
        font-size: 14px;
    }
    
    /* Header */
    .site-header {
        padding: 0.5rem 0;
    }
    
    .header-container {
        padding: 0 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .site-logo img {
        max-height: 35px;
    }
    
    /* Navigation */
    .main-navigation ul {
        flex-direction: row;
        gap: 0.75rem;
        font-size: 0.85rem;
        flex-wrap: wrap;
    }
    
    .main-navigation a {
        padding: 0.4rem 0.6rem;
    }
    
    /* Cart Icon */
    .cart-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }
    
    .cart-count {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    /* Cart Dropdown */
    .cart-dropdown {
        width: calc(100vw - 2rem);
        max-width: 300px;
        right: 1rem;
    }
    
    .cart-dropdown-header h3 {
        font-size: 1rem;
    }
    
    .cart-dropdown-items {
        max-height: 240px;
    }
    
    .mini-cart-item {
        padding: 0.75rem;
    }
    
    .mini-cart-item-image {
        width: 50px;
        height: 50px;
    }
    
    .mini-cart-item-title {
        font-size: 0.85rem;
    }
    
    .mini-cart-item-price {
        font-size: 0.85rem;
    }
    
    .cart-subtotal {
        font-size: 1rem;
    }
    
    .cart-subtotal-amount {
        font-size: 1.15rem;
    }
    
    .cart-buttons {
        flex-direction: column;
    }
    
    .view-cart-btn,
    .checkout-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Products Grid - Single Column */
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    /* Product Cards */
    .woocommerce ul.products li.product {
        border-radius: 12px;
    }
    
    .woocommerce ul.products li.product img {
        height: 240px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.05rem;
        margin: 1rem 1rem 0.75rem;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 1.3rem;
        margin: 0 1rem 1rem;
    }
    
    .woocommerce ul.products li.product .button {
        margin: 0 1rem 1rem;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .woocommerce ul.products li.product .onsale {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
    
    /* Buttons */
    .woocommerce a.button,
    .woocommerce button.button {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    /* Tables */
    .woocommerce-cart table.cart,
    .woocommerce-checkout table {
        font-size: 0.85rem;
    }
    
    /* Footer */
    .site-footer {
        padding: 2rem 0 1rem;
        margin-top: 2rem;
    }
    
    .footer-container {
        padding: 0 1rem;
    }
    
    .footer-content {
        gap: 1.5rem;
    }
    
    .footer-bottom {
        font-size: 0.8rem;
    }
}

/* Extra Small Mobile (< 360px) */
@media (max-width: 359px) {
    html {
        font-size: 13px;
    }
    
    .header-container {
        padding: 0 0.75rem;
    }
    
    .main-navigation ul {
        gap: 0.5rem;
        font-size: 0.8rem;
    }
    
    .cart-dropdown {
        width: calc(100vw - 1.5rem);
        max-width: 280px;
    }
    
    .mini-cart-item {
        padding: 0.5rem;
    }
    
    .mini-cart-item-image {
        width: 45px;
        height: 45px;
    }
}

/* Landscape Orientation Adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .cart-dropdown {
        max-height: 80vh;
    }
    
    .cart-dropdown-items {
        max-height: 200px;
    }
    
    .site-header {
        position: relative;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .site-header {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .header-cart,
    .cart-dropdown {
        display: none !important;
    }
    
    .site-content {
        margin: 0;
        padding: 0;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .cart-dropdown {
        transition: opacity 0.2s ease;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Uncomment when implementing dark mode */
    /*
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    .site-header {
        background: rgba(30, 30, 30, 0.85);
    }
    
    .cart-dropdown {
        background: rgba(40, 40, 40, 0.98);
    }
    */
}