/* =====================================================
MOBILE RESPONSIVE STYLES
Breakpoint: 0px - 767px (phones)
Extracted from catalog.html for Phase 3.2
===================================================== */

@media (max-width: 640px) {
.products-container {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}
}

@media (max-width: 480px) {
.products-container {
    padding-left: 8px;
    padding-right: 8px;
}
}

@media (max-width: 640px) {
.compact-item {
    margin-bottom: 2px;
    padding: 0;
}
            
.products-container {
    padding: var(--space-4) var(--space-4) var(--space-12);
}
            
.drawer-content {
    padding: 0 var(--space-4) var(--space-4);
}
}

@media (max-width: 640px) {
            /* Increase product name font size for better readability */
.flavor-text {
    font-size: 15px; /* Increased from 13px */
    line-height: 1.2; /* Tighter line spacing for minimal vertical space */
    font-weight: 500; /* Slightly bolder for emphasis */
}
            
            /* Section text (in parentheses) - keep readable but secondary */
.section-text {
    font-size: 12px; /* Slightly smaller than product name */
    line-height: 1.4;
    font-weight: 400; /* Normal weight */
}
            
            /* Status tags - soft and clean */
.status-indicator {
    font-size: 9px;
    padding: 2px 6px;
    line-height: 1.3;
}
            
            /* Button text - larger for better visibility */
.add-btn {
    font-size: 14px; /* Increased from 12px */
    font-weight: 500; /* Keep semi-bold */
    line-height: 1.4;
}
            
            /* Quantity display number - larger */
.quantity-display {
    font-size: 16px; /* Increased from 14px */
    font-weight: 600; /* Bolder for visibility */
}
}

@media (max-width: 640px) {
.circular-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
}
            
.circular-qty-display {
    font-size: 16px;
    min-width: 28px;
    /* Ensure input is properly styled on mobile */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.circular-qty-display::-webkit-outer-spin-button,
.circular-qty-display::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.status-indicator {
    font-size: 12px;
    padding: 5px 12px;
}
}

@media (max-width: 480px) {
#searchInput {
    padding: var(--space-2) var(--space-2);
}
}

@media (max-width: 640px) {
.view-toggle-btn {
    padding: 5px 10px;
    font-size: 13px;
}
            
#viewToggle {
    gap: 6px !important;
}
}

@media (max-width: 480px) {
.brand-card {
    padding: var(--space-3);
}
            
.brand-card-name {
    font-size: 15px;
}
}

@media (max-width: 640px) {
.brand-modal {
    padding: var(--space-2);
}
            
.brand-modal-content {
    max-height: 90vh;
    border-radius: 12px;
}
            
.brand-modal-header {
    padding: var(--space-3) var(--space-4);
}
            
.brand-modal-body {
    padding: var(--space-3) var(--space-4);
}
            
.brand-modal-header h2 {
    font-size: 18px;
}
}

@media (max-width: 640px) {
            /* Reduce horizontal padding for all main containers on mobile */
#browseProductsHeading {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
}
            
            /* Ensure brand filters/dropdowns respect mobile spacing */
#searchBar ~ select,
.search-container ~ select,
#searchBar ~ [class*="brand"],
.search-container ~ [class*="brand"],
select,
[class*="brand-filter"],
[class*="brand-select"],
[class*="dropdown"],
[class*="select"] {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
}

@media (max-width: 480px) {
#browseProductsHeading {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
            
.search-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
            
#categoryFilters {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
            
#searchInput {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
            
.category-filter {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}

@media (max-width: 480px) {
.cart-drawer-content {
    max-width: 100%;
}
}