/* Custom CSS Variables based on product theme (Nature/Herbal) */
:root {
    --dande-page-bg: #FAFAFA;
    --dande-surface: #FFFFFF;
    --dande-review-bg: #F0F4EF;
    --dande-leaf-tone: #4A7C59;
    --dande-leaf-hover: #3A6346;
    --dande-text-ink: #2E3A33;
    --dande-top-grad: linear-gradient(135deg, #e8f0e5 0%, #d4e0d0 100%);
    
    --font-display: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    /* Preset B & General Visual constraints */
    --dande-radius: 16px; /* Soft radius */
    --dande-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Raised shadow */
}

/* Reset base styles for custom fonts */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for side thumbnails (mobile friendly) */
.nice-scroll::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.nice-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.nice-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* ===== Gallery Engine Logic (No JS) ===== */
.dande-pic-frame {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
    pointer-events: none;
}

/* Show corresponding image when radio is checked */
#p1:checked ~ .dande-vis-layout .d-frame-1,
#p2:checked ~ .dande-vis-layout .d-frame-2,
#p3:checked ~ .dande-vis-layout .d-frame-3,
#p4:checked ~ .dande-vis-layout .d-frame-4 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Highlight thumbnail border when active */
#p1:checked ~ .dande-vis-layout .dande-t-mark[for="p1"],
#p2:checked ~ .dande-vis-layout .dande-t-mark[for="p2"],
#p3:checked ~ .dande-vis-layout .dande-t-mark[for="p3"],
#p4:checked ~ .dande-vis-layout .dande-t-mark[for="p4"] {
    border-color: var(--dande-leaf-tone);
    box-shadow: 0 0 0 1px var(--dande-leaf-tone);
}

/* Minor border radius apply for thumbs */
.dande-t-mark {
    border-radius: 12px;
}

/* ===== Interactions ===== */
.dande-action-link:hover {
    background-color: var(--dande-leaf-hover) !important;
}