:root {
    /* Nature Theme Colors */
    --herb-canvas: #F9F7F1;
    --herb-surface: #FFFFFF;
    --herb-accent: #5A7D59;
    --herb-accent-hover: #436142;
    --herb-ink: #3A322B;
    
    /* Visual Parameters */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --shape-radius: 12px;
    --depth-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --depth-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Base Styles */
body.testtea-environment {
    background-color: var(--herb-canvas);
    font-family: var(--font-body);
    color: var(--herb-ink);
}

h1, h2, h3, .testtea-headline, .testtea-logo-font {
    font-family: var(--font-heading);
    font-weight: normal; /* heading-case: normal enforced by default, not uppercase */
}

/* Preset A: Header stripe */
.testtea-top-stripe {
    background-color: var(--herb-surface);
    border-bottom: 4px solid var(--herb-accent);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Gallery Engine (Radio + CSS) */
.testtea-visual-engine {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.testtea-lens-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--herb-surface);
    border-radius: var(--shape-radius);
    overflow: hidden;
    box-shadow: var(--depth-shadow);
}

.tt-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
}

/* Gallery Logic */
#view-1:checked ~ .testtea-lens-area .f-1,
#view-2:checked ~ .testtea-lens-area .f-2,
#view-3:checked ~ .testtea-lens-area .f-3,
#view-4:checked ~ .testtea-lens-area .f-4 {
    opacity: 1;
    z-index: 10;
}

/* Preset A: Thumbnails Below */
.testtea-thumb-track {
    display: flex;
    gap: 0.75rem;
}

.testtea-thumb-track label {
    flex: 1;
    cursor: pointer;
    border-radius: var(--shape-radius);
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
    box-shadow: var(--depth-shadow);
    background: var(--herb-surface);
    aspect-ratio: 1 / 1;
}

.testtea-thumb-track label:hover {
    transform: translateY(-2px);
}

.testtea-thumb-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnails Active State Logic */
#view-1:checked ~ .testtea-thumb-track label[for="view-1"],
#view-2:checked ~ .testtea-thumb-track label[for="view-2"],
#view-3:checked ~ .testtea-thumb-track label[for="view-3"],
#view-4:checked ~ .testtea-thumb-track label[for="view-4"] {
    border-color: var(--herb-accent);
}

/* CTA Pill (Preset A & Requirements) */
.testtea-action-pill {
    border-radius: 999px; /* Pill shape */
    box-shadow: var(--depth-shadow);
    text-decoration: none;
    transition: all 0.3s ease;
}

.testtea-action-pill:hover {
    background-color: var(--herb-accent-hover) !important;
    box-shadow: var(--depth-shadow-hover);
}

/* Reviews (Preset A: Left colored border) */
.testtea-voice-capsule {
    background-color: var(--herb-surface);
    border-radius: 0 var(--shape-radius) var(--shape-radius) 0;
    box-shadow: var(--depth-shadow);
    border-left: 4px solid var(--herb-accent);
    transition: transform 0.2s ease;
}

.testtea-voice-capsule:hover {
    transform: translateX(4px);
}

/* Review Photos Fix */
.testtea-photo-proof {
    border-radius: calc(var(--shape-radius) / 2);
    border: 2px solid #e5e7eb;
}

/* Content specific styling */
.testtea-narrative strong {
    font-family: var(--font-heading);
    color: var(--herb-accent);
}