/* 
   Theme: HEALTH (Clean, fresh, health/wellness focus)
   Preset: B (Gradient header, rectangular CTA with shadow, darker rounded reviews, side thumbs with border)
*/

:root {
    /* Color Palette */
    --chr-bg: #F8FAFC; /* Very light cool gray/blue */
    --chr-surface: #FFFFFF;
    --chr-surface-tint: #F1F5F9; /* Slightly darker background for reviews/footer */
    --chr-accent-tone: #0EA5E9; /* Fresh sky blue */
    --chr-accent-hover: #0284C7;
    --chr-ink-dark: #0F172A;
    --chr-ink: #334155;
    --chr-ink-light: #64748B;
    
    /* Gradients */
    --chr-gradient: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    
    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    /* Borders & Shadows */
    --chr-radius-soft: 16px;
    --chr-shadow-deep: 0 20px 25px -5px rgba(14, 165, 233, 0.1), 0 10px 10px -5px rgba(14, 165, 233, 0.04);
}

/* Global Resets affecting custom fonts */
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base styles applied via inline styles in HTML, but backup here */
.chr-body-envelope {
    background-color: var(--chr-bg);
    color: var(--chr-ink);
    font-family: var(--font-body);
}

/* 
========================================
Gallery Logic (Pure CSS)
========================================
*/

/* Hide all slides initially */
.chr-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1;
}

/* Show slide based on checked radio */
#chr-pic-1:checked ~ .flex .chr-main-stage .chr-slide-1,
#chr-pic-2:checked ~ .flex .chr-main-stage .chr-slide-2,
#chr-pic-3:checked ~ .flex .chr-main-stage .chr-slide-3,
#chr-pic-4:checked ~ .flex .chr-main-stage .chr-slide-4 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Thumbnail Styling (Preset B: Border logic) */
.chr-thumb-item {
    border-color: transparent;
    opacity: 0.7;
}

.chr-thumb-item:hover {
    opacity: 1;
}

#chr-pic-1:checked ~ .flex .chr-thumb-track label[for="chr-pic-1"],
#chr-pic-2:checked ~ .flex .chr-thumb-track label[for="chr-pic-2"],
#chr-pic-3:checked ~ .flex .chr-thumb-track label[for="chr-pic-3"],
#chr-pic-4:checked ~ .flex .chr-thumb-track label[for="chr-pic-4"] {
    border-color: var(--chr-accent-tone);
    opacity: 1;
}

/* CTA Hover Effect */
.chr-purchase-trigger:hover {
    background-color: var(--chr-accent-hover) !important;
}

/* Custom Scrollbar for side thumbs if needed on very small devices */
.chr-thumb-track {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--chr-ink-light) transparent;
}
.chr-thumb-track::-webkit-scrollbar {
    width: 4px;
}
.chr-thumb-track::-webkit-scrollbar-thumb {
    background-color: var(--chr-ink-light);
    border-radius: 10px;
}