:root {
    --ffvital-bg: #F7F7F7;
    --ffvital-surface: #FFFFFF;
    --ffvital-tone: #AEC6CF;
    --ffvital-tone-hover: #95AFC0;
    --ffvital-ink: #2C3E50;
    --ffvital-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    --ffvital-radius: 16px;
    --font-display: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

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

/* Gallery CSS Logic */
.ffvital-radio-hide {
    display: none;
}

.slide {
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.slide-wrap  {
    padding-bottom: 100%;
}
#view1:checked ~ .slide-wrap .slide-1,
#view2:checked ~ .slide-wrap .slide-2,
#view3:checked ~ .slide-wrap .slide-3,
#view4:checked ~ .slide-wrap .slide-4 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Preset C: Thumbnails at bottom, opacity logic */
.thumb {
    opacity: 0.5;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.thumb:hover {
    opacity: 0.8;
}

#view1:checked ~ .thumb-row label[for="view1"],
#view2:checked ~ .thumb-row label[for="view2"],
#view3:checked ~ .thumb-row label[for="view3"],
#view4:checked ~ .thumb-row label[for="view4"] {
    opacity: 1;
    border-color: var(--ffvital-tone);
}

/* CTA Interaction */
.ffvital-action-trigger:hover {
    background-color: #fdfdfd !important;
    border-left-color: var(--ffvital-tone-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}