/**
 * Standard Shop Responsive Styles
 * 
 * Uses centralized breakpoints from responsive-breakpoints.css
 * Mobile-first approach with 3 breakpoints:
 * - Base (Mobile): 2 columns
 * - Tablet (800px+): 3 columns
 * - Desktop (1200px+): 4 columns
 */

/* ========================================
   Base Mobile Styles (< 800px)
   Products display in 2 columns by default
   ======================================== */

/* Mobile-specific adjustments */
.standard-shop-page .search-and-filter-container {
    flex-wrap: wrap;
    gap: 12px;
}

/* Account Navigation Cards - Mobile */
.standard-shop-page .account-nav-grid {
    gap: 10px;
}

.standard-shop-page .shop-search-container {
    width: 100%;
}

.standard-shop-page .open-filter-modal,
.standard-shop-page .clear-all-button {
    flex: 1;
    font-size: 14px;
    padding: 10px 16px;
}

/* Mobile modals - fullscreen */
.standard-shop-page .product-modal,
.standard-shop-page .cart-modal,
.standard-shop-page .filter-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
}

/* Price range inputs - stack on mobile */
.standard-shop-page .price-range-inputs {
    grid-template-columns: 1fr;
    gap: 8px;
}

.standard-shop-page .price-separator {
    display: none;
}

/* Prevent iOS zoom on input focus */
.standard-shop-page #shop-search-input {
    font-size: 16px;
}

/* ========================================
   Tablet: 800px+ (3 columns)
   ======================================== */

@media (min-width: 800px) {
    /* Container adjustments */
    .standard-shop-page .container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* Tablet: 3 columns */
    .standard-shop-page .custom-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Search and filters bar */
    .standard-shop-page .search-and-filter-container {
        padding: 0;
        gap: 15px;
    }
    
    /* Modals - not fullscreen on tablets */
    .standard-shop-page .product-modal,
    .standard-shop-page .cart-modal,
    .standard-shop-page .filter-modal {
        width: 90%;
        max-width: 800px;
        height: auto;
        max-height: 90vh;
        margin: 5vh auto;
        border-radius: 12px;
    }
    
    /* Product card adjustments */
    .standard-shop-page .product-title {
        font-size: 16px;
    }
    
    .standard-shop-page .product-price {
        font-size: 18px;
    }
    
    /* Buttons */
    .standard-shop-page .open-filter-modal,
    .standard-shop-page .clear-all-button {
        padding: 12px 24px;
        font-size: 15px;
    }
    
    /* Floating cart remains centered - no position override needed */
    
    /* Price range inputs - side by side on tablet+ */
    .standard-shop-page .price-range-inputs {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
    }
    
    .standard-shop-page .price-separator {
        display: flex;
    }
}

/* ========================================
   Desktop: 1200px+ (4 columns)
   ======================================== */

@media (min-width: 1200px) {
    /* Container max-width */
    .standard-shop-page .container {
        max-width: var(--container-max-width);
        padding-left: 40px;
        padding-right: 40px;
    }
    
    /* Desktop: 4 columns */
    .standard-shop-page .custom-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Wider modals on desktop */
    .standard-shop-page .filter-modal {
        max-width: 1000px;
    }
    
    .standard-shop-page .product-modal {
        max-width: 900px;
    }
    
    .standard-shop-page .cart-modal {
        max-width: 600px;
    }
    
    /* Larger spacing */
    .standard-shop-page .shop-content {
        margin-top: 40px;
    }
    
    /* Product card refinements */
    .standard-shop-page .product-info-wrapper {
        padding: 20px;
    }
    
    .standard-shop-page .product-title {
        font-size: 18px;
    }
    
    .standard-shop-page .product-price {
        font-size: 20px;
    }
    
    /* Search bar wider */
    .standard-shop-page .shop-search-container {
        max-width: 600px;
    }
}

/* ========================================
   Touch Device Optimizations (not breakpoint-based)
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .standard-shop-page .custom-product-item:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* Larger tap targets */
    .standard-shop-page .custom-add-to-cart,
    .standard-shop-page .floating-cart-button,
    .standard-shop-page button {
        min-height: 44px;
    }
    
    .standard-shop-page .checkbox-label {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 0;
    }
    
    /* Better spacing for touch */
    .standard-shop-page .filter-group {
        margin-bottom: 25px;
    }
}