/* Products & Articles Pages Mobile Optimization */

@media (max-width: 768px) {

    /* Page header banner */
    .page-header-banner {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 40px 0 !important;
        overflow-x: hidden !important;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .page-header-banner .container {
        padding: 0 15px !important;
    }

    .page-header-banner h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }

    .page-header-banner p {
        font-size: 15px !important;
    }

    /* Filter bar mobile */
    .filter-bar {
        padding: 15px !important;
        margin: 0 0 20px 0 !important;
    }

    .filter-bar>div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .filter-bar>div>div {
        width: 100% !important;
    }

    .filter-bar>div>div:last-child {
        flex-direction: column !important;
    }

    .filter-bar label {
        display: block !important;
        margin-bottom: 5px !important;
        font-weight: 600 !important;
    }

    .filter-bar select {
        width: 100% !important;
        padding: 10px !important;
        font-size: 15px !important;
    }

    /* Products grid mobile */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
    }

    .product-image {
        height: 150px !important;
    }

    .product-info {
        padding: 10px !important;
    }

    .product-category {
        font-size: 11px !important;
        margin-bottom: 5px !important;
    }

    .product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        min-height: 35px !important;
    }

    .product-price {
        margin-bottom: 10px !important;
    }

    .price-current {
        font-size: 16px !important;
    }

    .price-original {
        font-size: 13px !important;
    }

    .product-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .product-actions {
        flex-direction: row !important;
        gap: 6px !important;
    }

    .btn-add-cart {
        flex: 1 !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    .hide-mobile-text {
        display: none !important;
    }

    .product-actions .btn-outline {
        width: 36px !important;
        padding: 8px !important;
        font-size: 14px !important;
    }

    /* Articles grid mobile */
    .articles-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
    }

    .article-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .article-image {
        height: 200px !important;
    }

    .article-content {
        padding: 20px !important;
    }

    .article-title {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .article-excerpt {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .article-meta {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }

    /* Empty state mobile */
    .empty-state {
        padding: 60px 15px !important;
    }

    .empty-state i {
        font-size: 60px !important;
    }

    .empty-state h3 {
        font-size: 20px !important;
    }

    .empty-state p {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {

    /* Single column on very small screens */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .product-image {
        height: 200px !important;
    }

    .product-title {
        font-size: 14px !important;
        min-height: auto !important;
    }

    .btn-add-cart {
        font-size: 13px !important;
        padding: 10px !important;
    }

    .hide-mobile-text {
        display: inline !important;
    }

    .product-actions .btn-outline {
        width: auto !important;
        padding: 10px 15px !important;
    }
}

/* Dark mode support for pages */
html.dark-mode .page-header-banner {
    background: linear-gradient(135deg, #4338ca, #7c3aed) !important;
}

html.dark-mode .filter-bar {
    background: #1e293b !important;
    color: #e5e7eb !important;
}

html.dark-mode .filter-bar select {
    background: #334155 !important;
    color: #f9fafb !important;
    border-color: #475569 !important;
}