section#collection-grid .collection-grid-wrapper .collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 48px;
  position: relative;
}
@media only screen and (max-width: 767.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid .product-card .product-title-reviews-wrapper,
  section#collection-grid .collection-grid-wrapper .collection-grid .product-card .product-card-breadcrumbs {
    padding: 0 8px;
  }
}
section#collection-grid .collection-grid-wrapper .collection-grid .product-card .product-image {
  padding-bottom: calc(100% + 20px);
}
section#collection-grid .collection-grid-wrapper .collection-grid .product-card .product-card-colours {
  display: block;
}
@media only screen and (max-width: 767.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid .product-card .product-card-colours {
    padding: 0 8px 6px;
  }
}
@media only screen and (max-width: 991.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid .no-results {
    text-align: center;
  }
}
section#collection-grid .collection-grid-wrapper .collection-grid .spinner {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: none;
}
section#collection-grid .collection-grid-wrapper .collection-grid .spinner .check-circle-outer, section#collection-grid .collection-grid-wrapper .collection-grid .spinner .spinner-circle-outer {
  --circle-size: 50px;
}
section#collection-grid .collection-grid-wrapper .collection-grid.loading .product-card, section#collection-grid .collection-grid-wrapper .collection-grid.loading #collection-grid-cta, section#collection-grid .collection-grid-wrapper .collection-grid.loading #collection-grid-cta-2 {
  opacity: 0.6;
  filter: blur(2.4px) grayscale(0.2);
}
section#collection-grid .collection-grid-wrapper .collection-grid.loading .spinner {
  display: block;
}
@media only screen and (max-width: 1199.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 991.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 20px;
  }
}
@media only screen and (max-width: 767.98px) {
  section#collection-grid .collection-grid-wrapper .collection-grid {
    padding: 20px;
  }
}
section#collection-grid .collection-grid-wrapper .custom-filter-load-more {
  margin: 40px auto 0;
}
section#collection-grid .collection-grid-wrapper .load-more-spinner {
  display: none;
}
section#collection-grid .collection-grid-wrapper .load-more-spinner.show {
  margin-top: 15px;
  display: block;
}
section#collection-grid #collection-grid-cta, section#collection-grid .collection-grid-cta {
  background-color: var(--primary-color);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px 10px;
  color: #fff;
  box-sizing: border-box;
}
section#collection-grid #collection-grid-cta *:not(img), section#collection-grid .collection-grid-cta *:not(img) {
  position: relative;
  text-align: left;
}
section#collection-grid #collection-grid-cta img, section#collection-grid .collection-grid-cta img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
section#collection-grid #collection-grid-cta > div, section#collection-grid .collection-grid-cta > div {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: flex-start;
  z-index: 2;
}
section#collection-grid #collection-grid-cta > div .banner-title,
section#collection-grid #collection-grid-cta > div .banner-title *, section#collection-grid .collection-grid-cta > div .banner-title,
section#collection-grid .collection-grid-cta > div .banner-title * {
  font-size: 14px;
  font-weight: bold;
}
@media only screen and (min-width: 992px) {
  section#collection-grid #collection-grid-cta > div .banner-title,
  section#collection-grid #collection-grid-cta > div .banner-title *, section#collection-grid .collection-grid-cta > div .banner-title,
  section#collection-grid .collection-grid-cta > div .banner-title * {
    font-size: 16px;
  }
}
section#collection-grid #collection-grid-cta > div .banner-text,
section#collection-grid #collection-grid-cta > div .banner-text *, section#collection-grid .collection-grid-cta > div .banner-text,
section#collection-grid .collection-grid-cta > div .banner-text * {
  font-size: 14px;
}
@media only screen and (min-width: 992px) {
  section#collection-grid #collection-grid-cta > div .banner-text,
  section#collection-grid #collection-grid-cta > div .banner-text *, section#collection-grid .collection-grid-cta > div .banner-text,
  section#collection-grid .collection-grid-cta > div .banner-text * {
    font-size: 16px;
  }
}
section#collection-grid #collection-grid-cta > div a, section#collection-grid .collection-grid-cta > div a {
  display: block;
  margin: 12px 0 0;
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (min-width: 992px) {
  section#collection-grid #collection-grid-cta > div a, section#collection-grid .collection-grid-cta > div a {
    font-size: 18px;
  }
}
section#collection-grid #collection-grid-cta > div a:hover, section#collection-grid .collection-grid-cta > div a:hover {
  text-decoration: none;
}

.sale-price {
  color: var(--accent-2-color);
}

.compare-at-price {
  text-decoration: line-through;
  color: #000;
}