:root {
  --tjack-bg: #f3f4f6; /* Light gray background for SOFT theme */
  --tjack-panel: #ffffff;
  --tjack-ink: #1f2937;
  --tjack-text-muted: #4b5563;
  --tjack-accent: #60a5fa; /* Pastel blue accent */
  --tjack-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Deep shadows */
  --tjack-radius: 16px; /* Soft radius */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Base resets & typography applied via inline styles and Tailwind classes mostly */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hiding default frames in gallery */
.tjack-main-frame {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1;
}

/* Logic for showing the correct main image based on radio selection */
#tj_pic_1:checked ~ .tjack-pic-wrapper .frame-1,
#tj_pic_2:checked ~ .tjack-pic-wrapper .frame-2,
#tj_pic_3:checked ~ .tjack-pic-wrapper .frame-3,
#tj_pic_4:checked ~ .tjack-pic-wrapper .frame-4 {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Logic for thumbnail opacity based on preset C (opacity 0.5 on inactive) */
.tjack-thumb-trigger {
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.tjack-thumb-trigger:hover {
    opacity: 0.8;
}

#tj_pic_1:checked ~ .tjack-thumb-strip label[for="tj_pic_1"],
#tj_pic_2:checked ~ .tjack-thumb-strip label[for="tj_pic_2"],
#tj_pic_3:checked ~ .tjack-thumb-strip label[for="tj_pic_3"],
#tj_pic_4:checked ~ .tjack-thumb-strip label[for="tj_pic_4"] {
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Additional specific styling for components */
.tjack-btn-purchase {
    text-decoration: none;
}

.tjack-btn-purchase:hover {
    filter: brightness(0.97);
}