/* ===== Doccia Variant Switcher ===== */
:root {
  --variant-bg: rgba(0, 0, 0, 0.35);
  --button-bg: rgba(255, 255, 255, 0.15);
  --button-bg-active: #ffffff;
  --button-color: #ffffff;
  --button-color-active: #000000;
}

.variant-switcher {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 999px;
  background: var(--variant-bg);
  backdrop-filter: blur(6px);
  align-items: center;
  z-index: 50;
}

.variant-switcher button {
  appearance: none;
  border: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--button-color);
  background: var(--button-bg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.variant-switcher button.is-active {
  background: var(--button-bg-active);
  color: var(--button-color-active);
}

.variant-anchor {
  position: relative;
}

.variant-anchor > .variant-switcher {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
}

.variant-switcher--fixed {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
}