/* =====================================================
   MOBILE SHOP/ALLPRODUCTS PAGE - Responsive Styles
   Only applies on screens <= 768px
   ===================================================== */

@media (max-width: 768px) {

    /* =====================================================
       SHOP CONTAINER - FULL WIDTH
       ===================================================== */
    .modern-shop-container {
        padding-bottom: 70px !important;
    }

    /* =====================================================
       TOP BAR - COMPACT
       ===================================================== */
    .shop-topbar {
        padding: 6px 0 !important;
        margin-bottom: 10px !important;
    }

    .shop-topbar .container-fluid {
        padding: 0 10px !important;
    }

    .shop-topbar .breadcrumb {
        font-size: 0.7rem !important;
    }

    .shop-topbar .breadcrumb-item a {
        font-size: 0.7rem !important;
    }

    .shop-topbar .results-info {
        font-size: 0.7rem !important;
    }

    /* =====================================================
       FILTER SIDEBAR - HIDDEN ON MOBILE
       ===================================================== */
    .filter-panel {
        display: none !important;
    }

    /* =====================================================
       PRODUCTS HEADER BAR - COMPACT
       ===================================================== */
    .products-header-bar {
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }

    .sort-section {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .sort-section label {
        font-size: 0.7rem !important;
        display: none;
    }

    .sort-section .form-select {
        font-size: 0.75rem !important;
        padding: 6px 24px 6px 8px !important;
        min-width: 110px !important;
    }

    .view-toggle {
        display: none !important;
    }

    /* =====================================================
       PRODUCTS GRID - 2 COLUMNS
       ===================================================== */
    .products-grid {
        gap: 8px !important;
    }

    .products-grid.grid-view {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* =====================================================
       PRODUCT CARD - COMPACT MOBILE
       ===================================================== */
    .product-card {
        border-radius: 8px !important;
    }

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

    .product-card .badge {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
        top: 4px !important;
        left: 4px !important;
    }

    .product-card .category-badge {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
        bottom: 4px !important;
        left: 4px !important;
    }

    /* Quick actions always visible on mobile */
    .product-quick-actions {
        opacity: 1 !important;
        transform: translateX(0) !important;
        top: 4px !important;
        right: 4px !important;
    }

    .product-quick-actions .btn {
        width: 26px !important;
        height: 26px !important;
    }

    .product-quick-actions .btn i {
        font-size: 0.7rem !important;
    }

    /* Product Info - Compact */
    .product-card .product-info {
        padding: 8px !important;
        gap: 3px !important;
    }

    .product-card .product-title {
        font-size: 0.7rem !important;
        max-height: 28px !important;
        line-height: 1.2 !important;
    }

    .product-card .product-rating {
        margin: 2px 0 !important;
    }

    .product-card .product-rating .stars i {
        font-size: 0.55rem !important;
    }

    .product-card .product-rating .rating-count {
        font-size: 0.55rem !important;
    }

    /* Colors Row */
    .product-colors-row {
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .product-colors .color-swatch-mini {
        width: 12px !important;
        height: 12px !important;
    }

    .discount-badge {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
    }

    /* Price Row */
    .product-price-row {
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .product-card .current-price {
        font-size: 0.85rem !important;
    }

    /* Quantity Group */
    .quantity-group-inline {
        transform: scale(0.85);
        transform-origin: left center;
    }

    .quantity-group-inline .qty-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.75rem !important;
    }

    .quantity-group-inline .quantity-input {
        width: 28px !important;
        height: 22px !important;
        font-size: 0.7rem !important;
    }

    /* Add to Cart Button */
    .product-actions-compact {
        margin-top: 4px !important;
    }

    .btn-add-to-cart {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        border-radius: 6px !important;
        min-height: 36px;
    }

    .btn-add-to-cart i {
        font-size: 0.75rem !important;
    }

    /* =====================================================
       PAGINATION - COMPACT
       ===================================================== */
    #paginationContainer {
        padding: 15px 0 !important;
    }

    #paginationContainer .page-link {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        min-width: 36px;
        min-height: 36px;
    }

    /* =====================================================
       MOBILE FILTER OFFCANVAS - ENHANCED
       ===================================================== */
    .offcanvas {
        max-width: 85vw !important;
    }

    .offcanvas-header {
        padding: 12px 15px !important;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: #fff;
    }

    .offcanvas-header .btn-close {
        filter: brightness(0) invert(1);
    }

    .offcanvas-body {
        padding: 12px !important;
    }

    .filter-section-header {
        padding: 10px !important;
        font-size: 0.85rem !important;
    }

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

    .filter-option {
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        min-height: 44px;
    }

    .filter-option input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }

    /* Price Range */
    .price-range-slider .small {
        font-size: 0.8rem !important;
    }

    /* =====================================================
       LOADING OVERLAY - MOBILE
       ===================================================== */
    .loading-bar {
        height: 3px !important;
    }

    /* =====================================================
       GENERAL MOBILE IMPROVEMENTS
       ===================================================== */

    /* Container padding */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Better spacing for mobile */
    .row.g-3 {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
    }

    /* Smooth animations for mobile */
    .product-card:active {
        transform: scale(0.98);
    }
}