/* Metbox responsive adjustments. Load after the main theme styles. */

/* Product tile grids. */
@media (min-width: 2201px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

@media (min-width: 1501px) and (max-width: 2200px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

@media (min-width: 1001px) and (max-width: 1500px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

@media (min-width: 751px) and (max-width: 1000px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}


@media (max-width: 750px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .product-tile__bottom,
  .product-tile__price-cart {
    min-width: 0;
    max-width: 100%;
  }
}

/* Keep carousel items controlled by Owl. */
.owl-item .product-tile__outer,
.owl-item .promo-tile__outer,
.js-carousel-products .product-tile__outer,
.js-carousel-products .promo-tile__outer {
  max-width: 100% !important;
}

/* Product card footer. */
@media (min-width: 751px) and (max-width: 2200px) {
  .product-tile__bottom,
  .product-tile__price-cart {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .product-tile__price-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
  }

  .product-tile__price {
    flex: 1 1 90px;
    min-width: 0;
  }

  .product-tile__price .product-price,
  .product-tile__price .product-price-compare,
  .product-tile__price .product-price-small,
  .product-tile__price .currency {
    white-space: nowrap;
  }

  .product-tile__add2cart {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  .product-tile__add2cart .add2cart-button.button-with-icon,
  .product-tile__add2cart .button.add2cart-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .product-tile__add2cart .button__icon {
    flex: 0 0 auto;
  }

  .product-tile__add2cart .add2cart-button__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1001px) and (max-width: 1320px) {
  .product-tile__add2cart {
    flex-basis: 100%;
  }

  .product-tile__add2cart .add2cart-button.button-with-icon,
  .product-tile__add2cart .button.add2cart-button {
    justify-content: center;
    width: 100%;
  }
}

/* Search and sidebar layout. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .searchpro__page-container .searchpro__page-sidebar {
    width: 250px !important;
    padding-left: 20px !important;
  }

  .content.with-sidebar-l,
  .content.with-sidebar-r {
    min-width: 0;
  }
}

/* Series and content grids. */
@media (min-width: 1401px) and (max-width: 1800px) {
  #series-tab-parts .series-master-components__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1001px) and (max-width: 1500px) {
  #series-tab-parts .series-master-components__grid,
  .series-master-components__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  #series-tab-parts .series-master-components__grid,
  .series-master-components__grid,
  .series-category__grid,
  .series-master-docs__grid,
  .wave-esd-product-docs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  #series-tab-parts .series-master-components__grid,
  .series-master-components__grid,
  .series-category__grid,
  .series-master-docs__grid,
  .wave-esd-product-docs__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Bottom fixed bar visibility. */
@media (min-width: 768px) {
  .bar-fixed-b,
  .bar-fixed-bottom,
  .m-fixed-bottom,
  .mobile-fixed-bottom,
  .mobile-bottom-bar {
    display: none !important;
  }
}


/* Content tables and product data. */
@media (max-width: 750px) {
  .content table,
  .page-content table,
  .product_features,
  .product-features,
  .product-tabs table,
  .sk-text table {
    max-width: 100% !important;
  }

  .product_features,
  .product-features,
  .product-tabs__content,
  .tab-content,
  .sk-text {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .product-gallery-main,
  .product-gallery-main__outer,
  .product-gallery-main__el-outer {
    max-width: 100% !important;
  }
}


/* Product page mobile layout. */
@media (max-width: 750px) {
  .product-gallery-main,
  .product-gallery-main__outer,
  .product-gallery-main .owl-stage-outer {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .product-gallery-main__el-outer,
  .product-gallery-main__el-inner {
    max-width: 100% !important;
  }

  .product_features table,
  .product-features table,
  .product-tabs table,
  .tab-content table,
  .sk-text table,
  .content table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .product_features th,
  .product_features td,
  .product-features th,
  .product-features td,
  .product-tabs th,
  .product-tabs td,
  .tab-content th,
  .tab-content td,
  .sk-text th,
  .sk-text td,
  .content th,
  .content td {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}


/* Continuous grid overrides. */
@media (max-width: 2200px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

@media (max-width: 1500px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

@media (max-width: 1000px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 750px) {
  .product-list:not(.js-carousel-products) > .product-tile__outer,
  .product-list--tile:not(.js-carousel-products) > .product-tile__outer,
  .js-search-page .product-list:not(.js-carousel-products) .product-tile__outer,
  .searchpro__page-container .product-tile__outer,
  .searchpro__page-container .promo-tile__outer,
  .cols-2 .product-tile__outer--large,
  .cols-2 .promo-tile__outer--large,
  .cols-3 .product-tile__outer,
  .cols-3 .promo-tile__outer {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
