/* TECHNOVIUM - Responsive Breakpoints */

@media (max-width: 1200px) {
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
    .categories-grid-page { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-image { display: none; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .shop-layout { grid-template-columns: 240px 1fr; }
    .product-gallery-summary { grid-template-columns: 1fr 1fr; gap: 30px; }
    .checkout-layout { grid-template-columns: 1fr 360px; }
    .single-blog-layout { grid-template-columns: 1fr 280px; gap: 30px; }
    .single-post-title { font-size: 1.8rem; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .nav-bar { display: none; }
    .mobile-menu-toggle { display: flex; }
    .header-search { max-width: 400px; }
    .header-search .search-category { display: none; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .categories-grid-page { grid-template-columns: repeat(3, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .promo-grid { grid-template-columns: 1fr; }
    
    /* Shop Layout - Move sidebar (Archives/Categories) to bottom */
    .shop-layout { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .shop-sidebar { position: static; order: 2; margin-top: 40px; }
    .shop-main { order: 1; }
    /* Product Details Page - Reorder for mobile (summary first, then gallery) */
    .product-gallery-summary { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .product-gallery { position: static; order: 2; margin-top: 30px; }
    .product-summary { order: 1; }
    
    /* Contact Info Cards - Fix mobile layout */
    .contact-info-cards { grid-template-columns: 1fr 1fr !important; gap: 16px; }
    .contact-info-card { padding: 20px 15px; text-align: center; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .single-blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar-area { order: 2; }
    .single-post-title { font-size: 1.6rem; }
    .single-post-meta { gap: 10px; }
    .author-box { flex-direction: column; align-items: center; text-align: center; }
    .post-navigation { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-card .card-image { width: 100%; overflow: hidden; }
    .blog-card .card-image img { width: 100%; height: auto; object-fit: cover; }
    .account-layout { grid-template-columns: 1fr; }
    .account-nav { position: static; }
    .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* About Page - Fix mobile layout */
    .about-hero { grid-template-columns: 1fr; text-align: center; }
    .about-hero .about-image { order: -1; margin-bottom: 20px; }
    .about-content { text-align: center; }
    .about-content .section-title { text-align: center; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
    .value-card { text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; }
    .quickview-grid { grid-template-columns: 1fr; }
    .features-bar { margin-top: 0; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-item { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
    .deals-header { flex-direction: column; gap: 16px; align-items: flex-start; }
    .products-grid.list-view .product-card { flex-direction: column; }
    .products-grid.list-view .product-card .product-image { width: 100%; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .reviews-summary { flex-direction: column; gap: 20px; }
    .cart-table { font-size: 0.85rem; }
    .cart-table th:nth-child(3), .cart-table td:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
    /* Topbar - Fix overflow and proper layout */
    .topbar { height: auto; padding: 8px 0; }
    .topbar .container { flex-wrap: wrap; justify-content: center; gap: 6px; }
    .topbar-left { width: 100%; justify-content: center; text-align: center; }
    .topbar-left > span { font-size: 0.75rem; line-height: 1.4; }
    .topbar-right { width: 100%; justify-content: center; flex-wrap: wrap; gap: 8px; }
    .topbar-right a { font-size: 0.75rem; }
    .topbar-right .topbar-separator { display: none; }
    .topbar-right a:nth-child(n+4) { display: none; }
    
    /* Header - Larger logo on mobile */
    .header-search { display: none; }
    .site-logo img, .site-logo .custom-logo { height: 50px; max-width: 180px; }
    .header-action-btn .mini-cart-total { display: none; }
    .hero-section { padding: 40px 0 50px; min-height: auto; }
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-buttons .btn { padding: 10px 20px; font-size: 0.85rem; }
    .hero-stats { gap: 20px; }
    .hero-stat .number { font-size: 1.4rem; }
    .section-padding { padding: 40px 0; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .categories-grid-page { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card { padding: 20px 14px; }
    .category-card .cat-icon { width: 50px; height: 50px; font-size: 1.4rem; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card .product-info { padding: 12px; }
    .product-card .product-title { font-size: 0.85rem; }
    .product-card .price-current { font-size: 1.05rem; }
    .product-card .add-to-cart-btn { padding: 8px 12px; font-size: 0.8rem; }
    .promo-banner { padding: 24px; min-height: 200px; }
    .promo-banner .promo-content { max-width: 100%; }
    .promo-banner h3 { font-size: 1.2rem; }
    .blog-grid { grid-template-columns: 1fr; }
    
    /* Blog Images - Prevent cutoff on mobile */
    .blog-card { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
    .blog-card .card-image { width: 100%; aspect-ratio: 16/10; overflow: hidden; }
    .blog-card .card-image img { width: 100%; height: 100%; object-fit: cover; }
    
    /* Contact Info Cards - Single column on small mobile */
    .contact-info-cards { grid-template-columns: 1fr !important; }
    .contact-info-card { width: 100%; max-width: 100%; box-sizing: border-box; }
    
    /* Contact Form - Mobile fixes */
    .contact-grid { gap: 24px; padding: 20px 0; }
    .contact-form-wrapper { padding: 20px; }
    .contact-form-wrapper h3 { font-size: 1.2rem; }
    
    /* Product Details Page - Better mobile spacing */
    .product-gallery-summary { padding: 0 5px; }
    .product-summary { padding: 0; }
    .product-summary .product-title-single { font-size: 1.4rem; }
    .product-summary .price-current-large { font-size: 1.6rem; }
    .product-summary .meta-row { flex-wrap: wrap; }
    .product-tabs { margin: 0 -5px; padding: 0 5px; }
    
    /* Footer - Center aligned with separators */
    .footer-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-brand, .footer-col { text-align: center; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .footer-brand:last-child, .footer-col:last-child { border-bottom: none; }
    .footer-brand .footer-logo { justify-content: center; }
    .footer-brand .footer-logo-img { margin: 0 auto 16px; }
    .footer-social { justify-content: center; }
    .footer-col h4 { text-align: center; }
    .footer-col ul { text-align: center; }
    .footer-col ul li { text-align: center; }
    .footer-contact { align-items: center; }
    .footer-contact li { justify-content: center; text-align: center; flex-wrap: wrap; }
    .footer-bottom .container { justify-content: center; text-align: center; flex-direction: column; gap: 12px; }
    .payment-methods { text-align: center; }
    .newsletter-form { flex-direction: column; border-radius: var(--radius-lg); }
    .newsletter-form input { text-align: center; }
    .newsletter-form button { border-radius: var(--radius-md); margin: 8px; }
    .contact-info-cards { grid-template-columns: 1fr; }
    /* About Page - Better mobile layout */
    .about-stats { grid-template-columns: 1fr 1fr; gap: 15px; }
    .about-stats .stat-item { padding: 20px 10px; text-align: center; }
    .team-grid { grid-template-columns: 1fr; }
    .team-member { text-align: center; }
    .values-grid { grid-template-columns: 1fr !important; gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
    .value-card { padding: 20px; text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
    .about-hero { padding: 30px 0; }
    .about-content { padding: 0 10px; }
    .mission-vision { flex-direction: column; gap: 20px; }
    .mission-box, .vision-box { width: 100%; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .product-summary .quantity-cart { flex-wrap: wrap; }
    .product-summary .add-to-cart-single { max-width: 100%; }
    .product-tabs .tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .product-tabs .tab-btn { padding: 12px 16px; font-size: 0.85rem; white-space: nowrap; }
    .cart-table th:nth-child(2), .cart-table td:nth-child(2) { display: none; }
    .cart-item-img { width: 60px; height: 60px; }
    .wishlist-grid { grid-template-columns: 1fr; }
    .error-404-section .error-code { font-size: 5rem; }
    /* Auth/Login Page - Center align and prevent cutoff */
    .auth-section { padding: 30px 15px; }
    .auth-forms-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 10px; }
    .auth-container { padding: 24px 20px; margin: 0 auto; width: 100%; max-width: 100%; box-sizing: border-box; }
    .auth-container h2 { font-size: 1.4rem; }
    .auth-container .form-group { margin-bottom: 16px; }
    .auth-container input[type="text"], .auth-container input[type="email"], .auth-container input[type="password"] { width: 100%; box-sizing: border-box; }
    
    /* Account Layout - Center on mobile */
    .account-layout { padding: 20px 0; }
    .account-nav { margin-bottom: 20px; }
    .account-content { padding: 20px; }
    .checkout-section { padding: 20px; }
    .page-header { padding: 30px 0; }
    .page-header h1 { font-size: 1.6rem; }
    .single-post-hero { padding: 35px 0 30px; }
    .single-post-title { font-size: 1.4rem; }
    .single-post-meta { font-size: 0.8rem; gap: 8px; }
    .post-footer-actions { flex-direction: column; align-items: flex-start; }
    .countdown { gap: 8px; }
    .countdown-item { padding: 8px 10px; min-width: 50px; }
    .countdown-item .number { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    /* Topbar - Show only promo text on very small screens */
    .topbar-right { display: none; }
    .topbar-left { padding: 0 10px; }
    .topbar-left > span { font-size: 0.7rem; }
}

@media (max-width: 400px) {
    .container { padding: 0 14px; }
    .header-main { height: 60px; }
    .header-main .container { gap: 8px; }
    .site-logo img, .site-logo .custom-logo { height: 44px; max-width: 160px; }
    .site-logo .logo-text { font-size: 1.2rem; }
    .header-actions { gap: 2px; }
    .header-action-btn { width: 38px; height: 38px; }
    .products-grid { gap: 10px; }
    .product-card .product-image { padding: 14px; }
    .product-card .product-info { padding: 10px; }
    .product-card .product-title { font-size: 0.8rem; }
    .product-card .product-category { font-size: 0.7rem; }
    .product-card .price-current { font-size: 0.95rem; }
    .product-card .product-actions-overlay { opacity: 1; transform: translateX(0); }
    .mobile-menu { width: 280px; }
    .btn { padding: 10px 20px; font-size: 0.85rem; }
    .btn-lg { padding: 12px 24px; font-size: 0.95rem; }
}