@media (max-width: 1400px) {
  :root {
    --margin-60: 40px;
    --margin-100: 80px;
  }
  .product-container {
    gap: 30px;
  }

  .main-image {
    width: 500px;
    height: 500px;
  }
}
@media (max-width: 1200px) {
  .footer-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  .about-wrapper,
  .philosophy-wrapper {
    gap: 50px;
  }

  .about-us-grid {
    gap: 50px;
  }

  .about-features-section h4 {
    margin-bottom: 100px;
  }
  .cart-summary {
    width: 400px;
  }

  .order-info-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hours {
    gap: 60px;
  }

  .store-bottom {
    gap: 20px;
    flex-wrap: wrap;
  }
  .reels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .information-container {
    grid-template-columns: 320px 1fr;
    gap: 40px;
  }

  .information-sidebar-inner {
    padding: 20px;
  }

  .information-nav-link {
    padding: 18px 0;
    gap: 12px;
  }
  .service-grid {
    gap: 50px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sign-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-areas-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  .warning-wrapper {
    flex-direction: column;
  }

  .warning-card {
    width: 100%;
  }
  .products-listing-grid {
    grid-template-columns: 280px 1fr;
    gap: 20px;
  }

  .products-listing-grid .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .product-container {
    padding: 40px;
    gap: 30px;
  }

  .main-image {
    width: 100%;
    max-width: 450px;
    height: auto;
  }

  .product-tabs {
    padding: 30px;
  }
}
@media (max-width: 991px) {
  :root {
    --font-64: 52px;
    --font-54: 46px;
    --font-48: 40px;
    --font-40: 34px;
    --font-36: 30px;
    --margin-60: 30px;
    --margin-100: 60px;

    --margin-160: 100px;
  }
  .main-header-inner {
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 0;
  }

.main-header.sticky   .main-header-inner{
    gap:9px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
            padding: 5px 0;
}
.product-image img {

    height: 272px;
    object-fit: contain;

}
   .main-header.sticky  .category-btn {
       
        justify-content: center;

    }
  .logo img {
    width: 180px;
  }

  .category-wrapper {
    order: 2;
  }
  /* .category-btn span {
    display: none;
  } */
  .category-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: 6px;
    padding: 14px 15px;
  }

  .search-box {
    width: 100%;
    order: 3;
    flex: auto;
  }

  .header-actions {
    width: 100%;
    order: 4;
           justify-content: space-around;
  }

  .header-icon-box,
  .cart-box {
    
    justify-content: center;
  }

  .cart-box {
    padding: 12px;
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  .blog-wrapper {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    max-width: 100%;
  }

  .article-card {
    grid-template-columns: 1fr;
  }

  .blog-img {
    height: 300px;
  }

  .blog-content {
    padding: 24px;
  }

  .blog-bottom {
    grid-template-columns: 1fr;
  }

  .consultation-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .consultation-content {
    max-width: 100%;
  }

  .blog-post-nav-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .blog-post-nav-item,
  .next {
    max-width: 100%;
    text-align: left;
  }

  .next .blog-post-nav-label {
    justify-content: flex-start;
  }

  .blog-hero {
    height: 450px;
  }

  .blog-header {
    margin-bottom: 50px;
  }
  .cart-grid,
  .checkout-grid,
  .checkout-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .cart-summary,
  .order-summary-card {
    width: 100%;
  }

  .cart-item-actions {
    gap: 30px;
  }

  .order-info-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .payment-section {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  .contact-row {
    flex-direction: column;
  }

  .hours {
    gap: 30px;
    flex-wrap: wrap;
  }

  .store-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .google-map-btn {
    width: 100%;
    justify-content: center;
  }

  .store-map {
    height: 300px;
  }
  .account-grid {
    grid-template-columns: 300px 1fr;
    gap: 16px;
  }

  .account-menu a {
    padding: 14px 20px;
  }

  .service-grid {
    flex-direction: column;
    text-align: center;
  }

  .service-content .btn {
    margin: 0 auto;
  }

  .emergency-banner-container {
    flex-direction: column;
    text-align: center;
    padding: 0 40px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-left .btn {
    margin: 0 auto;
  }

  .service-areas-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-areas-search {
    max-width: 100%;
  }
  .products-listing-grid {
    grid-template-columns: 1fr;
    gap:10px;
  }

  .product-sidebar {
    width: 100%;
    padding: 24px;
  }

  .products-listing-grid .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    
  }

  .product-container {
    flex-direction: column;
    padding: 30px;
  }

  .product-section {
    flex-direction: column;
    width: 100%;
  }

  .product-thumbnails {
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    order: 2;
    padding-bottom: 10px;
  }

  .main-image {
    max-width: 100%;
    width: 100%;
    order: 1;
  }

  .product-info {
    width: 100%;
  }

  .product-tabs {
    padding: 24px;
  }
}
@media (max-width: 768px) {
  :root {
    --margin-160: 80px;

    --font-18: 15px;
    --font-20: 16px;
    --font-22: 18px;
    --font-24: 19px;
    --font-26: 20px;
    --font-28: 22px;
    --font-30: 24px;
    --font-32: 18px;
    --font-36: 28px;
    --font-40: 30px;
    --font-48: 32px;
    --font-54: 36px;
    --font-64: 40px;
  }
 .search-content h5 {
    margin: 0;
    font-size: 12px;
}
  .blog-content {
    padding: 24px 15px;
  }
.checkout-content-wrapper {
    flex: 1;
    width: 100%;
}
.bb-product-content h4 {
    margin: 0 0 8px;
    font-size: 14px;
   
   
}
/*.bb-product {*/
/*   gap:5px;*/
/*    flex-direction: column;*/
/*}*/
.bb-product-price .price {
    font-size: 18px;
   
}
.category-dropdown {
    max-height: 350px; 
    overflow-y: auto;
    overflow-x: hidden;
}

  .logo {
            width: auto;
    text-align: center;
  }
    .main-header.sticky .logo{
      width: auto;   
    }  
  .logo img {
    width: 160px;
    /* margin: 0 auto; */
  }

  .category-btn {
    padding: 12px 0;
  }
.cart-box span{
    display:none;
}
.cart-box span.cart-count{
    display:flex;
}

  .search-box {
    height: 48px;
  }

  .search-box input {
    padding: 12px 15px;
  }

  .search-btn {
    width: 50px;
    height: 48px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-icon-box {
    padding: 10px;
            BACKGROUND: TRANSPARENT;
  }

  .cart-box {
    gap: 6px; BACKGROUND: TRANSPARENT;
  }
  .cart-header {
    padding: 20px 20px 0;
  }
  .cart-body {
    padding: 0 20px 16px;
    height: auto;
    min-height: 0;
  }
  .cart-item {
    gap: 5px;
  }

  .category-dropdown {
    left: auto;
    top: calc(100% + 10px);
    right: 0;
  }
  .contact-info,
  .top-header-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .hero {
    padding: 60px 30px;
    height: auto;
    min-height: 600px;
  }
/*.products-section .products-grid .product-card .product-content {*/
/*    min-height: 210px;*/
/*}*/
/*.product-content {*/

/*    min-height: 300px;*/
/*}*/
  .hero-content h1 {
    line-height: 1.2;
  }

  .auto-parts-grid,
  .promo-banner-grid,
  .auto-banner-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 0;
    gap: 35px;
  }

  .logo-box {
    margin: 0 auto;
  }

  .social-icons {
    justify-content: center;
    margin-top: 20px;
  }

  .contact-item {
    justify-content: center;
  }

  
.footer-bottom-bar {
    display: flex;
   
    flex-direction: column;
    gap: 10px;
}
  .payment-icons img {
    height: 45px;
  }

  .copyright {
    line-height: 24px;
  }

  .hero {
    padding: 50px 20px;
    text-align: center;
    min-height: auto;
  }

  .hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vehicle-filter-section,
  .brands-section,
  .blog-section {
    margin: 40px 0;
  }

  .vehicle-filter {
    padding: 25px 20px;
  }

  .filter-row {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
.products-listing-grid .products-grid,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px
  }

.related-products .products-grid{
   grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px 
}
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .promo-banner-card,
  .auto-banner-card {
    height: auto;
    min-height: 320px;
    padding: 40px 25px;
  }

  .deal-product-card {
    width: min(320px, calc(100vw - 48px));
    max-width: 100%;
    padding: 20px;
  }

  .new-products-card {
    /*width: 100%;*/
    height: auto;
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-item {
    height: 140px;
  }

  .features-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-item {
    width: 100%;
    flex-direction: column;
  }
  .feature-content{
    text-align:center;
  }
  .about-content h4,
  .philosophy-content h4,
  .about-us-content h4,
  .about-features-section h4 {
    margin-bottom: 20px;
  }

  .about-content p,
  .about-us-content p,
  .philosophy-content p,
  .about-feature-card p,
  .philosophy-card-content p {
    line-height: 24px;
  }

  .about-content .btn,
  .about-us-content .btn {
    max-width: 100%;
  }

  .philosophy-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 24px;
  }

  .philosophy-icon-box {
    width: 75px;
    height: 75px;
  }
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 100% !important;
    
}
  .about-us-list li {
    gap: 12px;

    margin-bottom: 18px;
  }

  .about-features-wrapper {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .about-feature-card {
    padding: 60px 20px 24px;
  }

  .about-features-section h4 {
    margin-bottom: 80px;
  }
  .hero-section {
    height: 220px;
    padding: 0 20px;
  }

  .hero-section .breadcrumb {
    top: 16px;
  }

  .blog-content h3 {
    margin-bottom: 24px;
  }

  .blog-content p {
    margin-bottom: 16px;
  }

  .blog-hero {
    height: 320px;
    margin-top: 24px;
  }

  .blog-overlay-content p {
    padding: 0 20px;
  }

  .popular-post {
    flex-direction: column;
  }

  .popular-post img {
    width: 100%;
    height: 220px;
  }

  .blog-sidebar {
    padding: 20px;
  }

  .blog-bottom {
    gap: 20px;
    margin-top: 50px;
  }

  .info-card {
    padding: 20px;
  }

  .yellow-line {
    width: 120px;
    height: 5px;
  }

  .battery-consultation-section {
    min-height: auto;
    padding: 80px 0;
  }

  .consultation-content h4 {
    margin-bottom: 16px;
  }

  .consultation-list li {
    text-align: left;
  }

  .consultation-message {
    padding: 14px 16px;
  }

  .contact-button {
    width: 100%;
    justify-content: center;
  }

  .blog-post-navigation {
    padding: 50px 20px;
  }

  .Similar-blog {
    padding: 50px 0;
  }

  .cart-delivery {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .cart-delivery-content {
    align-items: flex-start;
  }

  .cart-table-item {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px;
  }

  .cart-item-info {
    width: 100%;
  }

  .cart-item-actions {
    width: 100%;
    justify-content: space-between;
    gap: 15px;
  }

  .cart-product-image img {
    width: 80px;
  }

  /*.quantity-box {*/
  /*  min-width: 120px;*/
  /*  height: 44px;*/
  /*}*/

  .quantity-btn {
    width: 44px;
    height: 44px;
  }

  .cart-table-product-price {
    width: auto;
  }

  /*
   * Cart page row (mobile): photo/name/delete on top, qty/price below.
   * Scoped to .cart-table so the checkout review / view-order pages
   * (which reuse the same class names in their own markup) keep their
   * existing mobile behavior untouched.
   */
  .cart-table .cart-table-item {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "photo name delete"
      "qty qty price";
    row-gap: 12px;
    column-gap: 14px;
    padding: 16px;
            flex-direction: column;
        display: flex;
  }
.order-additional-details {
   padding: 20px;
}
  .cart-table .quantity-box {
    width: auto;
    min-width: 120px;
    height: 44px;
  }

  .cart-table .cart-table-product-price {
    justify-self: end;
  }

  .cart-row,
  .cart-total {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkout-row {
    flex-direction: column;
    gap: 0;
  }

  .checkout-form-card,
  .payment-section,
  .Order-summary {
    padding: 20px;
  }

  .payment-header {
    padding: 18px;
  }

  .card-body {
    padding: 18px;
  }

  .order-info-card-grid {
    grid-template-columns: 1fr;
  }

  .order-info-card-card {
    grid-template-columns: 70px 1fr;
    padding: 20px;
  }

  .order-info-card-icon {
    width: 70px;
    height: 70px;
  }

  .order-info-card-icon img {
    width: 32px;
    height: 32px;
  }

  .success-buttons {
    flex-direction: column;
    align-items: center;
  }

  .success-icon img {
    width: 140px;
    height: 140px;
  }
  .reels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .information-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .information-sidebar {
    position: relative;
    top: auto;
  }

  .information-sidebar-inner {
    padding: 18px;
  }

  .information-nav-link {
    padding: 14px 0;
  }

  .information-section {
    padding-bottom: 40px;
  }
  .login-page,
  .sign-up-page,
  .forgot-password-page,
  .reset-password-page {
    padding-bottom: 100px;
  }

  .auth-container {
    padding: 24px;
  }

  .login-tabs,
  .sign-up-tabs {
    flex-direction: row;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    /* position: sticky; */
    top: 18%;
    z-index: 10;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
  }

  .account-menu {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
  }

  .account-menu li {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .account-menu a {
    white-space: nowrap;
    padding: 12px 16px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
.feature-grid.grid-3 {
   grid-template-columns: repeat(1, 1fr);
}
  .sign-grid {
    grid-template-columns: 1fr;
  }

  .service-areas-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-areas-content {
    padding: 20px;
  }

  .warning-content {
    padding: 25px;
  }

  .emergency-banner-container {
    padding: 0 20px;
  }
 
  .product-container {
    margin-top: 40px;
  }
  /*.products-listing-grid .products-grid {*/
  /*  grid-template-columns: 1fr;*/
  /*}*/

  .product-container {
    padding: 20px;
  }

  .product-thumb,
  .see-all {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }

  .product-thumb img {
    width: 70px;
  }

  .product-cart-row {
    flex-wrap: wrap;
  }

  .product-add-cart {
    flex: 1 1 100%;
    padding: 15px 30px;
  }

 
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 5px;
  }
  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: initial;
  }
  .header-right {
    gap: 6px;
   
   
}
.top-header {
  
    display: none;
}
.header-search {
    order:3;
    
}

 .mobile-header-actions{
        display:flex;
               
        background:var(--primary);
      
        position: fixed;
        bottom: 0;
                z-index: 99999;
    }
    
 .desktop-header-actions{
        display:none;
    }
    .cart-count {
    color: var(--black);
    
}
.header-icon-box {
    width:28px;
}
.mobile-search-bar{
       display:none;
    }
   
 .main-header.sticky    .header-search {
  
    flex: none;
}
.product-image img {
    width: 100%;
    height: 150px;
    display: block;
    transition: transform 0.35s ease;
    object-fit: contain;
}
.product-image .products-icon-btn img{
  width:25px;
  height:25px;
}
.tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
            top: 70px;
        position: sticky;
        z-index: 100;
        background: #fff;
}
 .sidebar-wrapper{
      display: flex;
    flex-wrap: wrap;
    gap: 5px;
    position: sticky;
    top: 0px;
    z-index: 2;
    background: var(--medium-gray);
    padding: 10px 0 10px;
  }
    .product-sidebar{
     width: fit-content;  
     padding: 0px;
        }
   .check-item {
   
    grid-template-columns: 1fr 26fr;
    gap: 10px;
       
   }
   .new-products-card {
    width: min(250px, calc(100vw - 48px));
    max-width: 100%;
    background-color: var(--white);
    border-radius: 6px;
   }
   .new-products-card {
    padding: 20px;
}
   .price-range-slider {
    padding: 2px 8px 0;
    width: 98%;
    margin: 0px auto;
}.category-tree .category-tree-item {
 
    padding: 0 10px;
}
.products-listing-section .filter-header .product-sidebar .sidebar-content {
    position: absolute;
    background: #fff;
    z-index: 40;
    display: flex;
    justify-content: center;
       align-items: flex-start;
    width: auto;
    left: 0;
    right: 0;
    padding-bottom: 10px;
    margin-top: 5px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
}
/*.category-btn {*/
/*    font-size: var(--font-14);*/
/*}*/
.filter-clear-all-btn {
   padding: 8px;
 
}.sort-label {
  
    font-size: 11px;
}.product-sidebar h6 {
    font-size: 14px;
}
.sort-btn {
  padding: 5px;
    }
    .products-count {
    font-size: 14px;
   
}
.selected-text {
   font-size: var(--font-14);
}
.dropdown-item {
     font-size: var(--font-14);
}
  .dropdown-item {
    text-align: left;
     padding: 10px;
}

.products-listing-section .shop-toolbar {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-clear-all{
  background: transparent;    
          padding: 0;
}
.sidebar-header {
   gap: 8px;
      padding: 8px;
}
.product-sidebar {
   margin-bottom: 0px;
}
.product-title {
   font-size: 14px;
}
.product-card .products-cart-btn {
   padding: 16px;
   text-align: left;
}
  .main-header-inner {
    gap: 9px;
    justify-content: space-between;
  }
   .product-details-meta {
    gap: 20px;
  }

  .product-tabs-buttons {
    gap: 20px;
  }
.products-listing-section .shop-toolbar {
    display: block;
}.products-count {
  
    order: 2;
}
.empty-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.contact-row {
    gap: 0px;
}
.contact-info-item {
   
    padding: 20px 0;
}
.sort-dropdown{
    order:1;
}
.bb-stats{
   gap: 10px;
   margin-bottom: 20px;
}.bb-account-grid {
    gap: 10px;
}
.account-card .icon {
    width: 30px;
    height: auto;
}
.header-right {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    flex-direction: column;
}
  .sort-dropdown {
   width: fit-content;
  }
.section-header h4 {

    text-align: left;
    margin-bottom: 10px;
}
/*.category-tree .category-tree {*/
/*    overflow-y: auto;*/
/*    height: 435px;*/
/*}*/
.custom-edit-account .account-card {
    padding: 20px !important;
  }
   .custom-edit-account .form-row {
     margin-bottom: 0px!important; 
} .woocommerce-EditAccountForm [class*="col-"] {

    margin-bottom: 15px!important;
}
}
@media (max-width: 576px) {
  :root {
    --margin-160: 50px;
  }

  .logo img {
    width: 140px;
  }
  .auto-parts-content {
    width: 100%;
    max-width: 450px;
    margin-bottom: 15px;
  }
  .header-actions {
    flex-wrap: wrap;
  }

  .desktop-header-actions .header-icon-box {
    width: 102px;
    height: 48px;
    flex: unset;
  }
  .header-icon-box img {
      width:30px;
  }
  .cart-box img {
    width: 30px;
}
 .account-dropdown {
    left: 50%;
    right: auto;  transform: translateX(-50%);
   
}.product-tabs {
   
    margin-bottom: 40px;
}
.account-dropdown.active {
    transform: translateX(-50%);
    
}
  /*.cart-box {*/
  /*  flex: 1;*/
  /*  min-width: 120px;*/
  /*}*/

  .category-btn {
    gap: 10px;
  }
  .hero {
    padding: 40px 15px;
  }

  /*.products-grid {*/
  /*  grid-template-columns: 1fr;*/
  /*}*/

  .tabs {
    grid-template-columns: 1fr;
  }
  .discount-badge {
    align-self: center;
  }
  .product-content {
    padding: 10px;
  }

  .deal-product-card {
    /*width: 280px;*/
    flex-direction: column;
    text-align: center;
  }
  .price-container {
    justify-content: center;
  }
  .deal-image-container {
    width: 100px;
    height: 100px;
  }

  .auto-banner-content,
  .promo-banner-content {
    max-width: 100%;
  }

  .auto-banner-btn,
  .promo-banner-btn {
    padding: 12px 22px;
  }

  .brands-grid {
    grid-template-columns: 1fr;
  }

  .brand-item {
    border-right: none;
    border-bottom: 1px solid var(--border-gray);
  }

  .brand-item:last-child {
    border-bottom: none;
  }

  .brand-item img {
    max-width: 140px;
  }
  .payment-icons img {
    height: 38px;
  }

  .social-icons a {
    width: 36px;
    height: 36px;
  }

  .about-wrapper,
  .philosophy-wrapper,
  .about-us-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
  }

  .commitment-box {
    padding: 20px;
  }

  .philosophy-card {
    padding: 20px;
  }

  .about-feature-icon {
    width: 75px;
    height: 75px;
    top: -55px;
  }

  .about-feature-icon img,
  .philosophy-icon-box img {
    width: 34px;
    height: auto;
  }

  .about-feature-card {
    padding: 55px 16px 20px;
  }

  .about-us-list li {
    align-items: flex-start;
  }

  .about-us-list img {
    width: 36px;
    height: 36px;
  }

  .wrapper {
    padding: 0px;
  }

  .blog-img {
    height: 220px;
  }

  .blog-hero {
    height: 250px;
  }

  .info-card {
    padding: 16px;
  }

  .info-card h5 {
    margin-bottom: 16px;
  }
  .date-icon img {
    width: 14px;
    height: auto;
  }

  .cart-grid {
    padding: 40px 0 50px;
  }

  .cart-summary,
  .checkout-form-card,
  .payment-section,
  .Order-summary {
    padding: 16px;
  }

  .cart-table-item {
    padding: 15px;
  }

  .checkout-input,
  .checkout-select {
    padding: 12px;
  }

  .payment-header {
    gap: 10px;
  }

  .card-body .btn,
  .cart-summary .btn,
  .success-buttons .btn {
    max-width: 100%;
  }

  .payment-success-wrapper {
    margin: 40px auto;
  }

  .payment-success-wrapper h3 {
    margin-bottom: 15px;
  }

  .success-icon {
    margin-bottom: 25px;
  }

  .success-icon img {
    width: 110px;
    height: 110px;
  }

  .order-info-card-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .order-info-card-icon {
    margin: 0 auto;
  }
  .auth-container {
    margin-top: 40px;
  }

  .emergency-box,
  .contact-info-list,
  .contact-form {
    padding: 20px;
  }

  .contact-info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hours {
    flex-direction: column;
    gap: 20px;
  }

  .google-map-btn {
    padding: 12px 20px;
  }

  .reels-grid {
    grid-template-columns: 1fr;
  }

  .service-grid {
    gap: 30px;
  }

  .service-content p {
    margin-bottom: 30px;
  }

  .service-list li {
    gap: 12px;
  }

  .feature-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .feature-icon {
    margin: 0 auto;
  }

  .service-areas-tabs {
    grid-template-columns: 1fr;
  }

  .service-areas-location {
    width: 100%;
    justify-content: center;
  }

  .warning-wrapper {
    gap: 20px;
  }

  .warning-card {
    padding: 20px;
  }

  .social-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .social-buttons .btn {
    width: 100%;
  }
  .faq-icon {
    width: 28px;
    height: 28px;
  }
  .breadcrumb-section {
    padding-top: 15px;
  }

  .product-container {
    padding: 15px;
  }

  .main-image img {
    width: 85%;
    height: 85%;
  }

  .product-thumb,
  .see-all {
    width: 80px;
    height: 80px;
  }

  .product-thumb img {
    width: 55px;
  }

  /*
   * Stays a row (cart controls left, wishlist right) at every width,
   * matching the shop grid - .product-quantity no longer exists here
   * (this page shares the same add-to-cart/quantity-stepper component
   * as the shop grid and wishlist page), so nothing needs to force a
   * stacked layout for it any more.
   */
  .product-cart-row {
    flex-wrap: wrap;
  }

  /*.product-actions {*/
  /*  flex: 1 1 auto;*/
  /*  min-width: 0;*/
  /*}*/

  .ajax-cart-form,
  .product-add-cart {
    width: 100%;
  }

.search-toggle  img {
  max-width:20px;
}

  .product-tabs {
    padding: 16px;
  }

  .product-tabs-btn,
  h2.product-tabs-heading {
    font-size: 12px;
    padding-bottom: 12px;
  }

  .product-tabs-content {
    padding-top: 20px;
  }

  .product-tabs-spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .product-tabs-table {
    overflow-x: auto;
  }
  .product-section {
    gap: 15px;
  }
  .related-products .section-header{
      gap:0;
  }
}
@media (max-width: 480px) {
  .information-sidebar-inner {
    padding: 14px;
  }

  .bank-detail {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .login-page,
  .sign-up-page,
  .forgot-password-page,
  .reset-password-page {
    padding-bottom: 60px;
  }

  .auth-container {
    padding: 20px;
  }

  .auth-container p {
    margin-bottom: 18px;
  }

  .login-tabs,
  .sign-up-tabs {
    /*flex-direction: column;*/
    gap: 6px;
    padding: 8px;
  }

  .login-tab-btn,
  .sign-up-tab-btn {
    width: 100%;
    height: 44px;
  }

  .form-group input {
    height: 46px;
  }

  .options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .login-btn,
  .sign-up-btn,
  .forgot-password-btn,
  .reset-password-btn {
    height: 46px;
  }

  .auth-container {
    padding: 16px;
  }

  .account-user {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .account-menu a {
    padding: 10px 12px;
  }

  .account-user img {
    width: 45px;
    height: 45px;
  }
  .sidebar-content {
    gap: 12px;
  }

  .product-details-item {
    width: 100%;
  }

  .product-details-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-quantity button,
  .product-quantity span {
    width: 45px;
  }

  .product-tabs-title,
  .product-tabs-section-title {
    margin-top: 15px;
  }
}
@media (max-width: 767px) {
    
  .brands-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brands-section  .brands-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  .brand-item {
    height: 140px;
    border-right: 1px solid var(--border-gray);
  }

  .brand-item:nth-child(2n) {
    border-right: none;
  }

  .brand-item img {
    max-width: 120px;
    max-height: 60px;
  }
}



@media (max-width: 767px) {
  .cart-sidebar {
    width: 100%;
    right: -100%;
    height: 100vh;
    height: 100dvh;
  }

  .cart-sidebar.active {
    right: 0;
  }
}


/* ===========================
   MOBILE FILTER (0 - 991px)
=========================== */

@media (max-width:991px){

.sidebar-wrapper-desktop{
    display:none !important;
}

.sidebar-wrapper{
    display:flex;
    width:100%;
    height:100%;
    overflow:hidden;
    flex-direction: column;
}

/* Left Categories */
.product-sidebar{
    width:35%;
    margin:0;
    background:#f5f5f5;
    border-right:1px solid #e5e5e5;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.product-sidebar .sidebar-header{
    padding:14px;
    cursor:pointer;
    border-bottom:1px solid #ddd;
    background:#f5f5f5;
}

.product-sidebar.active .sidebar-header{
    background:#fff;
}

.product-sidebar .sidebar-arrow{
    display:none;
}

/* Right Content */
.product-sidebar .sidebar-content{
    display:none;
    width:65%;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:15px;
}

.product-sidebar.active .sidebar-content{
    display:block;
}

.filter-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    width: fit-content;
    height: fit-content;
}

.filter-btn img{
    width:18px;
    height:18px;
}
.header-right {
    display: flex;
    align-items: flex-start;
   gap: 10px;
  
    
}
.mobile-filter{
    position:fixed;
    inset:0;
    background:#fff;
    transform:translateX(-100%);
    transition:.35s ease;
    z-index:99999;

    display:flex;
    flex-direction:column;
}

.mobile-filter.active{
    transform:translateX(0);
    z-index: 100000;
}

.mobile-filter-header{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:5px 15px;
    border-bottom:1px solid #eee;
}

.mobile-filter-body{
    flex:1;
    overflow:auto;
    padding:0;
}

/* ==========================
   Mobile filter - per-section search (Categories/Brand/Model/Year)
========================== */

.mobile-filter-search{
    flex:0 0 auto;
    position:relative;
    width:100%;
    margin:0 0 12px;
}

.sidebar-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* Brand/Model/Year render a flat list of .check-item (unlike Product
   Category, which nests each .check-item inside .category-tree-item /
   .category-tree-row) - matching the category tree's own left inset
   here keeps checkbox alignment consistent across all four sections. */
.sidebar-scroll > .check-item{
    padding:0 10px;
}

.mobile-filter-search-input{
    width:100%;
    padding:10px 36px 10px 12px;
    border:1px solid #dfdfdf;
    border-radius:6px;
    font-size:var(--font-14);
    font-family:var(--font-family);
}

.mobile-filter-search-input:focus{
    outline:none;
    border-color:var(--primary);
}

.mobile-filter-search svg{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    color:#999;
    pointer-events:none;
}

.mobile-filter-search-empty{
    display:none;
    margin:8px 0 0;
    font-size:var(--font-14);
    color:#777;
}

.mobile-filter-footer{
    flex:0 0 auto;
    padding:15px;
    border-top:1px solid #eee;
    background:#fff;
    width: 100%;
    display: flex;
    justify-content: stretch;
    gap: 10px;
    margin: 0;
}

.apply-filter-btn{
       display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: .3s;
    font-weight: 600;
    background: var(--primary);
    color: var(--black);
    width: 100%;
}
.mobile-filter .filter-clear-all,
.filter-clear-all{
    display: none !important;
    position: static !important;
}
}
.filter-close{
    background:none;
    border:none;
    font-size:28px;
    cursor:pointer;
    color:var(--black);
}

.mobile-filter-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:99998;
}

.mobile-filter-overlay.active{
    opacity:1;
    visibility:visible;
}

body.filter-open{
    overflow:hidden;
}

}



@media (max-width:576px){

.product-sidebar{
    width:40%;
}

.product-sidebar .sidebar-content{
    width:60%;
}

.product-sidebar .sidebar-header{
    padding:12px 10px;
}

.product-sidebar .sidebar-header h6{
    font-size:14px;
}

}
@media (max-width: 991px) {

.sidebar-wrapper{
    position:relative;
    display:flex;
    width:100%;
    height:100%;
}
.filter-header{
      display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
}

.product-sidebar{
    width:30%;
    margin:0;
    background:#f5f5f5;
    border-right: none;
}

.product-sidebar .sidebar-header{
    
    background:#f5f5f5;
    border-bottom:1px solid #e5e5e5;
    cursor:pointer;
}

.product-sidebar.active .sidebar-header{
    background:#fff;
    border-left:3px solid var(--primary);;
    color:#000;
    font-weight:600;
}

.product-sidebar .sidebar-header h6{
    margin:0;
    font-size:12px;
}

.product-sidebar .sidebar-arrow{
    display:none;
}
.check-item {
  
    font-size: 14px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Right Side */
.product-sidebar .sidebar-content{
    display:none;
    position:absolute;
    left:30%;
    top:0;
    width:70%;
    height:100%;
    overflow-y:visible;
    flex-direction:column;
    background:#fff;
    padding:10px 0 0;
    border:none;
    margin-top: 0;
        border-radius: 0;
    }.product-image {
    height: 150px;

}
.product-sidebar.active .sidebar-content{
    display:flex;
}
}

.product-sidebar.active .sidebar-content{
    display:flex;
}

/* Scrollbars */
.sidebar-wrapper,
.product-sidebar,
.sidebar-content,
.sidebar-scroll{
    scrollbar-width:none;
}

.sidebar-wrapper::-webkit-scrollbar,
.product-sidebar::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar{
    display:none;
}
.category-tree {
 
    margin-bottom: 10px;
}
}

/* =========================================================
   Mobile menu + shop filters (phones are the primary storefront)
   ========================================================= */

@media (max-width: 991px) {

  .category-wrapper .category-dropdown,
  .category-dropdown {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .products-listing-section .shop-toolbar {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

  .products-listing-section .filter-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 0 12px;
    background: var(--medium-gray);
  }

  .products-listing-section .filter-header .header-right {
    flex: 1;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: 8px;
  }

  .products-listing-section .filter-header .products-count {
    display: none;
  }

  .products-listing-section .filter-header .sort-dropdown {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .products-listing-section .filter-header .sort-btn {
    min-height: 48px;
    padding: 10px 12px;
  }

  .filter-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--black);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .filter-btn img {
    width: 16px;
    height: 16px;
  }

  .mobile-filter-overlay {
    z-index: 100000;
  }

  .mobile-filter {
    position: fixed;
    inset: auto 0 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: min(92dvh, 100%);
    max-height: 100dvh;
    transform: translateY(110%);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.2);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-filter.active {
    transform: translateY(0);
  }

  .mobile-filter-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #eee;
  }

  .mobile-filter-header::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: #ddd;
  }

  .mobile-filter-header {
    position: relative;
    padding-top: 22px;
  }

  .mobile-filter-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }

  .filter-close {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 28px;
    line-height: 1;
    color: #111;
  }

  .mobile-filter-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-filter .sidebar-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    background: #fff;
    gap: 0;
  }

  .mobile-filter .filter-clear-all {
    display: none !important;
  }

  .mobile-filter .product-sidebar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-right: none !important;
    border-radius: 0;
    overflow: visible !important;
  }

  .mobile-filter .product-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 16px 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    border-left: none !important;
  }

  .mobile-filter .product-sidebar.active .sidebar-header {
    background: #fffbf0 !important;
    border-left: none !important;
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .mobile-filter .product-sidebar .sidebar-header h6 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 600;
  }

  .mobile-filter .product-sidebar .sidebar-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
  }

  .mobile-filter .product-sidebar.active .sidebar-arrow {
    transform: rotate(180deg);
  }

  .mobile-filter .product-sidebar .sidebar-content,
  .mobile-filter .product-sidebar.active .sidebar-content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 8px 16px !important;
    margin: 0 !important;
    border: none !important;
    background: #fff !important;
    overflow: visible !important;
    flex-direction: column !important;
  }

  .mobile-filter .product-sidebar .sidebar-content {
    display: none !important;
  }

  .mobile-filter .product-sidebar.active .sidebar-content {
    display: flex !important;
  }

  .mobile-filter .mobile-filter-search {
    margin: 8px 10px 12px;
  }

  .mobile-filter .mobile-filter-search-input {
    height: 46px;
    font-size: 16px;
    border-radius: 10px;
  }

  .mobile-filter .check-item {
    min-height: 48px;
    padding: 12px 10px;
    font-size: 15px;
    grid-template-columns: 20px 1fr;
    align-items: center;
  }

  .mobile-filter .category-tree-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .mobile-filter-footer {
    flex: none;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    background: #fff;
  }

  .mobile-filter-clear {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    color: #333;
  }

  .mobile-filter .apply-filter-btn {
    flex: 1;
    width: auto;
    min-height: 48px;
  }

  .mobile-filter .price-range-slider {
    padding: 12px 16px 8px;
  }

  .mobile-filter .price-range-handle {
    width: 28px;
    height: 28px;
  }

}