@font-face {
    font-family: 'BrownLogitechPan';
    src: url('/resource/BrownLogitechPan/BrownLogitechPan-Regular.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'BrownLogitechPan';
    src: url('/resource/BrownLogitechPan/BrownLogitechPan-Bold.otf') format('opentype');
    font-weight: bold;
    font-display: swap;
}

:root {
    --com-c-label-text-color: #c3c6c8;
    --c-ls-destructive-color: #ff2947;
    --c-ls-form-border-width: 1px;
    --c-ls-form-border-width-error: 2px;
    --c-ls-form-border-color: #c3c6c8;
    --c-ls-form-error-spacing-bottom: 1rem;
    --c-ls-form-error-icon-size: 16px;
    --c-ls-form-error-icon-gap: 0.25rem;
    --c-ls-form-error-icon-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00065 14.6666C7.07843 14.6666 6.21176 14.4916 5.40065 14.1416C4.58954 13.7916 3.88398 13.3166 3.28398 12.7166C2.68398 12.1166 2.20898 11.411 1.85898 10.5999C1.50898 9.78881 1.33398 8.92214 1.33398 7.99992C1.33398 7.0777 1.50898 6.21103 1.85898 5.39992C2.20898 4.58881 2.68398 3.88325 3.28398 3.28325C3.88398 2.68325 4.58954 2.20825 5.40065 1.85825C6.21176 1.50825 7.07843 1.33325 8.00065 1.33325C8.92287 1.33325 9.78954 1.50825 10.6007 1.85825C11.4118 2.20825 12.1173 2.68325 12.7173 3.28325C13.3173 3.88325 13.7923 4.58881 14.1423 5.39992C14.4923 6.21103 14.6673 7.0777 14.6673 7.99992C14.6673 8.92214 14.4923 9.78881 14.1423 10.5999C13.7923 11.411 13.3173 12.1166 12.7173 12.7166C12.1173 13.3166 11.4118 13.7916 10.6007 14.1416C9.78954 14.4916 8.92287 14.6666 8.00065 14.6666ZM8.00065 13.3333C9.48954 13.3333 10.7507 12.8166 11.784 11.7833C12.8173 10.7499 13.334 9.48881 13.334 7.99992C13.334 6.51103 12.8173 5.24992 11.784 4.21659C10.7507 3.18325 9.48954 2.66659 8.00065 2.66659C6.51176 2.66659 5.25065 3.18325 4.21732 4.21659C3.18398 5.24992 2.66732 6.51103 2.66732 7.99992C2.66732 9.48881 3.18398 10.7499 4.21732 11.7833C5.25065 12.8166 6.51176 13.3333 8.00065 13.3333Z" fill="%23FF2947"/><path d="M5.34668 5.34595C5.56301 5.12961 5.91257 5.12961 6.12891 5.34595L8 7.21704L9.87305 5.34985C10.0894 5.13359 10.439 5.13354 10.6553 5.34985C10.8673 5.56217 10.8675 5.91597 10.6553 6.12817L8.78223 7.99927L10.6553 9.87231C10.8713 10.0887 10.8715 10.4383 10.6553 10.6545C10.4391 10.8708 10.0894 10.8705 9.87305 10.6545L8 8.78149L6.12891 10.6545C5.91268 10.8708 5.56304 10.8705 5.34668 10.6545C5.13035 10.4382 5.13035 10.0886 5.34668 9.87231L7.21777 7.99927L5.34668 6.12817C5.13035 5.91184 5.13035 5.56228 5.34668 5.34595Z" fill="%23FF2947" stroke="%23FF2947" stroke-width="0.3"/></svg>');
    --c-ls-footer-link-gap: 1rem;
    --c-ls-footer-border-color: #6f7678;
    --c-ls-footer-padding-top: 1rem;
    --c-ls-wide-button-min-width: 280px;
    --slds-c-button-line-height: 0.875rem;
    --c-ls-button-letter-spacing: -0.0275rem;
    --c-ls-checkout-section-padding: 0.5rem 1.5rem;
    --c-ls-checkout-section-radius: 0.5rem;
    --c-ls-checkout-section-shadow: 0 4px 16px 0 rgba(47, 49, 50, 0.04);
    --c-ls-checkout-section-surface: #fff;
    --c-ls-checkout-section-title-icon-size: 1.5rem;
    --c-ls-checkout-section-title-icon-font-size: var(--dxp-s-body-font-size, var(--dxp-g-font-size-3));
    --c-ls-checkout-section-title-icon-radius: 50%;
    --c-ls-checkout-section-summary-icon-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0007 25.6666C12.3868 25.6666 10.8701 25.3603 9.45065 24.7478C8.03121 24.1353 6.79648 23.3041 5.74648 22.2541C4.69648 21.2041 3.86523 19.9694 3.25273 18.5499C2.64023 17.1305 2.33398 15.6138 2.33398 13.9999C2.33398 12.386 2.64023 10.8694 3.25273 9.44992C3.86523 8.03047 4.69648 6.79575 5.74648 5.74575C6.79648 4.69575 8.03121 3.8645 9.45065 3.252C10.8701 2.6395 12.3868 2.33325 14.0007 2.33325C15.6145 2.33325 17.1312 2.6395 18.5507 3.252C19.9701 3.8645 21.2048 4.69575 22.2548 5.74575C23.3048 6.79575 24.1361 8.03047 24.7486 9.44992C25.3611 10.8694 25.6673 12.386 25.6673 13.9999C25.6673 15.6138 25.3611 17.1305 24.7486 18.5499C24.1361 19.9694 23.3048 21.2041 22.2548 22.2541C21.2048 23.3041 19.9701 24.1353 18.5507 24.7478C17.1312 25.3603 15.6145 25.6666 14.0007 25.6666ZM14.0007 23.3333C16.6062 23.3333 18.8132 22.4291 20.6215 20.6208C22.4298 18.8124 23.334 16.6055 23.334 13.9999C23.334 11.3944 22.4298 9.18742 20.6215 7.37909C18.8132 5.57075 16.6062 4.66659 14.0007 4.66659C11.3951 4.66659 9.18815 5.57075 7.37982 7.37909C5.57148 9.18742 4.66732 11.3944 4.66732 13.9999C4.66732 16.6055 5.57148 18.8124 7.37982 20.6208C9.18815 22.4291 11.3951 23.3333 14.0007 23.3333Z" fill="%23814EFA"/><path d="M19.1553 10.3496C19.3744 10.3497 19.5687 10.4268 19.7314 10.5762C19.8956 10.7269 19.9844 10.9149 19.9844 11.1318C19.9843 11.3486 19.8955 11.5359 19.7314 11.6865L13.502 17.4229V17.4238C13.339 17.5734 13.1442 17.6504 12.9248 17.6504C12.7054 17.6504 12.5106 17.5734 12.3477 17.4238L9.42773 14.7422C9.26259 14.5905 9.17749 14.4012 9.18457 14.1826C9.19166 13.9677 9.28229 13.7815 9.44531 13.6318C9.6091 13.4816 9.80668 13.4053 10.0303 13.4053C10.2539 13.4053 10.4514 13.4816 10.6152 13.6318L10.6162 13.6328L12.9238 15.7676L18.5781 10.5762C18.741 10.4267 18.936 10.3496 19.1553 10.3496Z" fill="%23814EFA" stroke="%23814EFA" stroke-width="0.3"/></svg>');
    --c-ls-checkout-cart-proceed-margin-top: 1.5rem;
    --c-ls-checkout-cart-proceed-radius: 1.5rem;
    --sds-c-modal-radius-border: 0;
    --c-ls-modal-container-width: 520px;
    --c-ls-modal-container-max-width: calc(100dvw - 4rem);
    --c-ls-modal-header-padding: 2rem 3.5rem 0;
    --c-ls-modal-header-padding-mobile: 3rem 1.5rem 0;
    --c-ls-modal-footer-padding: 1rem 3.5rem 2rem;
    --c-ls-modal-footer-padding-mobile: 1rem 1.5rem 2rem;
    --c-ls-modal-footer-button-min-width: 180px;
    --c-ls-modal-footer-gap: 0.75rem;
    --c-ls-modal-body-padding: 1rem 3.5rem;
    --c-ls-modal-close-offset-x: -1rem;
    --c-ls-modal-close-offset-y: 3.3rem;
    --c-ls-checkout-cart-combobox-input-border-bottom: var(--c-ls-form-border-width) solid var(--c-ls-form-border-color)
}

/* FORM */
lightning-input.slds-form-element.slds-has-error div[part="input-text"],
lightning-input.slds-form-element[invalid] div[part="input-text"],
lightning-lookup-address.slds-form-element.slds-has-error div[part="input-text"],
lightning-lookup-address.slds-form-element[invalid] div[part="input-text"],
lightning-input.slds-form-element.slds-has-error::part(input-text),
lightning-input.slds-form-element[invalid]::part(input-text) {
    border: 0;
}

/* Cross icon before error messages */
.slds-has-error .slds-form-element__help {
    margin-bottom: var(--c-ls-form-error-spacing-bottom);
}

.slds-has-error .slds-form-element__help:before {
    content: '';
    background: var(--c-ls-form-error-icon-image) no-repeat center / contain;
    display: inline-block;
    width: var(--c-ls-form-error-icon-size);
    height: var(--c-ls-form-error-icon-size);
    vertical-align: text-bottom;
    margin-right: var(--c-ls-form-error-icon-gap);
}

/* Styles for input fields and dropdown */
lightning-combobox.slds-has-error [part="combobox"] lightning-base-combobox .slds-combobox__form-element,
lightning-combobox.slds-has-error::part(input-button) {
    border: 0;
    border-bottom: calc(var(--dxp-s-form-element-width-border)) solid var(--c-ls-destructive-color);
}

.slds-form-element[class] .slds-form-element__control[class] :is(.slds-input, .slds-combobox__input[class]) {
    border-bottom: var(--c-ls-form-border-width) solid var(--c-ls-form-border-color);
    padding-left: var(--c-ls-input-padding-left, 0);
}

.slds-form-element.slds-has-error[class] .slds-form-element__control[class] :is(.slds-input, .slds-combobox__input[class]) {
    border: 0;
    border-bottom: var(--c-ls-form-border-width-error) solid var(--c-ls-destructive-color);
}

lightning-input label.slds-form-element__label,
lightning-combobox label.slds-form-element__label,
lightning-combobox::part(label),
lightning-input::part(label) {
    left: var(--c-ls-input-padding-left, 0);
}

lightning-input.slds-form-element .slds-input,
lightning-lookup-address.slds-form-element .slds-input,
lightning-input.slds-form-element::part(input) {
    padding-left: var(--c-ls-input-padding-left, 0)
}

.ls-footer[class]:has(.columns-content) {
    @media (width < 1024px) {
        .columns-content[class] {
            flex-direction: column-reverse;
        }

        .ls-footer-text {
            text-align: center;
            display: block;

            .dxp-text-body-small {
                border-top: var(--c-ls-form-border-width) solid var(--c-ls-footer-border-color);
                padding-top: var(--c-ls-footer-padding-top) !important;
                display: inline-block;
            }
        }
    }
}

.ls-footer-links commerce-link-list ul[class] {
    display: flex;
    gap: var(--c-ls-footer-link-gap);
}

.ls-footer-links {
    text-align: right;
    font-weight: var(--dxp-s-body-small-font-weight);
    font-style: var(--dxp-s-body-small-font-style);
    font-size: var(--dxp-s-body-small-font-size);
    font-family: var(--dxp-s-body-small-font-family);
}

.ls-footer-list {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--lwc-spacingMedium, 1rem);
}

