/* ===== MOBILE RESPONSIVE FIXES (April 2026) ===== */

/* Nav tabs scrollable on mobile */
.main-nav .container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.main-nav .container::-webkit-scrollbar{display:none}

/* Products page sidebar collapse on mobile */
@media(max-width:768px){
    /* Hide sidebar on mobile, show as toggle */
    .sidebar-filter{display:none}
    .sidebar-filter.show{display:block}
    
    /* Products grid - full width */
    section .container > div[style*="grid-template-columns: 240px"]{display:block!important}
    section .container > div[style*="grid-template-columns:240px"]{display:block!important}
    
    /* Promo card height */
    .promo-card{height:140px}
    
    /* Product detail actions stack */
    .detail-actions{flex-wrap:wrap}
    .detail-actions .btn{flex:1;min-width:120px}
    
    /* Cart table scroll */
    .cart-table{display:block;overflow-x:auto}
    
    /* Auth card padding */
    .auth-card{padding:20px;margin:0 8px}
    
    /* Slide height */
    .slide{min-height:220px}
    .slide .container{min-height:220px}
    .slide-content h2{font-size:20px}
    .slide-content p{font-size:13px;margin-bottom:14px}
    .slide-content .btn{padding:10px 18px;font-size:12px}
    
    /* Section headers */
    .section-header{flex-direction:column;gap:10px;align-items:flex-start}
    
    /* Quantity control on detail page */
    .product-detail-price .price-current{font-size:22px}
    
    /* Form card padding */
    .form-card{padding:16px}
    
    /* Newsletter stacked */
    .newsletter-content{padding:0 16px}
    
    /* Home grid - show 2 per row */
    .home-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
}

@media(max-width:480px){
    /* Products grid 2 columns */
    .products-grid{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
    
    /* Smaller product images */
    .product-image{aspect-ratio:1}
    .product-image img{width:90%;height:90%}
    
    /* Smaller product info */
    .product-info{padding:8px 10px 12px}
    .product-name{font-size:12px;min-height:auto;-webkit-line-clamp:2;margin-bottom:4px}
    .product-category{font-size:10px;margin-bottom:2px}
    .price-current{font-size:13px!important}
    .price-old{font-size:11px}
    .product-badge span{font-size:9px;padding:2px 6px}
    
    /* Stars smaller */
    .stars{font-size:10px}
    
    /* Section padding */
    .section{padding:20px 0}
    .section-title{font-size:16px}
    
    /* Features bar */
    .features-bar{padding:12px;gap:10px}
    .feature-icon{width:36px;height:36px;font-size:14px}
    .feature-text h4{font-size:11px}
    .feature-text p{font-size:10px}
    
    /* Footer */
    .footer{padding:28px 0 0}
    .footer-brand h3{font-size:18px}
    
    /* Checkout / cart */
    .cart-product-img{width:48px;height:48px}
    .summary-row.total{font-size:15px}
    
    /* Slide */
    .slide{min-height:180px}
    .slide .container{min-height:180px}
    .slide-content h2{font-size:18px}
    .slide-content .label{font-size:10px;padding:3px 10px}
    .slider-btn{width:32px;height:32px;font-size:14px}
    
    /* Categories grid */
    .categories-grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .category-card{padding:12px 6px}
    .category-card i{font-size:22px;margin-bottom:4px}
    .category-card h3{font-size:11px}
    
    /* Promo cards */
    .promo-card{height:120px}
    .promo-card-overlay{padding:12px}
    .promo-card-overlay h3{font-size:14px}
    .promo-card-overlay .shop-link{font-size:10px}
    
    /* Page header */
    .page-header{padding:24px 0}
    .page-header h1{font-size:20px}
}

/* Fix form-hint */
.form-hint{font-size:11px;color:#888;margin-top:3px}