:root {
  --optive-bg: #f4f9f9;
  --optive-surface: #ffffff;
  --optive-tone: #0284c7;
  --optive-tone-hover: #0369a1;
  --optive-ink: #1e293b;
  --optive-muted: #64748b;
  --optive-gradient: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);
  --font-display: 'Playfair Display', serif;
  --font-body: 'Open Sans', sans-serif;
}

body.opti-page-body {
  font-family: var(--font-body);
  background-color: var(--optive-bg);
  color: var(--optive-ink);
}

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

/* Header Preset C: Large letter logo */
.opti-header-shell {
  background-color: var(--optive-surface);
  border-bottom: 1px solid #e2e8f0;
}

.opti-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--optive-gradient);
  color: #ffffff;
  font-family: var(--font-display);
}

.opti-header-title {
  color: var(--optive-ink);
}

/* Cards & Surfaces */
.opti-main-card {
  background-color: var(--optive-surface);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.opti-badge-note {
  background-color: #e0f2fe;
  color: #0369a1;
  border-radius: 8px;
}

.opti-bullet-dot {
  color: var(--optive-tone);
}

/* Gallery Radio Logic */
.opti-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

#slide-1:checked ~ .opti-slide-wrapper .opti-slide-1,
#slide-2:checked ~ .opti-slide-wrapper .opti-slide-2,
#slide-3:checked ~ .opti-slide-wrapper .opti-slide-3,
#slide-4:checked ~ .opti-slide-wrapper .opti-slide-4 {
  opacity: 1;
  pointer-events: auto;
}

/* Thumbnails (Preset C: bottom, opacity 0.5 when inactive) */
.opti-thumb-item {
  opacity: 0.5;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.opti-thumb-item:hover {
  opacity: 0.8;
}

#slide-1:checked ~ .opti-thumb-row label[for="slide-1"],
#slide-2:checked ~ .opti-thumb-row label[for="slide-2"],
#slide-3:checked ~ .opti-thumb-row label[for="slide-3"],
#slide-4:checked ~ .opti-thumb-row label[for="slide-4"] {
  opacity: 1;
  border-color: var(--optive-tone);
}

/* CTA Button (Preset C: border-left 6px accent) */
.opti-cta-btn {
  background-color: var(--optive-surface);
  color: var(--optive-tone);
  border-left: 6px solid var(--optive-tone);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.opti-cta-btn:hover {
  background-color: var(--optive-tone);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}

/* Reviews (Preset C: rounded-2xl, no borders) */
.opti-review-box {
  background-color: var(--optive-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Footer */
.opti-footer-shell {
  background-color: var(--optive-surface);
  color: var(--optive-muted);
  border-color: #e2e8f0;
}

.opti-footer-shell a {
  color: var(--optive-ink);
}