:root {
    --klh3-font-title: var(--klh3-font-size-title, 24px);
    --klh3-font-subtitle: var(--klh3-font-size-subtitle, 18px);
    --klh3-font-base: var(--klh3-font-size-base, 15px);

    --klh3-font-family: var(--klh3-brand-font-family, var(--klh3-font-family-default, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));

    --klh3-color-gold: var(--klh3-brand-gold, currentColor);
    --klh3-color-orange: var(--klh3-brand-orange, var(--klh3-color-gold));
    --klh3-color-text: var(--klh3-brand-text, currentColor);
    --klh3-color-bg-soft: var(--klh3-brand-bg-soft, transparent);

    --klh3-surface: var(--klh3-brand-surface, var(--klh3-color-bg-soft));
    --klh3-surface-strong: var(--klh3-brand-surface-strong, var(--klh3-surface));
    --klh3-page-bg: var(--klh3-brand-page-bg, var(--klh3-color-bg-soft));
    --klh3-border-color: var(--klh3-brand-border, var(--klh3-color-gold));
    --klh3-border-muted: var(--klh3-brand-border-muted, var(--klh3-border-color));
    --klh3-heading-color: var(--klh3-brand-heading-color, var(--klh3-color-gold));
    --klh3-text-color: var(--klh3-brand-text-color, var(--klh3-color-text));
    --klh3-muted-text: var(--klh3-brand-muted-text, var(--klh3-text-color));

    --klh3-radius-md: var(--klh3-brand-radius-md, 12px);
    --klh3-radius-lg: var(--klh3-brand-radius-lg, 16px);
}

.klh3-app-shell {
    font-family: var(--klh3-font-family);
    background: var(--klh3-app-background, var(--klh3-page-bg));
    min-height: 100vh;
}

.klh3-app-shell #page,
.klh3-app-shell .site,
.klh3-app-shell .entry-content {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
}

.klh3-app {
    min-height: 100vh;
}

.klh3-app--frame {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
}

.klh3-card--content {
    padding: 24px;
}

.klh3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--klh3-radius-md);
    font-weight: 700;
    font-size: var(--klh3-font-base);
    line-height: 1.3;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.klh3-btn-primary,
.klh3-add,
.single_add_to_cart_button.klh3-submit {
    background: var(--klh3-btn-primary-bg, var(--klh3-action-primary, var(--klh3-color-orange)));
    border-color: var(--klh3-btn-primary-border, var(--klh3-action-primary, var(--klh3-color-orange)));
    color: var(--klh3-btn-primary-text, var(--klh3-action-on-primary, var(--klh3-surface)));
}

.klh3-btn-primary:hover,
.klh3-add:hover,
.single_add_to_cart_button.klh3-submit:hover {
    background: var(--klh3-btn-primary-bg-hover, var(--klh3-action-primary-hover, var(--klh3-surface)));
    color: var(--klh3-btn-primary-text-hover, var(--klh3-action-primary, var(--klh3-color-orange)));
    border-color: var(--klh3-btn-primary-border-hover, var(--klh3-action-primary, var(--klh3-color-orange)));
}

.klh3-btn-secondary,
.klh3-remove {
    background: var(--klh3-btn-secondary-bg, var(--klh3-action-secondary, var(--klh3-surface)));
    border: 1px solid var(--klh3-btn-secondary-border, var(--klh3-action-secondary-border, var(--klh3-border-color)));
    color: var(--klh3-btn-secondary-text, var(--klh3-action-secondary-foreground, var(--klh3-heading-color)));
}

.klh3-btn-secondary:hover,
.klh3-remove:hover {
    background: var(--klh3-btn-secondary-bg-hover, var(--klh3-action-secondary-hover, var(--klh3-heading-color)));
    color: var(--klh3-btn-secondary-text-hover, var(--klh3-action-secondary-on-hover, var(--klh3-surface)));
    border-color: var(--klh3-btn-secondary-border-hover, var(--klh3-action-secondary-hover, var(--klh3-heading-color)));
}

.klh3-btn-warning {
    background: var(--klh3-btn-warning-bg, var(--klh3-action-warning, var(--klh3-surface)));
    border: 1px solid var(--klh3-btn-warning-border, var(--klh3-action-warning, var(--klh3-color-orange)));
    color: var(--klh3-btn-warning-text, var(--klh3-action-warning-foreground, var(--klh3-color-orange)));
}

.klh3-btn-warning:hover {
    background: var(--klh3-btn-warning-bg-hover, var(--klh3-action-warning-hover, var(--klh3-color-orange)));
    color: var(--klh3-btn-warning-text-hover, var(--klh3-action-warning-on-hover, var(--klh3-surface)));
    border-color: var(--klh3-btn-warning-border-hover, var(--klh3-action-warning-hover, var(--klh3-color-orange)));
}

.klh3-is-hidden {
    display: none;
}