/* =========================================================





   EveryCommerce Account Modal





   ========================================================= */











html.everycommerce-account-modal-open,





body.everycommerce-account-modal-open {





    overflow: hidden;





}











.everycommerce-account-modal {





    position: fixed;





    inset: 0;





    z-index: 999999;





    display: flex;





    align-items: center;





    justify-content: center;





    padding: 24px;





    background: rgba(0, 0, 0, var(--ec-account-overlay-opacity, 0.19));





    -webkit-backdrop-filter: blur(4px);





    backdrop-filter: blur(4px);





    opacity: 0;





    visibility: hidden;





    pointer-events: none;





    transition: opacity 0.22s ease, visibility 0.22s ease;





}











.everycommerce-account-modal.is-visible {





    opacity: 1;





    visibility: visible;





    pointer-events: auto;





}











.everycommerce-account-modal__dialog {





    position: relative;





    width: 100%;





    max-width: var(--ec-account-width, 440px);





    padding: 26px 30px 30px;





    border: 1px solid var(--ec-account-border, #e2e2df);





    border-radius: var(--ec-account-radius, 24px);





    background: var(--ec-account-dialog-bg, #fff);





    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);





    transform: translateY(8px) scale(0.98);





    transition: transform 0.22s ease;





}











.everycommerce-account-modal.is-visible .everycommerce-account-modal__dialog {





    transform: translateY(0) scale(1);





}











.everycommerce-account-modal__segment {





    display: grid;





    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);





    padding: 4px;





    margin: 4px 0 24px;





    border-radius: 12px;





    background: color-mix(in srgb, var(--ec-account-text, #111) 7%, var(--ec-account-dialog-bg, #fff));





}











.everycommerce-account-modal__segment-button {





    min-height: 44px;





    padding: 8px 12px;





    border: 0;





    border-radius: 9px;





    background: transparent;





    color: var(--ec-account-muted, #6b6b6b);





    font-size: 13px;





    line-height: 1;





    font-weight: 600;





    cursor: pointer;





    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;





}











.everycommerce-account-modal__segment-button.is-active {





    background: var(--ec-account-dialog-bg, #fff);





    color: var(--ec-account-text, #111);





    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);





}











.everycommerce-account-modal__view,





.everycommerce-account-modal__panel {





    display: none;





}











.everycommerce-account-modal__view.is-active,





.everycommerce-account-modal__panel.is-active {





    display: block;





}











.everycommerce-account-modal__heading {





    margin-bottom: 26px;





}











.everycommerce-account-modal__heading h2,





.everycommerce-account-success h2 {





    margin: 0 0 9px;





    color: var(--ec-account-text, #111);





    font-size: 24px;





    line-height: 1.12;





    font-weight: 700;





    letter-spacing: -0.04em;





}











.everycommerce-account-modal__heading p,





.everycommerce-account-success p {





    margin: 0;





    color: var(--ec-account-muted, #666);





    font-size: 14px;





    line-height: 1.5;





}











.everycommerce-account-form__field {





    margin-bottom: 18px;





}











.everycommerce-account-form__field label {





    display: block;





    margin-bottom: 7px;





    color: var(--ec-account-text, #222);





    font-size: 12px;





    line-height: 1.3;





    font-weight: 600;





}











.everycommerce-account-form__field input {





    width: 100%;





    height: 50px;





    box-sizing: border-box;





    padding: 0 15px;





    border: 1px solid var(--ec-account-border, #d8d8d4);





    border-radius: 11px;





    outline: none;





    background: var(--ec-account-input-bg, #fff);





    color: var(--ec-account-text, #111);





    font-family: inherit;





    font-size: 15px;





    transition: border-color 0.16s ease, box-shadow 0.16s ease;





}











.everycommerce-account-modal .everycommerce-account-form__field input:focus,


.everycommerce-account-modal .everycommerce-account-form__field input:focus-visible {


    outline: none !important;


    outline-offset: 0 !important;


    border-color: var(--ec-account-border, #d8d8d4) !important;


    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06) !important;


}











.everycommerce-account-form__label-row {





    display: flex;





    align-items: center;





    justify-content: space-between;





    gap: 16px;





}











.everycommerce-account-modal .everycommerce-account-form__label-row a {





    margin-bottom: 7px;





    color: var(--ec-account-muted, #444);





    font-size: 12px;





    line-height: 1.3;





    font-weight: 500;





    text-decoration: none;





}











.everycommerce-account-modal .everycommerce-account-form__label-row a:hover {





    color: var(--ec-account-text, #111);





}











.everycommerce-account-form__password-wrap {





    position: relative;





}











.everycommerce-account-form__password-wrap input {





    padding-right: 66px;





}











.everycommerce-account-form__password-toggle {





    position: absolute;





    top: 50%;





    right: 13px;





    transform: translateY(-50%);





    padding: 4px;





    border: 0;





    background: transparent;





    color: var(--ec-account-muted, #666);





    font-size: 12px;





    font-weight: 600;





    cursor: pointer;





}











.everycommerce-account-form__remember {





    display: inline-flex;





    align-items: center;





    gap: 9px;





    margin: 0 0 20px;





    color: var(--ec-account-muted, #555);





    font-size: 12px;





    cursor: pointer;





}











.everycommerce-account-form__remember input {





    appearance: none;





    -webkit-appearance: none;





    position: relative;





    width: 16px;





    height: 16px;





    margin: 0;





    border: 1px solid #b8b8b4;





    border-radius: 5px;





    background: var(--ec-account-input-bg, #fff);





    cursor: pointer;





    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;





}











.everycommerce-account-form__remember input:hover {





    border-color: var(--ec-account-muted, #777);





}











.everycommerce-account-form__remember input:focus-visible {





    outline: none;





    border-color: var(--ec-account-accent, #555);





    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec-account-accent, #111) 12%, transparent);





}











.everycommerce-account-form__remember input:checked {





    border-color: var(--ec-account-accent, #111);





    background: var(--ec-account-accent, #111);





}











.everycommerce-account-form__remember input:checked::after {





    content: "";





    position: absolute;





    left: 4px;





    top: 1px;





    width: 5px;





    height: 9px;





    border: solid var(--ec-account-accent-text, #fff);





    border-width: 0 1.5px 1.5px 0;





    transform: rotate(45deg);





}











.everycommerce-account-form__submit {





    position: relative;





    width: 100%;





    min-height: 50px;





    padding: 12px 18px;





    border: 1px solid var(--ec-account-accent, #111);





    border-radius: 11px;





    background: var(--ec-account-accent, #111);





    color: var(--ec-account-accent-text, #fff) !important;





    -webkit-text-fill-color: var(--ec-account-accent-text, #fff) !important;





    font-family: inherit;





    font-size: 14px;





    line-height: 1;





    font-weight: 650;





    cursor: pointer;





    transition: background 0.17s ease, opacity 0.17s ease, transform 0.12s ease;





}











.everycommerce-account-form__submit:hover {





    background: var(--ec-account-accent, #111);





    filter: brightness(0.9);





}











.everycommerce-account-form__submit:active {





    transform: scale(0.99);





}











.everycommerce-account-form__submit.is-loading {





    pointer-events: none;





}











.everycommerce-account-form__submit.is-loading .everycommerce-account-form__button-label {





    opacity: 0;





}











.everycommerce-account-form__spinner {





    position: absolute;





    top: 50%;





    left: 50%;





    display: none;





    width: 17px;





    height: 17px;





    margin: -8.5px 0 0 -8.5px;





    border: 2px solid color-mix(in srgb, var(--ec-account-accent-text, #fff) 35%, transparent);





    border-top-color: var(--ec-account-accent-text, #fff);





    border-radius: 50%;





    animation: everycommerce-account-spinner 0.7s linear infinite;





}











.everycommerce-account-form__submit.is-loading .everycommerce-account-form__spinner {





    display: block;





}











@keyframes everycommerce-account-spinner {





    to {





        transform: rotate(360deg);





    }





}











.everycommerce-account-form__message {





    display: none;





    margin: 0 0 18px;





    padding: 11px 13px;





    border: 1px solid #e1c7c7;





    border-radius: 9px;





    background: #fff7f7;





    color: #7d2626;





    font-size: 12px;





    line-height: 1.45;





}











.everycommerce-account-form__message.is-visible {





    display: block;





}

















.everycommerce-account-form__message.is-info {





    border-color: var(--ec-account-border, #d9d9d5);





    background: color-mix(in srgb, var(--ec-account-text, #111) 5%, var(--ec-account-dialog-bg, #fff));





    color: var(--ec-account-muted, #444);





}

















.everycommerce-account-form__note {





    margin: -4px 0 20px;





    color: var(--ec-account-muted, #777);





    font-size: 11px;





    line-height: 1.45;





}











.everycommerce-account-modal__switch {





    margin-top: 22px;





    color: var(--ec-account-muted, #777);





    font-size: 12px;





    line-height: 1.4;





    text-align: center;





}











.everycommerce-account-modal__switch button {





    padding: 0;





    border: 0;





    background: none;





    color: var(--ec-account-text, #111);





    font-family: inherit;





    font-size: inherit;





    font-weight: 650;





    cursor: pointer;





}











.everycommerce-account-success {





    padding: 34px 4px 6px;





    text-align: center;





}











.everycommerce-account-success__icon {





    display: flex;





    align-items: center;





    justify-content: center;





    width: 54px;





    height: 54px;





    margin: 0 auto 22px;





    border-radius: 50%;





    background: var(--ec-account-accent, #111);





    color: var(--ec-account-accent-text, #fff);





}











.everycommerce-account-success__icon svg {





    width: 24px;





    height: 24px;





}











.everycommerce-account-success p {





    margin-bottom: 27px;





}











@media only screen and (max-width: 768px) {





    .everycommerce-account-modal {





        padding: 16px;





    }











    .everycommerce-account-modal__dialog {





        max-width: 360px;





        padding: 22px 22px 24px;





        border-radius: var(--ec-account-radius, 20px);





    }











    .everycommerce-account-modal__segment {





        margin-right: 0;





        margin-bottom: 22px;





    }











    .everycommerce-account-modal__heading h2,





    .everycommerce-account-success h2 {





        font-size: 22px;





    }





}

















/* EveryCommerce: suppress browser/theme autofocus ring inside account modal only. */


html body .everycommerce-account-modal .everycommerce-account-form__field input:focus,


html body .everycommerce-account-modal .everycommerce-account-form__field input:focus-visible,


html body .everycommerce-account-modal .everycommerce-account-form__field input:-moz-focusring {


    outline: 0 !important;


    outline-width: 0 !important;


    outline-style: none !important;


    outline-color: transparent !important;


    outline-offset: 0 !important;


    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.05) !important;


    border-color: var(--ec-account-border, #d8d8d4) !important;


}