/*****************************************************************
    GLOBAL CSS "RESET"
    IMPORTANT: Use CSS --DXP VARIABLES, ONLY
******************************************************************/

h1 {
    font-family: var(--dxp-s-text-heading-extra-large-font-family);
    font-size: var(--dxp-s-text-heading-extra-large-font-size);
    font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
    line-height: var(--dxp-s-text-heading-extra-large-line-height);
}

h2 {
    font-family: var(--dxp-s-text-heading-large-font-family);
    font-size: var(--dxp-s-text-heading-large-font-size);
    font-weight: var(--dxp-s-text-heading-large-font-weight);
    line-height: var(--dxp-s-text-heading-large-line-height);
}

h3 {
    font-family: var(--dxp-s-text-heading-medium-font-family);
    font-size: var(--dxp-s-text-heading-medium-font-size);
    font-weight: var(--dxp-s-text-heading-medium-font-weight);
    line-height: var(--dxp-s-text-heading-medium-line-height);
}

h4 {
    font-family: var(--dxp-s-text-heading-small-font-family);
    font-size: var(--dxp-s-text-heading-small-font-size);
    font-weight: var(--dxp-s-text-heading-small-font-weight);
    line-height: var(--dxp-s-text-heading-small-line-height);
}

p {
    font-weight: var(--dxp-s-body-font-weight);
    font-size: var(--dxp-s-body-font-size);
    font-family: var(--dxp-s-body-font-family);
    line-height: var(--dxp-s-body-line-height);
}

/*****************************************************************
    SLDS/OUT-OF-THE-BOX COMPONENT OVERRIDES
    IMPORTANT: Use CSS --DXP VARIABLES, ONLY
******************************************************************/

.navbar__menu-item,
.slds-nav-vertical__action {
    font-family: var(--dxp-s-text-heading-small-font-family);
    font-size: var(--dxp-s-text-heading-small-font-size);
    font-weight: var(--dxp-s-button-font-weight);
}

.slds-container_x-large {
    max-width: var(--dxp-c-section-columns-max-width, var(--dxp-s-section-columns-max-width));
}

/* For Scrolling */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    display: none !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
}

/* Category Filters not displaying when text is long UI issue fixes */
li.commerce_search-categoryTree_categoryTree.slds-truncate {
    display: flex;
    white-space: normal;
}

