:root {
  --herbaltea-bg: #F4F7F2;
  --herbaltea-surface: #FFFFFF;
  --herbaltea-surface-darker: #EBF1E8;
  --herbaltea-border: #D2E0CD;
  --herbaltea-tone: #2D5A27;
  --herbaltea-tone-hover: #22441D;
  --herbaltea-ink: #1C2819;
  --herbaltea-gradient: linear-gradient(135deg, #2D5A27 0%, #1C2819 100%);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Mulish', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--herbaltea-ink);
  background-color: var(--herbaltea-bg);
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

/* Gallery logic pure CSS */
.slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.thumb-lbl {
  border: 2px solid var(--herbaltea-border);
  border-radius: 12px;
  opacity: 0.6;
  transition: all 0.2s ease-in-out;
}

.thumb-lbl:hover {
  opacity: 1;
}

#pic-1:checked ~ div .slide-item-1,
#pic-2:checked ~ div .slide-item-2,
#pic-3:checked ~ div .slide-item-3,
#pic-4:checked ~ div .slide-item-4 {
  opacity: 1;
  pointer-events: auto;
}

#pic-1:checked ~ div .thumb-lbl-1,
#pic-2:checked ~ div .thumb-lbl-2,
#pic-3:checked ~ div .thumb-lbl-3,
#pic-4:checked ~ div .thumb-lbl-4 {
  border-color: var(--herbaltea-tone);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(45, 90, 39, 0.25);
}

/* Hover effects for action CTA */
.action-buy-btn:hover {
  background-color: var(--herbaltea-tone-hover) !important;
  transform: translateY(-1px);
}