:root {
  --nettle-bg: #f8faf7;
  --nettle-surface: #ffffff;
  --nettle-tone: #2d6a4f;
  --nettle-tone-hover: #1b4332;
  --nettle-pale: #e8f5e9;
  --nettle-ink: #1f2937;
  --nettle-muted: #6b7280;
  --nettle-accent-border: #52b788;
  --nettle-gradient: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
  --font-display: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
}

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

/* Preset C: Header with large monogram letter logo */
.nettle-top-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.nettle-brand-monogram {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(45, 106, 79, 0.25);
}

/* Media Holder & CSS Gallery */
.nettle-media-holder {
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.nettle-main-canvas {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}

.nettle-slide-unit {
  display: none;
}

.nettle-radio-slot-1:checked ~ .nettle-main-canvas .nettle-slide-unit-1,
.nettle-radio-slot-2:checked ~ .nettle-main-canvas .nettle-slide-unit-2,
.nettle-radio-slot-3:checked ~ .nettle-main-canvas .nettle-slide-unit-3,
.nettle-radio-slot-4:checked ~ .nettle-main-canvas .nettle-slide-unit-4 {
  display: block;
}

/* Preset C: Thumbnails on bottom, opacity 0.5 when inactive */
.nettle-thumb-handle {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  background-color: #ffffff;
}

.nettle-thumb-handle:hover {
  opacity: 0.85;
}

.nettle-radio-slot-1:checked ~ .nettle-thumbnails-cluster .nettle-thumb-1,
.nettle-radio-slot-2:checked ~ .nettle-thumbnails-cluster .nettle-thumb-2,
.nettle-radio-slot-3:checked ~ .nettle-thumbnails-cluster .nettle-thumb-3,
.nettle-radio-slot-4:checked ~ .nettle-thumbnails-cluster .nettle-thumb-4 {
  opacity: 1;
  border-color: var(--nettle-tone);
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(45, 106, 79, 0.2);
}

/* Preset C: CTA with left accent border (6px) */
.nettle-action-button {
  border-left: 6px solid var(--nettle-accent-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(45, 106, 79, 0.22);
  text-decoration: none;
}

.nettle-action-button:hover {
  background-color: var(--nettle-tone-hover) !important;
  box-shadow: 0 8px 22px rgba(45, 106, 79, 0.32);
  transform: translateY(-1px);
}

/* Preset C: Reviews with rounded-2xl and no borders */
.nettle-testimonial-panel {
  border-radius: 1rem; /* rounded-2xl */
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.nettle-bullet-point {
  font-weight: bold;
}