@media (max-width: 1441px) {
  /* styles here apply at 1440px and below, 
     but NOT when the screen is wider than 1440px */

  .bs-thumb-wrapper {
    min-height: 225px;
    width: 100%;
  }

}


@media (max-width: 576px) {

  /* mobile styling here */



  .free-shipping {
    width: 100%;
    text-align: center;
  }

  .top-header-right {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid;
    border-top-color: currentcolor;
    border-color: #fff;
  }

  #search-loader {
    width: 80%;
    margin: 10px auto;
    padding: 5px;
  }

  #search-loader span {
    font-size: 14px;
  }

  .login-menu-link {
    display: none;
  }

  .basket-div {
    text-align: center;
  }

  .login-menu-link {
    padding-left: 0px;
  }

  .cart-total {
    margin-left: 25px;
  }

  button.menu-toggle {
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    margin-top: -40px;
    margin-left: -15px;
  }

  button.menu-toggle svg {
    color: #1b99d7;
  }

  .atc-sticky-wrap .bs-offer-btn.var-btn.button {
    margin-top: 0px;
    margin-left: 5px;
  }

  .atc-sticky-wrap {
    position: fixed;
    bottom: 0px;
  }

  .cart-icon {
    font-size: 28px;
  }

  .cart-icon svg {
    width: 28px;
    height: 28px;
  }

  .mini-header-cart {
    padding-right: 20px;
  }


  .basket-div.text-aligned-center {
    text-align: end;
  }

  #carouselHome {
    width: 100%;
  }

  .img-container {
    background-size: 50%;
  }

  .carousel-inner {
    min-height: 50VH;
  }

  .carousel-item {
    height: 45VH;
  }

  .carousel-caption {
    width: 100%;
    text-align: start;
  }

  .carousel-caption h2 {
    font-size: 28px;
    font-weight: 700;
    width: 50%;
  }

  .btn-slider-action {
    margin: 0 auto;
  }

  .banner-actiom-item-container {
    height: auto;
  }

  .site-branding {
    width: 75%;
    margin: 0 auto;
  }

  .logo-section-row {
    padding-top: 10px;
    padding-bottom: 10px;
    ;
  }

  .menu-item-depth-0 {
    height: 55px;
  }

  .home .menu-item-depth-0 .mega-panel {
    display: none !important;
  }

  .info-msg {
    margin-top: 10px;
    flex-direction: column;
  }

  .info-msg .col-md-4 {
    border: 2px solid #f2f2f2;
    margin: 10px;
    margin-left: 0px
  }


  .has-mega ul {
    background-color: #fff;
    width: 100%;
    position: relative;
  }

  .main-navigation li {
    position: initial;
  }

  #primary-menu-mobile {
    position: fixed;
    top: 0;
    left: -300px;
    /* Start off-screen */
    width: 300px;
    height: 100vh;
    /* Force menu to match viewport height */
    background: #fff;
    z-index: 99999;
    /* Enable scrolling INSIDE the menu if items exceed height */
    overflow-y: auto;
    overflow-x: hidden;

    display: flex !important;
    flex-direction: row;
    /* Forces vertical stacking in one column */

    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  }

  /* Ensure each top-level item takes full width */
  #primary-menu-mobile>li {
    width: 100%;
    display: block;
    padding: 0;
    /* Clear previous padding */
  }

  /* Style for the 'Category' and 'Main Menu' headers */
  #primary-menu-mobile>li>a {
    display: block;
    padding: 15px 20px;
    background-color: #f8f8f8;
    font-weight: bold;
    color: #333;
    text-decoration: none;
  }

  /* 2. TRIGGER THE SLIDE */
  body.mobile-menu-open {
    overflow: hidden;
    /* Prevent background scrolling when menu is open */
    height: 100vh;
  }

  body.mobile-menu-open #primary-menu-mobile {
    transform: translateX(300px);
  }

  /* Ensure sub-menus are hidden by default except when 'open' class is added */
  #primary-menu-mobile .sub-menu {
    display: none;
    /* jQuery slideDown/Up will control this */
    position: absolute;
    /* Vital: pushes content down instead of overlapping */
    width: 100%;
    padding: 0;
    background: #fff;
    list-style: none;
  }

  /* SECOND LEVEL: The sub-menu inside specific categories */
  /* This must be relative/static to push items down like an accordion */
  #primary-menu-mobile .sub-menu .sub-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: none;
    background: #fdfdfd;
    box-shadow: none;
    border: none;
    padding-left: 20px;
    /* Indent for hierarchy */
  }

  /* Ensure the parent li for second level shows correctly */
  #primary-menu-mobile .menu-item-has-children.open>.sub-menu {
    display: block !important;
  }

  /* Target only sub-menu items that have children */
  /* This excludes the top-level 'Category' and 'Main Menu' links */
  #primary-menu-mobile .sub-menu .menu-item-has-children>a {
    display: flex !important;
    justify-content: space-between;
    /* This pushes the text to left and arrow to right */
    align-items: center;
    width: 100%;
    padding-right: 15px;
    /* Space for the arrow */
  }

  /* Define the Arrow */
  #primary-menu-mobile .sub-menu .menu-item-has-children>a::after {
    content: "\e313";
    /* Material Icon for keyboard_arrow_down */
    font-family: "Material Icons";
    font-size: 22px;
    font-weight: normal;
    color: #333;
    transition: transform 0.3s ease;
    margin-left: auto;
    /* Extra insurance to push it to the end */
  }

  /* Flip arrow when the specific sub-category is open */
  /* Using your 'inner-open' class for second-level logic */
  #primary-menu-mobile .sub-menu .menu-item-has-children.inner-open>a::after {
    transform: rotate(180deg);
  }

  #primary-menu-mobile .sub-menu li a {
    padding: 12px 35px;
    /* Indented for hierarchy */
    font-weight: normal;
    color: #2f2f2f;
    display: block;
    width: 100%;
  }

  /* Force the first category to show when 'open' */
  #primary-menu-mobile li.open>.sub-menu {
    display: block;
  }

  #primary-menu-mobile li {
    width: 100%;
    display: block;
  }

  #primary-menu-mobile li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
  }

  .menu-item-object-wpml_ls_menu_item.menu-item-has-children .wpml-ls-native {
    display: none;
  }

  .sub-menu .menu-item-object-wpml_ls_menu_item .wpml-ls-native {
    display: inline;
  }

  /* Optional: Overlay to dim the background */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    display: none;
  }

  body.mobile-menu-open .menu-overlay {
    display: block;
  }

  .main-navigation ul ul a {
    color: #2f2f2f;
  }

  .main-navigation .mobile-menu .sub-menu {
    display: none;
    /* hidden by default, jQuery will animate this */
    position: absolute;
    left: 0;
    top: auto;
    float: none;
    box-shadow: none;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    /* helps with height animations */
  }

  .main-navigation.toggled>ul:not(ul ul) {
    border: 2px solid #1b99d7;
  }

  .main-navigation.toggled ul {
    position: absolute;
    left: 0px;
    width: 100%;
    background-color: #ffff;
    z-index: 1000;
  }

  /* Optional: indent deeper levels */
  .main-navigation .mobile-menu .sub-menu .sub-menu {
    padding-left: 15px;
  }

  /* Also kill the desktop hover rule that sends ULs off-screen */
  .main-navigation ul li:hover>ul,
  .main-navigation ul li.focus>ul {
    left: auto;
  }

  .main-navigation li {
    padding: 5px;
  }

  .has-mega>ul>li>ul {
    background-color: #fff;
    color: #1b99d7;
  }

  .has-mega>ul>li>ul>li a {
    color: #2f2f2f;
  }

  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Dims the background */
    z-index: 99998;
    /* Just below the menu (99999) */
    display: none;
    /* Hidden by default */
  }

  /* Show when the menu class is added to the body */
  body.mobile-menu-open .menu-overlay {
    display: block;
  }

  /* Apply sticky behavior for screens 768px and wider */

  .basket-div.is-stuck {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding: 10px 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0);
    }
  }


  .lang-picker {
    display: none;
  }

  .free-shipping.top-menu-item {
    border: none;
    justify-content: center;
  }

  .top-header-right {
    display: none;
  }

  .banner-actiom-item-container.first img {
    top: -20px;
    width: 55%;
    right: -50px;
  }

  .banner-actiom-item-container.second img {
    position: absolute;
    top: -99px;
    width: 85%;
    right: -107px;
  }

  .btn-slider-action {
    width: auto;
  }

  .category-item {
    flex: 0 0 calc(33.33% - 10px);
    /* 3 per row */
  }

  .home-products {
    flex-direction: column;
  }

  #banner-row,
  #productTabContent {
    overflow: hidden;
  }

  .flex-direction-nav {
    display: none;
  }

  .featured-boxes {
    padding: 20px 5px;
    text-align: center;
  }

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

  .case-roi-second {
    margin-bottom: 40px;
  }

  .spare-parts-action-buttons-container {
    width: 100% !important;
  }

  .roi-case-studies-home {
    flex-direction: column-reverse;
  }

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

  .video-box {
    margin-top: 20px
  }

  .footer-img-ce {
    width: 60%;
    margin-top: 30px auto;
  }

  .shop-full-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .bs-main-cat-thumb {
    width: 50%;
    margin-bottom: 5px;
  }

  .widget {
    margin: 5px;
  }

  .bs-sidebar {
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .woocommerce ul.products.columns-5 li.product,
  .woocommerce .products li.product,
  .woocommerce-page .products li.product {
    width: 48%;
  }

  .blue-f.vc_custom_heading {
    margin-top: 20px;
  }

  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin: 0px;
  }

  .search-cart-icons-container {
    display: none;
  }

  .bs-search-form {
    justify-content: start;
  }

  .search-container {
    width: 80%;
  }

  .wc-ajax-results .shop-full-container .row {
    flex-direction: column-reverse;
  }

  .single-product.woocommerce div.product div.images img {
    width: 75%;
  }

  .product-details-wrapper,
  .single-product-custom-container-left,
  #product-right-side-container {
    height: auto;
  }

  .left-price-details-container {
    min-height: auto;
  }

  .product-details-wrapper.shadowed-right {
    text-align: center;
  }

  .product.type-product .product-badges {
    flex-direction: column;
  }

  .single-product-badges {
    flex-wrap: wrap !important;
  }

  .woocommerce div.product .woocommerce-tabs .panel {
    padding: 10px;
  }

  .related.products .bs-thumb-wrapper {
    min-height: auto;
  }

  .secure {
    justify-content: center;
  }

  .breadcrumbs {
    font-size: 14px;
  }

  .shadowed-right.pb-0 .align-items-center {
    justify-content: center;
  }

  .tabs.wc-tabs {
    display: flex;
    text-align: center;
    border: 1px solid #cfc8d8;
    flex-direction: column;

  }

  .woocommerce ul.products li.product a.woocommerce-loop-product__link {
    min-height: 410px;
  }

  #bs-related-products {
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
  }

  .related.products .products {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: 0px;

  }

  .atc-sticky-wrap {
    width: 100%;
  }

  .sticky-add-card-mobile {
    display: flex;
  }

  .sticky-add-card-desktop {
    display: none;
  }

  .gallery.single-product-custom-container-left span.onsale {
    top: -18px !important;
    right: -8px;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: #1b99d7;
  }

  .bs-qv-wrap {
    display: grid;
    /* Default for mobile: 1 column (creates 2 rows automatically) */
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .bs-qv-price,
  .qty-div {
    text-align: center;
  }

  .bs-qv-wrap .bs-view-link,
  .bs-qv-wrap .bs-offer-add {
    width: 48%;
  }

  #block-3 {
    display: none;
  }

  .wp-block-woocommerce-product-categories {
    /* Keep it hidden initially so it can slide down */
    display: none;
    width: 100%;
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
  }

  #block-5 {
      cursor: pointer; /* Shows mobile users it's a button */
  }

  #block-5 h3::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
    /* Space between icon and text */
    background-color: currentColor;
    /* Inherits the text color */
    /* This is your SVG encoded for CSS */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z" fill="black"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z" fill="black"></path></svg>');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }

  .logo-text{
    color:#1b99d7;
    font-weight:700 ;
  }
  .is-stuck  .logo-text{
    display: inline-block;
  }

}