/* 
Theme: SOFT (light gray background, pastel accent, depth via shadows)
Preset: A
Fonts: Montserrat (Heading), Open Sans (Text)
Border-radius: Soft (16px)
Shadow: Raised
*/

:root {
  --ff-page-bg: #F7F7F7;
  --ff-surface: #FFFFFF;
  --ff-ink: #4B5563;
  --ff-ink-dark: #1F2937;
  --ff-mute: #9CA3AF;
  --ff-brand: #38bdf8; /* Soft distinct blue for health/water flow */
  --ff-brand-hover: #0ea5e9;
  
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  
  --ff-rounded: 16px;
  --ff-elevation: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-elevation-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

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

/* Gallery CSS Engine (No JS) */
.ff-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1;
}

#pic1:checked ~ .ff-stage .slide-1,
#pic2:checked ~ .ff-stage .slide-2,
#pic3:checked ~ .ff-stage .slide-3,
#pic4:checked ~ .ff-stage .slide-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Thumbnail selected state styling */
.ff-thumb-strip label {
    transition: all 0.2s ease;
    opacity: 0.6;
}
.ff-thumb-strip label:hover {
    opacity: 0.8;
}

#pic1:checked ~ .ff-thumb-strip label[for="pic1"],
#pic2:checked ~ .ff-thumb-strip label[for="pic2"],
#pic3:checked ~ .ff-thumb-strip label[for="pic3"],
#pic4:checked ~ .ff-thumb-strip label[for="pic4"] {
    border-color: var(--ff-brand);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--ff-brand);
}

/* CTA Interactions */
.ff-purchase-trigger {
    box-shadow: var(--ff-elevation);
    text-decoration: none;
}

.ff-purchase-trigger:hover {
    background-color: var(--ff-brand-hover) !important;
    box-shadow: var(--ff-elevation-hover);
    transform: translateY(-2px);
}