:root {
    --font-sans: 'Noto Sans';


    /* COLORS */
    --brand-primary: rgba(21, 26, 65, 1);
    --brand-secondary: rgba(68, 149, 209, 1);
    --brand-tertiary: rgba(211, 211, 210, 1);
    --brand-quaternary: rgba(93, 93, 93, 1);

    --brand-primary-lt: rgba(91, 95, 122, 1);
    --brand-secondary-lt: rgba(143, 191, 227, 1);
    --brand-tertiary-lt: rgba(233, 233, 233, 1);
    --brand-quaternary-lt: rgba(158, 158, 158, 1);
    --brand-primary-dk: rgba(7, 11, 44, 1);

    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);

    --button-primary-text: var(--white);

    --button-primary: var(--brand-primary);
    --swift-button-primary-background-color: var(--brand-primary);
    --swift-button-primary-hover-background-color: var(--brand-secondary);
    --swift-button-primary-foreground-color: var(--button-primary-text);
    --swift-button-primary-hover-foreground-color: var(--button-primary-text);

    --button-secondary: var(--brand-secondary);
    --button-secondary-hover: var(--brand-secondary-dk);
    --button-secondary-text: var(--white);
    --button-secondary-text-hover: var(--white);
    --button-tertiary: var(--brand-primary);
    --button-tertiary-hover: var(--white);
    --text-headline: var(--grey-6);
    --card-card-hover: rgba(247, 250, 254, 1);
    --card-card: var(--grey-1);
    --card-card-50: rgba(255, 255, 255, 0.5);
    --card-card-border: var(--grey-2);
    --text-headline-inverse: var(--white);
    --text-paragraph: var(--grey-5);
    --grey-6: rgba(54, 51, 55, 1);
    --grey-5: rgba(90, 86, 92, 1);
    --grey-4: rgba(126, 120, 129, 1);
    --grey-3: rgba(161, 157, 163, 1);
    --grey-2: rgba(207, 207, 207, 1);
    --grey-1: rgba(246, 246, 246, 1);
    --divider: rgba(0, 0, 0, 0.11999999731779099);
    --divider-inverse: rgba(255, 255, 255, 0.20000000298023224);
    --form-background: var(--white);
    --form-border: rgba(203, 210, 204, 1);
    --brand-secondary-dk: rgba(34, 75, 105, 1);
    --form-filled: var(--text-headline);
    --form-placeholder: rgba(144, 144, 144, 1);
    --form-icon: var(--grey-6);
    --text-paragraph-inverse: var(--grey-1);
    --form-error: rgba(153, 27, 27, 1);
    --form-error-hover: rgba(197, 13, 0, 1);
    --form-error-light: rgba(255, 242, 244, 1);
    --form-success: rgba(22, 101, 52, 1);
    --form-warning: rgba(221, 140, 0, 1);
    --form-warning-light: rgba(255, 248, 236, 1);
    --transparent-primary-dk: rgba(7, 11, 44, 0.75);
    --transparent-secondary-lt: rgba(143, 191, 227, 0.25);
    --transparent-tertiary-lt: rgba(233, 233, 233, 0.25);
    --transparent-secondary-md: rgba(68, 149, 209, 0.5);
    --transparent-primary-md: rgba(7, 11, 44, 0.5);
    --transparent-tertiary-md: rgba(255, 255, 255, 0.6000000238418579);
    --brand-tertiary-dk: rgba(106, 106, 105, 1);
    --text-link: rgba(52, 116, 164, 1);
    --text-link-hover: rgba(12, 70, 113, 1);
    --button-tertiary-text: var(--white);
    --transparent-primary-lt: rgba(203, 48, 4, 0.10000000149011612);
    --text-link-light: var(--brand-secondary);
    --text-link-light-hover: var(--brand-secondary-lt);
    --transparent: rgba(0, 0, 0, 0);
    --brand-quaternary-dk: rgba(74, 74, 74, 1);
    --transparent-secondary-dk: rgba(34, 75, 105, 0.8999999761581421);
    --transparent-tertiary-dk: rgba(106, 106, 105, 0.8999999761581421);
    --badge-order-status-placed-bg: rgba(207, 207, 207, 1);
    --badge-order-status-placed-text: var(--text-headline);
    --badge-order-status-processing-bg: rgba(207, 207, 207, 1);
    --badge-order-status-processing-text: var(--text-headline);
    --badge-order-status-fulfilled-bg: rgba(199, 230, 210, 1);
    --badge-order-status-fulfilled-text: rgba(17, 88, 44, 1);
    --form-border-active: var(--brand-primary);
    --form-label: var(--text-headline);
    --form-label-inverse: var(--text-headline-inverse);
    --form-info: var(--brand-secondary-dk);
    --form-info-light: rgba(217, 239, 255, 1);
    --nearly-white: rgba(248, 248, 248, 1);
    --text-link-tertiary: var(--button-primary);
    --text-link-hover-tertiary: var(--button-primary-hover);
    --text-eyebrow: var(--brand-secondary);
    --site-background: var(--white);
    --focus: rgba(51, 99, 201, 1);
    --text-eyebrow-inverse: var(--grey-1);
    --text-link-dark: var(--brand-primary-dk);
    --text-link-dark-hover: var(--white);
    --section-bg-1: var(--brand-primary);
    --section-bg-2: var(--brand-secondary);
    --section-bg-3: var(--brand-tertiary);
    --section-bg-4: var(--nearly-white);
    --button-tertiary-text-hover: var(--brand-primary);
    --button-white: var(--white);
    --button-white-hover: var(--brand-secondary);
    --button-white-text: var(--brand-primary);

    /* UI */
    --spacing-none: 0px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 56px;
    --spacing-4xl: 80px;
    --spacing-5xl: 128px;
    --spacing-6xl: 148px;
    --spacing-7xl: 280px;
    --page-margin-mobile: var(--spacing-md);
    --page-margin-tablet: var(--spacing-2xl);
    --page-margin-desktop: var(--spacing-4xl);
    --vertical-padding-none: var(--spacing-none);
    --vertical-padding-mobile: var(--spacing-xl);
    --vertical-padding-tablet: var(--spacing-2xl);
    --vertical-padding-desktop-sm: var(--spacing-xl);
    --vertical-padding-desktop-md: var(--spacing-3xl);
    --vertical-padding-desktop-lg: var(--spacing-4xl);
    --text-spacing-none: var(--spacing-none);
    --text-spacing-xs: var(--spacing-xs);
    --text-spacing-sm: var(--spacing-sm);
    --text-spacing-base: var(--spacing-md);
    --radius-none: 0px;
    --text-spacing-lg: var(--spacing-lg);
    --radius-xxs: 4px;
    --text-spacing-xl: var(--spacing-xl);
    --radius-xs: 8px;
    --text-spacing-2xl: var(--spacing-3xl);
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-3xl: 56px;
    --button-border-radius: var(--radius-none);
    --button-spacing: xs:y: 10px;
    --button-spacing: xs:x: 24px;
    --form-border-radius: var(--radius-none);
    --button-spacing: sm:y: 12px;
    --button-spacing: sm:x: 28px;
    --button-spacing: base:y: 14px;
    --button-spacing: base:x: 32px;
    --button-spacing: lg:y: 12px;
    --button-spacing: lg:x: 36px;
    --button-spacing: xl:y: 14px;
    --button-spacing: xl:x: 40px;
    --brand-radius-xs: var(--radius-xxs);
    --brand-radius-sm: var(--radius-md);
    --brand-radius-md: var(--radius-lg);
    --brand-radius-lg: var(--radius-2xl);
    --site-width: 0px;
    --button-overlap-xs: offset:x: 4px;
    --button-overlap-xs: offset:y: -33px;
    --button-overlap-xs: left: 20px;
    --button-overlap-xs: right: 28px;
    --button-overlap-xs: top: 6px;
    --button-overlap-xs: bottom: 14px;
    --button-overlap-sm: offset:x: 4px;
    --button-overlap-sm: offset:y: -39px;
    --button-overlap-sm: left: 24px;
    --button-overlap-sm: right: 32px;
    --button-overlap-sm: top: 8px;
    --button-overlap-sm: bottom: 16px;
    --button-overlap-base: offset:x: 4px;
    --button-overlap-base: offset:y: -47px;
    --button-overlap-base: left: 28px;
    --button-overlap-base: right: 36px;
    --button-overlap-base: top: 10px;
    --button-overlap-base: bottom: 18px;
    --button-overlap-lg: offset:x: 4px;
    --button-overlap-lg: offset:y: -44px;
    --button-overlap-lg: left: 32px;
    --button-overlap-lg: right: 40px;
    --button-overlap-lg: top: 8px;
    --button-overlap-lg: bottom: 16px;
    --button-overlap-xl: offset:x: 4px;
    --button-overlap-xl: offset:y: -50px;
    --button-overlap-xl: left: 36px;
    --button-overlap-xl: right: 44px;
    --button-overlap-xl: top: 10px;
    --button-overlap-xl: bottom: 18px;

    /* TYPOGRAPHY */
    --eyebrow-font-size: 16px;
    --font-serif: Roboto;
    --font-sans: Noto Sans;
    --eyebrow-letter-spacing: 2px;
    --eyebrow-font-weight: Condensed Bold;
    --eyebrow-color: var(--text-eyebrow);
    --eyebrow-font-family: var(--font-serif);
    --headline-h1-font-family: var(--font-serif);
    --table-header-font-family: var(--font-sans);
    --table-header-font-size: 16px;
    --table-header-letter-spacing: 0px;
    --table-header-font-weight: Medium;
    --table-header-color: var(--text-headline);
    --headline-h2-font-family: var(--font-serif);
    --headline-h2-font-size: 56px;
    --headline-h2-letter-spacing: 7px;
    --headline-h2-font-weight: Condensed Bold;
    --headline-h2-color: var(--text-headline);
    --headline-h1-font-size: 60px;
    --headline-h1-letter-spacing: 7.5px;
    --headline-h1-font-weight: Condensed Bold;
    --headline-h1-color: var(--text-headline);
    --font-base-mobile: 14px;
    --font-base-desktop: 16px;
    --headline-h3-font-family: var(--font-serif);
    --headline-h3-font-size: 38px;
    --headline-h3-letter-spacing: 4.75px;
    --headline-h3-font-weight: Condensed Bold;
    --headline-h3-color: var(--brand-secondary);
    --headline-h4-font-family: var(--font-serif);
    --headline-h4-font-size: 28px;
    --headline-h4-letter-spacing: 3.5px;
    --headline-h4-font-weight: Condensed Bold;
    --headline-h4-color: var(--text-headline);
    --headline-h5-font-family: var(--font-serif);
    --headline-h5-font-size: 22px;
    --headline-h5-letter-spacing: 2.75px;
    --headline-h5-font-weight: Condensed Bold;
    --headline-h5-color: var(--text-headline);
    --headline-h6-font-family: var(--font-serif);
    --headline-h6-font-size: 20px;
    --headline-h6-letter-spacing: 2.5px;
    --headline-h6-font-weight: Condensed Bold;
    --headline-h6-color: var(--text-headline);
    --headline-base-font-family: var(--font-serif);
    --headline-base-font-size: 18px;
    --headline-base-letter-spacing: 2.25px;
    --headline-base-font-weight: Condensed Bold;
    --headline-base-color: var(--text-headline);
    --headline-small-font-family: var(--font-serif);
    --headline-small-font-size: 16px;
    --headline-small-letter-spacing: 2px;
    --headline-small-font-weight: Condensed Bold;
    --headline-small-color: var(--text-headline);
    --headline-xs-font-family: var(--font-serif);
    --headline-xs-font-size: 14px;
    --headline-xs-letter-spacing: 1.75px;
    --headline-xs-font-weight: Condensed Bold;
    --headline-xs-color: var(--text-headline);
    --form-label-font-family: var(--font-sans);
    --form-label-font-size: 16px;
    --form-label-letter-spacing: 0px;
    --form-label-font-weight: SemiBold;
    --form-label-color: var(--form-label);
    --icon-label-font-family: var(--font-sans);
    --icon-label-font-size: 10px;
    --icon-label-letter-spacing: 0px;
    --icon-label-font-weight: SemiBold;
    --icon-label-color: var(--text-headline);
    --stat-large-font-family: var(--font-sans);
    --stat-large-font-size: 80px;
    --stat-large-letter-spacing: -8px;
    --stat-large-font-weight: Normal;
    --stat-large-color: var(--text-headline);
    --stat-md-font-family: var(--font-sans);
    --stat-md-font-size: 40px;
    --stat-md-letter-spacing: -1px;
    --stat-md-font-weight: Normal;
    --stat-md-color: var(--text-headline);
    --stat-sm-font-family: var(--font-sans);
    --stat-sm-font-size: 20px;
    --stat-sm-letter-spacing: 0px;
    --stat-sm-font-weight: Normal;
    --stat-sm-color: var(--text-headline);
    --buttonText-xs-font-family: var(--font-sans);
    --body-xl-font-family: var(--font-sans);
    --body-xl-font-size: 24px;
    --body-xl-letter-spacing: 0px;
    --body-xl-font-weight: Regular;
    --body-xl-color: var(--text-paragraph);
    --buttonText-xs-font-size: 14px;
    --buttonText-xs-letter-spacing: 0px;
    --buttonText-xs-font-weight: Condensed Bold;
    --buttonText-xs-color: var(--button-primary);
    --buttonText-sm-font-family: var(--font-sans);
    --buttonText-sm-font-size: 16px;
    --buttonText-sm-letter-spacing: 0px;
    --buttonText-sm-font-weight: Condensed Bold;
    --buttonText-sm-color: var(--button-primary);
    --buttonText-base-font-family: var(--font-sans);
    --buttonText-base-font-size: 18px;
    --buttonText-base-letter-spacing: 0px;
    --buttonText-base-font-weight: Condensed Bold;
    --buttonText-base-color: var(--button-primary);
    --buttonText-base-link-font-family: var(--font-sans);
    --buttonText-base-link-font-size: 18px;
    --buttonText-base-link-letter-spacing: 0px;
    --buttonText-base-link-font-weight: Condensed Bold;
    --buttonText-base-link-color: var(--button-primary);
    --buttonText-lg-font-family: var(--font-sans);
    --buttonText-lg-font-size: 20px;
    --buttonText-lg-letter-spacing: 0px;
    --buttonText-lg-font-weight: Condensed Bold;
    --buttonText-lg-color: var(--button-primary);
    --buttonText-xl-font-family: var(--font-sans);
    --buttonText-xl-font-size: 22px;
    --buttonText-xl-letter-spacing: 0px;
    --buttonText-xl-font-weight: Condensed Bold;
    --buttonText-xl-color: var(--button-primary);
    --body-lg-font-family: var(--font-sans);
    --body-lg-font-size: 20px;
    --body-lg-letter-spacing: 0px;
    --body-lg-font-weight: Regular;
    --body-lg-color: var(--text-paragraph);
    --body-base-font-family: var(--font-sans);
    --body-base-font-size: 18px;
    --body-base-letter-spacing: 0px;
    --body-base-font-weight: Regular;
    --body-base-color: var(--text-paragraph);
    --body-sm-font-family: var(--font-sans);
    --body-sm-font-size: 16px;
    --body-sm-letter-spacing: 0px;
    --body-sm-font-weight: Regular;
    --body-sm-color: var(--text-paragraph);
    --body-xs-font-family: var(--font-sans);
    --body-xs-font-size: 14px;
    --body-xs-letter-spacing: 0px;
    --body-xs-font-weight: Regular;
    --body-xs-color: var(--text-paragraph);
    --body-xl-link-font-family: var(--font-sans);
    --body-xl-link-font-size: 22px;
    --body-xl-link-letter-spacing: 0px;
    --body-xl-link-font-weight: Medium;
    --body-xl-link-color: var(--text-link);
    --body-lg-link-font-family: var(--font-sans);
    --body-lg-link-font-size: 20px;
    --body-lg-link-letter-spacing: 0px;
    --body-lg-link-font-weight: Medium;
    --body-lg-link-color: var(--text-link);
    --body-base-link-font-family: var(--font-sans);
    --body-base-link-font-size: 18px;
    --body-base-link-letter-spacing: 0px;
    --body-base-link-font-weight: Medium;
    --body-base-link-color: var(--text-link);
    --body-sm-link-font-family: var(--font-sans);
    --body-sm-link-font-size: 16px;
    --body-sm-link-letter-spacing: 0px;
    --body-sm-link-font-weight: Medium;
    --body-sm-link-color: var(--text-link);
    --body-xs-link-font-family: var(--font-sans);
    --body-xs-link-font-size: 14px;
    --body-xs-link-letter-spacing: 0px;
    --body-xs-link-font-weight: Medium;
    --body-xs-link-color: var(--text-link);
}

