/* Health Theme CSS Variables */
:root {
    --tp-canvas: #f0fdf4; /* Soft nature green background */
    --tp-surface: #ffffff; /* Clean white surface */
    --tp-vitality: #10b981; /* Fresh health green accent */
    --tp-vitality-hover: #059669; /* Darker green hover */
    --tp-ink-dark: #1f2937; /* Dark text */
    --tp-ink-medium: #4b5563; /* Regular text */
    --tp-ink-light: #9ca3af; /* Muted text */
    --tp-radius: 16px; /* Soft radius */
    
    --font-display: 'Playfair Display', serif;
    --font-body: 'Mulish', sans-serif;
}

/* Reset basics not covered perfectly by CDN without config */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Gallery Logic (No JS) */
.tp-shot-toggle {
    display: none;
}

.tp-main-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1; /* Square for product imagery */
    overflow: hidden;
    padding: 1rem;
}

.tp-frame-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
}

/* Show slide based on checked radio */
#shot1:checked ~ .tp-main-viewport .frame-1,
#shot2:checked ~ .tp-main-viewport .frame-2,
#shot3:checked ~ .tp-main-viewport .frame-3,
#shot4:checked ~ .tp-main-viewport .frame-4 {
    opacity: 1;
    z-index: 10;
}

/* Thumbnails Strip (Bottom) */
.tp-thumb-strip {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.tp-thumb-node {
    flex: 0 0 calc(25% - 9px);
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--tp-surface);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tp-thumb-node img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.tp-thumb-node:hover img {
    opacity: 1;
}

/* Highlight active thumbnail */
#shot1:checked ~ .tp-thumb-strip label[for="shot1"],
#shot2:checked ~ .tp-thumb-strip label[for="shot2"],
#shot3:checked ~ .tp-thumb-strip label[for="shot3"],
#shot4:checked ~ .tp-thumb-strip label[for="shot4"] {
    border-color: var(--tp-vitality);
}

#shot1:checked ~ .tp-thumb-strip label[for="shot1"] img,
#shot2:checked ~ .tp-thumb-strip label[for="shot2"] img,
#shot3:checked ~ .tp-thumb-strip label[for="shot3"] img,
#shot4:checked ~ .tp-thumb-strip label[for="shot4"] img {
    opacity: 1;
}

/* Action button smooth transition */
.tp-action-pill {
    text-decoration: none;
}