/* Generated from pigment-colour-guide.png — run sample-pigment-colors.py */
:root {
  --pigment-102: #baa67a;
  --pigment-106: #c1850e;
  --pigment-202: #a8291e;
  --pigment-205: #9e221f;
  --pigment-206: #941e1e;
  --pigment-301: #322424;
  --pigment-402: #111324;
  --pigment-404: #1163a9;
  --pigment-405: #13469c;
  --pigment-501: #436e40;
  --pigment-503: #113519;
  --pigment-505: #0a3a2a;
  --pigment-604: #9d9d9c;
  --pigment-605: #b4b3b4;
  --pigment-606: #121315;
  --pigment-607: #9c9e9f;
}

.pigment-swatch {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.pigment-swatch--lg {
  width: min(42vw, 7.5rem);
  height: min(42vw, 7.5rem);
}

.pigment-swatch--102 { background-color: var(--pigment-102); }
.pigment-swatch--106 { background-color: var(--pigment-106); }
.pigment-swatch--202 { background-color: var(--pigment-202); }
.pigment-swatch--205 { background-color: var(--pigment-205); }
.pigment-swatch--206 { background-color: var(--pigment-206); }
.pigment-swatch--301 { background-color: var(--pigment-301); }
.pigment-swatch--402 { background-color: var(--pigment-402); }
.pigment-swatch--404 { background-color: var(--pigment-404); }
.pigment-swatch--405 { background-color: var(--pigment-405); }
.pigment-swatch--501 { background-color: var(--pigment-501); }
.pigment-swatch--503 { background-color: var(--pigment-503); }
.pigment-swatch--505 { background-color: var(--pigment-505); }
.pigment-swatch--604 { background-color: var(--pigment-604); }
.pigment-swatch--605 { background-color: var(--pigment-605); }
.pigment-swatch--606 { background-color: var(--pigment-606); }
.pigment-swatch--607 { background-color: var(--pigment-607); }

.pigment-grade-label,
.pigment-grade-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.pigment-grade-link {
  color: inherit;
  text-decoration: none;
}

.pigment-grade-link:hover span:last-child {
  text-decoration: underline;
}

.catalog-card-media--swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  min-height: 12.5rem;
}

.catalog-card-media--swatch .pigment-swatch--lg {
  width: min(56%, 6.5rem);
  height: min(56%, 6.5rem);
}