/* Sabbagh — the row of dye pots under the carpet. */
.sb-pots {
  display: flex;
  flex: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 12px;
}
.sb-pot {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50% 50% 44% 44%;
  background: var(--c);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.28), inset 0 4px 0 rgba(255, 255, 255, 0.22), 0 0 0 2px rgba(242, 234, 216, 0.18), 0 6px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s var(--ease-out), opacity 0.2s linear;
}
.sb-pot svg { width: 22px; height: 22px; display: block; margin: auto; }
.sb-pot:active { transform: scale(0.9); }
.sb-pot[aria-current="true"] { opacity: 0.35; box-shadow: inset 0 0 0 2px rgba(242, 234, 216, 0.5); }
.sb-pot[disabled] { pointer-events: none; }
@media (max-width: 380px) { .sb-pot { width: 42px; height: 42px; } .sb-pots { gap: 8px; } }