:root {
    /* NATURE Theme variables */
    --hpn-ambient-bg: #F5F2EB; /* Soft, earthy paper tone */
    --hpn-surface-light: #FFFFFF;
    --hpn-accent-leaf: #3A5A40; /* Natural forest green */
    --hpn-accent-hover: #29442D;
    --hpn-ink-dark: #2F3E32; /* Deep organic dark green/grey */
    --hpn-edge-tone: #DCD7CD;
    
    /* Typography */
    --font-headline: 'Playfair Display', serif;
    --font-base: 'Roboto', sans-serif;
}

/* Base resets & styles */
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gallery Interaction (No JS) */
.hpn-slide {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

#hpn-pic-1:checked ~ .hpn-main-visor .hpn-slide-1,
#hpn-pic-2:checked ~ .hpn-main-visor .hpn-slide-2,
#hpn-pic-3:checked ~ .hpn-main-visor .hpn-slide-3,
#hpn-pic-4:checked ~ .hpn-main-visor .hpn-slide-4 {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* Thumbnail Active States */
.hpn-thumb-label {
    opacity: 0.5;
    border: 2px solid transparent;
}

.hpn-thumb-label:hover {
    opacity: 0.8;
}

#hpn-pic-1:checked ~ .hpn-thumb-lane label[for="hpn-pic-1"],
#hpn-pic-2:checked ~ .hpn-thumb-lane label[for="hpn-pic-2"],
#hpn-pic-3:checked ~ .hpn-thumb-lane label[for="hpn-pic-3"],
#hpn-pic-4:checked ~ .hpn-thumb-lane label[for="hpn-pic-4"] {
    opacity: 1;
    /* Preset D: Thumbnails on side WITHOUT border, just opacity change */
}

/* Preset D: CTA wide without shadow, hover underline */
.hpn-purchase-link {
    text-decoration: none;
}

.hpn-purchase-link:hover {
    background-color: var(--hpn-accent-hover) !important;
    text-decoration: underline;
}

/* Scrollbar for thumbnails on mobile */
.hpn-thumb-lane::-webkit-scrollbar {
    height: 4px;
}
.hpn-thumb-lane::-webkit-scrollbar-track {
    background: transparent;
}
.hpn-thumb-lane::-webkit-scrollbar-thumb {
    background: var(--hpn-edge-tone);
    border-radius: 999px;
}