:root {
  --arthro-bg: #f2f7f9;
  --arthro-surface: #ffffff;
  --arthro-tone: #0ea5e9;
  --arthro-tone-hover: #0284c7;
  --arthro-ink: #1e293b;
  --arthro-ink-light: #475569;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
}

/* Base resets handled mostly by Tailwind, specific overrides below */
body {
    background-color: var(--arthro-bg);
    color: var(--arthro-ink);
}

/* Gallery Logic - Pure CSS */
.arthro-radio-trigger {
    display: none;
}

.arthro-main-pic {
    display: none;
}

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

@keyframes arthro-fade-in {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

.arthro-thumb-label {
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
    width: 70px;
    height: 70px;
}

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

/* Active thumbnail styling */
#pic-1:checked ~ .arthro-thumbs-row .lbl-1,
#pic-2:checked ~ .arthro-thumbs-row .lbl-2,
#pic-3:checked ~ .arthro-thumbs-row .lbl-3,
#pic-4:checked ~ .arthro-thumbs-row .lbl-4 {
    border-color: var(--arthro-tone);
    box-shadow: 0 0 0 1px var(--arthro-tone);
}

/* CTA Hover Effect */
.arthro-purchase-trigger:hover {
    background-color: var(--arthro-tone-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}