:root {
  --herbal-bg: #F9FBF8;
  --herbal-surface: #FFFFFF;
  --herbal-review-surface: #EFF4ED;
  --herbal-tone: #255431;
  --herbal-tone-hover: #1B3F24;
  --herbal-gold: #E5A118;
  --herbal-ink: #1F2821;
  --herbal-muted: #596B5D;
  --herbal-gradient: linear-gradient(135deg, #1C3D24 0%, #2F5F39 100%);
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

body.tea-app-body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .tea-product-heading, .amazon-steep-checkout {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Hidden inputs for pure CSS gallery */
.tea-radio-toggle {
  display: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Preset B: Lateral Thumbnails with border */
.thumb-leaf-picker {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #D4DCD2;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
  background-color: var(--herbal-surface);
}

.thumb-leaf-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-leaf-picker:hover {
  border-color: var(--herbal-tone);
  transform: translateY(-1px);
}

/* Slide item frame transitions */
.tea-slide-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
}

/* Dynamic CSS Selection for slides and lateral thumbnail indicators */
#tea-shot-1:checked ~ .steep-interactive-shell .tea-frame-1,
#tea-shot-1:checked ~ .big-projection-canvas .tea-frame-1 {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#tea-shot-2:checked ~ .steep-interactive-shell .tea-frame-2,
#tea-shot-2:checked ~ .big-projection-canvas .tea-frame-2 {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#tea-shot-3:checked ~ .steep-interactive-shell .tea-frame-3,
#tea-shot-3:checked ~ .big-projection-canvas .tea-frame-3 {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#tea-shot-4:checked ~ .steep-interactive-shell .tea-frame-4,
#tea-shot-4:checked ~ .big-projection-canvas .tea-frame-4 {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Active Thumbnail border highlight */
#tea-shot-1:checked ~ .side-thumb-stack label[for="tea-shot-1"],
#tea-shot-2:checked ~ .side-thumb-stack label[for="tea-shot-2"],
#tea-shot-3:checked ~ .side-thumb-stack label[for="tea-shot-3"],
#tea-shot-4:checked ~ .side-thumb-stack label[for="tea-shot-4"] {
  border-color: var(--herbal-tone);
  box-shadow: 0 0 0 1px var(--herbal-tone);
}

/* Preset B CTA Button: Rectangular with distinct box-shadow */
.amazon-steep-checkout {
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(37, 84, 49, 0.4);
  text-decoration: none;
}

.amazon-steep-checkout:hover {
  background-color: var(--herbal-tone-hover) !important;
  box-shadow: 0 6px 20px rgba(27, 63, 36, 0.55);
  transform: translateY(-2px);
}

/* Feedback tiles */
.shopper-feedback-tile {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}