@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   KING BADGER — GLOBAL POPPINS TYPOGRAPHY
   Customer-facing website only.
   Keeps icon fonts/SVG icons intact.
   ============================================================ */

:root {
    --kb-global-font: 'Poppins', Arial, Helvetica, sans-serif;
}

html,
body {
    font-family: var(--kb-global-font) !important;
}

/*
 * Force Poppins on visible text throughout all templates:
 * navbar, footer, headings, cards, product cards, PDP, forms,
 * cart, checkout, account pages, tables, modal/offcanvas text, etc.
 */
body *:not(i):not([class^="fi-"]):not([class*=" fi-"]):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not([class*="uicon"]) {
    font-family: var(--kb-global-font) !important;
}

/*
 * Some icon systems use SPAN elements. Keep their own icon font.
 */
body span[class^="fi-"],
body span[class*=" fi-"],
body span[class^="fa-"],
body span[class*=" fa-"],
body i,
body .fa,
body .fas,
body .far,
body .fab {
    font-family: inherit;
}

/* Form controls do not always inherit font correctly across browsers. */
body button,
body input,
body textarea,
body select,
body option,
body optgroup,
body label,
body .btn,
body .form-control,
body .form-select,
body .select2-container,
body .nice-select {
    font-family: var(--kb-global-font) !important;
}

/* Common UI text that theme CSS may otherwise override. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li,
body ul,
body ol,
body span:not([class^="fi-"]):not([class*=" fi-"]):not([class^="fa-"]):not([class*=" fa-"]),
body strong,
body b,
body small,
body em,
body blockquote,
body th,
body td,
body caption,
body legend,
body dt,
body dd,
body code,
body pre,
body .card,
body .dropdown-menu,
body .modal,
body .offcanvas,
body .toast,
body .tooltip,
body .popover {
    font-family: var(--kb-global-font) !important;
}

/* Maintain clean typography at all responsive sizes. */
@media (max-width: 767.98px) {
    html,
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}