:root {
  --arthrosport-bg: #f8fafc;
  --arthrosport-surface: #ffffff;
  --arthrosport-tone: #0284c7;
  --arthrosport-tone-hover: #0369a1;
  --arthrosport-accent-light: #e0f2fe;
  --arthrosport-ink: #1e293b;
  --arthrosport-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Gallery radio engine */
.gallery-toggle {
  display: none;
}

.gallery-screen-box img {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out;
}

#display-frame-1:checked ~ .gallery-screen-box .gallery-item-1,
#display-frame-2:checked ~ .gallery-screen-box .gallery-item-2,
#display-frame-3:checked ~ .gallery-screen-box .gallery-item-3,
#display-frame-4:checked ~ .gallery-screen-box .gallery-item-4 {
  opacity: 1;
  visibility: visible;
}

#display-frame-1:checked ~ nav .thumb-control-1,
#display-frame-2:checked ~ nav .thumb-control-2,
#display-frame-3:checked ~ nav .thumb-control-3,
#display-frame-4:checked ~ nav .thumb-control-4 {
  border-color: var(--arthrosport-tone);
  box-shadow: 0 0 0 1px var(--arthrosport-tone);
}

nav label {
  border-color: #e2e8f0;
}

nav label:hover {
  border-color: #cbd5e1;
}

/* CTA Pill hover styling */
.action-pill-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.action-pill-button:hover {
  background-color: var(--arthrosport-tone-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(2, 132, 199, 0.45);
}

.action-pill-button:active {
  transform: translateY(0);
}