/*******
	Breakpoints / Layout / Grid
********/
/* Breakpoints START */
/* Breakpoints END */
.shop-colour {
  overflow: clip;
  padding: var(--spacing-7-half) 0;
}
@media (min-width: 1024px) {
  .shop-colour {
    padding: var(--spacing-15) 0;
  }
}
.shop-colour__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
@media (min-width: 1024px) {
  .shop-colour__inner {
    gap: var(--spacing-10);
  }
}
.shop-colour__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7-half);
  text-align: center;
  max-width: 650px;
  margin: auto;
}
.shop-colour__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-md);
  text-transform: uppercase;
  font-family: var(--font-family-brand);
}
@media (min-width: 1024px) {
  .shop-colour__title {
    font-size: var(--font-size-4xl);
  }
}
.shop-colour__links {
  width: 100%;
  overflow: visible;
}
@media (min-width: 1024px) {
  .shop-colour__links .swiper-wrapper {
    display: flex;
    gap: var(--spacing-7-half);
    justify-content: center;
    flex-wrap: wrap;
  }
}
.shop-colour__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2-half);
  width: auto;
  max-width: 120px;
}
.shop-colour__item-colour {
  aspect-ratio: 1/1;
  width: 70px;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: var(--item-colour);
  border-radius: var(--border-radius-full);
}
.shop-colour__item-text {
  text-align: center;
}
@media (min-width: 1024px) {
  .shop-colour__item-text {
    font-size: var(--font-size-body-lg);
  }
}
.shop-colour__progress {
  margin-top: var(--spacing-5);
  height: 2px;
  background-color: rgba(0, 0, 0, 0.2);
}
@media (min-width: 1024px) {
  .shop-colour__progress {
    display: none;
  }
}
.shop-colour__progress.swiper-pagination-lock {
  display: none;
}
.shop-colour__progress > span {
  display: block;
  height: 100%;
  transform-origin: left;
  background-color: var(--colour-brand-primary-green);
}