/* =============================================================================
 * Brand Kit base stylesheet (Layer 2a) — token-consuming element/component rules.
 *
 * This is the clean replacement for the old hardcoded !important selector list that
 * used to live in ApplicationTagLib.themeOverrideCss. Instead of duplicating selectors
 * per colour, every rule here references a --bk-* design token (see the Brand Kit token
 * contract / ApplicationTagLib.themeOverrideCss).
 *
 * Loading: emitted via <app:brandKitBaseCss/> in layouts/sitepage.gsp, immediately after
 * <app:themeOverrideCss/>, and ONLY when a "brand_kit" SiteConfig exists. Because it loads
 * after the template CSS and the wc-brand-kit :root token block, its normal-specificity
 * rules win the cascade — no !important needed. Legacy / un-adopted sites never load this
 * file, so they are completely unaffected.
 *
 * Every var() carries a sensible fallback so an omitted token degrades gracefully rather
 * than rendering an empty property.
 *
 * This is the starting map. Extend it as gaps surface on individual templates — inspect the
 * storefront in DevTools with a Brand Kit applied and add any selector still showing an
 * un-themed value, mapping it to the appropriate token (never a literal colour).
 * ========================================================================== */

/* =============================================================================
 * BRAND KIT TOKEN REFERENCE — every --bk-* custom property consumed by this file.
 * These are DEFINED in the wc-brand-kit :root block (emitted by ApplicationTagLib
 * .themeOverrideCss from the saved brand_kit JSON). Listed here for documentation
 * only; each usage below carries its own fallback so an omitted token degrades
 * gracefully. Keep this list in sync when adding/removing tokens.
 *
 * --- Palette colours (the 6 roles) ---
 *   --bk-color-primary        Primary brand colour (headings accents, price, buttons)
 *   --bk-color-secondary      Secondary colour (link hover, secondary buttons)
 *   --bk-color-accent         Accent colour (links, badges, tags)
 *   --bk-color-background     Page background (body canvas)
 *   --bk-color-surface        Surface / card / input background
 *   --bk-color-ink            Ink — default body text colour
 *
 * --- Global font families ---
 *   --bk-font-base            Base/body font family
 *   --bk-font-heading         Heading font family
 *
 * --- Per-text-style typography (SET = h1 h2 h3 h4 h5 h6 p blockquote overline) ---
 *   For each style below, the token prefix is --bk-<style>-* with these suffixes:
 *   --bk-<style>-family           Font family (headings fall back to --bk-font-heading,
 *                                 body styles to --bk-font-base)
 *   --bk-<style>-size             Font size
 *   --bk-<style>-weight           Font weight
 *   --bk-<style>-line-height      Line height
 *   --bk-<style>-letter-spacing   Letter spacing
 *   --bk-<style>-transform        Text transform (none/uppercase/…)
 *   --bk-<style>-style            Font style (normal/italic)
 *   --bk-<style>-color            Text colour (falls back to --bk-color-ink)
 *   e.g. --bk-h1-size, --bk-p-color, --bk-blockquote-weight, --bk-overline-transform
 *
 * --- Links ---
 *   --bk-link-color               Link colour (falls back to --bk-color-accent)
 *   --bk-link-hover               Link hover colour (falls back to --bk-color-secondary)
 *   --bk-link-decoration          Link text-decoration
 *   --bk-link-font-family         Link font family
 *   --bk-link-font-size           Link font size
 *   --bk-link-font-weight         Link font weight
 *   --bk-link-font-transform      Link text transform
 *   --bk-link-font-letter-spacing Link letter spacing
 *
 * --- Buttons (VARIANTS = primary | secondary | tertiary) ---
 *   Primary uses the bare --bk-btn-* prefix; secondary/tertiary use
 *   --bk-btn-secondary-* / --bk-btn-tertiary-*. Suffixes (per variant):
 *   fill               Background colour (primary falls back to --bk-color-primary)
 *   text               Text colour
 *   border-width       Border width
 *   border-color       Border colour
 *   radius             Corner radius (secondary/tertiary fall back to --bk-btn-radius)
 *   shadow             Box shadow
 *   pad                Padding (secondary/tertiary fall back to --bk-btn-pad)
 *   font-family / font-size / font-weight / font-transform / font-letter-spacing
 *   Hover state (each falls back to the base value → no change when unset):
 *   hover-bg           Hover background (darken/lighten shade the fill into this via color-mix)
 *   hover-color        Hover text colour
 *   hover-border-color Hover border colour
 *   hover-transform    Hover transform (lift effect)
 *   hover-shadow       Hover box shadow
 * ========================================================================== */

