/* The empty product listing: what shows in the results area when a brand,
   category or filter has nothing to list. Rendered by
   ProductHelper.generateProductsView; styled here because main.css is a
   Compass build we cannot regenerate. While there is nothing to list, the
   sort bar above it has nothing to sort, so it is hidden. */
/* left-aligned under the section heading, on the same edge as it: the results
   row hangs 10px (45px from 1280px) outside the heading's column, and the
   row's own child sizing is overridden so this can run full width */
.productResults .no-results {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 10px 56px !important;
  text-align: left;
}
/* the section heading has its own 10px under it; the results row adds none */
#layout:has(.no-results) .sidebar { margin-top: 0; }
@media all and (min-width: 1280px) { .productResults .no-results { padding-left: 45px !important; padding-right: 45px !important; } }
@media all and (max-width: 599px) { .productResults .no-results { padding-left: 5px !important; padding-right: 5px !important; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; } }
.no-results__mark {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: block;
  width: 44px;
  height: 44px;
  margin: -4px 0 0;
  background: #ff0801;
  -webkit-mask: url("../img/tyre-mark.png") center / contain no-repeat;
  mask: url("../img/tyre-mark.png") center / contain no-repeat;
}
.no-results__title {
  grid-column: 2;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.2;
  color: #202020;
}
.no-results__text {
  grid-column: 2;
  max-width: 560px;
  margin: 12px 0 0;
  padding: 0;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #696969;
}
.no-results__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px 28px;
  margin-top: 26px;
}
.no-results__go.button {
  width: auto;
  min-width: 180px;
  padding: 0 32px;
}
.no-results__link {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #202020;
  text-decoration: none;
}
.no-results__link:hover { color: #ff0801; }
.no-results__link span { display: inline-block; margin-left: 4px; transition: transform 0.15s ease; }
.no-results__link:hover span { transform: translateX(3px); }

/* nothing to sort or switch while the listing is empty */
#layout:has(.no-results) .filters,
#layout:has(.no-results) .filters-header,
#layout:has(.no-results) .horizontal-active { display: none; }

@media all and (min-width: 767px) {
  .productResults .no-results { padding-bottom: 72px !important; }
  .no-results__title { font-size: 30px; }
}
@media all and (max-width: 599px) {
  .no-results__mark { width: 38px; height: 38px; margin-top: -3px; }
}