/**
* Scoped to the root of the document and all its descendant elements.
* Add this to the Header markup in Experience Builder > Settings > Advanced > Edit Header:
* <link rel="stylesheet" type="text/css" href="/sfsites/c/resource/B2BMyStoreExperienceStyles?{versionKey}" />
* This works for the browser always using the latest content in this file.
* However, the definitions are always overwritten by Salesforce styles. Because LWC styles are added to the elements tree after this file is referenced.
*/
:root {
    --dxp-g-neutral-contrast: #fff;
    /* Custom styling */
    --dxp-s-form-element-label-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --dxp-c-input-label-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    --dxp-s-form-element-label-font-size: 18px;
    --dxp-s-form-element-caption-text-font-size: 1rem;
    --dxp-c-input-label-font-size: 18px;
    --dxp-g-footer-height: 60px;
	--dxp-g-u-bg-petrol: #005461;
    --dxp-g-u-bg-petrol-step-2: #bfd3d6;
    --dxp-g-u-bg-petrol-step-3: #ebf1f2;
    --b2b-g-container-max-width: 1260px;
    --b2b-g-container-margin: 0px auto;
    --b2b-g-navigation-background: linear-gradient(270deg, #13aa13 -12.4%, #00a2c2 11.22%, #005461 43.74% 70%, #003039 100%);
    --b2b-g-navigation-item-color: var(--dxp-g-brand-contrast);
    --b2b-g-navigation-active-item:rgb(0, 84, 97);
    --b2b-g-footer-height: 100px;
    --lwc-cardBackgroundColor: #FFF;
    
    --sds-c-button-text-color-hover: rgb(0, 84, 97);
    --sds-c-button-brand-color-background-hover: transparent;
    --sds-c-button-brand-text-color-hover: rgb(0, 84, 97);
    --sds-c-button-brand-color-border-hover: transparent;
    
    /* ul patch*/
    --sds-c-accordion-sizing-border: 0;
    --com-c-button-radius-border: 14px;
}

commerce_builder-checkout-billing-info {
    display: none;
}

.dxp_base-languageSelector_languageSelector.slds-dropdown__item>a{
	--dxp-s-dropdown-text-color-hover: var(--dxp-g-u-bg-petrol);
}

flowruntime-error-content span, 
.slds-has-error .slds-form-element__help {
    font-size: 0.75rem;
}

flowruntime-error-content span {
    margin-top: calc(-1 * var(--dxp-g-spacing-xsmall));
}

flowruntime-lwc-field > div.container,
flowruntime-lwc-field .slds-form-element
{
    margin-bottom: 0;
}

flowruntime-screen-field {
    margin-bottom: 1rem;
}

::-moz-selection { /* Code for Firefox */
  color: unset;
  background: var(--dxp-g-u-bg-petrol-step-2);
}

::selection {
  color: unset;
  background: var(--dxp-g-u-bg-petrol-step-2);
}

.comm-login-form__login-button {
    padding: 12px 24px;
   	border-radius: 4px;
}

.comm-login-form__container {
	margin-top: 10px !important;
}

.login-footer {
    color: #fff;
    align-content:center;
}

button.b2c_lite_commerce-heroBannerUi_heroBannerUi:hover {
    background-color: #0e7a0e;
    border-color: transparent;
    border-radius: 6px;
}

button.b2c_lite_commerce-heroBannerUi_heroBannerUi {
    background-color: #13aa13;
    font-size: 17px;
    font-weight: 600;
    border-color: transparent;
    border-radius: 6px;
}

img.b2c_lite_commerce-heroBannerUi_heroBannerUi {
    width: inherit;
}
    
.brand-button{
	padding-right: var(--slds-c-button-spacing-inline-end,var(--sds-c-button-spacing-inline-end,1em));
    padding-left: var(--slds-c-button-spacing-inline-start,var(--sds-c-button-spacing-inline-start,1em));
    color: var(--com-c-cart-checkout-button-text-color, var(--dxp-s-button-color-contrast));
    border-color: var(--com-c-cart-checkout-button-border-color, var(--dxp-s-button-color));
    background-color: var(--com-c-cart-checkout-button-background-color, var(--dxp-s-button-color));
    border-radius: var(--com-c-cart-checkout-button-border-radius, var(--dxp-s-button-radius-border));
    font-family: var(--dxp-s-button-font-family);
    font-size: var(--dxp-s-button-font-size);
    --sds-c-button-brand-text-color-hover: #fff;
    --sds-c-button-shadow-focus: transparent;
	--sds-c-button-text-color-hover: #fff;
}
    
.brand-btn>button:hover, .brand-btn>button:focus-visible, .brand-btn>button:active, .brand-btn>button:focus {
    background-color: transparent;
    box-shadow: none;
    border: none;
    outline: none;
}

.brand-btn>button:focus {
    --sds-c-button-text-color-hover: var(--dxp-g-brand-contrast);
    --dxp-s-button-color-focus: var(--dxp-g-brand-contrast);

    color: var(--dxp-g-brand-contrast);
}

.input-search-button svg {
    width: var(--dxp-g-spacing-large);
}
    
.input-search-button > svg {
    width: var(--dxp-g-spacing-large);
}
    
.slds-accordion__section  h2 {
    font-weight: bold;
}

commerce_product_details-heading>div.slds-grid.slds-p-top_x-small>p.slds-m-right_xx-small {
    align-self: center;
}

@media (min-width: 48em) {
   .my-account-fields .slds-form-element__label {
      max-width: calc(36% - 1.25rem) !important;
   }
}

@media only screen and (max-width: 480px) {    
    .headerLogo {
        height: 4rem;
    }
    
    .headerTopContainer .searchContainer {
        position: relative;
        top: 38px;
        padding: 0;
    }
    
    .headerTopContainer .searchContainer .slds-input-has-fixed-addon {
        width: 250px;
        left: -50px;
        position: absolute;
    }
}

@media only screen and (max-width: 1024px) {
    .mobile-column-as-row .columns[dxp_layout-columns_columns] {
        flex-direction: row;
    }
}