/* Theme: NATURE, Font-Heading: Playfair Display, Font-Text: Mulish, Border: Soft (12px), Shadow: Raised */

:root {
    /* Nature inspired palette */
    --pukka-herb-bg: #F9F8F5; /* Very light earthy tone */
    --pukka-herb-surface: #FFFFFF;
    --pukka-herb-surface-darker: #F0EFEA; /* Slightly darker for reviews - Preset B */
    --pukka-herb-tone: #5C7A54; /* Muted natural green */
    --pukka-herb-tone-hover: #4A6343;
    --pukka-herb-ink: #3E3B35; /* Dark brown/grey for readability */
    --pukka-herb-gradient: linear-gradient(135deg, #E6EFE1 0%, #CDE0C5 100%); /* Soft botanical background for header */
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Mulish', sans-serif;
    
    /* Shapes & Shadows */
    --br-soft: 12px;
    --shadow-raised: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Base resets relying on Tailwind CDN */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-heading {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Gallery Logic (No JS) */
.pukka-frame {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 0;
}

#pukka-view-1:checked ~ div figure .frame-1,
#pukka-view-2:checked ~ div figure .frame-2,
#pukka-view-3:checked ~ div figure .frame-3,
#pukka-view-4:checked ~ div figure .frame-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Thumbnail Styling (Preset B: active state border) */
.pukka-thumb-item {
    border: 2px solid transparent;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.pukka-thumb-item:hover {
    opacity: 0.8;
}

#pukka-view-1:checked ~ div nav label[for="pukka-view-1"],
#pukka-view-2:checked ~ div nav label[for="pukka-view-2"],
#pukka-view-3:checked ~ div nav label[for="pukka-view-3"],
#pukka-view-4:checked ~ div nav label[for="pukka-view-4"] {
    border-color: var(--pukka-herb-tone);
}

/* CTA Interaction */
.pukka-purchase-link:hover {
    background-color: var(--pukka-herb-tone-hover) !important; /* Override inline */
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Scrollbar styling for horizontal thumbs on mobile */
.pukka-thumbs::-webkit-scrollbar {
    height: 4px;
}
.pukka-thumbs::-webkit-scrollbar-track {
    background: transparent;
}
.pukka-thumbs::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
}