.slds-button {
    --dxp-s-button-font-size: 14px;
    letter-spacing: var(--c-ls-button-letter-spacing);
}

.wide-button .slds-button {
    min-width: var(--c-ls-wide-button-min-width);
}

/* Checkout */
.ls-checkout-section {
    --com-c-checkout-section-accordion-separators-border-bottom-width: 0;

    padding: var(--c-ls-checkout-section-padding);
    border-radius: var(--c-ls-checkout-section-radius);
    box-shadow: var(--c-ls-checkout-section-shadow);
    display: block;
    background: var(--c-ls-checkout-section-surface);

    fieldset.separators.summary[class] {
        padding: var(--dxp-g-spacing-medium) 0;
        border: 0;
        margin: 0;
    }

    commerce_unified_checkout-checkout-section-accordion {
        [slot="proceed"] {
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
            position: relative;
        }
    }

    .ls-checkout-section__title,
    h3.summary-title[class],
    h2.collapsed-title[class] {
        text-transform: uppercase;
        font-size: var(--dxp-s-text-heading-small-font-size) !important;
    }

    h3.summary-title[class] {
        padding-bottom: var(--dxp-s-column-spacer-size)
    }

    h2.collapsed-title[class]:not(:empty):before,
    h3.summary-title[class]:not(:empty):before,
    .ls-checkout-section__title:before {
        content: '';
        background: var(--dxp-g-brand);
        color: var(--dxp-g-brand-contrast);
        width: var(--c-ls-checkout-section-title-icon-size);
        height: var(--c-ls-checkout-section-title-icon-size);
        text-align: center;
        line-height: var(--c-ls-checkout-section-title-icon-size);
        border-radius: var(--c-ls-checkout-section-title-icon-radius);
        display: inline-block;
        vertical-align: text-bottom;
        font-size: var(--c-ls-checkout-section-title-icon-font-size);
    }

    h3.summary-title[class]:not(:empty):before {
        background: var(--c-ls-checkout-section-summary-icon-image);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    h2.collapsed-title[class]:not(:empty):before {
        background: var(--com-c-label-text-color);
    }

    &.ls-checkout-section--cart {

        div[slot="proceed"] {
            margin-top: var(--c-ls-checkout-cart-proceed-margin-top);
            border-radius: var(--c-ls-checkout-cart-proceed-radius);
        }

        h2.collapsed-title[class]:not(:empty):before,
        .ls-checkout-section__title:before {
            content: '1'
        }
    }

    &.ls-checkout-section--user-info {

        h2.collapsed-title[class]:not(:empty):before,
        .ls-checkout-section__title:before {
            content: '2'
        }
    }

    &.ls-checkout-section--corporate-address {

        h2.collapsed-title[class]:not(:empty):before,
        .ls-checkout-section__title:before {
            content: '3'
        }
    }

    &.ls-checkout-section--payment {

        h2.collapsed-title[class]:not(:empty):before,
        .ls-checkout-section__title:before {
            content: '4'
        }
    }
}

/* Modals */
.slds-modal_small .slds-modal__container:has(.ls-confirmation-modal__header) {
    width: var(--c-ls-modal-container-width);
    min-width: 0;
    max-width: var(--c-ls-modal-container-max-width);
}

.slds-modal__header {
    border-bottom: 0;
    padding: var(--c-ls-modal-header-padding);

    @media (width < 768px) {
        padding: var(--c-ls-modal-header-padding-mobile);
    }
}

.slds-modal__footer {
    border-top: 0;
    text-align: center;
    padding: var(--c-ls-modal-footer-padding);

    @media (width < 768px) {
        padding: var(--c-ls-modal-footer-padding-mobile);
    }

    :is(button, a).slds-button[class] {
        min-width: var(--c-ls-modal-footer-button-min-width);
        text-align: center;
        justify-content: center;
    }
}

.ls-confirmation-modal__footer .slds-modal__footer {
    display: flex;
    gap: var(--c-ls-modal-footer-gap);
    justify-content: center;

    @media (width < 768px) {
        flex-direction: column;

        :is(button, a).slds-button[class] {
            margin: 0;
            width: 100%;
        }
    }
}

.ls-confirmation-modal__content .slds-modal__content[part="modal-body"] {
    min-height: 0 !important;
    padding: var(--c-ls-modal-body-padding);
}

.slds-modal__container .slds-modal__close {
    z-index: 1;

    .slds-button.slds-button_icon {
        transform: translate(var(--c-ls-modal-close-offset-x), var(--c-ls-modal-close-offset-y));
    }
}

/* Checkout Payment */
[sf-payments-checkout] {
    .sfpp-theme-cgx {
        background: transparent;

        .sfpp-accordion__list-item {
            --sfpp-card-border: none;
        }

        .slds-accordion__summary {
            padding: 1rem;
            background: transparent;
            border: 1px solid var(--dxp-g-brand);
            border-radius: .5rem;

            * {
                text-transform: capitalize;
                font-size: 1.125rem;
                vertical-align: middle;
            }
        }

        .sfpp-accordion__list-item {
            background: transparent;
            padding: 0;
            border: 0;
        }

        .sfpp-radio [type=radio]:checked+.sfpp-radio__label .sfpp-radio_faux:after {
            background: var(--dxp-g-root);
        }

        .slds-radio [type="radio"]:checked+.slds-radio--faux,
        .slds-radio [type="radio"]:checked+.slds-radio__label .slds-radio--faux,
        .slds-radio [type="radio"]:checked+.slds-radio__label .slds-radio_faux,
        .slds-radio [type="radio"]:checked+.slds-radio_faux,
        .slds-radio [type="radio"]:checked~.slds-radio--faux,
        .slds-radio [type="radio"]:checked~.slds-radio_faux {
            background: var(--dxp-g-brand);
        }
    }
}

commerce-order-summary-error-message .slds-button.slds-button_brand {
    display: none !important;
}

/* My Account Profile / Password */
commerce-my-account-profile,
commerce-my-account-password {
    --sds-c-card-body-spacing-block-start: 0.5rem;
    --sds-c-card-body-spacing-block-end: 0.5rem;
}

commerce-my-account-profile + commerce-my-account-password {
    margin-top: -0.75rem;
}

commerce-my-account-password lightning-card .slds-card__body,
commerce-my-account-password lightning-card .slds-card__body_inner,
commerce-my-account-password lightning-card .slds-card__body .slds-grid,
commerce-my-account-password lightning-card .slds-card__body .slds-media,
commerce-my-account-password lightning-card .slds-card__body [class*='password'] {
    margin-left: 0;
    padding-left: 0;
}