/* ---- Canvas: Background / Surface / Ink ------------------------------------ */
/* html needs the canvas colour too: on the live site the body box can end above the footer, letting the template's html bg show through. */
html {
    background-color: var(--bk-color-background, #ffffff);
}

/* Scope note: the site page body is #webcommander-page (layouts/sitepage.gsp). The FEE
   sub-editor iframes (subEditorPage.gsp — mega-menu / popup / carousel item, and any
   future sub-editor rendered through it) carry the marker class .fee-sub-editor-canvas
   on <body> instead, so every scoped rule below lists both. Class-level specificity is
   safe there: template CSS can only out-rank via #webcommander-page-scoped rules, which
   cannot match a sub-editor document. With only #webcommander-page these canvases
   silently fell back to template defaults. */
body#webcommander-page,
body.fee-sub-editor-canvas {
    background-color: var(--bk-color-background, #ffffff);
    color: var(--bk-color-ink, #111111);
    font-family: var(--bk-font-base, inherit);
}

.card,
.panel,
.modal-content,
.surface
/*input:not([type="checkbox"]):not([type="radio"]),*/
/*select,*/
/*textarea,*/
/*.form-control*/
{
    background-color: var(--bk-color-surface, #f7f7f9);
    color: var(--bk-color-ink, inherit);
}

/* ---- Typography ----------------------------------------------------------- */
#webcommander-page h1,
.fee-sub-editor-canvas h1 {
    font-family: var(--bk-h1-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h1-size, inherit);
    font-weight: var(--bk-h1-weight, inherit);
    line-height: var(--bk-h1-line-height, inherit);
    letter-spacing: var(--bk-h1-letter-spacing, normal);
    text-transform: var(--bk-h1-transform, none);
    font-style: var(--bk-h1-style, normal);
    color: var(--bk-h1-color, var(--bk-color-ink, inherit));
}
#webcommander-page h2,
.fee-sub-editor-canvas h2 {
    font-family: var(--bk-h2-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h2-size, inherit);
    font-weight: var(--bk-h2-weight, inherit);
    line-height: var(--bk-h2-line-height, inherit);
    letter-spacing: var(--bk-h2-letter-spacing, normal);
    text-transform: var(--bk-h2-transform, none);
    font-style: var(--bk-h2-style, normal);
    color: var(--bk-h2-color, var(--bk-color-ink, inherit));
}
#webcommander-page h3,
.fee-sub-editor-canvas h3 {
    font-family: var(--bk-h3-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h3-size, inherit);
    font-weight: var(--bk-h3-weight, inherit);
    line-height: var(--bk-h3-line-height, inherit);
    letter-spacing: var(--bk-h3-letter-spacing, normal);
    text-transform: var(--bk-h3-transform, none);
    font-style: var(--bk-h3-style, normal);
    color: var(--bk-h3-color, var(--bk-color-ink, inherit));
}
#webcommander-page h4,
.fee-sub-editor-canvas h4 {
    font-family: var(--bk-h4-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h4-size, inherit);
    font-weight: var(--bk-h4-weight, inherit);
    line-height: var(--bk-h4-line-height, inherit);
    letter-spacing: var(--bk-h4-letter-spacing, normal);
    text-transform: var(--bk-h4-transform, none);
    font-style: var(--bk-h4-style, normal);
    color: var(--bk-h4-color, var(--bk-color-ink, inherit));
}
#webcommander-page h5,
.fee-sub-editor-canvas h5 {
    font-family: var(--bk-h5-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h5-size, inherit);
    font-weight: var(--bk-h5-weight, inherit);
    line-height: var(--bk-h5-line-height, inherit);
    letter-spacing: var(--bk-h5-letter-spacing, normal);
    text-transform: var(--bk-h5-transform, none);
    font-style: var(--bk-h5-style, normal);
    color: var(--bk-h5-color, var(--bk-color-ink, inherit));
}
#webcommander-page h6,
.fee-sub-editor-canvas h6 {
    font-family: var(--bk-h6-family, var(--bk-font-heading, inherit));
    font-size: var(--bk-h6-size, inherit);
    font-weight: var(--bk-h6-weight, inherit);
    line-height: var(--bk-h6-line-height, inherit);
    letter-spacing: var(--bk-h6-letter-spacing, normal);
    text-transform: var(--bk-h6-transform, none);
    font-style: var(--bk-h6-style, normal);
    color: var(--bk-h6-color, var(--bk-color-ink, inherit));
}
#webcommander-page p,
.fee-sub-editor-canvas p {
    font-family: var(--bk-p-family, var(--bk-font-base, inherit));
    font-size: var(--bk-p-size, inherit);
    font-weight: var(--bk-p-weight, inherit);
    line-height: var(--bk-p-line-height, inherit);
    letter-spacing: var(--bk-p-letter-spacing, normal);
    text-transform: var(--bk-p-transform, none);
    font-style: var(--bk-p-style, normal);
    color: var(--bk-p-color, var(--bk-color-ink, inherit));
}
#webcommander-page blockquote,
.fee-sub-editor-canvas blockquote {
    font-family: var(--bk-blockquote-family, var(--bk-font-base, inherit));
    font-size: var(--bk-blockquote-size, inherit);
    font-weight: var(--bk-blockquote-weight, inherit);
    line-height: var(--bk-blockquote-line-height, inherit);
    letter-spacing: var(--bk-blockquote-letter-spacing, normal);
    text-transform: var(--bk-blockquote-transform, none);
    font-style: var(--bk-blockquote-style, normal);
    color: var(--bk-blockquote-color, var(--bk-color-ink, inherit));
}
.overline,
[data-text-style="overline"] {
    font-family: var(--bk-overline-family, var(--bk-font-base, inherit));
    font-size: var(--bk-overline-size, inherit);
    font-weight: var(--bk-overline-weight, inherit);
    line-height: var(--bk-overline-line-height, inherit);
    letter-spacing: var(--bk-overline-letter-spacing, 0.08em);
    text-transform: var(--bk-overline-transform, uppercase);
    font-style: var(--bk-overline-style, normal);
    color: var(--bk-overline-color, var(--bk-color-ink, inherit));
}

/* ---- Links we are not getting support on a as link btn ---------------------------------------------------------------- */
/*a:not(.profileLogout a, .wc-donate-button),*/
/*a:link:not(.profileLogout a, .wc-donate-button),*/
/*!*a:visited,*!*/
/*.article-content a,*/
/*a.readmore,*/
/*a.home-read{*/
/*    color: var(--bk-link-color, var(--bk-color-accent, inherit));*/
/*    text-decoration: var(--bk-link-decoration, none);*/
/*    font-family: var(--bk-link-font-family, inherit);*/
/*    font-size: var(--bk-link-font-size, inherit);*/
/*    font-weight: var(--bk-link-font-weight, inherit);*/
/*    text-transform: var(--bk-link-font-transform, none);*/
/*    letter-spacing: var(--bk-link-font-letter-spacing, normal);*/
/*}*/
/*a:hover:not(.profileLogout a:hover, .wc-donate-button:hover),*/
/*p a:hover,*/
/*.content p a:hover,*/
/*.article-content a:hover{*/
/*    color: var(--bk-link-hover, var(--bk-color-secondary, inherit));*/
/*}*/

/* ---- Primary brand colour (from the legacy override intent) ---------------- */
.home-text h2,
.home-text h2 strong,
.product-view.list-view .current-price.price,
.fee-widget-product-image-view .product-view.image-view .current-price.price {
    color: var(--bk-color-primary, inherit);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-primary:not(button[disabled]),
.button-primary:not(button[disabled]),
button:not(button[disabled]).primary,
.add-to-cart:not(button[disabled]),
.fee-btn-primary,
.button-widget-element,
a.button-widget-element,
/*a:not(button[disabled]).button,*/

.checkout-page.version-2 .checkout-button-wrapper-bottom .advance-checkout-next-step-parser-button,
.product-widget.widget-addCart .cart-button-container span.button,
.page-registration .registration-form .submit-row button,
button.wc-load-more-pagination,
button.write-review,
.review-form-container button:not(button[disabled]),
.continue-btn,
.form-reset {
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
    border-style: solid;
    border-width: var(--bk-btn-border-width, 0);
    border-color: var(--bk-btn-border-color, transparent);
    border-radius: var(--bk-btn-radius, 0);
    box-shadow: var(--bk-btn-shadow, none);
    padding: var(--bk-btn-pad, 12px 24px);
    font-family: var(--bk-btn-font-family, inherit);
    font-size: var(--bk-btn-font-size, inherit);
    font-weight: var(--bk-btn-font-weight, inherit);
    text-transform: var(--bk-btn-font-transform, none);
    letter-spacing: var(--bk-btn-font-letter-spacing, normal);
    /* Smooth the Lift/Outline hover effects; transform + box-shadow are never animated otherwise, so existing
       buttons are unaffected. */
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:not(button[disabled]):hover,
.button-primary:not(button[disabled]):hover,
button:not(button[disabled]).primary:hover,
.add-to-cart:not(button[disabled]):hover,
.fee-btn-primary:hover,
.button-widget-element:hover,
a.button-widget-element:hover,
/*a:not(button[disabled]).button:hover,*/
button.wc-load-more-pagination:hover,
button.write-review:hover,
.review-form-container button:hover:not(button[disabled]:hover),
.continue-btn:hover,
.form-reset:hover {
    /* Brand Kit "Hover effect" tokens. Each falls back to the button's own base value, so with NO hover token
       emitted the button is unchanged on hover (back-compat). Effects: darken/lighten → shade hover-bg (mix
       black/white into the fill); swap/outline → bg+color(+ring); lift → transform+shadow. */
    background-color: var(--bk-btn-hover-bg, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #ffffff));
    border-color: var(--bk-btn-hover-border-color, var(--bk-btn-border-color, transparent));
    transform: var(--bk-btn-hover-transform, none);
    box-shadow: var(--bk-btn-hover-shadow, var(--bk-btn-shadow, none));
}

/* Secondary buttons — full Brand Kit variant token set, each falling back to the palette secondary colour
   (and then the legacy behaviour) so sites without a Secondary variant configured are unaffected. */
.btn-secondary,
.button-secondary {
    background-color: var(--bk-btn-secondary-fill, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-secondary-text, var(--bk-btn-text, #ffffff));
    border-style: solid;
    border-width: var(--bk-btn-secondary-border-width, 0);
    border-color: var(--bk-btn-secondary-border-color, var(--bk-color-secondary, inherit));
    border-radius: var(--bk-btn-secondary-radius, var(--bk-btn-radius, 0));
    box-shadow: var(--bk-btn-secondary-shadow, none);
    padding: var(--bk-btn-secondary-pad, var(--bk-btn-pad, 12px 24px));
    font-family: var(--bk-btn-secondary-font-family, inherit);
    font-size: var(--bk-btn-secondary-font-size, inherit);
    font-weight: var(--bk-btn-secondary-font-weight, inherit);
    text-transform: var(--bk-btn-secondary-font-transform, none);
    letter-spacing: var(--bk-btn-secondary-font-letter-spacing, normal);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-secondary:hover,
.button-secondary:hover {
    background-color: var(--bk-btn-secondary-hover-bg, var(--bk-btn-secondary-fill, var(--bk-color-secondary, inherit)));
    color: var(--bk-btn-secondary-hover-color, var(--bk-btn-secondary-text, var(--bk-btn-text, #ffffff)));
    border-color: var(--bk-btn-secondary-hover-border-color, var(--bk-btn-secondary-border-color, var(--bk-color-secondary, inherit)));
    transform: var(--bk-btn-secondary-hover-transform, none);
    box-shadow: var(--bk-btn-secondary-hover-shadow, var(--bk-btn-secondary-shadow, none));
}

/* Tertiary buttons — new Brand Kit variant hooks. These selectors may not exist on every template yet;
   the rules are harmless where they don't match and take effect wherever a tertiary button is used. */
.btn-tertiary,
.button-tertiary,
a.button-tertiary {
    background-color: var(--bk-btn-tertiary-fill, transparent);
    color: var(--bk-btn-tertiary-text, var(--bk-color-ink, inherit));
    border-style: solid;
    border-width: var(--bk-btn-tertiary-border-width, 1px);
    border-color: var(--bk-btn-tertiary-border-color, var(--bk-color-ink, currentColor));
    border-radius: var(--bk-btn-tertiary-radius, var(--bk-btn-radius, 0));
    box-shadow: var(--bk-btn-tertiary-shadow, none);
    padding: var(--bk-btn-tertiary-pad, var(--bk-btn-pad, 12px 24px));
    font-family: var(--bk-btn-tertiary-font-family, inherit);
    font-size: var(--bk-btn-tertiary-font-size, inherit);
    font-weight: var(--bk-btn-tertiary-font-weight, inherit);
    text-transform: var(--bk-btn-tertiary-font-transform, none);
    letter-spacing: var(--bk-btn-tertiary-font-letter-spacing, normal);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-tertiary:hover,
.button-tertiary:hover,
a.button-tertiary:hover {
    background-color: var(--bk-btn-tertiary-hover-bg, var(--bk-btn-tertiary-fill, transparent));
    color: var(--bk-btn-tertiary-hover-color, var(--bk-btn-tertiary-text, var(--bk-color-ink, inherit)));
    border-color: var(--bk-btn-tertiary-hover-border-color, var(--bk-btn-tertiary-border-color, var(--bk-color-ink, currentColor)));
    transform: var(--bk-btn-tertiary-hover-transform, none);
    box-shadow: var(--bk-btn-tertiary-hover-shadow, var(--bk-btn-tertiary-shadow, none));
}

/* ---- Accent --------------------------------------------------------------- */
.badge,
.tag-highlight,
.fee-accent,
.price-special {
    color: var(--bk-color-accent, inherit);
}


/*===================== Accordion & Tab Accordion Brand kit basic ==============*/
.accordion-panel > .label-bar,
.accordion-panel > .label-bar.expanded {
    color: var(--bk-color-primary, inherit);
}
/**/
.bmui-tab .bmui-tab-header.bmui-tab-active {
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}

/*===================== Track Order Brand kit basic ==============*/
/* The Track Order CTA now renders as a real Brand-Kit button: /widget/trackOrder.gsp stamps the
   shared .button-primary / .button-secondary / .button-tertiary class (from the widget's "Button"
   setting) onto .track-order-widget-button, so it inherits the full variant token set defined in
   the Buttons section above. A widget-specific colour rule here would sit later in source order at
   equal specificity and override the secondary/tertiary variants, so it is intentionally omitted. */

/*===================== Form Brand kit basic ==============*/
.form-row label {
    color: var(--bk-color-ink, #555555);
}

.login-form .account-register a,
.login-form .lost-password a {
    color: var(--bk-color-primary, inherit);
}
/*===================== Navigation Brand kit basic ==============*/
.navigation-item a {
    color: var(--bk-color-primary, inherit);
}
/*===================== Login Button Brand kit basic ==============*/
button:not(button[disabled]).submit-button,
.login-button{
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}
button:not(button[disabled]).submit-button:hover,
.login-button:hover{
    background-color: var(--bk-btn-hover-bg, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #ffffff));
}

/*===================== Product widget Brand kit basic ==============*/
.wc-category-tabs--segment .wc-category-tab-btn.active {
    background: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    border-color: #008DF2;
    color: var(--bk-btn-border-color, transparent);
}

.fee-widget-product-tabular-view .product-view.tabular-view .current-price,
.fee-widget-product-scroll-view .product-view.scrollable-view .current-price.price{
    color: var(--bk-color-primary, inherit);
}

.product-view.list-view .product-block .btn-add .add-to-cart-button.button,
.product-view.list-view .product-block .btn-add .add-to-wish-list,
.product-view.list-view .product-block .btn-add .add-to-compare-button.button,
.product-view.list-view .product-block .btn-add .remove-from-compare-button.button,
.product-view .product-block .btn-add .add-to-cart-button.button,
.product-view .product-block .btn-add .add-to-wish-list,
.product-view .product-block .btn-add .add-to-compare-button.button,
.product-view .product-block .btn-add .remove-from-compare-button.button{
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}

.product-view.list-view .product-block .btn-add .add-to-cart-button.button:hover,
.product-view.list-view .product-block .btn-add .add-to-wish-list:hover,
.product-view.list-view .product-block .btn-add .add-to-compare-button.button:hover,
.product-view.list-view .product-block .btn-add .remove-from-compare-button.button:hover,
.product-view .product-block .btn-add .add-to-cart-button.button:hover,
.product-view .product-block .btn-add .add-to-wish-list:hover,
.product-view .product-block .btn-add .add-to-compare-button.button:hover,
.product-view .product-block .btn-add .add-to-cart-button.button:hover{
    background-color: var(--bk-btn-hover-bg, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #ffffff));
}
.fee-widget-product-scroll-view .product-view.scrollable-view .scroller span {
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}

.fee-widget-product-scroll-view .product-view.scrollable-view .product-block:hover {
    border: 1px solid var(--bk-color-primary, inherit);
}
.pagination span.current{
    background: var(--bk-btn-fill, var(--bk-color-primary, inherit));
}
.fee-widget-product-tabular-view .product-view.tabular-view .product-name-link {
    color: var(--bk-link-color, var(--bk-color-accent, inherit));
}
/*===================== Category widget Brand kit basic ==============*/
.widget.fee-category-1 .category .category-name .category-name-link {
    color: var(--bk-link-color, var(--bk-color-accent, inherit));
}
/*===================== Donate widget Brand kit basic ==============*/
.donate-button-wrapper a.wc-donate-button{
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}
.donate-button-wrapper a.wc-donate-button:hover{
    background-color: var(--bk-btn-hover-bg, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #ffffff));
}
/*===================== Owl Carousel widget Brand kit basic ==============*/
.widget-owlCarousel .owl-theme .owl-controls .owl-nav [class*=owl-] {
    background-color: var(--bk-btn-fill, var(--bk-color-primary, inherit));
    color: var(--bk-btn-text, #ffffff);
}
.widget-owlCarousel .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
    background-color: var(--bk-btn-hover-bg, var(--bk-color-secondary, inherit));
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #ffffff));
}
/*===================== Blog widget Brand kit basic ==============*/
.fee-blog-design-1 .post-description .blog-read-more,
.fee-blog-design-2 .post-description .blog-read-more,
.fee-blog-design-3 .post-description .blog-read-more,
.fee-blog-design-4 .post-description .blog-read-more {
    color: var(--bk-color-primary, inherit);
}
/*===================== Blog widget Brand kit basic ==============*/
.floating-subscription-popup .header{
    background: var(--bk-color-primary, #004156);
    border-color: var(--bk-color-primary, #004156);
}
.newsletter-popup-header-icon{
    background: rgba(255, 255, 255, 0.15);
    background: oklch(from var(--bk-color-primary, #004156) clamp(0, (0.72 - l) * infinity, 1) 0 h / 0.15);
}
.newsletter-floating-subscription-popup .newsletter-subscription-popup-title-wrapper .title {
    color: #fff;
    color: oklch(from var(--bk-color-primary, #004156) clamp(0, (0.72 - l) * infinity, 1) 0 h) !important;
}
.newsletter-floating-subscription-popup .newsletter-subscription-popup-title-wrapper .sub-title {
    color: #fff;
    color: oklch(from var(--bk-color-primary, #004156) clamp(0, (0.72 - l) * infinity, 1) 0 h) !important;
}