:root {
    /* Theme: HEALTH (Soft, clean, mint/green vibes) */
    --gluco-caps-bg: #F4FBF7; 
    --gluco-caps-surface: #FFFFFF;
    --gluco-caps-surface-dark: #EAF5ED; 
    --gluco-caps-tone: #10B981; 
    --gluco-caps-tone-hover: #059669;
    --gluco-caps-ink: #1F2937;
    
    /* Preset B Header Gradient */
    --gluco-caps-gradient: linear-gradient(135deg, #A7F3D0 0%, #34D399 100%);
    
    /* Typography Selection */
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* Base resets & font application kept to tailwind classes in HTML where possible, 
   but specific structure logic goes here */

html {
    scroll-behavior: smooth;
}

/* CSS-Only Gallery Logic */
.gluco-large-img {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1;
}

/* Show slide based on checked radio */
#gl_pic_1:checked ~ .gluco-main-view .gluco-i-1,
#gl_pic_2:checked ~ .gluco-main-view .gluco-i-2,
#gl_pic_3:checked ~ .gluco-main-view .gluco-i-3,
#gl_pic_4:checked ~ .gluco-main-view .gluco-i-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Style active thumbnail (Preset B: Thumbnails side with border) */
.gluco-t-label {
    border: 2px solid transparent;
}

#gl_pic_1:checked ~ .gluco-thumb-col .gluco-l-1,
#gl_pic_2:checked ~ .gluco-thumb-col .gluco-l-2,
#gl_pic_3:checked ~ .gluco-thumb-col .gluco-l-3,
#gl_pic_4:checked ~ .gluco-thumb-col .gluco-l-4 {
    border-color: var(--gluco-caps-tone);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}

/* Hover effects for buttons and links handled via Tailwind classes in HTML */
.gluco-buy-trigger:hover {
    background-color: var(--gluco-caps-tone-hover) !important;
}

/* Ensure images don't break aspect ratios */
.gluco-t-label img {
    -webkit-user-drag: none;
}