/* coq10-wellness-styles */

:root {
    --coq10-heart-bg: #f4f9f4; /* Very light, clean natural tint */
    --coq10-heart-surface: #ffffff;
    --coq10-heart-tone: #2b7a5a; /* Fresh health green */
    --coq10-heart-tone-hover: #1e5a41;
    --coq10-heart-ink: #1a202c;
    --coq10-heart-ink-light: #4a5568;
    --coq10-heart-line: #edf2f7;
    
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'Mulish', sans-serif;
    
    --coq10-radius: 999px; /* Pill style */
    --coq10-shadow: none; /* Flat design */
    --coq10-heading-transform: uppercase;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gallery CSS Logic */
.coq10-hide-input {
    display: none;
}

.coq10-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#coq10_p1:checked ~ .coq10-main-stage .s1,
#coq10_p2:checked ~ .coq10-main-stage .s2,
#coq10_p3:checked ~ .coq10-main-stage .s3,
#coq10_p4:checked ~ .coq10-main-stage .s4 {
    display: block;
    opacity: 1;
}

/* Thumbnail states */
.coq10-thumb-lbl img {
    border: 2px solid transparent; /* Preset D: no visible border visually, but keeping invisible for layout stability */
    transition: all 0.2s ease;
    opacity: 0.6;
}

.coq10-thumb-lbl:hover img {
    opacity: 0.9;
}

#coq10_p1:checked ~ .coq10-side-thumbs label[for="coq10_p1"] img,
#coq10_p2:checked ~ .coq10-side-thumbs label[for="coq10_p2"] img,
#coq10_p3:checked ~ .coq10-side-thumbs label[for="coq10_p3"] img,
#coq10_p4:checked ~ .coq10-side-thumbs label[for="coq10_p4"] img {
    border-color: var(--coq10-heart-tone);
    opacity: 1;
}

/* Call to action hover (Preset D: underline on hover) */
.coq10-action-trigger {
    display: inline-block;
    text-decoration: none;
}

.coq10-action-trigger:hover {
    background-color: var(--coq10-heart-tone-hover) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Scrollbar styling for side thumbs on mobile */
.coq10-side-thumbs::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}
.coq10-side-thumbs::-webkit-scrollbar-track {
    background: transparent;
}
.coq10-side-thumbs::-webkit-scrollbar-thumb {
    background-color: var(--coq10-heart-line);
    border-radius: var(--coq10-radius);
}