/**
 * Podlood Families — switcher layout.
 *
 * Alleen de wrapper-klassen worden hier gestyled. De swatches zelf
 * (.tt-swatch / .tt-swatch--color / .tt-swatch--text / .is-active / .is-disabled)
 * lenen we van het thema, zodat ze identiek ogen aan de rest van de site en we
 * de cascade-layers van het thema niet doorbreken. Theme-tokens hebben een
 * fallback zodat de switcher ook onder een ander thema leesbaar blijft.
 */

.podf-switcher {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0 0 1.5rem;
}

.podf-axis {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.podf-axis__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted, #6b6b6b);
}

/* Niet-klikbare swatches duidelijk maken (cursor); look komt van het thema. */
.podf-switcher .tt-swatch.is-active { cursor: default; }
.podf-switcher .tt-swatch.is-disabled { cursor: not-allowed; }

/* Minimale fallback ALLEEN als het thema de swatch-klassen niet kent.
   Geneste :where() houdt de specificiteit op 0 zodat thema-regels altijd winnen. */
:where(.podf-switcher) .tt-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}