/* =============================================================
   Phase 42B — V3 auth supplement.
   Small helpers for auth forms/messages not present in the V3
   storefront base (login-form/error/notice/member panel/secondary btn).
   Uses V3 CSS custom properties. Scoped to auth markup.
   ============================================================= */

.login-form { display: flex; flex-direction: column; gap: 16px; }

.field-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

.login-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--green-softer, #f1f9ec);
  border: 1px solid var(--green-soft, #e4f4dc);
  color: var(--green-dark, #1f6a1a);
  font-size: 14px;
}

.login-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--sale, #c9453f);
  font-size: 14px;
}

.auth-message {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}
.auth-message-success {
  background: var(--green-softer, #f1f9ec);
  border: 1px solid var(--green-soft, #e4f4dc);
  color: var(--green-dark, #1f6a1a);
}
.auth-message-error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--sale, #c9453f);
}

.login-member-code-panel {
  border: 1px solid var(--line, #e4e7dd);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--card, #fff);
}
.login-member-code-panel summary { list-style: none; }
.login-member-code-panel summary::-webkit-details-marker { display: none; }

.btn-secondary {
  background: var(--green-soft, #e4f4dc);
  color: var(--green-dark, #1f6a1a);
  border: 1px solid var(--green-soft, #e4f4dc);
}
.btn-secondary:hover { background: var(--green-softer, #f1f9ec); }

/* Phase 42D-3B — password setup requirement hints + deferral link */
.pw-hints {
  list-style: none; margin: 2px 0 4px; padding: 0;
  font-size: 12.5px; color: var(--muted, #6b7280);
}
.pw-hints li { position: relative; padding-left: 22px; margin: 4px 0; transition: color .2s ease; }
.pw-hints li .pw-hint-mark { display: none; }
.pw-hints li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-soft, #cfe9c2);
  transition: background .2s ease, transform .2s ease;
}
/* Phase 42D-4 — live requirement met = green tick */
.pw-hints li.ok { color: var(--green-dark, #1f6a1a); font-weight: 600; }
.pw-hints li.ok::before {
  left: 0; top: 3px; width: 15px; height: 15px;
  background: var(--green, #2f8f27);
}
.pw-hints li.ok::after {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
/* Auth Runtime Phase 1 — durable onboarding context banner. Compact and static: it renders on
   every visit to mandatory password setup, not just the request straight after activation. */
.pw-context {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--green-softer, #eef7ea);
  border: 1px solid var(--green-soft, #cfe9c2); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
}
.pw-context-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--green-dark, #1f6a1a); color: #fff;
}
.pw-context-ico .ico { width: 15px; height: 15px; }
.pw-context b { display: block; font-size: 15px; color: var(--green-dark, #1f6a1a); }
.pw-context span:not(.pw-context-ico) { font-size: 14px; color: var(--ink, #1f2937); }

.pw-skip-form { margin-top: 14px; text-align: center; }
/* UX-COM-LEGACY-CREDENTIAL-SPACING-17B: a >=44px tap target that still reads as a quiet text link
   (no fill, no border, underlined); the label is centred in the taller box. */
.pw-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 8px;
  text-align: center;
  border: 0;
  background: none;
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.pw-skip:hover { color: var(--ink, #1f2937); }

/* COM-NAME-PASSWORD-GATE-AUDIT-CORRECTION-19A: the name gate's small Sign out link and the registrant prompt's inline
   "Remind me later" (a submit button styled as text) read as clear blue hyperlinks with a visible keyboard focus ring. */
.pw-signout { margin-top: 12px; }
.pw-text-link,
.pw-inline-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pw-inline-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.pw-text-link:hover,
.pw-inline-link:hover { color: #1e40af; }
.pw-text-link:focus-visible,
.pw-inline-link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 2px; }

/* Read-only account identity so password managers save the email as the username. */
.pw-account-field input[readonly] {
  background: var(--paper, #f7f7f5); color: var(--muted, #6b7280); cursor: default;
}
.pw-account-field .field-note { margin: 6px 0 0; font-size: 13px; color: var(--muted, #6b7280); }

/* Server-side save failure. Distinct from the live checklist below it: solid alert styling,
   sits between the fields and the requirements so it reads as the reason for the refusal. */
.pw-save-error {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 12px 14px; border-radius: 12px;
  background: #fdecea; border: 1px solid #f5c6c2;
  color: var(--sale, #c9453f); font-size: 14px;
}
.pw-save-error .ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.pw-save-error b { font-weight: 700; }

/* Vertical rhythm through the onboarding form: the account identity, the password pair, the
   server verdict and the checklist are separate steps and need to read as such. */
.pw-form .form-field + .form-field { margin-top: 14px; }
.pw-form .pw-save-error { margin-top: 18px; }
.pw-form .pw-hints { margin-top: 16px; }
.pw-form button[type="submit"] { margin-top: 20px; }
.pw-account-field { margin-bottom: 4px; }

/* UX-COM-LEGACY-CREDENTIAL-SPACING-17B (Mark, on the accepted COM-17A password states). Scoped to the
   password-setup page only: its states are the only ones with the .pw-security-pill / #pw-hints / .pw-skip /
   .pw-success markup, so account-name-setup (which shares .pw-form) is untouched.
   - Title: COM-17A baseline pill→h1 0px and h1→intro 6px; Mark asked for +10px above and +15px below. */
.auth-main .pw-security-pill + h1 { margin-top: 10px; }
.auth-main .pw-security-pill + h1 + .sub { margin-top: calc(6px + 15px); }
/* - Supporting rhythm: requirements → security note 8px, security note → Save password 16px. */
.pw-form .pw-hints ~ .pw-protected-note { margin-top: 8px; }
/* UX-COM-LEGACY-CREDENTIAL-NOTE-17C: decorative inline lock before the security note. The icon takes the note's
   own colour (currentColor) and size (em); centred on the first line, so a wrapped note keeps a hanging indent. */
.pw-protected-note small { display: inline-flex; align-items: flex-start; gap: 6px; line-height: 1.6; }
.pw-protected-note .pw-note-lock { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: 0.275em; }
.pw-form .pw-hints ~ .btn-primary[type="submit"] { margin-top: 16px; }
/* - "Remind me later" (and its request-3 / recovery / verification variants) groups with the primary action:
     the 44px box starts right under the button, so the visible gap to the label is ~13-14px. */
.pw-form .pw-skip-form .pw-skip { margin-top: 0; }
.pw-form .pw-skip-form,
.pw-form + .pw-skip-form { margin-top: 0; }
/* - Card sits clear of the header/category region (was 26px desktop; 0px at <=390px, where the later
     `.container { padding: 0 14px }` shorthand resets the page's top padding). */
section.container.page:has(.pw-security-pill, .pw-success) { padding-top: 30px; }

/* Success state — the button was sitting too close to the copy above it. */
.pw-success-cta { margin-top: 18px; }
.pw-success .sub { margin-top: 10px; }
.pw-success-alt { margin-top: 10px; }

/* Phone: #main renders at zoom 0.95 (v3-mobile-compact.css; 0.9 until DG-MOBILE-STOREFRONT-POLISH-20C), so the
   requested visible amounts are divided by 0.95 (+10px / +15px exact on screen, a 44px visible tap target,
   18px visible card gap). */
@media (max-width: 560px) {
  .auth-main .pw-security-pill + h1 { margin-top: calc(10px / 0.95); }
  .auth-main .pw-security-pill + h1 + .sub { margin-top: calc(6px + 15px / 0.95); }
  .pw-skip { min-height: calc(44px / 0.95); }
  section.container.page:has(.pw-security-pill, .pw-success) { padding-top: 20px; }
}

/* Compact support block on mandatory onboarding. */
.pw-help {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line, #e7e7e2); max-width: 420px;
}
.pw-help b { font-size: 15px; }
.pw-help .sub { margin: 4px 0 0; }
.pw-help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* Phase 42D-4 — centered result card body */
.auth-modal-sent .auth-sent-ico { display: grid; place-items: center; margin: 8px auto 12px; width: 72px; height: 72px; border-radius: 999px; background: var(--green-softer, #e8f5e6); color: var(--green-dark, #1f6a1a); }
.auth-modal-sent .auth-sent-ico .ico { width: 36px; height: 36px; }
.auth-modal-sent .auth-preview-debug { margin-top: 12px; font-size: 12px; color: var(--muted, #667); word-break: break-word; }
.mc-item.is-saving { opacity: 0.72; pointer-events: none; }
.auth-result--center { text-align: center; }
.auth-result--center .modal-eyebrow { justify-content: center; display: inline-flex; }
.auth-result--center .sub { margin-left: auto; margin-right: auto; max-width: 42ch; }
.auth-result--center .btn { display: inline-flex; }

/* Phase 42D-4 — shared animated auth-result icons */
.auth-anim { display: grid; place-items: center; margin: 4px auto 10px; }
.auth-anim svg { overflow: visible; }
.auth-anim .aa-ring {
  stroke: var(--green-soft, #cfe9c2); stroke-width: 3;
  stroke-dasharray: 277; stroke-dashoffset: 277;
  animation: aa-ring-draw .6s ease-out forwards;
}
.auth-anim [class^="aa-"]:not(.aa-ring) { stroke: var(--green-dark, #1f6a1a); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.auth-anim .aa-tick, .auth-anim .aa-env-check, .auth-anim .aa-acc-check {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: aa-draw .4s .5s ease-out forwards;
}
.auth-anim .aa-env-body, .auth-anim .aa-env-flap { stroke-width: 3.5; }
.auth-anim .aa-env { animation: aa-float 2.4s ease-in-out .9s infinite; transform-origin: 48px 50px; }
.auth-anim .aa-acc-head, .auth-anim .aa-acc-body { stroke-width: 3.5; opacity: 0; animation: aa-fade .4s .35s ease-out forwards; }
.auth-anim .aa-spark { stroke-width: 3.5; stroke-dasharray: 14; stroke-dashoffset: 14; }
.auth-anim .aa-spark-1 { animation: aa-draw .3s .6s ease-out forwards; }
.auth-anim .aa-spark-2 { animation: aa-draw .3s .72s ease-out forwards; }
.auth-anim .aa-spark-3 { animation: aa-draw .3s .84s ease-out forwards; }
@keyframes aa-ring-draw { to { stroke-dashoffset: 0; } }
@keyframes aa-draw { to { stroke-dashoffset: 0; } }
@keyframes aa-fade { to { opacity: 1; } }
@keyframes aa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .auth-anim .aa-ring, .auth-anim .aa-tick, .auth-anim .aa-env-check,
  .auth-anim .aa-acc-check, .auth-anim .aa-spark { animation: none; stroke-dashoffset: 0; }
  .auth-anim .aa-env { animation: none; }
  .auth-anim .aa-acc-head, .auth-anim .aa-acc-body { animation: none; opacity: 1; }
}

/* Phase 42D-3B — success tick animation */
.pw-success { text-align: center; padding: 10px 0 4px; }
.pw-success-check { display: inline-grid; place-items: center; margin-bottom: 8px; }
.pw-success-circle {
  stroke: var(--green-dark, #1f6a1a); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: pw-draw-circle .5s ease-out forwards;
}
.pw-success-tick {
  stroke: var(--green-dark, #1f6a1a); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: pw-draw-tick .35s .45s ease-out forwards;
}
@keyframes pw-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes pw-draw-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pw-success-circle, .pw-success-tick { animation: none; stroke-dashoffset: 0; }
}

/* ================================================================= */
/* Phase 42D-5 — login vs register modal differentiation             */
/* Login = magenta/berry "Welcome back". Register = green "Join".     */
/* ================================================================= */
.aside-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: rgba(255,255,255,.22); color: #fff; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; padding: 5px 11px;
  border-radius: 999px; margin-bottom: auto;
}
.aside-badge .ico { width: 13px; height: 13px; }

/* Login modal — magenta/berry tint */
.auth-modal--login .modal-aside {
  background: linear-gradient(155deg, rgba(142,21,102,.90), rgba(107,15,77,.94)), url("../img/v3/hero.png");
  background-size: cover; background-position: center;
}
.auth-modal--login .auth-modal-header .modal-eyebrow,
.auth-modal--login .auth-modal-header .auth-modal-eyebrow {
  background: var(--berry-soft, #f9e3f1); color: var(--berry-dark, #6b0f4d);
}
.auth-modal--login .auth-modal-header h2 em { color: var(--berry, #8e1566); }

/* Register modal — green tint */
.auth-modal--signup .modal-aside {
  background: linear-gradient(155deg, rgba(47,143,39,.90), rgba(31,106,26,.94)), url("../img/v3/hero.png");
  background-size: cover; background-position: center;
}
.auth-modal--signup .auth-modal-header .modal-eyebrow,
.auth-modal--signup .auth-modal-header .auth-modal-eyebrow {
  background: var(--green-soft, #cfe9c2); color: var(--green-dark, #1f6a1a);
}
.auth-modal--signup .auth-modal-header h2 em { color: var(--green, #2f8f27); }

/* ================================================================= */
/* Phase 42D-5 — register-sent security/password banner (above card) */
/* ================================================================= */
.security-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, #fef3d6, #fde3c0);
  border: 1px solid #f3d59a; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(180,120,20,.12);
  max-width: 560px; margin: 0 auto;
}
.security-banner .sb-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: #f6b73c; color: #6b4a06; display: grid; place-items: center;
}
.security-banner .sb-ico .ico { width: 21px; height: 21px; }
.security-banner .sb-copy b { font-size: 15.5px; color: #6b4a06; display: block; }
.security-banner .sb-copy p { font-size: 13.5px; color: #7a5a1a; margin-top: 4px; line-height: 1.55; }
.security-banner .sb-more { margin-top: 8px; }
.security-banner .sb-more summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: #6b4a06; list-style: none;
}
.security-banner .sb-more summary span { text-decoration: underline; }
.security-banner .sb-more summary::-webkit-details-marker { display: none; }
.security-banner .sb-more[open] summary { margin-bottom: 4px; }
@media (max-width: 520px) {
  .security-banner { flex-direction: column; gap: 10px; }
}

/* ================================================================= */
/* Phase 41T — auth modal viewport-safe layout + scroll affordance    */
/* Scoped to .auth-modal — does not affect product/minicart modals.   */
/* ================================================================= */
.auth-modal.modal-overlay {
  padding: max(16px, env(safe-area-inset-top, 16px))
           max(16px, env(safe-area-inset-right, 16px))
           max(16px, env(safe-area-inset-bottom, 16px))
           max(16px, env(safe-area-inset-left, 16px));
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
}

.auth-modal .modal {
  width: 100%;
  max-width: min(860px, calc(100vw - 32px));
  max-height: min(calc(100dvh - 32px), calc(100vh - 32px));
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.auth-modal-header {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  padding: clamp(20px, 2.5vw, 28px) clamp(26px, 3.2vw, 40px) 0;
  padding-right: calc(clamp(26px, 3.2vw, 40px) + 44px);
}

.auth-modal-header__main {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-modal-header .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  flex: none;
}

.auth-modal-header h2 {
  color: var(--ink, #1a1f16);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.auth-modal-header .modal-eyebrow,
.auth-modal-header .auth-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.auth-modal-scroll {
  display: contents;
}

@media (min-width: 721px) {
  .auth-modal .auth-modal-scroll {
    display: contents;
    position: static;
    overflow: visible;
    min-height: 0;
  }
}

.auth-modal .modal-aside.auth-side {
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: 0;
}

.auth-modal .modal-body {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #a8b0a0 transparent;
}

.auth-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.auth-modal .modal-body::-webkit-scrollbar-thumb {
  background: #b8bfb0;
  border-radius: 6px;
  border: 2px solid #fff;
}

/* Desktop: fades live on the scrolling body only. Do not put position/overflow
   on `.auth-modal-scroll` here — that would generate a box and break
   `display: contents`, leaving two empty grid tracks under aside+body. */
.auth-modal .modal-body.modal-body-scroll-fade {
  position: relative;
}

.auth-modal .modal-body.modal-body-scroll-fade::before,
.auth-modal .modal-body.modal-body-scroll-fade::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  z-index: 2;
  /* DG-MOBILE-STOREFRONT-POLISH-20G (Mark): no scroll fades on desktop. Phones (<=720px) keep their fades, which
     live on .auth-modal-scroll (these body fades are already off there). */
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.auth-modal .modal-body.modal-body-scroll-fade::before {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.auth-modal .modal-body.modal-body-scroll-fade::after {
  bottom: 0;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.auth-modal .modal-body.modal-body-scroll-fade.is-scrollable:not(.is-at-top)::before {
  opacity: 1;
}

.auth-modal .modal-body.modal-body-scroll-fade.is-scrollable:not(.is-at-bottom)::after {
  opacity: 1;
}

.auth-cross--mobile {
  display: none;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #667);
}

html.auth-scroll-locked,
body.auth-scroll-locked {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

@media (max-width: 720px) {
  .auth-modal.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 12px))
             max(12px, env(safe-area-inset-right, 12px))
             max(12px, env(safe-area-inset-bottom, 12px))
             max(12px, env(safe-area-inset-left, 12px));
  }

  .auth-modal .modal {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    max-width: min(100%, calc(100vw - 24px));
    max-height: min(calc(100dvh - 24px), calc(100vh - 24px));
    overflow: hidden;
  }

  .auth-modal-header {
    grid-column: auto;
    grid-row: auto;
    flex: none;
    padding: 18px 22px 10px;
    padding-right: 58px;
  }

  .auth-modal-header .modal-close {
    top: 12px;
    right: 12px;
  }

  .auth-modal-header h2 {
    font-size: 24px;
  }

  .auth-modal-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): the former mask faded the pixels to transparent, which showed
       the white .modal background through the green aside as a white bottom edge. The scroll cue is now a soft
       dark-green shade on sticky pseudo-elements (no flow height): it reads on the white body and on the green
       aside alike, and disappears at the matching end. */
  }

  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::before,
  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::after {
    content: "";
    display: block;
    position: sticky;
    flex: none;
    height: 16px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::before {
    order: -1;
    top: 0;
    margin-bottom: -16px;
    background: linear-gradient(to bottom, rgba(17, 33, 19, 0.16), rgba(17, 33, 19, 0));
  }

  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::after {
    order: 99;
    bottom: 0;
    margin-top: -16px;
    background: linear-gradient(to top, rgba(17, 33, 19, 0.24), rgba(17, 33, 19, 0));
  }

  .auth-modal .auth-modal-scroll.modal-body-scroll-fade.is-scrollable:not(.is-at-top)::before,
  .auth-modal .auth-modal-scroll.modal-body-scroll-fade.is-scrollable:not(.is-at-bottom)::after {
    opacity: 1;
  }

  .auth-modal .modal-body {
    order: 1;
    grid-column: auto;
    grid-row: auto;
    overflow: visible;
    max-height: none;
    flex: 0 0 auto;
  }

  .auth-modal .modal-body.modal-body-scroll-fade::before,
  .auth-modal .modal-body.modal-body-scroll-fade::after {
    display: none;
  }

  .auth-modal .modal-aside.auth-side {
    order: 2;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    height: auto;
    flex: 0 0 auto;
    padding: 18px 22px 22px;
  }

  .auth-cross--mobile {
    display: block;
    margin-top: 20px;
  }
}

/* DG-STOREFRONT-POLISH-PACK-BANNER-19 — the phone scroll shade appears without a transition under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::before,
  .auth-modal .auth-modal-scroll.modal-body-scroll-fade::after {
    transition: none;
  }
}

/* DG-CATEGORY-BANNER-MINICART-AUTH-POPUP-19A — account focus pages render without #site-header: the card keeps a calm
   distance from the top edge (also below 390px, where the shared .container shorthand would zero .page's padding). */
body.v3-storefront.v3-account-focus section.container.page {
  padding-top: 32px;
  padding-bottom: 32px;
}

@media (max-width: 560px) {
  body.v3-storefront.v3-account-focus section.container.page {
    padding-top: 20px;
  }
}