/* 
Theme: HEALTH (Clean, fresh, soft colors)
Preset: B (Gradient header, rectangular CTA with shadow, darker review background, side thumbnails with borders)
Fonts: Playfair Display (Heading), Lato (Text)
Border: soft (16px)
Shadow: raised
Heading-case: uppercase
*/

:root {
    /* Custom Product Variables */
    --flexibility-bg: #f0fdf4; /* Soft health green tint */
    --flexibility-surface: #ffffff;
    --flexibility-text: #1f2937;
    --flexibility-accent: #0ea5e9; /* Calm ocean blue */
    --flexibility-accent-hover: #0284c7;
    --flexibility-review-bg: #f8fafc;
    
    --flexibility-gradient: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    
    --font-display: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    --shape-radius: 16px;
    --depth-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Reset basics for consistency */
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

/* CTA Button hover state */
.health-action-btn:hover {
    background-color: var(--flexibility-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Gallery CSS Logic */
.cartilage-view-main img {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

#pic1:checked ~ .cartilage-view-main .img1,
#pic2:checked ~ .cartilage-view-main .img2,
#pic3:checked ~ .cartilage-view-main .img3,
#pic4:checked ~ .cartilage-view-main .img4 {
    opacity: 1;
    pointer-events: auto;
}

/* Thumbnail Styling (Preset B) */
.collagen-thumb-list label {
    border-color: #e5e7eb;
}

#pic1:checked ~ .collagen-thumb-list label[for="pic1"],
#pic2:checked ~ .collagen-thumb-list label[for="pic2"],
#pic3:checked ~ .collagen-thumb-list label[for="pic3"],
#pic4:checked ~ .collagen-thumb-list label[for="pic4"] {
    border-color: var(--flexibility-accent);
    box-shadow: 0 0 0 1px var(--flexibility-accent);
}

/* Custom scrollbar for mobile thumbnails */
.collagen-thumb-list::-webkit-scrollbar {
    height: 6px;
}
.collagen-thumb-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.collagen-thumb-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}