:root {
    --arco-blue: #003A77;
    --arco-light-blue: #D6EBFF;
    --arco-orange: #FF4F35;
    --arco-light-orange: #FFDAD4;
    --arco-dark-orange: #DD3D26;

    --arco-bonus-text: #036300;
    --arco-bonus-bg: #DFFFDD;

    --primary-color: var(--arco-blue);
	--secondary-color: var(--arco-orange);
    --text-color: #111213;
    --dark-color: #000D34;
    --text-gray-color: #83888d;

    --success-color: #17c75b;
    --error-color: #ff6b6b;
    --warning-color: #FFBF00;
    --info-color: #2b69ff;

    --option-color: #eaeaea;
    --remove-color: #F11F00;

    --tag-blue-text: #10549A;
    --tag-blue-bg: #D6EBFF;

    --tag-green-text: var(--arco-bonus-bg);
    --tag-green-bg: var(--arco-bonus-text);

    --cb-border-color: #C9CED4;
    --cb-border-thin: 1px solid var(--cb-border-color);
    --cb-border-thick: 3px solid var(--cb-border-color);

    /** notifications **/
    --success-alert-bg: #DFFFDD;
    --success-alert-icon: #07BD00;
    --success-alert-text: #036300;

    --warning-alert-bg: #FFEFC0;
    --warning-alert-icon: #FFBF00;
    --warning-alert-text: #705400;

    --error-alert-bg: #FFCFD0;
    --error-alert-icon: #F11F00;
    --error-alert-text: #670D00;

    /** common **/
    --cb-small-spacing: 8px;
    --cb-common-spacing: 16px;
    --cb-large-spacing: 24px;
    --cb-extra-large-spacing: 32px;

	--cb-common-border: 1px solid var(--cb-border-color);
	--cb-common-shadow: 0px 10px 20px rgba(0, 0, 0, .25);
	--cb-common-radius: 6px;

    /** font **/
    --main-font: "Roboto", sans-serif;
    --second-font: "Roboto", sans-serif;

    --line-height: 1.4em;

    --font-regular: 400;
    --font-bold: 700;

    --font-small-mob: 12px;
    --font-small-desk: 14px;

    --font-regular-mob: 14px;
    --font-regular-desk: 16px;

    --font-large-mob: 18px;
    --font-large-desk: 20px;

    /** button **/
	--button-padding: 5px 15px;
    --button-large-padding: 10px 15px;
	--button-radius: 4px;

	/** form **/
	--input-border: var(--cb-common-border);
    --input-radius: var(--cb-common-radius);
    --input-focus-border: 1px solid var(--primary-color);
    --input-focus-shadow: 0 0 0 5px rgba(11, 160, 204, 0.35);

    /** logo **/
    --cb-logo-width-mobile: 75px;
    --cb-logo-width-desktop: 75px;

    /** header **/
    --cb-header-banner-background: var(--arco-orange);
    --cb-header-banner-color: white;

    /** header (affected by logo height) **/
    --fixed-header-mobile-spacing: 117px;
    --fixed-header-desktop-spacing: 147px;

    /** footer **/
    --cb-footer-background: var(--primary-color);
    --cb-footer-title-color: white;
    --cb-footer-color: var(--arco-light-blue);
    --cb-footer-hover: white;
    --cb-footer-border: 1px solid var(--dark-color);

    /** override **/
    --sds-c-button-brand-color-background: var(--primary-color);
    --slds-c-button-brand-color-background: var(--primary-color);
    --dxp-s-button-color: var(--primary-color);
    --dxp-g-brand: var(--primary-color);

    --com-c-unified-cart-badge-link-color: var(--primary-color);
    --dxp-s-button-color: var(--primary-color);
    --dxp-s-link-text-color-hover: var(--primary-color);
}

body {
    font-family: var(--main-font);
    font-weight: var(--font-regular);
    color: var(--text-color);
}

/** forms **/
.cb-form-group {
    margin: 0 0 var(--cb-common-spacing);
}

.cb-form-group label {
    display: block;
    margin: 0 0 var(--cb-small-spacing);
    text-align: left;
}

.cb-form-group input,
.cb-form-group select,
.cb-form-field {
    width: 100%;
    padding: 5px 10px;
    border: var(--input-border);
    border-radius: var(--input-radius);
    transition: border 250ms, box-shadow 250ms;
}

