/* 
Theme: HEALTH (Clean, fresh design with therapeutic soft greens/blues for wellness)
Preset: B (Gradient header, box-shadow rectangular CTA, side-border thumbs, darker review backgrounds)
Fonts: Oswald (Heading - Normal case) / Lato (Text)
Border-radius: Soft (16px)
Shadow-depth: Deep
*/

:root {
    /* Product Specific Variables */
    --qn-bg-base: #f4fbf8;
    --qn-bg-alt: #e8f4f0;
    --qn-panel-surface: #ffffff;
    
    --qn-brand-prime: #2d897a;
    --qn-brand-soft: #a8d5cc;
    --qn-brand-dark: #1b5249;
    
    --qn-text-main: #1e3a35;
    --qn-text-muted: #4a6b65;
    
    --qn-gradient-brand: linear-gradient(135deg, #2d897a 0%, #1b5249 100%);
    
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Lato', sans-serif;
    
    --qn-radius-soft: 16px;
    --qn-shadow-deep: 0 15px 35px -5px rgba(27, 82, 73, 0.2), 0 8px 15px -8px rgba(27, 82, 73, 0.15);
}

/* Gallery CSS Logic */
.qn-slide {
    display: none;
    transition: opacity 0.4s ease-in-out;
}

#qn-pic-1:checked ~ .qunol-hero-frame .qn-slide-1,
#qn-pic-2:checked ~ .qunol-hero-frame .qn-slide-2,
#qn-pic-3:checked ~ .qunol-hero-frame .qn-slide-3,
#qn-pic-4:checked ~ .qunol-hero-frame .qn-slide-4 {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Thumbnail Styling & States (Preset B) */
.qunol-thumb-trigger {
    border: 3px solid transparent;
    transition: all 0.2s ease;
    background-color: var(--qn-panel-surface);
}

.qunol-thumb-trigger:hover {
    border-color: var(--qn-brand-soft);
    transform: translateY(-2px);
}

#qn-pic-1:checked ~ .qunol-thumb-track [for="qn-pic-1"],
#qn-pic-2:checked ~ .qunol-thumb-track [for="qn-pic-2"],
#qn-pic-3:checked ~ .qunol-thumb-track [for="qn-pic-3"],
#qn-pic-4:checked ~ .qunol-thumb-track [for="qn-pic-4"] {
    border-color: var(--qn-brand-prime);
    box-shadow: 0 4px 10px rgba(45, 137, 122, 0.3);
}

/* Custom CTA Hover */
.qunol-trigger-link:hover {
    background-color: var(--qn-brand-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -5px rgba(27, 82, 73, 0.3) !important;
}
.qunol-trigger-link:active {
    transform: translateY(1px);
}

/* Scrollbar for horizontal mobile thumbs */
.qunol-thumb-track::-webkit-scrollbar {
    height: 6px;
}
.qunol-thumb-track::-webkit-scrollbar-track {
    background: var(--qn-bg-alt);
    border-radius: 10px;
}
.qunol-thumb-track::-webkit-scrollbar-thumb {
    background: var(--qn-brand-soft);
    border-radius: 10px;
}