.customers-forgot-password__container { min-height: 64vh; padding: 76px 0 96px; color: #292426; background: #ffffff !important; } .customers-forgot-password-section, .customers-forgot-password-section * { box-sizing: border-box; } .customers-forgot-password-section { --forgot-primary: #83203f; --forgot-secondary: #9c4b64; --forgot-text: #292426; --forgot-muted: #776f72; --forgot-border: #e8c8ce; --forgot-border-strong: #d9aeb8; --forgot-soft: #fff8fa; --forgot-button: #f7dade; --forgot-button-active: #b0a387; --forgot-serif: Georgia, "Times New Roman", serif; --forgot-sans: var(--font-body-family), Arial, Helvetica, sans-serif; display: block; width: 100%; max-width: 760px; margin: 0 auto; color: var(--forgot-text); }  .customers-forgot-password__hero { max-width: 660px; margin: 0 auto 54px; text-align: center; } .customers-forgot-password__eyebrow { margin: 0 0 15px; font-family: var(--forgot-sans); font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 0.18em; color: var(--forgot-secondary); text-transform: uppercase; } .customers-forgot-password__title { margin: 0; font-family: var(--forgot-serif); font-size: clamp(36px, 5vw, 52px); font-style: italic; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; color: var(--forgot-primary); } .customers-forgot-password__intro { max-width: 600px; margin: 18px auto 0; font-family: var(--forgot-sans); font-size: 14px; font-weight: 400; line-height: 1.75; color: var(--forgot-muted); }  .customers-forgot-password__form-sections { border-top: 1px solid var(--forgot-border-strong); } .customers-forgot-password__form-section { padding: 0 0 34px; border-bottom: 1px solid var(--forgot-border-strong); } .customers-forgot-password__section-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; padding: 25px 0; border-bottom: 1px solid var(--forgot-border); } .customers-forgot-password__section-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: var(--forgot-serif); font-size: 12px; font-style: italic; line-height: 1; color: var(--forgot-primary); background: var(--forgot-soft); border: 1px solid var(--forgot-border); border-radius: 50%; } .customers-forgot-password__section-copy h2 { margin: 1px 0 7px; font-family: var(--forgot-sans); font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0.11em; color: var(--forgot-primary); text-transform: uppercase; } .customers-forgot-password__section-copy p { margin: 0; font-family: var(--forgot-serif); font-size: 14px; font-style: italic; font-weight: 400; line-height: 1.6; color: var(--forgot-muted); } .customers-forgot-password__identity-fields, .customers-forgot-password__password-fields { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; }  .customers-forgot-password__tab { padding-top: 28px; } .customers-forgot-password__tab ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; margin: 0; list-style: none; background: var(--forgot-soft); border: 1px solid var(--forgot-border); } .customers-forgot-password__tab li { margin: 0; } .customers-forgot-password__tab button { width: 100%; min-height: 42px; padding: 10px 16px; font-family: var(--forgot-sans); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; color: var(--forgot-muted); text-transform: uppercase; cursor: pointer; appearance: none; background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; transition: color 180ms ease, background-color 180ms ease; } .customers-forgot-password__tab li.active button { color: #ffffff; background: var(--forgot-primary); } .customers-forgot-password__tab button::before, .customers-forgot-password__tab button::after { display: none !important; content: none !important; } .customers-forgot-password__method-note { display: none; margin: 0 0 -4px; font-family: var(--forgot-sans); font-size: 12px; line-height: 1.6; color: var(--forgot-muted); } .customers-forgot-password__shown-in-email, .customers-forgot-password__shown-in-mobile { display: none !important; } .customers-forgot-password-section.email .customers-forgot-password__shown-in-email, .customers-forgot-password-section.mobile .customers-forgot-password__shown-in-mobile { display: flex !important; } .customers-forgot-password-section.email p.customers-forgot-password__shown-in-email, .customers-forgot-password-section.mobile p.customers-forgot-password__shown-in-mobile { display: block !important; }  .customers-forgot-password-section .field { width: 100%; min-height: 58px; margin: 0 !important; color: var(--forgot-text); background: #ffffff !important; border-radius: 0 !important; box-shadow: none !important; } .customers-forgot-password-section .field::after { border: 1px solid var(--forgot-border) !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color 180ms ease; } .customers-forgot-password-section .field:hover::after { border-color: var(--forgot-border-strong) !important; border-width: 1px !important; } .customers-forgot-password-section .field:focus-within::after { border-color: var(--forgot-button-active) !important; border-width: 1px !important; } .customers-forgot-password-section .field__inner { min-width: 0; } .customers-forgot-password-section .field__input { width: 100%; min-height: 58px; padding: 24px 16px 10px !important; font-family: var(--forgot-sans); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--forgot-text); } .customers-forgot-password-section .field__label { inset-inline-start: 16px; font-family: var(--forgot-sans); font-size: 13px; color: var(--forgot-muted); } .customers-forgot-password-section .field__input:focus~.field__label, .customers-forgot-password-section .field__input:not(:placeholder-shown)~.field__label, .customers-forgot-password-section .field__input:-webkit-autofill~.field__label { color: var(--forgot-secondary); } .customers-forgot-password-section .field__input:-webkit-autofill, .customers-forgot-password-section .field__input:-webkit-autofill:hover, .customers-forgot-password-section .field__input:-webkit-autofill:focus, .customers-forgot-password-section .field__input:-webkit-autofill:active { box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: var(--forgot-text); } .customers-forgot-password-section .field__suffix { position: relative; z-index: 2; align-items: center; padding: 6px 14px 6px 8px; }  .customers-forgot-password-section theme-input-phone .country-select { min-width: 78px; } .customers-forgot-password-section theme-input-phone .country-select__trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--forgot-sans); font-size: 12px; color: var(--forgot-text); } .customers-forgot-password-section theme-input-phone .country-select__trigger svg { width: 11px; height: 11px; }  .customers-forgot-password__verify-code .field__suffix { min-width: 116px; justify-content: flex-end; } .customers-forgot-password__verify-code .input-verify-code__button { min-width: 88px; padding: 7px 0; font-family: var(--forgot-sans); font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; color: var(--forgot-primary) !important; text-transform: uppercase; text-decoration: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customers-forgot-password__verify-code .input-verify-code__button[disabled] { color: var(--forgot-muted) !important; cursor: default; opacity: 0.7; }  .customers-forgot-password-section .input-password__button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--forgot-muted) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customers-forgot-password-section .input-password__button svg { width: 17px; height: 17px; } .customers-forgot-password-section .input-verify-code__button::before, .customers-forgot-password-section .input-verify-code__button::after, .customers-forgot-password-section .input-password__button::before, .customers-forgot-password-section .input-password__button::after { display: none !important; content: none !important; } .customers-forgot-password__password-rule { margin: -3px 0 0; font-family: var(--forgot-sans); font-size: 11px; line-height: 1.6; color: var(--forgot-muted); }  .customers-forgot-password__error-message { display: none; width: 100%; margin: 24px 0 0; padding: 14px 16px; font-family: var(--forgot-sans); font-size: 12px; line-height: 1.6; color: #7b2537; background: #fff2f4; border: 1px solid #e8bec6; } .customers-forgot-password__error-message:not(:empty) { display: block; } .customers-forgot-password-section .field--error::after { border-color: #b85767 !important; border-width: 1px !important; }  .customers-forgot-password__actions { padding-top: 30px; } .customers-forgot-password__submit { position: relative; width: 100%; min-height: 56px; padding: 16px 24px; font-family: var(--forgot-sans); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; color: var(--forgot-primary) !important; text-transform: uppercase; cursor: pointer; appearance: none; background: var(--forgot-button) !important; border: 0 !important; border-radius: 0 !important; outline: 0; box-shadow: none !important; transition: color 180ms ease, background-color 180ms ease; } .customers-forgot-password__submit:hover, .customers-forgot-password__submit:focus-visible, .customers-forgot-password__submit:active { color: #ffffff !important; background: var(--forgot-button-active) !important; } .customers-forgot-password__submit::before, .customers-forgot-password__submit::after { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; } .customers-forgot-password__secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; font-family: var(--forgot-sans); font-size: 10px; line-height: 1.5; color: var(--forgot-muted); text-align: center; } .customers-forgot-password__secure-note svg { flex: 0 0 auto; width: 12px; height: 12px; }  .customers-forgot-password__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 28px; font-family: var(--forgot-sans); font-size: 12px; line-height: 1.6; color: var(--forgot-muted); text-align: center; } .customers-forgot-password__footer a, .customers-forgot-password__support a { color: var(--forgot-primary) !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 4px; } .customers-forgot-password__support { margin: 13px 0 0; font-family: var(--forgot-serif); font-size: 12px; font-style: italic; line-height: 1.6; color: var(--forgot-muted); text-align: center; }  @media (max-width: 959px) { .customers-forgot-password__container { padding: 52px 0 72px; } .customers-forgot-password__hero { margin-bottom: 42px; } } @media (max-width: 575px) { .customers-forgot-password__container { padding: 38px 0 58px; } .customers-forgot-password__hero { margin-bottom: 34px; } .customers-forgot-password__eyebrow { margin-bottom: 12px; font-size: 9px; } .customers-forgot-password__title { font-size: 34px; } .customers-forgot-password__intro { margin-top: 15px; font-size: 13px; line-height: 1.7; } .customers-forgot-password__section-head { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 21px 0; } .customers-forgot-password__section-number { width: 30px; height: 30px; font-size: 11px; } .customers-forgot-password__section-copy h2 { font-size: 10px; } .customers-forgot-password__section-copy p { font-size: 13px; } .customers-forgot-password__tab, .customers-forgot-password__identity-fields, .customers-forgot-password__password-fields { padding-top: 22px; } .customers-forgot-password__tab button { min-height: 40px; padding-inline: 10px; font-size: 9px; } .customers-forgot-password-section .field, .customers-forgot-password-section .field__input { min-height: 54px; } .customers-forgot-password-section .field__input, .customers-forgot-password-section .field__label { font-size: 12px; } .customers-forgot-password__verify-code .field__suffix { min-width: 100px; padding-right: 10px; } .customers-forgot-password__verify-code .input-verify-code__button { min-width: 76px; font-size: 9px; } .customers-forgot-password__submit { min-height: 52px; font-size: 10px; } }