:root {
  --mfree-bg: #f8fafc;
  --mfree-surface: #ffffff;
  --mfree-tone: #0284c7;
  --mfree-tone-hover: #0369a1;
  --mfree-ink: #0f172a;
  --mfree-shadow: 0 4px 12px -2px rgba(2, 132, 199, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --mfree-gradient: linear-gradient(135deg, #0284c7 0%, #0f766e 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  text-transform: uppercase;
}

/* Radio gallery logic */
.mfree-slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mfree-pic-1:checked ~ .mfree-view-window .slide-pos-1,
#mfree-pic-2:checked ~ .mfree-view-window .slide-pos-2,
#mfree-pic-3:checked ~ .mfree-view-window .slide-pos-3,
#mfree-pic-4:checked ~ .mfree-view-window .slide-pos-4 {
  opacity: 1;
  visibility: visible;
}

#mfree-pic-1:checked ~ .mfree-thumbs-dock .label-pos-1,
#mfree-pic-2:checked ~ .mfree-thumbs-dock .label-pos-2,
#mfree-pic-3:checked ~ .mfree-thumbs-dock .label-pos-3,
#mfree-pic-4:checked ~ .mfree-thumbs-dock .label-pos-4 {
  border-color: var(--mfree-tone);
  box-shadow: 0 0 0 1px var(--mfree-tone);
}

.mfree-thumb-trigger {
  border-color: #cbd5e1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mfree-thumb-trigger:hover {
  border-color: var(--mfree-tone);
}

/* CTA hover effects */
.mfree-buy-trigger {
  box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.4);
}

.mfree-buy-trigger:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0d9488 100%) !important;
  box-shadow: 0 12px 24px -4px rgba(2, 132, 199, 0.55);
  transform: translateY(-2px);
}