.global-buttons {
    
}

:root {
    /* primitive */
    --button--radius: 8px;
    --button--spacing-6: 6px;
    --button--spacing-8: 8px;
    --button--spacing-12: 12px;
    --button--spacing-16: 16px;
    --button--font-size: 16px;
    --button--font-size-sm: 14px;
    --button--font-weight: 400;
    --button--font-family: "PingLCG";
    --button--bg-focus: #506FEE;

    /* Primary / Dark */
    --button--primary-dark-default: #0D0D0D;
    --button--primary-dark-hover: #4565ED;
    --button--primary-dark-active: #163FE8;
    --button--primary-dark-disabled: #94989B;
    --button--primary-dark-focus: #163FE8;
    --button--primary-dark-text: #FFFFFF;
    --button--primary-dark-disabled-text: #FAFAFA;

    /* Primary / Light Gray */
    --button--primary-gray-default: #E2E4E8;
    --button--primary-gray-text: #0D0D0D;
    --button--primary-gray-hover: #252525;
    --button--primary-gray-hover-text: #FFFFFF;
    --button--primary-gray-active: #0D0D0D;
    --button--primary-gray-active-text: #FFFFFF;
    --button--primary-gray-focus: #163FE8;

    /* Primary / White */
    --button--primary-white-default: #FFFFFF;
    --button--primary-white-text: #0D0D0D;
    --button--primary-white-hover: #4565ED;
    --button--primary-white-hover-text: #FFFFFF;
    --button--primary-white-active: #163FE8;
    --button--primary-white-active-text: #FFFFFF;
    --button--primary-white-focus: #163FE8;

    /* Secondary / Dark */
    --button--secondary-dark-border: #0D0D0D;
    --button--secondary-dark-text: #0D0D0D;
    --button--secondary-dark-hover: #D0D9FA;
    --button--secondary-dark-active: #B9C5F8;
    --button--secondary-dark-focus-border: #163FE8;
    /* Secondary / Light Gray */
    --button--secondary-gray-border: #F2F3F5;
    --button--secondary-gray-text: #F2F3F5;
    --button--secondary-gray-hover-bg: #FAFAFA;
    --button--secondary-gray-active-bg: #F2F3F5;
    --button--secondary-gray-text-on: #0D0D0D;
    --button--secondary-gray-focus-border: #163FE8;
    /* Secondary / White */
    --button--secondary-white-border: #FFFFFF;
    --button--secondary-white-text: #FFFFFF;
    --button--secondary-white-fill: #FFFFFF;
    --button--secondary-white-text-on: #0D0D0D;
    --button--secondary-white-focus-border: #163FE8;

    /* Tertiary / Dark */
    --button--tertiary-dark-text: #0D0D0D;
    --button--tertiary-dark-hover: #D0D9FA;
    --button--tertiary-dark-active: #B9C5F8;
    --button--tertiary-dark-focus-border: #163FE8;
    /* Tertiary / Light Gray */
    --button--tertiary-gray-text: #F2F3F5;
    --button--tertiary-gray-border: transparent;
    --button--tertiary-gray-hover-bg: #FAFAFA;
    --button--tertiary-gray-active-bg: #E2E4E8;
    --button--tertiary-gray-text-on: #0D0D0D;
    --button--tertiary-gray-focus-border: #163FE8;
    /* Tertiary / White */
    --button--tertiary-white-text: #FFFFFF;
    --button--tertiary-white-fill: #FFFFFF;
    --button--tertiary-white-text-on: #0D0D0D;
    --button--tertiary-white-focus-border: #163FE8;
}

