/* Mobile responsive enhancements v2 */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

@media (max-width: 768px) {

    /* Hide unnecessary top nav on mobile */
    .corp-nav {
        display: none;
    }

    /* Header adjustments to prevent overflow */
    .main-header {
        padding: 0 var(--spacing-sm);
        height: auto;
        min-height: 60px;
    }

    .header-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
    }

    .logo-link svg {
        height: 24px;
        width: auto;
    }

    /* Search bar optimization */
    .search-bar {
        flex: 1;
        min-width: 0;
        margin: 0 5px;
    }

    .search-bar input {
        width: 100%;
        padding: 8px 30px 8px 10px;
        font-size: 14px;
    }

    /* Actions and Toggle visibility */
    .header-actions {
        gap: 8px;
        flex-shrink: 0;
    }

    .action-btn {
        display: none;
        /* Hide minor actions to save space */
    }

    .action-btn#open-cart-btn {
        display: flex;
        /* Keep cart visible */
    }

    .menu-toggle {
        display: flex;
        font-size: 24px;
        padding: 5px;
        color: var(--color-text-main);
        z-index: 101;
    }

    /* Mobile navigation overlay */
    .primary-nav {
        display: none;
        flex-direction: column;
        background: #111;
        position: fixed;
        /* Use fixed to cover screen */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 100;
        padding: 80px var(--spacing-lg) var(--spacing-lg);
        text-align: center;
    }

    .primary-nav.open {
        display: flex;
    }

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

    .nav-list a {
        font-size: 1.5rem;
        font-weight: 700;
    }

    /* Grid to single column and centering */
    .home-layout,
    .product-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0 var(--spacing-sm);
    }

    .product-card {
        width: 100%;
        max-width: 340px;
        margin: var(--spacing-md) auto;
    }

    /* Center filters on mobile */
    .filters-container {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .filter-dropdowns {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    /* Hero adjustments */
    .hero-card {
        min-height: 200px;
        background-position: center;
        margin-bottom: var(--spacing-md);
    }

    .hero-text {
        text-align: center;
        padding: var(--spacing-md);
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-text h1 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 0.9rem;
    }

    /* Footer centering */
    .footer-container,
    .footer-bottom {
        text-align: center;
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    /* CTA banner */
    .cta-banner {
        background: linear-gradient(135deg, #00b8fc, #0066aa);
        color: #fff;
        padding: var(--spacing-lg);
        text-align: center;
        margin: var(--spacing-md) var(--spacing-sm);
        border-radius: 12px;
    }

    .cta-banner h2 {
        font-size: 1.4rem;
    }

    .cta-banner .cta-btn {
        display: inline-block;
        margin-top: var(--spacing-md);
        background: #fff;
        color: #0066aa;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
    }
}