/* System Variables setup for "Soft" theme logic */
:root {
  --puritan-coq10-bg: #F7F7F7; /* Soft light gray background */
  --puritan-coq10-surface: #FFFFFF; /* Clean white for content areas */
  --puritan-coq10-tone: #4B9093; /* Pastel Teal/Blue accent for health/wellness feel */
  --puritan-coq10-tone-hover: #386f72;
  --puritan-coq10-ink: #2d3748; /* Dark gray text, softer than pure black */
  --puritan-coq10-gradient: linear-gradient(145deg, #ffffff 0%, #f4f6f6 100%);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Lato', sans-serif;
  
  /* Border Radius constraint: Soft (12-20px) */
  --puritan-coq10-radius: 16px;
}

/* Global resets for pure presentation avoiding framework clashes */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

* {
    box-sizing: border-box;
}

/* Base link reset to avoid global tailwind overrides on our scoped areas */
a {
    text-decoration: none;
    color: inherit;
}

/* Typography refinements */
h1, h2, h3, h4, h5, h6 {
    color: var(--puritan-coq10-ink);
}

p {
    color: var(--puritan-coq10-ink);
}

/* 
   ===============================================
   Gallery Logic (CSS ONLY, NO JS)
   Preset A: Thumbnails on the bottom
   ===============================================
*/

/* Hide all main slot images initially */
.puritan-coq10-img-slot {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1;
}

/* Connect radios to corresponding image display */
#pgal1:checked ~ .puritan-coq10-main-stage .gal-item-1,
#pgal2:checked ~ .puritan-coq10-main-stage .gal-item-2,
#pgal3:checked ~ .puritan-coq10-main-stage .gal-item-3,
#pgal4:checked ~ .puritan-coq10-main-stage .gal-item-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Highlight active thumbnail based on checked radio */
#pgal1:checked ~ .puritan-coq10-minis-track label[for="pgal1"],
#pgal2:checked ~ .puritan-coq10-minis-track label[for="pgal2"],
#pgal3:checked ~ .puritan-coq10-minis-track label[for="pgal3"],
#pgal4:checked ~ .puritan-coq10-minis-track label[for="pgal4"] {
    border-color: var(--puritan-coq10-tone);
    box-shadow: 0 0 0 2px rgba(75, 144, 147, 0.2);
}

/* Thumbnail hover effects */
.puritan-coq10-minis-track label:hover {
    border-color: var(--puritan-coq10-tone-hover);
    opacity: 0.9;
}

/* 
   ===============================================
   Interactive Elements Styling
   Preset A CTA Constraints & Hover states
   ===============================================
*/

/* CTA Button Interaction */
.puritan-coq10-purchase-link {
    box-shadow: 0 4px 14px 0 rgba(75, 144, 147, 0.3);
}

.puritan-coq10-purchase-link:hover {
    background-color: var(--puritan-coq10-tone-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(75, 144, 147, 0.4);
}

.puritan-coq10-purchase-link:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(75, 144, 147, 0.3);
}

/* Review Block details */
.puritan-coq10-buyer-note {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.puritan-coq10-buyer-note:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Smooth scrolling for anchor links natively */
html {
    scroll-behavior: smooth;
}