:root {
    --dandelion-bg: #F9F6F0; /* Soft nature cream/earth */
    --dandelion-surface: #FFFFFF;
    --dandelion-leaf: #6B8E23; /* Olive Green */
    --dandelion-leaf-hover: #556B2F; /* Dark Olive */
    --dandelion-ink: #3E3A35;
    --font-display: 'Merriweather', serif;
    --font-body: 'Mulish', sans-serif;
}

/* Reset basics for specific elements */
.tea-body-wrap {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gallery Logic (CSS Only) */
.tea-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1;
}

#pic1:checked ~ .view-frame .ts-1,
#pic2:checked ~ .view-frame .ts-2,
#pic3:checked ~ .view-frame .ts-3,
#pic4:checked ~ .view-frame .ts-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Thumbnail Styling */
.thumb-overlay {
    background-color: var(--dandelion-bg);
    opacity: 0.5;
}

#pic1:checked ~ .thumb-strip label[for="pic1"] .thumb-overlay,
#pic2:checked ~ .thumb-strip label[for="pic2"] .thumb-overlay,
#pic3:checked ~ .thumb-strip label[for="pic3"] .thumb-overlay,
#pic4:checked ~ .thumb-strip label[for="pic4"] .thumb-overlay {
    opacity: 0;
}

.thumb-trigger {
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

#pic1:checked ~ .thumb-strip label[for="pic1"],
#pic2:checked ~ .thumb-strip label[for="pic2"],
#pic3:checked ~ .thumb-strip label[for="pic3"],
#pic4:checked ~ .thumb-strip label[for="pic4"] {
    border-color: var(--dandelion-leaf);
}

/* CTA Interaction */
.acquire-trigger:hover {
    background-color: var(--dandelion-leaf-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* Layout Utilities (Handling responsive aspects gracefully) */
.view-frame {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 Aspect ratio fallbacks */
}

.view-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}