:root {
  --jointberry-bg: #f4f8f6;
  --jointberry-surface: #ffffff;
  --jointberry-surface-darker: #eaefec;
  --jointberry-tone: #0d9488;
  --jointberry-tone-hover: #0f766e;
  --jointberry-ink: #1e293b;
  --jointberry-gradient: linear-gradient(135deg, #0d9488 0%, #047857 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--jointberry-ink);
  background-color: var(--jointberry-bg);
  border-radius: 0;
}

h1, h2, h3, .product-title-heading, .section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Base Soft Border Radius Theme */
.vital-info-stage,
.vital-display-viewport,
.user-review-card,
.thumb-trigger {
  border-radius: 16px;
}

/* Shadow Depth: Raised */
.vital-info-stage,
.vital-display-viewport,
.user-review-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Gallery Interactivity using CSS Radio selectors */
.slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#gal-item-1:checked ~ .vital-display-viewport .slide-1,
#gal-item-2:checked ~ .vital-display-viewport .slide-2,
#gal-item-3:checked ~ .vital-display-viewport .slide-3,
#gal-item-4:checked ~ .vital-display-viewport .slide-4 {
  opacity: 1;
  visibility: visible;
}

/* Preset B Thumbnails Border Styling */
#gal-item-1:checked ~ .vital-thumb-strip .thumb-1,
#gal-item-2:checked ~ .vital-thumb-strip .thumb-2,
#gal-item-3:checked ~ .vital-thumb-strip .thumb-3,
#gal-item-4:checked ~ .vital-thumb-strip .thumb-4 {
  border-color: var(--jointberry-tone);
  box-shadow: 0 0 0 1px var(--jointberry-tone);
}

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

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

/* Preset B CTA Button (Rectangular with box-shadow) */
.cta-amazon-button {
  background-color: #f59e0b;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-amazon-button:hover {
  background-color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
}

/* Responsive adjust for Gallery Layout */
@media (max-width: 767px) {
  .vital-media-stage {
    flex-direction: column;
  }
}