/* Base Variables & Theme Configuration */
:root {
  --sb-nature-bg: #EAECE2;
  --sb-nature-surface: #F8F9F3;
  --sb-nature-tone: #4A633F;
  --sb-nature-tone-hover: #35492C;
  --sb-nature-ink: #232A1F;
  --sb-nature-accent: #BA7B45;
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'Fira Sans', sans-serif;
}

/* Typography Utilities */
.font-display {
    font-family: var(--font-display);
}
.font-body {
    font-family: var(--font-body);
}

/* Obfuscated Reset & Global Styles */
.sb-wellness-layout {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Nature texture overlay */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
}

/* Gallery Logic (No JS, CSS Radio state) */
.sb-state-radio {
    display: none;
}

.sb-frame-pic {
    display: none;
}

#sb-view-1:checked ~ .sb-main-lens .sb-pic-1,
#sb-view-2:checked ~ .sb-main-lens .sb-pic-2,
#sb-view-3:checked ~ .sb-main-lens .sb-pic-3,
#sb-view-4:checked ~ .sb-main-lens .sb-pic-4 {
    display: block;
    animation: sb-fade-in 0.4s ease-in-out;
}

@keyframes sb-fade-in {
    from { opacity: 0.8; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Preset C: Thumbnails opacity logic */
.sb-peg {
    opacity: 0.4;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.sb-peg:hover {
    opacity: 0.8;
}

#sb-view-1:checked ~ .sb-thumb-strip .sb-peg-1,
#sb-view-2:checked ~ .sb-thumb-strip .sb-peg-2,
#sb-view-3:checked ~ .sb-thumb-strip .sb-peg-3,
#sb-view-4:checked ~ .sb-thumb-strip .sb-peg-4 {
    opacity: 1;
    border-color: var(--sb-nature-tone);
}

/* CTA Interactions */
.sb-buy-trigger:hover {
    background-color: var(--sb-nature-tone-hover) !important;
    transform: translateY(-2px);
    /* No shadow as per rules (flat) */
}

/* Remove default link outlines but keep accessibility focus */
a:focus, label:focus {
    outline: 2px dashed var(--sb-nature-accent);
    outline-offset: 4px;
}