:root {
  --dimcraft-bg: #f4f8f6;
  --dimcraft-surface: #ffffff;
  --dimcraft-tone: #1a5e42;
  --dimcraft-tone-hover: #134530;
  --dimcraft-ink: #22312b;
  --dimcraft-gradient: linear-gradient(135deg, #1a5e42 0%, #2e8b57 100%);
  --font-display: 'Merriweather', serif;
  --font-body: 'Inter', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Slide switching logic via CSS */
.dimcraft-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#slide-1:checked ~ .dimcraft-view-window .slide-img-1,
#slide-2:checked ~ .dimcraft-view-window .slide-img-2,
#slide-3:checked ~ .dimcraft-view-window .slide-img-3,
#slide-4:checked ~ .dimcraft-view-window .slide-img-4 {
  opacity: 1;
  visibility: visible;
}

/* Thumbnail highlighting */
#slide-1:checked ~ .dimcraft-thumbs-strip label[for="slide-1"] img,
#slide-2:checked ~ .dimcraft-thumbs-strip label[for="slide-2"] img,
#slide-3:checked ~ .dimcraft-thumbs-strip label[for="slide-3"] img,
#slide-4:checked ~ .dimcraft-thumbs-strip label[for="slide-4"] img {
  border-color: var(--dimcraft-tone);
  box-shadow: 0 0 0 2px var(--dimcraft-tone);
}

/* Interactive elements */
.dimcraft-buy-btn:hover {
  background-color: var(--dimcraft-tone-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 94, 66, 0.45) !important;
}

.dimcraft-user-review {
  transition: background-color 0.2s ease;
}

.dimcraft-user-review:hover {
  background-color: #f3f4f6 !important;
}