:root {
 	--com-c-breadcrumb-text-size: var(--dxp-s-text-heading-extra-small-font-size);
	--dxp-c-s-logo-width: 270;
}

div.header[name="header"] {
    border-bottom: 0px !important;
    background-color: white;
}

.logo-mobile div[role="img"] {
    max-height: 87px !important;
}

:root .header .component-wrapper-spacer {
    --dxp-c-component-wrapper-spacer-size: 0px;
    --dxp-c-l-component-spacer-size: 0px;
    --dxp-s-component-wrapper-spacer-size: 0px;
}

body {
    overflow-x: hidden;
}

c-b2b-effective-account-ribbon,
webruntime-component-container c-b2b-effective-account-ribbon,
webruntime-component-container:has(c-b2b-effective-account-ribbon),
.header webruntime-component-container.component-wrapper-spacer {
    margin-bottom: 0px !important;
    background-color: white;
}

@media only screen and (max-width: 479px) {
    /*
    * @description: Makes the logo bigger in the header for mobile view.
    *               logo-mobile -> Custom Class
    *               dxp-content-layout-site-logo -> Standard Class
    */
    .logo-mobile div[role="img"] {
        height: 50px;
    }
}

[data-automation="consentBlanketModalContainer"] {
    display: none !important;
}

@media (max-width: 768px) {
    commerce-breadcrumbs .breadcrumb-list li {
        display: list-item !important;
    }
}

commerce_my_account-order-details-display .slds-dl_inline__label {
    font-weight: 700 !important;
}

commerce_my_account-order-details-display h2.slds-text-title_bold {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

commerce_my_account-item-fields .field-item-label {
    font-weight: 700 !important;
}

 /* Order Number */
commerce-order-summary dxp_base-link a p.textBlock_desktopTabletMobile {
    font-weight: 400 !important;
}

/* Order Date */
commerce-order-summary commerce-field-display.bold.slds-text-heading_small {
    font-weight: 400 !important;
}

/* PO Number Value and other field values */
commerce-order-summary .field-ctn commerce-field-display {
    font-weight: 400 !important;
}

/* Total Amount */
commerce-order-summary commerce-formatted-price {
    font-weight: 400 !important;
}

commerce-order-list-date-filter lightning-button-menu button.slds-button {
    color: #F58A1F !important;
}

.shop-by-category-title h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #002858;
}

.seeAllCategories {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 22px;
    text-decoration: underline;
    color: #334FFF;
}

.text-css h3{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

/**
 * @description: This class is meant for only use by the standard
 * component Product Detail Headings which doesn't align the labels and
 * the values for each product field.
 */
.product-detail-headings div {
    align-items: baseline;
}

lightning-combobox [part="combobox"] lightning-base-combobox button.slds-combobox__input > span {
    margin: auto 1rem auto 0;
}

.my-combobox-wrap {
	width: 100%;
	max-width: 100%;
}

.text-block h3{
    margin-top:-10px;
}

.column{
    background-color: #FFFFFF;
    border-radius: 0 0 20px 20px;
    margin-top:-10px;
}

.shipping-details dt {
    font-family: var(--dxp-s-text-heading-medium-font-family);
    font-size: var(--dxp-s-text-heading-medium-font-size);
    font-style: var(--dxp-s-text-heading-medium-font-style);
    font-weight: var(--dxp-s-text-heading-medium-font-weight);
    text-decoration: var(--dxp-s-text-heading-medium-text-decoration);
    text-transform: var(--dxp-s-text-heading-medium-text-transform);
    line-height: var(--dxp-s-text-heading-medium-line-height);
    letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing);
}

.shipping-details dd {
    font-family: var(--dxp-s-body-font-family);
    font-size: var(--dxp-s-body-font-size);
    font-style: var(--dxp-s-body-font-style);
    font-weight: var(--dxp-s-body-font-weight);
    text-decoration: var(--dxp-s-body-text-decoration);
    text-transform: var(--dxp-s-body-text-transform);
    line-height: var(--dxp-s-body-line-height);
    letter-spacing: var(--dxp-s-body-letter-spacing);
}

commerce-product-variant-pill > div.selected {
    box-shadow: none !important;
    background-color: var(--dxp-s-button-color) !important;
	color: var(--dxp-s-button-color-contrast) !important;
}

.order-delivery-group .single-delivery-address,
.order-delivery-group .delivery-address {
    text-wrap: wrap !important;
    text-align: left;
}

commerce_my_account-order-totals h2 {
    font-family: var(--dxp-s-text-heading-small-font-family);
    font-size: var(--dxp-s-text-heading-small-font-size) !important;
    font-style: var(--dxp-s-text-heading-small-font-style);
    font-weight: var(--dxp-s-text-heading-small-font-weight) !important;
    text-decoration: var(--dxp-s-text-heading-small-text-decoration);
    text-transform: var(--dxp-s-text-heading-small-text-transform);
    line-height: var(--dxp-s-text-heading-small-line-height);
    letter-spacing: var(--dxp-s-text-heading-small-letter-spacing);
}

commerce_cart-summary .total-price {
    border-top: 1px solid var(--slds-g-color-border-base-1,#e5e5e5);
    padding-top: var(--dxp-g-spacing-xxsmall);
}

commerce_my_account-order-totals .discount-content span,
commerce_my_account-order-totals .discount-content commerce-formatted-price {
    font-family: var(--dxp-s-body-font-family);
    font-size: var(--dxp-s-body-font-size);
}

commerce_my_account-order-totals dt,
commerce_my_account-order-totals dd,
commerce_my_account-order-totals .discount-title span,
commerce_my_account-order-totals .discount-title commerce-formatted-price,
commerce_cart-summary dd {
    font-family: var(--dxp-s-html-font-family);
    font-size: var(--dxp-s-text-heading-medium-font-size);
}

/*
    * @description: this overwrites the styles for the carousel slider
    */
experience-carousel-v2 div[data-slider="slide"] {
    padding: 0;
}

/**
    * @description: carousel-card classes are used on
    * Card that is inside the carousel component.
    * Whenever a new Carouse variation is added, the
    * carousel-card class needs to be added to the card component
    * custom style.
    * This classes will hide the component area and make the image
    * the full width of the card.
    */
.carousel-card .slds-grid .slds-col:first-child {
    width: 100%;
}

.carousel-card .slds-grid .slds-col:last-child {
    display: none;
}

commerce_my_account-user-profile-menu > div {
    margin: 0 -8px;
}

@media (width >= 1024px) and (width <= 1275px) {
    commerce-panel .panel-element {
        width: 420px !important;
        position: fixed !important;
        right: 0 !important;
    }
}

.brandControlsRow img {
    width: 180px;
    height: 58px;
    object-fit: fill;
    box-sizing: border-box;
}