/* ---------- baza ---------- */
.global-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: var(--button--spacing-12, 12px) var(--button--spacing-16, 16px);
    border: 1px solid transparent;
    border-radius: var(--button--radius, 8px);
    font-family: var(--button--font-family, "PingLCG"), sans-serif;
    font-size: var(--button--font-size, 16px);
    font-style: normal;
    font-weight: var(--button--font-weight, 400);
    line-height: 22px;              /* -> ~48px inaltime totala */
    --btn-icon-size: 24px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.global-button:focus-visible {
    box-shadow: 0 0 0 2px var(--button--bg-focus, #506FEE);
}

.global-button:disabled,
.global-button.is-disabled,
.global-button[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1; /* neutralizeaza vechiul .global-button:disabled{opacity:.5} din main.css */
}

/* ---------- marimi (default = baza; icon 24, small 16) ---------- */
.global-button-medium {
    padding: var(--button--spacing-8, 8px) var(--button--spacing-16, 16px);
    min-width: auto;
}
.global-button-small {
    padding: var(--button--spacing-6, 6px) var(--button--spacing-8, 8px);
    font-size: var(--button--font-size-sm, 14px);
    line-height: 20px;
    min-width: auto;
    --btn-icon-size: 16px;
}

/* ---------- container + latime ---------- */
.global-buttons-row { display:flex; flex-wrap:wrap; gap:16px; }
/* full-width: se intinde pe tot containerul */
.global-button.is-full,
.global-buttons-row.is-full .global-button { display:flex; width:100%; }
/* min: se strange pe continut (sub min-width 200) */
.global-button.is-min { min-width:auto; }

/* ---------- mecanica icon (mask + currentColor) ----------
   --btn-icon-size (px), --btn-icon-color (default currentColor),
   --btn-icon-before / --btn-icon-after (path SVG, din button-icons.css) */
.global-button-icon-before::before,
.global-button-icon-after::after {
    content: "";
    display: inline-block;
    width: var(--btn-icon-size, 1em);
    height: var(--btn-icon-size, 1em);
    background-color: var(--btn-icon-color, currentColor);
    flex-shrink: 0;
}
.global-button-icon-before::before {
    -webkit-mask: var(--btn-icon-before) no-repeat center / contain;
            mask: var(--btn-icon-before) no-repeat center / contain;
}
.global-button-icon-after::after {
    -webkit-mask: var(--btn-icon-after) no-repeat center / contain;
            mask: var(--btn-icon-after) no-repeat center / contain;
}

/* ---------- ultra-wide / 4K (ca in main.css vechi: scalare ~x2) ---------- */
@media only screen and (min-width: 3001px) {
    /* .global-button {
        min-width: 400px;
        padding: 24px 32px;
        border-width: 2px;
        border-radius: 16px;
        font-size: 32px;
        line-height: 44px;
        gap: 16px;
        --btn-icon-size: 48px;
    }
    .global-button-medium { padding: 16px 32px; }
    .global-button-small  { padding: 12px 16px; font-size: 28px; line-height: 40px; --btn-icon-size: 32px; } */
}


/* ==========================================================================
   BUTTON VARIANTS — Primary (fill) / Secondary (outline) / Tertiary (ghost)
   Fiecare: black / gray / white  x  default / hover / active / disabled / focus.
   Starile de showcase se simuleaza cu .is-hover / .active / .is-disabled / .is-focus.
   ========================================================================== */

/* ============================ PRIMARY = fill ============================ */
.global-button-black {
    background: var(--button--primary-dark-default, #0D0D0D);
    border-color: var(--button--primary-dark-default, #0D0D0D);
    color: var(--button--primary-dark-text, #FFFFFF);
}
.global-button-black:hover,
.global-button-black.is-hover {
    background: var(--button--primary-dark-hover, #4565ED);
    border-color: var(--button--primary-dark-hover, #4565ED);
}
.global-button-black:active,
.global-button-black.active {
    background: var(--button--primary-dark-active, #163FE8);
    border-color: var(--button--primary-dark-active, #163FE8);
}
.global-button-black:disabled,
.global-button-black.is-disabled,
.global-button-black[aria-disabled="true"] {
    background: var(--button--primary-dark-disabled, #94989B);
    border-color: var(--button--primary-dark-disabled, #94989B);
    color: var(--button--primary-dark-disabled-text, #FAFAFA);
}
.global-button-black:focus-visible,
.global-button-black.is-focus {
    background: var(--button--primary-dark-default, #0D0D0D);
    border-color: var(--button--primary-dark-focus, #163FE8);
    color: var(--button--primary-dark-text, #FFFFFF);
    /* box-shadow: 0 0 0 2px var(--button--bg-focus, #506FEE); */
    outline: none;
}

.global-button-gray {
    background: var(--button--primary-gray-default, #E2E4E8);
    border-color: var(--button--primary-gray-default, #E2E4E8);
    color: var(--button--primary-gray-text, #0D0D0D);
}
.global-button-gray:hover,
.global-button-gray.is-hover {
    background: var(--button--primary-gray-hover, #252525);
    border-color: var(--button--primary-gray-hover, #252525);
    color: var(--button--primary-gray-hover-text, #FFFFFF);
}
.global-button-gray:active,
.global-button-gray.active {
    background: var(--button--primary-gray-active, #0D0D0D);
    border-color: var(--button--primary-gray-active, #0D0D0D);
    color: var(--button--primary-gray-active-text, #FFFFFF);
}
.global-button-gray:disabled,
.global-button-gray.is-disabled,
.global-button-gray[aria-disabled="true"] {
    background: var(--button--primary-gray-default, #E2E4E8);
    border-color: var(--button--primary-gray-default, #E2E4E8);
    color: var(--button--primary-gray-text, #0D0D0D);
    opacity: 0.5;
}
.global-button-gray:focus-visible,
.global-button-gray.is-focus {
    background: var(--button--primary-gray-default, #E2E4E8);
    border-color: var(--button--primary-gray-focus, #163FE8);
    color: var(--button--primary-gray-text, #0D0D0D);
    outline: none;
}

.global-button-white {
    background: var(--button--primary-white-default, #FFFFFF);
    border-color: var(--button--primary-white-default, #FFFFFF);
    color: var(--button--primary-white-text, #0D0D0D);
}
.global-button-white:hover,
.global-button-white.is-hover {
    background: var(--button--primary-white-hover, #4565ED);
    border-color: var(--button--primary-white-hover, #4565ED);
    color: var(--button--primary-white-hover-text, #FFFFFF);
}
.global-button-white:active,
.global-button-white.active {
    background: var(--button--primary-white-active, #163FE8);
    border-color: var(--button--primary-white-active, #163FE8);
    color: var(--button--primary-white-active-text, #FFFFFF);
}
.global-button-white:disabled,
.global-button-white.is-disabled,
.global-button-white[aria-disabled="true"] {
    background: var(--button--primary-white-default, #FFFFFF);
    border-color: var(--button--primary-white-default, #FFFFFF);
    color: var(--button--primary-white-text, #0D0D0D);
    opacity: 0.5;
}
.global-button-white:focus-visible,
.global-button-white.is-focus {
    background: var(--button--primary-white-default, #FFFFFF);
    border-color: var(--button--primary-white-focus, #163FE8);
    color: var(--button--primary-white-text, #0D0D0D);
    outline: none;
}

/* ========================== SECONDARY = outline ========================= */
.global-button-border-black {
    background: transparent;
    border-color: var(--button--secondary-dark-border, #0D0D0D);
    color: var(--button--secondary-dark-text, #0D0D0D);
}
.global-button-border-black:hover,
.global-button-border-black.is-hover {
    background: var(--button--secondary-dark-hover, #D0D9FA);
    border-color: var(--button--secondary-dark-hover, #D0D9FA);
}
.global-button-border-black:active,
.global-button-border-black.active {
    background: var(--button--secondary-dark-active, #B9C5F8);
    border-color: var(--button--secondary-dark-active, #B9C5F8);
}
.global-button-border-black:disabled,
.global-button-border-black.is-disabled,
.global-button-border-black[aria-disabled="true"] {
    background: transparent;
    border-color: var(--button--secondary-dark-border, #0D0D0D);
    color: var(--button--secondary-dark-text, #0D0D0D);
    opacity: 0.5;
}
.global-button-border-black:focus-visible,
.global-button-border-black.is-focus {
    background: transparent;
    border-color: var(--button--secondary-dark-focus-border, #163FE8);
    color: var(--button--secondary-dark-text, #0D0D0D);
    outline: none;
}

.global-button-border-gray {
    background: transparent;
    border-color: var(--button--secondary-gray-border, #F2F3F5);
    color: var(--button--secondary-gray-text, #F2F3F5);
}
.global-button-border-gray:hover,
.global-button-border-gray.is-hover {
    background: var(--button--secondary-gray-hover-bg, #FAFAFA);
    border-color: var(--button--secondary-gray-border, #F2F3F5);
    color: var(--button--secondary-gray-text-on, #0D0D0D);
}
.global-button-border-gray:active,
.global-button-border-gray.active {
    background: var(--button--secondary-gray-active-bg, #F2F3F5);
    border-color: var(--button--secondary-gray-border, #F2F3F5);
    color: var(--button--secondary-gray-text-on, #0D0D0D);
}
.global-button-border-gray:disabled,
.global-button-border-gray.is-disabled,
.global-button-border-gray[aria-disabled="true"] {
    background: transparent;
    border-color: var(--button--secondary-gray-border, #F2F3F5);
    color: var(--button--secondary-gray-text, #F2F3F5);
    opacity: 0.6;
}
.global-button-border-gray:focus-visible,
.global-button-border-gray.is-focus {
    background: transparent;
    border-color: var(--button--secondary-gray-focus-border, #163FE8);
    color: var(--button--secondary-gray-text, #F2F3F5);
    outline: none;
}

.global-button-border-white {
    background: transparent;
    border-color: var(--button--secondary-white-border, #FFFFFF);
    color: var(--button--secondary-white-text, #FFFFFF);
}
.global-button-border-white:hover,
.global-button-border-white.is-hover {
    background: var(--button--secondary-white-fill, #FFFFFF);
    border-color: var(--button--secondary-white-fill, #FFFFFF);
    color: var(--button--secondary-white-text-on, #0D0D0D);
}
.global-button-border-white:active,
.global-button-border-white.active {
    background: var(--button--secondary-white-fill, #FFFFFF);
    border-color: var(--button--secondary-white-fill, #FFFFFF);
    color: var(--button--secondary-white-text-on, #0D0D0D);
}
.global-button-border-white:disabled,
.global-button-border-white.is-disabled,
.global-button-border-white[aria-disabled="true"] {
    background: transparent;
    border-color: var(--button--secondary-white-border, #FFFFFF);
    color: var(--button--secondary-white-text, #FFFFFF);
    opacity: 0.6;
}
.global-button-border-white:focus-visible,
.global-button-border-white.is-focus {
    background: transparent;
    border-color: var(--button--secondary-white-focus-border, #163FE8);
    color: var(--button--secondary-white-text, #FFFFFF);
    outline: none;
}

/* =========================== TERTIARY = ghost =========================== */
.global-button-tertiary-black {
    background: transparent;
    border-color: transparent;
    color: var(--button--tertiary-dark-text, #0D0D0D);
}
.global-button-tertiary-black:hover,
.global-button-tertiary-black.is-hover {
    background: var(--button--tertiary-dark-hover, #D0D9FA);
    border-color: var(--button--tertiary-dark-hover, #D0D9FA);
}
.global-button-tertiary-black:active,
.global-button-tertiary-black.active {
    background: var(--button--tertiary-dark-active, #B9C5F8);
    border-color: var(--button--tertiary-dark-active, #B9C5F8);
}
.global-button-tertiary-black:disabled,
.global-button-tertiary-black.is-disabled,
.global-button-tertiary-black[aria-disabled="true"] {
    background: transparent;
    border-color: transparent;
    color: var(--button--tertiary-dark-text, #0D0D0D);
    opacity: 0.5;
}
.global-button-tertiary-black:focus-visible,
.global-button-tertiary-black.is-focus {
    background: transparent;
    border-color: var(--button--tertiary-dark-focus-border, #163FE8);
    color: var(--button--tertiary-dark-text, #0D0D0D);
    outline: none;
}

/* NOTA: tertiary-gray default are border #F2F3F5 (dark/white = transparent) — de confirmat in Figma */
.global-button-tertiary-gray {
    background: transparent;
    border-color: var(--button--tertiary-gray-border, transparent);
    color: var(--button--tertiary-gray-text, #F2F3F5);
}
.global-button-tertiary-gray:hover,
.global-button-tertiary-gray.is-hover {
    background: var(--button--tertiary-gray-hover-bg, #FAFAFA);
    border-color: var(--button--tertiary-gray-hover-bg, #FAFAFA);
    color: var(--button--tertiary-gray-text-on, #0D0D0D);
}
.global-button-tertiary-gray:active,
.global-button-tertiary-gray.active {
    background: var(--button--tertiary-gray-active-bg, #E2E4E8);
    border-color: var(--button--tertiary-gray-border, #F2F3F5);
    color: var(--button--tertiary-gray-text-on, #0D0D0D);
}
.global-button-tertiary-gray:disabled,
.global-button-tertiary-gray.is-disabled,
.global-button-tertiary-gray[aria-disabled="true"] {
    background: transparent;
    border-color: transparent;
    color: var(--button--tertiary-gray-text, #F2F3F5);
    opacity: 0.6;
}
.global-button-tertiary-gray:focus-visible,
.global-button-tertiary-gray.is-focus {
    background: transparent;
    border-color: var(--button--tertiary-gray-focus-border, #163FE8);
    color: var(--button--tertiary-gray-text, #F2F3F5);
    outline: none;
}

.global-button-tertiary-white {
    background: transparent;
    border-color: transparent;
    color: var(--button--tertiary-white-text, #FFFFFF);
}
.global-button-tertiary-white:hover,
.global-button-tertiary-white.is-hover {
    background: var(--button--tertiary-white-fill, #FFFFFF);
    border-color: var(--button--tertiary-white-fill, #FFFFFF);
    color: var(--button--tertiary-white-text-on, #0D0D0D);
}
.global-button-tertiary-white:active,
.global-button-tertiary-white.active {
    background: var(--button--tertiary-white-fill, #FFFFFF);
    border-color: var(--button--tertiary-white-fill, #FFFFFF);
    color: var(--button--tertiary-white-text-on, #0D0D0D);
}
.global-button-tertiary-white:disabled,
.global-button-tertiary-white.is-disabled,
.global-button-tertiary-white[aria-disabled="true"] {
    background: transparent;
    border-color: transparent;
    color: var(--button--tertiary-white-text, #FFFFFF);
    opacity: 0.6;
}
.global-button-tertiary-white:focus-visible,
.global-button-tertiary-white.is-focus {
    background: transparent;
    border-color: var(--button--tertiary-white-focus-border, #163FE8);
    color: var(--button--tertiary-white-text, #FFFFFF);
    outline: none;
}







/* ==========================================================================
   BUTTON ICONS — set mic UI (blocks). Sistem DIRECTIONAL.
   Pe buton: .global-button-icon-before + .btn-icon-before-X  si/sau
             .global-button-icon-after  + .btn-icon-after-X

   ADAUGI ICON NOU? adauga 1 linie in fiecare lista (before + after),
   cu numele fisierului din assets/icons/blocks/<nume>.svg
   ========================================================================== */

/* ---- BEFORE (stanga) ---- */
.btn-icon-before-arrow-down       { --btn-icon-before: url("../icons/blocks/arrow-down.svg"); }
.btn-icon-before-arrow-left       { --btn-icon-before: url("../icons/blocks/arrow-left.svg"); }
.btn-icon-before-arrow-right      { --btn-icon-before: url("../icons/blocks/arrow-right.svg"); }
.btn-icon-before-arrow-up         { --btn-icon-before: url("../icons/blocks/arrow-up.svg"); }
.btn-icon-before-attach           { --btn-icon-before: url("../icons/blocks/attach.svg"); }
.btn-icon-before-bell             { --btn-icon-before: url("../icons/blocks/bell.svg"); }
.btn-icon-before-briefcase        { --btn-icon-before: url("../icons/blocks/briefcase.svg"); }
.btn-icon-before-calendar         { --btn-icon-before: url("../icons/blocks/calendar.svg"); }
.btn-icon-before-checkmark        { --btn-icon-before: url("../icons/blocks/checkmark.svg"); }
.btn-icon-before-close            { --btn-icon-before: url("../icons/blocks/close.svg"); }
.btn-icon-before-close-circle     { --btn-icon-before: url("../icons/blocks/close-circle.svg"); }
.btn-icon-before-colet            { --btn-icon-before: url("../icons/blocks/colet.svg"); }
.btn-icon-before-compare          { --btn-icon-before: url("../icons/blocks/compare.svg"); }
.btn-icon-before-curier           { --btn-icon-before: url("../icons/blocks/curier.svg"); }
.btn-icon-before-danger           { --btn-icon-before: url("../icons/blocks/danger.svg"); }
.btn-icon-before-desk             { --btn-icon-before: url("../icons/blocks/desk.svg"); }
.btn-icon-before-dislike          { --btn-icon-before: url("../icons/blocks/dislike.svg"); }
.btn-icon-before-document-download{ --btn-icon-before: url("../icons/blocks/document-download.svg"); }
.btn-icon-before-download         { --btn-icon-before: url("../icons/blocks/download.svg"); }
.btn-icon-before-edit             { --btn-icon-before: url("../icons/blocks/edit.svg"); }
.btn-icon-before-electricity      { --btn-icon-before: url("../icons/blocks/electricity.svg"); }
.btn-icon-before-emoji            { --btn-icon-before: url("../icons/blocks/emoji.svg"); }
.btn-icon-before-eye              { --btn-icon-before: url("../icons/blocks/eye.svg"); }
.btn-icon-before-eye-slash        { --btn-icon-before: url("../icons/blocks/eye-slash.svg"); }
.btn-icon-before-filter           { --btn-icon-before: url("../icons/blocks/filter.svg"); }
.btn-icon-before-flame            { --btn-icon-before: url("../icons/blocks/flame.svg"); }
.btn-icon-before-fridge           { --btn-icon-before: url("../icons/blocks/fridge.svg"); }
.btn-icon-before-phone            { --btn-icon-before: url("../icons/blocks/phone.svg"); }
.btn-icon-before-user             { --btn-icon-before: url("../icons/blocks/user.svg");}
/* ---- AFTER (dreapta) ---- */
.btn-icon-after-arrow-down        { --btn-icon-after: url("../icons/blocks/arrow-down.svg"); }
.btn-icon-after-arrow-left        { --btn-icon-after: url("../icons/blocks/arrow-left.svg"); }
.btn-icon-after-arrow-right       { --btn-icon-after: url("../icons/blocks/arrow-right.svg"); }
.btn-icon-after-arrow-up          { --btn-icon-after: url("../icons/blocks/arrow-up.svg"); }
.btn-icon-after-attach            { --btn-icon-after: url("../icons/blocks/attach.svg"); }
.btn-icon-after-bell              { --btn-icon-after: url("../icons/blocks/bell.svg"); }
.btn-icon-after-briefcase         { --btn-icon-after: url("../icons/blocks/briefcase.svg"); }
.btn-icon-after-calendar          { --btn-icon-after: url("../icons/blocks/calendar.svg"); }
.btn-icon-after-checkmark         { --btn-icon-after: url("../icons/blocks/checkmark.svg"); }
.btn-icon-after-close             { --btn-icon-after: url("../icons/blocks/close.svg"); }
.btn-icon-after-close-circle      { --btn-icon-after: url("../icons/blocks/close-circle.svg"); }
.btn-icon-after-colet             { --btn-icon-after: url("../icons/blocks/colet.svg"); }
.btn-icon-after-compare           { --btn-icon-after: url("../icons/blocks/compare.svg"); }
.btn-icon-after-curier            { --btn-icon-after: url("../icons/blocks/curier.svg"); }
.btn-icon-after-danger            { --btn-icon-after: url("../icons/blocks/danger.svg"); }
.btn-icon-after-desk              { --btn-icon-after: url("../icons/blocks/desk.svg"); }
.btn-icon-after-dislike           { --btn-icon-after: url("../icons/blocks/dislike.svg"); }
.btn-icon-after-document-download { --btn-icon-after: url("../icons/blocks/document-download.svg"); }
.btn-icon-after-download          { --btn-icon-after: url("../icons/blocks/download.svg"); }
.btn-icon-after-edit              { --btn-icon-after: url("../icons/blocks/edit.svg"); }
.btn-icon-after-electricity       { --btn-icon-after: url("../icons/blocks/electricity.svg"); }
.btn-icon-after-emoji             { --btn-icon-after: url("../icons/blocks/emoji.svg"); }
.btn-icon-after-eye               { --btn-icon-after: url("../icons/blocks/eye.svg"); }
.btn-icon-after-eye-slash         { --btn-icon-after: url("../icons/blocks/eye-slash.svg"); }
.btn-icon-after-filter            { --btn-icon-after: url("../icons/blocks/filter.svg"); }
.btn-icon-after-flame             { --btn-icon-after: url("../icons/blocks/flame.svg"); }
.btn-icon-after-fridge            { --btn-icon-after: url("../icons/blocks/fridge.svg"); }
.btn-icon-after-phone             { --btn-icon-after: url("../icons/blocks/phone.svg"); }

.global-button:focus-visible {
    outline: 2px solid var(--button--bg-focus, #506FEE);
    outline-offset: 2px;
    box-shadow: none;
}