.customer-auth {
  --auth-porcelain: rgb(247 248 245 / 94%);
  color: var(--df-deep);
  font: 400 16px/24px var(--df-font);
}
.customer-auth [hidden] { display: none !important; }
.customer-auth-intro, .customer-auth-head, .customer-auth-sent-label, .customer-auth-success img, .customer-auth-account-desktop { display: none; }
.customer-auth-page > .df-site-footer { display: none; }
.customer-auth-standalone { width: min(100% - 32px, 536px); margin-inline: auto; padding-bottom: 32px; }
.customer-auth-back { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 24px; text-decoration: none; }
.customer-auth-back:hover, .customer-auth-privacy a:hover, .customer-auth-consent a:hover { text-decoration: underline; }
.customer-auth-content, .customer-auth-fields, .customer-auth-success { display: grid; align-content: start; gap: 16px; min-width: 0; }
.customer-auth-heading { display: grid; gap: 16px; }
.customer-auth-heading h1, .customer-auth-promise { margin: 0; font: 400 28px/36px var(--df-font); }
.customer-auth p { margin: 0; }
.customer-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px; border-radius: 26px; background: var(--df-soft); }
.customer-auth-tabs button { min-height: 44px; padding: 0 6px; border: 1px solid transparent; border-radius: 22px; background: none; color: inherit; font: 500 16px/20px var(--df-font); cursor: pointer; }
.customer-auth-tabs button[aria-pressed="true"] { border-color: var(--df-soft-hover); background: var(--auth-porcelain); }
.customer-auth-tabs button:hover:not([aria-pressed="true"]) { background: var(--df-soft-hover); }
.customer-auth .customer-auth-action { width: 100%; min-height: 52px; }
.customer-auth .customer-auth-action:disabled { color: rgb(7 37 33 / 38%); }
.customer-auth input[readonly] { color: rgb(7 37 33 / 55%); }
.customer-auth-consent { display: flex; align-items: flex-start; gap: 12px; font: 400 13px/18px var(--df-font); }
.customer-auth-consent input { appearance: none; display: grid; place-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; border: 1px solid var(--df-green); border-radius: 6px; background: var(--df-glass); cursor: pointer; }
.customer-auth-consent input:checked { background: center no-repeat url("../order-success/check.svg"), var(--df-soft); }
.customer-auth-consent label { cursor: pointer; }
.customer-auth-consent a, .customer-auth-privacy a { text-decoration: none; }
.customer-auth-privacy { font: 400 13px/18px var(--df-font); }
.customer-auth-code-actions { display: grid; gap: 16px; }
.customer-auth-code-actions button { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.customer-auth-code-actions button:not(:disabled):hover { text-decoration: underline; }
.customer-auth-code-actions button:disabled { cursor: default; }
.customer-auth[data-stage="code"] .customer-auth-phone-label,
.customer-auth[data-stage="success"] .customer-auth-tabs { display: none; }
.customer-auth[data-stage="code"] .customer-auth-sent-label { display: inline; }
.customer-auth-dialog { max-width: calc(100% - 32px); max-height: calc(100% - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: transparent; overscroll-behavior: contain; }
.customer-auth-dialog::backdrop { background: rgb(12 22 20 / 84%); backdrop-filter: blur(8px); }
body:has(.customer-auth-dialog[open]) { overflow: hidden; }
.customer-auth-dialog .customer-auth { background: var(--auth-porcelain); }
.customer-auth-dialog .customer-auth-content { padding: 24px; }
.customer-auth-dialog .customer-auth-head { display: flex; justify-content: space-between; align-items: center; }
.customer-auth-caption { font: 400 12px/16px var(--df-font); }
.customer-auth-close { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--df-cream); border-radius: 30px; background: var(--df-glass); }
.customer-auth-close:hover { background: var(--df-soft); }

@media (max-width: 767px) {
  .df-site.customer-auth-page .df-site-header { padding-inline: 24px; }
  .df-site.customer-auth-page .df-site-header::before { position: absolute; z-index: -1; inset: 12px 16px; border-radius: 34px; background: var(--df-glass); content: ""; }
  .df-site.customer-auth-page .df-header-center { top: 20px; right: 24px; }
}
@media (min-width: 1200px) {
  .customer-auth-page { background: #303937; }
  .customer-auth-page > .df-site-header { display: none; }
  .customer-auth-standalone { display: grid; place-items: center; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 16px; }
  .customer-auth-back { display: none; }
  .customer-auth-dialog { width: 1040px; border-radius: 36px; }
  .customer-auth {
    display: grid; grid-template-columns: 440fr 600fr; width: min(1040px, 100%);
    min-height: 760px; overflow: clip; border: 1px solid rgb(244 237 229 / 28%);
    border-radius: 36px; background: var(--auth-porcelain);
  }
  .customer-auth-intro { display: flex; align-items: end; padding: 24px; background: center / cover no-repeat url("bouquet.png"); }
  .customer-auth-intro > div { display: grid; width: 100%; gap: 12px; padding: 24px; border: 1px solid rgb(244 237 229 / 28%); border-radius: 30px; background: var(--auth-porcelain); backdrop-filter: blur(12px); }
  .customer-auth .customer-auth-content { padding: 32px; }
  .customer-auth .customer-auth-head { display: flex; justify-content: space-between; align-items: center; }
  .customer-auth-tabs { padding: 0; background: transparent; }
  .customer-auth-tabs button { border: 0; border-radius: 26px; background: var(--df-soft); }
  .customer-auth-tabs button[aria-pressed="true"] { background: var(--df-soft-pressed); }
  .customer-auth[data-stage="success"] .customer-auth-tabs { display: grid; }
  .customer-auth-account-mobile { display: none; }
  .customer-auth-account-desktop { display: inline; }
  .customer-auth-heading { gap: 8px; }
  .customer-auth-heading h1, .customer-auth-promise { font: 400 32px/40px var(--df-font); }
  .customer-auth .customer-auth-action { width: 228px; min-height: 60px; }
  .customer-auth-privacy { color: rgb(7 37 33 / 65%); }
  .customer-auth-code-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .customer-auth-code-actions button { min-height: 18px; font: 400 13px/18px var(--df-font); }
  .customer-auth-code-actions button:disabled { color: rgb(7 37 33 / 55%); }
  .customer-auth[data-stage="code"] .customer-auth-sent-label { display: none; }
  .customer-auth[data-stage="code"] .customer-auth-phone-label, .customer-auth-success img { display: inline; }
}