:root {
    /* Health Theme Colors */
    --herbal-fusion-bg: #f3fcf9;
    --herbal-fusion-surface: #ffffff;
    --herbal-fusion-surface-alt: #e6f7f4;
    --herbal-fusion-tone: #10b981; /* Emerald green */
    --herbal-fusion-tone-hover: #059669;
    --herbal-fusion-ink: #334155;
    --herbal-fusion-ink-dark: #0f172a;
    --herbal-fusion-ink-light: #64748b;
    --herbal-fusion-gradient: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%);
    
    /* Typography */
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Mulish', sans-serif;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.hidden-radio {
    display: none;
}

/* Gallery Base Mobile */
.visual-grid-b {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.main-stage-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--herbal-fusion-surface);
}

.stage-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.stage-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.thumbs-axis {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--herbal-fusion-tone) transparent;
}

.thumbs-axis::-webkit-scrollbar {
    height: 6px;
}
.thumbs-axis::-webkit-scrollbar-thumb {
    background-color: var(--herbal-fusion-tone);
    border-radius: 10px;
}

.thumb-trigger {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    cursor: pointer;
    border: 3px solid #e2e8f0;
    overflow: hidden;
    transition: border-color 0.2s ease;
    background-color: #fff;
    padding: 2px;
}

.thumb-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* CSS Radio Logic */
#view1:checked ~ .visual-grid-b .main-stage-area .frame-1,
#view2:checked ~ .visual-grid-b .main-stage-area .frame-2,
#view3:checked ~ .visual-grid-b .main-stage-area .frame-3,
#view4:checked ~ .visual-grid-b .main-stage-area .frame-4 {
    opacity: 1;
    z-index: 10;
}

#view1:checked ~ .visual-grid-b .thumbs-axis label[for="view1"],
#view2:checked ~ .visual-grid-b .thumbs-axis label[for="view2"],
#view3:checked ~ .visual-grid-b .thumbs-axis label[for="view3"],
#view4:checked ~ .visual-grid-b .thumbs-axis label[for="view4"] {
    border-color: var(--herbal-fusion-tone);
}

/* Interactive Elements */
.amazon-purchase-trigger:hover {
    background-color: var(--herbal-fusion-tone-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 20px -3px rgba(46, 139, 87, 0.5), 0 4px 6px -2px rgba(46, 139, 87, 0.3) !important;
}

/* Desktop Layout (Preset B: side thumbs + grid combo) */
@media (min-width: 860px) {
    .precious-infusion-showcase {
        flex-direction: row !important;
        align-items: flex-start;
        gap: 4rem !important;
    }

    .herb-visual-cluster {
        flex: 1;
        min-width: 0;
        position: sticky;
        top: 2rem;
    }

    .treasure-details-pane {
        flex: 1.2;
        min-width: 0;
    }

    .visual-grid-b {
        display: grid;
        grid-template-columns: 85px 1fr;
        gap: 1.5rem;
    }

    .thumbs-axis {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .thumb-trigger {
        width: 85px;
        height: 85px;
    }
}