/* LARGE DESKTOP */
@media (max-width:1400px){
    .container{width:95%;}
}
/* LAPTOP */
@media (max-width:1200px){
    .container{width:95%;}
}
/* TABLET */
@media (max-width:992px){
    .section{ padding:50px 0; }
    .section-header{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:20px; }
    .section-title{ font-size:2rem; margin-bottom:10px; }
    .section-subtitle{ margin-bottom:0; }
}
/* MOBILE */
@media (max-width:768px){
    .container{ width:100%; padding-inline:20px;}
    .section{padding:40px 0;}
    .section-title{ font-size:1.75rem; margin-bottom:8px;}
    .section-subtitle{ font-size:15px; line-height:1.7;}
    .section-link{font-size:15px;}
}

/* SMALL MOBILE */
@media (max-width:576px){
    .container{ padding-inline:15px;}
    .section{ padding:35px 0;}
    .section-title{font-size:1.5rem;}
    .section-subtitle{ font-size:14px;}
    .section-link{font-size:14px;}
}

/* ==========================================
   HERO RESPONSIVE
========================================== */
@media (max-width:768px){ 
    .hero{ padding:50px 0 70px; } 
    .hero-content{ grid-template-columns:1fr; gap:40px; text-align:center; justify-items:center; } 
    .hero-text{ max-width:600px; } 
    .hero-text .hero-title{ font-size:1.8rem; } 
    .hero-buttons{ justify-content:center; } 
    .hero-image{ width:100%; display:flex; justify-content:center; align-items:center; } 
    .hero-image img{ width:100%; max-width:420px; margin:0 auto; } 
}

@media (max-width:576px){
    .hero{ padding:40px 0 60px; }
    .hero-content{ gap:30px; }
    .hero-text .hero-title{ font-size:1.5rem; }
    .hero-text p{ font-size:.95rem; line-height:1.7; margin-bottom:25px; }
    .hero-buttons{ flex-direction:column; width:100%; }
    .hero-buttons .btn{ width:100%; }
    .hero-image img{ max-width:320px; }
}

