:root {
    --heading-color: #212121;

    /* conversion colors */
    --conversion: #AF1A31;
    --conversion-hover: #7A0000;
    --conversion-inactive: #D48C8C;
    --conversion-text: #fff;
    --conversion-text-hover: #fff;

    /* primary colors */
    --primary: #212121;
    --primary-hover: #858585;
    --primary-inactive: #A6A6A6;
    --primary-text: #fff;
    --primary-text-hover: #fff;

    /*secondary colors*/
    --secondary: #fff;
    --secondary-hover: #212121;
    --secondary-inactive: #fff;
    --secondary-text: #212121;
    --secondary-text-hover: #fff;

    /*tertiary colors*/
    --tertiary: #fff;
    --tertiary-hover: #fff;
    --tertiary-inactive: #fff; 
    --tertiary-text: #212121;
    --tertiary-text-hover: #212121;

    /* link */
    --link-color: #212121;
    --link-hover-color: #858585;

    /*error colors*/
    --error: #C73D23;
    --error-container: #FDEFED;
    --error-container-text:#961E08;
    --warning: #F6C667;
    --warning-container: #FBE8C2;
    --success: #387E61;
    --success-container: #AFCBC0;
    --dxp-g-success-contrast: #fff;
    --dxp-g-success: var(--success);
    --dxp-g-warning-contrast: #000;
    --dxp-g-warning: var(--warning);
    --dxp-g-destructive-contrast: #fff;
    --dxp-g-destructive: var(--error-container-text);
    
    /* Neutral */
    --white: #FFF;
    --light-gray: #F7F7F7;
    --medium-gray: #B7B7B7;
    --silver-wing: #898D8D;
    --dark-gray: #6F6D6A;
    --black: #000;
    --anti-flash-light: #F0F0F0;
    --silver: #B9BDBD;
    --stardust: #A8A8A5;
    --pink-rose: #EC7FA7;
    --soft-gray: #D9D9D6;
    --steel-black: #545859;
    --steel-strong: #343738;
    --cart-column-bg: #f4f4f4;
    --footer-bg: #f4f4f4;

    /**************************
            Text 
    ***************************/

    /* Font Weights */
    --font-weight-thin: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-heavy: 700;
    --font-family-noto-sans: 'Noto Sans', sans-serif;

    /* HTML */
    --dxp-s-html-font-size: 16px;
    --dxp-c-html-line-height: 1.5rem;
    --dxp-s-html-font-size-mobile: 16px;

    /* Font family for different text */
    --dxp-c-html-font-family: var(--font-family-noto-sans);
    --dxp-g-root-font-family: var(--font-family-noto-sans);
    --dxp-g-heading-font-family: var(--font-family-noto-sans);
    --dxp-s-button-font-family: var(--font-family-noto-sans);
    --dxp-s-body-font-family: var(--font-family-noto-sans);
    --dxp-s-body-small-font-family: var(--font-family-noto-sans);
    --dxp-s-text-heading-large-font-family: var(--font-family-noto-sans);
    --dxp-s-form-element-text-font-family: var(--font-family-noto-sans);
    --dxp-s-form-element-caption-text-font-family: var(--font-family-noto-sans);
    --dxp-s-text-heading-small-font-family: var(--font-family-noto-sans);
    --dxp-s-text-heading-extra-large-font-family: var(--font-family-noto-sans);
    --dxp-s-form-element-label-font-family: var(--font-family-noto-sans);
    --dxp-s-text-heading-medium-font-family: var(--font-family-noto-sans);

    /* Body Text */
    --dxp-s-body-font-weight: var(--font-weight-normal);
    --dxp-s-body-font-size: var(--dxp-s-html-font-size);
    --dxp-s-body-font-style: normal;
    --dxp-s-body-text-decoration: none;
    --dxp-s-body-text-transform: none; /* 'none' to respect label translations*/
    --dxp-s-body-text-shadow: none;
    --dxp-s-body-line-height: 1.5;
    --dxp-s-body-letter-spacing: .48px;
    --dxp-s-body-text-color: var(--heading-color);

    --body-small-font-size: .875rem;
    --body-small-line-height: 1.25rem;
    --body-small-letter-spacing: .2px;

    /* Font Sizes 1rem = 16px*/
    /* --dxp-g-font-size-1: 0.625rem;
    --dxp-g-font-size-2: 0.75rem;
    --dxp-g-font-size-3: 0.8125rem;
    --dxp-g-font-size-4: 0.875rem;
    --dxp-g-font-size-5: 1rem;
    --dxp-g-font-size-6: 1.125rem;
    --dxp-g-font-size-7: 1.25rem;
    --dxp-g-font-size-8: 1.5rem;
    --dxp-g-font-size-9: 1.75rem;
    --dxp-g-font-size-10: 2rem;
    --dxp-g-font-size-11: 2.625rem; */

    /**************************
           Headings 
    ***************************/
    /* 
    * Heading 1
    * class: dxp-text-heading-xlarge
    */

    --dxp-s-text-heading-extra-large-font-size: 3rem;
    --dxp-s-text-heading-extra-large-line-height: 125%;
    --dxp-s-text-heading-extra-large-letter-spacing: .96px;
    --dxp-s-text-heading-extra-large-font-family: var(--dxp-g-heading-font-family);
    --dxp-s-text-heading-extra-large-font-weight: var(--font-weight-light);
    --dxp-s-text-heading-extra-large-font-style: normal;
    --dxp-s-text-heading-extra-large-text-decoration: none;
    --dxp-s-text-heading-extra-large-text-transform: none; /*'none' to respect label translations*/
    --dxp-s-text-heading-extra-large-text-shadow: none;
    --dxp-s-text-heading-extra-large-color: var(--heading-color);


    /* 
    * Heading 2
    * class: .dxp-text-heading-large,.slds-text-heading--large,.slds-text-heading_large
    */
    --dxp-s-text-heading-large-font-size: 2.25rem;
    --dxp-s-text-heading-large-line-height: 125%;
    --dxp-s-text-heading-large-letter-spacing: .72px;
    --dxp-s-text-heading-large-font-family: var(--dxp-g-heading-font-family);
    --dxp-s-text-heading-large-font-weight: var(--font-weight-light);
    --dxp-s-text-heading-large-font-style: normal;
    --dxp-s-text-heading-large-text-decoration: none;
    --dxp-s-text-heading-large-text-transform: none; /*'none' to respect label translations */
    --dxp-s-text-heading-large-text-shadow: none;
    --dxp-s-text-heading-large-color: var(--heading-color); 


    /* 
    * Heading 3
    * class: .dxp-text-heading-medium,.slds-text-heading--medium,.slds-text-heading_medium
    */
    --dxp-s-text-heading-medium-font-size: 2rem;
    --dxp-s-text-heading-medium-line-height: 125%;
    --dxp-s-text-heading-medium-letter-spacing: .64px;
    --dxp-s-text-heading-medium-font-family: var(--dxp-g-heading-font-family);
    --dxp-s-text-heading-medium-font-weight: var(--font-weight-light);
    --dxp-s-text-heading-medium-font-style: normal;
    --dxp-s-text-heading-medium-text-decoration: none;
    --dxp-s-text-heading-medium-text-transform: none; /*'none' to respect label translations*/
    --dxp-s-text-heading-medium-text-shadow: none;
    --dxp-s-text-heading-medium-color:  var(--heading-color); 

    /* 
    * Heading 4
    * class: .dxp-text-heading-small,.slds-text-heading--small,.slds-text-heading_small
    */
    --dxp-s-text-heading-small-font-size: 1.75rem;
    --dxp-s-text-heading-small-line-height: 130%;
    --dxp-s-text-heading-small-letter-spacing: .56px;
    --dxp-s-text-heading-small-font-family: var(--dxp-g-heading-font-family);
    --dxp-s-text-heading-small-font-weight: var(--font-weight-light);
    --dxp-s-text-heading-small-font-style: normal;
    --dxp-s-text-heading-small-text-decoration: none;
    --dxp-s-text-heading-small-text-transform: none; /*'none' to respect label translations*/
    --dxp-s-text-heading-small-text-shadow: none;
    --dxp-s-text-heading-small-color:  var(--heading-color);

    /* 
    * Heading 5
    * class: .dxp-text-heading-xsmall
    */
    --dxp-s-text-heading-extra-small-font-size: 1.5rem;
    --dxp-s-text-heading-extra-small-line-height: 125%;
    --dxp-s-text-heading-extra-small-letter-spacing: .72px;
    --dxp-s-text-heading-extra-small-font-family: var(--dxp-g-heading-font-family);
    --dxp-s-text-heading-extra-small-font-weight: var(--font-weight-light);
    --dxp-s-text-heading-extra-small-font-style: normal;
    --dxp-s-text-heading-extra-small-text-decoration: none;
    --dxp-s-text-heading-extra-small-text-transform: none; /*'none' to respect label translations*/
    --dxp-s-text-heading-extra-small-text-shadow: none;
    --dxp-s-text-heading-extra-small-color:  var(--heading-color);


    /**************************
           Buttons & Links 
    ***************************/

    /* Links */
    --dxp-c-link-text-color: var(--link-color);
    --dxp-s-link-text-color: var(--link-color);
    --dxp-s-link-text-color-hover: var(--link-hover-color);
    --slds-g-link-text-color-hover: var(--link-hover-color);
    --dxp-c-link-color-background: none;
    --dxp-c-link-color-background-hover: none;
    --dxp-s-link-text-decoration: underline;
    --dxp-s-link-text-decoration-hover: underline;
    --dxp-c-link-text-shadow-hover: none;
    --dxp-c-link-color-outline-focus: none;
    /* Transitions */
    --dxp-c-button-brand-transition: border 0s linear;
    --dxp-c-button-outline-brand-transition: border 0s linear;
    --dxp-c-button-neutral-transition: border 0s linear;
    --dxp-c-button-destructive-transition: border 0s linear;
    --dxp-c-button-text-destructive-transition: border 0s linear;
    --dxp-c-button-success-transition: border 0s linear;
    --dxp-c-spinner-color-background: inherit;
    --dxp-c-link-transition: color 0.1s linear;
    /* 
    *   GENERAL BUTTON 
    *   class = .slds-button
    */
    --dxp-s-button-font-size: 14px;
    --dxp-s-button-font-style: normal;
    --dxp-s-button-font-weight: var(--font-weight-medium);
    --dxp-s-button-text-decoration-active: none;
    --dxp-s-button-text-transform: uppercase; 
    --dxp-s-button-line-height: 150%;
    --dxp-s-button-letter-spacing: .42px;
    
    /* padding top */
    --slds-c-button-spacing-block-start: .5rem;
    --sds-c-button-spacing-block-start: .5rem;
    /* padding right */
    --slds-c-button-spacing-inline-end: 0;
    --sds-c-button-spacing-inline-end: 0;
    /* padding bottom */
    --slds-c-button-spacing-block-end: .5rem;
    --sds-c-button-spacing-block-end: .5rem;
    /* padding left */
    --slds-c-button-spacing-inline-start: 0;
    --sds-c-button-spacing-inline-start: 0;
    /* color */
    --slds-c-button-text-color: var(--primary, #212121);
    --sds-c-button-text-color: var(--primary, #212121);
    --com-c-button-color: var(--primary, #212121);
    --com-c-button-color-active: var(--primary, #212121);
    /* background color */
    --slds-c-button-color-background: transparent;
    --sds-c-button-color-background: transparent;
    --com-c-button-color-background: transparent;
    /* border color */
    --slds-c-button-color-border: transparent;
    --sds-c-button-color-border: transparent;
    --com-c-button-color-border: transparent;
    /* border width */
    --slds-c-button-sizing-border: 1px;
    --sds-c-button-sizing-border: 1px;
    /* border-radius */
    --slds-c-button-radius-border: 0px;
    --sds-c-button-radius-border: 0px;
    --com-c-button-radius-border: 0px;
    /* box shadow */
    --slds-c-button-shadow: none;
    --sds-c-button-shadow: none;
    /* line-height */
    --slds-c-button-line-height: 150%;
    --sds-c-button-line-height: 150%;

    --sds-c-button-shadow-focus: none;
    --dxp-s-button-color-focus: none;

    /* 
    *   BRAND BUTTON / PRIMARY 
    *   class = .slds-button_brand
    */

    /* padding left */
    --slds-c-button-brand-spacing-inline-start: 1.5rem;
    --sds-c-button-brand-spacing-inline-start: 1.5rem;
    /* padding right */
    --slds-c-button-brand-spacing-inline-end: 1.5rem;
    --sds-c-button-brand-spacing-inline-end: 1.5rem;
    /* background color */
    --slds-c-button-brand-color-background: var(--primary, #212121);
    --sds-c-button-brand-color-background: var(--primary, #212121);
    --com-c-button-primary-color-background: var(--primary, #212121);
    /* border color */
    --slds-c-button-brand-color-border: var(--primary, #212121);
    --sds-c-button-brand-color-border: var(--primary, #212121);
    --com-c-button-primary-color-border: var(--primary, #212121);
    /* color */
    --slds-c-button-brand-text-color: #fff;
    --sds-c-button-brand-text-color: #fff;
    --com-c-button-primary-color: #fff;

    /* 
    *   Brand/Primary Button States 
    */
    --slds-c-button-brand-color-background-hover: var(--primary-hover, #858585);
    --sds-c-button-brand-color-background-hover: var(--primary-hover, #858585);
    --sds-c-button-brand-color-background-hover: var(--primary-hover, #858585);
    --com-c-button-primary-color-background-hover: var(--primary-hover, #858585);
    --com-c-button-color-background-hover: var(--primary-hover, #858585);

    --dxp-s-button-color-hover: #fff;
    --slds-c-button-brand-color-border-hover: var(--primary-hover, #858585);
    --sds-c-button-brand-color-border-hover: var(--primary-hover, #858585);
    --sds-c-button-brand-color-border-hover: var(--primary-hover, #858585);
    --com-c-button-primary-color-border-hover: var(--primary-hover, #858585);
    --com-c-button-color-border-hover: var(--primary-hover, #858585);
    --com-c-button-primary-color-border-active: var(--primary-hover, #858585);

    --slds-c-button-brand-text-color-hover: #fff;
    --sds-c-button-brand-text-color-hover: #fff;
    --sds-c-button-brand-text-color-hover: #fff;
    --dxp-s-button-color-hover-contrast: #fff;
    --com-c-button-primary-color-hover: #fff;
    --com-c-button-color-hover: #fff;

    --slds-c-button-brand-color-background-active: var(--primary-hover, #212121);
    --com-c-button-primary-color-background-active: var(--primary-hover, #212121);
    --sds-c-button-brand-color-background-active: var(--primary-hover, #212121);
    --sds-c-button-brand-color-border-active: var(--primary-hover, #212121);
    --slds-c-button-brand-text-color-active: #fff;
    --sds-c-button-brand-text-color-active: #fff;

    --com-c-button-primary-color-background-disabled: var(--anti-flash-light);
    --com-c-button-primary-color-border-disabled: var(--anti-flash-light);
    --com-c-button-primary-color-disabled: var(--heading-color);

    /* 
    *   OUTLINE BRAND BUTTON / SECONDARY
    *   class = .slds-button_outline-brand
    */

    /* padding left */
    --slds-c-button-outline-brand-spacing-inline-start: 1.5rem;
    --sds-c-button-outline-brand-spacing-inline-start: 1.5rem;
    /* padding right */
    --slds-c-button-outline-brand-spacing-inline-end: 1.5rem;
    --sds-c-button-outline-brand-spacing-inline-end: 1.5rem;
    /* background-color */
    --slds-c-button-outline-brand-color-background: var(--secondary, #fff);
    --sds-c-button-outline-brand-color-background:  var(--secondary, #fff);
    --com-c-button-secondary-color-background: var(--secondary, #fff);
    /* border-color */
    --slds-c-button-outline-brand-color-border: var(--secondary-hover, #212121);
    --sds-c-button-outline-brand-color-border: var(--secondary-hover, #212121);
    --com-c-button-secondary-color-border: var(--secondary-hover, #212121);

    /* Button Color defined with classes */

    /* 
    *  Outline/Secondary Button States 
    */
    --slds-c-button-outline-brand-color-background-hover: var(--secondary-hover, #212121);
    --sds-c-button-outline-brand-color-background-hover: var(--secondary-hover, #212121);
    --com-c-button-secondary-color-background-hover: var(--secondary-hover, #212121);
    --slds-c-button-outline-brand-color-background-active: var(--secondary-hover, #212121);
    --sds-c-button-outline-brand-color-background-active: var(--secondary-hover, #212121);
    --com-c-button-secondary-color-background-active: var(--secondary-hover, #212121);

    --slds-c-button-outline-brand-color-border-hover: var(--secondary-hover, #212121);
    --sds-c-button-outline-brand-color-border-hover: var(--secondary-hover, #212121);
    --com-c-button-secondary-color-border-hover: var(--secondary-hover, #212121);
    --sds-c-button-outline-brand-color-border-active: var(--secondary-hover, #212121);
    --com-c-button-secondary-color-border-active: var(--secondary-hover, #212121);

    --dxp-s-secondary-button-text-color-hover: var(--secondary-text-hover, #fff);
    --slds-c-button-text-color-hover: var(--secondary-text-hover, #fff);
    --sds-c-button-text-color-hover: var(--secondary-text-hover, #fff);
    /* Disabled */
    --com-c-button-secondary-color-disabled: var(--heading-color);
    --com-c-button-secondary-color-background-disabled: #fff;
    --com-c-button-secondary-color-border-disabled: var(-soft-gray);


    /* 
    *   NEUTRAL BUTTON / Tertiary
    *   class = .slds-button_neutral
    */
    /* padding right */
    --slds-c-button-neutral-spacing-inline-start: 0.75;
    --sds-c-button-neutral-spacing-inline-start: 0.75;
    /* padding left */
    --slds-c-button-neutral-spacing-inline-end: 0.75;
    --sds-c-button-neutral-spacing-inline-end: 0.75;
    /* background-color */
    --slds-c-button-neutral-color-background: var(--tertiary, #fff);
    --sds-c-button-neutral-color-background: var(--tertiary, #fff);
    /* border color */
    --slds-c-button-neutral-color-border: #C8C8C8;
    --sds-c-button-neutral-color-border: #C8C8C8;

    /* 
    *  Neutral/Tertiary Button States 
    */
    --slds-c-button-neutral-color-background-hover: var(--tertiary-hover, #fff);
    --sds-c-button-neutral-color-background-hover:  var(--tertiary-hover, #fff);
    --com-c-button-tertiary-color-background-hover:  var(--tertiary-hover, #fff);
    --slds-c-button-neutral-color-background-active:  var(--tertiary-hover, #fff);
    --sds-c-button-neutral-color-background-active:  var(--tertiary-hover, #fff);

    --slds-c-button-neutral-color-border-hover: var(--tertiary-text, #212121);
    --sds-c-button-neutral-color-border-hover: var(--tertiary-text, #212121);
    --com-c-button-tertiary-color-border-hover: var(--tertiary-text, #212121);
    --sds-c-button-neutral-color-border-active: var(--tertiary-text, #212121);
    --com-c-button-tertiary-color-hover: var(--tertiary-text, #212121);
    --com-c-button-tertiary-color-disabled: var(--heading-color);

    /******* Site Spacing *******/
    --container_default: 100%;
    --container_s: 100%; /* 540px */
    --container_m: 100%; /* 720px */
    --container_l: 960px;
    --container_xl: 1140px;
    --container_xxl: 1320px;
    --container_xxxl: 1500px;
    --gutter-main: 1.5rem;

    --dxp-s-component-wrapper-spacer-size: 0;
    --dxp-s-component-wrapper-spacer-size-mobile: 0;

    /* 
    * Section Padding 
    */

    /* Padding-top */
    --dxp-c-section-content-spacing-block-start: 0;
    --dxp-s-section-content-spacing-block-start: 0;
    --dxp-c-section-content-spacing-block-start-mobile: 0;
    --dxp-s-section-content-spacing-block-start-mobile: 0;
    /* padding-right */
    --dxp-c-section-content-spacing-inline-end: 0;
    --dxp-s-section-content-spacing-inline-end: var(--gutter-main, 1rem);
    --dxp-c-section-content-spacing-inline-end-mobile: 1rem;
    --dxp-s-section-content-spacing-inline-end-mobile: 1rem;
    /* padding-bottom  */
    --dxp-c-section-content-spacing-block-end: 0;
    --dxp-s-section-content-spacing-block-end: 0;
    --dxp-c-section-content-spacing-block-end-mobile: 0;
    --dxp-s-section-content-spacing-block-end-mobile: 0;
    /* padding-left */
    --dxp-c-section-content-spacing-inline-start: 0;
    --dxp-s-section-content-spacing-inline-start: var(--gutter-main, 1rem);
    --dxp-c-section-content-spacing-inline-start-mobile: 1rem;
    --dxp-s-section-content-spacing-inline-start-mobile: 1rem;
    
    /**************************
            Cards
    ***************************/        
    --lwc-cardBackgroundColor: #fff;
    --slds-c-card-color-background: #fff;
    --sds-c-card-color-background: #fff;
    --slds-c-card-radius-border: 12px;
    --slds-c-card-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --dxp-c-s-card-border-radius: 0;
    --dxp-c-l-card-border-radius: 0;
}

/**************************
        Structure
***************************/
/* Checkbox */
.slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
    background-color: var(--primary);
    border-color:  var(--primary);
}
.slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux::after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux::after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux::after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux::after, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux::after, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux::after {
    height: 0.4rem;
    width: 0.75rem;
    top: 43%;
    left: 52%;
    border-color: #fff;
}
.slds-pill {
    box-shadow: none !important;
}
/* Focus States for Accessibility and Tab Indexing */
:focus-visible  {
    outline: var(--steel-black, #545859) solid 2px!important;
}
a:focus-visible {
    outline-color: var(--steel-black, #545859)!important;
}
button:focus-visible {
    outline: var(--steel-black, #545859) auto 2px!important;
}
button.slds-button_brand:focus-visible {
    outline: var(--steel-black, #545859) auto 2px!important; /*constrast the button color */
}
.slds-input:focus,
input:focus {
    background-color: #fff;
    /* border: 2px solid var(--steel-black, #545859)!important; */
    outline: 0!important;
    box-shadow: none!important;
}
.slds-dropdown__item>a:focus,
.slds-textarea:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}
.slds-input:focus, 
.slds-combobox__input.slds-has-focus, 
.slds-combobox__input:focus {
    border-color: var(--steel-black, #545859)!important;
}
.slds-input[readonly] {
    font-size: 1rem!important;
    line-height: 120%;
    letter-spacing: 0.48px;
    padding: 0!important;
    border: 1px solid transparent!important;
}
.slds-input[readonly]:focus, .slds-input[readonly]:active{
    border: 1px solid transparent!important;
    box-shadow: none!important;
}
/**************************
        Headings
***************************/
h1 {
    font-size: 3rem;   
    line-height: 125%;
    color: var(--heading-color);
    font-weight: var(--font-weight-light);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .96px;
    font-style: normal;
}
h2 {
    font-size: 2.25rem;   
    line-height: 125%;
    color: var(--heading-color);
    font-weight: var(--font-weight-light);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .72px;
    font-style: normal;
}
h3 {
    font-size: 2rem; 
    line-height: 125%;
    color: var(--heading-color);
    font-weight: var(--font-weight-light);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .64px;
    font-style: normal;
}
h4 {
    font-size: 1.75rem; 
    line-height: 130%;
    color: var(--heading-color);
    font-weight: var(--font-weight-light);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .56px;
    font-style: normal;
}
h5 {
    font-size: 1.5rem;
    line-height: 125%;
    color: var(--heading-color);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .72px;

}
h6 {
    font-size: 1rem;   
    line-height: 120%;
    color: var(--heading-color);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-noto-sans)!important;
    letter-spacing: .48px;
    font-style: normal;
}

/**************************
    Header & Footer
***************************/
commerce-layout-site > .header {
    border-bottom: 1px solid #d9d9d9!important;
    margin-bottom: 1rem;
    position: static!important;
    display: block;
}
.wsi-header .layout-header-desktop {
    padding: 0!important;
}
.wsi-header .header-logo {
    padding: 0 !important;
}
@media only screen and (max-width: 47.9375em) {
    .dxp-content-layout-site-logo{
        max-height: inherit!important;
    }
}
.wsi-header .menu-button:hover .slds-icon, 
.wsi-header .menu-button:focus .slds-icon, 
.wsi-header a:hover .slds-icon {
    fill: #545454 !important;
}
.wsi-header .header-badge-icons .slds-icon {
   width: 2rem;
    height: 1.5rem
}
.wsi-header .slds-notification-badge {
    background: var(--conversion)!important;;
}
/* footer */
commerce-layout-site > div:last-child {
    background: var(--footer-bg);
    width: 100%;
    margin: 3rem 0 0;
    padding: 1.5rem;
}
.wsi-link-row {
    display: flex;
     gap: 1rem;  
}
.wsi-link-row a {
    font-size: .75rem;
    padding: 0.5rem 0;
}
/* Nav */
.wsi-navigation button:hover, 
.wsi-navigation a:hover,
.wsi-navigation button:active,
.wsi-navigation button:focus,
.wsi-navigation a:active,
.wsi-navigation a:focus {
    background: transparent!important;
    color: #737373!important;
    text-decoration: underline!important;
}
.wsi-navigation nav, .wsi-navigation a, .wsi-navigation button {
    color: #212121!important;
}

/**************************
        Buttons
***************************/
/* General */
.slds-button {
    text-decoration: none!important;
    border-radius: 0 !important;
    transform: none !important;
}
.slds-button:hover,
.slds-button:focus {
    text-decoration: underline!important;
    border-radius: 0 !important;
    transform: none !important;
    background-color: transparent !important;
    color: var(--heading-color) !important;
}
.slds-button.slds-button_icon {
    padding: 0!important;
}
/* Primary Button */
.slds-button_brand,
a.slds-button_brand {
    color: var(--primary-text, #fff)!important;
    background-color: var(--primary, #212121)!important;
    border-color: var(--primary, #212121)!important;
    box-shadow: none!important;
}
.slds-button_brand:hover,
a.slds-button_brand:hover {
    color: var(--primary-text-hover, #fff)!important;
    background-color: var(--primary-hover, #858585)!important;
    border-color: var(--primary-hover, #858585)!important;
    box-shadow: none!important;
    text-decoration: none!important;
}

.slds-button--brand:disabled, 
.slds-button--brand[disabled],
.slds-button_brand:disabled, 
.slds-button_brand[disabled], 
.slds-button_brand:disabled:hover, 
.slds-button_brand[disabled]:hover,
.quantity-list-action > commerce-action-button:disabled,
.quantity-list-action > commerce-action-button[disabled],
.quantity-list-action > commerce-action-button:disabled:hover,
.quantity-list-action > commerce-action-button[disabled]:hover,
commerce_builder-search-results-layout commerce-action-button button:disabled, 
commerce_builder-search-results-layout commerce-action-button button:disabled:hover {
    background: var(--primary-inactive)!important;
    border-color: var(--primary-inactive)!important;
    color: var(--primary-text)!important;
    box-shadow: none!important;
}
/* (Primary)Conversion Button */
.wsi-plp-section commerce-action-button button,
.wsi-plp-section commerce-action-button .slds-button_brand,
.wsi-plp-section commerce-action-button a.slds-button--brand,
.wsi-pdp-details-section commerce-action-button button,
.wsi-pdp-details-section commerce-action-button .slds-button_brand,
.wsi-pdp-details-section commerce-action-button a.slds-button--brand,
.quantity-list-action > commerce-action-button button,
.wsi-conversion button  {
    color: var(--conversion-text)!important;
    background-color: var(--conversion, #AF1A31)!important;
    border-color: var(--conversion, #AF1A31)!important;
}
.wsi-plp-section commerce-action-button button:hover,
.wsi-plp-section commerce-action-button .slds-button_brand:hover,
.wsi-plp-section commerce-action-button a.slds-button--brand:hover, 
.wsi-plp-section commerce-action-button a.slds-button_brand:hover,
.wsi-pdp-details-section commerce-action-button button:hover,
.wsi-pdp-details-section commerce-action-button .slds-button_brand:hover,
.wsi-pdp-details-section commerce-action-button a.slds-button--brand:hover, 
.wsi-pdp-details-section commerce-action-button a.slds-button_brand:hover,
.quantity-list-action > commerce-action-button button:hover,
.quantity-list-action > commerce-action-button button:active,
.quantity-list-action > commerce-action-button button:focus,
.quantity-list-action > commerce-action-button button:active:focus,
.wsi-conversion button:hover {
    color: var(--conversion-text-hover)!important;
    background-color: var(--conversion-hover, #7A0000)!important;
    border-color: var(--conversion-hover, #7A0000)!important;
    text-decoration: none!important;
}

/* Secondary Button */
.slds-button_outline-brand {
    color: var(--secondary-text, #212121)!important;
    background-color: var(--secondary, #fff)!important;
    border-color: var(--secondary-text, #212121)!important;
}
.slds-button_outline-brand:hover,
.slds-button_outline-brand:active,
.slds-button_outline-brand:focus, 
.slds-button_outline-brand:active:focus {
    color: var(--secondary-text-hover, #fff)!important;
    background-color: var(--secondary-hover, #212121)!important;
    border-color: var(--secondary-hover, #212121)!important;
    text-decoration: none!important;
}
.slds-button_outline-brand:focus {
    border-color: var(--secondary-hover, #212121)!important;
}
.slds-button.slds-button_outline-brand:active,
.slds-button_outline-brand:focus, 
lightning-button[variant=brand-outline]::part(button):active, 
lightning-button[variant=brand-outline]::part(button):focus,
.slds-button.slds-button_outline-brand:focus:enabled {
    color: var(--secondary-text-hover, #fff)!important;
    background-color: var(--secondary-hover, #212121)!important;
    border-color: var(--secondary-hover, #212121)!important;
} 

.slds-button_outline-brand:disabled,
.slds-button_outline-brand[disabled],
.slds-button_outline-brand:disabled:hover,
.slds-button_outline-brand[disabled]:hover{
    background: #fff!important;
    color: #A6A6A6!important;
    border-color: #A6A6A6!important;
}
/* Tertiary Button */
.slds-button_neutral,
.comm-forgot-password__cancel-button  {
    padding-left: .75rem;
    padding-right: .75rem;
    color: var(--tertiary-text, #212121);
    text-decoration: none!important;
    border: 0 !important;
}
.comm-forgot-password__cancel-button {
    color: var(--tertiary-text, #212121);
}
.slds-button_neutral:hover {
    color: var(--tertiary-text, #212121) !important;
    background-color: var(--tertiary-hover, #fff) !important;
    text-decoration: underline !important;
    border: 0 !important;
}
.slds-button_neutral:active,
.slds-button_neutral:focus {
    color: var(--tertiary-text, #212121);
    background-color: var(--tertiary-hover, #fff);
}
.slds-button_neutral:disabled, 
.slds-button_neutral[disabled], 
.slds-button_neutral:disabled:hover, 
.slds-button_neutral[disabled]:hover {
    background: #fff!important;
    color: #A6A6A6!important;
    border-color: #A6A6A6!important;
}
/* Text Buttons */
.slds-button_text {
    color: var(--heading-color);
    font-family: var(--font-family-noto-sans);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    line-height: 21px;
    padding: .5rem .75rem;
    background: transparent;
    border: 0;
}
.slds-button_text:hover{
    background: transparent!important;
    text-decoration: underline!important;
}
.slds-button_text:active,
.slds-button_text:focus {
    background: transparent!important;
    text-decoration: underline!important;
}



/**************************
            PLP
***************************/
commerce-breadcrumbs {
    margin: 1rem 0!important;
    display: block;
}
commerce-breadcrumbs .breadcrumb-list {
    gap: .25rem!important;
}
commerce-breadcrumbs ol li p {
    margin-left: .5rem!important;
}
commerce-breadcrumbs ol li {
    font-size: 1rem !important;
}
/* @media screen and (min-width: 64.0625em) {
    .wsi-plp-section .product-grid-container .grid-item {
        flex-basis: 33.33%!important;
    }
} */
.wsi-plp-section .cardContainerGrid {
    grid-template-areas: "imageArea" "fieldsArea" "priceArea" "callToActionArea"!important;
    grid-template-rows: 330px 1.5fr .75fr 1fr !important;
    padding: 0!important;
}
.wsi-plp-section .cardContainerGrid .imageArea {
    align-items: center !important;
    text-align: center;
}
.wsi-plp-section .cardContainerGrid .imageArea .productImage {
    max-height: 280px!important;
    object-fit: cover !important;
}
.wsi-plp-section .cardContainerGrid .imageArea .productImage img {
    aspect-ratio: 1/1;
    object-fit: fill!important;
}
.wsi-plp-section .cardContainerGrid .fieldsArea {
   justify-content: flex-start; 
}
.wsi-plp-section .cardContainerGrid .fieldsArea a {
   text-decoration: none!important; 
}
.wsi-plp-section .cardContainerGrid .fieldsArea .slds-truncate {
    white-space: normal !important;
    font-size: 1rem!important;
}
.wsi-plp-section .cardContainerGrid .priceArea {
    width: 100%;
}
commerce-product-pricing .price-label {
    font-size: 1rem!important;
    line-height: 150%!important;
    letter-spacing: .42px!important;
    font-weight: var(--font-weight-normal)!important;
}
commerce-product-pricing .original-price,
.wsi-cart-section .originalPrice {
    color: var(--heading-color)!important;
}
commerce-product-pricing .negotiated-price,
.wsi-cart-section .actualPrice {
    /* text-decoration-line: line-through!important; */
    color: var(--steel-black)!important;
    margin-left: .5rem;
}
.wsi-plp-section .price-container {
    flex-direction: row-reverse!important;
}
.wsi-plp-section .cardContainerGrid .callToActionArea {
    justify-self: flex-start !important;
}

/* Filters */
.wsi-filter-section h3 {
    font-size: 1.125rem !important;
}
/* hide categories */
.wsi-filter-section .categories-section {
    display: none;
}
/**************************
            PDP
***************************/
.wsi-pdp-gallery commerce-thumbnail-gallery {
    object-fit: cover!important;
}
.wsi-pdp-gallery .container {
    max-height: 700px;
}
.wsi-pdp-gallery .product-image {
    border: 0!important;
}

/* qty label */
commerce-number-input label {
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.main-price-container td > span {
    vertical-align: bottom!important;
}

.price-unavailable,
.unavailablePrice {
    font-size: .875rem!important;
    text-align: left!important;
}
commerce-product-pricing-details .price-label,
.main-price-container .price-label {
    font-size: 1.5rem!important;
    line-height: 150%!important;
    letter-spacing: .42px!important;
    font-weight: var(--font-weight-normal)!important;
    margin: 1rem 0;
    display: inline-flex;
}
commerce-product-pricing-details .main-price,
.main-price-container .main-price {
    color: var(--heading-color)!important;
}
commerce-product-pricing-details .strikethrough-price,
.main-price-container .strikethrough-price {
    text-decoration-line: line-through!important;
    color: var(--steel-black)!important;
    margin-left: .5rem;
}
@media (max-width: 48rem) {
    commerce-product-pricing-details table {
        justify-content: flex-start !important;
    }
}
.main-price-container td > span {
    vertical-align: bottom!important;
}
/**************************
            Cart
***************************/
.wsi-cart-section .column-content {
    padding: 1.5rem!important;
}
commerce_cart-managed-contents {
    position: relative;
}
.wsi-cart-section .clear-cart-section {
    position: absolute;
    bottom: 0;
    right: 0;
}
.wsi-cart-section .columns-content .columns dxp_layout-column:last-child .column-content {
    border: 1px solid #d9d9d9;
    background: var(--cart-column-bg);
}
.wsi-cart-section .sort-menu {
    margin: 0!important;
}
.wsi-cart-section .unitPrice, 
.wsi-cart-section .originalPrice, 
.wsi-cart-section .actualPrice {
    font-size: 1.125rem!important;
}
.wsi-cart-section .subtotal-price *, 
.wsi-cart-section .total-price * {
    font-size: 1.25rem !important;
}
.wsi-cart-section .item_details_currency {
    flex-direction: row-reverse;
    gap: .25rem;
}
/* hide product fields on cart line items */
.wsi-cart-section .product-fields {
    display: none;
}
.wsi-conversion button {
    width: 100%;
}
.wsi-cart-section .item-name {
    margin-right: 1rem;
}
/**************************
    Request Quote Confirmation
***************************/
.wsi-quote-confirmation {
    max-width: 600px;
    margin: 3rem auto;
    width: 100%;
}


/**************************
        Lightning Modal
***************************/
lightning-modal-base .slds-modal__close button,
lightning-modal-base .slds-modal__close button:hover, 
lightning-dialog .slds-modal__close button,
lightning-dialog .slds-modal__close button:hover{
    background: #fff!important;
    width: 3rem;
    height: 3rem;
    border-radius: 50%!important;
    margin-bottom: 1rem;
    z-index: 99999
}
lightning-modal-base .slds-modal__content,
lightning-dialog .slds-modal__content{
    border-radius: 0 0 1.5rem 1.5rem!important;
    text-align: left;
}
lightning-modal-base .slds-modal__header,
lightning-dialog .slds-modal__header{
    border-radius: 1.5rem 1.5rem 0 0;
}
lightning-modal-base .slds-modal__footer,
lightning-dialog .slds-modal__footer{
    border-radius: 1.5rem;
    border-top: none;
    background: #fff;
}
lightning-modal-base .slds-modal__footer button,
lightning-dialog .slds-modal__footer button {
    background: #fff;
    border: none;
}

/**************************
        Forms
***************************/
/* Container for the input and label */
.input-container, .slds-form-element__control {
  position: relative;
  /* margin-top: 20px; */
}
  
/* Input field styling */
.slds-input {
  color: var(--heading-color, #212121);
  width: 100%;
  /* padding: .5rem; */
  font-size: 1rem;
  border: 1px solid var(--steel-black)!important;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  background: transparent;
}
.modern-input, .modern-textarea {
    height: auto !important;
}
/* Search Input */
input.number-input__input {
  border-color: #D9D9D6 !important; /* qty box border */
}
/* Initial label inside the input */
.input-label, .slds-form-element__label {
  /* position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%); */
  font-size: 1rem;
  font-weight: var(--font-weight-normal)!important;
  color: var(--steel-black, #545859)!important;
  transition: 0.2s ease all;
  pointer-events: none; /* Label won't interfere with clicks */
  background-color: white;
  padding: 0 5px;
}
label.slds-form-element__label {
  cursor: text;
  transition: ease all 0.2s;
  z-index: 5;
}
label.slds-form-element__label .slds-required {
  display: none;
}
/* When the input is focused or has content, move the label to the top */
.slds-input:focus + .input-label,
.slds-input:focus + .slds-form-element__label,
.slds-input:not(:placeholder-shown) + .input-label,
.slds-input:not(:placeholder-shown) + .slds-form-element__label{
  top: 0;
  left: 10px;
  font-size: 0.75rem;
  color: var(--steel-black)!important;
  background-color: white;
}
/* Add some focus effects for the input field */
.slds-input:focus,
.slds-input:focus {
  border-color: var(--steel-black); 
} 
.slds-textarea:focus{
  box-shadow: none!important;
  border: 2px solid var(--steel-black) !important;
}
.slds-textarea:focus-visible {
  outline: 0 !important;
}

/* Qty Selector */
.number-input__decrement-button,
.number-input__increment-button,
.number-input__decrement-button:hover,
.number-input__increment-button:hover {
    border-radius: 0!important;
    background: #fff!important;
    min-height: 2.5rem!important;
    padding: .5rem!important;
    border: 1px solid var(--soft-gray, #D9D9D6) !important;
}
.number-input__decrement-button, .number-input__decrement-button:hover {
    border-right: none!important;
}
.number-input__increment-button, .number-input__increment-button:hover {
    border-left: none!important;
}
.number-input__decrement-button:disabled, 
.number-input__increment-button:disabled {
    background: #fff!important;
    color: #A6A6A6!important;
    border: 1px solid var(--soft-gray, #D9D9D6) !important;
}
.number-input__input {
    border-radius: 0 !important;
    text-align: center;
}
.slds-input.slds-is-disabled, .slds-input[disabled] {
    background: #ECECEB!important;
    color: #A6A6A6!important;
}

/**************************
    Toasts & Notification
***************************/
.slds-theme--error, .slds-theme_error {
    color: #fff;
    background-color: var(--mk-error);
    border-color: var(--mk-error);
}
.slds-theme--warning, .slds-theme_warning {
    color: var(--dxp-g-warning-contrast);
    background-color: var(--dxp-g-warning);
    border-color: var(--dxp-g-warning);
}
.slds-theme--success, .slds-theme_success {
    color: var(--dxp-g-success-contrast);
    background-color: var(--dxp-g-success);
    border-color: var(--dxp-g-success);
}
.slds-theme--success .slds-media__body > *, 
.slds-theme_success .slds-media__body > * {
    color: var(--dxp-g-success-contrast);
}
.slds-theme--success .slds-icon, 
.slds-theme_success .slds-icon {
    fill: var(--dxp-g-success-contrast);
}
.toast-container {
    top: 20%!important;
}
.toast-container .slds-notify__close {
    top: 28% !important;
    right: 10px !important;
}
.toast-container .slds-notify__close .slds-button {
    padding: 0 !important;
}
.slds-scoped-notification {
    padding: .5rem;
    border-radius: 0;
    margin: 1rem 0;
}
@media (max-width: 64rem) {
    .toast-container .slds-notify__content {
        width: 75%;
    }
}
/* Mobile and Tablets devices CSS*/
@media (max-width: 48rem) {
    .toast-container .slds-notify.fix-slds-notify--mobile .slds-notify__close{
        top: 12% !important;
        right: 4% !important;
    }
}


/**************************
        Theme Layout
***************************/
commerce-layout-site .content {
    max-width: var(--container_default);
    padding-right: var(--gutter-main, 1rem);
    padding-left: var(--gutter-main, 1rem);
    /* margin-right: auto;
    margin-left: auto; */
    width: 100%;
}
commerce-layout-site .content {
    max-width: var(--container_default);
    margin-top: 0;
    /* padding-right: var(--gutter-main, 1rem); */
    /* padding-left: var(--gutter-main, 1rem); */
    width: 100%;
}
/**************************
    Theme Media Queries
***************************/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
   commerce-layout-site .content {
        /* max-width: var(--container_s); */
        max-width: var(--container_default);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
   commerce-layout-site .content {
        /* max-width: var(--container_m); */
        max-width: var(--container_default);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
   commerce-layout-site .content {
        /* max-width: var(--container_l); */
        max-width: var(--container_default);
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
   commerce-layout-site .content {
        /* max-width: var(--container_xl); */
        max-width: var(--container_default);
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
   commerce-layout-site .content {
        /* max-width: var(--container_xxl); */
        max-width: var(--container_default);
    }
}
/* XXX-Large Monitors */
@media (min-width: 1920px) {
   commerce-layout-site .content {
        max-width: var(--container_xxxl);
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }
   commerce-layout-site .content {
        max-width: var(--container_xxxl);
    }
}
@media (max-width: 64rem) {
   commerce-layout-site .content {
        padding: 0;
    }
}

/**************************
    Experience Builder Only
***************************/
.builder-view {
    color: #000;
    text-align: center;
    background: #fff;
    padding: 1rem;
}
/*Exp Builder Only - to make selecting lwc easier*/
.interactions-component {
    min-height: 30px !important;
    position: relative;
    border: 1px dotted blue;
}