/* ==========================================
   DESIGN TOKENS
========================================== */

:root {

    /* Surface */

    --ek-bg: #ffffff;
    --ek-surface: #ffffff;

    /* Typography */

    --ek-text: #1d2327;
    --ek-text-muted: #646970;

    /* Borders */

    --ek-border: #dcdcde;

    /* WordPress Accent */

    --ek-accent: var(--wp-admin-theme-color, #2271b1);
    --ek-accent-hover: var(--wp-admin-theme-color-darker-10, #135e96);
    --ek-accent-text: var(--wp-admin-theme-color-text, #ffffff);
    --ek-accent-rgb: 34, 113, 177;

    /* Status */

    --ek-error: #f45100;
    --ek-success: #00a32a;

    /* Layout */

    --ek-gap: 20px;
    --ek-gap-md: 16px;
    --ek-gap-sm: 12px;
    --ek-gap-xs: 6px;

    /* Shape */

    --ek-radius: 3px;

    /* Typography */

    --ek-font-sm: 12px;
    --ek-font-md: 14px;
    --ek-font-lg: 16px;
    --ek-font-xl: 18px;
    --ek-font-xxl: 20px;
    --ek-font-hd: 24px;

    /* Controls */

    --ek-control-height: 54px;
    --ek-button-height: 44px;

    /* Disabled state */

    --ek-disabled-bg: #f6f7f7;
    --ek-disabled-text: #aaa;
    --ek-disabled-border: #dcdcde;

}

/* Notifications */

.ek-alert {
    color: var(--ek-error);
}

/* Price */

.ekc-price-display {
    margin-bottom: var(--ek-gap-md);
}

.ek-form .ek-price {
    font-size: var(--ek-font-hd);
}

.ek-choice-limit {
    text-align: center;
}

.ek-choice-limit-icon {
    margin-bottom: .35rem;
}

.ek-choice-limit-icon.is-highlighted {
    cursor: help;
}

.ek-fabric-filters {
    align-items: end;
}

.ek-form {
    padding: var(--ek-gap);
    font-size: var(--ek-font-md);
}

.ek-form input,
.ek-form select {
    min-height: var(--ek-control-height);
}

.ek-btn {
    min-height: var(--ek-button-height);
}

/* Image choices CLOSE button */

.ek-overlay-close {
    background-color: var(--base-2);
}

.ek-overlay-close:hover {
    color: var(--base-2);
}