/* ========================================================== RESPONSIVE 1400px ========================================================== */ @media (max-width:1400px){ .container{ max-width:1320px; } .hero-title{ font-size:3rem; } .banner{ padding:3.5rem; } .section-title h2{ font-size:2.2rem; } } /* ========================================================== RESPONSIVE 1200px ========================================================== */ @media (max-width:1200px){ .hero{ padding:80px 0; } .hero-title{ font-size:2.7rem; } .hero-text{ font-size:1rem; } .page-header{ padding:60px 0; } .page-header h1{ font-size:2.3rem; } .banner{ padding:3rem; } .banner h2{ font-size:2rem; } .section-title h2{ font-size:2rem; } .product-detail-title{ font-size:2rem; } .product-detail-price{ font-size:1.75rem; } .cart-summary{ top:90px; } } /* ========================================================== RESPONSIVE 992px ========================================================== */ @media (max-width:992px){ .section-padding{ padding:70px 0; } .hero{ padding:70px 0; text-align:center; } .hero-content{ margin-bottom:3rem; } .hero-buttons{ justify-content:center; } .hero-image{ margin-top:2rem; } .page-header{ padding:50px 0; } .section-title{ margin-bottom:2.5rem; } .section-title h2{ font-size:1.9rem; } .banner{ padding:2.5rem; text-align:center; } .cta{ padding:60px 0; } .cta h2{ font-size:2rem; } .product-card{ margin-bottom:1.5rem; } .cart-summary{ margin-top:2rem; position:static; } .order-summary{ margin-top:2rem; } .footer-top{ padding:60px 0 40px; } } /* ========================================================== RESPONSIVE 992px HEADER & NAVBAR ========================================================== */ @media (max-width:992px){ .site-header{ position:relative; } .top-bar{ display:none; } .navbar{ padding:.80rem 0; } .navbar-brand{ font-size:1.25rem; } .navbar-brand img{ max-height:45px; } } /* ========================================================== MOBILE NAVIGATION ========================================================== */ @media (max-width:992px){ .navbar-collapse{ margin-top:1rem; padding:1rem; background:var(--white); border-radius:var(--border-radius); box-shadow:var(--shadow-md); } .navbar-nav{ align-items:flex-start; } .navbar-nav .nav-item{ width:100%; margin:.15rem 0; } .navbar-nav .nav-link{ display:block; width:100%; padding:.85rem 1rem; } } /* ========================================================== MOBILE DROPDOWN ========================================================== */ @media (max-width:992px){ .navbar .dropdown-menu{ margin-top:.30rem; margin-left:1rem; width:calc(100% - 1rem); box-shadow:none; border:1px solid var(--gray-200); } .dropdown-item{ padding:.70rem 1rem; } } /* ========================================================== NAVBAR ICONS ========================================================== */ @media (max-width:992px){ .navbar-icons{ margin-top:1rem; width:100%; justify-content:flex-start; flex-wrap:wrap; } .navbar-icon{ width:42px; height:42px; } } /* ========================================================== SEARCH ========================================================== */ @media (max-width:992px){ .nav-search{ width:100%; margin:1rem 0; } .nav-search input{ width:100%; } .search-box{ max-width:95%; } .search-box input{ height:58px; font-size:1rem; } } /* ========================================================== MOBILE BUTTONS ========================================================== */ @media (max-width:992px){ .hero-buttons{ flex-direction:column; align-items:center; } .hero-buttons .btn{ width:100%; max-width:320px; } } /* ========================================================== PAGE HEADER ========================================================== */ @media (max-width:992px){ .page-header h1{ font-size:2rem; } .page-header p{ font-size:1rem; } } /* ========================================================== PRODUCT DETAIL ========================================================== */ @media (max-width:992px){ .product-gallery{ margin-bottom:2rem; } .product-detail{ text-align:center; } .product-detail-price{ justify-content:center; } .quantity-box{ justify-content:center; } } /* ========================================================== CHECKOUT ========================================================== */ @media (max-width:992px){ .checkout-card{ margin-bottom:2rem; } .order-summary{ margin-top:2rem; } } /* ========================================================== FOOTER ========================================================== */ @media (max-width:992px){ .footer-top{ text-align:center; } .footer-title::after{ margin-left:auto; margin-right:auto; } .footer-contact li{ justify-content:center; } .footer-social{ justify-content:center; } .footer-payments{ justify-content:center; } .footer-menu{ justify-content:center; margin-top:1rem; } } /* ========================================================== RESPONSIVE 768px ========================================================== */ @media (max-width:768px){ .section-padding{ padding:60px 0; } .container{ padding-left:20px; padding-right:20px; } } /* ========================================================== HERO ========================================================== */ @media (max-width:768px){ .hero{ padding:60px 0; } .hero-title{ font-size:2.2rem; } .hero-text{ font-size:.98rem; } .hero-image{ margin-top:2rem; } } /* ========================================================== SECTION TITLES ========================================================== */ @media (max-width:768px){ .section-title{ text-align:center; } .section-title h2{ font-size:1.8rem; } .section-title p{ font-size:.95rem; } } /* ========================================================== PRODUCTS ========================================================== */ @media (max-width:768px){ .product-card{ margin-bottom:1.5rem; } .product-title{ font-size:1rem; } .current-price{ font-size:1.15rem; } .product-actions{ right:15px; } } /* ========================================================== PRODUCT DETAIL ========================================================== */ @media (max-width:768px){ .product-detail-title{ font-size:1.8rem; } .product-detail-price{ font-size:1.6rem; } .product-thumbnails{ justify-content:center; flex-wrap:wrap; } .product-thumbnail{ width:70px; } } /* ========================================================== TABLES ========================================================== */ @media (max-width:768px){ .table{ font-size:.90rem; } .table td, .table th{ white-space:nowrap; } } /* ========================================================== CART ========================================================== */ @media (max-width:768px){ .cart-product{ gap:.75rem; } .cart-product img{ width:70px; height:70px; } .cart-product-title{ font-size:.95rem; } .cart-summary{ margin-top:2rem; } } /* ========================================================== CHECKOUT ========================================================== */ @media (max-width:768px){ .checkout-title{ font-size:1.35rem; } .checkout-card{ padding:1.25rem; } } /* ========================================================== CONTACT ========================================================== */ @media (max-width:768px){ .contact-info{ margin-bottom:2rem; } .contact-form{ margin-top:2rem; } } /* ========================================================== FOOTER ========================================================== */ @media (max-width:768px){ .footer-top{ padding:50px 0 30px; } .footer-brand{ text-align:center; } .footer-links{ text-align:center; } .footer-newsletter{ margin-top:2rem; } } /* ========================================================== BUTTONS ========================================================== */ @media (max-width:768px){ .btn-lg{ width:100%; } } /* ========================================================== RESPONSIVE 576px ========================================================== */ @media (max-width:576px){ .container{ padding-left:15px; padding-right:15px; } .section-padding{ padding:50px 0; } } /* ========================================================== HERO ========================================================== */ @media (max-width:576px){ .hero{ padding:50px 0; } .hero-title{ font-size:1.85rem; line-height:1.35; } .hero-text{ font-size:.95rem; } .hero-buttons{ gap:.75rem; } } /* ========================================================== PAGE HEADER ========================================================== */ @media (max-width:576px){ .page-header{ padding:40px 0; } .page-header h1{ font-size:1.75rem; } } /* ========================================================== SECTION TITLE ========================================================== */ @media (max-width:576px){ .section-title{ margin-bottom:2rem; } .section-title h2{ font-size:1.55rem; } } /* ========================================================== PRODUCTS ========================================================== */ @media (max-width:576px){ .product-body{ padding:1rem; } .product-title{ font-size:.95rem; } .current-price{ font-size:1.05rem; } .old-price{ font-size:.85rem; } .product-actions{ gap:.35rem; } .product-actions a{ width:38px; height:38px; } } /* ========================================================== PRODUCT DETAIL ========================================================== */ @media (max-width:576px){ .product-detail-title{ font-size:1.55rem; } .product-detail-price{ font-size:1.45rem; } .quantity-box{ flex-wrap:wrap; } } /* ========================================================== CART ========================================================== */ @media (max-width:576px){ .cart-product{ flex-direction:column; text-align:center; } .cart-product img{ width:100px; height:100px; } .cart-quantity{ justify-content:center; } .summary-item, .summary-total{ font-size:.95rem; } } /* ========================================================== CHECKOUT ========================================================== */ @media (max-width:576px){ .checkout-title{ font-size:1.25rem; } .checkout-card{ padding:1rem; } } /* ========================================================== CONTACT ========================================================== */ @media (max-width:576px){ .contact-info .card{ text-align:center; } .contact-form textarea{ min-height:150px; } } /* ========================================================== FOOTER ========================================================== */ @media (max-width:576px){ .footer-top{ padding:40px 0 20px; } .footer-title{ font-size:1.1rem; } .footer-social a{ width:40px; height:40px; } .footer-payments i{ font-size:1.7rem; } } /* ========================================================== BUTTONS ========================================================== */ @media (max-width:576px){ .btn{ width:100%; } .error-actions .btn, .hero-buttons .btn, .cta .btn{ max-width:100%; } } /* ========================================================== BACK TO TOP ========================================================== */ @media (max-width:576px){ .back-to-top{ width:45px; height:45px; right:15px; bottom:15px; } } /* ========================================================== RESPONSIVE 400px ========================================================== */ @media (max-width:400px){ html{ font-size:15px; } .container{ padding-left:12px; padding-right:12px; } } /* ========================================================== HERO ========================================================== */ @media (max-width:400px){ .hero{ padding:40px 0; } .hero-title{ font-size:1.6rem; line-height:1.4; } .hero-subtitle{ font-size:.80rem; padding:.45rem .80rem; } .hero-text{ font-size:.90rem; } } /* ========================================================== PAGE HEADER ========================================================== */ @media (max-width:400px){ .page-header{ padding:35px 0; } .page-header h1{ font-size:1.5rem; } } /* ========================================================== PRODUCTS ========================================================== */ @media (max-width:400px){ .product-body{ padding:.85rem; } .product-title{ font-size:.90rem; } .product-category{ font-size:.75rem; } .current-price{ font-size:1rem; } .old-price{ font-size:.80rem; } .product-actions a{ width:34px; height:34px; font-size:.85rem; } .product-badge .badge{ font-size:.70rem; } } /* ========================================================== PRODUCT DETAIL ========================================================== */ @media (max-width:400px){ .product-detail-title{ font-size:1.35rem; } .product-detail-price{ font-size:1.25rem; } .product-thumbnail{ width:60px; } } /* ========================================================== CART ========================================================== */ @media (max-width:400px){ .cart-product img{ width:80px; height:80px; } .cart-product-title{ font-size:.90rem; } .cart-quantity input{ width:55px; } .cart-quantity .btn{ width:34px; height:34px; } } /* ========================================================== TABLES ========================================================== */ @media (max-width:400px){ .table{ font-size:.80rem; } } /* ========================================================== BUTTONS ========================================================== */ @media (max-width:400px){ .btn{ padding:.65rem 1rem; font-size:.90rem; } } /* ========================================================== FOOTER ========================================================== */ @media (max-width:400px){ .footer-title{ font-size:1rem; } .footer-social{ gap:.50rem; } .footer-social a{ width:36px; height:36px; font-size:.90rem; } .footer-payments{ gap:.50rem; } .footer-payments i{ font-size:1.4rem; } } /* ========================================================== BACK TO TOP ========================================================== */ @media (max-width:400px){ .back-to-top{ width:40px; height:40px; font-size:1rem; right:12px; bottom:12px; } } /* ========================================================== MODAL ========================================================== */ @media (max-width:400px){ .modal-body{ padding:1rem; } } /* ========================================================== MOBILE LANDSCAPE ========================================================== */ @media (max-width:992px) and (orientation:landscape){ .hero{ padding:40px 0; } .page-header{ padding:35px 0; } .hero-title{ font-size:2rem; } .hero-image img{ max-height:320px; object-fit:contain; } .section-padding{ padding:45px 0; } } /* ========================================================== SMALL HEIGHT DEVICES ========================================================== */ @media (max-height:600px){ .hero{ min-height:auto; padding:40px 0; } .page-loader{ display:none; } } /* ========================================================== LARGE DESKTOP ========================================================== */ @media (min-width:1600px){ .container{ max-width:1480px; } .hero-title{ font-size:3.6rem; } } /* ========================================================== RESPONSIVE UTILITIES ========================================================== */ @media (max-width:992px){ .mobile-center{ text-align:center !important; } .mobile-hide{ display:none !important; } .mobile-w-100{ width:100% !important; } } @media (min-width:993px){ .desktop-hide{ display:none !important; } } /* ========================================================== RESPONSIVE SPACING ========================================================== */ @media (max-width:768px){ .mobile-mb-1{ margin-bottom:1rem !important; } .mobile-mb-2{ margin-bottom:2rem !important; } .mobile-mt-1{ margin-top:1rem !important; } .mobile-mt-2{ margin-top:2rem !important; } } /* ========================================================== IMAGE HELPERS ========================================================== */ @media (max-width:768px){ img{ max-width:100%; height:auto; } } /* ========================================================== PRINT ========================================================== */ @media print{ *{ box-shadow:none !important; text-shadow:none !important; } body{ background:#fff !important; color:#000 !important; } .navbar, .top-bar, .site-footer, .back-to-top, .page-loader, .search-overlay, .btn, .dropdown, .offcanvas, .modal, .pagination{ display:none !important; } a{ color:#000 !important; text-decoration:none !important; } .container{ width:100% !important; max-width:100% !important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ========================================================== DARK MODE PREPARATION ========================================================== */ @media (prefers-color-scheme:dark){ body.auto-dark{ color-scheme:dark; } } /* ========================================================== FINAL RESPONSIVE FIXES ========================================================== */ @media (max-width:768px){ .table-responsive{ border-radius:0; } .dropdown-menu{ min-width:100%; } .modal-dialog{ margin:1rem; } .toast{ width:100%; } }