/* My Profile Password UI issue fixes */
commerce-my-account-password .slds-card {
    align-items: flex-start;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

commerce-my-account-password .slds-card__header {
    margin-top: var(--dxp-g-spacing-small);
    padding-top: var(--dxp-g-spacing-none);
}

/* Global colors */
:root {
    --sds-c-accordion-summary-color-background: #D1EAE5;
    --benefits-card-bg: #E8F2FA;
    --border1: #65A9E0;
    --lightbg: #FAFAFA;
    --lightbg2: #f1f1f1;
    --gallery-badge: #4CA693;
    --user-border: #EDF0F4;
    --select-border: #4C5158;
    --mobile-logo-height: 21px;
    --table-border: #CED0D1;
    --progress-bar-error: #FF0000;
    --utility-navigation-text: #09090A;
    --tertiary-text: #6E6E6E;
    --tremco-black: #000;
    --tremco-white: #ffffff;
    --tremco-text-primary: #09090A;
    --tremco-text-secondary: #3F4244;
    --tremco-text-brand: #27505C;
    --tremco-required-text: #B91C1C;
    --tremco-my-account-bg: #F2F8F9;
    --tremco-my-account-bg-active: #9fd4dd;
    --tremco-add-to-cart-button-disabled: #DDDFE1;
}

.progress-bar-error .slds-progress-bar__value {
    background: var(--progress-bar-error);
}

.custom-input .slds-form-element__label,
.custom-input-address .slds-form-element__label,
.custom-checkbox .slds-form-element__label {
    font-size: var(--dxp-g-font-size-5);
}

.custom-input-address .slds-form-element__row {
    margin-bottom: var(--dxp-g-spacing-small);
}

.custom-input-address .slds-form-element__legend .slds-required {
    display: none;
}

.card-address-height.slds-visual-picker__figure {
    border: 1px solid var(--border1);
    box-shadow: none;
}

.card-address-height.slds-visual-picker input[disabled]~label .slds-visual-picker__figure {
    background-color: var(--dxp-g-root);
}

.card-address-height .card-address-fit {
    opacity: 0.8;
}

.card-address-height.slds-visual-picker input:checked~label .slds-visual-picker__text {
    border: 2px solid var(--dxp-g-brand);
    box-shadow: none;
}

.card-address-height.slds-visual-picker input:checked~label .slds-visual-picker__text:after {
    border-top-color: var(--dxp-g-brand);
    border-right-color: var(--dxp-g-brand);
    border-width: 1.3rem;
}

.custom-badge.slds-badge {
    border-radius: var(--slds-c-badge-radius-border, var(--sds-c-badge-radius-border, 4px));
    background: var(--sds-c-accordion-summary-color-background);
    border: none;
}

.text_container a {
    color: var(--dxp-g-destructive) !important;
    text-decoration: underline !important;
}

commerce-my-account-password .slds-card {
    position: relative;
    display: block;
}

commerce-my-account-password .slds-card__header {
    position: absolute;
    right: 1rem;
    bottom: 2.75rem;
    z-index: 1;
}

.custom-modal .slds-modal__content {
    width: 100%;
    height: 100%;
}

c-rocket-c-s-v-add-to-cart .slds-file-selector__button {
    white-space: nowrap;
}

c-rocket-c-s-v-add-to-cart .slds-file-selector__text {
    white-space: nowrap;
    font-size: var(--dxp-g-font-size-4);
}

c-rocket-c-s-v-add-to-cart.component-wrapper-spacer {
    margin-bottom: 0;
}

c-rocket-c-s-v-add-to-cart.component-wrapper-spacer .input-file-upload {
    justify-content: flex-end;
}

c-rocket-c-s-v-add-to-cart.component-wrapper-spacer .input-file-upload .slds-button {
    white-space: nowrap;
}

.right-position {
    margin-right: -3.4375rem;
}

.account-switch-icon .slds-icon {
    --slds-c-icon-color-foreground: var(--dxp-g-root-contrast-1);
    width: 1rem;
    height: 1rem;
}

.account-button .slds-button {
    white-space: nowrap;
    color: var(--utility-navigation-text);
    text-decoration: none !important;
}

.account-switcher__link .slds-icon-action-approval .slds-icon {
    display: block;
}

.account-switcher__link .slds-icon-standard-account,
.account-switcher__link .slds-icon-action-approval {
    background: var(--dxp-g-brand);
}

.account-switch-item-button .slds-button {
    width: 6.8rem;
    height: 2rem;
    margin-right: 1.5rem;
}

.card-edit-button .slds-button {
    font-size: var(--dxp-g-font-size-5);
    font-family: var(--dxp-s-body-font-family);
}

.card-edit-button .slds-button:focus,
.card-edit-button .slds-button:active {
    box-shadow: none;
    border: none;
}

.add-from-quote-btn .slds-button {
    margin-bottom: 1rem;
}

.activate-icon span.slds-grid {
    margin-right: var(--dxp-g-spacing-xsmall);
}

.edit-address-selected .slds_button-tertiary {
    flex-direction: row-reverse;
}

.mobile-card-container .slds-rich-text-editor__output span {
    word-break: break-all;
}

.action-button .card-item__quantity-selector {
    margin-bottom: 0;
}

.action-button .card-item__quantity-selector .slds-m-right_medium {
    margin-right: 0;
}

.width-100 {
    width: 100%;
}

.account-switcher-mobile .slds-media .account-button .slds-button{
    font-size: 0;
}

c-rocket-account-switcher .slds-modal__header {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: none;
    padding-bottom: 0;
}

c-rocket-account-switcher .slds-modal__content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-top: 0;
    padding-bottom: 2.5rem;
}

/* 
 * Prefix Guide:
 * te-    => Custom components (our own Tremco EU UI)
 * te-xb- => Experience Builder / SLDS overrides (scoped changes to standard Salesforce components)
 * te-u-  => utilities
 */

/** #region TREMCO EU - Initial Build **/

.te-u-cursor-pointer {
    cursor: pointer;
}

/** Modal Popup Close Button Color */
.slds-modal .slds-modal__container .slds-modal__close svg.slds-button__icon {
    fill: #ecebea;
}

/** Required asterisk */
abbr.slds-required {
    color: var(--tremco-required-text);
}

/** Account Switcher **/

