/* ===== RESPONSIVE STYLES ===== */

/* Large Screens (Desktop) */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
}

/* Medium Screens (Tablets & Small Laptops) */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
    }

    .hero-slider {
        height: auto;
        aspect-ratio: 5 / 3;
    }

    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    body {
        overflow-x: hidden;
    }

    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Small Screens (Tablets) */
@media (max-width: 768px) {
    :root {
        --spacing-12: 3rem;
        --spacing-8: 2rem;
    }

    /* Unified header mobile */
    .unified-header-inner {
        min-height: 64px;
        gap: var(--spacing-2);
    }

    .unified-logo .logo-img,
    .unified-logo .custom-logo {
        height: 52px;
    }

    /* Mobile header layout:
       keep burger + logo on the right, push other icons to the far left */
    .unified-logo {
        margin-inline-end: auto;
    }

    .unified-actions {
        gap: var(--spacing-1);
    }

    .unified-action svg {
        width: 20px;
        height: 20px;
    }

    .unified-count {
        width: 15px;
        height: 15px;
        font-size: 9px;
    }

    .mobile-menu-separator {
        height: 1px;
        background: #eee;
        margin: 15px 0;
        width: 100%;
    }

    .second-menu-link {
        font-size: 14px;
        color: #666;
    }

    .mobile-menu-link {
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
    }

    .category-nav {
        display: none;
    }

    .hero-content {
        padding: var(--spacing-4);
        text-align: center;
        max-width: 100%;
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

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

    .featured-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .collection-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .collection-large {
        grid-row: auto;
    }

    .collection-card {
        min-height: 250px;
    }

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

    .footer-about {
        max-width: 100%;
        margin: 0 auto;
    }

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

    .footer-links a:hover {
        padding-right: 0;
    }

    .footer-contact li {
        justify-content: center;
    }

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

    .product-gallery {
        position: static;
        margin-bottom: var(--spacing-6);
    }

    .shop-content {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        display: none;
    }

    table {
        display: block;
        overflow-x: auto;
        width: 100%;
        border-collapse: collapse;
    }

    .shop_table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile Sidebar Menu */
    .mobile-menu {
        width: 85%;
        max-width: 320px;
    }

    .mobile-menu-header {
        padding: var(--spacing-3);
    }

    .mobile-menu-content {
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        padding-bottom: 50px;
    }

    .mobile-menu-link {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-base);
    }

    /* Category nav on mobile */
    .category-nav {
        padding: var(--spacing-2) 0;
    }

    .category-image {
        width: 55px;
        height: 55px;
    }

    .category-name {
        font-size: 10px;
        max-width: 60px;
    }

    /* Banner Images */
    .promo-banners img,
    .collection-card img,
    .promo-banner-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-width: 100%;
    }
}

/* Extra Small Screens (Mobile Phones) */
@media (max-width: 480px) {
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .unified-logo .logo-img,
    .unified-logo .custom-logo {
        height: 36px;
    }

    .hero-slider {
        height: auto;
        aspect-ratio: 5 / 3;
    }

    .hero-title {
        font-size: var(--font-size-2xl);
    }

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

    .products-grid {
        gap: var(--spacing-2);
    }

    .product-info {
        padding: var(--spacing-3);
    }

    .product-title {
        font-size: var(--font-size-sm);
    }

    .btn-add-to-cart {
        font-size: var(--font-size-xs);
        padding: var(--spacing-2);
    }

    .btn-add-to-cart-modern {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }

    .mobile-menu {
        width: 90%;
    }

    .category-image {
        width: 50px;
        height: 50px;
    }

    .promo-banner-item {
        border-radius: 8px;
        overflow: hidden;
    }

    .promo-banner-item img {
        display: block;
    }
}