/* Stalenbakje (js/swatches.js): rechtsklik op een foto bewaart de kleur onder het kruisje.
   Linksonder een klein zwart vak met 5 plekken, een teller en "Download" (Meqari staaltje als PNG).
   Alleen met muis/trackpad; verschijnt pas bij het eerste staal. */

.sw {
  /* De stalen starten op de sitemarge (zelfde lijn als de footerlijn en het menu): links = marge − binnenmarge (12 px) */
  position: fixed; left: calc(clamp(24px, 5vw, 96px) - 12px); bottom: 16px; z-index: 59;
  display: grid; gap: 10px; padding: 12px; background: var(--black); color: var(--white);
  clip-path: inset(0 100% 0 0); transition: clip-path 0.3s var(--ease-out); pointer-events: none;
}
.sw.on { clip-path: inset(0 0 0 0); pointer-events: auto; }
.sw__row { display: flex; gap: 4px; }
.sw__row button {
  width: 22px; height: 22px; padding: 0; border: 1px solid #333; background: transparent; cursor: pointer;
  clip-path: inset(0 0 0 0); transition: clip-path 0.3s var(--ease-out);
}
.sw__row button.fill { border-color: #444; }   /* dun randje: ook heel donkere stalen blijven zichtbaar op zwart */
.sw__row button.new { clip-path: inset(100% 0 0 0); transition: none; }   /* nieuw staal: vult van onder naar boven */
.sw__row button:disabled { cursor: default; }
.sw__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sw .mono { font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.sw__info { color: #8A8A86; min-width: 7ch; }
.sw__dl { padding: 0; border: 0; background: none; color: var(--yellow); cursor: pointer; }
.sw__dl:hover { color: var(--white); }

/* Kort "+ staal" in het kleurlabel bij het bewaren */
.pop__saved { margin-left: 2px; color: #8A8A86; }
.pop:not(.saved) .pop__saved { display: none; }

@media (hover: none) { .sw { display: none; } }
@media (prefers-reduced-motion: reduce) { .sw, .sw__row button { transition: none; } }