:root {
  --osteo-bg: #f4f9f9;
  --osteo-surface: #ffffff;
  --osteo-tone: #0e8388;
  --osteo-tone-hover: #2e4f4f;
  --osteo-ink: #1b262c;
  --osteo-gradient: linear-gradient(135deg, #0e8388 0%, #2e4f4f 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--osteo-bg);
  color: var(--osteo-ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Gallery CSS mechanics */
.obflex-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.obflex-radio-1:checked ~ .obflex-viewport-pane .obflex-slide-1,
.obflex-radio-2:checked ~ .obflex-viewport-pane .obflex-slide-2,
.obflex-radio-3:checked ~ .obflex-viewport-pane .obflex-slide-3,
.obflex-radio-4:checked ~ .obflex-viewport-pane .obflex-slide-4 {
  opacity: 1;
  visibility: visible;
}

/* Thumbnail highlighting */
.obflex-thumb-strip label {
  border-color: #e5e7eb;
}

.obflex-radio-1:checked ~ .obflex-thumb-strip label[for="g-img-1"],
.obflex-radio-2:checked ~ .obflex-thumb-strip label[for="g-img-2"],
.obflex-radio-3:checked ~ .obflex-thumb-strip label[for="g-img-3"],
.obflex-radio-4:checked ~ .obflex-thumb-strip label[for="g-img-4"] {
  border-color: var(--osteo-tone);
  box-shadow: 0 0 0 2px var(--osteo-tone);
}

/* Button Hover State */
.obflex-purchase-trigger:hover {
  background: var(--osteo-tone-hover) !important;
  box-shadow: 0 12px 24px -6px rgba(14, 131, 136, 0.5) !important;
}