/*
 * Neutral semantic layer for the universal product.
 * Legacy selector names remain as compatibility aliases, but their visible
 * colours now resolve through the saved branding variables in one place.
 */
.ecommerce-body {
    --ecommerce-primary: var(--shop-button-bg, #0f6cbd);
    --ecommerce-primary-text: var(--theme-safe-button-text, var(--shop-button-text, #ffffff));
    --ecommerce-secondary: var(--plant-gold, var(--theme-secondary, #d6e4f2));
    --ecommerce-secondary-text: var(--theme-safe-secondary-text, #172033);
    --ecommerce-card: rgb(var(--theme-card-rgb, 255, 255, 255));
    --ecommerce-card-text: var(--theme-safe-card-text, #172033);
    --ecommerce-muted: var(--theme-safe-muted-text, #526071);
    --ecommerce-border: rgb(var(--theme-border-rgb, 199, 210, 223));
    --ecommerce-danger: #b42318;
    --ecommerce-warning: #8a520d;
    --ecommerce-success: #1f6b46;
}

.ecommerce-body :is(.btn-gold, .btn-primary-shop) {
    border-color: var(--ecommerce-primary) !important;
    background: var(--ecommerce-primary) !important;
    color: var(--ecommerce-primary-text) !important;
    -webkit-text-fill-color: var(--ecommerce-primary-text) !important;
}

.ecommerce-body :is(.btn-outline-gold, .btn-outline-shop) {
    border-color: var(--ecommerce-primary) !important;
    background: transparent !important;
    color: var(--ecommerce-primary) !important;
    -webkit-text-fill-color: var(--ecommerce-primary) !important;
}

.ecommerce-body :is(.btn-outline-gold, .btn-outline-shop):is(:hover, :focus-visible, .active) {
    background: var(--ecommerce-primary) !important;
    color: var(--ecommerce-primary-text) !important;
    -webkit-text-fill-color: var(--ecommerce-primary-text) !important;
}

.ecommerce-body :is(.btn-ghost-dark, .btn-secondary-shop) {
    border-color: var(--ecommerce-border) !important;
    background: var(--ecommerce-secondary) !important;
    color: var(--ecommerce-secondary-text) !important;
    -webkit-text-fill-color: var(--ecommerce-secondary-text) !important;
}

.ecommerce-body .btn:disabled,
.ecommerce-body .btn.disabled,
.ecommerce-body button:disabled {
    cursor: not-allowed;
    filter: saturate(0.72);
    opacity: 0.64;
}

.ecommerce-body :is(input, select, textarea, .form-control, .form-select) {
    accent-color: var(--ecommerce-primary);
}

.ecommerce-body :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ecommerce-primary) 72%, white);
    outline-offset: 2px;
}