:root {
    --nutra-bg: #FDFBF7;
    --nutra-surface: #FFFFFF;
    --nutra-tone: #4A7C59;
    --nutra-tone-hover: #386044;
    --nutra-ink: #2C3E2D;
    
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, .nutra-top-brand {
    font-family: var(--font-display);
}

/* Gallery Logic strictly via CSS */
.nutra-slide {
    opacity: 0;
    z-index: 1;
}
.nutra-main-view {
    padding-bottom: 100%;
}
#nutra-pic-1:checked ~ .nutra-main-view .nutra-slide:nth-child(1),
#nutra-pic-2:checked ~ .nutra-main-view .nutra-slide:nth-child(2),
#nutra-pic-3:checked ~ .nutra-main-view .nutra-slide:nth-child(3),
#nutra-pic-4:checked ~ .nutra-main-view .nutra-slide:nth-child(4) {
    opacity: 1;
    z-index: 10;
}

/* Thumbnail Selection state */
#nutra-pic-1:checked ~ .nutra-thumb-deck label[for="nutra-pic-1"],
#nutra-pic-2:checked ~ .nutra-thumb-deck label[for="nutra-pic-2"],
#nutra-pic-3:checked ~ .nutra-thumb-deck label[for="nutra-pic-3"],
#nutra-pic-4:checked ~ .nutra-thumb-deck label[for="nutra-pic-4"] {
    border-color: var(--nutra-tone);
    opacity: 1;
}

.nutra-thumb-trigger {
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.nutra-thumb-trigger:hover {
    opacity: 0.9;
}

/* Interactive Elements */
.nutra-buy-link:hover {
    background-color: var(--nutra-tone-hover) !important;
    transform: translateY(-2px);
}

/* Hide scrollbar for thumbnail deck but keep functionality */
.nutra-thumb-deck::-webkit-scrollbar {
    height: 4px;
}
.nutra-thumb-deck::-webkit-scrollbar-track {
    background: transparent;
}
.nutra-thumb-deck::-webkit-scrollbar-thumb {
    background: rgba(74, 124, 89, 0.2);
    border-radius: 999px;
}