:root {
    /* Aktiv Grotesk - Applied in Page Builder */
    --font-header: var(--lwc-fontFamilyHeader, var(--dxp-s-text-heading-large-font-family, "aktiv-grotesk-extended"));
    --font-body: var(--lwc-fontFamilyBody, var(--dxp-s-body-font-family, "aktiv-grotesk"));
    --font-body_condensed: "aktiv-grotesk-condensed";
    --default-font-size: 16px;

    --font-weight_thin: 200;
    --font-weight_normal: 400;
    --font-weight_strong: 700;
    --font-weight_stronger: 800;

    --heading_mobile: var(--font-weight_stronger) 1.75rem/2rem var(--font-header);
    --heading_desktop: var(--font-weight_stronger) 3.25rem/3.5rem var(--font-header);

    --heading-small_desktop: var(--font-weight_stronger) 2rem/2.375rem var(--font-header);
    --heading-small_mobile: var(--font-weight_stronger) 1.125rem/2.25rem var(--font-header);

    --eyebrow: var(--font-weight_strong) 0.75rem/1rem var(--font-header);

    --body-copy_mobile: 1rem/1.5rem var(--font-body);
    --body-copy_desktop: 1.375rem/2.0625rem var(--font-body);

    --small-copy_mobile: 0.875rem/1.3125rem var(--font-body);
    --small-copy_desktop: 1rem/1.5rem var(--font-body);

    --legal-copy: 0.75rem/1rem var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

h1 {
    font: var(--heading_mobile) !important;
}

h2 {
    font: var(--heading-small_mobile) !important;
}

h3 {
    font-family: var(--font-header);
    font-size: 0.75rem !important;
    font-weight: var(--font-weight_strong);
    line-height: 1rem;
}

h4 {
    font: var(--font-weight_stronger) 1.375rem/1.625rem var(--font-header) !important;
}

h5 {
    font: var(--font-weight_strong) 1.175rem/1.25rem var(--font-header) !important;
}

h6 {
    font: var(--font-weight_normal) 1rem/1.125rem var(--font-header) !important;
}

p {
    font-family: var(--body-copy_mobile) !important;
}

small {
    font: var(--small-copy_mobile) !important;
}

.legal {
    font: var(--legal-copy) !important;
}

.headline {
    font-family: var(--font-header) !important;
    font-size: 1.375rem !important;
    line-height: 1.625rem !important;
    font-weight: var(--font-weight_stronger) !important;
    text-transform: uppercase !important;
}

.kdp-text-regular {
    font-family: var(--font-body);
    line-height: 1.5;
    text-transform: none !important;
}

/* Desktop */
@media only screen and (min-width: 768px) {
    h1 {
        font: var(--heading_desktop) !important;
    } 
    
    h2 {
        font: var(--heading-small_desktop) !important;
    }

    p {
        font: var(--body-copy_desktop) !important;
    }

    small {
        font: var(--small-copy_desktop) !important;
    }
}