.cb-form-group input:focus,
.cb-form-group select:focus,
.cb-form-field:focus {
    border: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

/** buttons **/
.cb-button-primary {
    padding: var(--button-padding);
    color: white;
    background-color: var(--primary-color);
    border-radius: var(--button-radius);
    border: initial;
    transition: background-color 250ms;
}

.cb-button-primary:hover {
    background-color: var(--dark-color);
}

.cb-button-primary:disabled,
.cb-button-primary[disabled] {
    color: var(--text-gray-color);
    background-color: var(--cb-border-color);
}

.cb-button-secondary {
    padding: var(--button-padding);
    color: white;
    background-color: var(--secondary-color);
    border-radius: var(--button-radius);
    border: initial;
}

.cb-button-outline {
    padding: var(--button-padding);
    color: var(--primary-color);
    background-color: white;
    border: var(--cb-border-thin);
    border-radius: var(--button-radius);
    transition: border-color 250ms;
}

.cb-button-outline:hover {
    border-color: var(--primary-color);
}

.cb-button-outline-icon {
    --slds-c-icon-color-foreground-default: var(--primary-color);

    display: flex;
    gap: 5px;
    align-items: center;
}

.cb-button-outline-danger:hover {
    --slds-c-icon-color-foreground-default: var(--remove-color);

    border-color: var(--remove-color);
}

.cb-link-button {
    margin: 0;
    padding: 0;
    color: var(--primary-color);
    background-color: initial;
    border: initial;
    transition: color 250ms;
}

.cb-link-button:hover {
    color: var(--secondary-color);
}

.cb-link-button-danger,
.cb-link-button-danger:hover {
    --slds-c-icon-color-foreground-default: var(--remove-color);

    color: var(--remove-color);
}

.cb-button-outline[disabled] {
    color: var(--text-gray-color);
    background-color: var(--cb-border-color);
    border-color: var(--cb-border-color);
}

.cb-button-outline[disabled]:hover {
    border-color: var(--cb-border-color);
}

.cb-button-large {
    display: block;
    width: 100%;
    padding: var(--button-large-padding);
}

/** titles **/
.cb-large-title {
    margin: 0 0 var(--cb-large-spacing);
    font-family: var(--second-font);
    font-size: 24px;
    line-height: 1.1em;
    font-weight: 500;
    color: var(--primary-color);
}

.cb-title-border {
    padding-bottom: 15px;
    border-bottom: var(--cb-border-thin);
}

.cb-title-normal {
    color: var(--text-color);
}

.cb-subtitle {
    font-size: 16px;
    color: var(--text-color);
}

@media (min-width: 1024px) {

    .cb-large-title {
        font-size: 32px;
    }

}

/** tags **/
.cb-tag {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: var(--font-bold);
    text-align: center;
    border-radius: 20px;
}

.cb-tag--blue {
    padding: 0;
    color: var(--tag-blue-text);
}

.cb-tag--green {
    color: white;
    background-color: var(--tag-green-bg);
}

/** breadcrumbs **/
.commerce-breadcrumb {
    --com-c-breadcrumb-text-size: 14px;
}

.commerce-breadcrumb .breadcrumb-list li {
    --com-c-breadcrumb-text-color: var(--primary-color);
    --com-c-breadcrumb-divider-color: var(--primary-color);

    font-family: var(--main-font);
    font-weight: var(--font-bold);
}

.commerce-breadcrumb .breadcrumb-list li a {
    --com-c-breadcrumb-link-color: var(--primary-color);

    font-weight: var(--font-regular);
    text-decoration: underline;
}

/** cart **/
.cb-cart {
    display: flex;
    gap: var(--cb-large-spacing);
    flex-direction: column;
}

.cb-cart__empty {
    width: 100%;
    text-align: center;
}

.cb-cart__counter {
    display: block;
}

.cb-cart__labels {
    display: none;
}

.cb-cart__mobileFixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--cb-common-spacing);
    background-color: white;
    box-shadow: var(--cb-common-shadow);
    z-index: 1;
}

.cb-cart__clear {
    margin-top: var(--cb-extra-large-spacing);
}

.cb-cart__footer {
    margin-top: var(--cb-large-spacing);
}

