:root {
  --np-core-bg: #eef7f6; /* Clean soft health theme background */
  --np-panel-surface: #ffffff;
  --np-vital-tone: #248b80; /* Nature/Health focus teal */
  --np-vital-tone-hover: #1b6c63;
  --np-ink-shade: #2d3748;
  --np-flow-gradient: linear-gradient(135deg, #248b80 0%, #43a89e 100%);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

/* Base resets handled by Tailwind, custom specifics below */

.np-slide-1, 
.np-slide-2, 
.np-slide-3, 
.np-slide-4 {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
}

/* Gallery Logic strictly via CSS */
#np-pic-1:checked ~ .np-slide-wrap .np-slide-1 { opacity: 1; z-index: 10; }
#np-pic-2:checked ~ .np-slide-wrap .np-slide-2 { opacity: 1; z-index: 10; }
#np-pic-3:checked ~ .np-slide-wrap .np-slide-3 { opacity: 1; z-index: 10; }
#np-pic-4:checked ~ .np-slide-wrap .np-slide-4 { opacity: 1; z-index: 10; }

.np-thumb-nav label {
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.np-thumb-nav label:hover {
    opacity: 0.8;
}
.np-slide-wrap {
    padding-bottom: 100%;
}
#np-pic-1:checked ~ .np-thumb-nav label[for="np-pic-1"],
#np-pic-2:checked ~ .np-thumb-nav label[for="np-pic-2"],
#np-pic-3:checked ~ .np-thumb-nav label[for="np-pic-3"],
#np-pic-4:checked ~ .np-thumb-nav label[for="np-pic-4"] {
    border-color: var(--np-vital-tone);
    transform: scale(1.05);
}

/* CTA Button Styling (Preset A: Pill shape + hover shadow) */
.np-purchase-link {
    background: var(--np-flow-gradient);
    color: #ffffff;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 1.25rem 4rem;
    border-radius: 999px; /* Pill */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 1px;
}

.np-purchase-link:hover {
    box-shadow: 0 12px 20px rgba(36, 139, 128, 0.3);
    transform: translateY(-3px);
    background: var(--np-vital-tone-hover);
}

/* Review Article hover effect */
.np-opinion-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.np-opinion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}