body {
    a {
        text-decoration: none !important;
    }

    .offcanvas.offcanvas-end.bpe-minicart {
        width: 320px;
        padding: var(--spacing-md, 16px);
    }

    .bpe-h1 {
        color: var(--text-headline, #363337);
        font-family: var(--headline-h1-font-family, Roboto);
        font-size: var(--headline-h1-font-size, 60px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 72px */
        letter-spacing: var(--headline-h1-letter-spacing, 7.5px);
        text-transform: uppercase;

        @media(max-width:900px) {
            font-size: clamp(1.5rem, 1.0415rem + 2.2571vw, 3.75rem);
        }
    }

    .bpe-h3 {
        color: var(--text-headline, #363337);
        text-align: center;
        font-family: var(--headline-h3-font-family, Roboto);
        font-size: var(--headline-h3-font-size, 38px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 45.6px */
        letter-spacing: var(--headline-h3-letter-spacing, 4.75px);
        text-transform: uppercase;
    }

    .bpe-h4 {
        color: var(--text-headline, #363337);
        font-family: var(--headline-h4-font-family, Roboto);
        font-size: var(--headline-h4-font-size, 28px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 33.6px */
        letter-spacing: var(--headline-h4-letter-spacing, 3.5px);
        text-transform: uppercase;
    }

    .bpe-h5 {
        color: var(--text-headline, #363337);
        font-family: var(--headline-h5-font-family, Roboto);
        font-size: var(--headline-h5-font-size, 22px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 26.4px */
        letter-spacing: var(--headline-h5-letter-spacing, 2.75px);
        text-transform: uppercase;
    }

    .bpe-h6 {
        color: var(--text-headline, #363337);
        text-align: center;
        font-family: var(--headline-h6-font-family, Roboto);
        font-size: var(--headline-h6-font-size, 20px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 24px */
        letter-spacing: var(--headline-h6-letter-spacing, 2.5px);
        text-transform: uppercase;
    }

    .bpe-body-dark {
        color: var(--text-paragraph, #5A565C);
        font-family: var(--body-base-font-family, "Noto Sans");
        font-size: var(--body-base-font-size, 18px);
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 25.2px */
        letter-spacing: var(--body-base-letter-spacing, 0);
    }

    .bpe-body-bold {
        color: var(--text-headline, #363337);
        font-family: var(--headline-base-font-family, Roboto);
        font-size: var(--headline-base-font-size, 18px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 21.6px */
        letter-spacing: var(--headline-base-letter-spacing, 2.25px);
        text-transform: uppercase;
    }

    .bpe-body-dark-sm {
        color: var(--text-paragraph, #5A565C);
        font-family: var(--body-sm-font-family, "Noto Sans");
        font-size: var(--body-sm-font-size, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 22.4px */
        letter-spacing: var(--body-sm-letter-spacing, 0);
    }

    .bpe-body-link {
        color: var(--text-link, #3474A4);
    }

    .bpe-buttons {
        display: flex;
        gap: var(--spacing-md, 16px);
        width: 100%;

        .bpe-btn-primary,
        .bpe-btn-secondary {
            flex: 1 1 auto;

            &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }
    }

    .bpe-btn-primary {
        border-radius: var(--button-border-radius, 0);
        background: var(--button-primary, #151A41);
        box-shadow: 0 1px 2px 0 rgba(43, 48, 64, 0.05);
        color: var(--button-primary-text, #FFF);
        border: 2px solid var(--button-primary, #151A41);
        display: flex;
        padding: var(--button-spacing-xs-y, 10px) var(--button-spacing-xs-x, 24px);
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm, 16px);
        font-family: var(--buttonText-sm-font-family, "Noto Sans");
        font-size: var(--buttonText-sm-font-size, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: var(--buttonText-sm-letter-spacing, 0);
        text-transform: uppercase;

        &.bpe-narrow {
            width: fit-content;
        }
    }

    .bpe-btn-secondary {
        border: 2px solid var(--button-primary, #151A41);
        background: var(--white, #FFF);
        box-shadow: 0 1px 3px 0 rgba(43, 48, 64, 0.10), 0 1px 2px 0 rgba(43, 48, 64, 0.06);
        color: var(--button-white-text, #151A41);
        font-family: var(--buttonText-base-font-family, "Noto Sans");
        font-size: var(--buttonText-base-font-size, 18px);
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        /* 22.5px */
        letter-spacing: var(--buttonText-base-letter-spacing, 0);
        text-transform: uppercase;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bpe-card-border {
        border: 1px solid var(--card-card-border, #CFCFCF);
        background: var(--white, #FFF);
    }

    .bpe-checkout-title {
        color: var(--text-headline, #363337);
        font-family: var(--headline-h5-font-family, Roboto);
        font-size: var(--headline-h5-font-size, 22px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 26.4px */
        letter-spacing: var(--headline-h5-letter-spacing, 2.75px);
        text-transform: uppercase;
    }

    .bpe-checkout-subtitle {
        color: var(--text-headline, #363337);
        font-family: var(--headline-h5-font-family, Roboto);
        font-size: var(--headline-h6-font-size, 22px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 26.4px */
        letter-spacing: var(--headline-h5-letter-spacing, 2.75px);
        text-transform: uppercase;
    }

    .bpe-form-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs, 4px);
        margin-bottom: var(--spacing-md, 16px);

        label {
            color: var(--form-label, #363337);
            font-family: var(--form-label-font-family, "Noto Sans");
            font-size: var(--form-label-font-size, 16px);
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
            /* 19.2px */
            letter-spacing: var(--form-label-letter-spacing, 0);
        }

        .bpe-form-control {
            border-radius: var(--radius-none, 0);
            border: 1px solid var(--form-border, #CBD2CC);
            background: var(--form-background, #FFF);
            display: flex;
            height: 48px;
            padding: 0 13px;
            align-items: center;
            align-self: stretch;
        }
    }

    .bpe-form-check {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);

        .form-check-input {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid var(--form-border, #CBD2CC);
            background: var(--white, #FFF);

            &:checked {
                background-size: contain;
            }
        }

        .form-check-label {
            color: var(--text-headline, #363337);
            font-family: var(--body-base-font-family, "Noto Sans");
            font-size: var(--body-base-font-size, 18px);
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            /* 25.2px */
            letter-spacing: var(--body-base-letter-spacing, 0);
        }
    }

    .bpe-checkout-wrapper {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-4xl, 80px);

        .main-content {
            flex: 1 1 66%;
        }

        .summary-sidebar {
            flex: 1 1 34%;
        }

        @media(max-width:900px) {
            flex-direction: column-reverse;
        }
    }

    .bpe-checkout-btn {
        outline: none;
        border: none;
        background: none;
    }

    .bpe-step-wrapper {
        padding: var(--spacing-xl, 32px) 0;
        display: flex;
        gap: var(--spacing-md, 16px);
        flex-direction: column;
        border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.12));

        .title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                color: var(--grey-4, #7E7881);
                font-family: var(--headline-h5-font-family, Roboto);
                font-size: var(--headline-h5-font-size, 22px);
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
                /* 26.4px */
                letter-spacing: var(--headline-h5-letter-spacing, 2.75px);
                text-transform: uppercase;
            }

            button,
            a {
                &.edit-button {
                    border: none;
                    background: none;
                    outline: none;
                    color: var(--text-link, #3474A4);
                    font-family: var(--buttonText-base-link-font-family, "Noto Sans");
                    font-size: var(--buttonText-base-link-font-size, 18px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 125%;
                    /* 22.5px */
                    letter-spacing: var(--buttonText-base-link-letter-spacing, 0);
                }
            }
        }

        .info-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: var(--spacing-sm, 8px);

            .info-line {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: var(--spacing-xs, 4px);
                color: var(--text-headline, #363337);
                font-family: var(--body-sm-font-family, "Noto Sans");
                font-size: var(--body-sm-font-size, 16px);
                font-style: normal;
                font-weight: 400;
                line-height: 140%;
                letter-spacing: var(--body-sm-letter-spacing, 0);

                .info-label {
                    font-weight: 700;
                    line-height: 120%;
                    /* 19.2px */
                    text-transform: uppercase;
                    margin-right: var(--spacing-xs, 4px);
                }
            }
        }

    }

    .bpe-yellow-box {
        .bpe-yellow-info {
            border: 1px solid var(--form-warning, #DD8C00);
            background: var(--form-warning-light, #FFF8EC);
            padding: 1rem;
            color: var(--text-paragraph, #5A565C);
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            font-family: var(--body-base-font-family, "Noto Sans");
            font-size: var(--body-base-font-size, 18px);
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            /* 25.2px */
            letter-spacing: var(--body-base-letter-spacing, 0);

            .bpe-yellow-text-info {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 12px;

                svg {
                    height: 24px;
                    width: 24px;
                }

                .inner-text-info {
                    flex-direction: column;

                    .info {
                        color: var(--grey-5, #5A565C);
                        font-family: var(--body-sm-font-family, "Noto Sans");
                        font-size: var(--body-sm-font-size, 16px);
                        font-style: italic;
                        font-weight: 400;
                        line-height: 140%;
                        /* 22.4px */
                        letter-spacing: var(--body-sm-letter-spacing, 0);
                    }
                }
            }
        }
    }

    .bpe-shipping-list-group {
        display: flex;
        flex-direction: column;
        width: 100%;

        .bpe-shipping-group {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            color: var(--text-headline, #363337);
            font-family: var(--body-base-font-family, "Noto Sans");
            font-size: var(--body-base-font-size, 18px);
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            /* 25.2px */
            letter-spacing: var(--body-base-letter-spacing, 0);
            border-bottom: 2px solid var(--divider, rgba(0, 0, 0, 0.12));
            padding: var(--spacing-xl, 32px) 0;

            input {
                width: 18px;
                height: 18px;
                border-radius: 150px;
                border: 1px solid var(--form-border, #CBD2CC);
                background: var(--white, #FFF);
                position: relative;
                top: 3px;

                &:checked {
                    accent-color: var(--button-secondary, #4495D1);
                }
            }

            .bpe-shipping-info {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-left: var(--spacing-md, 16px);
                width: 100%;

                .bpe-shipping-description {
                    display: flex;
                    flex-direction: column;

                    div {
                        color: var(--grey-5, #5A565C);
                        text-align: right;
                        font-family: var(--body-sm-font-family, "Noto Sans");
                        font-size: var(--body-sm-font-size, 16px);
                        font-style: italic;
                        font-weight: 400;
                        line-height: 140%;
                        /* 22.4px */
                        letter-spacing: var(--body-sm-letter-spacing, 0);
                    }
                }

                .text-price {
                    font-family: var(--body-sm-font-family, "Noto Sans");
                    font-size: var(--body-sm-font-size, 16px);
                }
            }
        }
    }

    #payment-list-add-card.bpe-add-card-button {
        border: none;
        background: none;
        outline: none;
        display: flex;
        gap: var(--text-spacing-xs, 4px);

        span {
            color: var(--text-link, #3474A4);
            font-family: var(--buttonText-base-link-font-family, "Noto Sans");
            font-size: var(--buttonText-base-link-font-size, 18px);
            font-style: normal;
            font-weight: 700;
            line-height: 125%;
            /* 22.5px */
            letter-spacing: var(--buttonText-base-link-letter-spacing, 0);
        }
    }

    .bpe-modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1050;

        .bpe-modal-content {
            position: relative;
            padding: 32px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 700px;
            width: 99vw;
            border: 1px solid var(--card-card-border, #CFCFCF);
            background: var(--white, #FFF);
        }
    }

    @media (min-width: 992px) {
        .offcanvas.offcanvas-end.bpe-minicart {
            width: 47rem;
            padding: var(--spacing-2xl, 48px);
        }
    }

    /* custom bpe tooltip for disabled select wrappers */

    .bpe-tooltip[data-bpe-tooltip] {
        position: relative;
    }

    .bpe-tooltip[data-bpe-tooltip]:hover::before {
        content: attr(data-bpe-tooltip);
        position: absolute;
        left: 0;
        top: calc(100% + 12px);
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.2;
        opacity: 1;
        pointer-events: none;
        z-index: 10000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        display: inline-block;
        width: auto;
        height: auto;
        font-family: var(--body-base-font-family, "Noto Sans");
        font-weight: 400;
    }

.mb-0-last-child.mw-75ch p a:first-of-type {
    margin-right: 16px; 
}
.mb-0-last-child.mw-75ch p a {
    text-decoration: underline !important;
}
}