/* ===========================
   HEADER RESPONSIVE
=========================== */
@media (max-width:992px){
    .menu-toggle{ display:block; }
    .nav-search{ display:none; }
    .main-nav{ display:none; position:absolute; top:86px; left:0; width:100%; background:#fff; border-top:1px solid var(--border); }
    .main-nav.active{ display:block; }
    .menu{ flex-direction:column; gap:0; }
    .menu > li > a{ line-height:1.4; padding:15px 20px; border-bottom:1px solid var(--border); }
    .submenu{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; display:none; padding-left:20px; }
    .has-submenu.active .submenu{ display:block; }
}

/* ===========================
  PRODUCT GRID RESPONSIVE
=========================== */
/* Large Laptop */
@media(max-width:1200px){ 
    .product-grid{ grid-template-columns:repeat(3,1fr);}
}
/* Tablet */
@media (max-width:992px){
    .product-grid{ grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .product-grid{ grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
    .product-grid{grid-template-columns:1fr;}
    .section-header{ flex-direction:column; align-items:flex-start; gap:15px;}
}

/* ==========================================
   CATEGORY GRID RESPONSIVE
========================================== */
 @media(max-width:1200px){ 
     .category-grid{ grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
    .category-grid{ grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){ 
    .category-grid{ grid-template-columns:1fr;}
}


/* ==========================================
   WHY GRID RESPONSIVE
========================================== */
@media(max-width:1200px){
    .why-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
    .why-grid{grid-template-columns:1fr;}
}

/* ==========================================
   FOOTER RESPONSIVE
========================================== */
@media (max-width:1200px){
    .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:992px){
    .footer-grid{ grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .footer-grid{grid-template-columns:1fr;}
    .footer-category-list, .footer-brand-list{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
    .footer-category-list, .footer-brand-list{ grid-template-columns:1fr;}
}

/* ==========================================
  PAGE HEADER RESPONSIVE
========================================== */
@media (max-width:992px) {
    .page-header{ padding:10px 0; }
    .page-header-content{ grid-template-columns:1fr; text-align:center; gap:35px; }
    .page-header p{ margin:auto; }
}
@media (max-width:768px) {    
    .page-header{ padding:10px 0; }
    .page-header h1{ margin-bottom:15px; }
    .page-header p{ font-size:16px; }
}

/* ==========================================
   CONTENT AREA RESPONSIVE
========================================== */
@media (max-width:992px) {
    .content-area{ max-width:100%; }
}
@media (max-width:768px) {    
    .content-area h2{ font-size:1.7rem; margin-top:40px; }
    .content-area h3{ font-size:1.3rem; }
    .content-area table{ display:block; overflow-x:auto; }
    .cta-box{ padding:45px 25px; }    
}
@media (max-width:576px) {
    .content-area h2{ font-size:1.5rem; }
    .content-area h3{ font-size:1.2rem; }
    .content-area blockquote{ padding:20px; }
    .cta-box{ border-radius:16px; }
}

/* ==========================================
   CTA BOX CONTENT AREA RESPONSIVE
========================================== */
@media (max-width:768px) {    
    .cta-box{ padding:45px 25px; }    
}
@media (max-width:576px) {
    .cta-box{ border-radius:16px; }
}
@media (max-width:576px) {
    .cta-box{ border-radius:16px; }
}
/* ==========================================
   CONTACT WRAPPER RESPONSIVE
========================================== */
@media (max-width:992px) {
    .contact-wrapper{ grid-template-columns:1fr;} 
}
@media (max-width:768px) {  
    .contact-form{ padding:30px; }
    .form-grid{ grid-template-columns:1fr; gap:0; }
    .contact-map iframe{ height:350px; }    
}
@media (max-width:576px) {
    .contact-form{ padding:25px; }
    .captcha-row{ flex-direction:column; align-items:flex-start; }
    .captcha-row input{ width:100%; min-width:100%; }
}
/* ==========================================
   BREADCRUMB RESPONSIVE
========================================== */
@media (max-width:768px) {    
    .breadcrumb{ padding:12px 0; }
    .breadcrumb-list{ gap:8px; }
    .breadcrumb-list li{ font-size:13px; }
    .breadcrumb-list svg{ width:12px; height:12px; }
}
/* ==========================================
   BACK TO TO RESPONSIVE
========================================== */
@media (max-width:768px) {    
    .back-to-top { width:46px; height:46px; right:20px; bottom:20px; }
    .back-to-top svg { width:20px; height:20px; }
}

/* ==========================================
   PAGINATION RESPONSIVE
========================================== */
@media (max-width:576px) {
    .pagination{ gap:8px; }
    .pagination a{ width:40px; height:40px; font-size:14px; }
}

/* ==========================================
   ERROR RESPONSIVE
========================================== */
@media (max-width:576px) {
    .error-404{ padding:60px 0; }
    .error-code{ font-size:5rem; }
    .error-box p{ font-size:16px; }
    .error-search form{ flex-direction:column; border:none; box-shadow:none; background:none; gap:12px; }
    .error-search input{ width:100%; border:1px solid var(--border); border-radius:12px; background:#fff; }
    .error-search button{ width:100%; border-radius:12px; }
    
    .error-code{ font-size:4rem; }
    .error-buttons{ flex-direction:column; align-items:center; }
    .error-buttons .btn,.error-buttons .btn-outline{ width:220px; }
}

/* ==========================================
   TOOLBAR RESPONSIVE
========================================== */
@media (max-width:768px){
    .category-toolbar{ flex-direction:column; align-items:flex-start; padding:18px;}
    .toolbar-sort{ width:100%; justify-content:space-between;}
    .toolbar-sort select{width:180px;}
}