:root {
  --kegel-bg: #F8F9FA;
  --kegel-surface: #FFFFFF;
  --kegel-tone: #0F766E;
  --kegel-tone-hover: #115E59;
  --kegel-ink: #1F2937;
  --kegel-accent: #E0F2FE;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--kegel-ink);
  background-color: var(--kegel-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Preset A: Accent border bottom under header */
.kegel-top-dock {
  background-color: var(--kegel-surface);
  border-bottom: 4px solid var(--kegel-tone);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.kegel-site-tagline {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kegel-ink);
  text-transform: uppercase;
}

.kegel-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--kegel-ink);
  letter-spacing: -0.02em;
}

/* Gallery CSS-only Logic */
.kegel-slide-selector {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kegel-view-item {
  display: none;
}

.kegel-sel-1:checked ~ .kegel-viewport-frame .kegel-item-1 {
  display: block;
}

.kegel-sel-2:checked ~ .kegel-viewport-frame .kegel-item-2 {
  display: block;
}

.kegel-sel-3:checked ~ .kegel-viewport-frame .kegel-item-3 {
  display: block;
}

.kegel-sel-4:checked ~ .kegel-viewport-frame .kegel-item-4 {
  display: block;
}

/* Thumbnails highlight based on active selection */
.kegel-sel-1:checked ~ .kegel-thumbs-strip .kegel-label-1,
.kegel-sel-2:checked ~ .kegel-thumbs-strip .kegel-label-2,
.kegel-sel-3:checked ~ .kegel-thumbs-strip .kegel-label-3,
.kegel-sel-4:checked ~ .kegel-thumbs-strip .kegel-label-4 {
  border-color: var(--kegel-tone);
  box-shadow: 0 0 0 1px var(--kegel-tone);
}

.kegel-thumb-trigger {
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.kegel-thumb-trigger:hover {
  transform: translateY(-2px);
}

/* Preset A CTA: Pill style (border-radius: 999px) with hover shadow */
.kegel-action-link {
  font-family: var(--font-display);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
  text-decoration: none;
}

.kegel-action-link:hover {
  background-color: var(--kegel-tone-hover) !important;
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.4);
  transform: translateY(-1px);
}

.kegel-action-link:active {
  transform: translateY(0);
}

/* Preset A Reviews: Left colored border 4px */
.kegel-single-comment {
  border-left: 4px solid var(--kegel-tone);
  border-top: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}