.prod-dot-red {
  background-color: #AB0033; }

.prod-dot-purple {
  background-color: #722282; }

.prod-dot-pink {
  background-color: #DF1683; }

.prod-dot-yellow {
  background-color: #FFC629; }

.prod-dot-green {
  background-color: #006937; }

.prod-dot-orange {
  background-color: #FF671D; }

.prod-dot-blue {
  background-color: #005AAA; }

.prod-dot-white {
  background-color: #FFFFFF; }

.prod-dot-grey {
  background-color: #B5ADA5; }

.prod-dot-black {
  background-color: #101820; }

.prod-dot-taupe {
  background-color: #867874; }

.prod-dot-leaftree {
  background-repeat: no-repeat;
  background-size: cover; }

.prod-dot-oos {
  position: relative; }

.prod-dot-oos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 45%, white 45%, white 55%, transparent 55%); }

.prod-dot-white.prod-dot-oos::before {
  background: linear-gradient(to bottom right, transparent 45%, #B5ADA5 45%, #B5ADA5 55%, transparent 55%); }