/* ============================================
   Responsive Design Updates
   ============================================ */

/* Mobile Menu Styling */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-primary);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-dropdown);
        border-top: 1px solid var(--border-light);
    }

    .main-nav.active {
        display: block !important;
        /* Shown when toggled */
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--gray-100);
    }

    .nav-link {
        padding: 15px 20px;
        width: 100%;
    }

    /* Fix Header Layout */
    .header-main .container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .logo {
        font-size: 1.5rem;
    }

    .search-bar {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-toggle {
        display: block;
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
}

/* Product Grid - 2 Columns on Mobile */
@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Force 2 columns */
        gap: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .card-title {
        font-size: 0.9rem !important;
        height: 2.5em;
        /* Limit height */
        overflow: hidden;
    }

    .price-current {
        font-size: 1rem !important;
    }

    .price-original {
        font-size: 0.8rem !important;
    }

    .btn-block {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Hide action buttons on mobile to save space */
    .card-actions {
        display: none !important;
    }

    .card-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
}

/* Hero Section Responsiveness */
@media (max-width: 992px) {
    .hero-section .row {
        flex-direction: column;
    }

    .slider-container {
        min-height: 200px !important;
    }

    /* Hide sidebars on smaller screens if not already hidden by d-none classes */
    .d-lg-block {
        display: none !important;
    }

    /* Show category dropdown on mobile if needed, or rely on main menu */
}

/* General Container Padding */
@media (max-width: 576px) {
    .container {
        padding: 0 10px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .section-header .btn {
        width: 100%;
    }
}