.cb-cart__back {
    --slds-c-icon-color-foreground-default: var(--text-color);

    display: flex;
    gap: var(--cb-small-spacing);
    align-items: center;
    color: var(--text-color);
    text-decoration: underline;
}

.cb-cart__back:hover {
    color: var(--text-color);
}

/** cart item **/
.cb-cartItem {
    position: relative;
    border-bottom: var(--cb-common-border);
}

.cb-cartItem--bonus {
    color: var(--arco-bonus-text);
    background-color: var(--arco-bonus-bg);
}

.cb-cartItem__wrapper {
    display: flex;
    gap: var(--cb-common-spacing);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--cb-small-spacing) 0;
}

.cb-cartItem__info {
    display: flex;
    gap: var(--cb-small-spacing);
    align-items: center;
    flex: 1 1 100%;
}

.cb-cartItem__image {
    flex-shrink: 0;
}

.cb-cartItem__name {
    font-size: 14px;
    font-weight: var(--font-bold);
}

.cb-cartItem__grade,
.cb-cartItem__brand {
    flex: 1 1 calc(50% - 8px);
}

.cb-cartItem__brand {
    font-size: 14px;
    font-weight: var(--font-bold);
    text-align: right;
}

.cb-cartItem__prices {
    font-weight: var(--font-bold);
}

.cb-cartItem__priceWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 100%;
}

.cb-cartItem__bonusPrice {
    font-weight: var(--font-bold);
    text-decoration: line-through;
}

.cb-cartItem__bonusQuantity {
    display: block;
    width: 120px;
    font-weight: var(--font-bold);
}

.cb-cartItem__actions .cb-tag {
    display: inline-block;
    margin-top: var(--cb-small-spacing);
}

@media (min-width: 1024px) {

    .cb-cart {
        flex-direction: row;
    }

    .cb-cart__mobileFixed {
        position: relative;
        top: initial;
        left: initial;
        padding: 0;
        background-color: initial;
        box-shadow: initial;
    }

    .cb-cart__counter {
        display: inline-block;
        margin-left: var(--cb-small-spacing);
    }

    .cb-cart__main {
        width: 70%;
    }

    .cb-cart__aside {
        width: 30%;
    }

    .cb-cart__labels {
        display: flex;
        gap: var(--cb-common-spacing);
        font-size: 16px;
        font-weight: var(--font-bold);
    }

    .cb-cart__labelProduct {
        flex: 1 1 40%; 
    }

    .cb-cart__labelGrade,
    .cb-cart__labelBrand {
        flex: 0 0 14%;
    }

    .cb-cart__labelWrapper {
        display: flex;
        gap: var(--cb-common-spacing);
        flex: 0 0 250px;
    }

    .cb-cart__labelQuantity {
        flex: 0 0 120px;
    }

    .cb-cart__labelPrice {
        flex: 1 1 100%;
        min-width: 105px;
    }

    /** cart item **/
    .cb-cartItem__wrapper {
        flex-wrap: nowrap;
    }

    .cb-cartItem__info {
        flex: 1 1 40%;
    }

    .cb-cartItem__grade,
    .cb-cartItem__brand {
        flex: 0 0 14%;
    }

    .cb-cartItem__brand {
        text-align: left;
    }

    .cb-cartItem__priceWrapper {
        flex: 0 0 250px;
        gap: var(--cb-common-spacing);
    }

    .cb-cartItem__prices {
        min-width: 105px;
    }

}

/** product-bundle-item **/
.product-bundle-item__image-wrapper {
    display: none;
}

/** snippets (override) **/
.cb-block {
    display: block;
    width: 100%;
}

.cb-no-margin {
    margin: 0;
}

.cb-add-border {
    border: var(--cb-common-border);
    border-radius: var(--cb-common-radius);
}

/** fix - minicart shows below the custom navigation **/
.cb-header commerce_cart-mini-cart-panel {
    z-index: 2;
}

/** fix - duplicated padding when using a custom container inside a native section **/
.comm-section-container .cb-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/** fix - login box bottom spacing **/
.cb-login__box .comm-login-form__container {
    min-height: initial !important;
}

/** fix - hide salesforce toast (prioritize custom) **/
.slds-notify_toast {
    display: none;
}