:root {
    /* Theme: HEALTH - Clean, fresh, focused on wellness */
    --hyl-bg: #eef8f3;
    --hyl-surface: #ffffff;
    --hyl-tone: #2e9e7b;
    --hyl-tone-hover: #227d60;
    --hyl-ink: #1f2937;
    --hyl-gradient: linear-gradient(135deg, #2e9e7b, #43b994);
    
    /* Typography */
    --font-display: 'Nunito', sans-serif;
    --font-body: 'Mulish', sans-serif;
}

/* Base resets & setups */
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography styles applied dynamically via var */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    text-transform: uppercase;
}

.opt-stage {
    padding-bottom: 100%;
}

/* Gallery CSS Mechanism */
.opt-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1;
}

#opt-pic-1:checked ~ .opt-stage .opt-s1,
#opt-pic-2:checked ~ .opt-stage .opt-s2,
#opt-pic-3:checked ~ .opt-stage .opt-s3,
#opt-pic-4:checked ~ .opt-stage .opt-s4 {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

/* Thumbnails visual feedback */
.opt-thumb-trigger {
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.opt-thumb-trigger:hover {
    transform: translateY(-2px);
}

#opt-pic-1:checked ~ .opt-thumb-row label[for="opt-pic-1"],
#opt-pic-2:checked ~ .opt-thumb-row label[for="opt-pic-2"],
#opt-pic-3:checked ~ .opt-thumb-row label[for="opt-pic-3"],
#opt-pic-4:checked ~ .opt-thumb-row label[for="opt-pic-4"] {
    border-color: var(--hyl-tone);
    box-shadow: 0 4px 12px rgba(46, 158, 123, 0.3);
}

/* CTA Styles (Preset A: Pill shape + hover shadow) */
.opt-buy-link {
    box-shadow: 0 4px 15px rgba(46, 158, 123, 0.4);
    text-decoration: none;
    display: inline-block;
}

.opt-buy-link:hover {
    box-shadow: 0 8px 25px rgba(46, 158, 123, 0.6);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #227d60, #2e9e7b) !important;
}

/* Review elements subtle interactions */
.opt-opinion-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opt-opinion-box:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* Custom Scrollbar for thumbnails on mobile */
.opt-thumb-row::-webkit-scrollbar {
    height: 6px;
}
.opt-thumb-row::-webkit-scrollbar-track {
    background: transparent;
}
.opt-thumb-row::-webkit-scrollbar-thumb {
    background-color: rgba(46, 158, 123, 0.3);
    border-radius: 10px;
}