.account-switcher-mobile .slds-media .account-button .slds-button {
    font-size: 0;
}

.account-switcher-modal .slds-modal__header {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 0 !important;
    padding-bottom: 0;
}

.account-switcher-modal .slds-modal__content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-top: 0;
    padding-bottom: 2.5rem;
}

/** My Addreess - OOB Component **/

.te-xb-my-addresses .address-card-style-class .address-card-body .phone-number {
    display: none !important;
}

.te-xb-cart-badge .slds-icon {
    fill: var(--utility-navigation-text);
}

.te-xb-cart-badge .slds-notification-badge {
    background-color: var(--dxp-g-brand) !important;
}

/** Registration Form - Flow Screen **/

.te-xb-registration-flow .flowruntimeBody.slds-card__body {
    border: solid 1px;
    border-radius: 4px;
    border-color: var(--slds-c-card-color-border, var(--sds-c-card-color-border, var(--dxp-g-neutral-1, var(--slds-g-color-border-base-1, #c9c9c9))));
    padding-top: var(--dxp-g-spacing-medium, 1rem);
    padding-bottom: var(--dxp-g-spacing-medium, 1rem);
}

.te-xb-registration-flow lightning-input.flowruntime-inline {
    padding-bottom: 0;
}

.te-xb-registration-flow div.flowruntime-inline-container {
    gap: 0.75rem;
}

.te-xb-registration-flow .slds-form-element div[part="input-text"],
.te-xb-registration-flow .slds-form-element .slds-input {
    min-height: 28px !important; 
}

.te-xb-registration-flow .slds-form-element .slds-select_container .slds-select {
    min-height: 36px !important; 
}

.te-xb-registration-flow lightning-input.slds-form-element .slds-input {
    padding: 0.5rem 0.75rem !important; 
}

.te-xb-registration-flow abbr.slds-required {
    color: var(--slds-g-color-error-base-40, #ea001e);
}

.te-xb-registration-flow flowruntime-picklist-input-lwc .flowruntime-input  {
    padding-bottom: 1rem !important;
}

.te-xb-registration-flow .te-fullwidth-button-container {
    padding-top: var(--dxp-g-spacing-small);
    padding-bottom: var(--dxp-g-spacing-small);
}

/** Home Page Banner - Desktop **/

.te-xb-home-banner {}

.te-xb-home-banner--desktop .column-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

/** Home Page Banner - Mobile/Tablet **/

.te-xb-home-banner--mobile {
    width: 100%;
    aspect-ratio: 30 / 9;
}

/** Home Page Quick Order **/

.te-xb-home-quickorder {}

.te-xb-home-quickorder .column-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.te-xb-home-quickorder .slds-modal__container {
    --slds-c-modal-radius-border: 1rem;
}

.te-xb-home-quickorder .slds-modal__container .slds-modal__header,
.te-xb-home-quickorder .slds-modal__container .slds-modal__footer {
    background-color: var(--slds-g-color-neutral-base-100, white);
}

/* Language Selector */

.lang-button-menu {
    border: 0;
    background: transparent;
}

.lang-button-menu .slds-button {
    border: 0;
    background: transparent;
    color: var(--utility-navigation-text);
}

.lang-button-menu-host .slds-dropdown {
    background-color: var(--dxp-g-root);
}

.lang-button-menu-host .slds-dropdown__list {
    padding: 10px 20px 10px 10px;
}

.lang-button-menu-host .slds-dropdown-trigger .slds-dropdown {
    top: 75%;
}

.language-item .slds-dropdown__item > a {
    font-size: 14px;
    border-radius: 8px;
}

.language-item .slds-dropdown__item > a:focus,
.language-item .slds-dropdown__item > a:hover {
    background-color: var(--lightbg2);
    outline: none;
    box-shadow: none;
    font-weight: 500;
}

/* Products - PLP and Search Layout */

/* Products pages - Breadcrumbs */
.te-xb-breadcrumbs li {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.te-xb-breadcrumbs li p {
    margin: 0 1.75rem !important;
}

/* Products Results */
/* Make Product Fields bold */
.te-xb-product-results commerce_search-product-card commerce_search-product-field {
    font-weight: 600;
}

/* Hide SF OOB standard search results grid */
.te-xb-product-results commerce_search-product-grid {
    display: none;
}

/* Products Sort Menu */
.te-xb-sort-menu lightning-button-menu div {
    background-color: var(--tremco-white);
}

.te-xb-sort-menu lightning-menu-item .slds-dropdown__item > a:focus,
.te-xb-sort-menu lightning-menu-item .slds-dropdown__item > a:hover {
    background-color: var(--dxp-s-dropdown-color-background);
    outline: none;
    box-shadow: none;
}

/* PDP */
/* Product Title */
.te-xb-product-name :first-child {
    font-size: 3rem;
}

/* Variant Selector */
.te-xb-variant-selector__selectors:has(+ * .te-xb-variant-selector__clear) {
    margin-bottom: 0;
}

.te-xb-variant-selector__selectors:has(+ * .te-xb-variant-selector__clear) .slds-form-element:last-child {
    padding-bottom: 0.25rem;
}

/* Variant Selector - Clear */
.te-xb-variant-selector__clear a {
    padding-bottom: 0;
    padding-top: 0;
}

/* Product Safety Information */
.te-xb-product-safety-information table {
    border: 1px solid var(--slds-g-color-border-base-1);
}

.te-xb-product-safety-information table td {
    width: 50%;
    color: var(--tremco-text-primary);
    padding: 20px 24px;
}

/* Product Additional Details */
.te-product-additional-details__container .slds-modal__content.modal-content-container {
    border-radius: 20px;
}

/* Product Documentation */
.te-xb-product-documentation c-tremco-product-resource-link.component-wrapper-spacer {
    margin-bottom: 0;
}

/* Cart Page */
commerce_cart-header {
    padding-bottom: 0 !important;
}

/* CSV Upload Input */
.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv {
    justify-items: center;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv div:has(> .input-file-upload) {
    justify-items: center;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload lightning-input,
.cart__outer .csv-add-to-cart-container .input-file-upload lightning-input {
    margin-right: 0 !important;
    padding-bottom: 0 !important;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload .slds-file-selector .slds-file-selector__dropzone,
.cart__outer .csv-add-to-cart-container .input-file-upload .slds-file-selector .slds-file-selector__dropzone {
    border: none !important;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__text,
.cart__outer .csv-add-to-cart-container .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__text {
    display: none !important;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__button,
.cart__outer .csv-add-to-cart-container .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__button{
    font-size: 0;
    border-color: var(--dxp-g-brand);
}

/* Uplaod Cart Button Text - As per button text - label value */
.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__button:after,
.cart__outer .csv-add-to-cart-container .input-file-upload .slds-file-selector .slds-file-selector__dropzone .slds-file-selector__button:after{
    content: var(--cartupload-btn-txt, "Upload");
    font-size: var(--dxp-s-button-font-size);
}

/* Cart CSV Template Download */
.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv c-tremco-csv-template-download a,
.cart__outer .csv-add-to-cart-container c-tremco-csv-template-download a {
    font-size: var(--dxp-s-button-font-size);
    font-style: var(--dxp-s-button-font-style);
    font-weight: var(--dxp-s-button-font-weight);
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .download-csv-template-helptext button,
.cart__outer .csv-add-to-cart-container .download-csv-template-helptext button {
    padding: 0;
    margin-left: 0.25rem;
}

.te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .download-csv-template-helptext button svg.slds-button__icon,
.cart__outer .csv-add-to-cart-container .download-csv-template-helptext button svg.slds-button__icon {
    fill: var(--dxp-g-brand) !important;
}

/* User Management */
.user-admin-nav__search-input input {
    padding-top: 0 !important;
}

.user-form-field input {
    padding-top: 0 !important;
}

c-rocket-user-permissions .multi-select__outer lightning-input.slds-form-element {
    padding-bottom: 0.25rem;
}

.user-detail-form-container .username-helptext .slds-form-element__icon .slds-button {
    padding-top: 0 !important; 
}

.user-administration-tile .card__action--buttons .card__button .slds-button {
    text-align: left !important;
}

/* Checkout */

.te-xb-checkout {}

.address-list-header .address-search-input .slds-input {
    padding: 2px !important;
}

/* Checkout PO Number */
.desired-shipping-date input,
.po-number-class input,
.shipping-instructions-input input {
    padding-top: 0 !important;
}

/* My Account Layout - Left Navigation Bar */
.my-account-layout__container .navigation .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  background-color: var(--tremco-my-account-bg);
  box-shadow: inset 4px 0 0 var(--tremco-my-account-bg-active) !important;
}

/* Rocket Data Table */
.rocket-input__container input {
    padding-top: 0 !important;
    text-overflow: ellipsis;
}

/* PDP Add to card button */
.pdp-add-to-cart-button {
    border: none;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pdp-add-to-cart-button:disabled {
    background-color: var(--tremco-add-to-cart-button-disabled);
    color: var(--select-border);
}

/** Footer **/
/** Social Media Links (Icons) **/
.te-xb-social-links .column-content {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
}

/** Order History **/
/* Order History - Details Modal */
.te-order-history__details-modal {}

.te-order-history__details-modal .slds-modal .slds-modal__container {
    width: 85vw !important;
    max-width: 1400px !important;
}

.te-order-history__details-modal .slds-modal .slds-modal__container .slds-modal__content {
    height: 80vh !important;
    max-height: 900px !important;
    padding: 4px !important;
}

/** #endregion TREMCO EU - Initial Build **/

/*****************************************************************
    BREAKPOINTS
******************************************************************/

@media (min-width: 768px) and (max-width: 1024px) {}

@media (min-width: 1024px) {}

@media (max-width: 767px) {
    .dxp-content-layout-site-logo {
        height: var(--mobile-logo-height) !important;
    }

    .neutral-rocket-button .slds-button {
        width: 100%;
    }

    .slds-notify--toast,
    .slds-notify_toast {
        min-width: 100%;
    }

    .right-position {
        margin-right: 0;
    }

    commerce-my-account-password .slds-card__header {
        bottom: 30px;
    }

    .add-from-quote-btn .slds-button {
        margin-right: 8px;
        margin-top: 2px;
    }

    .account-switch-item-button {
        width: 100%;
    }

    .account-switch-item-button .slds-button {
        width: 100%;
        height: 3rem;
        margin-top: 1.4rem;
        margin-right: 0;
    }

    /** #region TREMCO EU - Initial Build **/

    /** Assistance Menu Link **/

    .te-xb-assistance-menu {
        padding-right: var(--dxp-g-spacing-small);
        display: block;
    }

    .te-xb-assistance-menu .dxp-text-block {
        display: none !important;
    }

    /** Account Switcher **/

    .account-switch-item-button {
        width: 100%;
    }

    .account-switch-item-button .slds-button {
        height: 3rem;
        margin-right: 0;
        float: right;
    }

    .account-switch-button-container .account-button {
        display: none !important;
    }

    /* PDP */
    /* Product Title */
    .te-xb-product-name :first-child {
        display: none !important;
    }

    /** Cart */
    .te-xb-empty-cart__actions .te-xb-empty-cart__add-to-cart--csv .input-file-upload lightning-input,
    .cart__outer .csv-add-to-cart-container .input-file-upload lightning-input {
        margin-right: 0 !important;
        padding-bottom: 0 !important;
    }

    /** #endregion TREMCO EU - Initial Build**/
}

@media (max-width: 480px) {
    /** #region TREMCO EU - Initial Build **/

    /** Home Page Banner - Desktop **/
    /** Image Media Content **/
    .te-xb-home-banner--desktop .column-content {
        padding: 12px;
        border-radius: 12px;
        transform: scale(0.92);
        transform-origin: top center;
    }

    /** Home Page Banner - Mobile/Tablet **/

    .te-xb-home-banner--mobile {
        width: 100%;
        aspect-ratio: 65 / 46;
    }

    /* Products Results */
    /* One Product per row on mobile screen */
    .te-xb-product-results .product-grid-container .grid-item {
        --com-c-product-grid-container-basis: 100% !important;
    }

    /* Checkout */
    .te-xb-checkout commerce_builder-checkout-layout-accordion-dual commerce_unified_checkout-checkout-section-accordion div[slot="proceed"],
    .te-xb-checkout commerce_builder-checkout-layout-accordion-dual commerce_unified_checkout-checkout-section-accordion div[slot="proceed"] commerce-action-button,
    .te-xb-checkout commerce_builder-checkout-layout-accordion-dual commerce_unified_checkout-checkout-section-accordion div[slot="proceed"] commerce-action-button button {
        width: 100%;
    }

    /** #endregion TREMCO EU - Initial Build **/
}