/* Generated from pigment-colour-guide.png — run sample-pigment-colors.py */
:root {
  --pigment-102: #b9a680;
  --pigment-106: #c1830b;
  --pigment-202: #a4261b;
  --pigment-205: #9e231e;
  --pigment-206: #911c1c;
  --pigment-301: #322424;
  --pigment-402: #111223;
  --pigment-404: #1162a5;
  --pigment-405: #114397;
  --pigment-501: #2a6820;
  --pigment-503: #113519;
  --pigment-505: #093929;
  --pigment-604: #93928f;
  --pigment-605: #d3d3d2;
  --pigment-606: #111214;
  --pigment-607: #a3a4a7;
}

.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--card {
  width: 2rem;
  height: 2rem;
}

.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--pigment {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  justify-items: center;
  background: #ffffff;
  aspect-ratio: 4 / 5;
  padding: 0.5rem 0.35rem 0.25rem;
  min-height: 12.5rem;
  overflow: hidden;
}

.catalog-card-media--pigment .pigment-swatch--card {
  margin-top: 0.15rem;
}

.catalog-card-media--pigment .pigment-can-photo {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.catalog-card:hover .catalog-card-media--pigment .pigment-can-photo {
  transform: none;
}

.recommended-card-media--swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.recommended-card-media--swatch .pigment-swatch--recommended {
  width: 4.25rem;
  height: 4.25rem;
}

/* Legacy alias — prefer catalog-card-media--pigment */
.catalog-card-media--swatch {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  justify-items: center;
  background: #ffffff;
  aspect-ratio: 4 / 5;
  padding: 0.5rem 0.35rem 0.25rem;
  min-height: 12.5rem;
  overflow: hidden;
}

.catalog-card-media--swatch .pigment-swatch--lg {
  width: 2rem;
  height: 2rem;
  margin-top: 0.15rem;
}