/* Theme Light, Preset A */

:root {
    /* Safe names for CSS variables */
    --optase-canvas: #F8FAFC;
    --optase-paper: #FFFFFF;
    --optase-highlight: #0284C7; /* Rich Blue */
    --optase-highlight-hover: #0369A1;
    --optase-text-main: #1F2937;
    
    /* Fonts chosen: Playfair Display (heading), Lato (text) */
    --font-optase-heading: 'Playfair Display', serif;
    --font-optase-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-optase-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography styles */
.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Preset A specific overrides */
.hylo-head-banner {
    border-bottom: 4px solid var(--optase-highlight);
}

.optase-purchase-trigger {
    border-radius: 999px; /* Pill radius */
}

.optase-purchase-trigger:hover {
    background-color: var(--optase-highlight-hover) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hylo-feedback-entity {
    border-radius: 12px;
    border-left: 4px solid var(--optase-highlight);
}

.optase-user-avatar {
    border-radius: 999px; /* Pill for avatars */
}

/* Gallery Engine (No JS) */
.optase-radio-btn {
    display: none;
}

.hylo-main-pic-stage img {
    display: none;
    aspect-ratio: 1 / 1;
}

/* Display corresponding main image based on checked radio */
#pic-1:checked ~ .hylo-main-pic-stage .img-1 { display: block; }
#pic-2:checked ~ .hylo-main-pic-stage .img-2 { display: block; }
#pic-3:checked ~ .hylo-main-pic-stage .img-3 { display: block; }
#pic-4:checked ~ .hylo-main-pic-stage .img-4 { display: block; }

/* Thumbnail styling */
.hylo-thumb-item {
    border: 3px solid transparent;
    border-radius: 999px; /* Pill preset applied to thumbs */
    transition: all 0.2s ease-in-out;
}

/* Highlight active thumbnail */
#pic-1:checked ~ .hylo-thumb-strip .lbl-1,
#pic-2:checked ~ .hylo-thumb-strip .lbl-2,
#pic-3:checked ~ .hylo-thumb-strip .lbl-3,
#pic-4:checked ~ .hylo-thumb-strip .lbl-4 {
    border-color: var(--optase-highlight);
    transform: scale(1.05);
}