/* Keep the existing catalog controls inside the phone viewport on the added pages. */
@media (max-width: 767px) {
  .product-search .category-sort-column,
  [class*="product-manufacturer-info"] .category-sort-column,
  .product-special .category-sort-column {
    width: 100%;
    max-width: 100%;
  }
  .product-search .category-sort,
  [class*="product-manufacturer-info"] .category-sort,
  .product-special .category-sort {
    display: flex;
    align-items: center;
    max-width: 100%;
    gap: 12px;
  }
  .product-search .category-sort__label,
  [class*="product-manufacturer-info"] .category-sort__label,
  .product-special .category-sort__label { flex: 0 0 auto; }
  .product-search .category-sort__links,
  [class*="product-manufacturer-info"] .category-sort__links,
  .product-special .category-sort__links {
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .product-search .category-sort__link,
  [class*="product-manufacturer-info"] .category-sort__link,
  .product-special .category-sort__link { flex: 0 0 auto; white-space: nowrap; }
  .topcat .pull-right { max-width: 100%; }
  .topcat h1 { overflow-wrap: anywhere; }
}

/* Product carousels: the row's -15px gutters sat inside .owl-hidden (overflow: hidden) and clipped the first and last cards. */
.owl-hidden > .option-hover > .row {
  margin-left: 0;
  margin-right: 0;
}